feat(ops-ui): add column filters to operations tables across admin views

ts_web/elements/ops-view-apitokens.ts

@@ -109,6 +109,7 @@ export class OpsViewApiTokens extends DeesElement {
           .data=${apiTokens}
           .dataName=${'token'}
           .searchable=${true}
+          .showColumnFilters=${true}
           .displayFunction=${(token: interfaces.data.IApiTokenInfo) => ({
             name: token.name,
             scopes: this.renderScopePills(token.scopes),

ts_web/elements/ops-view-certificates.ts

@@ -228,6 +228,7 @@ export class OpsViewCertificates extends DeesElement {
     return html`
       <dees-table
         .data=${this.certState.certificates}
+        .showColumnFilters=${true}
         .displayFunction=${(cert: interfaces.requests.ICertificateInfo) => ({
           Domain: cert.domain,
           Routes: this.renderRoutePills(cert.routeNames),

ts_web/elements/ops-view-network.ts

@@ -323,6 +323,7 @@ export class OpsViewNetwork extends DeesElement {
         <!-- Requests Table -->
         <dees-table
           .data=${this.networkRequests}
+          .showColumnFilters=${true}
           .displayFunction=${(req: INetworkRequest) => ({
             Time: new Date(req.timestamp).toLocaleTimeString(),
             Protocol: html`<span class="protocolBadge ${req.protocol}">${req.protocol.toUpperCase()}</span>`,
@@ -603,6 +604,7 @@ export class OpsViewNetwork extends DeesElement {
     return html`
       <dees-table
         .data=${this.networkState.topIPs}
+        .showColumnFilters=${true}
         .displayFunction=${(ipData: { ip: string; count: number }) => {
           const bw = bandwidthByIP.get(ipData.ip);
           return {
@@ -630,6 +632,7 @@ export class OpsViewNetwork extends DeesElement {
     return html`
       <dees-table
         .data=${backends}
+        .showColumnFilters=${true}
         .displayFunction=${(item: interfaces.data.IBackendInfo) => {
           const totalErrors = item.connectErrors + item.handshakeErrors + item.requestErrors;
           const protocolClass = item.protocol.toLowerCase().replace(/[^a-z0-9]/g, '');

ts_web/elements/ops-view-networktargets.ts

@@ -71,6 +71,7 @@ export class OpsViewNetworkTargets extends DeesElement {
           .heading1=${'Network Targets'}
           .heading2=${'Reusable host:port destinations for routes'}
           .data=${targets}
+          .showColumnFilters=${true}
           .displayFunction=${(target: interfaces.data.INetworkTarget) => ({
             Name: target.name,
             Host: Array.isArray(target.host) ? target.host.join(', ') : target.host,

ts_web/elements/ops-view-remoteingress.ts

@@ -220,6 +220,7 @@ export class OpsViewRemoteIngress extends DeesElement {
           .heading1=${'Edge Nodes'}
           .heading2=${'Manage remote ingress edge registrations'}
           .data=${this.riState.edges}
+          .showColumnFilters=${true}
           .displayFunction=${(edge: interfaces.data.IRemoteIngress) => ({
             name: edge.name,
             status: this.getEdgeStatusHtml(edge),

ts_web/elements/ops-view-security.ts

@@ -206,6 +206,7 @@ export class OpsViewSecurity extends DeesElement {
         .heading1=${'Security Events'}
         .heading2=${'Last 24 hours'}
         .data=${this.getSecurityEvents(metrics)}
+        .showColumnFilters=${true}
         .displayFunction=${(item) => ({
           'Time': new Date(item.timestamp).toLocaleTimeString(),
           'Event': item.event,
@@ -241,6 +242,7 @@ export class OpsViewSecurity extends DeesElement {
         .heading1=${'Blocked IP Addresses'}
         .heading2=${'IPs blocked due to suspicious activity'}
         .data=${blockedIPs.map((ip) => ({ ip }))}
+        .showColumnFilters=${true}
         .displayFunction=${(item) => ({
           'IP Address': item.ip,
           'Reason': 'Suspicious activity',
@@ -314,6 +316,7 @@ export class OpsViewSecurity extends DeesElement {
         .heading1=${'Login History'}
         .heading2=${'Recent authentication attempts'}
         .data=${loginHistory}
+        .showColumnFilters=${true}
         .displayFunction=${(item) => ({
           'Time': new Date(item.timestamp).toLocaleString(),
           'Username': item.username,

ts_web/elements/ops-view-sourceprofiles.ts

@@ -71,6 +71,7 @@ export class OpsViewSourceProfiles extends DeesElement {
           .heading1=${'Source Profiles'}
           .heading2=${'Reusable source configurations for routes'}
           .data=${profiles}
+          .showColumnFilters=${true}
           .displayFunction=${(profile: interfaces.data.ISourceProfile) => ({
             Name: profile.name,
             Description: profile.description || '-',

ts_web/elements/ops-view-targetprofiles.ts

@@ -84,6 +84,7 @@ export class OpsViewTargetProfiles extends DeesElement {
           .heading1=${'Target Profiles'}
           .heading2=${'Define what resources VPN clients can access'}
           .data=${profiles}
+          .showColumnFilters=${true}
           .displayFunction=${(profile: interfaces.data.ITargetProfile) => ({
             Name: profile.name,
             Description: profile.description || '-',

ts_web/elements/ops-view-vpn.ts

@@ -305,6 +305,7 @@ export class OpsViewVpn extends DeesElement {
         .heading1=${'VPN Clients'}
         .heading2=${'Manage WireGuard and SmartVPN client registrations'}
         .data=${clients}
+        .showColumnFilters=${true}
         .displayFunction=${(client: interfaces.data.IVpnClient) => {
           const conn = this.getConnectedInfo(client);
           let statusHtml;