Allow extensions to register kube-object menus + details (#1108)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

.eslintrc.js

@@ -4,6 +4,7 @@ module.exports =  {
       files: [
         "src/renderer/**/*.js",
         "build/**/*.js",
+        "extensions/**/*.js"
       ],
       extends: [
         'eslint:recommended',

extensions/node-menu/Makefile

@@ -0,0 +1,5 @@
+install-deps:
+	npm install
+
+build: install-deps
+	npm run build

extensions/node-menu/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "lens-node-menu",
+  "version": "0.1.0",
+  "description": "Lens node menu",
+  "renderer": "dist/renderer.js",
+  "lens": {
+    "metadata": {},
+    "styles": []
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "dev": "npm run build --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2",
+    "mobx": "^5.15.5",
+    "react": "^16.13.1"
+  }
+}

extensions/node-menu/renderer.tsx

@@ -0,0 +1,21 @@
+import { Registry, LensRendererExtension } from "@k8slens/extensions";
+import React from "react"
+import { NodeMenu } from "./src/node-menu"
+
+export default class NodeMenuRendererExtension extends LensRendererExtension {
+  async onActivate() {
+    console.log("node-menu extension activated")
+  }
+
+  registerKubeObjectMenus(registry: Registry.KubeObjectMenuRegistry) {
+    this.disposers.push(
+      registry.add({
+        kind: "Node",
+        apiVersions: ["v1"],
+        components: {
+          MenuItem: (props) => <NodeMenu {...props} />
+        }
+      })
+    )
+  }
+}

extensions/node-menu/src/node-menu.tsx

@@ -0,0 +1,70 @@
+import React from "react";
+import { Component, K8sApi, Navigation} from "@k8slens/extensions"
+
+export function NodeMenu(props: Component.KubeObjectMenuProps<K8sApi.Node>) {
+  const { object: node, toolbar } = props;
+  if (!node) return null;
+  const nodeName = node.getName();
+
+  const sendToTerminal = (command: string) => {
+    Component.terminalStore.sendCommand(command, {
+      enter: true,
+      newTab: true,
+    });
+    Navigation.hideDetails();
+  }
+
+  const shell = () => {
+    Component.createTerminalTab({
+      title: `Node: ${nodeName}`,
+      node: nodeName,
+    });
+    Navigation.hideDetails();
+  }
+
+  const cordon = () => {
+    sendToTerminal(`kubectl cordon ${nodeName}`);
+  }
+
+  const unCordon = () => {
+    sendToTerminal(`kubectl uncordon ${nodeName}`)
+  }
+
+  const drain = () => {
+    const command = `kubectl drain ${nodeName} --delete-local-data --ignore-daemonsets --force`;
+    Component.ConfirmDialog.open({
+      ok: () => sendToTerminal(command),
+      labelOk: `Drain Node`,
+      message: (
+        <p>
+          Are you sure you want to drain <b>{nodeName}</b>?
+        </p>
+      ),
+    })
+  }
+
+  return (
+    <>
+      <Component.MenuItem onClick={shell}>
+        <Component.Icon svg="ssh" interactive={toolbar} title="Node shell"/>
+        <span className="title">Shell</span>
+      </Component.MenuItem>
+      {!node.isUnschedulable() && (
+        <Component.MenuItem onClick={cordon}>
+          <Component.Icon material="pause_circle_filled" title="Cordon" interactive={toolbar}/>
+          <span className="title">Cordon</span>
+        </Component.MenuItem>
+      )}
+      {node.isUnschedulable() && (
+        <Component.MenuItem onClick={unCordon}>
+          <Component.Icon material="play_circle_filled" title="Uncordon" interactive={toolbar}/>
+          <span className="title">Uncordon</span>
+        </Component.MenuItem>
+      )}
+      <Component.MenuItem onClick={drain}>
+        <Component.Icon material="delete_sweep" title="Drain" interactive={toolbar}/>
+        <span className="title">Drain</span>
+      </Component.MenuItem>
+    </>
+  );
+}

extensions/node-menu/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "CommonJS",
+    "target": "ES2017",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Node",
+    "sourceMap": false,
+    "declaration": false,
+    "strict": false,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "jsx": "react"
+  },
+  "include": [
+    "../../src/extensions/npm/**/*.d.ts",
+    "./*.ts",
+    "./*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "*.js"
+  ]
+}

extensions/node-menu/webpack.config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+
+module.exports = [
+  {
+    entry: './renderer.tsx',
+    context: __dirname,
+    target: "electron-renderer",
+    mode: "production",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    externals: [
+      {
+        "@k8slens/extensions": "var global.LensExtensions",
+        "react": "var global.React",
+        "mobx": "var global.Mobx"
+      }
+    ],
+    resolve: {
+      extensions: [ '.tsx', '.ts', '.js' ],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      globalObject: "this",
+      filename: 'renderer.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+  },
+];

extensions/pod-menu/Makefile

@@ -0,0 +1,5 @@
+install-deps:
+	npm install
+
+build: install-deps
+	npm run build

extensions/pod-menu/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "lens-pod-menu",
+  "version": "0.1.0",
+  "description": "Lens pod menu",
+  "renderer": "dist/renderer.js",
+  "lens": {
+    "metadata": {},
+    "styles": []
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "dev": "npm run build --watch"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2",
+    "mobx": "^5.15.5",
+    "react": "^16.13.1"
+  }
+}

extensions/pod-menu/renderer.tsx

@@ -0,0 +1,31 @@
+import { Registry, LensRendererExtension } from "@k8slens/extensions";
+import { PodShellMenu } from "./src/shell-menu"
+import { PodLogsMenu } from "./src/logs-menu"
+import React from "react"
+
+export default class PodMenuRendererExtension extends LensRendererExtension {
+  async onActivate() {
+    console.log("pod-menu extension activated")
+  }
+
+  registerKubeObjectMenus(registry: Registry.KubeObjectMenuRegistry) {
+    this.disposers.push(
+      registry.add({
+        kind: "Pod",
+        apiVersions: ["v1"],
+        components: {
+          MenuItem: (props) => <PodShellMenu {...props} />
+        }
+      })
+    )
+    this.disposers.push(
+      registry.add({
+        kind: "Pod",
+        apiVersions: ["v1"],
+        components: {
+          MenuItem: (props) => <PodLogsMenu {...props} />
+        }
+      })
+    )
+  }
+}

extensions/pod-menu/src/logs-menu.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
+
+interface Props extends Component.KubeObjectMenuProps<K8sApi.Pod> {
+}
+
+export class PodLogsMenu extends React.Component<Props> {
+  showLogs(container: K8sApi.IPodContainer) {
+    Navigation.hideDetails();
+    const pod = this.props.object;
+    Component.createPodLogsTab({
+      pod,
+      containers: pod.getContainers(),
+      initContainers: pod.getInitContainers(),
+      selectedContainer: container,
+      showTimestamps: false,
+      previous: false,
+      tailLines: 1000
+    });
+  }
+
+  render() {
+    const { object: pod, toolbar } = this.props
+    const containers = pod.getAllContainers();
+    const statuses = pod.getContainerStatuses();
+    if (!containers.length) return;
+    return (
+      <Component.MenuItem onClick={Util.prevDefault(() => this.showLogs(containers[0]))}>
+        <Component.Icon material="subject" title="Logs" interactive={toolbar}/>
+        <span className="title">Logs</span>
+        {containers.length > 1 && (
+          <>
+            <Component.Icon className="arrow" material="keyboard_arrow_right"/>
+            <Component.SubMenu>
+              {
+                containers.map(container => {
+                  const { name } = container
+                  const status = statuses.find(status => status.name === name);
+                  const brick = status ? (
+                    <Component.StatusBrick
+                      className={Util.cssNames(Object.keys(status.state)[0], { ready: status.ready })}
+                    />
+                  ) : null
+                  return (
+                    <Component.MenuItem key={name} onClick={Util.prevDefault(() => this.showLogs(container))} className="flex align-center">
+                      {brick}
+                      {name}
+                    </Component.MenuItem>
+                  )
+                })
+              }
+            </Component.SubMenu>
+          </>
+        )}
+      </Component.MenuItem>
+    )
+  }
+}

extensions/pod-menu/src/shell-menu.tsx

@@ -0,0 +1,64 @@
+
+
+import React from "react";
+import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
+
+interface Props extends Component.KubeObjectMenuProps<K8sApi.Pod> {
+}
+
+export class PodShellMenu extends React.Component<Props> {
+  async execShell(container?: string) {
+    Navigation.hideDetails();
+    const { object: pod } = this.props
+    const containerParam = container ? `-c ${container}` : ""
+    let command = `kubectl exec -i -t -n ${pod.getNs()} ${pod.getName()} ${containerParam} "--"`
+    if (window.navigator.platform !== "Win32") {
+      command = `exec ${command}`
+    }
+    if (pod.getSelectedNodeOs() === "windows") {
+      command = `${command} powershell`
+    } else {
+      command = `${command} sh -c "clear; (bash || ash || sh)"`
+    }
+
+    const shell = Component.createTerminalTab({
+      title: `Pod: ${pod.getName()} (namespace: ${pod.getNs()})`
+    });
+
+    Component.terminalStore.sendCommand(command, {
+      enter: true,
+      tabId: shell.id
+    });
+  }
+
+  render() {
+    const { object, toolbar } = this.props
+    console.log(Object.keys(object))
+    const containers = object.getRunningContainers();
+    if (!containers.length) return;
+    return (
+      <Component.MenuItem onClick={Util.prevDefault(() => this.execShell(containers[0].name))}>
+        <Component.Icon svg="ssh" interactive={toolbar} title="Pod shell"/>
+        <span className="title">Shell</span>
+        {containers.length > 1 && (
+          <>
+            <Component.Icon className="arrow" material="keyboard_arrow_right"/>
+            <Component.SubMenu>
+              {
+                containers.map(container => {
+                  const { name } = container;
+                  return (
+                    <Component.MenuItem key={name} onClick={Util.prevDefault(() => this.execShell(name))} className="flex align-center">
+                      <Component.StatusBrick/>
+                      {name}
+                    </Component.MenuItem>
+                  )
+                })
+              }
+            </Component.SubMenu>
+          </>
+        )}
+      </Component.MenuItem>
+    )
+  }
+}

extensions/pod-menu/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "module": "CommonJS",
+    "target": "ES2017",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "moduleResolution": "Node",
+    "sourceMap": false,
+    "declaration": false,
+    "strict": false,
+    "noImplicitAny": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "jsx": "react"
+  },
+  "include": [
+    "../../src/extensions/npm/**/*.d.ts",
+    "./*.ts",
+    "./*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "*.js"
+  ]
+}

extensions/pod-menu/webpack.config.js

