@serve.zone/gitops 2.13.1

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

@@ -0,0 +1,502 @@
+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-managedsecrets')
+export class GitopsViewManagedSecrets extends DeesElement {
+  @state()
+  accessor managedSecretsState: appstate.IManagedSecretsState = { managedSecrets: [] };
+
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  private _autoRefreshHandler: () => void;
+
+  constructor() {
+    super();
+    const msSub = appstate.managedSecretsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.managedSecretsState = s; });
+    this.rxSubscriptions.push(msSub);
+
+    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);
+
+    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,
+    css`
+      .target-list {
+        margin: 8px 0;
+      }
+      .target-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 6px 10px;
+        margin: 4px 0;
+        background: rgba(255, 255, 255, 0.05);
+        border-radius: 4px;
+        color: #ccc;
+        font-size: 13px;
+      }
+      .target-item .remove-btn {
+        cursor: pointer;
+        color: #e74c3c;
+        font-size: 16px;
+        padding: 0 4px;
+      }
+      .status-ok { color: #2ecc71; }
+      .status-error { color: #e74c3c; }
+      .status-pending { color: #f39c12; }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="view-title">Managed Secrets</div>
+      <div class="view-description">Centrally managed secrets pushed as GITOPS_{key} to configured targets</div>
+      <div class="toolbar">
+        <dees-button @click=${() => this.addManagedSecret()}>Add Managed Secret</dees-button>
+        <dees-button @click=${() => this.pushAll()}>Push All</dees-button>
+        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Managed Secrets'}
+        .heading2=${'Define once, push to many targets'}
+        .data=${this.managedSecretsState.managedSecrets}
+        .displayFunction=${(item: any) => ({
+          Key: item.key,
+          'On Target': 'GITOPS_' + item.key,
+          Description: item.description || '-',
+          Targets: String(item.targets.length),
+          Status: this.summarizeStatus(item.targetStatuses),
+          'Last Pushed': item.lastPushedAt ? new Date(item.lastPushedAt).toLocaleString() : 'Never',
+        })}
+        .dataActions=${[
+          {
+            name: 'Edit',
+            iconName: 'lucide:edit',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.editManagedSecret(item); },
+          },
+          {
+            name: 'Push',
+            iconName: 'lucide:upload',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.pushOne(item); },
+          },
+          {
+            name: 'View Targets',
+            iconName: 'lucide:list',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.viewTargets(item); },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash2',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.deleteManagedSecret(item); },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    await appstate.managedSecretsStatePart.dispatchAction(appstate.fetchManagedSecretsAction, null);
+  }
+
+  private summarizeStatus(statuses: any[]): string {
+    if (!statuses || statuses.length === 0) return 'Not pushed';
+    const ok = statuses.filter((s: any) => s.status === 'success').length;
+    const err = statuses.filter((s: any) => s.status === 'error').length;
+    if (err === 0) return `All OK (${ok})`;
+    return `${ok} OK / ${err} Failed`;
+  }
+
+  private async refresh() {
+    await appstate.managedSecretsStatePart.dispatchAction(appstate.fetchManagedSecretsAction, null);
+  }
+
+  private async pushAll() {
+    await appstate.managedSecretsStatePart.dispatchAction(appstate.pushAllManagedSecretsAction, null);
+  }
+
+  private async pushOne(item: any) {
+    await appstate.managedSecretsStatePart.dispatchAction(appstate.pushManagedSecretAction, {
+      managedSecretId: item.id,
+    });
+  }
+
+  private async deleteManagedSecret(item: any) {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Delete Managed Secret',
+      content: html`<p style="color: #fff;">Are you sure you want to delete managed secret "${item.key}"?<br>This will also remove GITOPS_${item.key} from all ${item.targets.length} target(s).</p>`,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Delete',
+          action: async (modal: any) => {
+            await appstate.managedSecretsStatePart.dispatchAction(appstate.deleteManagedSecretAction, {
+              managedSecretId: item.id,
+            });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async viewTargets(item: any) {
+    const targetRows = (item.targetStatuses && item.targetStatuses.length > 0)
+      ? item.targetStatuses
+      : item.targets.map((t: any) => ({ ...t, status: 'pending' }));
+
+    const statusIcon = (status: string) => {
+      if (status === 'success') return html`<span class="status-ok">OK</span>`;
+      if (status === 'error') return html`<span class="status-error">Error</span>`;
+      return html`<span class="status-pending">Pending</span>`;
+    };
+
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: `Targets for ${item.key}`,
+      content: html`
+        <div style="color: #ccc; min-width: 400px;">
+          ${targetRows.map((t: any) => html`
+            <div style="display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.1);">
+              <div>
+                <div style="font-weight: bold;">${t.scopeName || t.scopeId}</div>
+                <div style="font-size: 12px; opacity: 0.7;">${t.scope} on ${this.getConnectionName(t.connectionId)}</div>
+                ${t.error ? html`<div style="font-size: 12px; color: #e74c3c; margin-top: 4px;">${t.error}</div>` : ''}
+              </div>
+              <div>${statusIcon(t.status)}</div>
+            </div>
+          `)}
+          ${targetRows.length === 0 ? html`<p>No targets configured.</p>` : ''}
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Close', action: async (modal: any) => { modal.destroy(); } },
+      ],
+    });
+  }
+
+  private getConnectionName(connectionId: string): string {
+    const conn = this.connectionsState.connections.find((c) => c.id === connectionId);
+    return conn ? conn.name : connectionId;
+  }
+
+  private async addManagedSecret() {
+    // Load entities for all connections
+    const connections = this.connectionsState.connections;
+    let targets: any[] = [];
+    let selectedConnId = connections.length > 0 ? connections[0].id : '';
+    let selectedScope: 'project' | 'group' = 'project';
+
+    // Pre-load entities for first connection
+    if (selectedConnId) {
+      await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
+        connectionId: selectedConnId,
+      });
+    }
+
+    const buildTargetListHtml = () => {
+      if (targets.length === 0) return html`<p style="color: #888; font-size: 13px;">No targets added yet.</p>`;
+      return html`${targets.map((t, i) => html`
+        <div class="target-item">
+          <span>${t.scopeName} (${t.scope}) on ${this.getConnectionName(t.connectionId)}</span>
+          <span class="remove-btn" @click=${() => { targets.splice(i, 1); this.requestUpdate(); }}>x</span>
+        </div>
+      `)}`;
+    };
+
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Add Managed Secret',
+      content: html`
+        <style>
+          .form-row { margin-bottom: 16px; }
+          .target-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
+          .add-target-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
+        </style>
+        <div class="form-row">
+          <dees-input-text .label=${'Key'} .key=${'key'} .description=${'Will be stored as GITOPS_{key} on targets'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Value'} .key=${'value'} type="password"></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Description'} .key=${'description'}></dees-input-text>
+        </div>
+        <div class="target-section">
+          <div style="color: #fff; font-weight: bold; margin-bottom: 8px;">Targets</div>
+          <div class="add-target-row">
+            <dees-input-dropdown
+              .label=${'Connection'}
+              .key=${'targetConn'}
+              .options=${connections.map((c) => ({ option: c.name, key: c.id }))}
+              .selectedOption=${connections.length > 0 ? { option: connections[0].name, key: connections[0].id } : undefined}
+              @selectedOption=${async (e: CustomEvent) => {
+                selectedConnId = e.detail.key;
+                if (selectedScope === 'project') {
+                  await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
+                } else {
+                  await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
+                }
+              }}
+            ></dees-input-dropdown>
+            <dees-input-dropdown
+              .label=${'Scope'}
+              .key=${'targetScope'}
+              .options=${[{ option: 'Project', key: 'project' }, { option: 'Group', key: 'group' }]}
+              .selectedOption=${{ option: 'Project', key: 'project' }}
+              @selectedOption=${async (e: CustomEvent) => {
+                selectedScope = e.detail.key as 'project' | 'group';
+                if (selectedScope === 'project') {
+                  await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
+                } else {
+                  await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
+                }
+              }}
+            ></dees-input-dropdown>
+            <dees-input-dropdown
+              .label=${'Entity'}
+              .key=${'targetEntity'}
+              .options=${(() => {
+                const data = appstate.dataStatePart.getState();
+                const items = selectedScope === 'project' ? data.projects : data.groups;
+                return items.map((item: any) => ({ option: item.fullPath || item.name, key: item.id }));
+              })()}
+            ></dees-input-dropdown>
+            <dees-button @click=${() => {
+              const data = appstate.dataStatePart.getState();
+              const items = selectedScope === 'project' ? data.projects : data.groups;
+              // Find entity dropdown value
+              const modal = document.querySelector('dees-modal');
+              if (!modal) return;
+              const entityDropdowns = modal.shadowRoot?.querySelectorAll('dees-input-dropdown');
+              let entityKey = '';
+              let entityName = '';
+              if (entityDropdowns) {
+                for (const dd of entityDropdowns) {
+                  if ((dd as any).key === 'targetEntity') {
+                    const sel = (dd as any).selectedOption;
+                    if (sel) {
+                      entityKey = sel.key;
+                      entityName = sel.option;
+                    }
+                  }
+                }
+              }
+              if (!entityKey) return;
+              // Avoid duplicates
+              const exists = targets.some(
+                (t) => t.connectionId === selectedConnId && t.scope === selectedScope && t.scopeId === entityKey,
+              );
+              if (exists) return;
+              targets.push({
+                connectionId: selectedConnId,
+                scope: selectedScope,
+                scopeId: entityKey,
+                scopeName: entityName,
+              });
+            }}>Add Target</dees-button>
+          </div>
+          <div class="target-list" id="targetList">
+            ${buildTargetListHtml()}
+          </div>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Create',
+          action: async (modal: any) => {
+            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text');
+            const data: any = {};
+            for (const input of inputs) { data[input.key] = input.value || ''; }
+            if (!data.key) return;
+            await appstate.managedSecretsStatePart.dispatchAction(appstate.createManagedSecretAction, {
+              key: data.key,
+              value: data.value,
+              description: data.description || undefined,
+              targets,
+            });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async editManagedSecret(item: any) {
+    const connections = this.connectionsState.connections;
+    let targets = [...item.targets];
+    let selectedConnId = connections.length > 0 ? connections[0].id : '';
+    let selectedScope: 'project' | 'group' = 'project';
+
+    if (selectedConnId) {
+      await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
+        connectionId: selectedConnId,
+      });
+    }
+
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: `Edit: ${item.key}`,
+      content: html`
+        <style>
+          .form-row { margin-bottom: 16px; }
+          .target-section { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,0.1); }
+          .add-target-row { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
+        </style>
+        <div class="form-row">
+          <dees-input-text .label=${'Value (leave empty to keep current)'} .key=${'value'} type="password"></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Description'} .key=${'description'} .value=${item.description || ''}></dees-input-text>
+        </div>
+        <div class="target-section">
+          <div style="color: #fff; font-weight: bold; margin-bottom: 8px;">Targets</div>
+          <div class="add-target-row">
+            <dees-input-dropdown
+              .label=${'Connection'}
+              .key=${'targetConn'}
+              .options=${connections.map((c) => ({ option: c.name, key: c.id }))}
+              .selectedOption=${connections.length > 0 ? { option: connections[0].name, key: connections[0].id } : undefined}
+              @selectedOption=${async (e: CustomEvent) => {
+                selectedConnId = e.detail.key;
+                if (selectedScope === 'project') {
+                  await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
+                } else {
+                  await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
+                }
+              }}
+            ></dees-input-dropdown>
+            <dees-input-dropdown
+              .label=${'Scope'}
+              .key=${'targetScope'}
+              .options=${[{ option: 'Project', key: 'project' }, { option: 'Group', key: 'group' }]}
+              .selectedOption=${{ option: 'Project', key: 'project' }}
+              @selectedOption=${async (e: CustomEvent) => {
+                selectedScope = e.detail.key as 'project' | 'group';
+                if (selectedScope === 'project') {
+                  await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, { connectionId: selectedConnId });
+                } else {
+                  await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, { connectionId: selectedConnId });
+                }
+              }}
+            ></dees-input-dropdown>
+            <dees-input-dropdown
+              .label=${'Entity'}
+              .key=${'targetEntity'}
+              .options=${(() => {
+                const data = appstate.dataStatePart.getState();
+                const items = selectedScope === 'project' ? data.projects : data.groups;
+                return items.map((item: any) => ({ option: item.fullPath || item.name, key: item.id }));
+              })()}
+            ></dees-input-dropdown>
+            <dees-button @click=${() => {
+              const modal = document.querySelector('dees-modal');
+              if (!modal) return;
+              const entityDropdowns = modal.shadowRoot?.querySelectorAll('dees-input-dropdown');
+              let entityKey = '';
+              let entityName = '';
+              if (entityDropdowns) {
+                for (const dd of entityDropdowns) {
+                  if ((dd as any).key === 'targetEntity') {
+                    const sel = (dd as any).selectedOption;
+                    if (sel) {
+                      entityKey = sel.key;
+                      entityName = sel.option;
+                    }
+                  }
+                }
+              }
+              if (!entityKey) return;
+              const exists = targets.some(
+                (t: any) => t.connectionId === selectedConnId && t.scope === selectedScope && t.scopeId === entityKey,
+              );
+              if (exists) return;
+              targets.push({
+                connectionId: selectedConnId,
+                scope: selectedScope,
+                scopeId: entityKey,
+                scopeName: entityName,
+              });
+            }}>Add Target</dees-button>
+          </div>
+          <div class="target-list">
+            ${targets.length === 0
+              ? html`<p style="color: #888; font-size: 13px;">No targets.</p>`
+              : targets.map((t: any, i: number) => html`
+                <div class="target-item">
+                  <span>${t.scopeName} (${t.scope}) on ${this.getConnectionName(t.connectionId)}</span>
+                  <span class="remove-btn" @click=${() => { targets.splice(i, 1); }}>x</span>
+                </div>
+              `)}
+          </div>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Update',
+          action: async (modal: any) => {
+            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text');
+            const data: any = {};
+            for (const input of inputs) { data[input.key] = input.value || ''; }
+            const updatePayload: any = {
+              managedSecretId: item.id,
+              targets,
+              description: data.description || undefined,
+            };
+            if (data.value) {
+              updatePayload.value = data.value;
+            }
+            await appstate.managedSecretsStatePart.dispatchAction(appstate.updateManagedSecretAction, updatePayload);
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+}

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

