157 lines
3.9 KiB
TypeScript
157 lines
3.9 KiB
TypeScript
import * as shared from '../elements/shared/index.js';
|
|
|
|
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
state,
|
|
css,
|
|
cssManager,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as appstate from '../appstate.js';
|
|
|
|
@customElement('cloudly-view-overview')
|
|
export class CloudlyViewOverview extends DeesElement {
|
|
@state()
|
|
private data: appstate.IDataState = {
|
|
secretGroups: [],
|
|
secretBundles: [],
|
|
};
|
|
|
|
constructor() {
|
|
super();
|
|
const subecription = appstate.dataState
|
|
.select((stateArg) => stateArg)
|
|
.subscribe((dataArg) => {
|
|
this.data = dataArg;
|
|
});
|
|
this.rxSubscriptions.push(subecription);
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
shared.viewHostCss,
|
|
css`
|
|
dees-statsgrid {
|
|
margin-top: 24px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render() {
|
|
// Calculate total servers across all clusters
|
|
const totalServers = this.data.clusters?.reduce((sum, cluster) =>
|
|
sum + (cluster.data.servers?.length || 0), 0) || 0;
|
|
|
|
// Create tiles for the stats grid
|
|
const statsTiles = [
|
|
{
|
|
id: 'clusters',
|
|
title: 'Total Clusters',
|
|
value: this.data.clusters?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Network',
|
|
description: 'Active clusters'
|
|
},
|
|
{
|
|
id: 'servers',
|
|
title: 'Total Servers',
|
|
value: totalServers,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Server',
|
|
description: 'Connected servers'
|
|
},
|
|
{
|
|
id: 'services',
|
|
title: 'Services',
|
|
value: this.data.services?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Layers',
|
|
description: 'Deployed services'
|
|
},
|
|
{
|
|
id: 'deployments',
|
|
title: 'Deployments',
|
|
value: this.data.deployments?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Rocket',
|
|
description: 'Active deployments'
|
|
},
|
|
{
|
|
id: 'secretGroups',
|
|
title: 'Secret Groups',
|
|
value: this.data.secretGroups?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:ShieldCheck',
|
|
description: 'Configured secret groups'
|
|
},
|
|
{
|
|
id: 'secretBundles',
|
|
title: 'Secret Bundles',
|
|
value: this.data.secretBundles?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:LockKeyhole',
|
|
description: 'Available secret bundles'
|
|
},
|
|
{
|
|
id: 'images',
|
|
title: 'Images',
|
|
value: this.data.images?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Image',
|
|
description: 'Container images'
|
|
},
|
|
{
|
|
id: 'dns',
|
|
title: 'DNS Zones',
|
|
value: this.data.dns?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Globe',
|
|
description: 'Managed DNS zones'
|
|
},
|
|
{
|
|
id: 'databases',
|
|
title: 'Databases',
|
|
value: this.data.dbs?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Database',
|
|
description: 'Database instances'
|
|
},
|
|
{
|
|
id: 'backups',
|
|
title: 'Backups',
|
|
value: this.data.backups?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Save',
|
|
description: 'Available backups'
|
|
},
|
|
{
|
|
id: 'mails',
|
|
title: 'Mail Domains',
|
|
value: this.data.mails?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Mail',
|
|
description: 'Mail configurations'
|
|
},
|
|
{
|
|
id: 's3',
|
|
title: 'S3 Buckets',
|
|
value: this.data.s3?.length || 0,
|
|
type: 'number' as const,
|
|
iconName: 'lucide:Cloud',
|
|
description: 'Storage buckets'
|
|
}
|
|
];
|
|
|
|
return html`
|
|
<cloudly-sectionheading>Overview</cloudly-sectionheading>
|
|
<dees-statsgrid
|
|
.tiles=${statsTiles}
|
|
.minTileWidth=${250}
|
|
.gap=${16}
|
|
></dees-statsgrid>
|
|
`;
|
|
}
|
|
}
|