serve.zone/gitops
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(pipelines): add pipelines view modes, time-range filtering, group aggregation, sorting, and job log polling

Browse Source
This commit is contained in:
Jürgen Kunz
2026-03-02 12:12:41 +00:00
parent 423860c21c
commit c3d50736cd
12 changed files with 659 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
changelog.md
View File

@@ -1,5 +1,15 @@
# Changelog
## 2026-03-02 - 2.12.0 - feat(pipelines)
add pipelines view modes, time-range filtering, group aggregation, sorting, and job log polling
- Add view modes for pipelines: 'current', 'project', 'group', and 'error'; support timeRange and sortBy parameters on getPipelines requests and in the UI.
- Implement aggregated pipeline fetching across projects with batching, deduplication, and active-run prioritization (fetchCurrentPipelines, fetchAggregatedPipelines, fetchGroupPipelines, fetchErrorPipelines).
- Add filtering by time ranges (1h, 6h, 1d, 3d, 7d, 30d) and sorting options (created, duration, status) with status priority ordering.
- Extend BaseProvider API: add IPipelineListOptions (status, ref, source), add getGroupProjects, and update Gitea/GitLab providers to honor new options and include projectName mapping.
- Enhance web UI: new controls/state for viewMode, timeRange, sortBy, group selection, plus job log polling with auto-scroll and cleanup on disconnect.
- Bump dependencies: @apiclient.xyz/gitea 1.3.0 -> 1.4.0 and @apiclient.xyz/gitlab 2.4.0 -> 2.5.0.
## 2026-03-02 - 2.11.1 - fix(meta)
update repository metadata (non-functional change)

4
package.json
View File

@@ -16,8 +16,8 @@
"@api.global/typedrequest-interfaces": "^3.0.19",
"@api.global/typedserver": "8.4.0",
"@api.global/typedsocket": "^4.1.0",
"@apiclient.xyz/gitea": "1.3.0",
"@apiclient.xyz/gitlab": "2.4.0",
"@apiclient.xyz/gitea": "1.4.0",
"@apiclient.xyz/gitlab": "2.5.0",
"@design.estate/dees-catalog": "^3.43.3",
"@design.estate/dees-element": "^2.1.6"
},

2
ts/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@serve.zone/gitops',
version: '2.11.1',
version: '2.12.0',
description: 'GitOps management app for Gitea and GitLab - manage secrets, browse projects, view CI pipelines, and stream build logs'
}

210
ts/opsserver/handlers/pipelines.handler.ts
View File