@@ -0,0 +1,86 @@
+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';
+import { type IStatsTile } from '@design.estate/dees-catalog';
+
+@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: '',
+  };
+
+  private _autoRefreshHandler: () => void;
+
+  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);
+
+    this._autoRefreshHandler = () => this.handleAutoRefresh();
+    document.addEventListener('gitops-auto-refresh', this._autoRefreshHandler);
+  }
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('gitops-auto-refresh', this._autoRefreshHandler);
+  }
+
+  private handleAutoRefresh(): void {
+    appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  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;
+
+    const tiles: IStatsTile[] = [
+      { id: 'connections', title: 'Connections', value: connCount, type: 'number', icon: 'lucide:plug', color: '#00acff' },
+      { id: 'projects', title: 'Projects', value: projCount, type: 'number', icon: 'lucide:folderGit2', color: '#00acff' },
+      { id: 'groups', title: 'Groups', value: groupCount, type: 'number', icon: 'lucide:users', color: '#00acff' },
+      { id: 'pipelines', title: 'Pipelines', value: pipelineCount, type: 'number', icon: 'lucide:play', color: '#00acff' },
+      { id: 'failed', title: 'Failed Pipelines', value: failedPipelines, type: 'number', icon: 'lucide:triangleAlert', color: failedPipelines > 0 ? '#ff4444' : '#00ff88' },
+    ];
+
+    return html`
+      <div class="view-title">Overview</div>
+      <div class="view-description">GitOps dashboard - manage your Gitea and GitLab instances</div>
+      <dees-statsgrid .tiles=${tiles}></dees-statsgrid>
+    `;
+  }
+}