extension support for workspace overview

Signed-off-by: Jim Ehrismann <jehrismann@mirantis.com>

src/extensions/extension-loader.ts

@@ -192,6 +192,7 @@ export class ExtensionLoader {
         registries.appPreferenceRegistry.add(extension.appPreferences),
         registries.clusterFeatureRegistry.add(extension.clusterFeatures),
         registries.statusBarRegistry.add(extension.statusBarItems),
+        registries.workspaceDetailRegistry.add(extension.workspaceDetails),
       ];
 
       this.events.on("remove", (removedExtension: LensRendererExtension) => {

src/extensions/interfaces/registrations.ts

@@ -6,3 +6,4 @@ export type { KubeObjectStatusRegistration } from "../registries/kube-object-sta
 export type { PageRegistration, RegisteredPage, PageParams, PageComponentProps, PageComponents, PageTarget } from "../registries/page-registry";
 export type { PageMenuRegistration, ClusterPageMenuRegistration, PageMenuComponents } from "../registries/page-menu-registry";
 export type { StatusBarRegistration } from "../registries/status-bar-registry";
+export type { WorkspaceDetailRegistration } from "../registries/workspace-detail-registry";

src/extensions/lens-renderer-extension.ts

@@ -1,4 +1,4 @@
-import type { AppPreferenceRegistration, ClusterFeatureRegistration, ClusterPageMenuRegistration, KubeObjectDetailRegistration, KubeObjectMenuRegistration, KubeObjectStatusRegistration, PageMenuRegistration, PageRegistration, StatusBarRegistration, } from "./registries";
+import type { AppPreferenceRegistration, ClusterFeatureRegistration, ClusterPageMenuRegistration, KubeObjectDetailRegistration, KubeObjectMenuRegistration, KubeObjectStatusRegistration, PageMenuRegistration, PageRegistration, StatusBarRegistration, WorkspaceDetailRegistration, } from "./registries";
 import type { Cluster } from "../main/cluster";
 import { LensExtension } from "./lens-extension";
 import { getExtensionPageUrl } from "./registries/page-registry";
@@ -16,6 +16,7 @@ export class LensRendererExtension extends LensExtension {
   kubeObjectDetailItems: KubeObjectDetailRegistration[] = [];
   kubeObjectMenuItems: KubeObjectMenuRegistration[] = [];
   commands: CommandRegistration[] = [];
+  workspaceDetails: WorkspaceDetailRegistration[] = [];
 
   async navigate<P extends object>(pageId?: string, params?: P) {
     const { navigate } = await import("../renderer/navigation");

src/extensions/registries/index.ts

@@ -9,3 +9,4 @@ export * from "./kube-object-detail-registry";
 export * from "./kube-object-menu-registry";
 export * from "./cluster-feature-registry";
 export * from "./kube-object-status-registry";
+export * from "./workspace-detail-registry";

src/extensions/registries/workspace-detail-registry.ts

@@ -0,0 +1,15 @@
+import type React from "react";
+import { BaseRegistry } from "./base-registry";
+
+export interface WorkspaceDetailComponents {
+  Detail: React.ComponentType<any>;
+}
+
+export interface WorkspaceDetailRegistration {
+  components: WorkspaceDetailComponents;
+}
+
+export class WorkspaceDetailRegistry extends BaseRegistry<WorkspaceDetailRegistration> {
+}
+
+export const workspaceDetailRegistry = new WorkspaceDetailRegistry();

src/renderer/components/+landing-page/workspace-overview.scss

@@ -1,14 +1,17 @@
 .WorkspaceOverview {
-  background-color: var(--mainBackground);
-  
-  .TableCell {
-    display: flex;
-    align-items: left;
 
-    &.cluster-icon {
+  .ItemListLayout.WorkspaceClusters {
-      align-items: center;
+    background-color: var(--mainBackground);
-      flex-grow: 0.2;
+
-      padding: 0;
+    .TableCell {
+      display: flex;
+      align-items: left;
+
+      &.cluster-icon {
+        align-items: center;
+        flex-grow: 0.2;
+        padding: 0;
+      }
     }
   }
-}
+}

src/renderer/components/+landing-page/workspace-overview.tsx

@@ -8,6 +8,7 @@ import { ClusterItem, WorkspaceClusterStore } from "./workspace-cluster.store";
 import { navigate } from "../../navigation";
 import { clusterViewURL } from "../cluster-manager/cluster-view.route";
 import { WorkspaceClusterMenu } from "./workspace-cluster-menu";
+import { workspaceDetailRegistry } from "../../../extensions/registries/workspace-detail-registry";
 
 interface Props {
   workspace: Workspace;
@@ -32,36 +33,45 @@ export class WorkspaceOverview extends Component<Props> {
     
     workspaceClusterStore.loadAll();
 
+    const workspaceDetails = workspaceDetailRegistry.getItems();
+    
     return (
-      <ItemListLayout 
+      <div className="WorkspaceOverview flex column gaps box grow">
-        renderHeaderTitle={<div>Clusters</div>}
+        <ItemListLayout 
-        isClusterScoped
+          className="WorkspaceClusters"
-        isSearchable={false}
+          renderHeaderTitle={<div>Clusters</div>}
-        isSelectable={false}
+          isClusterScoped
-        className="WorkspaceOverview"
+          isSearchable={false}
-        store={workspaceClusterStore}
+          isSelectable={false}
-        sortingCallbacks={{
+          store={workspaceClusterStore}
-          [sortBy.name]: (item: ClusterItem) => item.name,
+          sortingCallbacks={{
-          [sortBy.contextName]: (item: ClusterItem) => item.cluster.contextName,
+            [sortBy.name]: (item: ClusterItem) => item.name,
-          [sortBy.version]: (item: ClusterItem) => item.cluster.version,
+            [sortBy.contextName]: (item: ClusterItem) => item.cluster.contextName,
-        }}
+            [sortBy.version]: (item: ClusterItem) => item.cluster.version,
-        renderTableHeader={[
+          }}
-          { title: "Name", className: "name", sortBy: sortBy.name },
+          renderTableHeader={[
-          { title: "Context", className: "context", sortBy: sortBy.contextName },
+            { title: "Name", className: "name", sortBy: sortBy.name },
-          { title: "Version", className: "version", sortBy: sortBy.version },
+            { title: "Context", className: "context", sortBy: sortBy.contextName },
-          { title: "Status", className: "status" },
+            { title: "Version", className: "version", sortBy: sortBy.version },
-        ]}
+            { title: "Status", className: "status" },
-        renderTableContents={(item: ClusterItem) => [
+          ]}
-          item.name,
+          renderTableContents={(item: ClusterItem) => [
-          item.cluster.contextName,
+            item.name,
-          item.cluster.version,
+            item.cluster.contextName,
-          item.cluster.online ? "online" : "offline"
+            item.cluster.version,
-        ]}
+            item.cluster.online ? "online" : "offline"
-        onDetails={this.showCluster}
+          ]}
-        renderItemMenu={(clusterItem: ClusterItem) => (
+          onDetails={this.showCluster}
-          <WorkspaceClusterMenu clusterItem={clusterItem} workspace={workspace} workspaceClusterStore={workspaceClusterStore}/>
+          renderItemMenu={(clusterItem: ClusterItem) => (
-        )}
+            <WorkspaceClusterMenu clusterItem={clusterItem} workspace={workspace} workspaceClusterStore={workspaceClusterStore}/>
-      />
+          )}
+        />
+        { workspaceDetails.length > 0 && 
+          <div className="extensions flex column gaps">
+            {workspaceDetailRegistry.getItems().map(({ components: { Detail } }, index) => <Detail key={index} className="workspace-detail"/>)}
+          </div>
+        }
+      </div>
     );
   }
 }