108 lines
2.3 KiB
TypeScript
108 lines
2.3 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import './sz-stat-card.js';
|
|
|
|
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;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
gap: 16px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.grid > * {
|
|
height: 100%;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.grid {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="grid">
|
|
<sz-stat-card
|
|
label="Total Services"
|
|
value="${this.stats.totalServices}"
|
|
icon="server"
|
|
></sz-stat-card>
|
|
<sz-stat-card
|
|
label="Running"
|
|
value="${this.stats.running}"
|
|
icon="check"
|
|
variant="success"
|
|
></sz-stat-card>
|
|
<sz-stat-card
|
|
label="Stopped"
|
|
value="${this.stats.stopped}"
|
|
icon="stop"
|
|
variant="${this.stats.stopped > 0 ? 'warning' : 'default'}"
|
|
></sz-stat-card>
|
|
<sz-stat-card
|
|
label="Docker"
|
|
value="${this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped'}"
|
|
icon="container"
|
|
variant="${this.stats.dockerStatus === 'running' ? 'success' : 'error'}"
|
|
valueBadge
|
|
></sz-stat-card>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|