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

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

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'),
+    },
+  },
+];