update
This commit is contained in:
217
ts_web/elements/sz-dashboard-view.ts
Normal file
217
ts_web/elements/sz-dashboard-view.ts
Normal file
@@ -0,0 +1,217 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import './sz-status-grid-cluster.js';
|
||||
import './sz-status-grid-services.js';
|
||||
import './sz-status-grid-network.js';
|
||||
import './sz-status-grid-infra.js';
|
||||
|
||||
import type { IClusterStats } from './sz-status-grid-cluster.js';
|
||||
import type { IResourceUsage } from './sz-resource-usage-card.js';
|
||||
import type { IPlatformService } from './sz-platform-services-card.js';
|
||||
import type { ITrafficData } from './sz-traffic-card.js';
|
||||
import type { IProxyStatus, ICertificateStatus } from './sz-status-grid-network.js';
|
||||
import type { IQuickAction } from './sz-quick-actions-card.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-dashboard-view': SzDashboardView;
|
||||
}
|
||||
}
|
||||
|
||||
export interface IDashboardData {
|
||||
cluster: IClusterStats;
|
||||
resourceUsage: IResourceUsage;
|
||||
platformServices: IPlatformService[];
|
||||
traffic: ITrafficData;
|
||||
proxy: IProxyStatus;
|
||||
certificates: ICertificateStatus;
|
||||
dnsConfigured: boolean;
|
||||
acmeConfigured: boolean;
|
||||
quickActions: IQuickAction[];
|
||||
}
|
||||
|
||||
@customElement('sz-dashboard-view')
|
||||
export class SzDashboardView extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<div style="padding: 24px; max-width: 1400px;">
|
||||
<sz-dashboard-view
|
||||
.data=${{
|
||||
cluster: {
|
||||
totalServices: 7,
|
||||
running: 7,
|
||||
stopped: 0,
|
||||
dockerStatus: 'running',
|
||||
},
|
||||
resourceUsage: {
|
||||
cpu: 0.5,
|
||||
memoryUsed: '191 MB',
|
||||
memoryTotal: '429.2 GB',
|
||||
networkIn: '38.9 KB/s',
|
||||
networkOut: '1.7 KB/s',
|
||||
topConsumers: [
|
||||
{ name: 'test-nginx', memory: '32.1 MB' },
|
||||
{ name: 'test-v2', memory: '31.7 MB' },
|
||||
],
|
||||
},
|
||||
platformServices: [
|
||||
{ name: 'MongoDB', status: '1 DB', running: true },
|
||||
{ name: 'S3 Storage (MinIO)', status: '1 bucket', running: true },
|
||||
{ name: 'Caddy Reverse Proxy', status: 'Running', running: true },
|
||||
{ name: 'ClickHouse', status: '1 DB', running: true },
|
||||
],
|
||||
traffic: {
|
||||
requests: 1250,
|
||||
errors: 15,
|
||||
errorPercent: 1.2,
|
||||
avgResponse: 145,
|
||||
reqPerMin: 21,
|
||||
status2xx: 85,
|
||||
status3xx: 5,
|
||||
status4xx: 8,
|
||||
status5xx: 2,
|
||||
},
|
||||
proxy: {
|
||||
httpPort: '80',
|
||||
httpsPort: '443',
|
||||
httpActive: true,
|
||||
httpsActive: true,
|
||||
routeCount: '12',
|
||||
},
|
||||
certificates: {
|
||||
valid: 8,
|
||||
expiring: 2,
|
||||
expired: 0,
|
||||
},
|
||||
dnsConfigured: true,
|
||||
acmeConfigured: true,
|
||||
quickActions: [
|
||||
{ label: 'Deploy Service', icon: 'plus', primary: true },
|
||||
{ label: 'View All Services' },
|
||||
{ label: 'Platform Services' },
|
||||
{ label: 'Manage Domains' },
|
||||
],
|
||||
}}
|
||||
></sz-dashboard-view>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@property({ type: Object })
|
||||
public accessor data: IDashboardData = {
|
||||
cluster: {
|
||||
totalServices: 0,
|
||||
running: 0,
|
||||
stopped: 0,
|
||||
dockerStatus: 'stopped',
|
||||
},
|
||||
resourceUsage: {
|
||||
cpu: 0,
|
||||
memoryUsed: '0 MB',
|
||||
memoryTotal: '0 GB',
|
||||
networkIn: '0 KB/s',
|
||||
networkOut: '0 KB/s',
|
||||
topConsumers: [],
|
||||
},
|
||||
platformServices: [],
|
||||
traffic: {
|
||||
requests: 0,
|
||||
errors: 0,
|
||||
errorPercent: 0,
|
||||
avgResponse: 0,
|
||||
reqPerMin: 0,
|
||||
status2xx: 0,
|
||||
status3xx: 0,
|
||||
status4xx: 0,
|
||||
status5xx: 0,
|
||||
},
|
||||
proxy: {
|
||||
httpPort: '80',
|
||||
httpsPort: '443',
|
||||
httpActive: false,
|
||||
httpsActive: false,
|
||||
routeCount: '0',
|
||||
},
|
||||
certificates: {
|
||||
valid: 0,
|
||||
expiring: 0,
|
||||
expired: 0,
|
||||
},
|
||||
dnsConfigured: false,
|
||||
acmeConfigured: false,
|
||||
quickActions: [],
|
||||
};
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dashboard {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="dashboard">
|
||||
<section class="section">
|
||||
<h2 class="section-title">Cluster Overview</h2>
|
||||
<sz-status-grid-cluster
|
||||
.stats=${this.data.cluster}
|
||||
></sz-status-grid-cluster>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Services & Resources</h2>
|
||||
<sz-status-grid-services
|
||||
.resourceUsage=${this.data.resourceUsage}
|
||||
.platformServices=${this.data.platformServices}
|
||||
></sz-status-grid-services>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Network & Traffic</h2>
|
||||
<sz-status-grid-network
|
||||
.traffic=${this.data.traffic}
|
||||
.proxy=${this.data.proxy}
|
||||
.certificates=${this.data.certificates}
|
||||
></sz-status-grid-network>
|
||||
</section>
|
||||
|
||||
<section class="section">
|
||||
<h2 class="section-title">Infrastructure</h2>
|
||||
<sz-status-grid-infra
|
||||
?dnsConfigured=${this.data.dnsConfigured}
|
||||
?acmeConfigured=${this.data.acmeConfigured}
|
||||
.actions=${this.data.quickActions}
|
||||
@action-click=${(e: CustomEvent) => this.dispatchEvent(new CustomEvent('action-click', { detail: e.detail, bubbles: true, composed: true }))}
|
||||
></sz-status-grid-infra>
|
||||
</section>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user