4.12.0

changelog.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## 2025-01-02 - 4.12.0 - feat(cli)
+Add CLI support and external registries view
+
+- Adds CLI client functionality
+- Introduces a new view for External Registries in the dashboard
+
+## 2024-12-30 - 4.11.0 - feat(external-registry)
+Introduce external registry management
+
+- Added ExternalRegistryManager to handle external registry operations.
+- Implemented ability to create, retrieve, and delete external registries.
+- Enhanced Cloudly class to include ExternalRegistryManager.
+
+## 2024-12-29 - 4.10.0 - feat(apiclient)
+Added support for managing external registries in the API client.
+
+- Introduced methods to get a registry by ID, get all registries, and create a new registry in the externalRegistry object.
+- Updated external registry request interfaces to match new API client capabilities.
+
+## 2024-12-29 - 4.9.0 - feat(apiclient)
+Add external registry management capabilities to Cloudly API client.
+
+- Introduce ExternalRegistry class with methods for getting, creating, and updating external registries.
+- Expand requests module to handle external registry management, including creation and deletion.
+
+## 2024-12-28 - 4.8.1 - fix(interfaces)
+Fix image location schema in IImage interface
+
+- Refactored the 'external' object within IImage data to a 'location' object.
+- Added 'internal' boolean to 'location' to specify internal/external status.
+
+## 2024-12-28 - 4.8.0 - feat(manager.registry)
+Add external registry management
+
+- Introduced ExternalRegistry class for handling external registry configurations.
+- Updated IExternalRegistry interface to include registry details.
+- Enhanced IImage interface to support linking with external registries.
+
 ## 2024-12-28 - 4.7.1 - fix(secretmanagement)
 Refactor secret bundle actions and improve authorization handling
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@serve.zone/cloudly",
-  "version": "4.7.1",
+  "version": "4.12.0",
   "private": false,
   "description": "A comprehensive tool for managing containerized applications across multiple cloud providers using Docker Swarmkit, featuring web, CLI, and API interfaces.",
   "type": "module",
@@ -25,22 +25,22 @@
     "@git.zone/tsbuild": "^2.2.0",
     "@git.zone/tsbundle": "^2.1.0",
     "@git.zone/tsdoc": "^1.4.2",
-    "@git.zone/tspublish": "^1.7.7",
+    "@git.zone/tspublish": "^1.9.0",
     "@git.zone/tstest": "^1.0.90",
     "@git.zone/tswatch": "^2.0.37",
-    "@push.rocks/tapbundle": "^5.5.3",
+    "@push.rocks/tapbundle": "^5.5.4",
-    "@types/node": "^22.10.2"
+    "@types/node": "^22.10.3"
   },
   "dependencies": {
     "@api.global/typedrequest": "3.1.10",
     "@api.global/typedrequest-interfaces": "^3.0.19",
-    "@api.global/typedserver": "^3.0.51",
+    "@api.global/typedserver": "^3.0.53",
     "@api.global/typedsocket": "^3.0.1",
     "@apiclient.xyz/cloudflare": "^6.0.1",
-    "@apiclient.xyz/docker": "^1.2.7",
+    "@apiclient.xyz/docker": "^1.3.0",
     "@apiclient.xyz/hetznercloud": "^1.2.0",
     "@apiclient.xyz/slack": "^3.0.9",
-    "@design.estate/dees-catalog": "^1.3.2",
+    "@design.estate/dees-catalog": "^1.3.3",
     "@design.estate/dees-domtools": "^2.0.64",
     "@design.estate/dees-element": "^2.0.39",
     "@git.zone/tsrun": "^1.3.3",
@@ -55,7 +55,7 @@
     "@push.rocks/smartdata": "^5.2.10",
     "@push.rocks/smartdelay": "^3.0.5",
     "@push.rocks/smartexit": "^1.0.23",
-    "@push.rocks/smartexpect": "^1.2.1",
+    "@push.rocks/smartexpect": "^1.4.0",
     "@push.rocks/smartfile": "^11.0.23",
     "@push.rocks/smartguard": "^3.1.0",
     "@push.rocks/smartjson": "^5.0.19",

ts/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/cloudly',
-  version: '4.7.1',
+  version: '4.12.0',
   description: 'A comprehensive tool for managing containerized applications across multiple cloud providers using Docker Swarmkit, featuring web, CLI, and API interfaces.'
 }

