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

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

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, {
-  Details: NodeDetails,
-});
+kubeObjectDetailRegistry.add({
+  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 { NodeMenu } from "./node-menu";
+import { Node } from "../../api/endpoints/nodes.api";
 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,
-});