@serve.zone/dcrouter 17.2.3 → 17.3.0

package/ts_web/elements/ops-platform-events.ts

@@ -0,0 +1,315 @@
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../ts_interfaces/index.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+/**
+ * Acknowledgeable inbox for platform configuration events (config conflicts,
+ * not application runtime errors) — rendered as a sub-view of the Logs section.
+ */
+@customElement('ops-platform-events')
+export class OpsPlatformEvents extends DeesElement {
+  @state()
+  accessor eventState: appstate.IConfigEventState = appstate.configEventStatePart.getState()!;
+
+  @state()
+  accessor expandedIds: Set<string> = new Set();
+
+  private refreshTimer: ReturnType<typeof setInterval> | null = null;
+
+  constructor() {
+    super();
+    const subscription = appstate.configEventStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((eventState) => {
+        this.eventState = eventState;
+      });
+    this.rxSubscriptions.push(subscription);
+  }
+
+  async connectedCallback() {
+    super.connectedCallback();
+    await appstate.configEventStatePart.dispatchAction(appstate.fetchConfigEventsAction, null);
+    this.refreshTimer = setInterval(() => {
+      void appstate.configEventStatePart.dispatchAction(appstate.fetchConfigEventsAction, null);
+    }, 30_000);
+  }
+
+  async disconnectedCallback() {
+    await super.disconnectedCallback();
+    if (this.refreshTimer) {
+      clearInterval(this.refreshTimer);
+      this.refreshTimer = null;
+    }
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+      }
+
+      .toolbar {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        margin-bottom: 12px;
+      }
+
+      .toolbar .spacer {
+        flex: 1;
+      }
+
+      .toggleButton,
+      .ackButton,
+      .loadMoreButton {
+        border: 1px solid var(--dees-color-border-default);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        border-radius: 6px;
+        padding: 4px 10px;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .toggleButton:hover,
+      .ackButton:hover,
+      .loadMoreButton:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .toggleButton.active {
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
+      }
+
+      .eventList {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .eventCard {
+        border: 1px solid var(--dees-color-border-subtle);
+        border-radius: 8px;
+        background: ${cssManager.bdTheme('#ffffff', '#111113')};
+      }
+
+      .eventHeader {
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding: 10px 12px;
+        cursor: pointer;
+      }
+
+      .severityBadge {
+        font-size: 11px;
+        font-weight: 600;
+        padding: 2px 8px;
+        border-radius: 4px;
+        text-transform: uppercase;
+        letter-spacing: 0.02em;
+        flex-shrink: 0;
+      }
+
+      .severityBadge.error {
+        background: ${cssManager.bdTheme('rgba(220, 38, 38, 0.1)', 'rgba(220, 38, 38, 0.2)')};
+        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+      }
+
+      .severityBadge.warning {
+        background: ${cssManager.bdTheme('rgba(217, 119, 6, 0.1)', 'rgba(217, 119, 6, 0.2)')};
+        color: ${cssManager.bdTheme('#d97706', '#fbbf24')};
+      }
+
+      .categoryChip {
+        font-size: 11px;
+        padding: 2px 8px;
+        border-radius: 4px;
+        background: ${cssManager.bdTheme('#eef2ff', '#1e1b4b')};
+        color: ${cssManager.bdTheme('#4338ca', '#a5b4fc')};
+        flex-shrink: 0;
+      }
+
+      .eventTitle {
+        flex: 1;
+        font-size: 13px;
+        color: var(--dees-color-text-primary);
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+
+      .eventTime {
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+        flex-shrink: 0;
+      }
+
+      .ackState {
+        font-size: 11px;
+        color: var(--dees-color-text-muted);
+        flex-shrink: 0;
+      }
+
+      .eventBody {
+        border-top: 1px solid var(--dees-color-border-subtle);
+        padding: 10px 12px;
+        font-size: 12px;
+        color: var(--dees-color-text-secondary);
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .contextGrid {
+        display: grid;
+        grid-template-columns: max-content 1fr;
+        gap: 4px 16px;
+        font-family: monospace;
+        font-size: 12px;
+      }
+
+      .contextKey {
+        color: var(--dees-color-text-muted);
+      }
+
+      .contextValue {
+        color: var(--dees-color-text-primary);
+        word-break: break-all;
+      }
+
+      .emptyState {
+        padding: 24px;
+        text-align: center;
+        font-size: 13px;
+        color: var(--dees-color-text-muted);
+        border: 1px dashed var(--dees-color-border-subtle);
+        border-radius: 8px;
+      }
+
+      .pageFooter {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 12px;
+        padding: 14px 0 4px;
+        font-size: 12px;
+        color: var(--dees-color-text-muted);
+      }
+    `,
+  ];
+
+  public render() {
+    const events = this.eventState.events;
+    return html`
+      <div class="toolbar">
+        <button
+          class="toggleButton ${this.eventState.showAcknowledged ? '' : 'active'}"
+          @click=${() => this.setShowAcknowledged(false)}
+        >Unacknowledged (${this.eventState.unacknowledgedCount})</button>
+        <button
+          class="toggleButton ${this.eventState.showAcknowledged ? 'active' : ''}"
+          @click=${() => this.setShowAcknowledged(true)}
+        >All</button>
+        <div class="spacer"></div>
+        ${events.some((eventArg) => !eventArg.acknowledgedAt) ? html`
+          <button class="ackButton" @click=${() => this.acknowledge(events.filter((eventArg) => !eventArg.acknowledgedAt).map((eventArg) => eventArg.id))}>
+            Acknowledge all shown
+          </button>
+        ` : ''}
+      </div>
+
+      ${events.length === 0 ? html`
+        <div class="emptyState">
+          ${this.eventState.showAcknowledged
+            ? 'No platform configuration events recorded.'
+            : 'No unacknowledged platform configuration events.'}
+        </div>
+      ` : html`
+        <div class="eventList">
+          ${events.map((eventArg) => this.renderEvent(eventArg))}
+        </div>
+      `}
+      ${events.length > 0 ? html`
+        <div class="pageFooter">
+          <span>Showing ${events.length} of ${this.eventState.total}</span>
+          ${this.eventState.nextCursor ? html`<button class="loadMoreButton" @click=${() => this.loadMore()}>Load more</button>` : ''}
+        </div>
+      ` : ''}
+    `;
+  }
+
+  private renderEvent(eventArg: interfaces.data.IOpsConfigEvent) {
+    const expanded = this.expandedIds.has(eventArg.id);
+    const contextEntries = Object.entries(eventArg.context || {}).filter(([, value]) => value);
+    return html`
+      <div class="eventCard">
+        <div class="eventHeader" @click=${() => this.toggleExpanded(eventArg.id)}>
+          <span class="severityBadge ${eventArg.severity}">${eventArg.severity}</span>
+          <span class="categoryChip">${eventArg.category}</span>
+          <span class="eventTitle">${eventArg.title}</span>
+          <span class="eventTime">${new Date(eventArg.createdAt).toLocaleString()}</span>
+          ${eventArg.acknowledgedAt
+            ? html`<span class="ackState">acknowledged by ${eventArg.acknowledgedBy || 'unknown'}</span>`
+            : html`<button class="ackButton" @click=${(clickEvent: Event) => { clickEvent.stopPropagation(); this.acknowledge([eventArg.id]); }}>Acknowledge</button>`}
+        </div>
+        ${expanded ? html`
+          <div class="eventBody">
+            <div>${eventArg.detail}</div>
+            ${contextEntries.length > 0 ? html`
+              <div class="contextGrid">
+                ${contextEntries.map(([key, value]) => html`
+                  <span class="contextKey">${key}</span>
+                  <span class="contextValue">${value}</span>
+                `)}
+              </div>
+            ` : ''}
+          </div>
+        ` : ''}
+      </div>
+    `;
+  }
+
+  private toggleExpanded(id: string) {
+    const next = new Set(this.expandedIds);
+    if (next.has(id)) {
+      next.delete(id);
+    } else {
+      next.add(id);
+    }
+    this.expandedIds = next;
+  }
+
+  private async setShowAcknowledged(showAcknowledged: boolean) {
+    await appstate.configEventStatePart.dispatchAction(appstate.fetchConfigEventsAction, {
+      showAcknowledged,
+    });
+  }
+
+  private async loadMore() {
+    if (!this.eventState.nextCursor) return;
+    await appstate.configEventStatePart.dispatchAction(appstate.fetchConfigEventsAction, {
+      cursor: this.eventState.nextCursor,
+      append: true,
+    });
+  }
+
+  private async acknowledge(ids: string[]) {
+    await appstate.configEventStatePart.dispatchAction(appstate.acknowledgeConfigEventsAction, {
+      ids,
+    });
+  }
+}

package/ts_web/elements/ops-view-logs.ts

@@ -1,5 +1,6 @@
 import * as shared from './shared/index.js';
 import * as appstate from '../appstate.js';
+import './ops-platform-events.js';
 
 import {
   DeesElement,
@@ -19,6 +20,12 @@ export class OpsViewLogs extends DeesElement {
     filters: {},
   };
 
+  @state()
+  accessor activeTab: 'application' | 'platform' = 'application';
+
+  @state()
+  accessor unacknowledgedCount = 0;
+
   private lastPushedCount = 0;
 
   constructor() {
@@ -29,30 +36,100 @@ export class OpsViewLogs extends DeesElement {
         this.logState = logState;
       });
     this.rxSubscriptions.push(subscription);
+    const configEventSubscription = appstate.configEventStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((eventState) => {
+        this.unacknowledgedCount = eventState.unacknowledgedCount;
+      });
+    this.rxSubscriptions.push(configEventSubscription);
   }
 
   public static styles = [
     cssManager.defaultStyles,
     shared.viewHostCss,
-    css``,
+    css`
+      .logTabs {
+        display: flex;
+        gap: 8px;
+        margin-bottom: 12px;
+      }
+
+      .logTab {
+        border: 1px solid var(--dees-color-border-default);
+        background: transparent;
+        color: var(--dees-color-text-secondary);
+        border-radius: 6px;
+        padding: 4px 12px;
+        font-size: 12px;
+        cursor: pointer;
+        transition: all 0.15s ease;
+      }
+
+      .logTab:hover {
+        background: var(--dees-color-hover);
+        color: var(--dees-color-text-primary);
+      }
+
+      .logTab.active {
+        border-color: var(--dees-color-border-strong);
+        color: var(--dees-color-text-primary);
+      }
+
+      .logTab .countBadge {
+        display: inline-block;
+        margin-left: 6px;
+        padding: 0 6px;
+        border-radius: 8px;
+        font-size: 11px;
+        font-weight: 600;
+        background: ${cssManager.bdTheme('rgba(220, 38, 38, 0.1)', 'rgba(220, 38, 38, 0.25)')};
+        color: ${cssManager.bdTheme('#dc2626', '#f87171')};
+      }
+    `,
   ];
 
   public render() {
     return html`
       <dees-heading level="3">Logs</dees-heading>
 
-      <dees-chart-log
-        .label=${'Application Logs'}
-        .autoScroll=${true}
-        .maxEntries=${2000}
-        .showMetrics=${true}
-      ></dees-chart-log>
+      <div class="logTabs">
+        <button
+          class="logTab ${this.activeTab === 'application' ? 'active' : ''}"
+          @click=${() => this.switchTab('application')}
+        >Application Logs</button>
+        <button
+          class="logTab ${this.activeTab === 'platform' ? 'active' : ''}"
+          @click=${() => this.switchTab('platform')}
+        >Platform Events${this.unacknowledgedCount > 0 ? html`<span class="countBadge">${this.unacknowledgedCount}</span>` : ''}</button>
+      </div>
+
+      ${this.activeTab === 'application' ? html`
+        <dees-chart-log
+          .label=${'Application Logs'}
+          .autoScroll=${true}
+          .maxEntries=${2000}
+          .showMetrics=${true}
+        ></dees-chart-log>
+      ` : html`
+        <ops-platform-events></ops-platform-events>
+      `}
     `;
   }
 
+  private switchTab(tab: 'application' | 'platform') {
+    if (this.activeTab === tab) return;
+    this.activeTab = tab;
+    if (tab === 'application') {
+      // The chart element is recreated on tab switch; re-push everything.
+      this.lastPushedCount = 0;
+    }
+  }
+
   async connectedCallback() {
     super.connectedCallback();
     this.lastPushedCount = 0;
+    // Populate the platform-events badge without requiring a tab visit.
+    void appstate.configEventStatePart.dispatchAction(appstate.fetchConfigEventsAction, null);
     // Only fetch if state is empty (streaming will handle new entries)
     if (this.logState.recentLogs.length === 0) {
       await appstate.logStatePart.dispatchAction(appstate.fetchRecentLogsAction, { limit: 100 });