@@ -2,6 +2,27 @@ import * as plugins from '../../plugins.ts';
import type { OpsServer } from '../classes.opsserver.ts';
import * as interfaces from '../../../ts_interfaces/index.ts';
import { requireValidIdentity } from '../helpers/guards.ts';
import type { BaseProvider } from '../../providers/classes.baseprovider.ts';
const TIME_RANGE_MS: Record<string, number> = {
'1h': 60 * 60 * 1000,
'6h': 6 * 60 * 60 * 1000,
'1d': 24 * 60 * 60 * 1000,
'3d': 3 * 24 * 60 * 60 * 1000,
'7d': 7 * 24 * 60 * 60 * 1000,
'30d': 30 * 24 * 60 * 60 * 1000,
};
const STATUS_PRIORITY: Record<string, number> = {
running: 0,
pending: 1,
waiting: 2,
manual: 3,
failed: 4,
canceled: 5,
success: 6,
skipped: 7,
};
export class PipelinesHandler {
public typedrouter = new plugins.typedrequest.TypedRouter();
@@ -16,7 +37,7 @@ export class PipelinesHandler {
}
private registerHandlers(): void {
// Get pipelines
// Get pipelines — supports view modes
this.typedrouter.addTypedHandler(
new plugins.typedrequest.TypedHandler<interfaces.requests.IReq_GetPipelines>(
'getPipelines',
@@ -25,10 +46,32 @@ export class PipelinesHandler {
const provider = this.opsServerRef.gitopsAppRef.connectionManager.getProvider(
dataArg.connectionId,
);
const pipelines = await provider.getPipelines(dataArg.projectId, {
page: dataArg.page,
});
return { pipelines };
const viewMode = dataArg.viewMode || 'project';
const timeRange = dataArg.timeRange || '1d';
const sortBy = dataArg.sortBy || 'created';
let pipelines: interfaces.data.IPipeline[];
if (viewMode === 'project') {
if (!dataArg.projectId) return { pipelines: [] };
pipelines = await provider.getPipelines(dataArg.projectId, {
page: dataArg.page,
status: dataArg.status,
});
pipelines = this.filterByTimeRange(pipelines, timeRange);
} else if (viewMode === 'current') {
pipelines = await this.fetchCurrentPipelines(provider, timeRange);
} else if (viewMode === 'group') {
if (!dataArg.groupId) return { pipelines: [] };
pipelines = await this.fetchGroupPipelines(provider, dataArg.groupId, timeRange);
} else if (viewMode === 'error') {
pipelines = await this.fetchErrorPipelines(provider, timeRange);
} else {
pipelines = [];
}
return { pipelines: this.sortPipelines(pipelines, sortBy).slice(0, 200) };
},
),
);
@@ -94,4 +137,161 @@ export class PipelinesHandler {
),
);
}
// ---------------------------------------------------------------------------
// View mode helpers
// ---------------------------------------------------------------------------
/**
* Current mode: running/pending always shown, plus recent pipelines within timeRange.
* Makes two parallel aggregation passes to ensure active pipelines are never missed:
* 1. Recent pipelines (no status filter) — for time-range display
* 2. Active pipelines (status: 'running') — guarantees we catch all running ones
*/
private async fetchCurrentPipelines(
provider: BaseProvider,
timeRange: string,
): Promise<interfaces.data.IPipeline[]> {
const projects = await provider.getProjects();
// Two parallel fetches: recent + explicitly active
const [recentPipelines, activePipelines] = await Promise.all([
this.fetchAggregatedPipelines(provider, projects, { perPage: 50 }),
this.fetchAggregatedPipelines(provider, projects, { status: 'running', perPage: 50 }),
]);
// Merge and deduplicate (active first so they take precedence)
const seenIds = new Set<string>();
const merged: interfaces.data.IPipeline[] = [];
for (const p of [...activePipelines, ...recentPipelines]) {
const key = `${p.connectionId}:${p.projectId}:${p.id}`;
if (!seenIds.has(key)) {
seenIds.add(key);
merged.push(p);
}
}
// Running/pending pipelines are always shown regardless of time
const active = merged.filter(
(p) => p.status === 'running' || p.status === 'pending' || p.status === 'waiting',
);
const rest = merged.filter(
(p) => p.status !== 'running' && p.status !== 'pending' && p.status !== 'waiting',
);
const filteredRest = this.filterByTimeRange(rest, timeRange);
// Final dedup (active pipelines may also appear in filtered rest)
const activeIds = new Set(active.map((p) => `${p.connectionId}:${p.projectId}:${p.id}`));
const uniqueRest = filteredRest.filter(
(p) => !activeIds.has(`${p.connectionId}:${p.projectId}:${p.id}`),
);
return [...active, ...uniqueRest];
}
/**
* Group mode: pipelines from all projects in a group
*/
private async fetchGroupPipelines(
provider: BaseProvider,
groupId: string,
timeRange: string,
): Promise<interfaces.data.IPipeline[]> {
const projects = await provider.getGroupProjects(groupId);
const allPipelines = await this.fetchAggregatedPipelines(provider, projects);
return this.filterByTimeRange(allPipelines, timeRange);
}
/**
* Error mode: only failed pipelines
*/
private async fetchErrorPipelines(
provider: BaseProvider,
timeRange: string,
): Promise<interfaces.data.IPipeline[]> {
const projects = await provider.getProjects();
const allPipelines = await this.fetchAggregatedPipelines(provider, projects, { status: 'failed' });
return this.filterByTimeRange(allPipelines, timeRange);
}
/**
* Fetch pipelines from multiple projects in parallel (batched)
*/
private async fetchAggregatedPipelines(
provider: BaseProvider,
projects: interfaces.data.IProject[],
opts?: { status?: string; perPage?: number },
): Promise<interfaces.data.IPipeline[]> {
const BATCH_SIZE = 10;
const perPage = opts?.perPage || 50;
const allPipelines: interfaces.data.IPipeline[] = [];
for (let i = 0; i < projects.length; i += BATCH_SIZE) {
const batch = projects.slice(i, i + BATCH_SIZE);
const results = await Promise.allSettled(
batch.map(async (project) => {
const pipelines = await provider.getPipelines(project.id, {
perPage,
status: opts?.status,
});
// Enrich with proper project name
return pipelines.map((p) => ({
...p,
projectName: project.fullPath || project.name || p.projectId,
}));
}),
);
for (let j = 0; j < results.length; j++) {
const result = results[j];
if (result.status === 'fulfilled') {
allPipelines.push(...result.value);
} else {
const projectId = batch[j]?.id || 'unknown';
console.warn(`[PipelinesHandler] Failed to fetch pipelines for project ${projectId}: ${result.reason}`);
}
}
}
return allPipelines;
}
// ---------------------------------------------------------------------------
// Filtering and sorting
// ---------------------------------------------------------------------------
private filterByTimeRange(
pipelines: interfaces.data.IPipeline[],
timeRange: string,
): interfaces.data.IPipeline[] {
const cutoffMs = TIME_RANGE_MS[timeRange] || TIME_RANGE_MS['1d'];
const cutoff = Date.now() - cutoffMs;
return pipelines.filter((p) => {
if (!p.createdAt) return false;
return new Date(p.createdAt).getTime() >= cutoff;
});
}
private sortPipelines(
pipelines: interfaces.data.IPipeline[],
sortBy: string,
): interfaces.data.IPipeline[] {
const sorted = [...pipelines];
switch (sortBy) {
case 'duration':
sorted.sort((a, b) => (b.duration || 0) - (a.duration || 0));
break;
case 'status':
sorted.sort(
(a, b) => (STATUS_PRIORITY[a.status] ?? 99) - (STATUS_PRIORITY[b.status] ?? 99),
);
break;
case 'created':
default:
sorted.sort(
(a, b) => new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
);
break;
}
return sorted;
}
}

