104 lines
2.5 KiB
TypeScript
104 lines
2.5 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import './sz-resource-usage-card.js';
|
|
import './sz-platform-services-card.js';
|
|
|
|
import type { IResourceUsage } from './sz-resource-usage-card.js';
|
|
import type { IPlatformService } from './sz-platform-services-card.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sz-status-grid-services': SzStatusGridServices;
|
|
}
|
|
}
|
|
|
|
@customElement('sz-status-grid-services')
|
|
export class SzStatusGridServices extends DeesElement {
|
|
public static demo = () => html`
|
|
<div style="padding: 24px; max-width: 1200px;">
|
|
<sz-status-grid-services
|
|
.resourceUsage=${{
|
|
cpu: 45,
|
|
memoryUsed: '4.96 GB',
|
|
memoryTotal: '8 GB',
|
|
networkIn: '1.2 MB/s',
|
|
networkOut: '0.8 MB/s',
|
|
topConsumers: [
|
|
{ name: 'api-service', memory: '512 MB' },
|
|
{ name: 'web-frontend', memory: '256 MB' },
|
|
{ name: 'worker', memory: '128 MB' },
|
|
],
|
|
}}
|
|
.platformServices=${[
|
|
{ name: 'MongoDB', status: '1 DB', running: true },
|
|
{ name: 'S3 Storage', status: '1 bucket', running: true },
|
|
{ name: 'ClickHouse', status: 'Stopped', running: false },
|
|
{ name: 'Redis Cache', status: 'Running', running: true },
|
|
]}
|
|
></sz-status-grid-services>
|
|
</div>
|
|
`;
|
|
|
|
public static demoGroups = ['Dashboard Grids'];
|
|
|
|
@property({ type: Object })
|
|
public accessor resourceUsage: IResourceUsage = {
|
|
cpu: 0,
|
|
memoryUsed: '0 GB',
|
|
memoryTotal: '0 GB',
|
|
networkIn: '0 MB/s',
|
|
networkOut: '0 MB/s',
|
|
topConsumers: [],
|
|
};
|
|
|
|
@property({ type: Array })
|
|
public accessor platformServices: IPlatformService[] = [];
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
}
|
|
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 16px;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.grid > * {
|
|
height: 100%;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.grid {
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="grid">
|
|
<sz-resource-usage-card
|
|
.usage=${this.resourceUsage}
|
|
></sz-resource-usage-card>
|
|
<sz-platform-services-card
|
|
.services=${this.platformServices}
|
|
></sz-platform-services-card>
|
|
</div>
|
|
`;
|
|
}
|
|
}
|