hiveiq-src/hiveops-aria
4
0
Fork 0
Code Issues 8 Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(aria): replace severity pills with select dropdown in ThreatEvents filter sidebar
CD - Develop / build-and-deploy (push) Failing after 12m49s
Details

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Johannes
2026-06-15 16:49:36 -04:00
parent b42e1548bc
commit 02d99c8ca2
1 changed files with 10 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/ThreatEvents.svelte
+10 -21
View File
@@ -83,12 +83,6 @@
load();
}
function setSeverity(sev: ThreatSeverity | '') {
severityFilter = sev;
page = 0;
load();
}
// Auto-refresh
const REFRESH_SECONDS = 60;
const CIRCUMFERENCE = 2 * Math.PI * 14;
@@ -196,16 +190,13 @@
<div class="filter-section">
<label class="filter-section-label">Severity</label>
<div class="status-pills">
<select class="filter-select" bind:value={severityFilter}
on:change={() => { page = 0; load(); }}>
<option value="">All Severities</option>
{#each SEVERITIES as sev}
<button
class="status-pill"
class:active={severityFilter === sev}
style={severityFilter === sev ? `background:${SEV_COLOR[sev]};border-color:${SEV_COLOR[sev]}` : `border-left:3px solid ${SEV_COLOR[sev]}`}
on:click={() => setSeverity(severityFilter === sev ? '' : sev)}
>{sev}</button>
<option value={sev}>{sev}</option>
{/each}
</div>
</select>
</div>
</div>
{/if}
@@ -219,8 +210,8 @@
{#if severityFilter}
<span class="filter-tag" style="border-color:{SEV_COLOR[severityFilter]}">
<span class="filter-tag-dot" style="background:{SEV_COLOR[severityFilter]}"></span>
{severityFilter}
<button class="filter-tag-remove" on:click={() => setSeverity('')}>&times;</button>
Severity: {severityFilter}
<button class="filter-tag-remove" on:click={() => { severityFilter = ''; page = 0; load(); }}>&times;</button>
</span>
{/if}
{#if deviceSearch}
@@ -347,9 +338,7 @@
.search-input { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: var(--font-size-body-sm); width: 100%; background: white; }
.search-input:focus { outline: none; border-color: #3b82f6; }
.status-pills { display: flex; flex-direction: column; gap: 4px; }
.status-pill { padding: 5px 10px; border-radius: 6px; border: 1px solid #d1d5db; background: white; font-size: var(--font-size-caption); font-weight: 600; cursor: pointer; color: #374151; text-align: left; transition: all 0.15s; }
.status-pill.active { color: white !important; }
.filter-select { padding: 0.4rem 0.6rem; border: 1px solid #d1d5db; border-radius: 6px; font-size: var(--font-size-body-sm); width: 100%; background: white; color: #374151; }
.sidebar-clear-all-btn { border: none; background: #fee2e2; color: #dc2626; border-radius: 4px; padding: 0.3rem 0.6rem; cursor: pointer; font-size: var(--font-size-tiny); font-weight: 600; text-align: left; }
.sidebar-clear-all-btn:hover { background: #fecaca; }
@@ -435,8 +424,8 @@
:global(.dark-mode) .filter-sidebar-title { color: #9ca3af; }
:global(.dark-mode) .sidebar-toggle-btn { border-color: #4b5563; color: #9ca3af; }
:global(.dark-mode) .sidebar-toggle-btn:hover { background: #374151; }
:global(.dark-mode) .search-input { background: #283040; border-color: #4b5563; color: #e2e8f0; }
:global(.dark-mode) .status-pill { background: #1e293b; border-color: #334155; color: #94a3b8; }
:global(.dark-mode) .search-input { background: #283040; border-color: #4b5563; color: #e2e8f0; }
:global(.dark-mode) .filter-select { background: #283040; border-color: #4b5563; color: #e2e8f0; }
:global(.dark-mode) .table-card { background: #1f2937; }
:global(.dark-mode) thead { background: #111827; border-bottom-color: #374151; }