72 lines
1.9 KiB
TypeScript
72 lines
1.9 KiB
TypeScript
|
import * as plugins from '../plugins.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,
|
||
|
|
css`
|
||
|
|
:host {
|
||
|
|
display: block;
|
||
|
|
margin: auto;
|
||
|
|
max-width: 1280px;
|
||
|
|
padding: 8px 16px;
|
||
|
|
}
|
||
|
|
.clusterGrid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: ${cssManager.cssGridColumns(3, 8)};
|
||
|
|
grid-gap: 16px;
|
||
|
|
margin-bottom: 40px;
|
||
|
|
}
|
||
|
|
`,
|
||
|
|
];
|
||
|
|
|
||
|
|
public render() {
|
||
|
|
return html`
|
||
|
|
<cloudly-sectionheading>Overview</cloudly-sectionheading>
|
||
|
|
${this.data.clusters.length === 0 ? html`
|
||
|
|
You need to create at least one cluster to see an overview.
|
||
|
|
`: html``}
|
||
|
|
${this.data.clusters.map(
|
||
|
|
(clusterArg) => html`
|
||
|
|
<dees-label .label=${'cluster: ' + clusterArg.data.name}></dees-label>
|
||
|
|
<div class="clusterGrid">
|
||
|
|
<dees-chart-area .label=${'System Usage'}></dees-chart-area>
|
||
|
|
<dees-chart-area .label=${'Internet Traffic'}></dees-chart-area>
|
||
|
|
<dees-chart-area .label=${'Requests'}></dees-chart-area>
|
||
|
|
<dees-chart-area .label=${'WebSocket Connections'}></dees-chart-area>
|
||
|
|
<dees-chart-log class="services" .label=${'Deployed Services'}></dees-chart-log>
|
||
|
|
<dees-chart-log class="eventLog" .label=${'Event Log'}></dees-chart-log>
|
||
|
|
</div>
|
||
|
|
`
|
||
|
|
)}
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
}
|