11
ts/providers/classes.baseprovider.ts
View File

@@ -11,6 +11,12 @@ export interface IListOptions {
perPage?: number;
}
export interface IPipelineListOptions extends IListOptions {
status?: string;
ref?: string;
source?: string;
}
/**
* Abstract base class for Git provider implementations.
* Subclasses implement Gitea API v1 or GitLab API v4.
@@ -36,6 +42,9 @@ export abstract class BaseProvider {
// Groups / Orgs
abstract getGroups(opts?: IListOptions): Promise<interfaces.data.IGroup[]>;
// Group Projects
abstract getGroupProjects(groupId: string, opts?: IListOptions): Promise<interfaces.data.IProject[]>;
// Secrets — project scope
abstract getProjectSecrets(projectId: string): Promise<interfaces.data.ISecret[]>;
abstract createProjectSecret(
@@ -71,7 +80,7 @@ export abstract class BaseProvider {
// Pipelines / CI
abstract getPipelines(
projectId: string,
opts?: IListOptions,
opts?: IPipelineListOptions,
): Promise<interfaces.data.IPipeline[]>;
abstract getPipelineJobs(
projectId: string,

33
ts/providers/classes.giteaprovider.ts
View File

@@ -1,6 +1,6 @@
import * as plugins from '../plugins.ts';
import type * as interfaces from '../../ts_interfaces/index.ts';
import { BaseProvider, type ITestConnectionResult, type IListOptions } from './classes.baseprovider.ts';
import { BaseProvider, type ITestConnectionResult, type IListOptions, type IPipelineListOptions } from './classes.baseprovider.ts';
/**
* Gitea API v1 provider implementation
@@ -70,6 +70,23 @@ export class GiteaProvider extends BaseProvider {
return allOrgs.map((o) => this.mapGroup(o));
}
async getGroupProjects(groupId: string, opts?: IListOptions): Promise<interfaces.data.IProject[]> {
if (opts?.page) {
const repos = await this.client.getOrgRepos(groupId, opts);
return repos.map((r) => this.mapProject(r));
}
const allRepos: plugins.giteaClient.IGiteaRepository[] = [];
const perPage = opts?.perPage || 50;
let page = 1;
while (true) {
const repos = await this.client.getOrgRepos(groupId, { ...opts, page, perPage });
allRepos.push(...repos);
if (repos.length < perPage) break;
page++;
}
return allRepos.map((r) => this.mapProject(r));
}
// --- Branches / Tags ---
async getBranches(projectFullPath: string, opts?: IListOptions): Promise<interfaces.data.IBranch[]> {
@@ -166,9 +183,15 @@ export class GiteaProvider extends BaseProvider {
async getPipelines(
projectId: string,
opts?: IListOptions,
opts?: IPipelineListOptions,
): Promise<interfaces.data.IPipeline[]> {
const runs = await this.client.getActionRuns(projectId, opts);
const runs = await this.client.getActionRuns(projectId, {
page: opts?.page,
perPage: opts?.perPage,
status: opts?.status,
branch: opts?.ref,
event: opts?.source,
});
return runs.map((r) => this.mapPipeline(r, projectId));
}
@@ -236,11 +259,11 @@ export class GiteaProvider extends BaseProvider {
};
}
private mapPipeline(r: plugins.giteaClient.IGiteaActionRun, projectId: string): interfaces.data.IPipeline {
private mapPipeline(r: plugins.giteaClient.IGiteaActionRun, projectId: string, projectName?: string): interfaces.data.IPipeline {
return {
id: String(r.id),
projectId,
projectName: projectId,
projectName: projectName || projectId,
connectionId: this.connectionId,
status: this.mapStatus(r.status || r.conclusion),
ref: r.head_branch || '',

33
ts/providers/classes.gitlabprovider.ts
View File

@@ -1,6 +1,6 @@
import * as plugins from '../plugins.ts';
import type * as interfaces from '../../ts_interfaces/index.ts';
import { BaseProvider, type ITestConnectionResult, type IListOptions } from './classes.baseprovider.ts';
import { BaseProvider, type ITestConnectionResult, type IListOptions, type IPipelineListOptions } from './classes.baseprovider.ts';
/**
* GitLab API v4 provider implementation
@@ -85,6 +85,23 @@ export class GitLabProvider extends BaseProvider {
return allGroups.map((g) => this.mapGroup(g));
}
async getGroupProjects(groupId: string, opts?: IListOptions): Promise<interfaces.data.IProject[]> {
if (opts?.page) {
const projects = await this.client.getGroupProjects(groupId, opts);
return projects.map((p) => this.mapProject(p));
}
const allProjects: plugins.gitlabClient.IGitLabProject[] = [];
const perPage = opts?.perPage || 50;
let page = 1;
while (true) {
const projects = await this.client.getGroupProjects(groupId, { ...opts, page, perPage });
allProjects.push(...projects);
if (projects.length < perPage) break;
page++;
}
return allProjects.map((p) => this.mapProject(p));
}
// --- Branches / Tags ---
async getBranches(projectFullPath: string, opts?: IListOptions): Promise<interfaces.data.IBranch[]> {
@@ -183,9 +200,15 @@ export class GitLabProvider extends BaseProvider {
async getPipelines(
projectId: string,
opts?: IListOptions,
opts?: IPipelineListOptions,
): Promise<interfaces.data.IPipeline[]> {
const pipelines = await this.client.getPipelines(projectId, opts);
const pipelines = await this.client.getPipelines(projectId, {
page: opts?.page,
perPage: opts?.perPage,
status: opts?.status,
ref: opts?.ref,
source: opts?.source,
});
return pipelines.map((p) => this.mapPipeline(p, projectId));
}
@@ -258,11 +281,11 @@ export class GitLabProvider extends BaseProvider {
};
}
private mapPipeline(p: plugins.gitlabClient.IGitLabPipeline, projectId: string): interfaces.data.IPipeline {
private mapPipeline(p: plugins.gitlabClient.IGitLabPipeline, projectId: string, projectName?: string): interfaces.data.IPipeline {
return {
id: String(p.id),
projectId,
projectName: projectId,
projectName: projectName || projectId,
connectionId: this.connectionId,
status: (p.status || 'pending') as interfaces.data.TPipelineStatus,
ref: p.ref || '',

2
ts_bundled/bundle.ts
View File

File diff suppressed because one or more lines are too long

7
ts_interfaces/requests/pipelines.ts
View File

@@ -9,7 +9,12 @@ export interface IReq_GetPipelines extends plugins.typedrequestInterfaces.implem
request: {
identity: data.IIdentity;
connectionId: string;
projectId: string;
projectId?: string;
viewMode?: 'current' | 'project' | 'group' | 'error';
groupId?: string;
status?: string;
sortBy?: 'created' | 'duration' | 'status';
timeRange?: '1h' | '6h' | '1d' | '3d' | '7d' | '30d';
page?: number;
};
response: {

2
ts_web/00_commitinfo_data.ts
View File

@@ -3,6 +3,6 @@
*/
export const commitinfo = {
name: '@serve.zone/gitops',
version: '2.11.1',
version: '2.12.0',
description: 'GitOps management app for Gitea and GitLab - manage secrets, browse projects, view CI pipelines, and stream build logs'
}