@@ -0,0 +1,35 @@
+const path = require('path');
+
+module.exports = [
+  {
+    entry: './renderer.tsx',
+    context: __dirname,
+    target: "electron-renderer",
+    mode: "production",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    externals: [
+      {
+        "@k8slens/extensions": "var global.LensExtensions",
+        "react": "var global.React",
+        "mobx": "var global.Mobx"
+      }
+    ],
+    resolve: {
+      extensions: [ '.tsx', '.ts', '.js' ],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      globalObject: "this",
+      filename: 'renderer.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+  },
+];

package.json

@@ -174,7 +174,9 @@
   },
   "lens": {
     "extensions": [
-      "telemetry"
+      "telemetry",
+      "pod-menu",
+      "node-menu"
     ]
   },
   "dependencies": {

src/extensions/core-api/registries.ts

@@ -1,2 +1,4 @@
 export type { DynamicPageType, PageRegistry } from "../page-registry"
 export type { AppPreferenceRegistry } from "../app-preference-registry"
+export type { KubeObjectMenuRegistry } from "../../renderer/api/kube-object-menu-registry"
+export type { KubeObjectDetailRegistry } from "../../renderer/api/kube-object-detail-registry"

src/extensions/core-api/utils.ts

@@ -1 +1,3 @@
 export { Singleton } from "../../common/utils"
+export { prevDefault, stopPropagation } from "../../renderer/utils/prevDefault"
+export { cssNames } from "../../renderer/utils/cssNames"

src/extensions/extension-loader.ts

@@ -8,6 +8,7 @@ import logger from "../main/logger"
 import { app, remote, ipcRenderer } from "electron"
 import { pageRegistry } from "./page-registry";
 import { appPreferenceRegistry } from "./app-preference-registry"
+import { kubeObjectMenuRegistry } from "../renderer/api/kube-object-menu-registry"
 
 export interface InstalledExtension extends ExtensionModel {
   manifestPath: string;
@@ -39,6 +40,7 @@ export class ExtensionLoader {
     logger.info('[EXTENSIONS-LOADER]: load on cluster renderer')
     this.autoloadExtensions(getLensRuntimeEnv, (instance: LensRendererExtension) => {
       instance.registerPages(pageRegistry)
+      instance.registerKubeObjectMenus(kubeObjectMenuRegistry)
     })
   }
 

src/extensions/lens-renderer-extension.ts

@@ -1,6 +1,7 @@
 import { LensExtension } from "./lens-extension"
 import type { PageRegistry } from "./page-registry"
 import type { AppPreferenceRegistry } from "./app-preference-registry";
+import type { KubeObjectMenuRegistry } from "../renderer/api/kube-object-menu-registry";
 
 export class LensRendererExtension extends LensExtension {
 
@@ -11,4 +12,8 @@ export class LensRendererExtension extends LensExtension {
   registerAppPreferences(registry: AppPreferenceRegistry) {
     return
   }
+
+  registerKubeObjectMenus(registry: KubeObjectMenuRegistry) {
+    return
+  }
 }

src/extensions/renderer-api/components.ts

@@ -5,7 +5,15 @@ export * from "../../renderer/components/tooltip"
 export * from "../../renderer/components/button"
 export * from "../../renderer/components/tabs"
 export * from "../../renderer/components/badge"
+export * from "../../renderer/components/drawer"
+
+// kube helpers
+export { KubeObjectDetailsProps, KubeObjectMenuProps } from "../../renderer/components/kube-object"
 export { KubeObjectMeta } from "../../renderer/components/kube-object/kube-object-meta";
+export { KubeEventDetails } from "../../renderer/components/+events/kube-event-details"
+
+// specific exports
+export { ConfirmDialog } from "../../renderer/components/confirm-dialog";
 export { MenuItem, SubMenu } from "../../renderer/components/menu";
 export { StatusBrick } from "../../renderer/components/status-brick";
 export { terminalStore, createTerminalTab } from "../../renderer/components/dock/terminal.store";

src/extensions/renderer-api/k8s-api.ts

@@ -1,7 +1,8 @@
 
+export { apiManager } from "../../renderer/api/api-manager";
 export { KubeApi } from "../../renderer/api/kube-api";
 export { KubeObject } from "../../renderer/api/kube-object";
-export { Pod, podsApi } from "../../renderer/api/endpoints";
+export { Pod, podsApi, IPodContainer, IPodContainerStatus } from "../../renderer/api/endpoints";
 export { Node, nodesApi } from "../../renderer/api/endpoints";
 export { Deployment, deploymentApi } from "../../renderer/api/endpoints";
 export { DaemonSet, daemonSetApi } from "../../renderer/api/endpoints";
@@ -9,7 +10,7 @@ export { StatefulSet, statefulSetApi } from "../../renderer/api/endpoints";
 export { Job, jobApi } from "../../renderer/api/endpoints";
 export { CronJob, cronJobApi } from "../../renderer/api/endpoints";
 export { ConfigMap, configMapApi } from "../../renderer/api/endpoints";
-export { Secret, secretsApi } from "../../renderer/api/endpoints";
+export { Secret, secretsApi, ISecretRef } from "../../renderer/api/endpoints";
 export { ResourceQuota, resourceQuotaApi } from "../../renderer/api/endpoints";
 export { HorizontalPodAutoscaler, hpaApi } from "../../renderer/api/endpoints";
 export { PodDisruptionBudget, pdbApi } from "../../renderer/api/endpoints";

src/extensions/renderer-api/navigation.ts

@@ -1 +1 @@
-export { navigate } from "../../renderer/navigation"
+export { navigate, hideDetails, showDetails } from "../../renderer/navigation"

src/renderer/api/api-manager.ts

@@ -53,22 +53,6 @@ export class ApiManager {
   getStore(api: string | KubeApi): KubeObjectStore {
     return this.stores.get(this.resolveApi(api));
   }
-
-  registerViews(api: KubeApi | KubeApi[], views: ApiComponents) {
-    if (Array.isArray(api)) {
-      api.forEach(api => this.registerViews(api, views));
-      return;
-    }
-    const currentViews = this.views.get(api) || {};
-    this.views.set(api, {
-      ...currentViews,
-      ...views,
-    });
-  }
-
-  getViews(api: string | KubeApi): ApiComponents {
-    return this.views.get(this.resolveApi(api)) || {}
-  }
 }
 
 export const apiManager = new ApiManager();

src/renderer/api/endpoints/cert-manager.api.ts

@@ -1,262 +0,0 @@
-// Kubernetes certificate management controller apis
-// Reference: https://docs.cert-manager.io/en/latest/reference/index.html
-// API docs: https://docs.cert-manager.io/en/latest/reference/api-docs/index.html
-
-import { KubeObject } from "../kube-object";
-import { ISecretRef, secretsApi } from "./secret.api";
-import { getDetailsUrl } from "../../navigation";
-import { KubeApi } from "../kube-api";
-
-export class Certificate extends KubeObject {
-  static kind = "Certificate"
-
-  spec: {
-    secretName: string;
-    commonName?: string;
-    dnsNames?: string[];
-    organization?: string[];
-    ipAddresses?: string[];
-    duration?: string;
-    renewBefore?: string;
-    isCA?: boolean;
-    keySize?: number;
-    keyAlgorithm?: "rsa" | "ecdsa";
-    issuerRef: {
-      kind?: string;
-      name: string;
-    };
-    acme?: {
-      config: {
-        domains: string[];
-        http01: {
-          ingress?: string;
-          ingressClass?: string;
-        };
-        dns01?: {
-          provider: string;
-        };
-      }[];
-    };
-  }
-  status: {
-    conditions?: {
-      lastTransitionTime: string; // 2019-06-04T07:35:58Z,
-      message: string; // Certificate is up to date and has not expired,
-      reason: string; // Ready,
-      status: string; // True,
-      type: string; // Ready
-    }[];
-    notAfter: string; // 2019-11-01T05:36:27Z
-    lastFailureTime?: string;
-  }
-
-  getType(): string {
-    const { isCA, acme } = this.spec;
-    if (isCA) return "CA"
-    if (acme) return "ACME"
-  }
-
-  getCommonName() {
-    return this.spec.commonName || ""
-  }
-
-  getIssuerName() {
-    return this.spec.issuerRef.name;
-  }
-
-  getSecretName() {
-    return this.spec.secretName;
-  }
-
-  getIssuerDetailsUrl() {
-    return getDetailsUrl(issuersApi.getUrl({
-      namespace: this.getNs(),
-      name: this.getIssuerName(),
-    }))
-  }
-
-  getSecretDetailsUrl() {
-    return getDetailsUrl(secretsApi.getUrl({
-      namespace: this.getNs(),
-      name: this.getSecretName(),
-    }))
-  }
-
-  getConditions() {
-    const { conditions = [] } = this.status;
-    return conditions.map(condition => {
-      const { message, reason, lastTransitionTime, status } = condition;
-      return {
-        ...condition,
-        isReady: status === "True",
-        tooltip: `${message || reason} (${lastTransitionTime})`
-      }
-    });
-  }
-}
-
-export class Issuer extends KubeObject {
-  static kind = "Issuer"
-
-  spec: {
-    acme?: {
-      email: string;
-      server: string;
-      skipTLSVerify?: boolean;
-      privateKeySecretRef: ISecretRef;
-      solvers?: {
-        dns01?: {
-          cnameStrategy: string;
-          acmedns?: {
-            host: string;
-            accountSecretRef: ISecretRef;
-          };
-          akamai?: {
-            accessTokenSecretRef: ISecretRef;
-            clientSecretSecretRef: ISecretRef;
-            clientTokenSecretRef: ISecretRef;
-            serviceConsumerDomain: string;
-          };
-          azuredns?: {
-            clientID: string;
-            clientSecretSecretRef: ISecretRef;
-            hostedZoneName: string;
-            resourceGroupName: string;
-            subscriptionID: string;
-            tenantID: string;
-          };
-          clouddns?: {
-            project: string;
-            serviceAccountSecretRef: ISecretRef;
-          };
-          cloudflare?: {
-            email: string;
-            apiKeySecretRef: ISecretRef;
-          };
-          digitalocean?: {
-            tokenSecretRef: ISecretRef;
-          };
-          rfc2136?: {
-            nameserver: string;
-            tsigAlgorithm: string;
-            tsigKeyName: string;
-            tsigSecretSecretRef: ISecretRef;
-          };
-          route53?: {
-            accessKeyID: string;
-            hostedZoneID: string;
-            region: string;
-            secretAccessKeySecretRef: ISecretRef;
-          };
-          webhook?: {
-            config: object; // arbitrary json
-            groupName: string;
-            solverName: string;
-          };
-        };
-        http01?: {
-          ingress: {
-            class: string;
-            name: string;
-            serviceType: string;
-          };
-        };
-        selector?: {
-          dnsNames: string[];
-          matchLabels: {
-            [label: string]: string;
-          };
-        };
-      }[];
-    };
-    ca?: {
-      secretName: string;
-    };
-    vault?: {
-      path: string;
-      server: string;
-      caBundle: string; // <base64 encoded caBundle PEM file>
-      auth: {
-        appRole: {
-          path: string;
-          roleId: string;
-          secretRef: ISecretRef;
-        };
-      };
-    };
-    selfSigned?: {};
-    venafi?: {
-      zone: string;
-      cloud?: {
-        apiTokenSecretRef: ISecretRef;
-      };
-      tpp?: {
-        url: string;
-        caBundle: string; // <base64 encoded caBundle PEM file>
-        credentialsRef: {
-          name: string;
-        };
-      };
-    };
-  }
-
-  status: {
-    acme?: {
-      uri: string;
-    };
-    conditions?: {
-      lastTransitionTime: string; // 2019-06-05T07:10:42Z,
-      message: string; // The ACME account was registered with the ACME server,
-      reason: string; // ACMEAccountRegistered,
-      status: string; // True,
-      type: string; // Ready
-    }[];
-  }
-
-  getType() {
-    const { acme, ca, selfSigned, vault, venafi } = this.spec;
-    if (acme) return "ACME"
-    if (ca) return "CA"
-    if (selfSigned) return "SelfSigned"
-    if (vault) return "Vault"
-    if (venafi) return "Venafi"
-  }
-
-  getConditions() {
-    if (!this.status?.conditions) return [];
-    const { conditions = [] } = this.status;
-    return conditions.map(condition => {
-      const { message, reason, lastTransitionTime, status } = condition;
-      return {
-        ...condition,
-        isReady: status === "True",
-        tooltip: `${message || reason} (${lastTransitionTime})`,
-      }
-    });
-  }
-}
-
-export class ClusterIssuer extends Issuer {
-  static kind = "ClusterIssuer"
-}
-
-export const certificatesApi = new KubeApi({
-  kind: Certificate.kind,
-  apiBase: "/apis/cert-manager.io/v1alpha2/certificates",
-  isNamespaced: true,
-  objectConstructor: Certificate,
-});
-
-export const issuersApi = new KubeApi({
-  kind: Issuer.kind,
-  apiBase: "/apis/cert-manager.io/v1alpha2/issuers",
-  isNamespaced: true,
-  objectConstructor: Issuer,
-});
-
-export const clusterIssuersApi = new KubeApi({
-  kind: ClusterIssuer.kind,
-  apiBase: "/apis/cert-manager.io/v1alpha2/clusterissuers",
-  isNamespaced: false,
-  objectConstructor: ClusterIssuer,
-});

src/renderer/api/kube-object-detail-registry.ts

@@ -0,0 +1,33 @@
+import { observable } from "mobx"
+import React from "react"
+
+export interface KubeObjectDetailComponents {
+  Details: React.ComponentType<any>;
+}
+
+export interface KubeObjectDetailRegistration {
+  kind: string;
+  apiVersions: string[];
+  components: KubeObjectDetailComponents;
+}
+
+export class KubeObjectDetailRegistry {
+  items = observable.array<KubeObjectDetailRegistration>([], { deep: false });
+
+  add(item: KubeObjectDetailRegistration) {
+    this.items.push(item)
+    return () => {
+      this.items.replace(
+        this.items.filter(c => c !== item)
+      )
+    };
+  }
+
+  getItemsForKind(kind: string, apiVersion: string) {
+    return this.items.filter((item) => {
+      return item.kind === kind && item.apiVersions.includes(apiVersion)
+    })
+  }
+}
+
+export const kubeObjectDetailRegistry = new KubeObjectDetailRegistry()

src/renderer/api/kube-object-menu-registry.ts

@@ -0,0 +1,33 @@
+import { observable } from "mobx"
+import React from "react"
+
+export interface KubeObjectMenuComponents {
+  MenuItem: React.ComponentType<any>;
+}
+
+export interface KubeObjectMenuRegistration {
+  kind: string;
+  apiVersions: string[];
+  components: KubeObjectMenuComponents;
+}
+
+export class KubeObjectMenuRegistry {
+  items = observable.array<KubeObjectMenuRegistration>([], { deep: false });
+
+  add(item: KubeObjectMenuRegistration) {
+    this.items.push(item)
+    return () => {
+      this.items.replace(
+        this.items.filter(c => c !== item)
+      )
+    };
+  }
+
+  getItemsForKind(kind: string, apiVersion: string) {
+    return this.items.filter((item) => {
+      return item.kind === kind && item.apiVersions.includes(apiVersion)
+    })
+  }
+}
+
+export const kubeObjectMenuRegistry = new KubeObjectMenuRegistry()

src/renderer/components/+config-autoscalers/hpa-details.tsx

@@ -7,14 +7,14 @@ import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { cssNames } from "../../utils";
-import { HorizontalPodAutoscaler, hpaApi, HpaMetricType, IHpaMetric } from "../../api/endpoints/hpa.api";
+import { HorizontalPodAutoscaler, HpaMetricType, IHpaMetric } from "../../api/endpoints/hpa.api";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { Trans } from "@lingui/macro";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { getDetailsUrl } from "../../navigation";
 import { lookupApiLink } from "../../api/kube-api";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<HorizontalPodAutoscaler> {
 }
@@ -128,6 +128,10 @@ export class HpaDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(hpaApi, {
+kubeObjectDetailRegistry.add({
-  Details: HpaDetails,
+  kind: "HorizontalPodAutoscaler",
-});
+  apiVersions: ["autoscaling/v1"],
+  components: {
+    Details: (props) => <HpaDetails {...props} />
+  }
+})

src/renderer/components/+config-autoscalers/hpa.tsx

@@ -80,20 +80,8 @@ export class HorizontalPodAutoscalers extends React.Component<Props> {
             )
           })
         ]}
