@serve.zone/dcrouter 18.2.1 → 18.4.0

package/ts_web/appstate/email-ops.ts

@@ -6,18 +6,32 @@ import { captureRealtimeTicket, isRealtimeTicketCurrent } from './realtime.js';
 
 export interface IEmailOpsState {
   emails: interfaces.requests.IEmail[];
+  traffic: interfaces.requests.IEmailLogTraffic | null;
+  searchQuery: string;
+  selectedRange: { from: number; to: number } | null;
+  securityFindings: interfaces.requests.IEmailSecurityFinding[];
+  securityFindingsLoading: boolean;
+  securityFindingsError: string | null;
   isLoading: boolean;
   error: string | null;
   lastUpdated: number;
+  lastSecurityUpdated: number;
 }
 
 export const emailOpsStatePart = await appState.getStatePart<IEmailOpsState>(
   'emailOps',
   {
     emails: [],
+    traffic: null,
+    searchQuery: '',
+    selectedRange: null,
+    securityFindings: [],
+    securityFindingsLoading: false,
+    securityFindingsError: null,
     isLoading: false,
     error: null,
     lastUpdated: 0,
+    lastSecurityUpdated: 0,
   },
   'soft'
 );
@@ -25,11 +39,65 @@ export const emailOpsStatePart = await appState.getStatePart<IEmailOpsState>(
 // Email Operations Actions
 // ============================================================================
 
+let activeSearchQuery = '';
+let activeSelectedRange: { from: number; to: number } | null = null;
+let emailListRequestGeneration = 0;
+let securityFindingsRequestGeneration = 0;
+
+export interface IEmailOpsFetchOptions {
+  searchQuery?: string;
+  selectedRange?: { from: number; to: number } | null;
+}
+
+export function setActiveEmailSearchQuery(searchQueryArg: string): string {
+  const nextSearchQuery = searchQueryArg.trim().slice(0, 200);
+  if (nextSearchQuery === activeSearchQuery) return activeSearchQuery;
+  activeSearchQuery = nextSearchQuery;
+  emailListRequestGeneration++;
+  const currentState = emailOpsStatePart.getState()!;
+  emailOpsStatePart.setState({
+    ...currentState,
+    searchQuery: activeSearchQuery,
+  });
+  return activeSearchQuery;
+}
+
+export function setActiveEmailSelectedRange(
+  rangeArg: { from: number; to: number } | null,
+): { from: number; to: number } | null {
+  if (rangeArg && (
+    !Number.isSafeInteger(rangeArg.from)
+    || !Number.isSafeInteger(rangeArg.to)
+    || rangeArg.from < 0
+    || rangeArg.to <= rangeArg.from
+  )) {
+    throw new Error('Invalid email time range');
+  }
+  activeSelectedRange = rangeArg ? { ...rangeArg } : null;
+  emailListRequestGeneration++;
+  const currentState = emailOpsStatePart.getState()!;
+  emailOpsStatePart.setState({
+    ...currentState,
+    selectedRange: activeSelectedRange,
+  });
+  return activeSelectedRange;
+}
+
 // Fetch All Emails Action
-export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (statePartArg): Promise<IEmailOpsState> => {
+export const fetchAllEmailsAction = emailOpsStatePart.createAction<IEmailOpsFetchOptions | null>(async (
+  statePartArg,
+  dataArg,
+): Promise<IEmailOpsState> => {
   const context = getActionContext();
   const currentState = statePartArg.getState()!;
   if (!context.identity) return currentState;
+  const searchQuery = dataArg?.searchQuery !== undefined
+    ? setActiveEmailSearchQuery(dataArg.searchQuery)
+    : activeSearchQuery;
+  const selectedRange = dataArg?.selectedRange !== undefined
+    ? setActiveEmailSelectedRange(dataArg.selectedRange)
+    : activeSelectedRange;
+  const requestGeneration = ++emailListRequestGeneration;
   const ticket = captureRealtimeTicket(['emailQueue', 'smtpAttempts']);
 
   try {
@@ -39,18 +107,29 @@ export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (stateP
 
     const response = await request.fire({
       identity: context.identity,
+      ...(searchQuery ? { search: searchQuery } : {}),
+      ...(selectedRange ? selectedRange : {}),
     });
-    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
+    if (
+      requestGeneration !== emailListRequestGeneration
+      || !isRealtimeTicketCurrent(ticket)
+    ) return statePartArg.getState()!;
 
     return {
       ...statePartArg.getState()!,
       emails: response.emails,
+      traffic: response.traffic,
+      searchQuery,
       isLoading: false,
+      selectedRange,
       error: null,
       lastUpdated: Date.now(),
     };
   } catch (error) {
-    if (!isRealtimeTicketCurrent(ticket)) return statePartArg.getState()!;
+    if (
+      requestGeneration !== emailListRequestGeneration
+      || !isRealtimeTicketCurrent(ticket)
+    ) return statePartArg.getState()!;
     return {
       ...statePartArg.getState()!,
       isLoading: false,
@@ -59,6 +138,53 @@ export const fetchAllEmailsAction = emailOpsStatePart.createAction(async (stateP
   }
 });
 
+export const fetchEmailSecurityFindingsAction = emailOpsStatePart.createAction<void>(async (
+  statePartArg,
+): Promise<IEmailOpsState> => {
+  const context = getActionContext();
+  const currentState = statePartArg.getState()!;
+  if (!context.identity) return currentState;
+  const requestGeneration = ++securityFindingsRequestGeneration;
+  const ticket = captureRealtimeTicket(['emailQueue', 'smtpAttempts']);
+  statePartArg.setState({
+    ...currentState,
+    securityFindingsLoading: true,
+    securityFindingsError: null,
+  });
+  try {
+    const request = new plugins.domtools.plugins.typedrequest.TypedRequest<
+      interfaces.requests.IReq_GetEmailSecurityFindings
+    >('/typedrequest', 'getEmailSecurityFindings');
+    const response = await request.fire({
+      identity: context.identity,
+      limit: 200,
+    });
+    if (
+      requestGeneration !== securityFindingsRequestGeneration
+      || !isRealtimeTicketCurrent(ticket)
+    ) return statePartArg.getState()!;
+    return {
+      ...statePartArg.getState()!,
+      securityFindings: response.findings,
+      securityFindingsLoading: false,
+      securityFindingsError: null,
+      lastSecurityUpdated: Date.now(),
+    };
+  } catch (error) {
+    if (
+      requestGeneration !== securityFindingsRequestGeneration
+      || !isRealtimeTicketCurrent(ticket)
+    ) return statePartArg.getState()!;
+    return {
+      ...statePartArg.getState()!,
+      securityFindingsLoading: false,
+      securityFindingsError: error instanceof Error
+        ? error.message
+        : 'Failed to fetch email security findings',
+    };
+  }
+});
+
 // ============================================================================
 export async function fetchEmailDetailSnapshot(
   emailIdArg: string,

package/ts_web/appstate/runtime.ts

@@ -11,7 +11,11 @@ import { certificateStatePart, fetchCertificateOverviewAction } from './certific
 import { remoteIngressStatePart, fetchRemoteIngressAction } from './remoteingress.js';
 import { vpnStatePart, fetchVpnAction } from './vpn.js';
 import { emailDomainsStatePart, fetchEmailDomainsAction } from './email-domains.js';
-import { emailOpsStatePart, fetchAllEmailsAction } from './email-ops.js';
+import {
+  emailOpsStatePart,
+  fetchAllEmailsAction,
+  fetchEmailSecurityFindingsAction,
+} from './email-ops.js';
 import {
   domainsStatePart,
   fetchDnsRecordsForDomainAction,
@@ -65,7 +69,14 @@ const refreshRealtimeGroup = async (groupArg: TRealtimeRefreshGroup): Promise<vo
       await emailDomainsStatePart.dispatchAction(fetchEmailDomainsAction, null);
       break;
     case 'emailOps':
-      await emailOpsStatePart.dispatchAction(fetchAllEmailsAction, null);
+      if (uiStatePart.getState()!.activeView !== 'email') {
+        break;
+      }
+      if (uiStatePart.getState()!.activeSubview === 'security') {
+        await emailOpsStatePart.dispatchAction(fetchEmailSecurityFindingsAction, undefined);
+      } else if (uiStatePart.getState()!.activeSubview === 'log') {
+        await emailOpsStatePart.dispatchAction(fetchAllEmailsAction, null);
+      }
       break;
     case 'dns': {
       const selectedDomainId = domainsStatePart.getState()!.selectedDomainId;

package/ts_web/elements/email/ops-view-email-security.ts

@@ -23,14 +23,32 @@ export class OpsViewEmailSecurity extends DeesElement {
   @state()
   accessor statsState: appstate.IStatsState = appstate.statsStatePart.getState()!;
 
+  @state()
+  accessor emailOpsState: appstate.IEmailOpsState = appstate.emailOpsStatePart.getState()!;
+
   constructor() {
     super();
     const sub = appstate.statsStatePart
-      .select((s) => s)
+      .select()
       .subscribe((s) => {
         this.statsState = s;
       });
     this.rxSubscriptions.push(sub);
+
+    const emailOpsSub = appstate.emailOpsStatePart
+      .select()
+      .subscribe((s) => {
+        this.emailOpsState = s;
+      });
+    this.rxSubscriptions.push(emailOpsSub);
+  }
+
+  public async connectedCallback(): Promise<void> {
+    await super.connectedCallback();
+    await appstate.emailOpsStatePart.dispatchAction(
+      appstate.fetchEmailSecurityFindingsAction,
+      undefined,
+    );
   }
 
   public static styles = [
@@ -42,21 +60,16 @@ export class OpsViewEmailSecurity extends DeesElement {
         flex-direction: column;
         gap: 24px;
       }
+
+      .findingsError {
+        color: ${cssManager.bdTheme('#b91c1c', '#fca5a5')};
+      }
     `,
   ];
 
   public render(): TemplateResult {
     const metrics = this.statsState.securityMetrics;
-
-    if (!metrics) {
-      return html`
-        <div class="loadingMessage">
-          <p>Loading security metrics...</p>
-        </div>
-      `;
-    }
-
-    const tiles: IStatsTile[] = [
+    const tiles: IStatsTile[] = metrics ? [
       {
         id: 'malware',
         title: 'Malware Detection',
@@ -93,16 +106,20 @@ export class OpsViewEmailSecurity extends DeesElement {
         color: '#f59e0b',
         description: 'Spam emails blocked',
       },
-    ];
+    ] : [];
 
     return html`
       <dees-heading level="3">Email Security</dees-heading>
 
       <div class="securityContainer">
-        <dees-statsgrid
-          .tiles=${tiles}
-          .minTileWidth=${200}
-        ></dees-statsgrid>
+        ${metrics ? html`
+          <dees-statsgrid
+            .tiles=${tiles}
+            .minTileWidth=${200}
+          ></dees-statsgrid>
+        ` : html`
+          <p class="loadingMessage">Loading security metrics...</p>
+        `}
 
         <dees-settings
           .heading=${'Security Configuration'}
@@ -114,6 +131,29 @@ export class OpsViewEmailSecurity extends DeesElement {
           ]}
           .actions=${[{ name: 'Edit', action: () => this.showEditSecurityDialog() }]}
         ></dees-settings>
+
+        <dees-table
+          .heading1=${'Email Security Findings'}
+          .heading2=${this.emailOpsState.securityFindingsLoading
+            ? 'Loading retained findings...'
+            : this.emailOpsState.securityFindingsError
+              ? 'Could not load retained findings'
+            : `Last 30 days · ${this.emailOpsState.securityFindings.length} findings`}
+          .data=${this.emailOpsState.securityFindings}
+          .searchable=${false}
+          .rowKey=${'id'}
+          .displayFunction=${(finding) => ({
+            'Time': new Date(finding.timestamp).toLocaleString(),
+            'From': finding.from,
+            'To': finding.to,
+            'Title': finding.subject || '(no title)',
+            'Security issue': `${finding.disposition === 'rejected' ? 'Rejected' : 'Flagged'} — ${finding.failureSummary}`,
+          })}
+        ></dees-table>
+
+        ${this.emailOpsState.securityFindingsError ? html`
+          <p class="findingsError">${this.emailOpsState.securityFindingsError}</p>
+        ` : html``}
       </div>
     `;
   }

package/ts_web/elements/email/ops-view-emails.ts

@@ -1,4 +1,4 @@
-import { DeesElement, property, html, customElement, type TemplateResult, css, state, cssManager } from '@design.estate/dees-element';
+import { DeesElement, html, customElement, css, state, cssManager } from '@design.estate/dees-element';
 import * as appstate from '../../appstate.js';
 import * as shared from '../shared/index.js';
 import * as interfaces from '../../../dist_ts_interfaces/index.js';
@@ -23,14 +23,27 @@ export class OpsViewEmails extends DeesElement {
   @state()
   accessor isLoading = false;
 
+  @state()
+  accessor traffic: interfaces.requests.IEmailLogTraffic | null = null;
+
+  @state()
+  accessor searchQuery = '';
+
+  @state()
+  accessor selectedRange: { from: number; to: number } | null = null;
+
   private stateSubscription: any;
   private lastEmailOpsUpdate = 0;
   private detailRequestGeneration = 0;
+  private searchDebounceTimer: number | undefined;
 
   async connectedCallback() {
     await super.connectedCallback();
     this.stateSubscription = appstate.emailOpsStatePart.select().subscribe((state) => {
       this.emails = state.emails;
+      this.traffic = state.traffic;
+      this.searchQuery = state.searchQuery;
+      this.selectedRange = state.selectedRange;
       const hasNewSnapshot = state.lastUpdated > this.lastEmailOpsUpdate;
       this.lastEmailOpsUpdate = Math.max(this.lastEmailOpsUpdate, state.lastUpdated);
       if (hasNewSnapshot && this.selectedEmail) {
@@ -47,6 +60,10 @@ export class OpsViewEmails extends DeesElement {
     if (this.stateSubscription) {
       this.stateSubscription.unsubscribe();
     }
+    if (this.searchDebounceTimer !== undefined) {
+      window.clearTimeout(this.searchDebounceTimer);
+      this.searchDebounceTimer = undefined;
+    }
   }
 
   public static styles = [
@@ -61,6 +78,26 @@ export class OpsViewEmails extends DeesElement {
       .viewContainer {
         height: 100%;
       }
+
+      .chartStack {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .rangeSummary {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        min-height: 32px;
+        padding: 0 4px;
+        color: ${cssManager.bdTheme('#374151', '#d1d5db')};
+        font-size: 13px;
+      }
+
+      .chartStack dees-chart-area {
+        min-height: 360px;
+      }
     `,
   ];
 
@@ -78,8 +115,34 @@ export class OpsViewEmails extends DeesElement {
           : html`
               <sz-mta-list-view
                 .emails=${this.emails}
+                .searchQuery=${this.searchQuery}
+                .stickyFilterBar=${true}
+                @search-change=${this.handleSearchChange}
                 @email-click=${this.handleEmailClick}
-              ></sz-mta-list-view>
+              >
+                ${this.traffic ? html`
+                  <div slot="above-table" class="chartStack">
+                    ${this.selectedRange ? html`
+                      <div class="rangeSummary">
+                        <span>${this.formatSelectedRange()}</span>
+                        <dees-button @click=${this.clearSelectedRange}>Clear time range</dees-button>
+                      </div>
+                    ` : html``}
+                    <dees-chart-area
+                      .label=${this.traffic.label}
+                      .series=${this.getEmailTrafficSeries()}
+                      .realtimeMode=${true}
+                      .rollingWindow=${this.traffic.durationMs}
+                      .legendStats=${['latest']}
+                      .chartLines=${[]}
+                      .rangeSelectionEnabled=${true}
+                      .selectedRange=${this.selectedRange}
+                      .yAxisFormatter=${(valueArg: number) => `${valueArg}`}
+                      @range-change=${this.handleRangeChange}
+                    ></dees-chart-area>
+                  </div>
+                ` : html``}
+              </sz-mta-list-view>
             `
         }
       </div>
@@ -108,6 +171,71 @@ export class OpsViewEmails extends DeesElement {
     await this.refreshEmailDetail(e.detail.id, true);
   }
 
+  private handleSearchChange(eventArg: CustomEvent<{ searchQuery: string }>): void {
+    const searchQuery = appstate.setActiveEmailSearchQuery(eventArg.detail.searchQuery);
+    if (this.searchDebounceTimer !== undefined) {
+      window.clearTimeout(this.searchDebounceTimer);
+    }
+    this.searchDebounceTimer = window.setTimeout(() => {
+      this.searchDebounceTimer = undefined;
+      void appstate.emailOpsStatePart.dispatchAction(
+        appstate.fetchAllEmailsAction,
+        { searchQuery },
+      );
+    }, 300);
+  }
+
+
+  private handleRangeChange = (
+    eventArg: CustomEvent<{ from: number; to: number }>,
+  ): void => {
+    void appstate.emailOpsStatePart.dispatchAction(
+      appstate.fetchAllEmailsAction,
+      { selectedRange: eventArg.detail },
+    );
+  };
+
+  private clearSelectedRange = (): void => {
+    void appstate.emailOpsStatePart.dispatchAction(
+      appstate.fetchAllEmailsAction,
+      { selectedRange: null },
+    );
+  };
+
+  private formatSelectedRange(): string {
+    if (!this.selectedRange) return '';
+    const formatter = new Intl.DateTimeFormat(undefined, {
+      dateStyle: 'medium',
+      timeStyle: 'short',
+    });
+    return `Showing emails from ${formatter.format(this.selectedRange.from)} to ${formatter.format(this.selectedRange.to)}`;
+  }
+
+  private getEmailTrafficSeries(): Array<{
+    name: string;
+    color: string;
+    data: Array<{ x: number; y: number }>;
+  }> {
+    if (!this.traffic) return [];
+    return [
+      {
+        name: 'Sent',
+        color: '#22c55e',
+        data: this.traffic.sent.map((point) => ({ x: point.timestamp, y: point.value })),
+      },
+      {
+        name: 'Received',
+        color: '#3b82f6',
+        data: this.traffic.received.map((point) => ({ x: point.timestamp, y: point.value })),
+      },
+      {
+        name: 'Failed',
+        color: '#ef4444',
+        data: this.traffic.failed.map((point) => ({ x: point.timestamp, y: point.value })),
+      },
+    ];
+  }
+
   private handleBack() {
     this.detailRequestGeneration++;
     this.selectedEmail = null;

package/ts_web/readme.md

@@ -27,6 +27,13 @@ For reporting bugs, issues, or security vulnerabilities, please visit [community
 | `security` | `overview`, `blocked`, `authentication` |
 | `domains` | `providers`, `domains`, `dns`, `certificates` |
 
+The Email Log keeps its search controls visible while scrolling and places the
+traffic chart above the retained email table. With no search the chart shows the
+last 24 hours. A search filters both the table and chart, expanding the chart to
+7, 14, or 30 days when older matching mail exists. Email Security lists retained
+SPF, DKIM, and enforcing DMARC findings with sender, recipient, subject, and a
+concise reason.
+
 ## Routes Navigation
 
 The `/network/routes` view uses two adjacent, independent multitoggles: