101 lines
6.1 KiB
Plaintext
101 lines
6.1 KiB
Plaintext
{{define "content"}}
|
|
<style>
|
|
.builder-layout { display: flex; gap: 20px; align-items: stretch; margin-top: 20px; }
|
|
.builder-lhs { flex: 1.5; display: flex; flex-direction: column; overflow: hidden; }
|
|
.builder-rhs { flex: 1; display: flex; flex-direction: column; }
|
|
|
|
.builder-group { margin-bottom: 15px; }
|
|
.builder-label { display: block; margin-bottom: 5px; font-weight: 600; font-size: 0.9rem; color: var(--text-muted); }
|
|
.builder-input, .builder-select {
|
|
width: 100%; padding: 10px; border: 1px solid var(--border);
|
|
border-radius: 4px; font-family: inherit; box-sizing: border-box;
|
|
background: var(--card-bg); color: var(--text-main);
|
|
}
|
|
.builder-input:focus, .builder-select:focus { outline: none; border-color: var(--primary); }
|
|
|
|
.mapping-table td { vertical-align: middle; }
|
|
</style>
|
|
|
|
<div class="container">
|
|
<header style="padding: 0; box-shadow: none; border: none; margin-bottom: 10px; background: transparent;">
|
|
<h2>🔧 Adapter Builder: <span style="color: var(--text-muted); font-weight: normal;">{{.Filename}}</span></h2>
|
|
</header>
|
|
|
|
<div class="builder-layout">
|
|
<div class="card builder-lhs" style="padding: 0;">
|
|
<div class="toolbar">
|
|
<h3 style="font-size: 1.1rem; margin: 0;">1. Data Preview</h3>
|
|
<label for="local-file" class="btn btn-secondary" style="margin: 0;">
|
|
Load {{.Filename}}
|
|
</label>
|
|
<input type="file" id="local-file" accept=".csv,.json" style="display: none;">
|
|
</div>
|
|
<div class="scroll-container" style="padding: 20px; overflow-x: auto; max-height: 65vh; overflow-y: auto;">
|
|
<div id="preview-placeholder" style="text-align: center; color: var(--text-muted); margin-top: 40px;">
|
|
<p>Click "Load" to generate a data preview and extract column headers.</p>
|
|
</div>
|
|
<div id="preview-table-container"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card builder-rhs">
|
|
<h3 style="font-size: 1.1rem; margin-top: 0; margin-bottom: 20px; color: var(--primary);">2. Schema Mapping</h3>
|
|
|
|
<form id="adapter-form" style="display: flex; flex-direction: column; height: 100%;">
|
|
<div style="display: flex; gap: 15px;">
|
|
<div class="builder-group" style="flex: 1;">
|
|
<label class="builder-label">Adapter Name</label>
|
|
<input type="text" id="name" class="builder-input" placeholder="e.g. AcmeScan" required>
|
|
</div>
|
|
<div class="builder-group" style="flex: 1;">
|
|
<label class="builder-label">Source Name</label>
|
|
<input type="text" id="source_name" class="builder-input" placeholder="e.g. Acme" required>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="builder-group">
|
|
<label class="builder-label">Findings JSON Path <span style="font-weight: normal; font-size: 0.8rem;">('.' for CSV, 'data.alerts' for JSON)</span></label>
|
|
<input type="text" id="findings_path" class="builder-input" value="." required>
|
|
</div>
|
|
|
|
<hr style="border: 0; border-top: 1px solid var(--border); margin: 20px 0;">
|
|
<h4 style="margin-bottom: 15px; font-size: 1rem;">Map to Core Fields</h4>
|
|
|
|
<table class="mapping-table" style="margin-top: 0;">
|
|
<tbody>
|
|
<tr>
|
|
<td width="35%"><strong>Title <span style="color: var(--critical);">*</span></strong></td>
|
|
<td><select id="mapping_title" class="builder-select source-header" required><option value="">-- Load file --</option></select></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Asset <span style="color: var(--critical);">*</span></strong></td>
|
|
<td><select id="mapping_asset" class="builder-select source-header" required><option value="">-- Load file --</option></select></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Severity <span style="color: var(--critical);">*</span></strong></td>
|
|
<td><select id="mapping_severity" class="builder-select source-header" required><option value="">-- Load file --</option></select></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Description</strong></td>
|
|
<td><select id="mapping_description" class="builder-select source-header"><option value="">-- Optional --</option></select></td>
|
|
</tr>
|
|
<tr>
|
|
<td><strong>Remediation</strong></td>
|
|
<td><select id="mapping_remediation" class="builder-select source-header"><option value="">-- Optional --</option></select></td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div style="margin-top: auto; padding-top: 20px;">
|
|
<button type="submit" class="btn disabled" id="save-btn" style="width: 100%; background: var(--primary); color: white; border: none; padding: 12px;">Save & Enable Adapter</button>
|
|
</div>
|
|
<div style="display: flex; gap: 15px; margin-top: 20px;">
|
|
<button class="btn" style="background: #2563eb; color: white;" onclick="saveAdapter()">💾 Save to Database</button>
|
|
<button class="btn btn-secondary" onclick="exportAdapterJSON()">⬇️ Export JSON Profile</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="/static/builder.js"></script>
|
|
{{end}} |