feat(docs,ops-dashboard): document unified database and reusable security profile and network target management

ts_web/elements/ops-dashboard.ts

@@ -2,7 +2,6 @@ import * as plugins from '../plugins.js';
 import * as appstate from '../appstate.js';
 import * as interfaces from '../../dist_ts_interfaces/index.js';
 import { appRouter } from '../router.js';
-
 import {
   DeesElement,
   css,
@@ -43,6 +42,12 @@ export class OpsDashboard extends DeesElement {
     theme: 'light',
   };
 
+  @state() accessor configState: appstate.IConfigState = {
+    config: null,
+    isLoading: false,
+    error: null,
+  };
+
   // Store viewTabs as a property to maintain object references
   private viewTabs = [
     {
@@ -112,6 +117,20 @@ export class OpsDashboard extends DeesElement {
     },
   ];
 
+  private get globalMessages() {
+    const messages: Array<{ id: string; type: string; message: string; dismissible?: boolean }> = [];
+    const config = this.configState.config;
+    if (config && !config.cache.enabled) {
+      messages.push({
+        id: 'db-disabled',
+        type: 'warning',
+        message: 'Database is disabled. Creating and editing routes, profiles, targets, and API tokens is not available.',
+        dismissible: false,
+      });
+    }
+    return messages;
+  }
+
   /**
    * Get the current view tab based on the UI state's activeView.
    * Used to pass the correct selectedView to dees-simple-appdash on initial render.
@@ -137,6 +156,14 @@ export class OpsDashboard extends DeesElement {
       });
     this.rxSubscriptions.push(loginSubscription);
     
+    // Subscribe to config state (for global warnings)
+    const configSubscription = appstate.configStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((configState) => {
+        this.configState = configState;
+      });
+    this.rxSubscriptions.push(configSubscription);
+
     // Subscribe to UI state
     const uiSubscription = appstate.uiStatePart
       .select((stateArg) => stateArg)
@@ -205,6 +232,7 @@ export class OpsDashboard extends DeesElement {
             name="DCRouter OpsServer"
             .viewTabs=${this.viewTabs}
             .selectedView=${this.currentViewTab}
+            .globalMessages=${this.globalMessages}
           >
           </dees-simple-appdash>
         </dees-simple-login>