@serve.zone/gitops 2.13.1

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

@@ -0,0 +1,424 @@
+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-jobs')
+export class GitopsViewJobs extends DeesElement {
+  @state()
+  accessor jobsState: appstate.IJobsState = { jobs: [] };
+
+  @state()
+  accessor connectionsState: appstate.IConnectionsState = {
+    connections: [],
+    activeConnectionId: null,
+  };
+
+  private _autoRefreshHandler: () => void;
+  private _jobLogHandler: (e: Event) => void;
+
+  constructor() {
+    super();
+    const jobsSub = appstate.jobsStatePart
+      .select((s) => s)
+      .subscribe((s) => { this.jobsState = s; });
+    this.rxSubscriptions.push(jobsSub);
+
+    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);
+
+    this._jobLogHandler = (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-job-log-entry', this._jobLogHandler);
+  }
+
+  public override disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener('gitops-auto-refresh', this._autoRefreshHandler);
+    document.removeEventListener('gitops-job-log-entry', this._jobLogHandler);
+  }
+
+  public static styles = [
+    cssManager.defaultStyles,
+    viewHostCss,
+    css`
+      .status-active { color: #2ecc71; }
+      .status-paused { color: #f39c12; }
+      .status-error { color: #e74c3c; }
+    `,
+  ];
+
+  public render(): TemplateResult {
+    return html`
+      <div class="view-title">Jobs</div>
+      <div class="view-description">Scheduled background tasks for automation</div>
+      <div class="toolbar">
+        <dees-button @click=${() => this.addJob()}>Add Job</dees-button>
+        <dees-button @click=${() => this.refresh()}>Refresh</dees-button>
+      </div>
+      <dees-table
+        .heading1=${'Jobs'}
+        .heading2=${'Manage scheduled automation tasks'}
+        .data=${this.jobsState.jobs}
+        .displayFunction=${(item: any) => ({
+          Name: item.name,
+          Type: this.formatJobType(item.jobType),
+          Source: item.autoBookstackDocsConfig?.sourceConnectionIds?.map((id: string) => this.getConnectionName(id)).join(', ') || '-',
+          'BookStack': item.autoBookstackDocsConfig?.bookstackTarget?.baseUrl || '-',
+          Interval: `${item.intervalMinutes}min`,
+          Status: item.status,
+          'Last Run': item.lastRunAt ? new Date(item.lastRunAt).toLocaleString() : 'Never',
+          'Duration': item.lastRunDurationMs ? `${(item.lastRunDurationMs / 1000).toFixed(1)}s` : '-',
+          Error: item.lastRunError ? item.lastRunError.slice(0, 50) : '-',
+        })}
+        .dataActions=${[
+          {
+            name: 'Trigger Now',
+            iconName: 'lucide:play',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.triggerJob(item); },
+          },
+          {
+            name: 'Edit',
+            iconName: 'lucide:edit',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.editJob(item); },
+          },
+          {
+            name: 'Pause/Resume',
+            iconName: 'lucide:pauseCircle',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.togglePause(item); },
+          },
+          {
+            name: 'Delete',
+            iconName: 'lucide:trash2',
+            type: ['inRow', 'contextmenu'],
+            actionFunc: async ({ item }: any) => { await this.deleteJob(item); },
+          },
+        ]}
+      ></dees-table>
+      <dees-chart-log
+        .label=${'Job Activity Log'}
+        .autoScroll=${true}
+        .maxEntries=${500}
+      ></dees-chart-log>
+    `;
+  }
+
+  async firstUpdated() {
+    await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
+    await appstate.jobsStatePart.dispatchAction(appstate.fetchJobsAction, null);
+    await appstate.initJobLogSocket();
+    await this.loadExistingLogs();
+  }
+
+  private async loadExistingLogs() {
+    try {
+      const logs = await appstate.fetchJobLogs(200);
+      const chartLog = this.shadowRoot?.querySelector('dees-chart-log') as any;
+      if (chartLog?.updateLog && logs.length > 0) {
+        chartLog.updateLog(
+          logs.map((entry: any) => ({
+            timestamp: new Date(entry.timestamp).toISOString(),
+            level: entry.level,
+            message: entry.message,
+            source: entry.source,
+          })),
+        );
+      }
+    } catch (err) {
+      console.error('Failed to load job logs:', err);
+    }
+  }
+
+  private formatJobType(type: string): string {
+    switch (type) {
+      case 'autobookstackdocs': return 'Auto BookStack Docs';
+      default: return type;
+    }
+  }
+
+  private getConnectionName(id: string): string {
+    const conn = this.connectionsState.connections.find((c) => c.id === id);
+    return conn ? conn.name : id;
+  }
+
+  private async refresh() {
+    await appstate.jobsStatePart.dispatchAction(appstate.fetchJobsAction, null);
+  }
+
+  private async triggerJob(item: any) {
+    await appstate.jobsStatePart.dispatchAction(appstate.triggerJobAction, { jobId: item.id });
+  }
+
+  private async togglePause(item: any) {
+    const paused = item.status !== 'paused';
+    await appstate.jobsStatePart.dispatchAction(appstate.pauseJobAction, {
+      jobId: item.id,
+      paused,
+    });
+  }
+
+  private async deleteJob(item: any) {
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Delete Job',
+      content: html`<p style="color: #fff;">Are you sure you want to delete job "${item.name}"?</p>`,
+      menuOptions: [
+        { name: 'Cancel', action: async (modal: any) => { modal.destroy(); } },
+        {
+          name: 'Delete',
+          action: async (modal: any) => {
+            await appstate.jobsStatePart.dispatchAction(appstate.deleteJobAction, { jobId: item.id });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async addJob() {
+    const connections = this.connectionsState.connections;
+
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: 'Add Job',
+      content: html`
+        <style>.form-row { margin-bottom: 16px; }</style>
+        <div class="form-row">
+          <dees-input-text .label=${'Job Name'} .key=${'name'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-dropdown
+            .label=${'Job Type'}
+            .key=${'jobType'}
+            .options=${[{ option: 'Auto BookStack Docs', key: 'autobookstackdocs' }]}
+            .selectedOption=${{ option: 'Auto BookStack Docs', key: 'autobookstackdocs' }}
+          ></dees-input-dropdown>
+        </div>
+        <div class="form-row">
+          <dees-input-dropdown
+            .label=${'Source Connection'}
+            .key=${'sourceConnection'}
+            .options=${connections.map((c) => ({ option: `${c.name} (${c.providerType})`, key: c.id }))}
+            .selectedOption=${connections.length > 0 ? { option: `${connections[0].name} (${connections[0].providerType})`, key: connections[0].id } : undefined}
+          ></dees-input-dropdown>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'BookStack URL'} .key=${'bookstackBaseUrl'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'BookStack Token ID'} .key=${'bookstackTokenId'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'BookStack Token Secret'} .key=${'bookstackTokenSecret'} type="password"></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Root Files (comma-separated)'} .key=${'filePaths'} .value=${'readme.md, changelog.md'} .description=${'Files in repo root to sync as pages'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Doc Directories (comma-separated)'} .key=${'docDirs'} .value=${'docs'} .description=${'Directories to scan for .md files'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Include Groups (optional, comma-separated)'} .key=${'includeGroups'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Exclude Groups (optional, comma-separated)'} .key=${'excludeGroups'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Interval (minutes)'} .key=${'intervalMinutes'} .value=${'60'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Propagate Deletes'} .key=${'propagateDeletes'} .value=${false} .description=${'Remove stale shelves/books/pages from BookStack'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Sync Visibility'} .key=${'syncVisibility'} .value=${false} .description=${'Map git private/public to BookStack permissions'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Private Role ID (BookStack)'} .key=${'privateRoleId'} .description=${'BookStack role ID that gets access to private repos'}></dees-input-text>
+        </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: Record<string, string> = {};
+            for (const input of inputs) { data[(input as any).key] = (input as any).value || ''; }
+
+            // Read source connection from dropdown
+            const dropdowns = modal.shadowRoot.querySelectorAll('dees-input-dropdown');
+            let sourceConnectionId = '';
+            for (const dd of dropdowns) {
+              if ((dd as any).key === 'sourceConnection') {
+                sourceConnectionId = (dd as any).selectedOption?.key || '';
+              }
+            }
+
+            // Read checkboxes
+            const checkboxes = modal.shadowRoot.querySelectorAll('dees-input-checkbox');
+            const boolData: Record<string, boolean> = {};
+            for (const cb of checkboxes) { boolData[(cb as any).key] = !!(cb as any).value; }
+
+            if (!data.name || !data.bookstackBaseUrl || !data.bookstackTokenId || !data.bookstackTokenSecret || !sourceConnectionId) return;
+
+            const splitCsv = (s: string) => s ? s.split(',').map((v: string) => v.trim()).filter(Boolean) : [];
+
+            await appstate.jobsStatePart.dispatchAction(appstate.createJobAction, {
+              name: data.name,
+              jobType: 'autobookstackdocs' as const,
+              intervalMinutes: parseInt(data.intervalMinutes, 10) || 60,
+              autoBookstackDocsConfig: {
+                sourceConnectionIds: [sourceConnectionId],
+                bookstackTarget: {
+                  baseUrl: data.bookstackBaseUrl.replace(/\/+$/, ''),
+                  tokenId: data.bookstackTokenId,
+                  tokenSecret: data.bookstackTokenSecret,
+                },
+                filePaths: splitCsv(data.filePaths).length > 0 ? splitCsv(data.filePaths) : ['readme.md', 'changelog.md'],
+                docDirs: splitCsv(data.docDirs).length > 0 ? splitCsv(data.docDirs) : ['docs'],
+                includeGroups: splitCsv(data.includeGroups).length > 0 ? splitCsv(data.includeGroups) : undefined,
+                excludeGroups: splitCsv(data.excludeGroups).length > 0 ? splitCsv(data.excludeGroups) : undefined,
+                propagateDeletes: boolData.propagateDeletes || false,
+                syncVisibility: boolData.syncVisibility || false,
+                privateRoleId: data.privateRoleId ? parseInt(data.privateRoleId, 10) : undefined,
+              },
+            });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+
+  private async editJob(item: any) {
+    const connections = this.connectionsState.connections;
+    const config = item.autoBookstackDocsConfig;
+
+    await plugins.deesCatalog.DeesModal.createAndShow({
+      heading: `Edit: ${item.name}`,
+      content: html`
+        <style>.form-row { margin-bottom: 16px; }</style>
+        <div class="form-row">
+          <dees-input-text .label=${'Job Name'} .key=${'name'} .value=${item.name}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-dropdown
+            .label=${'Source Connection'}
+            .key=${'sourceConnection'}
+            .options=${connections.map((c) => ({ option: `${c.name} (${c.providerType})`, key: c.id }))}
+            .selectedOption=${(() => {
+              const currentId = config?.sourceConnectionIds?.[0];
+              const conn = connections.find((c) => c.id === currentId);
+              return conn ? { option: `${conn.name} (${conn.providerType})`, key: conn.id } : (connections.length > 0 ? { option: `${connections[0].name} (${connections[0].providerType})`, key: connections[0].id } : undefined);
+            })()}
+          ></dees-input-dropdown>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'BookStack URL'} .key=${'bookstackBaseUrl'} .value=${config?.bookstackTarget?.baseUrl || ''}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'BookStack Token ID'} .key=${'bookstackTokenId'} .value=${config?.bookstackTarget?.tokenId || ''}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'BookStack Token Secret (leave empty to keep current)'} .key=${'bookstackTokenSecret'} type="password"></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Root Files (comma-separated)'} .key=${'filePaths'} .value=${config?.filePaths?.join(', ') || 'readme.md'} .description=${'Files in repo root to sync as pages'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Doc Directories (comma-separated)'} .key=${'docDirs'} .value=${config?.docDirs?.join(', ') || 'docs'} .description=${'Directories to scan for .md files'}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Include Groups (optional, comma-separated)'} .key=${'includeGroups'} .value=${config?.includeGroups?.join(', ') || ''}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Exclude Groups (optional, comma-separated)'} .key=${'excludeGroups'} .value=${config?.excludeGroups?.join(', ') || ''}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Interval (minutes)'} .key=${'intervalMinutes'} .value=${String(item.intervalMinutes)}></dees-input-text>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Propagate Deletes'} .key=${'propagateDeletes'} .value=${config?.propagateDeletes || false} .description=${'Remove stale shelves/books/pages from BookStack'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-checkbox .label=${'Sync Visibility'} .key=${'syncVisibility'} .value=${config?.syncVisibility || false} .description=${'Map git private/public to BookStack permissions'}></dees-input-checkbox>
+        </div>
+        <div class="form-row">
+          <dees-input-text .label=${'Private Role ID (BookStack)'} .key=${'privateRoleId'} .value=${config?.privateRoleId ? String(config.privateRoleId) : ''} .description=${'BookStack role ID that gets access to private repos'}></dees-input-text>
+        </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: Record<string, string> = {};
+            for (const input of inputs) { data[(input as any).key] = (input as any).value || ''; }
+
+            // Read source connection from dropdown
+            const dropdowns = modal.shadowRoot.querySelectorAll('dees-input-dropdown');
+            let sourceConnectionId = config?.sourceConnectionIds?.[0] || '';
+            for (const dd of dropdowns) {
+              if ((dd as any).key === 'sourceConnection') {
+                sourceConnectionId = (dd as any).selectedOption?.key || sourceConnectionId;
+              }
+            }
+
+            // Read checkboxes
+            const checkboxes = modal.shadowRoot.querySelectorAll('dees-input-checkbox');
+            const boolData: Record<string, boolean> = {};
+            for (const cb of checkboxes) { boolData[(cb as any).key] = !!(cb as any).value; }
+
+            const splitCsv = (s: string) => s ? s.split(',').map((v: string) => v.trim()).filter(Boolean) : [];
+
+            // Only send a new tokenSecret if the user typed one; empty means keep existing
+            const newTokenSecret = data.bookstackTokenSecret || '';
+
+            await appstate.jobsStatePart.dispatchAction(appstate.updateJobAction, {
+              jobId: item.id,
+              name: data.name || undefined,
+              intervalMinutes: data.intervalMinutes ? parseInt(data.intervalMinutes, 10) : undefined,
+              autoBookstackDocsConfig: {
+                sourceConnectionIds: [sourceConnectionId],
+                bookstackTarget: {
+                  baseUrl: data.bookstackBaseUrl.replace(/\/+$/, ''),
+                  tokenId: data.bookstackTokenId,
+                  tokenSecret: newTokenSecret,
+                },
+                filePaths: splitCsv(data.filePaths).length > 0 ? splitCsv(data.filePaths) : ['readme.md', 'changelog.md'],
+                docDirs: splitCsv(data.docDirs).length > 0 ? splitCsv(data.docDirs) : ['docs'],
+                includeGroups: splitCsv(data.includeGroups).length > 0 ? splitCsv(data.includeGroups) : undefined,
+                excludeGroups: splitCsv(data.excludeGroups).length > 0 ? splitCsv(data.excludeGroups) : undefined,
+                propagateDeletes: boolData.propagateDeletes || false,
+                syncVisibility: boolData.syncVisibility || false,
+                privateRoleId: data.privateRoleId ? parseInt(data.privateRoleId, 10) : undefined,
+              },
+            });
+            modal.destroy();
+          },
+        },
+      ],
+    });
+  }
+}