feat(certificates): add certificate overview and reprovisioning in ops UI and API; track SmartProxy certificate events

2026-02-13 17:05:33 +00:00
parent d10896196d
commit c5e2c262b7
16 changed files with 757 additions and 15 deletions
--- a/ts_web/00_commitinfo_data.ts
+++ b/ts_web/00_commitinfo_data.ts
@@ -3,6 +3,6 @@
 */
 export const commitinfo = {
  name: '@serve.zone/dcrouter',
-  version: '5.2.0',
+  version: '5.3.0',
  description: 'A multifaceted routing service handling mail and SMS delivery functions.'
 }
--- a/ts_web/appstate.ts
+++ b/ts_web/appstate.ts
@@ -53,6 +53,14 @@ export interface INetworkState {
  error: string | null;
 }

+export interface ICertificateState {
+  certificates: interfaces.requests.ICertificateInfo[];
+  summary: { total: number; valid: number; expiring: number; expired: number; failed: number; unknown: number };
+  isLoading: boolean;
+  error: string | null;
+  lastUpdated: number;
+}
+
 export interface IEmailOpsState {
  currentView: 'queued' | 'sent' | 'failed' | 'received' | 'security';
  queuedEmails: interfaces.requests.IEmailQueueItem[];
@@ -103,7 +111,7 @@ export const configStatePart = await appState.getStatePart<IConfigState>(
 // Determine initial view from URL path
 const getInitialView = (): string => {
  const path = typeof window !== 'undefined' ? window.location.pathname : '/';
-  const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security'];
+  const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security', 'certificates'];
  const segments = path.split('/').filter(Boolean);
  const view = segments[0];
  return validViews.includes(view) ? view : 'overview';
@@ -162,6 +170,18 @@ export const emailOpsStatePart = await appState.getStatePart<IEmailOpsState>(
  'soft'
 );

+export const certificateStatePart = await appState.getStatePart<ICertificateState>(
+  'certificates',
+  {
+    certificates: [],
+    summary: { total: 0, valid: 0, expiring: 0, expired: 0, failed: 0, unknown: 0 },
+    isLoading: false,
+    error: null,
+    lastUpdated: 0,
+  },
+  'soft'
+);
+
 // Actions for state management
 interface IActionContext {
  identity: interfaces.data.IIdentity | null;
@@ -340,7 +360,14 @@ export const setActiveViewAction = uiStatePart.createAction<string>(async (state
      networkStatePart.dispatchAction(fetchNetworkStatsAction, null);
    }, 100);
  }
-  
+
+  // If switching to certificates view, ensure we fetch certificate data
+  if (viewName === 'certificates' && currentState.activeView !== 'certificates') {
+    setTimeout(() => {
+      certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
+    }, 100);
+  }
+
  return {
    ...currentState,
    activeView: viewName,
@@ -641,6 +668,66 @@ export const removeFromSuppressionListAction = emailOpsStatePart.createAction<st
  }
 );

+// ============================================================================
+// Certificate Actions
+// ============================================================================
+
+export const fetchCertificateOverviewAction = certificateStatePart.createAction(async (statePartArg) => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState();
+
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetCertificateOverview
+    >('/typedrequest', 'getCertificateOverview');
+
+    const response = await request.fire({
+      identity: context.identity,
+    });
+
+    return {
+      certificates: response.certificates,
+      summary: response.summary,
+      isLoading: false,
+      error: null,
+      lastUpdated: Date.now(),
+    };
+  } catch (error) {
+    return {
+      ...currentState,
+      isLoading: false,
+      error: error instanceof Error ? error.message : 'Failed to fetch certificate overview',
+    };
+  }
+});
+
+export const reprovisionCertificateAction = certificateStatePart.createAction<string>(
+  async (statePartArg, routeName) => {
+    const context = getActionContext();
+    const currentState = statePartArg.getState();
+
+    try {
+      const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_ReprovisionCertificate
+      >('/typedrequest', 'reprovisionCertificate');
+
+      await request.fire({
+        identity: context.identity,
+        routeName,
+      });
+
+      // Re-fetch overview after reprovisioning
+      await certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
+      return statePartArg.getState();
+    } catch (error) {
+      return {
+        ...currentState,
+        error: error instanceof Error ? error.message : 'Failed to reprovision certificate',
+      };
+    }
+  }
+);
+
 // Combined refresh action for efficient polling
 async function dispatchCombinedRefreshAction() {
  const context = getActionContext();
@@ -725,6 +812,15 @@ async function dispatchCombinedRefreshAction() {
        });
      }
    }