12
ts_web/appstate.ts
View File

@@ -516,7 +516,12 @@ export const deleteSecretAction = dataStatePart.createAction<{
export const fetchPipelinesAction = dataStatePart.createAction<{
connectionId: string;
projectId: string;
projectId?: string;
viewMode?: 'current' | 'project' | 'group' | 'error';
groupId?: string;
status?: string;
sortBy?: 'created' | 'duration' | 'status';
timeRange?: '1h' | '6h' | '1d' | '3d' | '7d' | '30d';
}>(async (statePartArg, dataArg) => {
const context = getActionContext();
try {
@@ -527,6 +532,11 @@ export const fetchPipelinesAction = dataStatePart.createAction<{
identity: context.identity!,
connectionId: dataArg.connectionId,
projectId: dataArg.projectId,
viewMode: dataArg.viewMode,
groupId: dataArg.groupId,
status: dataArg.status,
sortBy: dataArg.sortBy,
timeRange: dataArg.timeRange,
});
return { ...statePartArg.getState(), pipelines: response.pipelines };
} catch (err) {

387
ts_web/elements/views/pipelines/index.ts
View File

@@ -11,6 +11,10 @@ import {
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()
@@ -29,13 +33,16 @@ export class GitopsViewPipelines extends DeesElement {
currentJobLog: '',
};
@state()
accessor selectedConnectionId: string = '';
@state()
accessor selectedProjectId: string = '';
@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();
@@ -56,6 +63,7 @@ export class GitopsViewPipelines extends DeesElement {
public override disconnectedCallback() {
super.disconnectedCallback();
document.removeEventListener('gitops-auto-refresh', this._autoRefreshHandler);
this.stopLogPolling();
}
private handleAutoRefresh(): void {
@@ -88,11 +96,40 @@ export class GitopsViewPipelines extends DeesElement {
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>
@@ -103,15 +140,54 @@ export class GitopsViewPipelines extends DeesElement {
.selectedOption=${connectionOptions.find((o) => o.key === this.selectedConnectionId) || connectionOptions[0]}
@selectedOption=${(e: CustomEvent) => {
this.selectedConnectionId = e.detail.key;
this.loadProjects();
this.onConnectionChange();
}}
></dees-input-dropdown>
<dees-input-dropdown
.label=${'Project'}
.options=${projectOptions}
.selectedOption=${projectOptions.find((o) => o.key === this.selectedProjectId) || projectOptions[0]}
.label=${'View'}
.options=${viewModeOptions}
.selectedOption=${viewModeOptions.find((o) => o.key === this.viewMode)}
@selectedOption=${(e: CustomEvent) => {
this.selectedProjectId = e.detail.key;
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>
@@ -119,21 +195,32 @@ export class GitopsViewPipelines extends DeesElement {
</div>
<dees-table
.heading1=${'CI/CD Pipelines'}
.heading2=${'Pipeline runs for the selected project'}
.heading2=${this.isLoading ? 'Loading...' : `${this.dataState.pipelines.length} pipeline runs`}
.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() : '-',
})}
.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: ['inRow', 'contextmenu'],
type: ['contextmenu'],
actionFunc: async ({ item }: any) => { await this.viewJobs(item); },
},
{
@@ -142,22 +229,24 @@ export class GitopsViewPipelines extends DeesElement {
type: ['inRow', 'contextmenu'],
actionFunc: async ({ item }: any) => {
await appstate.dataStatePart.dispatchAction(appstate.retryPipelineAction, {
connectionId: this.selectedConnectionId,
projectId: this.selectedProjectId,
connectionId: item.connectionId || this.selectedConnectionId,
projectId: item.projectId,
pipelineId: item.id,
});
await this.loadPipelines();
},
},
{
name: 'Cancel',
iconName: 'lucide:xCircle',
type: ['inRow', 'contextmenu'],
type: ['contextmenu'],
actionFunc: async ({ item }: any) => {
await appstate.dataStatePart.dispatchAction(appstate.cancelPipelineAction, {
connectionId: this.selectedConnectionId,
projectId: this.selectedProjectId,
connectionId: item.connectionId || this.selectedConnectionId,
projectId: item.projectId,
pipelineId: item.id,
});
await this.loadPipelines();
},
},
]}
@@ -173,6 +262,7 @@ export class GitopsViewPipelines extends DeesElement {
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();
@@ -182,7 +272,39 @@ export class GitopsViewPipelines extends DeesElement {
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();
}
}
@@ -193,18 +315,221 @@ export class GitopsViewPipelines extends DeesElement {
});
}
private async loadPipelines() {
if (!this.selectedConnectionId || !this.selectedProjectId) return;
await appstate.dataStatePart.dispatchAction(appstate.fetchPipelinesAction, {
private async loadGroups() {
if (!this.selectedConnectionId) return;
await appstate.dataStatePart.dispatchAction(appstate.fetchGroupsAction, {
connectionId: this.selectedConnectionId,
projectId: this.selectedProjectId,
});
}
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: this.selectedConnectionId,
projectId: this.selectedProjectId,
connectionId: pipeline.connectionId || this.selectedConnectionId,
projectId: pipeline.projectId,
pipelineId: pipeline.id,
});