feat(opsserver): Serve bundled frontend from a dedicated dist_serve directory and update frontend UI/packaging
This commit is contained in:
@@ -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>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user