-        renderItemMenu={(item: HorizontalPodAutoscaler) => {
-          return <HpaMenu object={item}/>
-        }}
       />
     );
   }
 }
 
-export function HpaMenu(props: KubeObjectMenuProps<HorizontalPodAutoscaler>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(hpaApi, {
-  Menu: HpaMenu,
-})

src/renderer/components/+config-maps/config-map-details.tsx

@@ -11,9 +11,9 @@ import { Button } from "../button";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { configMapsStore } from "./config-maps.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { ConfigMap, configMapApi } from "../../api/endpoints";
+import { ConfigMap } from "../../api/endpoints";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<ConfigMap> {
 }
@@ -94,6 +94,10 @@ export class ConfigMapDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(configMapApi, {
+kubeObjectDetailRegistry.add({
-  Details: ConfigMapDetails
+  kind: "ConfigMap",
-})
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <ConfigMapDetails {...props} />
+  }
+})

src/renderer/components/+config-maps/config-maps.tsx

@@ -50,20 +50,8 @@ export class ConfigMaps extends React.Component<Props> {
           configMap.getKeys().join(", "),
           configMap.getAge(),
         ]}
-        renderItemMenu={(item: ConfigMap) => {
-          return <ConfigMapMenu object={item}/>
-        }}
       />
     );
   }
 }
 
-export function ConfigMapMenu(props: KubeObjectMenuProps<ConfigMap>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(configMapApi, {
-  Menu: ConfigMapMenu,
-})

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets-details.tsx

@@ -3,14 +3,12 @@ import "./pod-disruption-budgets-details.scss";
 import React from "react";
 import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
-import { DrawerItem, DrawerTitle } from "../drawer";
+import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
-import { Table, TableCell, TableHead, TableRow } from "../table";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { PodDisruptionBudget, pdbApi } from "../../api/endpoints";
+import { PodDisruptionBudget } from "../../api/endpoints";
-import { apiManager } from "../../api/api-manager";
-import { KubeObjectStore } from "../../kube-object.store";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<PodDisruptionBudget> {
 }
@@ -56,6 +54,10 @@ export class PodDisruptionBudgetDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(pdbApi, {
+kubeObjectDetailRegistry.add({
-  Details: PodDisruptionBudgetDetails,
+  kind: "PodDisruptionBudget",
-});
+  apiVersions: ["policy/v1beta1"],
+  components: {
+    Details: (props) => <PodDisruptionBudgetDetails {...props} />
+  }
+})

src/renderer/components/+config-pod-disruption-budgets/pod-disruption-budgets.tsx

@@ -64,20 +64,7 @@ export class PodDisruptionBudgets extends React.Component<Props> {
             pdb.getAge(),
           ]
         }}
-        renderItemMenu={(pdb: PodDisruptionBudget) => {
-          return <PodDisruptionBudgetsMenu object={pdb}/>
-        }}
       />
     );
   }
 }
-
-export function PodDisruptionBudgetsMenu(props: KubeObjectMenuProps<PodDisruptionBudget>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(pdbApi, {
-  Menu: PodDisruptionBudgetsMenu,
-})

src/renderer/components/+config-resource-quotas/resource-quota-details.tsx

@@ -6,11 +6,12 @@ import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { cpuUnitsToNumber, cssNames, unitsToBytes, metricUnitsToNumber } from "../../utils";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { ResourceQuota, resourceQuotaApi } from "../../api/endpoints/resource-quota.api";
+import { ResourceQuota } from "../../api/endpoints/resource-quota.api";
 import { LineProgress } from "../line-progress";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
+import { ReplicaSetDetails } from "../+workloads-replicasets";
 
 interface Props extends KubeObjectDetailsProps<ResourceQuota> {
 }
@@ -97,6 +98,10 @@ export class ResourceQuotaDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(resourceQuotaApi, {
+kubeObjectDetailRegistry.add({
-  Details: ResourceQuotaDetails
+  kind: "ResourceQuota",
-})
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <ReplicaSetDetails {...props} />
+  }
+})

src/renderer/components/+config-resource-quotas/resource-quotas.tsx

@@ -48,9 +48,6 @@ export class ResourceQuotas extends React.Component<Props> {
             resourceQuota.getNs(),
             resourceQuota.getAge(),
           ]}
-          renderItemMenu={(item: ResourceQuota) => {
-            return <ResourceQuotaMenu object={item}/>
-          }}
           addRemoveButtons={{
             onAdd: () => AddQuotaDialog.open(),
             addTooltip: <Trans>Create new ResourceQuota</Trans>
@@ -61,13 +58,3 @@ export class ResourceQuotas extends React.Component<Props> {
     );
   }
 }
-
-export function ResourceQuotaMenu(props: KubeObjectMenuProps<ResourceQuota>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  );
-}
-
-apiManager.registerViews(resourceQuotaApi, {
-  Menu: ResourceQuotaMenu,
-})

src/renderer/components/+config-secrets/secret-details.tsx

@@ -13,10 +13,10 @@ import { base64 } from "../../utils";
 import { Icon } from "../icon";
 import { secretsStore } from "./secrets.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { Secret, secretsApi } from "../../api/endpoints";
+import { Secret } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Secret> {
 }
@@ -113,6 +113,10 @@ export class SecretDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(secretsApi, {
+kubeObjectDetailRegistry.add({
-  Details: SecretDetails,
+  kind: "Secret",
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <SecretDetails {...props} />
+  }
 })

src/renderer/components/+config-secrets/secrets.tsx

@@ -61,9 +61,6 @@ export class Secrets extends React.Component<Props> {
             secret.type,
             secret.getAge(),
           ]}
-          renderItemMenu={(item: Secret) => {
-            return <SecretMenu object={item}/>
-          }}
           addRemoveButtons={{
             onAdd: () => AddSecretDialog.open(),
             addTooltip: <Trans>Create new Secret</Trans>
@@ -74,13 +71,3 @@ export class Secrets extends React.Component<Props> {
     );
   }
 }
-
-export function SecretMenu(props: KubeObjectMenuProps<Secret>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(secretsApi, {
-  Menu: SecretMenu,
-})

src/renderer/components/+custom-resources/certmanager.k8s.io/cert-manager.mixins.scss

@@ -1,12 +0,0 @@
-$cert-status-colors: (
-  ready: $colorOk,
-);
-
-@mixin cert-status-bgc {
-  @each $status, $color in $cert-status-colors {
-    &.#{$status} {
-      background: $color;
-      color: white;
-    }
-  }
-}

src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.scss

@@ -1,7 +0,0 @@
-@import "cert-manager.mixins";
-
-.CertificateDetails {
-  .Badge {
-    @include cert-status-bgc;
-  }
-}

src/renderer/components/+custom-resources/certmanager.k8s.io/certificate-details.tsx

@@ -1,142 +0,0 @@
-import "./certificate-details.scss"
-
-import React from "react";
-import moment from "moment"
-import { observer } from "mobx-react";
-import { Link } from "react-router-dom";
-import { Trans } from "@lingui/macro";
-import { DrawerItem, DrawerTitle } from "../../drawer";
-import { Badge } from "../../badge";
-import { KubeEventDetails } from "../../+events/kube-event-details";
-import { KubeObjectDetailsProps } from "../../kube-object";
-import { Certificate, certificatesApi } from "../../../api/endpoints/cert-manager.api";
-import { cssNames } from "../../../utils";
-import { apiManager } from "../../../api/api-manager";
-import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
-
-interface Props extends KubeObjectDetailsProps<Certificate> {
-}
-
-@observer
-export class CertificateDetails extends React.Component<Props> {
-  render() {
-    const { object: cert, className } = this.props;
-    if (!cert) return;
-    const { spec, status } = cert;
-    const { acme, isCA, commonName, secretName, dnsNames, duration, ipAddresses, keyAlgorithm, keySize, organization, renewBefore } = spec;
-    const { lastFailureTime, notAfter } = status;
-    return (
-      <div className={cssNames("CertificateDetails", className)}>
-        <KubeObjectMeta object={cert}/>
-
-        <DrawerItem name={<Trans>Issuer</Trans>}>
-          <Link to={cert.getIssuerDetailsUrl()}>
-            {cert.getIssuerName()}
-          </Link>
-        </DrawerItem>
-
-        <DrawerItem name={<Trans>Secret Name</Trans>}>
-          <Link to={cert.getSecretDetailsUrl()}>
-            {secretName}
-          </Link>
-        </DrawerItem>
-
-        <DrawerItem name="CA">
-          {isCA ? <Trans>Yes</Trans> : <Trans>No</Trans>}
-        </DrawerItem>
-
-        {commonName && (
-          <DrawerItem name={<Trans>Common Name</Trans>}>
-            {commonName}
-          </DrawerItem>
-        )}
-        {dnsNames && (
-          <DrawerItem name={<Trans>DNS names</Trans>} labelsOnly>
-            {dnsNames.map(name => <Badge key={name} label={name}/>)}
-          </DrawerItem>
-        )}
-        {ipAddresses && (
-          <DrawerItem name={<Trans>IP addresses</Trans>}>
-            {ipAddresses.join(", ")}
-          </DrawerItem>
-        )}
-        {organization && (
-          <DrawerItem name={<Trans>Organization</Trans>}>
-            {organization.join(", ")}
-          </DrawerItem>
-        )}
-        {duration && (
-          <DrawerItem name={<Trans>Duration</Trans>}>
-            {duration}
-          </DrawerItem>
-        )}
-        {renewBefore && (
-          <DrawerItem name={<Trans>Renew Before</Trans>}>
-            {renewBefore}
-          </DrawerItem>
-        )}
-        {keySize && (
-          <DrawerItem name={<Trans>Key Size</Trans>}>
-            {keySize}
-          </DrawerItem>
-        )}
-        {keyAlgorithm && (
-          <DrawerItem name={<Trans>Key Algorithm</Trans>}>
-            {keyAlgorithm}
-          </DrawerItem>
-        )}
-
-        <DrawerItem name={<Trans>Not After</Trans>}>
-          {moment(notAfter).format("LLL")}
-        </DrawerItem>
-
-        {lastFailureTime && (
-          <DrawerItem name={<Trans>Last Failure Time</Trans>}>
-            {lastFailureTime}
-          </DrawerItem>
-        )}
-        <DrawerItem name={<Trans>Status</Trans>} labelsOnly>
-          {cert.getConditions().map(({ type, tooltip, isReady }) => {
-            return (
-              <Badge
-                key={type}
-                label={type}
-                tooltip={tooltip}
-                className={cssNames({ [type.toLowerCase()]: isReady })}
-              />
-            )
-          })}
-        </DrawerItem>
-
-        {acme && (
-          <>
-            <DrawerTitle title="ACME"/>
-            {acme.config.map(({ domains, http01, dns01 }, index) => {
-              return (
-                <div key={index} className="acme-config">
-                  <DrawerItem name={<Trans>Domains</Trans>} labelsOnly>
-                    {domains.map(domain => <Badge key={domain} label={domain}/>)}
-                  </DrawerItem>
-                  <DrawerItem name={<Trans>Http01</Trans>}>
-                    {Object.entries(http01).map(([key, val]) => `${key}: ${val}`)[0]}
-                  </DrawerItem>
-                  {dns01 && (
-                    <DrawerItem name={<Trans>DNS Provider</Trans>} labelsOnly>
-                      {dns01.provider}
-                    </DrawerItem>
-                  )}
-                </div>
-              )
-            })}
-          </>
-        )}
-
-        <KubeEventDetails object={cert}/>
-      </div>
-    );
-  }
-}
-
-apiManager.registerViews(certificatesApi, {
-  Details: CertificateDetails
-})

