@serve.zone/gitops 2.13.1

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

@@ -0,0 +1,196 @@
+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-buildlog')
+export class GitopsViewBuildlog extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  @state()
+  accessor selectedConnectionId: string = '';
+
+  @state()
+  accessor selectedProjectId: string = '';
+
+  @state()
+  accessor selectedJobId: string = '';
+
+  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 {
+    this.fetchLog();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .log-container {
+        background: #0d0d0d;
+        border: 1px solid #333;
+        border-radius: 8px;
+        padding: 16px;
+        font-family: 'Fira Code', 'Courier New', monospace;
+        font-size: 13px;
+        line-height: 1.6;
+        color: #ccc;
+        max-height: 600px;
+        overflow-y: auto;
+        white-space: pre-wrap;
+        word-break: break-all;
+      }
+      .log-empty {
+        color: #666;
+        text-align: center;
+        padding: 40px;
+      }
+      .job-meta {
+        display: flex;
+        gap: 16px;
+        margin-bottom: 16px;
+        padding: 12px;
+        background: #1a1a2e;
+        border-radius: 8px;
+        font-size: 14px;
+      }
+      .job-meta-item {
+        color: #999;
+      }
+      .job-meta-item strong {
+        color: #fff;
+      }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    const projectOptions = this.dataState.projects.map((p) => ({
+      option: p.fullPath || p.name,
+      key: p.id,
+    }));
+
+    const jobOptions = this.dataState.pipelineJobs.map((j) => ({
+      option: `${j.name} (${j.status})`,
+      key: j.id,
+    }));
+
+    return html`
+      <div class="view-title">Build Log</div>
+      <div class="view-description">View raw build logs for CI/CD jobs</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Connection'}
+          .options=${connectionOptions}
+          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedConnectionId = e.detail.key;
+            this.loadProjects();
+          }}
+        ></dees-input-dropdown>
+        <dees-input-dropdown
+          .label=${'Project'}
+          .options=${projectOptions}
+          .selectedOption=${projectOptions.find((o) => o.key === this.selectedProjectId) || projectOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedProjectId = e.detail.key;
+          }}
+        ></dees-input-dropdown>
+        <dees-input-dropdown
+          .label=${'Job'}
+          .options=${jobOptions}
+          .selectedOption=${jobOptions.find((o) => o.key === this.selectedJobId) || jobOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedJobId = e.detail.key;
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.fetchLog()}>Fetch Log</dees-button>
+        <dees-button @click=${() => this.fetchLog()}>Refresh</dees-button>
+      </div>
+      ${this.selectedJobId ? html`
+        <div class="job-meta">
+          <span class="job-meta-item">Job: <strong>${this.selectedJobId}</strong></span>
+          <span class="job-meta-item">Project: <strong>${this.selectedProjectId}</strong></span>
+        </div>
+      ` : ''}
+      <div class="log-container">
+        ${this.dataState.currentJobLog
+          ? this.dataState.currentJobLog
+          : html`<div class="log-empty">Select a connection, project, and job, then click "Fetch Log" to view build output.</div>`
+        }
+      </div>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    const conns = appstate.connectionsStatePart.getState().connections;
+    if (conns.length > 0 && !this.selectedConnectionId) {
+      this.selectedConnectionId = conns[0].id;
+      await this.loadProjects();
+    }
+  }
+
+  private async loadProjects() {
+    if (!this.selectedConnectionId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
+      connectionId: this.selectedConnectionId,
+    });
+  }
+
+  private async fetchLog() {
+    if (!this.selectedConnectionId || !this.selectedProjectId || !this.selectedJobId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchJobLogAction, {
+      connectionId: this.selectedConnectionId,
+      projectId: this.selectedProjectId,
+      jobId: this.selectedJobId,
+    });
+  }
+}

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

@@ -0,0 +1,260 @@
+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-connections')
+export class GitopsViewConnections extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  private _autoRefreshHandler: () => void;
+
+  constructor() {
+    super();
+    const sub = appstate.connectionsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.connectionsState = s; });
+    this.rxSubscriptions.push(sub);
+
+    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 {
+    this.refresh();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="view-title">Connections</div>
+      <div class="view-description">Manage your Gitea and GitLab provider connections</div>
+      <div class="toolbar">
+        <dees-button @click=${() => this.addConnection()}>Add Connection</dees-button>
+        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Provider Connections'}
+        .heading2=${'Configure connections to Gitea and GitLab instances'}
+        .data=${this.connectionsState.connections}
+        .displayFunction=${(item: any) => ({
+          Name: item.name,
+          Type: item.providerType,
+          URL: item.baseUrl,
+          'Group Filter': item.groupFilter || '-',
+          Status: item.status,
+          Created: new Date(item.createdAt).toLocaleDateString(),
+        })}
+        .dataActions=${[
+          {
+            name: 'Edit',
+            iconName: 'lucide:edit',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.editConnection(item); },
+          },
+          {
+            name: 'Test',
+            iconName: 'lucide:plug',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => {
+              await appstate.connectionsStatePart.dispatchAction(
+                appstate.testConnectionAction,
+                { connectionId: item.id },
+              );
+            },
+          },
+          {
+            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} Connection`,
+                content: html`<p style="color: #fff;">Are you sure you want to ${actionLabel.toLowerCase()} connection "${item.name}"?</p>`,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+                  {
+                    name: actionLabel,
+                    action: async (modal: any) => {
+                      await appstate.connectionsStatePart.dispatchAction(
+                        appstate.pauseConnectionAction,
+                        { connectionId: 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 Connection',
+                content: html`<p style="color: #fff;">Are you sure you want to delete connection "${item.name}"?</p>`,
+                menuOptions: [
+                  { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+                  {
+                    name: 'Delete',
+                    action: async (modal: any) => {
+                      await appstate.connectionsStatePart.dispatchAction(
+                        appstate.deleteConnectionAction,
+                        { connectionId: item.id },
+                      );
+                      modal.destroy();
+                    },
+                  },
+                ],
+              });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await this.refresh();
+  }
+
+  private async refresh() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+  }
+
+  private async editConnection(item: any) {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Edit Connection',
+      content: html`
+        <style>
+          .form-row { margin-bottom: 16px; }
+          .form-info { font-size: 13px; color: #888; margin-bottom: 16px; }
+        </style>
+        <div class="form-info">Provider: ${item.providerType}</div>
+        <div class="form-row">
+          <dees-input-text .label=${'Name'} .key=${'name'} .value=${item.name}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Base URL'} .key=${'baseUrl'} .value=${item.baseUrl}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'API Token (leave empty to keep current)'} .key=${'token'} type="password"></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Group Filter (optional)'} .key=${'groupFilter'} .value=${item.groupFilter || ''} .description=${'Restricts which repos this connection can see (e.g. an org name or GitLab group path). Does not affect where synced repos are placed.'}></dees-input-text>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Save',
+          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 || '';
+            }
+            await appstate.connectionsStatePart.dispatchAction(
+              appstate.updateConnectionAction,
+              {
+                connectionId: item.id,
+                name: data.name,
+                baseUrl: data.baseUrl,
+                groupFilter: data.groupFilter,
+                ...(data.token ? { token: data.token } : {}),
+              },
+            );
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async addConnection() {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Add Connection',
+      content: html`
+        <style>
+          .form-row { margin-bottom: 16px; }
+        </style>
+        <div class="form-row">
+          <dees-input-text .label=${'Name'} .key=${'name'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-dropdown
+            .label=${'Provider Type'}
+            .key=${'providerType'}
+            .options=${[
+              { option: 'gitea', key: 'gitea' },
+              { option: 'gitlab', key: 'gitlab' },
+            ]}
+            .selectedOption=${{ option: 'gitea', key: 'gitea' }}
+          ></dees-input-dropdown>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Base URL'} .key=${'baseUrl'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'API Token'} .key=${'token'} type="password"></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Group Filter (optional)'} .key=${'groupFilter'} .description=${'Restricts which repos this connection can see (e.g. an org name or GitLab group path). Does not affect where synced repos are placed.'}></dees-input-text>
+        </div>
+      `,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Add',
+          action: async (modal: any) => {
+            const inputs = modal.shadowRoot.querySelectorAll('dees-input-text, dees-input-dropdown');
+            const data: any = {};
+            for (const input of inputs) {
+              if (input.key === 'providerType') {
+                data[input.key] = input.selectedOption?.key || 'gitea';
+              } else {
+                data[input.key] = input.value || '';
+              }
+            }
+            await appstate.connectionsStatePart.dispatchAction(
+              appstate.createConnectionAction,
+              {
+                name: data.name,
+                providerType: data.providerType,
+                baseUrl: data.baseUrl,
+                token: data.token,
+                groupFilter: data.groupFilter || undefined,
+              },
+            );
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+}

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

@@ -0,0 +1,134 @@
+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-groups')
+export class GitopsViewGroups extends DeesElement {
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  @state()
+  accessor dataState: appstate.IDataState = {
+    projects: [],
+    groups: [],
+    secrets: [],
+    pipelines: [],
+    pipelineJobs: [],
+    currentJobLog: '',
+  };
+
+  @state()
+  accessor selectedConnectionId: string = '';
+
+  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 {
+    this.loadGroups();
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+  ];
+
+  public render(): TemplateResult {
+    const connectionOptions = this.connectionsState.connections.map((c) => ({
+      option: `${c.name} (${c.providerType})`,
+      key: c.id,
+    }));
+
+    return html`
+      <div class="view-title">Groups</div>
+      <div class="view-description">Browse organizations and groups from your connected providers</div>
+      <div class="toolbar">
+        <dees-input-dropdown
+          .label=${'Connection'}
+          .options=${connectionOptions}
+          .selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
+          @selectedOption=${(e: CustomEvent) => {
+            this.selectedConnectionId = e.detail.key;
+            this.loadGroups();
+          }}
+        ></dees-input-dropdown>
+        <dees-button @click=${() => this.loadGroups()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Groups / Organizations'}
+        .heading2=${'Groups from the selected connection'}
+        .data=${this.dataState.groups}
+        .displayFunction=${(item: any) => ({
+          Name: item.name,
+          Path: item.fullPath,
+          Visibility: item.visibility,
+          Projects: String(item.projectCount),
+        })}
+        .dataActions=${[
+          {
+            name: 'View Secrets',
+            iconName: 'lucide:key',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => {
+              appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, {
+                view: 'secrets',
+                navigationContext: {
+                  connectionId: this.selectedConnectionId,
+                  scope: 'group',
+                  scopeId: item.id,
+                },
+              });
+            },
+          },
+        ]}
+      ></dees-table>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    const conns = appstate.connectionsStatePart.getState().connections;
+    if (conns.length > 0 && !this.selectedConnectionId) {
+      this.selectedConnectionId = conns[0].id;
+      await this.loadGroups();
+    }
+  }
+
+  private async loadGroups() {
+    if (!this.selectedConnectionId) return;
+    await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, {
+      connectionId: this.selectedConnectionId,
+    });
+  }
+}