ts/classes.cloudly.ts

@@ -20,6 +20,7 @@ import { CloudlyTaskmanager } from './manager.task/taskmanager.js';
 import { CloudlySecretManager } from './manager.secret/classes.secretmanager.js';
 import { CloudlyServerManager } from './manager.server/classes.servermanager.js';
 import { ExternalApiManager } from './manager.status/statusmanager.js';
+import { ExternalRegistryManager } from './manager.externalregistry/index.js';
 import { ImageManager } from './manager.image/classes.imagemanager.js';
 import { logger } from './logger.js';
 import { CloudlyAuthManager } from './manager.auth/classes.authmanager.js';
@@ -54,6 +55,7 @@ export class Cloudly {
   public clusterManager: ClusterManager;
   public coreflowManager: CloudlyCoreflowManager;
   public externalApiManager: ExternalApiManager;
+  public externalRegistryManager: ExternalRegistryManager;
   public imageManager: ImageManager;
   public taskManager: CloudlyTaskmanager;
   public serverManager: CloudlyServerManager;
@@ -80,6 +82,7 @@ export class Cloudly {
     this.clusterManager = new ClusterManager(this);
     this.coreflowManager = new CloudlyCoreflowManager(this);
     this.externalApiManager = new ExternalApiManager(this);
+    this.externalRegistryManager = new ExternalRegistryManager(this);
     this.imageManager = new ImageManager(this);
     this.taskManager = new CloudlyTaskmanager(this);
     this.secretManager = new CloudlySecretManager(this);

ts/manager.cluster/classes.clustermanager.ts

@@ -44,7 +44,7 @@ export class ClusterManager {
     );
 
     this.typedrouter.addTypedHandler<plugins.servezoneInterfaces.requests.cluster.IReq_Any_Cloudly_GetClusters>(
-      new plugins.typedrequest.TypedHandler('getAllClusters', async (dataArg) => {
+      new plugins.typedrequest.TypedHandler('getClusters', async (dataArg) => {
         // TODO: do authentication here
         const clusters = await this.getAllClusters();
         return {
@@ -57,11 +57,11 @@ export class ClusterManager {
 
     // delete cluster
     this.typedrouter.addTypedHandler<plugins.servezoneInterfaces.requests.cluster.IReq_Any_Cloudly_DeleteClusterById>(
-      new plugins.typedrequest.TypedHandler('deleteCluster', async (reqDataArg, toolsArg) => {
+      new plugins.typedrequest.TypedHandler('deleteClusterById', async (reqDataArg, toolsArg) => {
         await toolsArg.passGuards([this.cloudlyRef.authManager.adminIdentityGuard], reqDataArg);
         await this.deleteCluster(reqDataArg.clusterId);
         return {
-          success: true,
+          ok: true,
         };
       }),
     );

ts/manager.externalregistry/classes.externalregistry.ts

@@ -0,0 +1,40 @@
+import * as plugins from '../plugins.js';
+import * as paths from '../paths.js';
+import type { Cloudly } from 'ts/classes.cloudly.js';
+import type { ExternalRegistryManager } from './classes.externalregistrymanager.js';
+
+export class ExternalRegistry extends plugins.smartdata.SmartDataDbDoc<ExternalRegistry, plugins.servezoneInterfaces.data.IExternalRegistry, ExternalRegistryManager> {
+  // STATIC
+  public static async getRegistryById(registryIdArg: string) {
+    const externalRegistry = await this.getInstance({
+      id: registryIdArg,
+    });
+    return externalRegistry;
+  }
+
+  public static async getRegistries() {
+    const externalRegistries = await this.getInstances({});
+    return externalRegistries;
+  }
+
+  public static async createExternalRegistry(registryDataArg: Partial<plugins.servezoneInterfaces.data.IExternalRegistry['data']>) {
+    const externalRegistry = new ExternalRegistry();
+    externalRegistry.id = await ExternalRegistry.getNewId();
+    Object.assign(externalRegistry, registryDataArg);
+    await externalRegistry.save();
+    return externalRegistry;
+  }
+
+  // INSTANCE
+
+  @plugins.smartdata.svDb()
+  public id: string;
+
+  @plugins.smartdata.svDb()
+  public data: plugins.servezoneInterfaces.data.IExternalRegistry['data'];
+
+  constructor() {
+    super();
+  }
+
+}

ts/manager.externalregistry/classes.externalregistrymanager.ts

@@ -0,0 +1,51 @@
+import * as plugins from '../plugins.js';
+import { Cloudly } from '../classes.cloudly.js';
+import { ExternalRegistry } from './classes.externalregistry.js';
+
+export class ExternalRegistryManager {
+  public cloudlyRef: Cloudly;
+  public typedrouter = new plugins.typedrequest.TypedRouter();
+  public CExternalRegistry = plugins.smartdata.setDefaultManagerForDoc(this, ExternalRegistry);
+
+  get db() {
+    return this.cloudlyRef.mongodbConnector.smartdataDb;
+  }
+
+  constructor(cloudlyRef: Cloudly) {
+    this.cloudlyRef = cloudlyRef;
+  }
+
+  public async start() {
+    // lets set up a typedrouter
+    this.typedrouter.addTypedRouter(this.typedrouter);
+
+    this.typedrouter.addTypedHandler<plugins.servezoneInterfaces.requests.externalRegistry.IReq_GetRegistryById>(
+      new plugins.typedrequest.TypedHandler('getExternalRegistryById', async (dataArg) => {
+        const registry = await ExternalRegistry.getRegistryById(dataArg.id);
+        return {
+          registry: await registry.createSavableObject(),
+        };
+      })
+    );
+
+    this.typedrouter.addTypedHandler<plugins.servezoneInterfaces.requests.externalRegistry.IReq_GetRegistries>(
+      new plugins.typedrequest.TypedHandler('getExternalRegistries', async (dataArg) => {
+        const registries = await ExternalRegistry.getRegistries();
+        return {
+          registries: await Promise.all(
+            registries.map((registry) => registry.createSavableObject())
+          ),
+        };
+      })
+    );
+
+    this.typedrouter.addTypedHandler<plugins.servezoneInterfaces.requests.externalRegistry.IReq_CreateRegistry>(
+      new plugins.typedrequest.TypedHandler('createExternalRegistry', async (dataArg) => {
+        const registry = await ExternalRegistry.createExternalRegistry(dataArg.registryData);
+        return {
+          registry: await registry.createSavableObject(),
+        };
+      })
+    );
+  }
+}

ts/manager.externalregistry/index.ts

@@ -0,0 +1,2 @@
+export * from './classes.externalregistrymanager.js';
+export * from './classes.externalregistry.js';

ts_apiclient/classes.cloudlyapiclient.ts

@@ -7,6 +7,7 @@ import { Service } from './classes.service.js';
 import { Cluster } from './classes.cluster.js';
 import { SecretBundle } from './classes.secretbundle.js';
 import { SecretGroup } from './classes.secretgroup.js';
+import { ExternalRegistry } from './classes.externalregistry.js';
 
 export class CloudlyApiClient {
   private cloudlyUrl: string;
@@ -159,6 +160,19 @@ export class CloudlyApiClient {
     return typedResponse.certificate;
   }
 
+  public externalRegistry = {
+    // ExternalRegistry
+    getRegistryById: async (registryNameArg: string) => {
+      return ExternalRegistry.getExternalRegistryById(this, registryNameArg);
+    },
+    getRegistries: async () => {
+      return ExternalRegistry.getExternalRegistries(this);
+    },
+    createRegistry: async (optionsArg: Parameters<typeof ExternalRegistry.createExternalRegistry>[1]) => {
+      return ExternalRegistry.createExternalRegistry(this, optionsArg);
+    }
+  }
+
   public image = {
     // Images
     getImageById: async (imageIdArg: string) => {

ts_apiclient/classes.externalregistry.ts

@@ -0,0 +1,83 @@
+import * as plugins from './plugins.js';
+import type { CloudlyApiClient } from './classes.cloudlyapiclient.js';
+
+export class ExternalRegistry implements plugins.servezoneInterfaces.data.IExternalRegistry {
+  // STATIC
+  public static async getExternalRegistryById(cloudlyClientRef: CloudlyApiClient, registryNameArg: string) {
+    const getRegistryByIdTR = cloudlyClientRef.typedsocketClient.createTypedRequest<plugins.servezoneInterfaces.requests.externalRegistry.IReq_GetRegistryById>(
+      'getExternalRegistryById'
+    );
+    const response = await getRegistryByIdTR.fire({
+      identity: cloudlyClientRef.identity,
+      id: registryNameArg,
+    });
+    const newRegistry = new ExternalRegistry(cloudlyClientRef);
+    Object.assign(newRegistry, response.registry);
+    return newRegistry;
+  }
+
+  public static async getExternalRegistries(cloudlyClientRef: CloudlyApiClient) {
+    const getRegistriesTR = cloudlyClientRef.typedsocketClient.createTypedRequest<plugins.servezoneInterfaces.requests.externalRegistry.IReq_GetRegistries>(
+      'getExternalRegistries'
+    );
+    const response = await getRegistriesTR.fire({
+      identity: cloudlyClientRef.identity,
+    });
+    const registryConfigs: ExternalRegistry[] = [];
+    for (const registryConfig of response.registries) {
+      const newRegistry = new ExternalRegistry(cloudlyClientRef);
+      Object.assign(newRegistry, registryConfig);
+      registryConfigs.push(newRegistry);
+    }
+    return registryConfigs;
+  }
+
+  public static async createExternalRegistry(cloudlyClientRef: CloudlyApiClient, registryDataArg: Partial<plugins.servezoneInterfaces.data.IExternalRegistry['data']>) {
+    const createRegistryTR = cloudlyClientRef.typedsocketClient.createTypedRequest<plugins.servezoneInterfaces.requests.externalRegistry.IReq_CreateRegistry>(
+      'createExternalRegistry'
+    );
+    const response = await createRegistryTR.fire({
+      identity: cloudlyClientRef.identity,
+      registryData: registryDataArg as plugins.servezoneInterfaces.data.IExternalRegistry['data'],
+    });
+    const newRegistry = new ExternalRegistry(cloudlyClientRef);
+    Object.assign(newRegistry, response.registry);
+    return newRegistry;
+  }
+
+  // INSTANCE
+  public id: string;
+  public data: plugins.servezoneInterfaces.data.IExternalRegistry['data'];
+  public cloudlyClientRef: CloudlyApiClient;
+
+  constructor(cloudlyClientRef: CloudlyApiClient) {
+    this.cloudlyClientRef = cloudlyClientRef;
+  }
+
+  public async update() {
+    const updateRegistryTR = this.cloudlyClientRef.typedsocketClient.createTypedRequest<plugins.servezoneInterfaces.requests.externalRegistry.IReq_UpdateRegistry>(
+      'updateExternalRegistry'
+    );
+    const response = await updateRegistryTR.fire({
+      identity: this.cloudlyClientRef.identity,
+      registryData: this.data,
+    });
+
+    const resultRegistryData = response.resultRegistry.data;
+    plugins.smartexpect.expect(resultRegistryData).toEqual(this.data);
+
+    return this;
+  }
+
+  public async delete(cloudlyClientRef: CloudlyApiClient, registryIdArg: string) {
+    const deleteRegistryTR = cloudlyClientRef.typedsocketClient.createTypedRequest<plugins.servezoneInterfaces.requests.externalRegistry.IReq_DeleteRegistryById>(
+      'deleteExternalRegistryById'
+    );
+    const response = await deleteRegistryTR.fire({
+      identity: cloudlyClientRef.identity,
+      registryId: this.id,
+    });
+    plugins.smartexpect.expect(response.ok).toBeTrue();
+    return null;
+  }
+}

ts_cliclient/index.ts

@@ -1 +1,3 @@
-console.log('this is the cli client.');
+export const runCli = async () => {
+  console.log('serve.zone cli client');
+};

ts_cliclient/tspublish.json

@@ -4,5 +4,6 @@
   "registries": [
     "registry.npmjs.org:public",
     "verdaccio.lossless.digital:public"
-  ]
+  ],
+  "bin": ["servezone"]
 }

ts_interfaces/data/externalregistry.ts

@@ -0,0 +1,12 @@
+import * as plugins from '../plugins.js';
+
+export interface IExternalRegistry {
+  id: string;
+  data: {
+    type: 'docker' | 'npm';
+    name: string;
+    url: string;
+    username: string;
+    password: string;
+  };
+}

ts_interfaces/data/image.ts

@@ -4,6 +4,11 @@ export interface IImage {
   id: string;
   data: {
     name: string;
+    location: {
+      internal: boolean;
+      externalRegistryId: string;
+      externalImageTag: string;
+    }
     description: string;
     versions: Array<{
       versionString: string;

ts_interfaces/data/index.ts

@@ -4,6 +4,7 @@ export * from './config.js';
 export * from './deployment.js';
 export * from './docker.js';
 export * from './event.js';
+export * from './externalregistry.js';
 export * from './image.js';
 export * from './secretbundle.js';
 export * from './secretgroup.js'

ts_interfaces/requests/externalregistry.ts

@@ -0,0 +1,72 @@
+import * as plugins from '../plugins.js';
+import * as data from '../data/index.js';
+import * as userInterfaces from '../data/user.js';
+
+export interface IReq_GetRegistryById extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetRegistryById
+> {
+  method: 'getExternalRegistryById';
+  request: {
+    identity: userInterfaces.IIdentity;
+    id: string;
+  };
+  response: {
+    registry: data.IExternalRegistry;
+  };
+}
+
+export interface IReq_GetRegistries extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_GetRegistries
+> {
+  method: 'getExternalRegistries';
+  request: {
+    identity: userInterfaces.IIdentity;
+  };
+  response: {
+    registries: data.IExternalRegistry[];
+  };
+}
+
+export interface IReq_CreateRegistry extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_CreateRegistry
+> {
+  method: 'createExternalRegistry';
+  request: {
+    identity: userInterfaces.IIdentity;
+    registryData: data.IExternalRegistry['data'];
+  };
+  response: {
+    registry: data.IExternalRegistry;
+  };
+}
+
+export interface IReq_UpdateRegistry extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_UpdateRegistry
+> {
+  method: 'updateExternalRegistry';
+  request: {
+    identity: userInterfaces.IIdentity;
+    registryData: data.IExternalRegistry['data'];
+  };
+  response: {
+    resultRegistry: data.IExternalRegistry;
+  };
+}
+
+export interface IReq_DeleteRegistryById extends plugins.typedrequestInterfaces.implementsTR<
+  plugins.typedrequestInterfaces.ITypedRequest,
+  IReq_DeleteRegistryById
+> {
+  method: 'deleteExternalRegistryById';
+  request: {
+    identity: userInterfaces.IIdentity;
+    registryId: string;
+  };
+  response: {
+    ok: boolean;
+  };
+}

ts_interfaces/requests/index.ts

@@ -4,6 +4,7 @@ import * as adminRequests from './admin.js';
 import * as certificateRequests from './certificate.js';
 import * as clusterRequests from './cluster.js';
 import * as configRequests from './config.js';
+import * as externalRegistryRequests from './externalregistry.js';
 import * as identityRequests from './identity.js';
 import * as imageRequests from './image.js';
 import * as informRequests from './inform.js';
@@ -22,6 +23,7 @@ export {
   certificateRequests as certificate,
   clusterRequests as cluster,
   configRequests as config,
+  externalRegistryRequests as externalRegistry,
   identityRequests as identity,
   imageRequests as image,
   informRequests as inform,

ts_web/00_commitinfo_data.ts

@@ -3,6 +3,6 @@
  */
 export const commitinfo = {
   name: '@serve.zone/cloudly',
-  version: '4.7.1',
+  version: '4.12.0',
   description: 'A comprehensive tool for managing containerized applications across multiple cloud providers using Docker Swarmkit, featuring web, CLI, and API interfaces.'
 }

ts_web/elements/cloudly-dashboard.ts

@@ -24,6 +24,7 @@ import { CloudlyViewS3 } from './cloudly-view-s3.js';
 import { CloudlyViewSecretBundles } from './cloudly-view-secretbundles.js';
 import { CloudlyViewSecretGroups } from './cloudly-view-secretgroups.js';
 import { CloudlyViewServices } from './cloudly-view-services.js';
+import { CloudlyViewExternalRegistries } from './cloudly-view-externalregistries.js';
 
 declare global {
   interface HTMLElementTagNameMap {
@@ -89,6 +90,10 @@ export class CloudlyDashboard extends DeesElement {
                 name: 'Clusters',
                 element: CloudlyViewClusters,
               },
+              {
+                name: 'ExternalRegistries',
+                element: CloudlyViewExternalRegistries,
+              },
               {
                 name: 'Images',
                 element: CloudlyViewImages,

ts_web/elements/cloudly-view-externalregistries.ts

@@ -0,0 +1,129 @@
+import * as plugins from '../plugins.js';
+import * as shared from '../elements/shared/index.js';
+
+import {
+  DeesElement,
+  customElement,
+  html,
+  state,
+  css,
+  cssManager,
+} from '@design.estate/dees-element';
+
+import * as appstate from '../appstate.js';
+
+@customElement('cloudly-view-externalregistries')
+export class CloudlyViewExternalRegistries 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,
+    shared.viewHostCss,
+    css` 
+    `,
+  ];
+
+  public render() {
+    return html`
+      <cloudly-sectionheading>External Registries</cloudly-sectionheading>
+      <dees-table
+        .heading1=${'External Registries'}
+        .heading2=${'decoded in client'}
+        .data=${this.data.deployments}
+        .displayFunction=${(itemArg: plugins.interfaces.data.ICluster) => {
+          return {
+            id: itemArg.id,
+            serverAmount: itemArg.data.servers.length,
+          };
+        }}
+        .dataActions=${[
+          {
+            name: 'add configBundle',
+            iconName: 'plus',
+            type: ['header', 'footer'],
+            actionFunc: async (dataActionArg) => {
+              const modal = await plugins.deesCatalog.DeesModal.createAndShow({
+                heading: 'Add ConfigBundle',
+                content: html`
+                  <dees-form>
+                    <dees-input-text .key=${'id'} .label=${'ID'} .value=${''}></dees-input-text>
+                    <dees-input-text
+                      .key=${'data.secretGroupIds'}
+                      .label=${'secretGroupIds'}
+                      .value=${''}
+                    ></dees-input-text>
+                    <dees-input-text
+                      .key=${'data.includedTags'}
+                      .label=${'includedTags'}
+                      .value=${''}
+                    ></dees-input-text>
+                  </dees-form>
+                `,
+                menuOptions: [
+                  { name: 'create', action: async (modalArg) => {} },
+                  {
+                    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>
+    `;
+  }
+}

ts_web/elements/shared/cloudly-sectionheading.ts

@@ -18,11 +18,28 @@ export class CloudlySectionheading extends DeesElement {
   public static styles = [
     cssManager.defaultStyles,
     css`
+      :host {
+        display: grid;
+        grid-template-columns: min-content min-content;
+      }
+
       h1 {
         font-family: 'Cal Sans';
         letter-spacing: 0.025em;
         margin: 0px;
         margin-bottom: 16px;
+        white-space: nowrap;
+      }
+
+      .flag {
+        border-radius: 4px;
+        background: #8a0183;
+        height: 20px;
+        padding: 2px 4px;
+        margin-left: 16px;
+        font-size: 12px;
+        transform: translateY(12px);
+        white-space: nowrap;
       }
     `,
   ]
@@ -30,6 +47,7 @@ export class CloudlySectionheading extends DeesElement {
   public render() {
     return html`
       <h1><slot></slot></h1>
+      <div class="flag">stability: alpha</div>
     `;
   }
 }