@serve.zone/gitops 2.13.1

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

@@ -0,0 +1,512 @@
+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-sync')
+export class GitopsViewSync extends DeesElement {
+  @state()
+  accessor syncState: appstate.ISyncState = { configs: [], repoStatuses: [] };
+
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  private _autoRefreshHandler: () => void;
+  private _syncLogHandler: (e: Event) => void;
+
+  constructor() {
+    super();
+    const syncSub = appstate.syncStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.syncState = s; });
+    this.rxSubscriptions.push(syncSub);
+
+    const connSub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(connSub);
+
+    this._autoRefreshHandler = () => this.refresh();
+    document.addEventListener('gitops-auto-refresh', this._autoRefreshHandler);
+
+    // Listen for server-push sync log entries via TypedSocket
+    this._syncLogHandler = (e: Event) => {
+      const entry = (e as CustomEvent).detail;
+      if (!entry) return;
+      const chartLog = this.shadowRoot?.querySelector('dees-chart-log') as any;
+      if (chartLog?.addLog) {
+        chartLog.addLog(entry.level, entry.message, entry.source);
+      }
+    };
+    document.addEventListener('gitops-sync-log-entry', this._syncLogHandler);
+  }
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('gitops-auto-refresh', this._autoRefreshHandler);
+    document.removeEventListener('gitops-sync-log-entry', this._syncLogHandler);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .status-badge {
+        display: inline-block;
+        padding: 2px 8px;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 600;
+        text-transform: uppercase;
+      }
+      .status-active { background: #1a3a1a; color: #00ff88; }
+      .status-paused { background: #3a3a1a; color: #ffaa00; }
+      .status-error { background: #3a1a1a; color: #ff4444; }
+
+      dees-chart-log {
+        margin-top: 24px;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="view-title">Sync</div>
+      <div class="view-description">Mirror repositories between Gitea and GitLab instances</div>
+      <div class="toolbar">
+        <dees-button @click=${() => this.addSyncConfig()}>Add Sync</dees-button>
+        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Sync Configurations'}
+        .heading2=${'Automatic repository mirroring between instances'}
+        .data=${this.syncState.configs}
+        .displayFunction=${(item: any) => {
+          const sourceConn = this.connectionsState.connections.find((c) => c.id === item.sourceConnectionId);
+          const targetConn = this.connectionsState.connections.find((c) => c.id === item.targetConnectionId);
+          return {
+            Name: item.name,
+            Source: sourceConn?.name || item.sourceConnectionId,
+            'Target': `${targetConn?.name || item.targetConnectionId}${item.targetGroupOffset ? ` → ${item.targetGroupOffset}/` : ''}`,
+            Interval: `${item.intervalMinutes}m`,
+            Status: item.status,
+            'Enforce Delete': item.enforceDelete ? 'Yes' : 'No',
+            'Enforce Group Delete': item.enforceGroupDelete ? 'Yes' : 'No',
+            'Mirror Hint': item.addMirrorHint ? 'Yes' : 'No',
+            'Group Avatars': item.useGroupAvatarsForProjects ? 'Yes' : 'No',
+            'Last Sync': item.lastSyncAt ? new Date(item.lastSyncAt).toLocaleString() : 'Never',
+            Repos: String(item.reposSynced),
+          };
+        }}
+        .dataActions=${[
+          {
+            name: 'Preview',
+            iconName: 'lucide:eye',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.previewSync(item); },
+          },
+          {
+            name: 'Trigger Now',
+            iconName: 'lucide:play',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => {
+              const statusNote = item.status === 'paused' ? ' (config is paused — this is a one-off run)' : '';
+              await plugins.deesCatalog.DeesModal.createAndShow({
+                heading: 'Trigger Sync',
+                content: html`<p style="color: #fff;">Run sync "${item.name}" now?${statusNote}</p>`,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+                  {
+                    name: 'Trigger',
+                    action: async (modal: any) => {
+                      await appstate.syncStatePart.dispatchAction(appstate.triggerSyncAction, {
+                        syncConfigId: item.id,
+                      });
+                      modal.destroy();
+                    },
+                  },
+                ],
+              });
+            },
+          },
+          {
+            name: 'View Repos',
+            iconName: 'lucide:list',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.viewRepoStatuses(item); },
+          },
+          {
+            name: 'Edit',
+            iconName: 'lucide:edit',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.editSyncConfig(item); },
+          },
+          {
+            name: 'Pause/Resume',
+            iconName: 'lucide:pauseCircle',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => {
+              const isPaused = item.status === 'paused';
+              const actionLabel = isPaused ? 'Resume' : 'Pause';
+              await plugins.deesCatalog.DeesModal.createAndShow({
+                heading: `${actionLabel} Sync`,
+                content: html`<p style="color: #fff;">Are you sure you want to ${actionLabel.toLowerCase()} sync "${item.name}"?</p>`,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+                  {
+                    name: actionLabel,
+                    action: async (modal: any) => {
+                      await appstate.syncStatePart.dispatchAction(appstate.pauseSyncConfigAction, {
+                        syncConfigId: item.id,
+                        paused: !isPaused,
+                      });
+                      modal.destroy();
+                    },
+                  },
+                ],
+              });
+            },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash2',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => {
+              await plugins.deesCatalog.DeesModal.createAndShow({
+                heading: 'Delete Sync Config',
+                content: html`<p style="color: #fff;">Are you sure you want to delete sync config "${item.name}"? This will also remove all local mirror data.</p>`,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+                  {
+                    name: 'Delete',
+                    action: async (modal: any) => {
+                      await appstate.syncStatePart.dispatchAction(appstate.deleteSyncConfigAction, {
+                        syncConfigId: item.id,
+                      });
+                      modal.destroy();
+                    },
+                  },
+                ],
+              });
+            },
+          },
+        ]}
+      ></dees-table>
+      <dees-chart-log
+        .label=${'Sync Activity Log'}
+        .autoScroll=${true}
+        .maxEntries=${500}
+      ></dees-chart-log>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    await this.refresh();
+    // Initialize TypedSocket for server-push sync log entries
+    await appstate.initSyncLogSocket();
+    // Load existing log entries
+    await this.loadExistingLogs();
+  }
+
+  private async loadExistingLogs() {
+    try {
+      const logs = await appstate.fetchSyncLogs(200);
+      const chartLog = this.shadowRoot?.querySelector('dees-chart-log') as any;
+      if (chartLog?.updateLog && logs.length > 0) {
+        chartLog.updateLog(
+          logs.map((entry) => ({
+            timestamp: new Date(entry.timestamp).toISOString(),
+            level: entry.level,
+            message: entry.message,
+            source: entry.source,
+          })),
+        );
+      }
+    } catch (err) {
+      console.error('Failed to load sync logs:', err);
+    }
+  }
+
+  private async refresh() {
+    await appstate.syncStatePart.dispatchAction(appstate.fetchSyncConfigsAction, null);
+  }
+
+  private async addSyncConfig() {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Add Sync Configuration',
+      content: html`
+        <style>.form-row { margin-bottom: 16px; }</style>
+        <div class="form-row">
+          <dees-input-text .label=${'Name'} .key=${'name'} .description=${'A human-readable name for this sync configuration'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-dropdown
+            .label=${'Source Connection'}
+            .key=${'sourceConnectionId'}
+            .description=${'The connection to read repositories from (filtered by its group filter)'}
+            .options=${connectionOptions}
+            .selectedOption=${connectionOptions[0]}
+          ></dees-input-dropdown>
+        </div>
+        <div class="form-row">
+          <dees-input-dropdown
+            .label=${'Target Connection'}
+            .key=${'targetConnectionId'}
+            .description=${'The connection to push repositories to'}
+            .options=${connectionOptions}
+            .selectedOption=${connectionOptions[1] || connectionOptions[0]}
+          ></dees-input-dropdown>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Target Group Offset'} .key=${'targetGroupOffset'} .description=${'Path prefix for target repos (e.g. "mirror/gitlab"). Leave empty for no prefix — repos land at their relative path.'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Interval (minutes)'} .key=${'intervalMinutes'} .value=${'5'} .description=${'How often to run this sync automatically'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Enforce Deletion'} .key=${'enforceDelete'} .value=${false} .description=${'When enabled, repos on the target not present on the source will be moved to an obsolete group (private).'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Enforce Group Deletion'} .key=${'enforceGroupDelete'} .value=${false} .description=${'When enabled, groups/orgs on the target not present on the source will be moved to obsolete.'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Add Mirror Hint'} .key=${'addMirrorHint'} .value=${false} .description=${'When enabled, target descriptions get "(This is a mirror of ...)" appended.'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Group Avatars for Projects'} .key=${'useGroupAvatarsForProjects'} .value=${false} .description=${'When enabled, projects without their own avatar inherit the group avatar.'}></dees-input-checkbox>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Create',
+          action: async (modal: any) => {
+            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text, dees-input-dropdown, dees-input-checkbox');
+            const data: any = {};
+            for (const input of inputs) {
+              if (input.key === 'sourceConnectionId' || input.key === 'targetConnectionId') {
+                data[input.key] = input.selectedOption?.key || '';
+              } else if (input.key === 'enforceDelete' || input.key === 'enforceGroupDelete' || input.key === 'addMirrorHint' || input.key === 'useGroupAvatarsForProjects') {
+                data[input.key] = input.getValue();
+              } else {
+                data[input.key] = input.value || '';
+              }
+            }
+            await appstate.syncStatePart.dispatchAction(appstate.createSyncConfigAction, {
+              name: data.name,
+              sourceConnectionId: data.sourceConnectionId,
+              targetConnectionId: data.targetConnectionId,
+              targetGroupOffset: data.targetGroupOffset || undefined,
+              intervalMinutes: parseInt(data.intervalMinutes) || 5,
+              enforceDelete: !!data.enforceDelete,
+              enforceGroupDelete: !!data.enforceGroupDelete,
+              addMirrorHint: !!data.addMirrorHint,
+              useGroupAvatarsForProjects: !!data.useGroupAvatarsForProjects,
+            });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async editSyncConfig(item: any) {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: `Edit Sync: ${item.name}`,
+      content: html`
+        <style>.form-row { margin-bottom: 16px; }</style>
+        <div class="form-row">
+          <dees-input-text .label=${'Name'} .key=${'name'} .value=${item.name} .description=${'A human-readable name for this sync configuration'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Target Group Offset'} .key=${'targetGroupOffset'} .value=${item.targetGroupOffset || ''} .description=${'Path prefix for target repos (e.g. "mirror/gitlab"). Leave empty for no prefix — repos land at their relative path.'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Interval (minutes)'} .key=${'intervalMinutes'} .value=${String(item.intervalMinutes)} .description=${'How often to run this sync automatically'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Enforce Deletion'} .key=${'enforceDelete'} .value=${!!item.enforceDelete} .description=${'When enabled, repos on the target not present on the source will be moved to an obsolete group (private).'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Enforce Group Deletion'} .key=${'enforceGroupDelete'} .value=${!!item.enforceGroupDelete} .description=${'When enabled, groups/orgs on the target not present on the source will be moved to obsolete.'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Add Mirror Hint'} .key=${'addMirrorHint'} .value=${!!item.addMirrorHint} .description=${'When enabled, target descriptions get "(This is a mirror of ...)" appended.'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Group Avatars for Projects'} .key=${'useGroupAvatarsForProjects'} .value=${!!item.useGroupAvatarsForProjects} .description=${'When enabled, projects without their own avatar inherit the group avatar.'}></dees-input-checkbox>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Save',
+          action: async (modal: any) => {
+            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text, dees-input-checkbox');
+            const data: any = {};
+            for (const input of inputs) {
+              if (input.key === 'enforceDelete' || input.key === 'enforceGroupDelete' || input.key === 'addMirrorHint' || input.key === 'useGroupAvatarsForProjects') {
+                data[input.key] = input.getValue();
+              } else {
+                data[input.key] = input.value || '';
+              }
+            }
+            await appstate.syncStatePart.dispatchAction(appstate.updateSyncConfigAction, {
+              syncConfigId: item.id,
+              name: data.name,
+              targetGroupOffset: data.targetGroupOffset || undefined,
+              intervalMinutes: parseInt(data.intervalMinutes) || 5,
+              enforceDelete: !!data.enforceDelete,
+              enforceGroupDelete: !!data.enforceGroupDelete,
+              addMirrorHint: !!data.addMirrorHint,
+              useGroupAvatarsForProjects: !!data.useGroupAvatarsForProjects,
+            });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async previewSync(item: any) {
+    try {
+      const { mappings, deletions, groupDeletions } = await appstate.previewSync(item.id);
+
+      // Compute the full obsolete group path for display
+      const targetConn = this.connectionsState.connections.find((c: any) => c.id === item.targetConnectionId);
+      let obsoletePath: string;
+      if (targetConn?.providerType === 'gitea') {
+        const segments = item.targetGroupOffset ? item.targetGroupOffset.split('/') : [];
+        const orgName = segments[0] || targetConn?.groupFilter || 'default';
+        obsoletePath = `${orgName}-obsolete`;
+      } else {
+        obsoletePath = item.targetGroupOffset ? `${item.targetGroupOffset}/obsolete` : 'obsolete';
+      }
+
+      await plugins.deesCatalog.DeesModal.createAndShow({
+        heading: `Preview Sync: "${item.name}"`,
+        content: html`
+          <style>
+            .preview-list { color: #fff; max-height: 400px; overflow-y: auto; }
+            .preview-item { display: flex; align-items: center; gap: 12px; padding: 6px 0; border-bottom: 1px solid #333; font-size: 13px; }
+            .preview-source { color: #aaa; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+            .preview-arrow { color: #666; flex-shrink: 0; }
+            .preview-target { color: #00ff88; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+            .preview-count { color: #888; font-size: 12px; margin-bottom: 12px; }
+            .preview-delete { color: #ff4444; padding: 6px 0; border-bottom: 1px solid #333; font-size: 13px; display: flex; align-items: center; gap: 8px; }
+            .preview-delete-marker { flex-shrink: 0; }
+            .preview-delete-path { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+            .preview-section { margin-top: 16px; }
+            .preview-section-header { color: #ff4444; font-size: 12px; font-weight: 600; margin-bottom: 8px; }
+          </style>
+          <div class="preview-count">${mappings.length} repositories will be synced</div>
+          <div class="preview-list">
+            ${mappings.map((m: any) => html`
+              <div class="preview-item">
+                <span class="preview-source">${m.sourceFullPath}</span>
+                <span class="preview-arrow">&rarr;</span>
+                <span class="preview-target">${m.targetFullPath}</span>
+              </div>
+            `)}
+            ${mappings.length === 0 ? html`<p style="color: #888;">No repositories found on source.</p>` : ''}
+          </div>
+          ${deletions.length > 0 ? html`
+            <div class="preview-section">
+              <div class="preview-section-header">${deletions.length} target repositor${deletions.length === 1 ? 'y' : 'ies'} will be moved to ${obsoletePath}</div>
+              <div class="preview-list">
+                ${deletions.map((d: string) => html`
+                  <div class="preview-delete">
+                    <span class="preview-delete-marker">→</span>
+                    <span class="preview-delete-path">${d}</span>
+                  </div>
+                `)}
+              </div>
+            </div>
+          ` : ''}
+          ${groupDeletions.length > 0 ? html`
+            <div class="preview-section">
+              <div class="preview-section-header">${groupDeletions.length} target group${groupDeletions.length === 1 ? '' : 's'} will be moved to ${obsoletePath}</div>
+              <div class="preview-list">
+                ${groupDeletions.map((g: string) => html`
+                  <div class="preview-delete">
+                    <span class="preview-delete-marker">→</span>
+                    <span class="preview-delete-path">${g}</span>
+                  </div>
+                `)}
+              </div>
+            </div>
+          ` : ''}
+        `,
+        menuOptions: [
+          { name: 'Close', action: async (modal: any) => { modal.destroy(); } },
+        ],
+      });
+    } catch (err: any) {
+      await plugins.deesCatalog.DeesModal.createAndShow({
+        heading: 'Preview Failed',
+        content: html`<p style="color: #ff4444;">${err.message || String(err)}</p>`,
+        menuOptions: [
+          { name: 'Close', action: async (modal: any) => { modal.destroy(); } },
+        ],
+      });
+    }
+  }
+
+  private async viewRepoStatuses(item: any) {
+    await appstate.syncStatePart.dispatchAction(appstate.fetchSyncRepoStatusesAction, {
+      syncConfigId: item.id,
+    });
+
+    const statuses = appstate.syncStatePart.getState().repoStatuses;
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: `Sync "${item.name}" - Repo Statuses`,
+      content: html`
+        <style>
+          .repo-list { color: #fff; max-height: 400px; overflow-y: auto; }
+          .repo-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #333; }
+          .repo-path { font-weight: 600; font-size: 13px; }
+          .repo-status { font-size: 12px; text-transform: uppercase; }
+          .repo-status.synced { color: #00ff88; }
+          .repo-status.error { color: #ff4444; }
+          .repo-status.pending { color: #ffaa00; }
+          .repo-error { font-size: 11px; color: #ff6666; margin-top: 4px; }
+        </style>
+        <div class="repo-list">
+          ${statuses.map((s: any) => html`
+            <div class="repo-item">
+              <div>
+                <div class="repo-path">${s.sourceFullPath}</div>
+                ${s.lastSyncError ? html`<div class="repo-error">${s.lastSyncError}</div>` : ''}
+              </div>
+              <div>
+                <span class="repo-status ${s.status}">${s.status}</span>
+                <div style="font-size: 11px; color: #888;">${s.lastSyncAt ? new Date(s.lastSyncAt).toLocaleString() : ''}</div>
+              </div>
+            </div>
+          `)}
+          ${statuses.length === 0 ? html`<p style="color: #888;">No repos synced yet.</p>` : ''}
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Close', action: async (modal: any) => { modal.destroy(); } },
+      ],
+    });
+  }
+}

package/ts_web/index.ts

@@ -0,0 +1,7 @@
+import * as plugins from './plugins.js';
+import { html } from '@design.estate/dees-element';
+import './elements/index.js';
+
+plugins.deesElement.render(html`
+  <gitops-dashboard></gitops-dashboard>
+`, document.body);

package/ts_web/plugins.ts

@@ -0,0 +1,15 @@
+// @design.estate scope
+import * as deesElement from '@design.estate/dees-element';
+import * as deesCatalog from '@design.estate/dees-catalog';
+
+// @api.global scope
+import * as typedsocket from '@api.global/typedsocket';
+
+export {
+  deesElement,
+  deesCatalog,
+  typedsocket,
+};
+
+// domtools gives us TypedRequest, smartstate, smartrouter, and other utilities
+export const domtools = deesElement.domtools;

package/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "module": "NodeNext",
+    "moduleResolution": "NodeNext",
+    "types": [
+      "node"
+    ],
+    "esModuleInterop": true,
+    "verbatimModuleSyntax": true
+  },
+  "exclude": [
+    "dist_*/**/*.d.ts"
+  ]
+}