141 lines
4.3 KiB
TypeScript
141 lines
4.3 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-clusters')
|
|
export class CloudlyViewClusters 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: 16px 16px;
|
|
}
|
|
`,
|
|
];
|
|
|
|
public render() {
|
|
return html`
|
|
<cloudly-sectionheading>Clusters</cloudly-sectionheading>
|
|
<dees-table
|
|
.heading1=${'Clusters'}
|
|
.heading2=${'decoded in client'}
|
|
.data=${this.data.clusters}
|
|
.displayFunction=${(itemArg: plugins.interfaces.data.ICluster) => {
|
|
console.log(itemArg);
|
|
return {
|
|
id: itemArg.id,
|
|
serverAmount: itemArg.data.servers.length,
|
|
};
|
|
}}
|
|
.dataActions=${[
|
|
{
|
|
name: 'add cluster',
|
|
iconName: 'plus',
|
|
type: ['header', 'footer'],
|
|
actionFunc: async (dataActionArg) => {
|
|
const modal = await plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: 'Add Cluster',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-text
|
|
.key=${'clusterName'}
|
|
.label=${'cluster name'}
|
|
.description=${'a descriptive name for the cluster'}
|
|
.value=${''}
|
|
></dees-input-text>
|
|
</dees-form>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'create',
|
|
action: async (modalArg) => {
|
|
const data: {
|
|
clusterName: string;
|
|
} = (await modalArg.shadowRoot
|
|
.querySelector('dees-form')
|
|
.collectFormData()) as any;
|
|
await appstate.dataState.dispatchAction(appstate.addClusterAction, data);
|
|
await modalArg.destroy();
|
|
},
|
|
},
|
|
{
|
|
name: 'cancel',
|
|
action: async (modalArg) => {
|
|
modalArg.destroy();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
{
|
|
name: 'delete',
|
|
iconName: 'trash',
|
|
type: ['contextmenu', 'inRow'],
|
|
actionFunc: async (actionDataArg) => {
|
|
plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: `Delete ConfigBundle ${actionDataArg.item.id}`,
|
|
content: html`
|
|
<div style="text-align:center">
|
|
Do you really want to delete the ConfigBundle?
|
|
</div>
|
|
<div
|
|
style="font-size: 0.8em; color: red; text-align:center; padding: 16px; margin-top: 24px; border: 1px solid #444; font-family: Intel One Mono; font-size: 16px;"
|
|
>
|
|
${actionDataArg.item.id}
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'cancel',
|
|
action: async (modalArg) => {
|
|
await modalArg.destroy();
|
|
},
|
|
},
|
|
{
|
|
name: 'delete',
|
|
action: async (modalArg) => {
|
|
appstate.dataState.dispatchAction(appstate.deleteSecretBundleAction, {
|
|
configBundleId: actionDataArg.item.id,
|
|
});
|
|
await modalArg.destroy();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
},
|
|
},
|
|
] as plugins.deesCatalog.ITableAction[]}
|
|
></dees-table>
|
|
`;
|
|
}
|
|
}
|