initial

ts_web/elements/views/overview/index.ts

@@ -0,0 +1,111 @@
+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-overview')
+export class GitopsViewOverview extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  constructor() {
+    super();
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    const dataSub = appstate.dataStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.dataState = s; });
+    this.rxSubscriptions.push(dataSub);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .stats-grid {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+        gap: 16px;
+        margin-bottom: 24px;
+      }
+      .stat-card {
+        background: #1a1a2e;
+        border: 1px solid #333;
+        border-radius: 8px;
+        padding: 20px;
+        text-align: center;
+      }
+      .stat-value {
+        font-size: 36px;
+        font-weight: 700;
+        color: #00acff;
+        margin-bottom: 8px;
+      }
+      .stat-label {
+        font-size: 14px;
+        color: #999;
+        text-transform: uppercase;
+        letter-spacing: 1px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const connCount = this.connectionsState.connections.length;
+    const projCount = this.dataState.projects.length;
+    const groupCount = this.dataState.groups.length;
+    const pipelineCount = this.dataState.pipelines.length;
+    const failedPipelines = this.dataState.pipelines.filter((p) => p.status === 'failed').length;
+
+    return html`
+      <div class="view-title">Overview</div>
+      <div class="view-description">GitOps dashboard - manage your Gitea and GitLab instances</div>
+      <div class="stats-grid">
+        <div class="stat-card">
+          <div class="stat-value">${connCount}</div>
+          <div class="stat-label">Connections</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${projCount}</div>
+          <div class="stat-label">Projects</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${groupCount}</div>
+          <div class="stat-label">Groups</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value">${pipelineCount}</div>
+          <div class="stat-label">Pipelines</div>
+        </div>
+        <div class="stat-card">
+          <div class="stat-value" style="color: ${failedPipelines > 0 ? '#ff4444' : '#00ff88'}">${failedPipelines}</div>
+          <div class="stat-label">Failed Pipelines</div>
+        </div>
+      </div>
+    `;
+  }
+}