src/renderer/components/+custom-resources/certmanager.k8s.io/certificates.scss

@@ -1,26 +0,0 @@
-@import "cert-manager.mixins";
-
-.Certificates {
-  .TableCell {
-    &.name {
-      flex: 1.2;
-    }
-
-    &.type {
-      flex: .5;
-    }
-
-    &.status {
-      flex: .5;
-      @include table-cell-labels-offsets;
-
-      .Badge {
-        @include cert-status-bgc;
-      }
-    }
-
-    &.age {
-      flex: .5;
-    }
-  }
-}

src/renderer/components/+custom-resources/certmanager.k8s.io/certificates.tsx

@@ -1,105 +0,0 @@
-import "./certificates.scss"
-
-import React from "react";
-import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
-import { KubeObjectMenu, KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
-import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../../kube-object";
-import { Certificate, certificatesApi } from "../../../api/endpoints/cert-manager.api";
-import { cssNames, stopPropagation } from "../../../utils";
-import { Link } from "react-router-dom";
-import { Badge } from "../../badge";
-import { apiManager } from "../../../api/api-manager";
-import { Spinner } from "../../spinner";
-
-enum sortBy {
-  name = "name",
-  namespace = "namespace",
-  age = "age",
-  commonName = "common-name",
-  secretName = "secret",
-  issuer = "issuer",
-  type = "type",
-}
-
-@observer
-export class Certificates extends React.Component<KubeObjectListLayoutProps> {
-  render() {
-    const { store = apiManager.getStore(certificatesApi), ...layoutProps } = this.props;
-    if (!store) {
-      return <Spinner center/>
-    }
-    return (
-      <KubeObjectListLayout
-        {...layoutProps}
-        store={store}
-        className="Certificates"
-        sortingCallbacks={{
-          [sortBy.name]: (item: Certificate) => item.getName(),
-          [sortBy.namespace]: (item: Certificate) => item.getNs(),
-          [sortBy.secretName]: (item: Certificate) => item.getSecretName(),
-          [sortBy.commonName]: (item: Certificate) => item.getCommonName(),
-          [sortBy.issuer]: (item: Certificate) => item.getIssuerName(),
-          [sortBy.type]: (item: Certificate) => item.getType(),
-        }}
-        searchFilters={[
-          (item: Certificate) => item.getSearchFields(),
-          (item: Certificate) => item.getSecretName(),
-          (item: Certificate) => item.getCommonName(),
-          (item: Certificate) => item.getIssuerName(),
-          (item: Certificate) => item.getType(),
-        ]}
-        renderHeaderTitle={<Trans>Certificates</Trans>}
-        renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Common Name</Trans>, className: "common-name", sortBy: sortBy.type },
-          { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
-          { title: <Trans>Issuer</Trans>, className: "issuer", sortBy: sortBy.issuer },
-          { title: <Trans>Secret</Trans>, className: "secret", sortBy: sortBy.secretName },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Status</Trans>, className: "status" },
-        ]}
-        renderTableContents={(cert: Certificate) => {
-          return [
-            cert.getName(),
-            cert.getNs(),
-            cert.getCommonName(),
-            cert.getType(),
-            <Link to={cert.getIssuerDetailsUrl()} onClick={stopPropagation}>
-              {cert.getIssuerName()}
-            </Link>,
-            <Link to={cert.getSecretDetailsUrl()} onClick={stopPropagation}>
-              {cert.getSecretName()}
-            </Link>,
-            cert.getAge(),
-            cert.getConditions().map(({ type, tooltip, isReady }) => {
-              return (
-                <Badge
-                  key={type}
-                  label={type}
-                  tooltip={tooltip}
-                  className={cssNames({ [type.toLowerCase()]: isReady })}
-                />
-              )
-            })
-          ]
-        }}
-        renderItemMenu={(item: Certificate) => {
-          return <CertificateMenu object={item}/>
-        }}
-      />
-    );
-  }
-}
-
-export function CertificateMenu(props: KubeObjectMenuProps<Certificate>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(certificatesApi, {
-  List: Certificates,
-  Menu: CertificateMenu
-})

src/renderer/components/+custom-resources/certmanager.k8s.io/index.ts

@@ -1,4 +0,0 @@
-export * from "./certificates"
-export * from "./certificate-details"
-export * from "./issuers"
-export * from "./issuer-details"

src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.scss

@@ -1,7 +0,0 @@
-@import "cert-manager.mixins";
-
-.IssuerDetails {
-  .Badge {
-    @include cert-status-bgc;
-  }
-}

src/renderer/components/+custom-resources/certmanager.k8s.io/issuer-details.tsx

@@ -1,175 +0,0 @@
-import "./issuer-details.scss"
-
-import React from "react";
-import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
-import { Link } from "react-router-dom";
-import { DrawerItem, DrawerTitle } from "../../drawer";
-import { Badge } from "../../badge";
-import { KubeEventDetails } from "../../+events/kube-event-details";
-import { KubeObjectDetailsProps } from "../../kube-object";
-import { clusterIssuersApi, Issuer, issuersApi } from "../../../api/endpoints/cert-manager.api";
-import { autobind, cssNames } from "../../../utils";
-import { getDetailsUrl } from "../../../navigation";
-import { secretsApi } from "../../../api/endpoints";
-import { apiManager } from "../../../api/api-manager";
-import { KubeObjectMeta } from "../../kube-object/kube-object-meta";
-
-interface Props extends KubeObjectDetailsProps<Issuer> {
-}
-
-@observer
-export class IssuerDetails extends React.Component<Props> {
-  @autobind()
-  renderSecretLink(secretName: string) {
-    const namespace = this.props.object.getNs();
-    if (!namespace) {
-      return secretName;
-    }
-    const secretDetailsUrl = getDetailsUrl(secretsApi.getUrl({
-      namespace: namespace,
-      name: secretName,
-    }));
-    return (
-      <Link to={secretDetailsUrl}>
-        {secretName}
-      </Link>
-    )
-  }
-
-  render() {
-    const { object: issuer, className } = this.props;
-    if (!issuer) return;
-    const { renderSecretLink } = this;
-    const { spec: { acme, ca, vault, venafi }, status } = issuer;
-    return (
-      <div className={cssNames("IssuerDetails", className)}>
-        <KubeObjectMeta object={issuer}/>
-
-        <DrawerItem name={<Trans>Type</Trans>}>
-          {issuer.getType()}
-        </DrawerItem>
-
-        <DrawerItem name={<Trans>Status</Trans>} labelsOnly>
-          {issuer.getConditions().map(({ type, tooltip, isReady }) => {
-            return (
-              <Badge
-                key={type}
-                label={type}
-                tooltip={tooltip}
-                className={cssNames({ [type.toLowerCase()]: isReady })}
-              />
-            )
-          })}
-        </DrawerItem>
-
-        {acme && (() => {
-          const { email, server, skipTLSVerify, privateKeySecretRef, solvers } = acme;
-          return (
-            <>
-              <DrawerTitle title="ACME"/>
-              <DrawerItem name={<Trans>E-mail</Trans>}>
-                {email}
-              </DrawerItem>
-              <DrawerItem name={<Trans>Server</Trans>}>
-                {server}
-              </DrawerItem>
-              {status.acme && (
-                <DrawerItem name={<Trans>Status URI</Trans>}>
-                  {status.acme.uri}
-                </DrawerItem>
-              )}
-              <DrawerItem name={<Trans>Private Key Secret</Trans>}>
-                {renderSecretLink(privateKeySecretRef.name)}
-              </DrawerItem>
-              <DrawerItem name={<Trans>Skip TLS Verify</Trans>}>
-                {skipTLSVerify ? <Trans>Yes</Trans> : <Trans>No</Trans>}
-              </DrawerItem>
-            </>
-          )
-        })()}
-
-        {ca && (() => {
-          const { secretName } = ca;
-          return (
-            <>
-              <DrawerTitle title="CA"/>
-              <DrawerItem name={<Trans>Secret Name</Trans>}>
-                {renderSecretLink(secretName)}
-              </DrawerItem>
-            </>
-          )
-        })()}
-
-        {vault && (() => {
-          const { auth, caBundle, path, server } = vault;
-          const { path: authPath, roleId, secretRef } = auth.appRole;
-          return (
-            <>
-              <DrawerTitle title="Vault"/>
-              <DrawerItem name={<Trans>Server</Trans>}>
-                {server}
-              </DrawerItem>
-              <DrawerItem name={<Trans>Path</Trans>}>
-                {path}
-              </DrawerItem>
-              <DrawerItem name={<Trans>CA Bundle</Trans>} labelsOnly>
-                <Badge label={caBundle}/>
-              </DrawerItem>
-
-              <DrawerTitle title={<Trans>Auth App Role</Trans>}/>
-              <DrawerItem name={<Trans>Path</Trans>}>
-                {authPath}
-              </DrawerItem>
-              <DrawerItem name={<Trans>Role ID</Trans>}>
-                {roleId}
-              </DrawerItem>
-              {secretRef && (
-                <DrawerItem name={<Trans>Secret</Trans>}>
-                  {renderSecretLink(secretRef.name)}
-                </DrawerItem>
-              )}
-            </>
-          )
-        })()}
-
-        {venafi && (() => {
-          const { zone, cloud, tpp } = venafi;
-          return (
-            <>
-              <DrawerTitle title="CA"/>
-              <DrawerItem name={<Trans>Zone</Trans>}>
-                {zone}
-              </DrawerItem>
-              {cloud && (
-                <DrawerItem name={<Trans>Cloud API Token Secret</Trans>}>
-                  {renderSecretLink(cloud.apiTokenSecretRef.name)}
-                </DrawerItem>
-              )}
-              {tpp && (
-                <>
-                  <DrawerTitle title="TPP"/>
-                  <DrawerItem name={<Trans>URL</Trans>}>
-                    {tpp.url}
-                  </DrawerItem>
-                  <DrawerItem name={<Trans>CA Bundle</Trans>} labelsOnly>
-                    <Badge label={tpp.caBundle}/>
-                  </DrawerItem>
-                  <DrawerItem name={<Trans>Credentials Ref</Trans>}>
-                    {renderSecretLink(tpp.credentialsRef.name)}
-                  </DrawerItem>
-                </>
-              )}
-            </>
-          )
-        })()}
-
-        <KubeEventDetails object={issuer}/>
-      </div>
-    );
-  }
-}
-
-apiManager.registerViews([issuersApi, clusterIssuersApi], {
-  Details: IssuerDetails
-})

src/renderer/components/+custom-resources/certmanager.k8s.io/issuers.scss

@@ -1,27 +0,0 @@
-@import "cert-manager.mixins";
-
-.Issuers {
-  .TableCell {
-    &.name {
-      flex: 1.2;
-    }
-
-    &.labels {
-      flex: 2;
-      @include table-cell-labels-offsets;
-    }
-
-    &.status {
-      flex: .5;
-      @include table-cell-labels-offsets;
-
-      .Badge {
-        @include cert-status-bgc;
-      }
-    }
-
-    &.age {
-      flex: .5;
-    }
-  }
-}

src/renderer/components/+custom-resources/certmanager.k8s.io/issuers.tsx

@@ -1,103 +0,0 @@
-import "./issuers.scss"
-
-import React from "react";
-import { observer } from "mobx-react";
-import { Trans } from "@lingui/macro";
-import { KubeObjectMenu, KubeObjectMenuProps } from "../../kube-object/kube-object-menu";
-import { KubeObjectListLayout, KubeObjectListLayoutProps } from "../../kube-object";
-import { clusterIssuersApi, Issuer, issuersApi } from "../../../api/endpoints/cert-manager.api";
-import { cssNames } from "../../../utils";
-import { Badge } from "../../badge";
-import { Spinner } from "../../spinner";
-import { apiManager } from "../../../api/api-manager";
-
-enum sortBy {
-  name = "name",
-  namespace = "namespace",
-  type = "type",
-  labels = "labels",
-  age = "age",
-}
-
-@observer
-export class ClusterIssuers extends React.Component<KubeObjectListLayoutProps> {
-  render() {
-    const store = apiManager.getStore(clusterIssuersApi);
-    return (
-      <Issuers
-        {...this.props}
-        isClusterScoped={true}
-        store={store}
-        renderHeaderTitle={<Trans>Cluster Issuers</Trans>}
-      />
-    )
-  }
-}
-
-@observer
-export class Issuers extends React.Component<KubeObjectListLayoutProps> {
-  render() {
-    const { store = apiManager.getStore(issuersApi), ...layoutProps } = this.props;
-    if (!store) {
-      return <Spinner center/>
-    }
-    return (
-      <KubeObjectListLayout
-        store={store}
-        renderHeaderTitle={<Trans>Issuers</Trans>}
-        {...layoutProps}
-        className="Issuers"
-        sortingCallbacks={{
-          [sortBy.name]: (item: Issuer) => item.getName(),
-          [sortBy.namespace]: (item: Issuer) => item.getNs(),
-          [sortBy.type]: (item: Issuer) => item.getType(),
-          [sortBy.labels]: (item: Issuer) => item.getLabels(),
-          [sortBy.age]: (item: Issuer) => item.metadata.creationTimestamp,
-        }}
-        searchFilters={[
-          (item: Issuer) => item.getSearchFields(),
-          (item: Issuer) => item.getType(),
-        ]}
-        renderTableHeader={[
-          { title: <Trans>Name</Trans>, className: "name", sortBy: sortBy.name },
-          { title: <Trans>Namespace</Trans>, className: "namespace", sortBy: sortBy.namespace },
-          { title: <Trans>Labels</Trans>, className: "labels", sortBy: sortBy.labels },
-          { title: <Trans>Type</Trans>, className: "type", sortBy: sortBy.type },
-          { title: <Trans>Age</Trans>, className: "age", sortBy: sortBy.age },
-          { title: <Trans>Status</Trans>, className: "status" },
-        ]}
-        renderTableContents={(issuer: Issuer) => [
-          issuer.getName(),
-          issuer.getNs(),
-          issuer.getLabels().map(label => <Badge key={label} label={label} title={label}/>),
-          issuer.getType(),
-          issuer.getAge(),
-          issuer.getConditions().map(({ type, tooltip, isReady }) => {
-            return (
-              <Badge
-                key={type}
-                label={type}
-                tooltip={tooltip}
-                className={cssNames({ [type.toLowerCase()]: isReady })}
-              />
-            )
-          })
-        ]}
-        renderItemMenu={(item: Issuer) => {
-          return <IssuerMenu object={item}/>
-        }}
-      />
-    );
-  }
-}
-
-export function IssuerMenu(props: KubeObjectMenuProps<Issuer>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews([issuersApi, clusterIssuersApi], {
-  List: Issuers,
-  Menu: IssuerMenu,
-})

src/renderer/components/+custom-resources/crd-details.tsx

@@ -14,6 +14,7 @@ import { KubeObjectDetailsProps } from "../kube-object";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { Input } from "../input";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<CustomResourceDefinition> {
 }
@@ -133,6 +134,10 @@ export class CRDDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(crdApi, {
+kubeObjectDetailRegistry.add({
-  Details: CRDDetails
+  kind: "CustomResourceDefinition",
-})
+  apiVersions: ["apiextensions.k8s.io/v1", "apiextensions.k8s.io/v1beta1"],
+  components: {
+    Details: (props) => <CRDDetails {...props} />
+  }
+})

src/renderer/components/+custom-resources/crd-list.tsx

@@ -8,9 +8,7 @@ import { Link } from "react-router-dom";
 import { stopPropagation } from "../../utils";
 import { KubeObjectListLayout } from "../kube-object";
 import { crdStore } from "./crd.store";
-import { apiManager } from "../../api/api-manager";
+import { CustomResourceDefinition } from "../../api/endpoints/crd.api";
-import { crdApi, CustomResourceDefinition } from "../../api/endpoints/crd.api";
-import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { Select, SelectOption } from "../select";
 import { navigation, setQueryParams } from "../../navigation";
 import { Icon } from "../icon";
@@ -103,20 +101,8 @@ export class CrdList extends React.Component {
             crd.getAge(),
           ]
         }}
