@serve.zone/gitops 2.13.1

package/ts_web/elements/gitops-dashboard.ts

@@ -0,0 +1,350 @@
+import * as plugins from '../plugins.js';
+import * as appstate from '../appstate.js';
+import * as interfaces from '../../ts_interfaces/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+import type { GitopsViewOverview } from './views/overview/index.js';
+import type { GitopsViewConnections } from './views/connections/index.js';
+import type { GitopsViewProjects } from './views/projects/index.js';
+import type { GitopsViewGroups } from './views/groups/index.js';
+import type { GitopsViewSecrets } from './views/secrets/index.js';
+import type { GitopsViewPipelines } from './views/pipelines/index.js';
+import type { GitopsViewBuildlog } from './views/buildlog/index.js';
+import type { GitopsViewActions } from './views/actions/index.js';
+import type { GitopsViewActionlog } from './views/actionlog/index.js';
+import type { GitopsViewSync } from './views/sync/index.js';
+import type { GitopsViewJobs } from './views/jobs/index.js';
+
+@customElement('gitops-dashboard')
+export class GitopsDashboard extends DeesElement {
+  @state()
+  accessor loginState: appstate.ILoginState = { identity: null, isLoggedIn: false };
+
+  @state()
+  accessor uiState: appstate.IUiState = {
+    activeView: 'overview',
+    autoRefresh: true,
+    refreshInterval: 30000,
+  };
+
+  private viewTabs = [
+    { name: 'Overview', iconName: 'lucide:layoutDashboard', element: (async () => (await import('./views/overview/index.js')).GitopsViewOverview)() },
+    { name: 'Connections', iconName: 'lucide:plug', element: (async () => (await import('./views/connections/index.js')).GitopsViewConnections)() },
+    { name: 'Projects', iconName: 'lucide:folderGit2', element: (async () => (await import('./views/projects/index.js')).GitopsViewProjects)() },
+    { name: 'Groups', iconName: 'lucide:users', element: (async () => (await import('./views/groups/index.js')).GitopsViewGroups)() },
+    { name: 'Secrets', iconName: 'lucide:key', element: (async () => (await import('./views/secrets/index.js')).GitopsViewSecrets)() },
+    { name: 'Managed Secrets', iconName: 'lucide:keyRound', element: (async () => (await import('./views/managedsecrets/index.js')).GitopsViewManagedSecrets)() },
+    { name: 'Pipelines', iconName: 'lucide:play', element: (async () => (await import('./views/pipelines/index.js')).GitopsViewPipelines)() },
+    { name: 'Build Log', iconName: 'lucide:scrollText', element: (async () => (await import('./views/buildlog/index.js')).GitopsViewBuildlog)() },
+    { name: 'Actions', iconName: 'lucide:zap', element: (async () => (await import('./views/actions/index.js')).GitopsViewActions)() },
+    { name: 'Action Log', iconName: 'lucide:scroll', element: (async () => (await import('./views/actionlog/index.js')).GitopsViewActionlog)() },
+    { name: 'Sync', iconName: 'lucide:refreshCw', element: (async () => (await import('./views/sync/index.js')).GitopsViewSync)() },
+    { name: 'Jobs', iconName: 'lucide:briefcase', element: (async () => (await import('./views/jobs/index.js')).GitopsViewJobs)() },
+  ];
+
+  private resolvedViewTabs: Array<{ name: string; iconName: string; element: any }> = [];
+
+  // Auto-refresh timer
+  private autoRefreshTimer: ReturnType<typeof setInterval> | null = null;
+
+  // WebSocket client
+  private ws: WebSocket | null = null;
+  private wsReconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private wsIntentionalClose = false;
+
+  constructor() {
+    super();
+    document.title = 'GitOps';
+
+    const loginSubscription = appstate.loginStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((loginState) => {
+        this.loginState = loginState;
+        if (loginState.isLoggedIn) {
+          appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+          this.connectWebSocket();
+        } else {
+          this.disconnectWebSocket();
+        }
+        this.manageAutoRefreshTimer();
+      });
+    this.rxSubscriptions.push(loginSubscription);
+
+    const uiSubscription = appstate.uiStatePart
+      .select((stateArg) => stateArg)
+      .subscribe((uiState) => {
+        this.uiState = uiState;
+        this.syncAppdashView(uiState.activeView);
+        this.manageAutoRefreshTimer();
+      });
+    this.rxSubscriptions.push(uiSubscription);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    css`
+      :host {
+        display: block;
+        width: 100%;
+        height: 100%;
+      }
+      .maincontainer {
+        width: 100%;
+        height: 100vh;
+      }
+      .auto-refresh-toggle {
+        position: fixed;
+        bottom: 16px;
+        right: 16px;
+        z-index: 1000;
+        background: rgba(30, 30, 50, 0.9);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        border-radius: 8px;
+        padding: 8px 14px;
+        color: #ccc;
+        font-size: 12px;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        backdrop-filter: blur(8px);
+        transition: background 0.2s;
+      }
+      .auto-refresh-toggle:hover {
+        background: rgba(40, 40, 70, 0.95);
+      }
+      .auto-refresh-dot {
+        width: 8px;
+        height: 8px;
+        border-radius: 50%;
+        background: #666;
+      }
+      .auto-refresh-dot.active {
+        background: #00ff88;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="maincontainer">
+        <dees-simple-login name="GitOps">
+          <dees-simple-appdash
+            name="GitOps"
+            .viewTabs=${this.resolvedViewTabs}
+          >
+          </dees-simple-appdash>
+        </dees-simple-login>
+      </div>
+      ${this.loginState.isLoggedIn ? html`
+        <div
+          class="auto-refresh-toggle"
+          @click=${() => appstate.uiStatePart.dispatchAction(appstate.toggleAutoRefreshAction, null)}
+        >
+          <span class="auto-refresh-dot ${this.uiState.autoRefresh ? 'active' : ''}"></span>
+          Auto-Refresh: ${this.uiState.autoRefresh ? 'ON' : 'OFF'}
+        </div>
+      ` : ''}
+    `;
+  }
+
+  public async firstUpdated() {
+    // Resolve async view tab imports
+    this.resolvedViewTabs = await Promise.all(
+      this.viewTabs.map(async (tab) => ({
+        name: tab.name,
+        iconName: tab.iconName,
+        element: await tab.element,
+      })),
+    );
+    this.requestUpdate();
+    await this.updateComplete;
+
+    const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
+    if (simpleLogin) {
+      simpleLogin.addEventListener('login', (e: CustomEvent) => {
+        this.login(e.detail.data.username, e.detail.data.password);
+      });
+    }
+
+    const appDash = this.shadowRoot!.querySelector('dees-simple-appdash') as any;
+    if (appDash) {
+      appDash.addEventListener('view-select', (e: CustomEvent) => {
+        const viewName = e.detail.view.name.toLowerCase();
+        if (this.uiState.activeView === viewName) return;
+        appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: viewName });
+      });
+      appDash.addEventListener('logout', async () => {
+        await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+      });
+    }
+
+    // Load initial view on appdash
+    if (appDash && this.resolvedViewTabs.length > 0) {
+      const initialView = this.resolvedViewTabs.find(
+        (t) => t.name.toLowerCase() === this.uiState.activeView,
+      ) || this.resolvedViewTabs[0];
+      await appDash.loadView(initialView);
+    }
+
+    // Check for stored session (persistent login state)
+    const loginState = appstate.loginStatePart.getState();
+    if (loginState.identity?.jwt) {
+      if (loginState.identity.expiresAt > Date.now()) {
+        try {
+          const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+            interfaces.requests.IReq_VerifyIdentity
+          >('/typedrequest', 'verifyIdentity');
+          const response = await typedRequest.fire({ identity: loginState.identity });
+          if (response.valid) {
+            this.loginState = loginState;
+            if (simpleLogin) {
+              await simpleLogin.switchToSlottedContent();
+            }
+          } else {
+            await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+          }
+        } catch (err) {
+          console.warn('Stored session invalid, returning to login:', err);
+          await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+        }
+      } else {
+        await appstate.loginStatePart.dispatchAction(appstate.logoutAction, null);
+      }
+    }
+  }
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+    this.clearAutoRefreshTimer();
+    this.disconnectWebSocket();
+  }
+
+  // ============================================================================
+  // Auto-refresh timer management
+  // ============================================================================
+
+  private manageAutoRefreshTimer(): void {
+    this.clearAutoRefreshTimer();
+    const { autoRefresh, refreshInterval } = this.uiState;
+    if (autoRefresh && this.loginState.isLoggedIn) {
+      this.autoRefreshTimer = setInterval(() => {
+        document.dispatchEvent(new CustomEvent('gitops-auto-refresh'));
+      }, refreshInterval);
+    }
+  }
+
+  private clearAutoRefreshTimer(): void {
+    if (this.autoRefreshTimer) {
+      clearInterval(this.autoRefreshTimer);
+      this.autoRefreshTimer = null;
+    }
+  }
+
+  // ============================================================================
+  // WebSocket client for webhook push notifications
+  // ============================================================================
+
+  private connectWebSocket(): void {
+    if (this.ws) return;
+
+    const protocol = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const wsUrl = `${protocol}//${location.host}`;
+
+    try {
+      this.wsIntentionalClose = false;
+      this.ws = new WebSocket(wsUrl);
+
+      this.ws.addEventListener('message', (event) => {
+        try {
+          const data = JSON.parse(event.data);
+          // TypedSocket wraps messages; look for webhookNotification method
+          if (data?.method === 'webhookNotification' || data?.type === 'webhookEvent') {
+            console.log('Webhook event received:', data);
+            document.dispatchEvent(new CustomEvent('gitops-auto-refresh'));
+          }
+        } catch {
+          // Not JSON, ignore
+        }
+      });
+
+      this.ws.addEventListener('close', () => {
+        this.ws = null;
+        if (!this.wsIntentionalClose && this.loginState.isLoggedIn) {
+          this.wsReconnectTimer = setTimeout(() => {
+            this.connectWebSocket();
+          }, 5000);
+        }
+      });
+
+      this.ws.addEventListener('error', () => {
+        // Will trigger close event
+      });
+    } catch (err) {
+      console.warn('WebSocket connection failed:', err);
+    }
+  }
+
+  private disconnectWebSocket(): void {
+    this.wsIntentionalClose = true;
+    if (this.wsReconnectTimer) {
+      clearTimeout(this.wsReconnectTimer);
+      this.wsReconnectTimer = null;
+    }
+    if (this.ws) {
+      this.ws.close();
+      this.ws = null;
+    }
+  }
+
+  // ============================================================================
+  // Login
+  // ============================================================================
+
+  private async login(username: string, password: string) {
+    const domtools = await this.domtoolsPromise;
+    const simpleLogin = this.shadowRoot!.querySelector('dees-simple-login') as any;
+    const form = simpleLogin?.shadowRoot?.querySelector('dees-form') as any;
+
+    if (form) {
+      form.setStatus('pending', 'Logging in...');
+    }
+
+    const newState = await appstate.loginStatePart.dispatchAction(appstate.loginAction, {
+      username,
+      password,
+    });
+
+    if (newState.identity) {
+      if (form) {
+        form.setStatus('success', 'Logged in!');
+      }
+      if (simpleLogin) {
+        await simpleLogin.switchToSlottedContent();
+      }
+    } else {
+      if (form) {
+        form.setStatus('error', 'Login failed!');
+        await domtools.convenience.smartdelay.delayFor(2000);
+        form.reset();
+      }
+    }
+  }
+
+  private syncAppdashView(viewName: string): void {
+    const appDash = this.shadowRoot?.querySelector('dees-simple-appdash') as any;
+    if (!appDash || this.resolvedViewTabs.length === 0) return;
+    const targetTab = this.resolvedViewTabs.find((t) => t.name.toLowerCase() === viewName);
+    if (!targetTab) return;
+    if (appDash.selectedView === targetTab) return;
+    appDash.loadView(targetTab);
+  }
+}

