Juergen Kunz
bb313fd9dc
- Implemented CloudlyViewSettings component for managing cloud provider settings including Hetzner, Cloudflare, AWS, DigitalOcean, Azure, and Google Cloud. - Added functionality to load, save, and test connections for each provider. - Enhanced UI with loading states and success/error notifications. feat: Create tasks view with execution history - Developed CloudlyViewTasks component to display and manage tasks and their executions. - Integrated auto-refresh functionality for task executions. - Added filtering and searching capabilities for tasks. feat: Implement execution details and task panel components - Created CloudlyExecutionDetails component to show detailed information about task executions including logs and metrics. - Developed CloudlyTaskPanel component to display individual tasks with execution status and actions to run or cancel tasks. feat: Utility functions for formatting and categorization - Added utility functions for formatting dates, durations, and cron expressions. - Implemented functions to retrieve category icons and hues for task categorization.
112 lines
4.3 KiB
TypeScript
112 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 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.servers.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;
|
|
}
|
|
}
|
|
|