+
+    // Refresh certificate data if on certificates view
+    if (currentView === 'certificates') {
+      try {
+        await certificateStatePart.dispatchAction(fetchCertificateOverviewAction, null);
+      } catch (error) {
+        console.error('Certificate refresh failed:', error);
+      }
+    }
  } catch (error) {
    console.error('Combined refresh failed:', error);
  }
--- a/ts_web/elements/index.ts
+++ b/ts_web/elements/index.ts
@@ -5,4 +5,5 @@ export * from './ops-view-emails.js';
 export * from './ops-view-logs.js';
 export * from './ops-view-config.js';
 export * from './ops-view-security.js';
+export * from './ops-view-certificates.js';
 export * from './shared/index.js';
--- a/ts_web/elements/ops-dashboard.ts
+++ b/ts_web/elements/ops-dashboard.ts
@@ -19,6 +19,7 @@ import { OpsViewEmails } from './ops-view-emails.js';
 import { OpsViewLogs } from './ops-view-logs.js';
 import { OpsViewConfig } from './ops-view-config.js';
 import { OpsViewSecurity } from './ops-view-security.js';
+import { OpsViewCertificates } from './ops-view-certificates.js';

@customElement('ops-dashboard')
 export class OpsDashboard extends DeesElement {
@@ -61,6 +62,10 @@ export class OpsDashboard extends DeesElement {
      name: 'Security',
      element: OpsViewSecurity,
    },
+    {
+      name: 'Certificates',
+      element: OpsViewCertificates,
+    },
  ];

  /**
--- a/ts_web/elements/ops-view-certificates.ts
+++ b/ts_web/elements/ops-view-certificates.ts
@@ -0,0 +1,355 @@
+import {
+  DeesElement,
+  html,
+  customElement,
+  type TemplateResult,
+  css,
+  state,
+  cssManager,
+} from '@design.estate/dees-element';
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../dist_ts_interfaces/index.js';
+import { viewHostCss } from './shared/css.js';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'ops-view-certificates': OpsViewCertificates;
+  }
+}
+
+@customElement('ops-view-certificates')
+export class OpsViewCertificates extends DeesElement {
+  @state()
+  accessor certState: appstate.ICertificateState = appstate.certificateStatePart.getState();
+
+  constructor() {
+    super();
+    const sub = appstate.certificateStatePart.state.subscribe((newState) => {
+      this.certState = newState;
+    });
+    this.rxSubscriptions.push(sub);
+  }
+
+  async connectedCallback() {
+    await super.connectedCallback();
+    await appstate.certificateStatePart.dispatchAction(appstate.fetchCertificateOverviewAction, null);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .certificatesContainer {
+        display: flex;
+        flex-direction: column;
+        gap: 24px;
+      }
+
+      .statusBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 10px;
+        border-radius: 12px;
+        font-size: 12px;
+        font-weight: 600;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+      }
+
+      .statusBadge.valid {
+        background: ${cssManager.bdTheme('#dcfce7', '#14532d')};
+        color: ${cssManager.bdTheme('#166534', '#4ade80')};
+      }
+
+      .statusBadge.expiring {
+        background: ${cssManager.bdTheme('#fff7ed', '#431407')};
+        color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
+      }
+
+      .statusBadge.expired,
+      .statusBadge.failed {
+        background: ${cssManager.bdTheme('#fef2f2', '#450a0a')};
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+
+      .statusBadge.provisioning {
+        background: ${cssManager.bdTheme('#eff6ff', '#172554')};
+        color: ${cssManager.bdTheme('#1e40af', '#60a5fa')};
+      }
+
+      .statusBadge.unknown {
+        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
+        color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
+      }
+
+      .sourceBadge {
+        display: inline-flex;
+        align-items: center;
+        padding: 3px 8px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 500;
+        background: ${cssManager.bdTheme('#f3f4f6', '#1f2937')};
+        color: ${cssManager.bdTheme('#374151', '#d1d5db')};
+      }
+
+      .domainPills {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 4px;
+      }
+
+      .domainPill {
+        display: inline-flex;
+        align-items: center;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        background: ${cssManager.bdTheme('#e0e7ff', '#1e1b4b')};
+        color: ${cssManager.bdTheme('#3730a3', '#a5b4fc')};
+      }
+
+      .moreCount {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+        padding: 2px 6px;
+      }
+
+      .errorText {
+        font-size: 12px;
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+        max-width: 200px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .expiryInfo {
+        font-size: 12px;
+      }
+
+      .expiryInfo .daysLeft {
+        font-size: 11px;
+        color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
+      }
+
+      .expiryInfo .daysLeft.warn {
+        color: ${cssManager.bdTheme('#9a3412', '#fb923c')};
+      }
+
+      .expiryInfo .daysLeft.danger {
+        color: ${cssManager.bdTheme('#991b1b', '#f87171')};
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const { summary } = this.certState;
+
+    return html`
+      <ops-sectionheading>Certificates</ops-sectionheading>
+
+      <div class="certificatesContainer">
+        ${this.renderStatsTiles(summary)}
+        ${this.renderCertificateTable()}
+      </div>
+    `;
+  }
+
+  private renderStatsTiles(summary: appstate.ICertificateState['summary']): TemplateResult {
+    const tiles: IStatsTile[] = [
+      {
+        id: 'total',
+        title: 'Total Certificates',
+        value: summary.total,
+        type: 'number',
+        icon: 'shieldHalved',
+        color: '#3b82f6',
+      },
+      {
+        id: 'valid',
+        title: 'Valid',
+        value: summary.valid,
+        type: 'number',
+        icon: 'check',
+        color: '#22c55e',
+      },
+      {
+        id: 'expiring',
+        title: 'Expiring Soon',
+        value: summary.expiring,
+        type: 'number',
+        icon: 'clock',
+        color: '#f59e0b',
+      },
+      {
+        id: 'problems',
+        title: 'Failed / Expired',
+        value: summary.failed + summary.expired,
+        type: 'number',
+        icon: 'triangleExclamation',
+        color: '#ef4444',
+      },
+    ];
+
+    return html`
+      <dees-statsgrid
+        .tiles=${tiles}
+        .minTileWidth=${200}
+        .gridActions=${[
+          {
+            name: 'Refresh',
+            iconName: 'arrowsRotate',
+            action: async () => {
+              await appstate.certificateStatePart.dispatchAction(
+                appstate.fetchCertificateOverviewAction,
+                null
+              );
+            },
+          },
+        ]}
+      ></dees-statsgrid>
+    `;
+  }
+
+  private renderCertificateTable(): TemplateResult {
+    return html`
+      <dees-table
+        .data=${this.certState.certificates}
+        .displayFunction=${(cert: interfaces.requests.ICertificateInfo) => ({
+          Route: cert.routeName,
+          Domains: this.renderDomainPills(cert.domains),
+          Status: this.renderStatusBadge(cert.status),
+          Source: this.renderSourceBadge(cert.source),
+          Expires: this.renderExpiry(cert.expiryDate),
+          Error: cert.error
+            ? html`<span class="errorText" title="${cert.error}">${cert.error}</span>`
+            : '',
+        })}
+        .dataActions=${[
+          {
+            name: 'Reprovision',
+            iconName: 'arrowsRotate',
+            type: ['inRow'],
+            actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
+              const cert = actionData.item;
+              if (!cert.canReprovision) {
+                const { DeesToast } = await import('@design.estate/dees-catalog');
+                DeesToast.show({
+                  message: 'This certificate source does not support reprovisioning.',
+                  type: 'warning',
+                  duration: 3000,
+                });
+                return;
+              }
+              await appstate.certificateStatePart.dispatchAction(
+                appstate.reprovisionCertificateAction,
+                cert.routeName,
+              );
+              const { DeesToast } = await import('@design.estate/dees-catalog');
+              DeesToast.show({
+                message: `Reprovisioning triggered for ${cert.routeName}`,
+                type: 'success',
+                duration: 3000,
+              });
+            },
+          },
+          {
+            name: 'View Details',
+            iconName: 'magnifyingGlass',
+            type: ['doubleClick', 'contextmenu'],
+            actionFunc: async (actionData: { item: interfaces.requests.ICertificateInfo }) => {
+              const cert = actionData.item;
+              const { DeesModal } = await import('@design.estate/dees-catalog');
+              await DeesModal.createAndShow({
+                heading: `Certificate: ${cert.routeName}`,
+                content: html`
+                  <div style="padding: 20px;">
+                    <dees-dataview-codebox
+                      .heading=${'Certificate Details'}
+                      progLang="json"
+                      .codeToDisplay=${JSON.stringify(cert, null, 2)}
+                    ></dees-dataview-codebox>
+                  </div>
+                `,
+                menuOptions: [
+                  {
+                    name: 'Copy Route Name',
+                    iconName: 'copy',
+                    action: async () => {
+                      await navigator.clipboard.writeText(cert.routeName);
+                    },
+                  },
+                ],
+              });
+            },
+          },
+        ]}
+        heading1="Certificate Status"
+        heading2="TLS certificates across all routes"
+        searchable
+        .pagination=${true}
+        .paginationSize=${50}
+        dataName="certificate"
+      ></dees-table>
+    `;
+  }
+
+  private renderDomainPills(domains: string[]): TemplateResult {
+    const maxShow = 3;
+    const visible = domains.slice(0, maxShow);
+    const remaining = domains.length - maxShow;
+
+    return html`
+      <span class="domainPills">
+        ${visible.map((d) => html`<span class="domainPill">${d}</span>`)}
+        ${remaining > 0 ? html`<span class="moreCount">+${remaining} more</span>` : ''}
+      </span>
+    `;
+  }
+
+  private renderStatusBadge(status: interfaces.requests.TCertificateStatus): TemplateResult {
+    return html`<span class="statusBadge ${status}">${status}</span>`;
+  }
+
+  private renderSourceBadge(source: interfaces.requests.TCertificateSource): TemplateResult {
+    const labels: Record<string, string> = {
+      acme: 'ACME',
+      'provision-function': 'Custom',
+      static: 'Static',
+      none: 'None',
+    };
+    return html`<span class="sourceBadge">${labels[source] || source}</span>`;
+  }
+
+  private renderExpiry(expiryDate?: string): TemplateResult {
+    if (!expiryDate) {
+      return html`<span style="color: ${cssManager.bdTheme('#9ca3af', '#4b5563')}">--</span>`;
+    }
+
+    const expiry = new Date(expiryDate);
+    const now = new Date();
+    const daysLeft = Math.ceil((expiry.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+
+    const dateStr = expiry.toLocaleDateString();
+    let daysClass = '';
+    let daysText = '';
+
+    if (daysLeft < 0) {
+      daysClass = 'danger';
+      daysText = `(expired)`;
+    } else if (daysLeft < 30) {
+      daysClass = 'warn';
+      daysText = `(${daysLeft}d left)`;
+    } else {
+      daysText = `(${daysLeft}d left)`;
+    }
+
+    return html`
+      <span class="expiryInfo">
+        ${dateStr} <span class="daysLeft ${daysClass}">${daysText}</span>
+      </span>
+    `;
+  }
+}
--- a/ts_web/router.ts
+++ b/ts_web/router.ts
@@ -3,7 +3,7 @@ import * as appstate from './appstate.js';

 const SmartRouter = plugins.domtools.plugins.smartrouter.SmartRouter;

-export const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security'] as const;
+export const validViews = ['overview', 'network', 'emails', 'logs', 'configuration', 'security', 'certificates'] as const;
 export const validEmailFolders = ['queued', 'sent', 'failed', 'security'] as const;

 export type TValidView = typeof validViews[number];