562 lines
19 KiB
TypeScript
562 lines
19 KiB
TypeScript
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';
|
|
|
|
type TViewMode = 'current' | 'project' | 'group' | 'error';
|
|
type TSortBy = 'created' | 'duration' | 'status';
|
|
type TTimeRange = '1h' | '6h' | '1d' | '3d' | '7d' | '30d';
|
|
|
|
@customElement('gitops-view-pipelines')
|
|
export class GitopsViewPipelines 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 selectedGroupId: string = '';
|
|
@state() accessor viewMode: TViewMode = 'current';
|
|
@state() accessor sortBy: TSortBy = 'created';
|
|
@state() accessor timeRange: TTimeRange = '1d';
|
|
@state() accessor isLoading: boolean = false;
|
|
|
|
private _autoRefreshHandler: () => void;
|
|
private _logPollInterval: ReturnType<typeof setInterval> | null = null;
|
|
|
|
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);
|
|
this.stopLogPolling();
|
|
}
|
|
|
|
private handleAutoRefresh(): void {
|
|
this.loadPipelines();
|
|
}
|
|
|
|
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-success { background: #1a3a1a; color: #00ff88; }
|
|
.status-failed { background: #3a1a1a; color: #ff4444; }
|
|
.status-running { background: #1a2a3a; color: #00acff; }
|
|
.status-pending { background: #3a3a1a; color: #ffaa00; }
|
|
.status-canceled { background: #2a2a2a; color: #999; }
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
const connectionOptions = this.connectionsState.connections.map((c) => ({
|
|
option: `${c.name} (${c.providerType})`,
|
|
key: c.id,
|
|
}));
|
|
|
|
const viewModeOptions = [
|
|
{ option: 'Current', key: 'current' },
|
|
{ option: 'Project', key: 'project' },
|
|
{ option: 'Group', key: 'group' },
|
|
{ option: 'Error', key: 'error' },
|
|
];
|
|
|
|
const timeRangeOptions = [
|
|
{ option: '1 hour', key: '1h' },
|
|
{ option: '6 hours', key: '6h' },
|
|
{ option: '1 day', key: '1d' },
|
|
{ option: '3 days', key: '3d' },
|
|
{ option: '7 days', key: '7d' },
|
|
{ option: '30 days', key: '30d' },
|
|
];
|
|
|
|
const sortByOptions = [
|
|
{ option: 'Created', key: 'created' },
|
|
{ option: 'Duration', key: 'duration' },
|
|
{ option: 'Status', key: 'status' },
|
|
];
|
|
|
|
const projectOptions = this.dataState.projects.map((p) => ({
|
|
option: p.fullPath || p.name,
|
|
key: p.id,
|
|
}));
|
|
|
|
const groupOptions = this.dataState.groups.map((g) => ({
|
|
option: g.fullPath || g.name,
|
|
key: g.id,
|
|
}));
|
|
|
|
const showMultiProjectColumns = this.viewMode !== 'project';
|
|
|
|
return html`
|
|
<div class="view-title">Pipelines</div>
|
|
<div class="view-description">View and manage CI/CD pipelines</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.onConnectionChange();
|
|
}}
|
|
></dees-input-dropdown>
|
|
<dees-input-dropdown
|
|
.label=${'View'}
|
|
.options=${viewModeOptions}
|
|
.selectedOption=${viewModeOptions.find((o) => o.key === this.viewMode)}
|
|
@selectedOption=${(e: CustomEvent) => {
|
|
this.onViewModeChange(e.detail.key);
|
|
}}
|
|
></dees-input-dropdown>
|
|
${this.viewMode === 'project' ? html`
|
|
<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;
|
|
this.loadPipelines();
|
|
}}
|
|
></dees-input-dropdown>
|
|
` : ''}
|
|
${this.viewMode === 'group' ? html`
|
|
<dees-input-dropdown
|
|
.label=${'Group'}
|
|
.options=${groupOptions}
|
|
.selectedOption=${groupOptions.find((o) => o.key === this.selectedGroupId) || groupOptions[0]}
|
|
@selectedOption=${(e: CustomEvent) => {
|
|
this.selectedGroupId = e.detail.key;
|
|
this.loadPipelines();
|
|
}}
|
|
></dees-input-dropdown>
|
|
` : ''}
|
|
<dees-input-dropdown
|
|
.label=${'Time'}
|
|
.options=${timeRangeOptions}
|
|
.selectedOption=${timeRangeOptions.find((o) => o.key === this.timeRange)}
|
|
@selectedOption=${(e: CustomEvent) => {
|
|
this.timeRange = e.detail.key;
|
|
this.loadPipelines();
|
|
}}
|
|
></dees-input-dropdown>
|
|
<dees-input-dropdown
|
|
.label=${'Sort'}
|
|
.options=${sortByOptions}
|
|
.selectedOption=${sortByOptions.find((o) => o.key === this.sortBy)}
|
|
@selectedOption=${(e: CustomEvent) => {
|
|
this.sortBy = e.detail.key;
|
|
this.loadPipelines();
|
|
}}
|
|
></dees-input-dropdown>
|
|
<dees-button @click=${() => this.loadPipelines()}>Refresh</dees-button>
|
|
</div>
|
|
<dees-table
|
|
.heading1=${'CI/CD Pipelines'}
|
|
.heading2=${this.isLoading ? 'Loading...' : `${this.dataState.pipelines.length} pipeline runs`}
|
|
.data=${this.dataState.pipelines}
|
|
.displayFunction=${(item: any) => {
|
|
const row: any = {};
|
|
row['ID'] = item.id;
|
|
row['Status'] = item.status;
|
|
if (showMultiProjectColumns) {
|
|
row['Project'] = item.projectName;
|
|
}
|
|
row['Ref'] = item.ref;
|
|
row['Duration'] = item.duration ? `${Math.round(item.duration)}s` : '-';
|
|
row['Source'] = item.source;
|
|
row['Created'] = item.createdAt ? new Date(item.createdAt).toLocaleString() : '-';
|
|
return row;
|
|
}}
|
|
.dataActions=${[
|
|
{
|
|
name: 'View Logs',
|
|
iconName: 'lucide:terminal',
|
|
type: ['inRow', 'contextmenu'],
|
|
actionFunc: async ({ item }: any) => { await this.openPipelineLogs(item); },
|
|
},
|
|
{
|
|
name: 'View Jobs',
|
|
iconName: 'lucide:list',
|
|
type: ['contextmenu'],
|
|
actionFunc: async ({ item }: any) => { await this.viewJobs(item); },
|
|
},
|
|
{
|
|
name: 'Retry',
|
|
iconName: 'lucide:refreshCw',
|
|
type: ['inRow', 'contextmenu'],
|
|
actionFunc: async ({ item }: any) => {
|
|
await appstate.dataStatePart.dispatchAction(appstate.retryPipelineAction, {
|
|
connectionId: item.connectionId || this.selectedConnectionId,
|
|
projectId: item.projectId,
|
|
pipelineId: item.id,
|
|
});
|
|
await this.loadPipelines();
|
|
},
|
|
},
|
|
{
|
|
name: 'Cancel',
|
|
iconName: 'lucide:xCircle',
|
|
type: ['contextmenu'],
|
|
actionFunc: async ({ item }: any) => {
|
|
await appstate.dataStatePart.dispatchAction(appstate.cancelPipelineAction, {
|
|
connectionId: item.connectionId || this.selectedConnectionId,
|
|
projectId: item.projectId,
|
|
pipelineId: item.id,
|
|
});
|
|
await this.loadPipelines();
|
|
},
|
|
},
|
|
]}
|
|
></dees-table>
|
|
`;
|
|
}
|
|
|
|
async firstUpdated() {
|
|
await appstate.connectionsStatePart.dispatchAction(appstate.fetchConnectionsAction, null);
|
|
|
|
// Check for navigation context from projects view
|
|
const navCtx = appstate.uiStatePart.getState().navigationContext;
|
|
if (navCtx?.connectionId && navCtx?.projectId) {
|
|
this.selectedConnectionId = navCtx.connectionId;
|
|
this.selectedProjectId = navCtx.projectId;
|
|
this.viewMode = 'project';
|
|
appstate.uiStatePart.dispatchAction(appstate.clearNavigationContextAction, null);
|
|
await this.loadProjects();
|
|
await this.loadPipelines();
|
|
return;
|
|
}
|
|
|
|
const conns = appstate.connectionsStatePart.getState().connections;
|
|
if (conns.length > 0 && !this.selectedConnectionId) {
|
|
this.selectedConnectionId = conns[0].id;
|
|
// In 'current' mode, load pipelines immediately
|
|
await this.loadPipelines();
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Data loading
|
|
// ---------------------------------------------------------------------------
|
|
|
|
private async onConnectionChange() {
|
|
this.selectedProjectId = '';
|
|
this.selectedGroupId = '';
|
|
if (this.viewMode === 'project') {
|
|
await this.loadProjects();
|
|
} else if (this.viewMode === 'group') {
|
|
await this.loadGroups();
|
|
} else {
|
|
await this.loadPipelines();
|
|
}
|
|
}
|
|
|
|
private onViewModeChange(newMode: TViewMode) {
|
|
this.stopLogPolling();
|
|
this.viewMode = newMode;
|
|
this.selectedProjectId = '';
|
|
this.selectedGroupId = '';
|
|
|
|
if (newMode === 'current' || newMode === 'error') {
|
|
this.loadPipelines();
|
|
} else if (newMode === 'project') {
|
|
this.loadProjects();
|
|
} else if (newMode === 'group') {
|
|
this.loadGroups();
|
|
}
|
|
}
|
|
|
|
private async loadProjects() {
|
|
if (!this.selectedConnectionId) return;
|
|
await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
|
|
connectionId: this.selectedConnectionId,
|
|
});
|
|
}
|
|
|
|
private async loadGroups() {
|
|
if (!this.selectedConnectionId) return;
|
|
await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, {
|
|
connectionId: this.selectedConnectionId,
|
|
});
|
|
}
|
|
|
|
private async loadPipelines() {
|
|
if (!this.selectedConnectionId) return;
|
|
|
|
// For project mode, require a project selection
|
|
if (this.viewMode === 'project' && !this.selectedProjectId) return;
|
|
// For group mode, require a group selection
|
|
if (this.viewMode === 'group' && !this.selectedGroupId) return;
|
|
|
|
this.isLoading = true;
|
|
try {
|
|
await appstate.dataStatePart.dispatchAction(appstate.fetchPipelinesAction, {
|
|
connectionId: this.selectedConnectionId,
|
|
projectId: this.viewMode === 'project' ? this.selectedProjectId : undefined,
|
|
viewMode: this.viewMode,
|
|
groupId: this.viewMode === 'group' ? this.selectedGroupId : undefined,
|
|
sortBy: this.sortBy,
|
|
timeRange: this.timeRange,
|
|
});
|
|
} finally {
|
|
this.isLoading = false;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Pipeline log viewing
|
|
// ---------------------------------------------------------------------------
|
|
|
|
private async openPipelineLogs(pipeline: any) {
|
|
await appstate.dataStatePart.dispatchAction(appstate.fetchPipelineJobsAction, {
|
|
connectionId: pipeline.connectionId || this.selectedConnectionId,
|
|
projectId: pipeline.projectId,
|
|
pipelineId: pipeline.id,
|
|
});
|
|
|
|
const jobs = appstate.dataStatePart.getState().pipelineJobs;
|
|
let activeJobId: string | null = null;
|
|
|
|
const modal = await plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: `Pipeline #${pipeline.id} - Logs`,
|
|
content: html`
|
|
<style>
|
|
.log-container {
|
|
display: flex;
|
|
gap: 0;
|
|
min-height: 400px;
|
|
max-height: 70vh;
|
|
color: #ccc;
|
|
font-family: 'Intel One Mono', 'Fira Code', monospace;
|
|
}
|
|
.job-list {
|
|
width: 220px;
|
|
flex-shrink: 0;
|
|
border-right: 1px solid #333;
|
|
overflow-y: auto;
|
|
}
|
|
.job-entry {
|
|
padding: 10px 14px;
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #282828;
|
|
transition: background 0.15s;
|
|
}
|
|
.job-entry:hover {
|
|
background: #1a1a2e;
|
|
}
|
|
.job-entry.active {
|
|
background: #1a2a3a;
|
|
border-left: 3px solid #00acff;
|
|
padding-left: 11px;
|
|
}
|
|
.job-name {
|
|
font-weight: 600;
|
|
font-size: 13px;
|
|
color: #eee;
|
|
}
|
|
.job-meta {
|
|
font-size: 11px;
|
|
color: #888;
|
|
margin-top: 3px;
|
|
}
|
|
.job-status-badge {
|
|
display: inline-block;
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
}
|
|
.job-status-badge.running { background: #1a2a3a; color: #00acff; }
|
|
.job-status-badge.success { background: #1a3a1a; color: #00ff88; }
|
|
.job-status-badge.failed { background: #3a1a1a; color: #ff4444; }
|
|
.job-status-badge.pending { background: #3a3a1a; color: #ffaa00; }
|
|
.job-status-badge.canceled { background: #2a2a2a; color: #999; }
|
|
.log-output {
|
|
flex: 1;
|
|
overflow: auto;
|
|
background: #0d0d0d;
|
|
padding: 12px;
|
|
}
|
|
.log-output pre {
|
|
margin: 0;
|
|
white-space: pre-wrap;
|
|
word-break: break-all;
|
|
font-family: 'Intel One Mono', 'Fira Code', monospace;
|
|
font-size: 12px;
|
|
line-height: 1.6;
|
|
color: #ccc;
|
|
}
|
|
.no-log {
|
|
color: #666;
|
|
padding: 40px 20px;
|
|
text-align: center;
|
|
font-size: 13px;
|
|
}
|
|
</style>
|
|
<div class="log-container">
|
|
<div class="job-list">
|
|
${jobs.map((job: any) => html`
|
|
<div
|
|
class="job-entry"
|
|
data-job-id="${job.id}"
|
|
@click=${async (e: Event) => {
|
|
// Update active state visually
|
|
const container = (e.target as HTMLElement).closest('.log-container');
|
|
container?.querySelectorAll('.job-entry').forEach((el: Element) => el.classList.remove('active'));
|
|
(e.target as HTMLElement).closest('.job-entry')?.classList.add('active');
|
|
activeJobId = job.id;
|
|
await this.selectJobForLog(job, pipeline, container);
|
|
}}
|
|
>
|
|
<div class="job-name">${job.name}</div>
|
|
<div class="job-meta">
|
|
<span class="job-status-badge ${job.status}">${job.status}</span>
|
|
${job.stage ? ` ${job.stage}` : ''}
|
|
${job.duration ? ` - ${Math.round(job.duration)}s` : ''}
|
|
</div>
|
|
</div>
|
|
`)}
|
|
${jobs.length === 0 ? html`<div class="no-log">No jobs found.</div>` : ''}
|
|
</div>
|
|
<div class="log-output">
|
|
<pre class="job-log-pre"><span class="no-log">Select a job to view its log.</span></pre>
|
|
</div>
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'Close',
|
|
action: async (modalRef: any) => {
|
|
this.stopLogPolling();
|
|
modalRef.destroy();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
private async selectJobForLog(job: any, pipeline: any, container: Element | null) {
|
|
this.stopLogPolling();
|
|
|
|
// Fetch initial log
|
|
await this.fetchAndDisplayLog(job, pipeline, container);
|
|
|
|
// If job is running/pending, poll every 3 seconds
|
|
if (job.status === 'running' || job.status === 'pending' || job.status === 'waiting') {
|
|
this._logPollInterval = setInterval(async () => {
|
|
await this.fetchAndDisplayLog(job, pipeline, container);
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
private async fetchAndDisplayLog(job: any, pipeline: any, container: Element | null) {
|
|
try {
|
|
await appstate.dataStatePart.dispatchAction(appstate.fetchJobLogAction, {
|
|
connectionId: pipeline.connectionId || this.selectedConnectionId,
|
|
projectId: pipeline.projectId,
|
|
jobId: job.id,
|
|
});
|
|
|
|
const log = appstate.dataStatePart.getState().currentJobLog;
|
|
const pre = container?.querySelector('.job-log-pre');
|
|
if (pre) {
|
|
pre.textContent = log || '(No output yet)';
|
|
// Auto-scroll to bottom
|
|
const logOutput = pre.closest('.log-output');
|
|
if (logOutput) {
|
|
logOutput.scrollTop = logOutput.scrollHeight;
|
|
}
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch job log:', err);
|
|
}
|
|
}
|
|
|
|
private stopLogPolling() {
|
|
if (this._logPollInterval !== null) {
|
|
clearInterval(this._logPollInterval);
|
|
this._logPollInterval = null;
|
|
}
|
|
}
|
|
|
|
// ---------------------------------------------------------------------------
|
|
// Legacy job view (accessible via context menu)
|
|
// ---------------------------------------------------------------------------
|
|
|
|
private async viewJobs(pipeline: any) {
|
|
await appstate.dataStatePart.dispatchAction(appstate.fetchPipelineJobsAction, {
|
|
connectionId: pipeline.connectionId || this.selectedConnectionId,
|
|
projectId: pipeline.projectId,
|
|
pipelineId: pipeline.id,
|
|
});
|
|
|
|
const jobs = appstate.dataStatePart.getState().pipelineJobs;
|
|
await plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: `Pipeline #${pipeline.id} - Jobs`,
|
|
content: html`
|
|
<style>
|
|
.jobs-list { color: #fff; }
|
|
.job-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #333; }
|
|
.job-name { font-weight: 600; }
|
|
.job-status { text-transform: uppercase; font-size: 12px; }
|
|
</style>
|
|
<div class="jobs-list">
|
|
${jobs.map((job: any) => html`
|
|
<div class="job-item">
|
|
<span class="job-name">${job.name} (${job.stage})</span>
|
|
<span class="job-status">${job.status} - ${job.duration ? `${Math.round(job.duration)}s` : '-'}</span>
|
|
</div>
|
|
`)}
|
|
${jobs.length === 0 ? html`<p>No jobs found.</p>` : ''}
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Close', action: async (modal: any) => { modal.destroy(); } },
|
|
],
|
|
});
|
|
}
|
|
}
|