dcrouter/ts_web/elements/ops-dashboard.ts

import * as plugins from '../plugins.js';
import * as appstate from '../appstate.js';

import {
  DeesElement,
  css,
  cssManager,
  customElement,
  html,
  state,
  type TemplateResult
} from '@design.estate/dees-element';

// Import view components
import { OpsViewOverview } from './ops-view-overview.js';
import { OpsViewStats } from './ops-view-stats.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 = {
    identity: null,
    isLoggedIn: false,
  };
  
  @state() private uiState: appstate.IUiState = {
    activeView: 'dashboard',
    sidebarCollapsed: false,
    autoRefresh: true,
    refreshInterval: 30000,
    theme: 'light',
  };

  constructor() {
    super();
    document.title = 'DCRouter OpsServer';
    
    // Subscribe to login state
    const loginSubscription = appstate.loginStatePart
      .select((stateArg) => stateArg)
      .subscribe((loginState) => {
        this.loginState = loginState;
        // Trigger data fetch when logged in
        if (loginState.isLoggedIn) {
          appstate.statsStatePart.dispatchAction(appstate.fetchAllStatsAction, null);
          appstate.configStatePart.dispatchAction(appstate.fetchConfigurationAction, null);
        }
      });
    this.rxSubscriptions.push(loginSubscription);
    
    // Subscribe to UI state
    const uiSubscription = appstate.uiStatePart
      .select((stateArg) => stateArg)
      .subscribe((uiState) => {
        this.uiState = uiState;
      });
    this.rxSubscriptions.push(uiSubscription);
  }

  public static styles = [
    cssManager.defaultStyles,
    css`
      .maincontainer {
        position: relative;
        width: 100vw;
        height: 100vh;
      }
    `,
  ];

  public render(): TemplateResult {
    return html`
      <div class="maincontainer">
        <dees-simple-login 
          name="DCRouter OpsServer"
          .loginAction=${async (username: string, password: string) => {
            await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
              username,
              password,
            });
            return this.loginState.isLoggedIn;
          }}
        >
          <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);
                },
              },
            ]}
          >
          </dees-simple-appdash>
        </dees-simple-login>
      </div>
    `;
  }
}