package/ts_web/elements/index.ts

@@ -0,0 +1,10 @@
+import './gitops-dashboard.js';
+import './views/overview/index.js';
+import './views/connections/index.js';
+import './views/projects/index.js';
+import './views/groups/index.js';
+import './views/secrets/index.js';
+import './views/pipelines/index.js';
+import './views/buildlog/index.js';
+import './views/actions/index.js';
+import './views/managedsecrets/index.js';

package/ts_web/elements/shared/css.ts

@@ -0,0 +1,29 @@
+import { css } from '@design.estate/dees-element';
+
+export const viewHostCss = css`
+  :host {
+    display: block;
+    margin: auto;
+    max-width: 1280px;
+    padding: 16px 16px;
+    color: #fff;
+    box-sizing: border-box;
+  }
+  .view-title {
+    font-size: 24px;
+    font-weight: 600;
+    margin-bottom: 24px;
+  }
+  .view-description {
+    font-size: 14px;
+    color: #999;
+    margin-bottom: 24px;
+  }
+  .toolbar {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    margin-bottom: 24px;
+    flex-wrap: wrap;
+  }
+`;

package/ts_web/elements/shared/index.ts

@@ -0,0 +1 @@
+export * from './css.js';

package/ts_web/elements/views/actionlog/index.ts

