feat: Add settings view for cloud provider configurations

- 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.

ts_web/elements/views/clusters/index.ts

@@ -0,0 +1,111 @@
+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;
+  }
+}
+