-        renderItemMenu={(item: CustomResourceDefinition) => {
-          return <CRDMenu object={item}/>
-        }}
       />
     )
   }
 }
 
-export function CRDMenu(props: KubeObjectMenuProps<CustomResourceDefinition>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(crdApi, {
-  Menu: CRDMenu,
-});

src/renderer/components/+custom-resources/crd-resource-details.tsx

@@ -9,7 +9,6 @@ import { cssNames } from "../../utils";
 import { Badge } from "../badge";
 import { DrawerItem } from "../drawer";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { apiManager } from "../../api/api-manager";
 import { crdStore } from "./crd.store";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { Input } from "../input";
@@ -39,20 +38,13 @@ export class CrdResourceDetails extends React.Component<Props> {
     return crdStore.getByObject(this.props.object);
   }
 
-  @computed get CustomDetailsViews() {
-    return apiManager.getViews(this.props.object.selfLink).Details;
-  }
-
   render() {
     const { object } = this.props;
-    const { crd, CustomDetailsViews } = this;
+    const { crd } = this;
     if (!object || !crd) return null;
     const className = cssNames("CrdResourceDetails", crd.getResourceKind());
     const extraColumns = crd.getPrinterColumns();
     const showStatus = !extraColumns.find(column => column.name == "Status") && object.status?.conditions;
-    if (CustomDetailsViews) {
-      return <CustomDetailsViews className={className} object={object}/>
-    }
     return (
       <div className={className}>
         <KubeObjectMeta object={object}/>

src/renderer/components/+custom-resources/crd-resources.tsx

@@ -7,7 +7,6 @@ import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeObject } from "../../api/kube-object";
-import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { ICRDRouteParams } from "./crd.route";
 import { autorun, computed } from "mobx";
 import { crdStore } from "./crd.store";
@@ -59,9 +58,7 @@ export class CrdResources extends React.Component<Props> {
     extraColumns.forEach(column => {
       sortingCallbacks[column.name] = (item: KubeObject) => jsonPath.query(item, column.jsonPath.slice(1))
     })
-    // todo: merge extra columns and other params to predefined view
+    const ListView = KubeObjectListLayout;
-    const { List } = apiManager.getViews(crd.getResourceApiBase());
-    const ListView = List || KubeObjectListLayout;
     return (
       <ListView
         className="CrdResources"
@@ -93,20 +90,7 @@ export class CrdResources extends React.Component<Props> {
           }),
           crdInstance.getAge(),
         ]}
-        renderItemMenu={(item: KubeObject) => {
-          return <CrdResourceMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function CrdResourceMenu(props: KubeObjectMenuProps<KubeObject>) {
-  const { Menu } = apiManager.getViews(props.object.selfLink);
-  if (Menu) {
-    return <Menu {...props}/>
-  }
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}

src/renderer/components/+custom-resources/index.ts

@@ -3,6 +3,3 @@ export * from "./crd-list";
 export * from "./crd-details";
 export * from "./crd-resources";
 export * from "./crd-resource-details";
-
-// customized crd-s
-export * from "./certmanager.k8s.io"

src/renderer/components/+events/event-details.tsx

@@ -7,12 +7,12 @@ import { DrawerItem, DrawerTitle } from "../drawer";
 import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { eventApi, KubeEvent } from "../../api/endpoints/events.api";
+import { KubeEvent } from "../../api/endpoints/events.api";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { getDetailsUrl } from "../../navigation";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { lookupApiLink } from "../../api/kube-api";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<KubeEvent> {
 }
@@ -74,6 +74,10 @@ export class EventDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(eventApi, {
+kubeObjectDetailRegistry.add({
-  Details: EventDetails,
+  kind: "Event",
-});
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <EventDetails {...props}/>
+  }
+})

src/renderer/components/+namespaces/namespace-details.tsx

@@ -6,14 +6,14 @@ import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { DrawerItem } from "../drawer";
 import { cssNames } from "../../utils";
-import { Namespace, namespacesApi } from "../../api/endpoints";
+import { Namespace } from "../../api/endpoints";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { Link } from "react-router-dom";
 import { getDetailsUrl } from "../../navigation";
 import { Spinner } from "../spinner";
 import { resourceQuotaStore } from "../+config-resource-quotas/resource-quotas.store";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Namespace> {
 }
@@ -56,6 +56,10 @@ export class NamespaceDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(namespacesApi, {
+kubeObjectDetailRegistry.add({
-  Details: NamespaceDetails
+  kind: "Namespace",
-});
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <NamespaceDetails {...props} />
+  }
+})

src/renderer/components/+namespaces/namespaces.tsx

@@ -53,9 +53,6 @@ export class Namespaces extends React.Component<Props> {
             item.getAge(),
             { title: item.getStatus(), className: item.getStatus().toLowerCase() },
           ]}
-          renderItemMenu={(item: Namespace) => {
-            return <NamespaceMenu object={item}/>
-          }}
           addRemoveButtons={{
             addTooltip: <Trans>Add Namespace</Trans>,
             onAdd: () => AddNamespaceDialog.open(),
@@ -69,13 +66,3 @@ export class Namespaces extends React.Component<Props> {
     )
   }
 }