@@ -0,0 +1,101 @@
+import * as plugins from '../../../plugins.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-actionlog')
+export class GitopsViewActionlog extends DeesElement {
+  @state()
+  accessor actionLogState: appstate.IActionLogState = {
+    entries: [],
+    total: 0,
+  };
+
+  @state()
+  accessor selectedEntityType: string = 'all';
+
+  private _autoRefreshHandler: () => void;
+
+  constructor() {
+    super();
+    const sub = appstate.actionLogStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.actionLogState = s; });
+    this.rxSubscriptions.push(sub);
+
+    this._autoRefreshHandler = () => this.refresh();
+    document.addEventListener('gitops-auto-refresh', this._autoRefreshHandler);
+  }
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('gitops-auto-refresh', this._autoRefreshHandler);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    const entityOptions = [
+      { option: 'All', key: 'all' },
+      { option: 'Connection', key: 'connection' },
+      { option: 'Secret', key: 'secret' },
+      { option: 'Pipeline', key: 'pipeline' },
+    ];
+
+    return html`
+      <div class="view-title">Action Log</div>
+      <div class="view-description">Audit trail of all operations performed in the system</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Entity Type'}
+          .options=${entityOptions}
+          .selectedOption=${entityOptions.find((o) => o.key === this.selectedEntityType)}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedEntityType = e.detail.key;
+            this.refresh();
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Action Log'}
+        .heading2=${`${this.actionLogState.total} entries total`}
+        .data=${this.actionLogState.entries}
+        .displayFunction=${(item: any) => ({
+          Time: new Date(item.timestamp).toLocaleString(),
+          Action: item.actionType,
+          Entity: item.entityType,
+          Name: item.entityName,
+          Details: item.details,
+          User: item.username,
+        })}
+        .dataActions=${[]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await this.refresh();
+  }
+
+  private async refresh() {
+    const entityType = this.selectedEntityType === 'all'
+      ? undefined
+      : this.selectedEntityType as any;
+    await appstate.actionLogStatePart.dispatchAction(appstate.fetchActionLogAction, {
+      limit: 100,
+      entityType,
+    });
+  }
+}

package/ts_web/elements/views/actions/index.ts

@@ -0,0 +1,209 @@
+import * as plugins from '../../../plugins.js';
+import * as interfaces from '../../../../ts_interfaces/index.js';
+import * as appstate from '../../../appstate.js';
+import { viewHostCss } from '../../shared/index.js';
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+  type TemplateResult,
+} from '@design.estate/dees-element';
+
+@customElement('gitops-view-actions')
+export class GitopsViewActions extends DeesElement {
+  @state()
+  accessor lastScanTimestamp: number = 0;
+
+  @state()
+  accessor isScanning: boolean = false;
+
+  @state()
+  accessor lastResult: {
+    connectionsScanned: number;
+    secretsFound: number;
+    errors: string[];
+    durationMs: number;
+  } | null = null;
+
+  @state()
+  accessor statusError: string = '';
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .action-cards {
+        display: grid;
+        grid-template-columns: 1fr;
+        gap: 24px;
+        max-width: 720px;
+      }
+      .action-card {
+        background: rgba(255, 255, 255, 0.04);
+        border: 1px solid rgba(255, 255, 255, 0.08);
+        border-radius: 12px;
+        padding: 28px;
+      }
+      .action-card-title {
+        font-size: 18px;
+        font-weight: 600;
+        margin-bottom: 8px;
+      }
+      .action-card-description {
+        font-size: 13px;
+        color: #999;
+        line-height: 1.5;
+        margin-bottom: 20px;
+      }
+      .info-grid {
+        display: grid;
+        grid-template-columns: 140px 1fr;
+        gap: 8px 16px;
+        margin-bottom: 20px;
+        font-size: 13px;
+      }
+      .info-label {
+        color: #888;
+      }
+      .info-value {
+        color: #ddd;
+        font-family: monospace;
+      }
+      .info-value.scanning {
+        color: #f0c040;
+      }
+      .info-value.error {
+        color: #ff6060;
+      }
+      .button-row {
+        display: flex;
+        gap: 12px;
+        align-items: center;
+      }
+      .errors-list {
+        margin-top: 12px;
+        max-height: 160px;
+        overflow-y: auto;
+        font-size: 12px;
+        color: #ff8080;
+        font-family: monospace;
+        line-height: 1.6;
+        background: rgba(255, 0, 0, 0.05);
+        border-radius: 6px;
+        padding: 8px 12px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const lastScanFormatted = this.lastScanTimestamp
+      ? new Date(this.lastScanTimestamp).toLocaleString()
+      : 'Never';
+
+    return html`
+      <div class="view-title">Actions</div>
+      <div class="view-description">System actions and maintenance tasks</div>
+      <div class="action-cards">
+        <div class="action-card">
+          <div class="action-card-title">Secrets Cache Scan</div>
+          <div class="action-card-description">
+            Secrets are automatically scanned and cached every 24 hours.
+            Use "Force Full Scan" to trigger an immediate refresh of all secrets
+            across all connections, projects, and groups.
+          </div>
+          <div class="info-grid">
+            <div class="info-label">Status</div>
+            <div class="info-value ${this.isScanning ? 'scanning' : ''}">
+              ${this.isScanning ? 'Scanning...' : 'Idle'}
+            </div>
+            <div class="info-label">Last Scan</div>
+            <div class="info-value">${lastScanFormatted}</div>
+            ${this.lastResult ? html`
+              <div class="info-label">Connections</div>
+              <div class="info-value">${this.lastResult.connectionsScanned}</div>
+              <div class="info-label">Secrets Found</div>
+              <div class="info-value">${this.lastResult.secretsFound}</div>
+              <div class="info-label">Duration</div>
+              <div class="info-value">${(this.lastResult.durationMs / 1000).toFixed(1)}s</div>
+              ${this.lastResult.errors.length > 0 ? html`
+                <div class="info-label">Errors</div>
+                <div class="info-value error">${this.lastResult.errors.length}</div>
+              ` : ''}
+            ` : ''}
+          </div>
+          ${this.statusError ? html`
+            <div class="errors-list">${this.statusError}</div>
+          ` : ''}
+          ${this.lastResult?.errors?.length ? html`
+            <div class="errors-list">
+              ${this.lastResult.errors.map((e) => html`<div>${e}</div>`)}
+            </div>
+          ` : ''}
+          <div class="button-row">
+            <dees-button
+              .disabled=${this.isScanning}
+              @click=${() => this.forceScan()}
+            >Force Full Scan</dees-button>
+            <dees-button
+              @click=${() => this.refreshStatus()}
+            >Refresh Status</dees-button>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    await this.refreshStatus();
+  }
+
+  private getIdentity(): interfaces.data.IIdentity | null {
+    return appstate.loginStatePart.getState().identity;
+  }
+
+  private async refreshStatus(): Promise<void> {
+    const identity = this.getIdentity();
+    if (!identity) return;
+
+    try {
+      this.statusError = '';
+      const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_GetScanStatus
+      >('/typedrequest', 'getScanStatus');
+      const response = await typedRequest.fire({ identity });
+      this.lastScanTimestamp = response.lastScanTimestamp;
+      this.isScanning = response.isScanning;
+      this.lastResult = response.lastResult;
+    } catch (err) {
+      this.statusError = `Failed to get status: ${err}`;
+    }
+  }
+
+  private async forceScan(): Promise<void> {
+    const identity = this.getIdentity();
+    if (!identity) return;
+
+    try {
+      this.statusError = '';
+      this.isScanning = true;
+      const typedRequest = new plugins.domtools.plugins.typedrequest.TypedRequest<
+        interfaces.requests.IReq_ForceScanSecrets
+      >('/typedrequest', 'forceScanSecrets');
+      const response = await typedRequest.fire({ identity });
+      this.lastResult = {
+        connectionsScanned: response.connectionsScanned,
+        secretsFound: response.secretsFound,
+        errors: response.errors,
+        durationMs: response.durationMs,
+      };
+      this.lastScanTimestamp = Date.now();
+      this.isScanning = false;
+    } catch (err) {
+      this.statusError = `Scan failed: ${err}`;
+      this.isScanning = false;
+    }
+  }
+}