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

feat(opsserver): Serve bundled frontend from a dedicated dist_serve directory and update frontend UI/packaging

Browse Source
This commit is contained in:
Jürgen Kunz
2026-02-24 14:36:29 +00:00
parent 29922004ea
commit f78cab7dd8
12 changed files with 48 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ts_web/00_commitinfo_data.ts
View File

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

17
ts_web/elements/gitops-dashboard.ts
View File

@@ -32,16 +32,16 @@ export class GitopsDashboard extends DeesElement {
};
private viewTabs = [
{ name: 'Overview', element: (async () => (await import('./views/overview/index.js')).GitopsViewOverview)() },
{ name: 'Connections', element: (async () => (await import('./views/connections/index.js')).GitopsViewConnections)() },
{ name: 'Projects', element: (async () => (await import('./views/projects/index.js')).GitopsViewProjects)() },
{ name: 'Groups', element: (async () => (await import('./views/groups/index.js')).GitopsViewGroups)() },
{ name: 'Secrets', element: (async () => (await import('./views/secrets/index.js')).GitopsViewSecrets)() },
{ name: 'Pipelines', element: (async () => (await import('./views/pipelines/index.js')).GitopsViewPipelines)() },
{ name: 'Build Log', element: (async () => (await import('./views/buildlog/index.js')).GitopsViewBuildlog)() },
{ name: 'Overview', iconName: 'lucide:layoutDashboard', element: (async () => (await import('./views/overview/index.js')).GitopsViewOverview)() },
{ name: 'Connections', iconName: 'lucide:plug', element: (async () => (await import('./views/connections/index.js')).GitopsViewConnections)() },
{ name: 'Projects', iconName: 'lucide:folderGit2', element: (async () => (await import('./views/projects/index.js')).GitopsViewProjects)() },
{ name: 'Groups', iconName: 'lucide:users', element: (async () => (await import('./views/groups/index.js')).GitopsViewGroups)() },
{ name: 'Secrets', iconName: 'lucide:key', element: (async () => (await import('./views/secrets/index.js')).GitopsViewSecrets)() },
{ name: 'Pipelines', iconName: 'lucide:play', element: (async () => (await import('./views/pipelines/index.js')).GitopsViewPipelines)() },
{ name: 'Build Log', iconName: 'lucide:scrollText', element: (async () => (await import('./views/buildlog/index.js')).GitopsViewBuildlog)() },
];
private resolvedViewTabs: Array<{ name: string; element: any }> = [];
private resolvedViewTabs: Array<{ name: string; iconName: string; element: any }> = [];
constructor() {
super();
@@ -100,6 +100,7 @@ export class GitopsDashboard extends DeesElement {
this.resolvedViewTabs = await Promise.all(
this.viewTabs.map(async (tab) => ({
name: tab.name,
iconName: tab.iconName,
element: await tab.element,
})),
);

8
ts_web/elements/shared/css.ts
View File

@@ -3,11 +3,11 @@ import { css } from '@design.estate/dees-element';
export const viewHostCss = css`
:host {
display: block;
width: 100%;
height: 100%;
padding: 24px;
box-sizing: border-box;
margin: auto;
max-width: 1280px;
padding: 16px 16px;
color: #fff;
box-sizing: border-box;
}
.view-title {
font-size: 24px;

59
ts_web/elements/views/overview/index.ts
View File

@@ -10,6 +10,7 @@ import {
cssManager,
type TemplateResult,
} from '@design.estate/dees-element';
import { type IStatsTile } from '@design.estate/dees-catalog';
@customElement('gitops-view-overview')
export class GitopsViewOverview extends DeesElement {
@@ -45,33 +46,6 @@ export class GitopsViewOverview extends DeesElement {
public static styles = [
cssManager.defaultStyles,
viewHostCss,
css`
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
gap: 16px;
margin-bottom: 24px;
}
.stat-card {
background: #1a1a2e;
border: 1px solid #333;
border-radius: 8px;
padding: 20px;
text-align: center;
}
.stat-value {
font-size: 36px;
font-weight: 700;
color: #00acff;
margin-bottom: 8px;
}
.stat-label {
font-size: 14px;
color: #999;
text-transform: uppercase;
letter-spacing: 1px;
}
`,
];
public render(): TemplateResult {
@@ -81,31 +55,18 @@ export class GitopsViewOverview extends DeesElement {
const pipelineCount = this.dataState.pipelines.length;
const failedPipelines = this.dataState.pipelines.filter((p) => p.status === 'failed').length;
const tiles: IStatsTile[] = [
{ id: 'connections', title: 'Connections', value: connCount, type: 'number', icon: 'lucide:plug', color: '#00acff' },
{ id: 'projects', title: 'Projects', value: projCount, type: 'number', icon: 'lucide:folderGit2', color: '#00acff' },
{ id: 'groups', title: 'Groups', value: groupCount, type: 'number', icon: 'lucide:users', color: '#00acff' },
{ id: 'pipelines', title: 'Pipelines', value: pipelineCount, type: 'number', icon: 'lucide:play', color: '#00acff' },
{ id: 'failed', title: 'Failed Pipelines', value: failedPipelines, type: 'number', icon: 'lucide:triangleAlert', color: failedPipelines > 0 ? '#ff4444' : '#00ff88' },
];
return html`
<div class="view-title">Overview</div>
<div class="view-description">GitOps dashboard - manage your Gitea and GitLab instances</div>
<div class="stats-grid">
<div class="stat-card">
<div class="stat-value">${connCount}</div>
<div class="stat-label">Connections</div>
</div>
<div class="stat-card">
<div class="stat-value">${projCount}</div>
<div class="stat-label">Projects</div>
</div>
<div class="stat-card">
<div class="stat-value">${groupCount}</div>
<div class="stat-label">Groups</div>
</div>
<div class="stat-card">
<div class="stat-value">${pipelineCount}</div>
<div class="stat-label">Pipelines</div>
</div>
<div class="stat-card">
<div class="stat-value" style="color: ${failedPipelines > 0 ? '#ff4444' : '#00ff88'}">${failedPipelines}</div>
<div class="stat-label">Failed Pipelines</div>
</div>
</div>
<dees-statsgrid .tiles=${tiles}></dees-statsgrid>
`;
}
}