-
-export function NamespaceMenu(props: KubeObjectMenuProps<Namespace>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(namespacesApi, {
-  Menu: NamespaceMenu,
-});

src/renderer/components/+network-endpoints/endpoint-details.tsx

@@ -2,16 +2,15 @@ import "./endpoint-details.scss"
 
 import React from "react";
 import { observer } from "mobx-react";
-import { t, Trans } from "@lingui/macro";
+import { Trans } from "@lingui/macro";
-import { DrawerItem, DrawerTitle } from "../drawer";
+import { DrawerTitle } from "../drawer";
-import { Badge } from "../badge";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { Endpoint, endpointApi } from "../../api/endpoints";
+import { Endpoint } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { EndpointSubsetList } from "./endpoint-subset-list";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Endpoint> {
 }
@@ -39,6 +38,10 @@ export class EndpointDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(endpointApi, {
+kubeObjectDetailRegistry.add({
-  Details: EndpointDetails,
+  kind: "Endpoints",
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <EndpointDetails {...props} />
+  }
 })

src/renderer/components/+network-endpoints/endpoints.tsx

@@ -47,9 +47,6 @@ export class Endpoints extends React.Component<Props> {
           endpoint.toString(),
           endpoint.getAge(),
         ]}
-        renderItemMenu={(item: Endpoint) => {
-          return <EndpointMenu object={item}/>
-        }}
         tableProps={{
           customRowHeights: (item: Endpoint, lineHeight, paddings) => {
             const lines = item.getEndpointSubsets().length || 1;
@@ -60,13 +57,3 @@ export class Endpoints extends React.Component<Props> {
     )
   }
 }
-
-export function EndpointMenu(props: KubeObjectMenuProps<Endpoint>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(endpointApi, {
-  Menu: EndpointMenu
-})

src/renderer/components/+network-ingresses/ingress-details.tsx

@@ -5,15 +5,15 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { reaction } from "mobx";
 import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
-import { Ingress, ILoadBalancerIngress, ingressApi } from "../../api/endpoints";
+import { Ingress, ILoadBalancerIngress } from "../../api/endpoints";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { ingressStore } from "./ingress.store";
 import { ResourceMetrics } from "../resource-metrics";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { IngressCharts } from "./ingress-charts";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Ingress> {
 }
@@ -134,6 +134,10 @@ export class IngressDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(ingressApi, {
+kubeObjectDetailRegistry.add({
-  Details: IngressDetails,
+  kind: "Ingress",
-})
+  apiVersions: ["extensions/v1beta1"],
+  components: {
+    Details: (props) => <IngressDetails {...props} />
+  }
+})

src/renderer/components/+network-ingresses/ingresses.tsx

@@ -48,9 +48,6 @@ export class Ingresses extends React.Component<Props> {
           ingress.getRoutes().map(route => <p key={route}>{route}</p>),
           ingress.getAge(),
         ]}
-        renderItemMenu={(item: Ingress) => {
-          return <IngressMenu object={item}/>
-        }}
         tableProps={{
           customRowHeights: (item: Ingress, lineHeight, paddings) => {
             const lines = item.getRoutes().length || 1;
@@ -61,13 +58,3 @@ export class Ingresses extends React.Component<Props> {
     )
   }
 }
-
-export function IngressMenu(props: KubeObjectMenuProps<Ingress>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(ingressApi, {
-  Menu: IngressMenu
-})

src/renderer/components/+network-policies/network-policies.tsx

@@ -47,20 +47,7 @@ export class NetworkPolicies extends React.Component<Props> {
           item.getTypes().join(", "),
           item.getAge(),
         ]}
-        renderItemMenu={(item: NetworkPolicy) => {
-          return <NetworkPolicyMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function NetworkPolicyMenu(props: KubeObjectMenuProps<NetworkPolicy>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(networkPolicyApi, {
-  Menu: NetworkPolicyMenu,
-})

src/renderer/components/+network-policies/network-policy-details.tsx

@@ -4,15 +4,15 @@ import get from "lodash/get";
 import React, { Fragment } from "react";
 import { t, Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
-import { IPolicyEgress, IPolicyIngress, IPolicyIpBlock, IPolicySelector, NetworkPolicy, networkPolicyApi } from "../../api/endpoints/network-policy.api";
+import { IPolicyEgress, IPolicyIngress, IPolicyIpBlock, IPolicySelector, NetworkPolicy } from "../../api/endpoints/network-policy.api";
 import { Badge } from "../badge";
 import { SubTitle } from "../layout/sub-title";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { observer } from "mobx-react";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { _i18n } from "../../i18n";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<NetworkPolicy> {
 }
@@ -144,6 +144,10 @@ export class NetworkPolicyDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(networkPolicyApi, {
+kubeObjectDetailRegistry.add({
-  Details: NetworkPolicyDetails
+  kind: "NetworkPolicy",
-})
+  apiVersions: ["networking.k8s.io/v1"],
+  components: {
+    Details: (props) => <NetworkPolicyDetails {...props} />
+  }
+})

src/renderer/components/+network-services/service-details.tsx

@@ -7,13 +7,13 @@ import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { Service, serviceApi, endpointApi } from "../../api/endpoints";
+import { Service, endpointApi } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { ServicePortComponent } from "./service-port-component";
 import { endpointStore } from "../+network-endpoints/endpoints.store";
 import { ServiceDetailsEndpoint } from "./service-details-endpoint";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Service> {
 }
@@ -85,6 +85,10 @@ export class ServiceDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(serviceApi, {
+kubeObjectDetailRegistry.add({
-  Details: ServiceDetails,
+  kind: "Service",
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <ServiceDetails {...props} />
+  }
 })

src/renderer/components/+network-services/services.tsx

@@ -70,20 +70,7 @@ export class Services extends React.Component<Props> {
           service.getAge(),
           { title: service.getStatus(), className: service.getStatus().toLowerCase() },
         ]}
-        renderItemMenu={(item: Service) => {
-          return <ServiceMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function ServiceMenu(props: KubeObjectMenuProps<Service>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(serviceApi, {
-  Menu: ServiceMenu
-})

src/renderer/components/+nodes/index.ts

@@ -1,4 +1,3 @@
 export * from "./nodes"
 export * from "./nodes.route"
-export * from "./node-menu"
+export * from "./node-details"
-export * from "./node-details"

src/renderer/components/+nodes/node-details.tsx

@@ -11,13 +11,13 @@ import { nodesStore } from "./nodes.store";
 import { ResourceMetrics } from "../resource-metrics";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { Node, nodesApi } from "../../api/endpoints";
+import { Node } from "../../api/endpoints";
 import { NodeCharts } from "./node-charts";
 import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { KubeEventDetails } from "../+events/kube-event-details";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Node> {
 }
@@ -155,6 +155,10 @@ export class NodeDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(nodesApi, {
+kubeObjectDetailRegistry.add({
-  Details: NodeDetails,
+  kind: "Node",
-});
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <NodeDetails {...props} />
+  }
+})

src/renderer/components/+nodes/node-menu.tsx

@@ -1,78 +0,0 @@
-import React from "react";
-import { t, Trans } from "@lingui/macro";
-import { Node } from "../../api/endpoints/nodes.api";
-import { createTerminalTab, terminalStore } from "../dock/terminal.store";
-import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
-import { ConfirmDialog } from "../confirm-dialog";
-import { MenuItem } from "../menu";
-import { Icon } from "../icon";
-import { _i18n } from "../../i18n";
-import { hideDetails } from "../../navigation";
-
-export function NodeMenu(props: KubeObjectMenuProps<Node>) {
-  const { object: node, toolbar } = props;
-  if (!node) return null;
-  const nodeName = node.getName();
-
-  const sendToTerminal = (command: string) => {
-    terminalStore.sendCommand(command, {
-      enter: true,
-      newTab: true,
-    });
-    hideDetails();
-  }
-
-  const shell = () => {
-    createTerminalTab({
-      title: _i18n._(t`Node`) + `: ${nodeName}`,
-      node: nodeName,
-    });
-    hideDetails();
-  }
-
-  const cordon = () => {
-    sendToTerminal(`kubectl cordon ${nodeName}`);
-  }
-
-  const unCordon = () => {
-    sendToTerminal(`kubectl uncordon ${nodeName}`)
-  }
-
-  const drain = () => {
-    const command = `kubectl drain ${nodeName} --delete-local-data --ignore-daemonsets --force`;
-    ConfirmDialog.open({
-      ok: () => sendToTerminal(command),
-      labelOk: _i18n._(t`Drain Node`),
-      message: (
-        <p>
-          <Trans>Are you sure you want to drain <b>{nodeName}</b>?</Trans>
-        </p>
-      ),
-    })
-  }
-
-  return (
-    <KubeObjectMenu {...props}>
-      <MenuItem onClick={shell}>
-        <Icon svg="ssh" interactive={toolbar} title={_i18n._(t`Node shell`)}/>
-        <span className="title"><Trans>Shell</Trans></span>
-      </MenuItem>
-      {!node.isUnschedulable() && (
-        <MenuItem onClick={cordon}>
-          <Icon material="pause_circle_filled" title={_i18n._(t`Cordon`)} interactive={toolbar}/>
-          <span className="title"><Trans>Cordon</Trans></span>
-        </MenuItem>
-      )}
-      {node.isUnschedulable() && (
-        <MenuItem onClick={unCordon}>
-          <Icon material="play_circle_filled" title={_i18n._(t`Uncordon`)} interactive={toolbar}/>
-          <span className="title"><Trans>Uncordon</Trans></span>
-        </MenuItem>
-      )}
-      <MenuItem onClick={drain}>
-        <Icon material="delete_sweep" title={_i18n._(t`Drain`)} interactive={toolbar}/>
-        <span className="title"><Trans>Drain</Trans></span>
-      </MenuItem>
-    </KubeObjectMenu>
-  );
-}

src/renderer/components/+nodes/nodes.tsx

@@ -9,15 +9,13 @@ import { nodesStore } from "./nodes.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { KubeObjectListLayout } from "../kube-object";
 import { INodesRouteParams } from "./nodes.route";
-import { Node, nodesApi } from "../../api/endpoints/nodes.api";
+import { Node } from "../../api/endpoints/nodes.api";
-import { NodeMenu } from "./node-menu";
 import { LineProgress } from "../line-progress";
 import { _i18n } from "../../i18n";
 import { bytesToUnits } from "../../utils/convertMemory";
 import { Tooltip, TooltipPosition } from "../tooltip";
 import kebabCase from "lodash/kebabCase";
 import upperFirst from "lodash/upperFirst";
-import { apiManager } from "../../api/api-manager";
 
 enum sortBy {
   name = "name",
@@ -178,15 +176,8 @@ export class Nodes extends React.Component<Props> {
               this.renderConditions(node),
             ]
           }}
-          renderItemMenu={(item: Node) => {
-            return <NodeMenu object={item}/>
-          }}
         />
       </TabLayout>
     )
   }
 }
-
-apiManager.registerViews(nodesApi, {
-  Menu: NodeMenu,
-});

src/renderer/components/+pod-security-policies/pod-security-policies.tsx

@@ -50,20 +50,7 @@ export class PodSecurityPolicies extends React.Component {
             item.getAge(),
           ]
         }}
-        renderItemMenu={(item: PodSecurityPolicy) => {
-          return <PodSecurityPolicyMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function PodSecurityPolicyMenu(props: KubeObjectMenuProps<PodSecurityPolicy>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(pspApi, {
-  Menu: PodSecurityPolicyMenu,
-})

src/renderer/components/+pod-security-policies/pod-security-policy-details.tsx

@@ -5,11 +5,11 @@ import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { PodSecurityPolicy, pspApi } from "../../api/endpoints";
+import { PodSecurityPolicy } from "../../api/endpoints";
 import { Badge } from "../badge";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<PodSecurityPolicy> {
 }
@@ -209,6 +209,10 @@ export class PodSecurityPolicyDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(pspApi, {
+kubeObjectDetailRegistry.add({
-  Details: PodSecurityPolicyDetails,
+  kind: "PodSecurityPolicy",
-});
+  apiVersions: ["policy/v1beta1"],
+  components: {
+    Details: (props) => <PodSecurityPolicyDetails {...props}/>
+  }
+})

src/renderer/components/+storage-classes/storage-class-details.tsx

@@ -8,10 +8,10 @@ import { Badge } from "../badge";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { observer } from "mobx-react";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { StorageClass, storageClassApi } from "../../api/endpoints";
+import { StorageClass } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<StorageClass> {
 }
@@ -62,6 +62,10 @@ export class StorageClassDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(storageClassApi, {
+kubeObjectDetailRegistry.add({
-  Details: StorageClassDetails
+  kind: "StorageClass",
-})
+  apiVersions: ["storage.k8s.io/v1"],
+  components: {
+    Details: (props) => <StorageClassDetails {...props} />
+  }
+})

src/renderer/components/+storage-classes/storage-classes.tsx

@@ -53,20 +53,7 @@ export class StorageClasses extends React.Component<Props> {
           storageClass.isDefault() ? <Trans>Yes</Trans> : null,
           storageClass.getAge(),
         ]}
-        renderItemMenu={(item: StorageClass) => {
-          return <StorageClassMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function StorageClassMenu(props: KubeObjectMenuProps<StorageClass>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(storageClassApi, {
-  Menu: StorageClassMenu,
-})

src/renderer/components/+storage-volume-claims/volume-claim-details.tsx

@@ -14,10 +14,10 @@ import { getDetailsUrl } from "../../navigation";
 import { ResourceMetrics } from "../resource-metrics";
 import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { PersistentVolumeClaim, pvcApi } from "../../api/endpoints";
+import { PersistentVolumeClaim } from "../../api/endpoints";
 import { _i18n } from "../../i18n";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<PersistentVolumeClaim> {
 }
@@ -95,6 +95,10 @@ export class PersistentVolumeClaimDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(pvcApi, {
+kubeObjectDetailRegistry.add({
-  Details: PersistentVolumeClaimDetails,
+  kind: "PersistentVolumeClaim",
-})
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <PersistentVolumeClaimDetails {...props} />
+  }
+})

src/renderer/components/+storage-volume-claims/volume-claims.tsx

@@ -82,20 +82,7 @@ export class PersistentVolumeClaims extends React.Component<Props> {
             { title: pvc.getStatus(), className: pvc.getStatus().toLowerCase() },
           ]
         }}
-        renderItemMenu={(item: PersistentVolumeClaim) => {
-          return <PersistentVolumeClaimMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function PersistentVolumeClaimMenu(props: KubeObjectMenuProps<PersistentVolumeClaim>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(pvcApi, {
-  Menu: PersistentVolumeClaimMenu,
-})

src/renderer/components/+storage-volumes/volume-details.tsx

@@ -9,10 +9,10 @@ import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { getDetailsUrl } from "../../navigation";
-import { PersistentVolume, persistentVolumeApi, pvcApi } from "../../api/endpoints";
+import { PersistentVolume, pvcApi } from "../../api/endpoints";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<PersistentVolume> {
 }
@@ -103,6 +103,10 @@ export class PersistentVolumeDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(persistentVolumeApi, {
+kubeObjectDetailRegistry.add({
-  Details: PersistentVolumeDetails
+  kind: "PersistentVolume",
-})
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <PersistentVolumeDetails {...props} />
+  }
+})

src/renderer/components/+storage-volumes/volumes.tsx

@@ -72,20 +72,7 @@ export class PersistentVolumes extends React.Component<Props> {
             { title: volume.getStatus(), className: volume.getStatus().toLowerCase() }
           ]
         }}
-        renderItemMenu={(item: PersistentVolume) => {
-          return <PersistentVolumeMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function PersistentVolumeMenu(props: KubeObjectMenuProps<PersistentVolume>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(persistentVolumeApi, {
-  Menu: PersistentVolumeMenu,
-})

src/renderer/components/+user-management-roles-bindings/role-binding-details.tsx

@@ -3,7 +3,7 @@ import "./role-binding-details.scss"
 import React from "react";
 import { t, Trans } from "@lingui/macro";
 import { AddRemoveButtons } from "../add-remove-buttons";
-import { clusterRoleBindingApi, IRoleBindingSubject, RoleBinding, roleBindingApi } from "../../api/endpoints";
+import { IRoleBindingSubject, RoleBinding } from "../../api/endpoints";
 import { autobind, prevDefault } from "../../utils";
 import { Table, TableCell, TableHead, TableRow } from "../table";
 import { ConfirmDialog } from "../confirm-dialog";
@@ -15,8 +15,8 @@ import { roleBindingsStore } from "./role-bindings.store";
 import { AddRoleBindingDialog } from "./add-role-binding-dialog";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { _i18n } from "../../i18n";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<RoleBinding> {
 }
@@ -125,6 +125,17 @@ export class RoleBindingDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews([roleBindingApi, clusterRoleBindingApi], {
+kubeObjectDetailRegistry.add({
-  Details: RoleBindingDetails,
+  kind: "RoleBinding",
-});
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  components: {
+    Details: (props) => <RoleBindingDetails {...props} />
+  }
+})
+kubeObjectDetailRegistry.add({
+  kind: "ClusterRoleBinding",
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  components: {
+    Details: (props) => <RoleBindingDetails {...props} />
+  }
+})

src/renderer/components/+user-management-roles-bindings/role-bindings.tsx

@@ -54,9 +54,6 @@ export class RoleBindings extends React.Component<Props> {
           binding.getNs() || "-",
           binding.getAge(),
         ]}
-        renderItemMenu={(item: RoleBinding) => {
-          return <RoleBindingMenu object={item}/>
-        }}
         addRemoveButtons={{
           onAdd: () => AddRoleBindingDialog.open(),
           addTooltip: <Trans>Create new RoleBinding</Trans>,
@@ -65,13 +62,3 @@ export class RoleBindings extends React.Component<Props> {
     )
   }
 }
-
-export function RoleBindingMenu(props: KubeObjectMenuProps<RoleBinding>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews([roleBindingApi, clusterRoleBindingApi], {
-  Menu: RoleBindingMenu,
-})

src/renderer/components/+user-management-roles/role-details.tsx

@@ -6,9 +6,9 @@ import { DrawerTitle } from "../drawer";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { observer } from "mobx-react";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
+import { Role } from "../../api/endpoints";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Role> {
 }
@@ -66,6 +66,18 @@ export class RoleDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews([roleApi, clusterRoleApi], {
+kubeObjectDetailRegistry.add({
-  Details: RoleDetails,
+  kind: "Role",
-})
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  components: {
+    Details: (props) => <RoleDetails {...props}/>
+  }
+})
+
+kubeObjectDetailRegistry.add({
+  kind: "ClusterRole",
+  apiVersions: ["rbac.authorization.k8s.io/v1"],
+  components: {
+    Details: (props) => <RoleDetails {...props}/>
+  }
+})

src/renderer/components/+user-management-roles/roles.tsx

@@ -5,12 +5,10 @@ import { observer } from "mobx-react";
 import { Trans } from "@lingui/macro";
 import { RouteComponentProps } from "react-router";
 import { IRolesRouteParams } from "../+user-management/user-management.route";
-import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
 import { rolesStore } from "./roles.store";
-import { clusterRoleApi, Role, roleApi } from "../../api/endpoints";
+import { Role } from "../../api/endpoints";
 import { KubeObjectListLayout } from "../kube-object";
 import { AddRoleDialog } from "./add-role-dialog";
-import { apiManager } from "../../api/api-manager";
 
 enum sortBy {
   name = "name",
@@ -48,9 +46,6 @@ export class Roles extends React.Component<Props> {
             role.getNs() || "-",
             role.getAge(),
           ]}
-          renderItemMenu={(item: Role) => {
-            return <RoleMenu object={item}/>
-          }}
           addRemoveButtons={{
             onAdd: () => AddRoleDialog.open(),
             addTooltip: <Trans>Create new Role</Trans>,
@@ -61,13 +56,3 @@ export class Roles extends React.Component<Props> {
     )
   }
 }
-
-export function RoleMenu(props: KubeObjectMenuProps<Role>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews([roleApi, clusterRoleApi], {
-  Menu: RoleMenu,
-});

src/renderer/components/+user-management-service-accounts/service-accounts-details.tsx

@@ -9,13 +9,13 @@ import { DrawerItem, DrawerTitle } from "../drawer";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { secretsStore } from "../+config-secrets/secrets.store";
 import { Link } from "react-router-dom";
-import { Secret, ServiceAccount, serviceAccountsApi } from "../../api/endpoints";
+import { Secret, ServiceAccount } from "../../api/endpoints";
 import { KubeEventDetails } from "../+events/kube-event-details";
 import { getDetailsUrl } from "../../navigation";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { Icon } from "../icon";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<ServiceAccount> {
 }
@@ -132,6 +132,10 @@ export class ServiceAccountsDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(serviceAccountsApi, {
+kubeObjectDetailRegistry.add({
-  Details: ServiceAccountsDetails
+  kind: "ServiceAccount",
-})
+  apiVersions: ["v1"],
+  components: {
+    Details: (props) => <ServiceAccountsDetails {...props} />
+  }
+})

src/renderer/components/+user-management-service-accounts/service-accounts.tsx

@@ -13,7 +13,7 @@ import { KubeObjectListLayout } from "../kube-object";
 import { IServiceAccountsRouteParams } from "../+user-management";
 import { serviceAccountsStore } from "./service-accounts.store";
 import { CreateServiceAccountDialog } from "./create-service-account-dialog";
-import { apiManager } from "../../api/api-manager";
+import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
 
 enum sortBy {
   name = "name",
@@ -64,18 +64,20 @@ export class ServiceAccounts extends React.Component<Props> {
   }
 }
 
-export function ServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount>) {
+function ServiceAccountMenu(props: KubeObjectMenuProps<ServiceAccount>) {
   const { object, toolbar } = props;
   return (
-    <KubeObjectMenu {...props}>
+    <MenuItem onClick={() => openServiceAccountKubeConfig(object)}>
-      <MenuItem onClick={() => openServiceAccountKubeConfig(object)}>
+      <Icon material="insert_drive_file" title="Kubeconfig File" interactive={toolbar}/>
-        <Icon material="insert_drive_file" title="Kubeconfig File" interactive={toolbar}/>
+      <span className="title"><Trans>Kubeconfig</Trans></span>
-        <span className="title"><Trans>Kubeconfig</Trans></span>
+    </MenuItem>
-      </MenuItem>
-    </KubeObjectMenu>
   )
 }
 
-apiManager.registerViews(serviceAccountsApi, {
+kubeObjectMenuRegistry.add({
-  Menu: ServiceAccountMenu,
+  kind: "ServiceAccount",
+  apiVersions: ["v1"],
+  components: {
+    MenuItem: ServiceAccountMenu
+  }
 })

src/renderer/components/+workloads-cronjobs/cronjob-details.tsx

@@ -12,9 +12,9 @@ import { KubeEventDetails } from "../+events/kube-event-details";
 import { cronJobStore } from "./cronjob.store";
 import { getDetailsUrl } from "../../navigation";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { CronJob, cronJobApi, Job } from "../../api/endpoints";
+import { CronJob, Job } from "../../api/endpoints";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<CronJob> {
 }
@@ -87,6 +87,10 @@ export class CronJobDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(cronJobApi, {
+kubeObjectDetailRegistry.add({
-  Details: CronJobDetails,
+  kind: "CronJob",
-})
+  apiVersions: ["batch/v1"],
+  components: {
+    Details: (props) => <CronJobDetails {...props} />
+  }
+})

src/renderer/components/+workloads-cronjobs/cronjobs.tsx

@@ -15,8 +15,8 @@ import { ICronJobsRouteParams } from "../+workloads";
 import { KubeObjectListLayout } from "../kube-object";
 import { KubeEventIcon } from "../+events/kube-event-icon";
 import { _i18n } from "../../i18n";
-import { apiManager } from "../../api/api-manager";
 import { CronJobTriggerDialog } from "./cronjob-trigger-dialog";
+import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
 
 enum sortBy {
   name = "name",
@@ -85,15 +85,17 @@ export class CronJobs extends React.Component<Props> {
 export function CronJobMenu(props: KubeObjectMenuProps<CronJob>) {
   const { object, toolbar } = props;
   return (
-    <KubeObjectMenu {...props}>
+    <MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
-      <MenuItem onClick={() => CronJobTriggerDialog.open(object)}>
+      <Icon material="play_circle_filled" title={_i18n._(t`Trigger`)} interactive={toolbar}/>
-        <Icon material="play_circle_filled" title={_i18n._(t`Trigger`)} interactive={toolbar}/>
+      <span className="title"><Trans>Trigger</Trans></span>
-        <span className="title"><Trans>Trigger</Trans></span>
+    </MenuItem>
-      </MenuItem>
-    </KubeObjectMenu>
   )
 }
 
-apiManager.registerViews(cronJobApi, {
+kubeObjectMenuRegistry.add({
-  Menu: CronJobMenu,
+  kind: "CronJob",
+  apiVersions: ["batch/v1beta1"],
+  components: {
+    MenuItem: CronJobMenu
+  }
 })

src/renderer/components/+workloads-daemonsets/daemonset-details.tsx

@@ -12,13 +12,13 @@ import { KubeEventDetails } from "../+events/kube-event-details";
 import { daemonSetStore } from "./daemonsets.store";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { DaemonSet, daemonSetApi } from "../../api/endpoints";
+import { DaemonSet } from "../../api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<DaemonSet> {
 }
@@ -97,6 +97,10 @@ export class DaemonSetDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(daemonSetApi, {
+kubeObjectDetailRegistry.add({
-  Details: DaemonSetDetails,
+  kind: "DaemonSet",
-})
+  apiVersions: ["apps/v1"],
+  components: {
+    Details: (props: any) => <DaemonSetDetails {...props} />
+  }
+})

src/renderer/components/+workloads-daemonsets/daemonsets.tsx

@@ -70,20 +70,8 @@ export class DaemonSets extends React.Component<Props> {
           this.renderNodeSelector(daemonSet),
           daemonSet.getAge(),
         ]}
-        renderItemMenu={(item: DaemonSet) => {
-          return <DaemonSetMenu object={item}/>
-        }}
       />
     )
   }
 }
 
-export function DaemonSetMenu(props: KubeObjectMenuProps<DaemonSet>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(daemonSetApi, {
-  Menu: DaemonSetMenu,
-})

src/renderer/components/+workloads-deployments/deployment-details.tsx

@@ -21,8 +21,8 @@ import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { ReplicaSets } from "../+workloads-replicasets";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Deployment> {
 }
@@ -122,6 +122,10 @@ export class DeploymentDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(deploymentApi, {
+kubeObjectDetailRegistry.add({
-  Details: DeploymentDetails
+  kind: "Deployment",
-})
+  apiVersions: ["apps/v1"],
+  components: {
+    Details: (props: any) => <DeploymentDetails {...props} />
+  }
+})

src/renderer/components/+workloads-deployments/deployments.tsx

@@ -21,7 +21,8 @@ import { cssNames } from "../../utils";
 import kebabCase from "lodash/kebabCase";
 import orderBy from "lodash/orderBy";
 import { KubeEventIcon } from "../+events/kube-event-icon";
-import { apiManager } from "../../api/api-manager";
+import { kubeObjectMenuRegistry } from "../../api/kube-object-menu-registry";
+import { DeploymentDetails } from "./deployment-details";
 
 enum sortBy {
   name = "name",
@@ -96,15 +97,18 @@ export class Deployments extends React.Component<Props> {
 export function DeploymentMenu(props: KubeObjectMenuProps<Deployment>) {
   const { object, toolbar } = props;
   return (
-    <KubeObjectMenu {...props}>
+    <MenuItem onClick={() => DeploymentScaleDialog.open(object)}>
-      <MenuItem onClick={() => DeploymentScaleDialog.open(object)}>
+      <Icon material="open_with" title={_i18n._(t`Scale`)} interactive={toolbar}/>
-        <Icon material="open_with" title={_i18n._(t`Scale`)} interactive={toolbar}/>
+      <span className="title"><Trans>Scale</Trans></span>
-        <span className="title"><Trans>Scale</Trans></span>
+    </MenuItem>
-      </MenuItem>
-    </KubeObjectMenu>
   )
 }
 
-apiManager.registerViews(deploymentApi, {
+kubeObjectMenuRegistry.add({
-  Menu: DeploymentMenu,
+  kind: "Deployment",
-});
+  apiVersions: ["apps/v1"],
+  components: {
+    MenuItem: DeploymentMenu
+  }
+})
+

src/renderer/components/+workloads-jobs/job-details.tsx

@@ -15,11 +15,11 @@ import { podsStore } from "../+workloads-pods/pods.store";
 import { jobStore } from "./job.store";
 import { getDetailsUrl } from "../../navigation";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { Job, jobApi } from "../../api/endpoints";
+import { Job } from "../../api/endpoints";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { lookupApiLink } from "../../api/kube-api";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Job> {
 }
@@ -107,6 +107,10 @@ export class JobDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(jobApi, {
+kubeObjectDetailRegistry.add({
-  Details: JobDetails
+  kind: "Job",
-});
+  apiVersions: ["batch/v1"],
+  components: {
+    Details: (props: any) => <JobDetails {...props}/>
+  }
+})

src/renderer/components/+workloads-jobs/jobs.tsx

@@ -64,20 +64,7 @@ export class Jobs extends React.Component<Props> {
             }
           ]
         }}
-        renderItemMenu={(item: Job) => {
-          return <JobMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function JobMenu(props: KubeObjectMenuProps<Job>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(jobApi, {
-  Menu: JobMenu,
-})

src/renderer/components/+workloads-pods/pod-details.tsx

@@ -6,7 +6,7 @@ import { disposeOnUnmount, observer } from "mobx-react";
 import { Link } from "react-router-dom";
 import { autorun, observable, reaction, toJS } from "mobx";
 import { Trans } from "@lingui/macro";
-import { IPodMetrics, nodesApi, Pod, podsApi, pvcApi, configMapApi } from "../../api/endpoints";
+import { IPodMetrics, nodesApi, Pod, pvcApi, configMapApi } from "../../api/endpoints";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
 import { autobind, cssNames, interval } from "../../utils";
@@ -22,9 +22,8 @@ import { getDetailsUrl } from "../../navigation";
 import { KubeObjectDetailsProps } from "../kube-object";
 import { getItemMetrics } from "../../api/endpoints/metrics.api";
 import { PodCharts, podMetricTabs } from "./pod-charts";
-import { lookupApiLink } from "../../api/kube-api";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<Pod> {
 }
@@ -223,6 +222,10 @@ export class PodDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(podsApi, {
+kubeObjectDetailRegistry.add({
-  Details: PodDetails
+  kind: "Pod",
+  apiVersions: ["v1"],
+  components: {
+    Details: (props: any) => <PodDetails {...props} />
+  }
 })

src/renderer/components/+workloads-pods/pod-menu.scss

@@ -1,10 +0,0 @@
-.PodMenu {
-  .StatusBrick {
-    margin-right: $margin;
-    @include pod-status-bgs;
-
-    &.running:not(.ready) {
-      background-color: $pod-status-pending-color;
-    }
-  }
-}

src/renderer/components/+workloads-pods/pod-menu.tsx

@@ -1,134 +0,0 @@
-import "./pod-menu.scss";
-
-import React from "react";
-import { t, Trans } from "@lingui/macro";
-import { MenuItem, SubMenu } from "../menu";
-import { IPodContainer, Pod } from "../../api/endpoints";
-import { Icon } from "../icon";
-import { StatusBrick } from "../status-brick";
-import { KubeObjectMenu, KubeObjectMenuProps } from "../kube-object/kube-object-menu";
-import { cssNames, prevDefault } from "../../utils";
-import { terminalStore, createTerminalTab } from "../dock/terminal.store";
-import { _i18n } from "../../i18n";
-import { hideDetails } from "../../navigation";
-import { createPodLogsTab } from "../dock/pod-logs.store";
-
-interface Props extends KubeObjectMenuProps<Pod> {
-}
-
-export class PodMenu extends React.Component<Props> {
-  async execShell(container?: string) {
-    hideDetails();
-    const { object: pod } = this.props
-    const containerParam = container ? `-c ${container}` : ""
-    let command = `kubectl exec -i -t -n ${pod.getNs()} ${pod.getName()} ${containerParam} "--"`
-    if (window.navigator.platform !== "Win32") {
-      command = `exec ${command}`
-    }
-    if (pod.getSelectedNodeOs() === "windows") {
-      command = `${command} powershell`
-    } else {
-      command = `${command} sh -c "clear; (bash || ash || sh)"`
-    }
-
-    const shell = createTerminalTab({
-      title: _i18n._(t`Pod`) + `: ${pod.getName()} (namespace: ${pod.getNs()})`
-    });
-
-    terminalStore.sendCommand(command, {
-      enter: true,
-      tabId: shell.id
-    });
-  }
-
-  showLogs(container: IPodContainer) {
-    hideDetails();
-    const pod = this.props.object;
-    createPodLogsTab({
-      pod,
-      containers: pod.getContainers(),
-      initContainers: pod.getInitContainers(),
-      selectedContainer: container,
-      showTimestamps: false,
-      previous: false,
-      tailLines: 1000
-    });
-  }
-
-  renderShellMenu() {
-    const { object: pod, toolbar } = this.props
-    const containers = pod.getRunningContainers();
-    if (!containers.length) return;
-    return (
-      <MenuItem onClick={prevDefault(() => this.execShell(containers[0].name))}>
-        <Icon svg="ssh" interactive={toolbar} title={_i18n._(t`Pod shell`)}/>
-        <span className="title"><Trans>Shell</Trans></span>
-        {containers.length > 1 && (
-          <>
-            <Icon className="arrow" material="keyboard_arrow_right"/>
-            <SubMenu>
-              {
-                containers.map(container => {
-                  const { name } = container;
-                  return (
-                    <MenuItem key={name} onClick={prevDefault(() => this.execShell(name))} className="flex align-center">
-                      <StatusBrick/>
-                      {name}
-                    </MenuItem>
-                  )
-                })
-              }
-            </SubMenu>
-          </>
-        )}
-      </MenuItem>
-    )
-  }
-
-  renderLogsMenu() {
-    const { object: pod, toolbar } = this.props
-    const containers = pod.getAllContainers();
-    const statuses = pod.getContainerStatuses();
-    if (!containers.length) return;
-    return (
-      <MenuItem onClick={prevDefault(() => this.showLogs(containers[0]))}>
-        <Icon material="subject" title={_i18n._(t`Logs`)} interactive={toolbar}/>
-        <span className="title"><Trans>Logs</Trans></span>
-        {containers.length > 1 && (
-          <>
-            <Icon className="arrow" material="keyboard_arrow_right"/>
-            <SubMenu>
-              {
-                containers.map(container => {
-                  const { name } = container
-                  const status = statuses.find(status => status.name === name);
-                  const brick = status ? (
-                    <StatusBrick
-                      className={cssNames(Object.keys(status.state)[0], { ready: status.ready })}
-                    />
-                  ) : null
-                  return (
-                    <MenuItem key={name} onClick={prevDefault(() => this.showLogs(container))} className="flex align-center">
-                      {brick}
-                      {name}
-                    </MenuItem>
-                  )
-                })
-              }
-            </SubMenu>
-          </>
-        )}
-      </MenuItem>
-    )
-  }
-
-  render() {
-    const { ...menuProps } = this.props;
-    return (
-      <KubeObjectMenu {...menuProps} className="PodMenu">
-        {this.renderShellMenu()}
-        {this.renderLogsMenu()}
-      </KubeObjectMenu>
-    )
-  }
-}

src/renderer/components/+workloads-pods/pods.tsx

@@ -10,8 +10,7 @@ import { volumeClaimStore } from "../+storage-volume-claims/volume-claim.store";
 import { IPodsRouteParams } from "../+workloads";
 import { eventStore } from "../+events/event.store";
 import { KubeObjectListLayout } from "../kube-object";
-import { Pod, podsApi } from "../../api/endpoints";
+import { Pod } from "../../api/endpoints";
-import { PodMenu } from "./pod-menu";
 import { StatusBrick } from "../status-brick";
 import { cssNames, stopPropagation } from "../../utils";
 import { KubeEventIcon } from "../+events/kube-event-icon";
@@ -20,7 +19,6 @@ import toPairs from "lodash/toPairs";
 import startCase from "lodash/startCase";
 import kebabCase from "lodash/kebabCase";
 import { lookupApiLink } from "../../api/kube-api";
-import { apiManager } from "../../api/api-manager";
 
 enum sortBy {
   name = "name",
@@ -119,14 +117,7 @@ export class Pods extends React.Component<Props> {
           pod.getAge(),
           { title: pod.getStatusMessage(), className: kebabCase(pod.getStatusMessage()) }
         ]}
-        renderItemMenu={(item: Pod) => {
-          return <PodMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-apiManager.registerViews(podsApi, {
-  Menu: PodMenu,
-})

src/renderer/components/+workloads-replicasets/replicaset-details.tsx

@@ -12,12 +12,12 @@ import { KubeEventDetails } from "../+events/kube-event-details";
 import { disposeOnUnmount, observer } from "mobx-react";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { ReplicaSet, replicaSetApi } from "../../api/endpoints";
+import { ReplicaSet } from "../../api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<ReplicaSet> {
 }
@@ -97,6 +97,10 @@ export class ReplicaSetDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(replicaSetApi, {
+kubeObjectDetailRegistry.add({
-  Details: ReplicaSetDetails,
+  kind: "ReplicaSet",
-})
+  apiVersions: ["apps/v1"],
+  components: {
+    Details: (props: any) => <ReplicaSetDetails {...props} />
+  }
+})

src/renderer/components/+workloads-replicasets/replicasets.tsx

@@ -92,7 +92,3 @@ export function ReplicaSetMenu(props: KubeObjectMenuProps<ReplicaSet>) {
     <KubeObjectMenu {...props}/>
   )
 }
-
-apiManager.registerViews(replicaSetApi, {
-  Menu: ReplicaSetMenu,
-});

src/renderer/components/+workloads-statefulsets/statefulset-details.tsx

@@ -13,12 +13,12 @@ import { KubeEventDetails } from "../+events/kube-event-details";
 import { podsStore } from "../+workloads-pods/pods.store";
 import { statefulSetStore } from "./statefulset.store";
 import { KubeObjectDetailsProps } from "../kube-object";
-import { StatefulSet, statefulSetApi } from "../../api/endpoints";
+import { StatefulSet } from "../../api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
-import { apiManager } from "../../api/api-manager";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 interface Props extends KubeObjectDetailsProps<StatefulSet> {
 }
@@ -95,6 +95,11 @@ export class StatefulSetDetails extends React.Component<Props> {
   }
 }
 
-apiManager.registerViews(statefulSetApi, {
+
-  Details: StatefulSetDetails
+kubeObjectDetailRegistry.add({
-})
+  kind: "StatefulSet",
+  apiVersions: ["apps/v1"],
+  components: {
+    Details: (props: any) => <StatefulSetDetails {...props} />
+  }
+})

src/renderer/components/+workloads-statefulsets/statefulsets.tsx

@@ -60,20 +60,7 @@ export class StatefulSets extends React.Component<Props> {
           <KubeEventIcon object={statefulSet}/>,
           statefulSet.getAge(),
         ]}
-        renderItemMenu={(item: StatefulSet) => {
-          return <StatefulSetMenu object={item}/>
-        }}
       />
     )
   }
 }
-
-export function StatefulSetMenu(props: KubeObjectMenuProps<StatefulSet>) {
-  return (
-    <KubeObjectMenu {...props}/>
-  )
-}
-
-apiManager.registerViews(statefulSetApi, {
-  Menu: StatefulSetMenu,
-})

src/renderer/components/kube-object/kube-object-details.tsx

@@ -8,9 +8,11 @@ import { getDetails, hideDetails } from "../../navigation";
 import { Drawer } from "../drawer";
 import { KubeObject } from "../../api/kube-object";
 import { Spinner } from "../spinner";
-import { apiManager, ApiComponents } from "../../api/api-manager";
+import { apiManager } from "../../api/api-manager";
 import { crdStore } from "../+custom-resources/crd.store";
-import { CrdResourceDetails, CrdResourceMenu } from "../+custom-resources";
+import { CrdResourceDetails } from "../+custom-resources";
+import { KubeObjectMenu } from "./kube-object-menu"
+import { kubeObjectDetailRegistry } from "../../api/kube-object-detail-registry";
 
 export interface KubeObjectDetailsProps<T = KubeObject> {
   className?: string;
@@ -64,14 +66,15 @@ export class KubeObjectDetails extends React.Component {
     const { object, isLoading, loadingError, isCrdInstance } = this;
     const isOpen = !!(object || isLoading || loadingError);
     let title = "";
-    let apiComponents: ApiComponents;
+    let details: JSX.Element[];
     if (object) {
-      const { kind, getName, selfLink } = object;
+      const { kind, getName } = object;
       title = `${kind}: ${getName()}`;
-      apiComponents = apiManager.getViews(selfLink);
+      details = kubeObjectDetailRegistry.getItemsForKind(object.kind, object.apiVersion).map((item, index) => {
-      if (isCrdInstance && !apiComponents.Details) {
+        return <item.components.Details object={object} key={`object-details-${index}`}/>
-        apiComponents.Details = CrdResourceDetails
+      })
-        apiComponents.Menu = CrdResourceMenu
+      if (isCrdInstance && details.length === 0) {
+        details.push(<CrdResourceDetails object={object} />)
       }
     }
     return (
@@ -79,12 +82,12 @@ export class KubeObjectDetails extends React.Component {
         className="KubeObjectDetails flex column"
         open={isOpen}
         title={title}
-        toolbar={apiComponents && apiComponents.Menu && <apiComponents.Menu object={object} toolbar/>}
+        toolbar={<KubeObjectMenu object={object} toolbar={true} />}
         onClose={hideDetails}
       >
         {isLoading && <Spinner center/>}
         {loadingError && <div className="box center">{loadingError}</div>}
-        {apiComponents && apiComponents.Details && <apiComponents.Details object={object}/>}
+        {details}
       </Drawer>
     )
   }

src/renderer/components/kube-object/kube-object-list-layout.tsx

@@ -6,6 +6,7 @@ import { KubeObject } from "../../api/kube-object";
 import { getSelectedDetails, showDetails } from "../../navigation";
 import { ItemListLayout, ItemListLayoutProps } from "../item-object-list/item-list-layout";
 import { KubeObjectStore } from "../../kube-object.store";
+import { KubeObjectMenu } from "./kube-object-menu";
 
 export interface KubeObjectListLayoutProps extends ItemListLayoutProps {
   store: KubeObjectStore;
@@ -34,6 +35,9 @@ export class KubeObjectListLayout extends React.Component<KubeObjectListLayoutPr
         className={cssNames("KubeObjectListLayout", className)}
         detailsItem={this.selectedItem}
         onDetails={this.onDetails}
+        renderItemMenu={(item) => {
+          return <KubeObjectMenu object={item}/>
+        }}
       />
     );
   }