@serve.zone/dcrouter 2.12.4 → 5.0.3

package/ts_web/elements/index.ts

@@ -1,6 +1,7 @@
 export * from './ops-dashboard.js';
 export * from './ops-view-overview.js';
-export * from './ops-view-stats.js';
+export * from './ops-view-network.js';
+export * from './ops-view-emails.js';
 export * from './ops-view-logs.js';
 export * from './ops-view-config.js';
 export * from './ops-view-security.js';

package/ts_web/elements/ops-dashboard.ts

@@ -1,5 +1,6 @@
 import * as plugins from '../plugins.js';
 import * as appstate from '../appstate.js';
+import { appRouter } from '../router.js';
 
 import {
   DeesElement,
@@ -13,26 +14,63 @@ import {
 
 // Import view components
 import { OpsViewOverview } from './ops-view-overview.js';
-import { OpsViewStats } from './ops-view-stats.js';
+import { OpsViewNetwork } from './ops-view-network.js';
+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';
 
 @customElement('ops-dashboard')
 export class OpsDashboard extends DeesElement {
-  @state() private loginState: appstate.ILoginState = {
+  @state() accessor loginState: appstate.ILoginState = {
     identity: null,
     isLoggedIn: false,
   };
-  
-  @state() private uiState: appstate.IUiState = {
-    activeView: 'dashboard',
+
+  @state() accessor uiState: appstate.IUiState = {
+    activeView: 'overview',
     sidebarCollapsed: false,
     autoRefresh: true,
-    refreshInterval: 30000,
+    refreshInterval: 1000,
     theme: 'light',
   };
 
+  // Store viewTabs as a property to maintain object references
+  private viewTabs = [
+    {
+      name: 'Overview',
+      element: OpsViewOverview,
+    },
+    {
+      name: 'Network',
+      element: OpsViewNetwork,
+    },
+    {
+      name: 'Emails',
+      element: OpsViewEmails,
+    },
+    {
+      name: 'Logs',
+      element: OpsViewLogs,
+    },
+    {
+      name: 'Configuration',
+      element: OpsViewConfig,
+    },
+    {
+      name: 'Security',
+      element: OpsViewSecurity,
+    },
+  ];
+
+  /**
+   * 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.
+   */
+  private get currentViewTab() {
+    return this.viewTabs.find(t => t.name.toLowerCase() === this.uiState.activeView) || this.viewTabs[0];
+  }
+
   constructor() {
     super();
     document.title = 'DCRouter OpsServer';
@@ -55,17 +93,55 @@ export class OpsDashboard extends DeesElement {
       .select((stateArg) => stateArg)
       .subscribe((uiState) => {
         this.uiState = uiState;
+        // Sync appdash view when state changes (e.g., from URL navigation)
+        this.syncAppdashView(uiState.activeView);
       });
     this.rxSubscriptions.push(uiSubscription);
   }
 
+  /**
+   * Sync the dees-simple-appdash view selection with the current state.
+   * This is needed when the URL changes and we need to update the UI.
+   */
+  private syncAppdashView(viewName: string): void {
+    const appDash = this.shadowRoot?.querySelector('dees-simple-appdash') as any;
+    if (!appDash) return;
+
+    const targetTab = this.viewTabs.find(t => t.name.toLowerCase() === viewName);
+    if (!targetTab) return;
+
+    // Check if we need to switch (avoid unnecessary updates)
+    if (appDash.selectedView === targetTab) return;
+
+    // Update the selected view programmatically
+    appDash.selectedView = targetTab;
+
+    // Update the displayed content
+    const content = appDash.shadowRoot?.querySelector('.appcontent');
+    if (content) {
+      if (appDash.currentView) {
+        appDash.currentView.remove();
+      }
+      const view = new targetTab.element();
+      content.appendChild(view);
+      appDash.currentView = view;
+    }
+  }
+
   public static styles = [
     cssManager.defaultStyles,
     css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100vh;
+        overflow: hidden;
+      }
+
       .maincontainer {
         position: relative;
-        width: 100vw;
-        height: 100vh;
+        width: 100%;
+        height: 100%;
       }
     `,
   ];
@@ -73,41 +149,13 @@ export class OpsDashboard extends DeesElement {
   public render(): TemplateResult {
     return html`
       <div class="maincontainer">
-        <dees-simple-login 
+        <dees-simple-login
           name="DCRouter OpsServer"
         >
-          <dees-simple-appdash 
+          <dees-simple-appdash
             name="DCRouter OpsServer"
-            .viewTabs=${[
-              {
-                name: 'Overview',
-                element: OpsViewOverview,
-              },
-              {
-                name: 'Statistics',
-                element: OpsViewStats,
-              },
-              {
-                name: 'Logs',
-                element: OpsViewLogs,
-              },
-              {
-                name: 'Configuration',
-                element: OpsViewConfig,
-              },
-              {
-                name: 'Security',
-                element: OpsViewSecurity,
-              },
-            ]}
-            .userMenuItems=${[
-              {
-                name: 'Logout',
-                action: async () => {
-                  await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
-                },
-              },
-            ]}
+            .viewTabs=${this.viewTabs}
+            .selectedView=${this.currentViewTab}
           >
           </dees-simple-appdash>
         </dees-simple-login>
@@ -118,18 +166,39 @@ export class OpsDashboard extends DeesElement {
   public async firstUpdated() {
     const simpleLogin = this.shadowRoot.querySelector('dees-simple-login');
     simpleLogin.addEventListener('login', (e: CustomEvent) => {
-      console.log(e.detail);
+      // Handle logout event
       this.login(e.detail.data.username, e.detail.data.password);
     });
 
-    // Handle initial state
+    // Handle view changes
+    const appDash = this.shadowRoot.querySelector('dees-simple-appdash');
+    if (appDash) {
+      appDash.addEventListener('view-select', (e: CustomEvent) => {
+        const viewName = e.detail.view.name.toLowerCase();
+        // Use router for navigation instead of direct state update
+        appRouter.navigateToView(viewName);
+      });
+
+      // Handle logout event
+      appDash.addEventListener('logout', async () => {
+        await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+      });
+    }
+
+    // Handle initial state - check if we have a stored session that's still valid
     const loginState = appstate.loginStatePart.getState();
-    console.log('Initial login state:', loginState);
-    if (loginState.identity) {
-      this.loginState = loginState;
-      await simpleLogin.switchToSlottedContent();
-      await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
-      await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+    if (loginState.identity?.jwt) {
+      // Verify JWT hasn't expired
+      if (loginState.identity.expiresAt > Date.now()) {
+        // JWT still valid, restore logged-in state
+        this.loginState = loginState;
+        await simpleLogin.switchToSlottedContent();
+        await appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
+        await appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
+      } else {
+        // JWT expired, clear the stored state
+        await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+      }
     }
   }
 
@@ -158,8 +227,4 @@ export class OpsDashboard extends DeesElement {
       form.reset();
     }
   }
-
-  private async logout() {
-    await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
-  }
 }