104 lines
2.2 KiB
TypeScript
104 lines
2.2 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
import type { IStatsTile } from '@design.estate/dees-catalog';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sz-status-grid-cluster': SzStatusGridCluster;
|
|
}
|
|
}
|
|
|
|
export interface IClusterStats {
|
|
totalServices: number;
|
|
running: number;
|
|
stopped: number;
|
|
dockerStatus: 'running' | 'stopped';
|
|
}
|
|
|
|
@customElement('sz-status-grid-cluster')
|
|
export class SzStatusGridCluster extends DeesElement {
|
|
public static demo = () => html`
|
|
<div style="padding: 24px; max-width: 900px;">
|
|
<sz-status-grid-cluster
|
|
.stats=${{
|
|
totalServices: 7,
|
|
running: 7,
|
|
stopped: 0,
|
|
dockerStatus: 'running',
|
|
}}
|
|
></sz-status-grid-cluster>
|
|
</div>
|
|
`;
|
|
|
|
public static demoGroups = ['Dashboard Grids'];
|
|
|
|
@property({ type: Object })
|
|
public accessor stats: IClusterStats = {
|
|
totalServices: 0,
|
|
running: 0,
|
|
stopped: 0,
|
|
dockerStatus: 'stopped',
|
|
};
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
`,
|
|
];
|
|
|
|
private get tiles(): IStatsTile[] {
|
|
return [
|
|
{
|
|
id: 'total',
|
|
title: 'Total Services',
|
|
value: this.stats.totalServices,
|
|
type: 'number',
|
|
icon: 'lucide:server',
|
|
},
|
|
{
|
|
id: 'running',
|
|
title: 'Running',
|
|
value: this.stats.running,
|
|
type: 'number',
|
|
icon: 'lucide:check',
|
|
color: '#22c55e',
|
|
},
|
|
{
|
|
id: 'stopped',
|
|
title: 'Stopped',
|
|
value: this.stats.stopped,
|
|
type: 'number',
|
|
icon: 'lucide:circleStop',
|
|
color: this.stats.stopped > 0 ? '#f59e0b' : undefined,
|
|
},
|
|
{
|
|
id: 'docker',
|
|
title: 'Docker',
|
|
value: this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped',
|
|
type: 'text',
|
|
icon: 'lucide:container',
|
|
color: this.stats.dockerStatus === 'running' ? '#22c55e' : '#ef4444',
|
|
},
|
|
];
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<dees-statsgrid
|
|
.tiles=${this.tiles}
|
|
.minTileWidth=${200}
|
|
></dees-statsgrid>
|
|
`;
|
|
}
|
|
}
|