151 lines
4.0 KiB
TypeScript
151 lines
4.0 KiB
TypeScript
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
css,
|
|
cssManager,
|
|
type TemplateResult,
|
|
} from '@design.estate/dees-element';
|
|
import type { DeesAppui } from '@design.estate/dees-catalog';
|
|
import './index.js';
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'sz-demo-view-dashboard': SzDemoViewDashboard;
|
|
}
|
|
}
|
|
|
|
@customElement('sz-demo-view-dashboard')
|
|
export class SzDemoViewDashboard extends DeesElement {
|
|
private appui: DeesAppui | null = null;
|
|
|
|
async onActivate(context: { appui: DeesAppui; viewId: string }) {
|
|
this.appui = context.appui;
|
|
|
|
// Dashboard secondary menu with quick actions
|
|
this.appui.setSecondaryMenu({
|
|
heading: 'Dashboard',
|
|
groups: [
|
|
{
|
|
name: 'Quick Actions',
|
|
items: [
|
|
{ type: 'action', key: 'Deploy Service', iconName: 'lucide:Rocket', action: () => { console.log('Deploy service'); } },
|
|
{ type: 'action', key: 'Add Domain', iconName: 'lucide:Globe', action: () => { console.log('Add domain'); } },
|
|
{ type: 'action', key: 'Create Token', iconName: 'lucide:Key', action: () => { console.log('Create token'); } },
|
|
],
|
|
},
|
|
{
|
|
name: 'System',
|
|
items: [
|
|
{ type: 'action', key: 'Refresh Stats', iconName: 'lucide:RefreshCw', action: () => { console.log('Refresh'); } },
|
|
{ type: 'action', key: 'View Logs', iconName: 'lucide:Terminal', action: () => { console.log('View logs'); } },
|
|
],
|
|
},
|
|
],
|
|
});
|
|
}
|
|
|
|
onDeactivate() {
|
|
// Cleanup if needed
|
|
}
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
css`
|
|
:host {
|
|
display: block;
|
|
padding: 24px;
|
|
height: 100%;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.page-header {
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.page-title {
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
|
margin: 0 0 8px 0;
|
|
}
|
|
|
|
.page-subtitle {
|
|
font-size: 14px;
|
|
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
|
margin: 0;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
<div class="page-header">
|
|
<h1 class="page-title">Dashboard</h1>
|
|
<p class="page-subtitle">Overview of your onebox infrastructure</p>
|
|
</div>
|
|
|
|
<sz-dashboard-view
|
|
.clusterStats=${{
|
|
totalServices: 12,
|
|
running: 9,
|
|
stopped: 3,
|
|
dockerStatus: 'running',
|
|
}}
|
|
.resourceUsage=${{
|
|
cpu: 45,
|
|
memoryUsed: '6.2 GB',
|
|
memoryTotal: '16 GB',
|
|
networkIn: '2.5 MB/s',
|
|
networkOut: '1.2 MB/s',
|
|
topConsumers: [
|
|
{ name: 'mongodb', memory: '1.2 GB' },
|
|
{ name: 'clickhouse', memory: '980 MB' },
|
|
{ name: 'nginx-proxy', memory: '256 MB' },
|
|
],
|
|
}}
|
|
.platformServices=${[
|
|
{ name: 'MongoDB', status: 'running', icon: 'database' },
|
|
{ name: 'S3 Storage', status: 'running', icon: 'storage' },
|
|
{ name: 'ClickHouse', status: 'stopped', icon: 'analytics' },
|
|
{ name: 'Redis Cache', status: 'running', icon: 'cache' },
|
|
]}
|
|
.traffic=${{
|
|
requests: 15420,
|
|
errors: 23,
|
|
errorPercent: 0.15,
|
|
avgResponse: 145,
|
|
reqPerMin: 856,
|
|
status2xx: 14850,
|
|
status3xx: 320,
|
|
status4xx: 227,
|
|
status5xx: 23,
|
|
}}
|
|
.proxy=${{
|
|
httpPort: '80',
|
|
httpsPort: '443',
|
|
httpActive: true,
|
|
httpsActive: true,
|
|
routeCount: '24',
|
|
}}
|
|
.certificates=${{
|
|
valid: 18,
|
|
expiring: 2,
|
|
expired: 0,
|
|
}}
|
|
.dns=${{
|
|
records: 45,
|
|
zones: 8,
|
|
pendingChanges: 0,
|
|
}}
|
|
.ssl=${{
|
|
activeCerts: 20,
|
|
autoRenew: true,
|
|
provider: "Let's Encrypt",
|
|
}}
|
|
@quick-action=${(e: CustomEvent) => console.log('Quick action:', e.detail)}
|
|
></sz-dashboard-view>
|
|
`;
|
|
}
|
|
}
|