feat(sw-dash): Click method tile to filter by that method

This commit is contained in:
2025-12-05 00:14:55 +00:00
parent 2ad38dece3
commit 0f974701d4

View File

@@ -237,6 +237,17 @@ export class SwDashRequests extends LitElement {
background: var(--bg-tertiary);
border-radius: var(--radius-sm);
padding: var(--space-2);
cursor: pointer;
transition: background 0.15s ease;
}
.method-stat-card:hover {
background: var(--bg-secondary);
}
.method-stat-card.active {
background: rgba(99, 102, 241, 0.15);
border: 1px solid var(--accent-primary);
}
.method-stat-name {
@@ -504,6 +515,11 @@ export class SwDashRequests extends LitElement {
// Local filtering - no HTTP request
}
private setMethodFilter(method: string): void {
// Toggle: clicking the same method clears the filter
this.methodFilter = this.methodFilter === method ? '' : method;
}
private handleSearch(e: Event): void {
this.searchText = (e.target as HTMLInputElement).value.toLowerCase();
}
@@ -781,7 +797,10 @@ export class SwDashRequests extends LitElement {
<div class="method-stats-title">Methods</div>
<div class="method-stats-grid">
${Object.entries(this.stats.methodCounts).slice(0, 8).map(([method, data]) => html`
<div class="method-stat-card">
<div
class="method-stat-card ${this.methodFilter === method ? 'active' : ''}"
@click="${() => this.setMethodFilter(method)}"
>
<div class="method-stat-name" title="${method}">${method}</div>
<div class="method-stat-details">
<span>${data.requests} req</span>
@@ -813,9 +832,9 @@ export class SwDashRequests extends LitElement {
</select>
<span class="filter-label">Method:</span>
<select class="filter-select" @change="${this.handleMethodFilterChange}">
<select class="filter-select" .value="${this.methodFilter}" @change="${this.handleMethodFilterChange}">
<option value="">All Methods</option>
${this.methods.map(m => html`<option value="${m}">${m}</option>`)}
${this.methods.map(m => html`<option value="${m}" ?selected="${this.methodFilter === m}">${m}</option>`)}
</select>
<input