initial
This commit is contained in:
207
ts_web/elements/views/pipelines/index.ts
Normal file
207
ts_web/elements/views/pipelines/index.ts
Normal file
@@ -0,0 +1,207 @@
|
||||
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-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 = '';
|
||||
|
||||
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);
|
||||
}
|
||||
|
||||
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 projectOptions = this.dataState.projects.map((p) => ({
|
||||
option: p.fullPath || p.name,
|
||||
key: p.id,
|
||||
}));
|
||||
|
||||
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.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;
|
||||
this.loadPipelines();
|
||||
}}
|
||||
></dees-input-dropdown>
|
||||
<dees-button @click=${() => this.loadPipelines()}>Refresh</dees-button>
|
||||
</div>
|
||||
<dees-table
|
||||
.heading1=${'CI/CD Pipelines'}
|
||||
.heading2=${'Pipeline runs for the selected project'}
|
||||
.data=${this.dataState.pipelines}
|
||||
.displayFunction=${(item: any) => ({
|
||||
ID: item.id,
|
||||
Status: item.status,
|
||||
Ref: item.ref,
|
||||
Duration: item.duration ? `${Math.round(item.duration)}s` : '-',
|
||||
Source: item.source,
|
||||
Created: item.createdAt ? new Date(item.createdAt).toLocaleString() : '-',
|
||||
})}
|
||||
.dataActions=${[
|
||||
{
|
||||
name: 'View Jobs',
|
||||
iconName: 'lucide:list',
|
||||
action: async (item: any) => { await this.viewJobs(item); },
|
||||
},
|
||||
{
|
||||
name: 'Retry',
|
||||
iconName: 'lucide:refresh-cw',
|
||||
action: async (item: any) => {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.retryPipelineAction, {
|
||||
connectionId: this.selectedConnectionId,
|
||||
projectId: this.selectedProjectId,
|
||||
pipelineId: item.id,
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
name: 'Cancel',
|
||||
iconName: 'lucide:x-circle',
|
||||
action: async (item: any) => {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.cancelPipelineAction, {
|
||||
connectionId: this.selectedConnectionId,
|
||||
projectId: this.selectedProjectId,
|
||||
pipelineId: 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.loadProjects();
|
||||
}
|
||||
}
|
||||
|
||||
private async loadProjects() {
|
||||
if (!this.selectedConnectionId) return;
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchProjectsAction, {
|
||||
connectionId: this.selectedConnectionId,
|
||||
});
|
||||
}
|
||||
|
||||
private async loadPipelines() {
|
||||
if (!this.selectedConnectionId || !this.selectedProjectId) return;
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchPipelinesAction, {
|
||||
connectionId: this.selectedConnectionId,
|
||||
projectId: this.selectedProjectId,
|
||||
});
|
||||
}
|
||||
|
||||
private async viewJobs(pipeline: any) {
|
||||
await appstate.dataStatePart.dispatchAction(appstate.fetchPipelineJobsAction, {
|
||||
connectionId: this.selectedConnectionId,
|
||||
projectId: this.selectedProjectId,
|
||||
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(); } },
|
||||
],
|
||||
});
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user