jkunz
f40ef6b7c0
Align Cloudly with the current typedserver, smartconfig, smartstate, and Docker tooling releases so builds and Docker output stay compatible with the upgraded stack.
111 lines
4.3 KiB
TypeScript
111 lines
4.3 KiB
TypeScript
import * as plugins from '../../../plugins.js';
|
|
import * as shared from '../../shared/index.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 accessor data: appstate.IDataState = {} as any;
|
|
|
|
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``,
|
|
];
|
|
|
|
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) => {
|
|
return {
|
|
id: itemArg.id,
|
|
serverAmount: itemArg.data.nodes.length,
|
|
};
|
|
}}
|
|
.dataActions=${[
|
|
{
|
|
name: 'add cluster',
|
|
iconName: 'plus',
|
|
type: ['header', 'footer'],
|
|
actionFunc: async () => {
|
|
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-input-dropdown .key=${'setupMode'} .label=${'Setup Mode'} .description=${'How the cluster infrastructure should be managed'}
|
|
.options=${[
|
|
{option: 'manual', key: 'manual', description: 'Manual Setup - Add your own servers manually'},
|
|
{option: 'hetzner', key: 'hetzner', description: 'Hetzner Cloud - Auto-provision servers on Hetzner'},
|
|
{option: 'aws', key: 'aws', description: 'AWS - Auto-provision on Amazon Web Services (coming soon)', disabled: true},
|
|
{option: 'digitalocean', key: 'digitalocean', description: 'DigitalOcean - Auto-provision on DigitalOcean (coming soon)', disabled: true}
|
|
]}
|
|
.selectedOption=${'manual'}>
|
|
</dees-input-dropdown>
|
|
</dees-form>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'create', action: async (modalArg: any) => {
|
|
const data = (await modalArg.shadowRoot.querySelector('dees-form').collectFormData()) as any;
|
|
await appstate.dataState.dispatchAction(appstate.addClusterAction, data);
|
|
await modalArg.destroy();
|
|
}},
|
|
{ name: 'cancel', action: async (modalArg: any) => modalArg.destroy() },
|
|
],
|
|
});
|
|
},
|
|
},
|
|
{
|
|
name: 'delete',
|
|
iconName: 'trash',
|
|
type: ['contextmenu', 'inRow'],
|
|
actionFunc: async (actionDataArg: any) => {
|
|
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: any) => { await modalArg.destroy(); } },
|
|
{ name: 'delete', action: async (modalArg: any) => { appstate.dataState.dispatchAction(appstate.deleteSecretBundleAction, { configBundleId: actionDataArg.item.id, }); await modalArg.destroy(); } },
|
|
],
|
|
});
|
|
},
|
|
},
|
|
] as plugins.deesCatalog.ITableAction[]}
|
|
></dees-table>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'cloudly-view-clusters': CloudlyViewClusters;
|
|
}
|
|
}
|