112 lines
3.1 KiB
TypeScript
112 lines
3.1 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';
|
|
|
|
@customElement('gitops-view-overview')
|
|
export class GitopsViewOverview extends DeesElement {
|
|
@state()
|
|
accessor connectionsState: appstate.IConnectionsState = {
|
|
connections: [],
|
|
activeConnectionId: null,
|
|
};
|
|
|
|
@state()
|
|
accessor dataState: appstate.IDataState = {
|
|
projects: [],
|
|
groups: [],
|
|
secrets: [],
|
|
pipelines: [],
|
|
pipelineJobs: [],
|
|
currentJobLog: '',
|
|
};
|
|
|
|
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`
|
|
.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 {
|
|
const connCount = this.connectionsState.connections.length;
|
|
const projCount = this.dataState.projects.length;
|
|
const groupCount = this.dataState.groups.length;
|
|
const pipelineCount = this.dataState.pipelines.length;
|
|
const failedPipelines = this.dataState.pipelines.filter((p) => p.status === 'failed').length;
|
|
|
|
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>
|
|
`;
|
|
}
|
|
}
|