Merge branch 'master' into cleanup-metrics-route

.azure-pipelines.yml

@@ -39,6 +39,8 @@ jobs:
         displayName: Install dependencies
       - script: make integration-win
         displayName: Run integration tests
+      - script: make test-extensions
+        displayName: Run In-tree Extension tests
       - script: make build
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
         displayName: Build
@@ -78,6 +80,8 @@ jobs:
         displayName: Run tests
       - script: make integration-mac
         displayName: Run integration tests
+      - script: make test-extensions
+        displayName: Run In-tree Extension tests
       - script: make build
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
         displayName: Build
@@ -119,6 +123,8 @@ jobs:
         condition: eq(variables.CACHE_RESTORED, 'true')
       - script: make install-deps
         displayName: Install dependencies
+      - script: make test-extensions
+        displayName: Run In-tree Extension tests
       - script: make lint
         displayName: Lint
       - script: make test
@@ -149,6 +155,11 @@ jobs:
         condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
         env:
           GH_TOKEN: $(GH_TOKEN)
+      - script: make publish-npm
+        displayName: Publish npm package
+        condition: "and(succeeded(), startsWith(variables['Build.SourceBranch'], 'refs/tags/'))"
+        env:
+          NPM_TOKEN: $(NPM_TOKEN)
       - bash: |
           mkdir -p "$AZURE_CACHE_FOLDER"
           tar -czf "$AZURE_CACHE_FOLDER/yarn-cache.tar.gz" "$YARN_CACHE_FOLDER"

.eslintrc.js

@@ -1,9 +1,11 @@
 module.exports =  {
+  ignorePatterns: ["src/extensions/npm/extensions/api.d.ts"],
   overrides: [
     {
       files: [
         "src/renderer/**/*.js",
         "build/**/*.js",
+        "extensions/**/*.js"
       ],
       extends: [
         'eslint:recommended',
@@ -24,7 +26,10 @@ module.exports =  {
       files: [
         "build/*.ts",
         "src/**/*.ts",
-        "integration/**/*.ts"
+        "integration/**/*.ts",
+        "src/extensions/**/*.ts*",
+        "extensions/**/*.ts*",
+        "__mocks__/*.ts",
       ],
       parser: "@typescript-eslint/parser",
       extends:  [

.github/labeler-config.yml

@@ -0,0 +1,17 @@
+---
+area/ui:
+  - src/renderer/**/*
+area/test:
+  - integration/**/*
+  - __mocks__/**/*
+area/extension:
+  - extensions/**/*
+  - src/extensions/**/*
+area/documentation:
+  - README.md
+  - docs/**/*
+area/ci:
+  - .github/workflows/**/*
+  - .azure-pipelines.yml
+dependencies:
+  - yarn.lock

.github/workflows/labeler.yml

@@ -0,0 +1,14 @@
+---
+name: "Pull Request Labeler"
+
+'on':
+  - pull_request
+
+jobs:
+  triage:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/labeler@v2
+        with:
+          repo-token: "${{ secrets.GITHUB_TOKEN }}"
+          configuration-path: .github/labeler-config.yml

.gitignore

@@ -1,12 +1,17 @@
 dist/
-out/
 node_modules/
 .DS_Store
 yarn-error.log
 coverage/
 tmp/
-static/build/**
-binaries/client/
-binaries/server/
 locales/**/**.js
 lens.log
+static/build
+static/types
+binaries/client/
+binaries/server/
+src/extensions/*/*.js
+src/extensions/*/*.d.ts
+types/extension-api.d.ts
+types/extension-renderer-api.d.ts
+extensions/*/dist

LICENSE

@@ -1,8 +1,13 @@
-MIT License
-
 Copyright (c) 2020 Mirantis, Inc.
 
-All rights reserved.
+Portions of this software are licensed as follows:
+
+* All content residing under the "docs/" directory of this repository, if that 
+directory exists, is licensed under "Creative Commons: CC BY-SA 4.0 license".
+* All third party components incorporated into the Lens Software are licensed 
+under the original license provided by the owner of the applicable component.
+* Content outside of the above mentioned directories or restrictions above is 
+available under the "MIT" license as defined below.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

Makefile

@@ -1,3 +1,5 @@
+EXTENSIONS_DIR = ./extensions
+
 ifeq ($(OS),Windows_NT)
     DETECTED_OS := Windows
 else
@@ -31,28 +33,44 @@ lint:
 test: download-bins
 	yarn test
 
-integration-linux:
+integration-linux: build-extension-types build-extensions
 	yarn build:linux
 	yarn integration
 
-integration-mac:
+integration-mac: build-extension-types build-extensions
 	yarn build:mac
 	yarn integration
 
-integration-win:
+integration-win: build-extension-types build-extensions
 	yarn build:win
 	yarn integration
 
 test-app:
 	yarn test
 
-build: install-deps download-bins
+build: install-deps download-bins build-extensions
 ifeq "$(DETECTED_OS)" "Windows"
 	yarn dist:win
 else
 	yarn dist
 endif
 
+build-extensions:
+	$(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), $(MAKE) -C $(dir) build;)
+
+test-extensions:
+	$(foreach dir, $(wildcard $(EXTENSIONS_DIR)/*), $(MAKE) -C $(dir) test;)
+
+build-npm: build-extension-types
+	yarn npm:fix-package-version
+
+build-extension-types:
+	yarn compile:extension-types
+
+publish-npm: build-npm
+	npm config set '//registry.npmjs.org/:_authToken' "${NPM_TOKEN}"
+	cd src/extensions/npm/extensions && npm publish --access=public
+
 clean:
 ifeq "$(DETECTED_OS)" "Windows"
 	if exist binaries\client del /s /q binaries\client\*.*

README.md

@@ -40,9 +40,10 @@ brew cask install lens
 
 Allows for faster separate re-runs of some of the more involved processes:
 
-1. `yarn dev:main` compiles electron's main process part and start watching files 
-1. `yarn dev:renderer` compiles electron's renderer part and start watching files  
-1. `yarn dev-run` runs app in dev-mode and restarts when electron's main process file has changed
+1. `yarn dev:main` compiles electron's main process app part 
+1. `yarn dev:renderer` compiles electron's renderer app part  
+1. `yarn dev:extension-types` compile declaration types for `@k8slens/extensions`  
+1. `yarn dev-run` runs app in dev-mode and auto-restart when main process file has changed
 
 ## Developer's ~~RTFM~~ recommended list:
 

__mocks__/@linguiMacro.ts

@@ -0,0 +1,3 @@
+module.exports = {
+  Trans: ({ children }: { children: React.ReactNode }) => children,
+};

__mocks__/electron.ts

@@ -13,5 +13,8 @@ module.exports = {
       getPath: jest.fn()
     }
   },
-  dialog: jest.fn()
+  dialog: jest.fn(),
+  ipcRenderer: {
+    on: jest.fn()
+  }
 };

build/build_tray_icon.ts

@@ -0,0 +1,51 @@
+// Generate tray icons from SVG to PNG + different sizes and colors (B&W)
+// Command: `yarn build:tray-icons`
+import path from "path"
+import sharp from "sharp";
+import jsdom from "jsdom"
+import fs from "fs-extra"
+
+export async function generateTrayIcon(
+  {
+    outputFilename = "tray_icon", // e.g. output tray_icon_dark@2x.png
+    svgIconPath = path.resolve(__dirname, "../src/renderer/components/icon/logo-lens.svg"),
+    outputFolder = path.resolve(__dirname, "./tray"),
+    dpiSuffix = "2x",
+    pixelSize = 32,
+    shouldUseDarkColors = false, // managed by electron.nativeTheme.shouldUseDarkColors
+  } = {}) {
+  outputFilename += shouldUseDarkColors ? "_dark" : ""
+  dpiSuffix = dpiSuffix !== "1x" ? `@${dpiSuffix}` : ""
+  const pngIconDestPath = path.resolve(outputFolder, `${outputFilename}${dpiSuffix}.png`)
+  try {
+    // Modify .SVG colors
+    const trayIconColor = shouldUseDarkColors ? "white" : "black";
+    const svgDom = await jsdom.JSDOM.fromFile(svgIconPath);
+    const svgRoot = svgDom.window.document.body.getElementsByTagName("svg")[0];
+    svgRoot.innerHTML += `<style>* {fill: ${trayIconColor} !important;}</style>`
+    const svgIconBuffer = Buffer.from(svgRoot.outerHTML);
+
+    // Resize and convert to .PNG
+    const pngIconBuffer: Buffer = await sharp(svgIconBuffer)
+      .resize({ width: pixelSize, height: pixelSize })
+      .png()
+      .toBuffer();
+
+    // Save icon
+    await fs.writeFile(pngIconDestPath, pngIconBuffer);
+    console.info(`[DONE]: Tray icon saved at "${pngIconDestPath}"`);
+  } catch (err) {
+    console.error(`[ERROR]: ${err}`);
+  }
+}
+
+// Run
+const iconSizes: Record<string, number> = {
+  "1x": 16,
+  "2x": 32,
+  "3x": 48,
+};
+Object.entries(iconSizes).forEach(([dpiSuffix, pixelSize]) => {
+  generateTrayIcon({ dpiSuffix, pixelSize, shouldUseDarkColors: false });
+  generateTrayIcon({ dpiSuffix, pixelSize, shouldUseDarkColors: true });
+});

build/set_npm_version.ts

@@ -0,0 +1,9 @@
+import * as fs from "fs"
+import * as path from "path"
+import packageInfo from "../src/extensions/npm/extensions/package.json"
+import appInfo from "../package.json"
+
+const packagePath = path.join(__dirname, "../src/extensions/npm/extensions/package.json")
+
+packageInfo.version = appInfo.version
+fs.writeFileSync(packagePath, JSON.stringify(packageInfo, null, 2) + "\n")

extensions/example-extension/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+dist/

extensions/example-extension/Makefile

@@ -0,0 +1,8 @@
+install-deps:
+	yarn install
+
+build: install-deps
+	yarn run build
+
+test:
+	yarn run test

extensions/example-extension/README.md

@@ -0,0 +1,11 @@
+# Lens Example Extension
+
+*TODO*: add more info
+
+## Build
+
+`npm run build`
+
+## Dev
+
+`npm run dev`

extensions/example-extension/main.ts

@@ -0,0 +1,11 @@
+import { LensMainExtension } from "@k8slens/extensions";
+
+export default class ExampleExtensionMain extends LensMainExtension {
+  onActivate() {
+    console.log('EXAMPLE EXTENSION MAIN: ACTIVATED', this.getMeta());
+  }
+
+  onDeactivate() {
+    console.log('EXAMPLE EXTENSION MAIN: DEACTIVATED', this.getMeta());
+  }
+}

extensions/example-extension/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "extension-example",
+  "version": "1.0.0",
+  "description": "Example extension",
+  "main": "dist/main.js",
+  "renderer": "dist/renderer.js",
+  "lens": {
+    "metadata": {},
+    "styles": []
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "dev": "npm run build --watch",
+    "test": "echo NO TESTS"
+  },
+  "dependencies": {
+    "react-open-doodles": "^1.0.5"
+  },
+  "devDependencies": {
+    "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2"
+  }
+}

extensions/example-extension/page.tsx

@@ -0,0 +1,29 @@
+import { LensRendererExtension, Component } from "@k8slens/extensions";
+import { CoffeeDoodle } from "react-open-doodles";
+import path from "path";
+import React from "react"
+
+export function ExampleIcon(props: Component.IconProps) {
+  return <Component.Icon {...props} material="pages" tooltip={path.basename(__filename)}/>
+}
+
+export class ExamplePage extends React.Component<{ extension: LensRendererExtension }> {
+  deactivate = () => {
+    const { extension } = this.props;
+    extension.disable();
+  }
+
+  render() {
+    const doodleStyle = {
+      width: "200px"
+    }
+    return (
+      <div className="flex column gaps align-flex-start">
+        <div style={doodleStyle}><CoffeeDoodle accent="#3d90ce" /></div>
+        <p>Hello from Example extension!</p>
+        <p>File: <i>{__filename}</i></p>
+        <Component.Button accent label="Deactivate" onClick={this.deactivate}/>
+      </div>
+    )
+  }
+}

extensions/example-extension/renderer.tsx

@@ -0,0 +1,16 @@
+import { LensRendererExtension } from "@k8slens/extensions";
+import { ExampleIcon, ExamplePage } from "./page"
+import React from "react"
+
+export default class ExampleExtension extends LensRendererExtension {
+  clusterPages = [
+    {
+      path: "/extension-example",
+      title: "Example Extension",
+      components: {
+        Page: () => <ExamplePage extension={this}/>,
+        MenuIcon: ExampleIcon,
+      }
+    }
+  ]
+}

extensions/example-extension/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "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": [
+    "./*.ts",
+    "./*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "*.js"
+  ]
+}

extensions/example-extension/webpack.config.js

@@ -0,0 +1,65 @@
+const path = require('path');
+
+module.exports = [
+  {
+    entry: './main.ts',
+    context: __dirname,
+    target: "electron-main",
+    mode: "production",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    externals: [
+      {
+        "@k8slens/extensions": "var global.LensExtensions",
+        "mobx": "var global.Mobx",
+        "react": "var global.React"
+      }
+    ],
+    resolve: {
+      extensions: [ '.tsx', '.ts', '.js' ],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      filename: 'main.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+  },
+  {
+    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/license-menu-item/Makefile

@@ -0,0 +1,8 @@
+install-deps:
+	yarn install
+
+build: install-deps
+	yarn run build
+
+test:
+	yarn run test

extensions/license-menu-item/main.ts

@@ -0,0 +1,13 @@
+import { LensMainExtension, Util } from "@k8slens/extensions";
+
+export default class LicenseLensMainExtension extends LensMainExtension {
+  appMenus = [
+    {
+      parentId: "help",
+      label: "License",
+      async click() {
+        Util.openExternal("https://k8slens.dev/licenses/eula.md")
+      }
+    }
+  ]
+}

extensions/license-menu-item/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "lens-license",
+  "version": "0.1.0",
+  "description": "License menu item",
+  "main": "dist/main.js",
+  "scripts": {
+    "build": "webpack -p",
+    "dev": "webpack --watch",
+    "test": "echo NO TESTS"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@types/webpack": "^4.41.17",
+    "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
+    "mobx": "^5.15.5",
+    "react": "^16.13.1",
+    "ts-loader": "^8.0.4",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2"
+  }
+}

extensions/license-menu-item/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": ".",
+    "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"
+  }
+}

extensions/license-menu-item/webpack.config.ts

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

extensions/metrics-cluster-feature/Makefile

@@ -0,0 +1,8 @@
+install-deps:
+	yarn install
+
+build: install-deps
+	yarn run build
+
+test:
+	yarn run test

extensions/metrics-cluster-feature/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "lens-metrics-cluster-feature",
+  "version": "0.1.0",
+  "description": "Lens metrics cluster feature",
+  "renderer": "dist/renderer.js",
+  "lens": {
+    "metadata": {},
+    "styles": []
+  },
+  "scripts": {
+    "build": "webpack --config webpack.config.js",
+    "dev": "npm run build --watch",
+    "test": "echo NO TESTS"
+  },
+  "dependencies": {
+    "semver": "^7.3.2"
+  },
+  "devDependencies": {
+    "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2",
+    "mobx": "^5.15.5",
+    "react": "^16.13.1"
+  }
+}

extensions/metrics-cluster-feature/renderer.tsx

@@ -0,0 +1,23 @@
+import { LensRendererExtension } from "@k8slens/extensions"
+import { MetricsFeature } from "./src/metrics-feature"
+import React from "react"
+
+export default class ClusterMetricsFeatureExtension extends LensRendererExtension {
+  clusterFeatures = [
+    {
+      title: "Metrics Stack",
+      components: {
+        Description: () => {
+          return (
+            <span>
+                Enable timeseries data visualization (Prometheus stack) for your cluster.
+                Install this only if you don't have existing Prometheus stack installed.
+                You can see preview of manifests <a href="https://github.com/lensapp/lens/tree/master/extensions/lens-metrics/resources" target="_blank">here</a>.
+              </span>
+          )
+        }
+      },
+      feature: new MetricsFeature()
+    }
+  ]
+}

extensions/metrics-cluster-feature/src/metrics-feature.ts

@@ -0,0 +1,96 @@
+import { ClusterFeature, Store, K8sApi } from "@k8slens/extensions"
+import semver from "semver"
+import * as path from "path"
+
+export interface MetricsConfiguration {
+  // Placeholder for Metrics config structure
+  persistence: {
+    enabled: boolean;
+    storageClass: string;
+    size: string;
+  };
+  nodeExporter: {
+    enabled: boolean;
+  };
+  kubeStateMetrics: {
+    enabled: boolean;
+  };
+  retention: {
+    time: string;
+    size: string;
+  };
+  alertManagers: string[];
+  replicas: number;
+  storageClass: string;
+}
+
+export class MetricsFeature extends ClusterFeature.Feature {
+  name = "metrics"
+  latestVersion = "v2.17.2-lens1"
+
+  config: MetricsConfiguration = {
+    persistence: {
+      enabled: false,
+      storageClass: null,
+      size: "20G",
+    },
+    nodeExporter: {
+      enabled: true,
+    },
+    retention: {
+      time: "2d",
+      size: "5GB",
+    },
+    kubeStateMetrics: {
+      enabled: true,
+    },
+    alertManagers: null,
+    replicas: 1,
+    storageClass: null,
+  };
+
+  async install(cluster: Store.Cluster): Promise<void> {
+    // Check if there are storageclasses
+    const storageClassApi = K8sApi.forCluster(cluster, K8sApi.StorageClass)
+    const scs = await storageClassApi.list()
+    this.config.persistence.enabled = scs.some(sc => (
+      sc.metadata?.annotations?.['storageclass.kubernetes.io/is-default-class'] === 'true' ||
+      sc.metadata?.annotations?.['storageclass.beta.kubernetes.io/is-default-class'] === 'true'
+    ));
+
+    super.applyResources(cluster, super.renderTemplates(path.join(__dirname, "../resources/")))
+  }
+
+  async upgrade(cluster: Store.Cluster): Promise<void> {
+    return this.install(cluster)
+  }
+
+  async updateStatus(cluster: Store.Cluster): Promise<ClusterFeature.FeatureStatus> {
+    try {
+      const statefulSet = K8sApi.forCluster(cluster, K8sApi.StatefulSet)
+      const prometheus = await statefulSet.get({name: "prometheus", namespace: "lens-metrics"})
+      if (prometheus?.kind) {
+        this.status.installed = true;
+        this.status.currentVersion = prometheus.spec.template.spec.containers[0].image.split(":")[1];
+        this.status.canUpgrade = semver.lt(this.status.currentVersion, this.latestVersion, true);
+      } else {
+        this.status.installed = false
+      }
+    } catch(e) {
+      if (e?.error?.code === 404) {
+        this.status.installed = false
+      }
+    }
+
+    return this.status
+  }
+
+  async uninstall(cluster: Store.Cluster): Promise<void> {
+    const namespaceApi = K8sApi.forCluster(cluster, K8sApi.Namespace)
+    const clusterRoleBindingApi = K8sApi.forCluster(cluster, K8sApi.ClusterRoleBinding)
+    const clusterRoleApi = K8sApi.forCluster(cluster, K8sApi.ClusterRole)
+
+    await namespaceApi.delete({name: "lens-metrics"})
+    await clusterRoleBindingApi.delete({name: "lens-prometheus"})
+    await clusterRoleApi.delete({name: "lens-prometheus"})  }
+}

extensions/metrics-cluster-feature/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "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": [
+    "./*.ts",
+    "./*.tsx"
+  ],
+  "exclude": [
+    "node_modules",
+    "*.js"
+  ]
+}

extensions/metrics-cluster-feature/webpack.config.js

@@ -0,0 +1,38 @@
+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'),
+    },
+    node: {
+      __dirname: false
+    }
+  },
+];

extensions/node-menu/Makefile

@@ -0,0 +1,8 @@
+install-deps:
+	yarn install
+
+build: install-deps
+	yarn run build
+
+test:
+	yarn run test

extensions/node-menu/package.json

@@ -0,0 +1,24 @@
+{
+  "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",
+    "test": "echo NO TESTS"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
+    "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,15 @@
+import { LensRendererExtension } from "@k8slens/extensions";
+import React from "react"
+import { NodeMenu, NodeMenuProps } from "./src/node-menu"
+
+export default class NodeMenuRendererExtension extends LensRendererExtension {
+  kubeObjectMenuItems = [
+    {
+      kind: "Node",
+      apiVersions: ["v1"],
+      components: {
+        MenuItem: (props: NodeMenuProps) => <NodeMenu {...props} />
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,73 @@
+import React from "react";
+import { Component, K8sApi, Navigation} from "@k8slens/extensions"
+
+export interface NodeMenuProps extends Component.KubeObjectMenuProps<K8sApi.Node> {
+}
+
+export function NodeMenu(props: NodeMenuProps) {
+  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,26 @@
+{
+  "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": [
+    "./*.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,8 @@
+install-deps:
+	yarn install
+
+build: install-deps
+	yarn run build
+
+test:
+	yarn run test

extensions/pod-menu/package.json

@@ -0,0 +1,24 @@
+{
+  "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",
+    "test": "echo NO TESTS"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2",
+    "mobx": "^5.15.5",
+    "react": "^16.13.1",
+    "@k8slens/extensions": "file:../../src/extensions/npm/extensions"
+  }
+}

extensions/pod-menu/renderer.tsx

@@ -0,0 +1,23 @@
+import { LensRendererExtension } from "@k8slens/extensions";
+import { PodShellMenu, PodShellMenuProps } from "./src/shell-menu"
+import { PodLogsMenu, PodLogsMenuProps } from "./src/logs-menu"
+import React from "react"
+
+export default class PodMenuRendererExtension extends LensRendererExtension {
+  kubeObjectMenuItems = [
+    {
+      kind: "Pod",
+      apiVersions: ["v1"],
+      components: {
+        MenuItem: (props: PodShellMenuProps) => <PodShellMenu {...props} />
+      }
+    },
+    {
+      kind: "Pod",
+      apiVersions: ["v1"],
+      components: {
+        MenuItem: (props: PodLogsMenuProps) => <PodLogsMenu {...props} />
+      }
+    }
+  ]
+}

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

@@ -0,0 +1,57 @@
+import React from "react";
+import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
+
+export interface PodLogsMenuProps extends Component.KubeObjectMenuProps<K8sApi.Pod> {
+}
+
+export class PodLogsMenu extends React.Component<PodLogsMenuProps> {
+  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,
+    });
+  }
+
+  render() {
+    const { object: pod, toolbar } = this.props
+    const containers = pod.getAllContainers();
+    const statuses = pod.getContainerStatuses();
+    if (!containers.length) return null;
+    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,63 @@
+
+
+import React from "react";
+import { Component, K8sApi, Util, Navigation } from "@k8slens/extensions";
+
+export interface PodShellMenuProps extends Component.KubeObjectMenuProps<K8sApi.Pod> {
+}
+
+export class PodShellMenu extends React.Component<PodShellMenuProps> {
+  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
+    const containers = object.getRunningContainers();
+    if (!containers.length) return null;
+    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,26 @@
+{
+  "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": [
+    "./*.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'),
+    },
+  },
+];

extensions/support-page/Makefile

@@ -0,0 +1,8 @@
+install-deps:
+	yarn install
+
+build: install-deps
+	yarn run build
+
+test:
+	yarn run test

extensions/support-page/main.ts

@@ -0,0 +1,14 @@
+import { LensMainExtension, windowManager } from "@k8slens/extensions";
+import { supportPageURL } from "./src/support.route";
+
+export default class SupportPageMainExtension extends LensMainExtension {
+  appMenus = [
+    {
+      parentId: "help",
+      label: "Support",
+      click() {
+        windowManager.navigate(supportPageURL());
+      }
+    }
+  ]
+}

extensions/support-page/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "lens-support-page",
+  "version": "0.1.0",
+  "description": "Lens support page",
+  "main": "dist/main.js",
+  "renderer": "dist/renderer.js",
+  "scripts": {
+    "build": "webpack -p",
+    "dev": "webpack --watch",
+    "test": "echo NO TESTS"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
+    "@types/node": "^14.11.11",
+    "@types/react": "^16.9.53",
+    "@types/react-router": "^5.1.8",
+    "@types/webpack": "^4.41.17",
+    "css-loader": "^5.0.0",
+    "mobx": "^5.15.5",
+    "react": "^16.13.1",
+    "sass-loader": "^10.0.4",
+    "style-loader": "^2.0.0",
+    "ts-loader": "^8.0.4",
+    "ts-node": "^9.0.0",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2"
+  }
+}

extensions/support-page/renderer.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import { Component, LensRendererExtension, Navigation } from "@k8slens/extensions";
+import { supportPageRoute, supportPageURL } from "./src/support.route";
+import { Support } from "./src/support";
+
+export default class SupportPageRendererExtension extends LensRendererExtension {
+  globalPages = [
+    {
+      ...supportPageRoute,
+      url: supportPageURL(),
+      hideInMenu: true,
+      components: {
+        Page: Support,
+      }
+    }
+  ]
+
+  statusBarItems = [
+    {
+      item: (
+        <div
+          className="flex align-center gaps hover-highlight"
+          onClick={() => Navigation.navigate(supportPageURL())}
+        >
+          <Component.Icon material="help" smallest />
+        </div>
+      )
+    }
+  ]
+}

extensions/support-page/src/support.route.ts

@@ -0,0 +1,7 @@
+import type { RouteProps } from "react-router";
+
+export const supportPageRoute: RouteProps = {
+  path: "/support"
+}
+
+export const supportPageURL = () => supportPageRoute.path.toString();

extensions/support-page/src/support.scss

@@ -0,0 +1,13 @@
+.PageLayout.Support {
+  a[target=_blank] {
+    text-decoration: none;
+    border-bottom: 1px solid;
+
+    &:after {
+      content: "launch";
+      font: small "Material Icons";
+      vertical-align: middle;
+      margin-left: 2px;
+    }
+  }
+}

extensions/support-page/src/support.tsx

@@ -0,0 +1,29 @@
+// TODO: support localization / figure out how to extract / consume i18n strings
+
+import "./support.scss"
+import React from "react"
+import { observer } from "mobx-react"
+import { App, Component } from "@k8slens/extensions";
+
+@observer
+export class Support extends React.Component {
+  render() {
+    const { PageLayout } = Component;
+    const { slackUrl, issuesTrackerUrl } = App;
+    return (
+      <PageLayout showOnTop className="Support" header={<h2>Support</h2>}>
+        <h2>Community Slack Channel</h2>
+        <p>
+          Ask a question, see what's being discussed, join the conversation <a href={slackUrl} target="_blank">here</a>
+        </p>
+
+        <h2>Report an Issue</h2>
+        <p>
+          Review existing issues or open a new one <a href={issuesTrackerUrl} target="_blank">here</a>
+        </p>
+
+        {/*<h2><Trans>Commercial Support</Trans></h2>*/}
+      </PageLayout>
+    );
+  }
+}

extensions/support-page/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": ".",
+    "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",
+    "paths": {
+      "*": [
+        "node_modules/*",
+        "../../types/*"
+      ]
+    }
+  },
+  "include": [
+    "renderer.tsx",
+    "src/**/*"
+  ]
+}

extensions/support-page/webpack.config.ts

@@ -0,0 +1,75 @@
+import path from "path"
+
+const outputPath = path.resolve(__dirname, 'dist');
+
+const lensExternals = {
+  "@k8slens/extensions": "var global.LensExtensions",
+  "react": "var global.React",
+  "mobx": "var global.Mobx",
+  "mobx-react": "var global.MobxReact",
+};
+
+export default [
+  {
+    entry: './main.ts',
+    context: __dirname,
+    target: "electron-main",
+    mode: "production",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+      ],
+    },
+    externals: [
+      lensExternals,
+    ],
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      globalObject: "this",
+      filename: 'main.js',
+      path: outputPath,
+    },
+  },
+  {
+    entry: './renderer.tsx',
+    context: __dirname,
+    target: "electron-renderer",
+    mode: "production",
+    module: {
+      rules: [
+        {
+          test: /\.tsx?$/,
+          use: 'ts-loader',
+          exclude: /node_modules/,
+        },
+        {
+          test: /\.s?css$/,
+          use: [
+            "style-loader",
+            "css-loader",
+            "sass-loader",
+          ]
+        }
+      ],
+    },
+    externals: [
+      lensExternals,
+    ],
+    resolve: {
+      extensions: ['.tsx', '.ts', '.js'],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      globalObject: "this",
+      filename: 'renderer.js',
+      path: outputPath,
+    },
+  },
+];

extensions/telemetry/Makefile

@@ -0,0 +1,8 @@
+install-deps:
+	yarn install
+
+build: install-deps
+	yarn run build
+
+test:
+	yarn run test

extensions/telemetry/main.ts

@@ -0,0 +1,18 @@
+import { LensMainExtension } from "@k8slens/extensions";
+import { telemetryPreferencesStore } from "./src/telemetry-preferences-store"
+import { tracker } from "./src/tracker";
+
+export default class TelemetryMainExtension extends LensMainExtension {
+
+  async onActivate() {
+    console.log("telemetry main extension activated")
+    tracker.start()
+    tracker.reportPeriodically()
+    await telemetryPreferencesStore.loadExtension(this)
+  }
+
+  onDeactivate() {
+    tracker.stop()
+    console.log("telemetry main extension deactivated")
+  }
+}

extensions/telemetry/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "lens-telemetry",
+  "version": "0.1.0",
+  "description": "Lens telemetry",
+  "main": "dist/main.js",
+  "renderer": "dist/renderer.js",
+  "lens": {
+    "metadata": {},
+    "styles": []
+  },
+  "scripts": {
+    "build": "webpack -p",
+    "dev": "webpack --watch",
+    "test": "echo NO TESTS"
+  },
+  "dependencies": {},
+  "devDependencies": {
+    "@k8slens/extensions": "file:../../src/extensions/npm/extensions",
+    "@types/analytics-node": "^3.1.3",
+    "ts-loader": "^8.0.4",
+    "typescript": "^4.0.3",
+    "webpack": "^4.44.2",
+    "mobx": "^5.15.5",
+    "react": "^16.13.1",
+    "node-machine-id": "^1.1.12",
+    "universal-analytics": "^0.4.23",
+    "analytics-node": "^3.4.0-beta.3"
+  }
+}

extensions/telemetry/renderer.tsx

@@ -0,0 +1,23 @@
+import { LensRendererExtension } from "@k8slens/extensions";
+import { telemetryPreferencesStore } from "./src/telemetry-preferences-store"
+import { TelemetryPreferenceHint, TelemetryPreferenceInput } from "./src/telemetry-preference"
+import { tracker } from "./src/tracker"
+import React from "react"
+
+export default class TelemetryRendererExtension extends LensRendererExtension {
+  appPreferences = [
+    {
+      title: "Telemetry & Usage Tracking",
+      components: {
+        Hint: () => <TelemetryPreferenceHint/>,
+        Input: () => <TelemetryPreferenceInput telemetry={telemetryPreferencesStore}/>
+      }
+    }
+  ];
+
+  async onActivate() {
+    console.log("telemetry extension activated")
+    tracker.start()
+    await telemetryPreferencesStore.loadExtension(this)
+  }
+}

extensions/telemetry/src/telemetry-preference.tsx

@@ -0,0 +1,26 @@
+import { Component } from "@k8slens/extensions"
+import React from "react"
+import { observer } from "mobx-react";
+import { TelemetryPreferencesStore } from "./telemetry-preferences-store"
+
+@observer
+export class TelemetryPreferenceInput extends React.Component<{telemetry: TelemetryPreferencesStore}, {}> {
+  render() {
+    const { telemetry } = this.props
+    return (
+      <Component.Checkbox
+        label="Allow telemetry & usage tracking"
+        value={telemetry.enabled}
+        onChange={v => { telemetry.enabled = v; }}
+      />
+    )
+  }
+}
+
+export class TelemetryPreferenceHint extends React.Component {
+  render() {
+    return (
+      <span>Telemetry & usage data is collected to continuously improve the Lens experience.</span>
+    )
+  }
+}

extensions/telemetry/src/telemetry-preferences-store.ts

@@ -0,0 +1,35 @@
+import { Store } from "@k8slens/extensions";
+import { toJS } from "mobx"
+
+export type TelemetryPreferencesModel = {
+  enabled: boolean;
+}
+
+export class TelemetryPreferencesStore extends Store.ExtensionStore<TelemetryPreferencesModel> {
+  private constructor() {
+    super({
+      configName: "preferences-store",
+      defaults: {
+        enabled: true
+      }
+    })
+  }
+
+  get enabled() {
+    return this.data.enabled
+  }
+
+  set enabled(v: boolean) {
+    this.data.enabled = v
+  }
+
+  toJSON(): TelemetryPreferencesModel {
+    return toJS({
+      enabled: this.data.enabled
+    }, {
+      recurseEverything: true
+    })
+  }
+}
+
+export const telemetryPreferencesStore = TelemetryPreferencesStore.getInstance<TelemetryPreferencesStore>()

extensions/telemetry/src/tracker.ts

@@ -0,0 +1,151 @@
+import { EventBus, Util, Store, App } from "@k8slens/extensions"
+import ua from "universal-analytics"
+import Analytics from "analytics-node"
+import { machineIdSync } from "node-machine-id"
+import { telemetryPreferencesStore } from "./telemetry-preferences-store"
+
+export class Tracker extends Util.Singleton {
+  static readonly GA_ID = "UA-159377374-1"
+  static readonly SEGMENT_KEY = "YENwswyhlOgz8P7EFKUtIZ2MfON7Yxqb"
+  protected eventHandlers: Array<(ev: EventBus.AppEvent ) => void> = []
+  protected started = false
+  protected visitor: ua.Visitor
+  protected analytics: Analytics
+  protected machineId: string = null;
+  protected ip: string = null;
+  protected appVersion: string;
+  protected locale: string;
+  protected userAgent: string;
+  protected anonymousId: string;
+  protected os: string
+
+  protected reportInterval: NodeJS.Timeout
+
+  private constructor() {
+    super();
+    this.anonymousId = machineIdSync()
+    this.os = this.resolveOS()
+    this.userAgent = `Lens ${App.version} (${this.os})`
+    try {
+      this.visitor = ua(Tracker.GA_ID, this.anonymousId, { strictCidFormat: false })
+    } catch (error) {
+      this.visitor = ua(Tracker.GA_ID)
+    }
+
+    this.analytics = new Analytics(Tracker.SEGMENT_KEY, { flushAt: 1 })
+    this.visitor.set("dl", "https://telemetry.k8slens.dev")
+    this.visitor.set("ua", this.userAgent)
+  }
+
+  start() {
+    if (this.started === true) { return }
+
+    this.started = true
+
+    const handler = (ev: EventBus.AppEvent) => {
+      this.event(ev.name, ev.action, ev.params)
+    }
+    this.eventHandlers.push(handler)
+    EventBus.appEventBus.addListener(handler)
+  }
+
+  reportPeriodically() {
+    this.reportInterval = setInterval(() => {
+      this.reportData()
+    }, 60 * 60 * 1000) // report every 1h
+  }
+
+  stop() {
+    if (!this.started) { return }
+
+    this.started = false
+
+    for (const handler of this.eventHandlers) {
+      EventBus.appEventBus.removeListener(handler)
+    }
+    if (this.reportInterval) {
+      clearInterval(this.reportInterval)
+    }
+  }
+
+  protected async isTelemetryAllowed(): Promise<boolean> {
+    return telemetryPreferencesStore.enabled
+  }
+
+  protected reportData() {
+    const clustersList = Store.clusterStore.enabledClustersList
+
+    this.event("generic-data", "report", {
+      appVersion: App.version,
+      os: this.os,
+      clustersCount: clustersList.length,
+      workspacesCount: Store.workspaceStore.enabledWorkspacesList.length
+    })
+
+    clustersList.forEach((cluster) => {
+      if (!cluster?.metadata.lastSeen) { return }
+      this.reportClusterData(cluster)
+    })
+  }
+
+  protected reportClusterData(cluster: Store.ClusterModel) {
+    this.event("cluster-data", "report", {
+      id: cluster.metadata.id,
+      managed: !!cluster.ownerRef,
+      kubernetesVersion: cluster.metadata.version,
+      distribution: cluster.metadata.distribution,
+      nodesCount: cluster.metadata.nodes,
+      lastSeen: cluster.metadata.lastSeen
+    })
+  }
+
+  protected resolveOS() {
+    let os = ""
+    if (App.isMac) {
+      os = "MacOS"
+    } else if(App.isWindows) {
+      os = "Windows"
+    } else if (App.isLinux) {
+      os = "Linux"
+      if (App.isSnap) {
+        os += "; Snap"
+      } else {
+        os += "; AppImage"
+      }
+    } else {
+      os = "Unknown"
+    }
+    return os
+  }
+
+  protected async event(eventCategory: string, eventAction: string, otherParams = {}) {
+    try {
+      const allowed = await this.isTelemetryAllowed();
+      if (!allowed) {
+        return;
+      }
+      this.visitor.event({
+        ec: eventCategory,
+        ea: eventAction,
+        ...otherParams,
+      }).send()
+
+      this.analytics.track({
+        anonymousId: this.anonymousId,
+        event: `${eventCategory} ${eventAction}`,
+        context: {
+          userAgent: this.userAgent,
+        },
+        properties: {
+          category: eventCategory,
+          ...otherParams,
+        },
+
+      })
+    } catch (err) {
+      console.error(`Failed to track "${eventCategory}:${eventAction}"`, err)
+    }
+  }
+}
+
+export const tracker = Tracker.getInstance<Tracker>();

extensions/telemetry/tsconfig.json

@@ -0,0 +1,29 @@
+{
+  "compilerOptions": {
+    "outDir": "dist",
+    "baseUrl": ".",
+    "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",
+    "paths": {
+      "*": [
+        "node_modules/*",
+        "../../types/*"
+      ]
+    }
+  },
+  "include": [
+    "renderer.ts",
+    "src/**/*"
+  ]
+}

extensions/telemetry/webpack.config.js

@@ -0,0 +1,67 @@
+const path = require('path');
+
+module.exports = [
+  {
+    entry: './main.ts',
+    context: __dirname,
+    target: "electron-main",
+    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: 'main.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+  },
+  {
+    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",
+        "mobx-react": "var global.MobxReact"
+      }
+    ],
+    resolve: {
+      extensions: [ '.tsx', '.ts', '.js' ],
+    },
+    output: {
+      libraryTarget: "commonjs2",
+      globalObject: "this",
+      filename: 'renderer.js',
+      path: path.resolve(__dirname, 'dist'),
+    },
+  },
+];

integration/__tests__/app.tests.ts

@@ -8,8 +8,8 @@ import { Application } from "spectron"
 import * as util from "../helpers/utils"
 import { spawnSync } from "child_process"
 
-const describeif = (condition : boolean) => condition ? describe : describe.skip
-const itif = (condition : boolean) => condition ? it : it.skip
+const describeif = (condition: boolean) => condition ? describe : describe.skip
+const itif = (condition: boolean) => condition ? it : it.skip
 
 jest.setTimeout(60000)
 
@@ -29,7 +29,7 @@ describe("Lens integration tests", () => {
   }
 
   const clickWhatsNew = async (app: Application) => {
-    await app.client.waitUntilTextExists("h1", "What's new")
+    await app.client.waitUntilTextExists("h1", "What's new?")
     await app.client.click("button.primary")
     await app.client.waitUntilTextExists("h1", "Welcome")
   }
@@ -151,7 +151,7 @@ describe("Lens integration tests", () => {
         }
       })
 
-      const tests : {
+      const tests: {
         drawer?: string
         drawerId?: string
         pages: {
@@ -160,21 +160,20 @@ describe("Lens integration tests", () => {
           expectedSelector: string,
           expectedText: string
         }[]
-      }[] = [
-        {
+      }[] = [{
         drawer: "",
         drawerId: "",
-          pages: [ {
+        pages: [{
           name: "Cluster",
           href: "cluster",
-            expectedSelector: "div.ClusterNoMetrics p",
-            expectedText: "Metrics are not available due"
+          expectedSelector: "div.Cluster div.label",
+          expectedText: "Master"
         }]
       },
       {
         drawer: "",
         drawerId: "",
-          pages: [ {
+        pages: [{
           name: "Nodes",
           href: "nodes",
           expectedSelector: "h5.title",
@@ -184,7 +183,7 @@ describe("Lens integration tests", () => {
       {
         drawer: "Workloads",
         drawerId: "workloads",
-          pages: [ {
+        pages: [{
           name: "Overview",
           href: "workloads",
           expectedSelector: "h5.box",
@@ -225,12 +224,12 @@ describe("Lens integration tests", () => {
           href: "cronjobs",
           expectedSelector: "h5.title",
           expectedText: "Cron Jobs"
-          } ]
+        }]
       },
       {
         drawer: "Configuration",
         drawerId: "config",
-          pages: [ {
+        pages: [{
           name: "ConfigMaps",
           href: "configmaps",
           expectedSelector: "h5.title",
@@ -259,12 +258,12 @@ describe("Lens integration tests", () => {
           href: "poddisruptionbudgets",
           expectedSelector: "h5.title",
           expectedText: "Pod Disruption Budgets"
-          } ]
+        }]
       },
       {
         drawer: "Network",
         drawerId: "networks",
-          pages: [ {
+        pages: [{
           name: "Services",
           href: "services",
           expectedSelector: "h5.title",
@@ -287,12 +286,12 @@ describe("Lens integration tests", () => {
           href: "network-policies",
           expectedSelector: "h5.title",
           expectedText: "Network Policies"
-          } ]
+        }]
       },
       {
         drawer: "Storage",
         drawerId: "storage",
-          pages: [ {
+        pages: [{
           name: "Persistent Volume Claims",
           href: "persistent-volume-claims",
           expectedSelector: "h5.title",
@@ -309,12 +308,12 @@ describe("Lens integration tests", () => {
           href: "storage-classes",
           expectedSelector: "h5.title",
           expectedText: "Storage Classes"
-          } ]
+        }]
       },
       {
         drawer: "",
         drawerId: "",
-          pages: [ {
+        pages: [{
           name: "Namespaces",
           href: "namespaces",
           expectedSelector: "h5.title",
@@ -324,7 +323,7 @@ describe("Lens integration tests", () => {
       {
         drawer: "",
         drawerId: "",
-          pages: [ {
+        pages: [{
           name: "Events",
           href: "events",
           expectedSelector: "h5.title",
@@ -334,7 +333,7 @@ describe("Lens integration tests", () => {
       {
         drawer: "Apps",
         drawerId: "apps",
-          pages: [ {
+        pages: [{
           name: "Charts",
           href: "apps/charts",
           expectedSelector: "div.HelmCharts input",
@@ -345,12 +344,12 @@ describe("Lens integration tests", () => {
           href: "apps/releases",
           expectedSelector: "h5.title",
           expectedText: "Releases"
-          } ]
+        }]
       },
       {
         drawer: "Access Control",
         drawerId: "users",
-          pages: [ {
+        pages: [{
           name: "Service Accounts",
           href: "service-accounts",
           expectedSelector: "h5.title",
@@ -373,31 +372,30 @@ describe("Lens integration tests", () => {
           href: "pod-security-policies",
           expectedSelector: "h5.title",
           expectedText: "Pod Security Policies"
-          } ]
+        }]
       },
       {
         drawer: "Custom Resources",
         drawerId: "custom-resources",
-          pages: [ {
+        pages: [{
           name: "Definitions",
           href: "crd/definitions",
           expectedSelector: "h5.title",
           expectedText: "Custom Resources"
-          } ]
-        },
-      ];
+        }]
+      }];
       tests.forEach(({ drawer = "", drawerId = "", pages }) => {
         if (drawer !== "") {
           it(`shows ${drawer} drawer`, async () => {
             expect(clusterAdded).toBe(true)
             await app.client.click(`.sidebar-nav #${drawerId} span.link-text`)
-            await app.client.waitUntilTextExists(`a[href="/${pages[0].href}"]`, pages[0].name)
+            await app.client.waitUntilTextExists(`a[href^="/${pages[0].href}"]`, pages[0].name)
           })
         }
-        pages.forEach(({name, href, expectedSelector, expectedText}) => {
+        pages.forEach(({ name, href, expectedSelector, expectedText }) => {
           it(`shows ${drawer}->${name} page`, async () => {
             expect(clusterAdded).toBe(true)
-            await app.client.click(`a[href="/${href}"]`)
+            await app.client.click(`a[href^="/${href}"]`)
             await app.client.waitUntilTextExists(expectedSelector, expectedText)
           })
         })
@@ -406,7 +404,7 @@ describe("Lens integration tests", () => {
           it(`hides ${drawer} drawer`, async () => {
             expect(clusterAdded).toBe(true)
             await app.client.click(`.sidebar-nav #${drawerId} span.link-text`)
-            await expect(app.client.waitUntilTextExists(`a[href="/${pages[0].href}"]`, pages[0].name, 100)).rejects.toThrow()
+            await expect(app.client.waitUntilTextExists(`a[href^="/${pages[0].href}"]`, pages[0].name, 100)).rejects.toThrow()
           })
         }
       })
@@ -442,8 +440,8 @@ describe("Lens integration tests", () => {
       it(`creates a pod in ${TEST_NAMESPACE} namespace`, async () => {
         expect(clusterAdded).toBe(true)
         await app.client.click(".sidebar-nav #workloads span.link-text")
-        await app.client.waitUntilTextExists('a[href="/pods"]', "Pods")
-        await app.client.click('a[href="/pods"]')
+        await app.client.waitUntilTextExists('a[href^="/pods"]', "Pods")
+        await app.client.click('a[href^="/pods"]')
         await app.client.waitUntilTextExists("div.TableCell", "kube-apiserver")
         await app.client.click('.Icon.new-dock-tab')
         await app.client.waitUntilTextExists("li.MenuItem.create-resource-tab", "Create resource")

integration/helpers/utils.ts

@@ -1,26 +1,18 @@
 import { Application } from "spectron";
 
-let appPath = ""
-switch(process.platform) {
-case "win32":
-  appPath = "./dist/win-unpacked/Lens.exe"
-  break
-case "linux":
-  appPath = "./dist/linux-unpacked/kontena-lens"
-  break
-case "darwin":
-  appPath = "./dist/mac/Lens.app/Contents/MacOS/Lens"
-  break
+const AppPaths: Partial<Record<NodeJS.Platform, string>> = {
+  "win32": "./dist/win-unpacked/Lens.exe",
+  "linux": "./dist/linux-unpacked/kontena-lens",
+  "darwin": "./dist/mac/Lens.app/Contents/MacOS/Lens",
 }
 
 export function setup(): Application {
   return new Application({
     // path to electron app
     args: [],
-    path: appPath,
+    path: AppPaths[process.platform],
     startTimeout: 30000,
-    waitTimeout: 30000,
-    chromeDriverArgs: ['remote-debugging-port=9222'],
+    waitTimeout: 60000,
     env: {
       CICD: "true"
     }
@@ -28,11 +20,12 @@ export function setup(): Application {
 }
 
 export async function tearDown(app: Application) {
-  const pid = app.mainProcess.pid
+  let mpid: any = app.mainProcess.pid
+  let pid = await mpid()
   await app.stop()
   try {
-    process.kill(pid, 0);
-  } catch(e) {
-    return
+    process.kill(pid, "SIGKILL");
+  } catch (e) {
+    console.error(e)
   }
 }

package.json

@@ -2,7 +2,7 @@
   "name": "kontena-lens",
   "productName": "Lens",
   "description": "Lens - The Kubernetes IDE",
-  "version": "3.6.5-rc.1",
+  "version": "4.0.0-alpha.3",
   "main": "static/build/main.js",
   "copyright": "© 2020, Mirantis, Inc.",
   "license": "MIT",
@@ -11,14 +11,18 @@
     "email": "info@k8slens.dev"
   },
   "scripts": {
-    "dev": "concurrently -k \"yarn dev-run -C\" \"yarn dev:main\" \"yarn dev:renderer\"",
+    "dev": "concurrently -k \"yarn dev-run -C\" yarn:dev:*",
+    "dev-build": "concurrently yarn:compile:*",
     "dev-run": "nodemon --watch static/build/main.js --exec \"electron --inspect .\"",
     "dev:main": "yarn compile:main --watch",
     "dev:renderer": "yarn compile:renderer --watch",
+    "dev:extension-types": "yarn compile:extension-types --watch",
     "compile": "env NODE_ENV=production concurrently yarn:compile:*",
     "compile:main": "webpack --config webpack.main.ts",
     "compile:renderer": "webpack --config webpack.renderer.ts",
     "compile:i18n": "lingui compile",
+    "compile:extension-types": "rollup --config src/extensions/rollup.config.js",
+    "npm:fix-package-version": "ts-node build/set_npm_version.ts",
     "build:linux": "yarn compile && electron-builder --linux --dir -c.productName=Lens",
     "build:mac": "yarn compile && electron-builder --mac --dir -c.productName=Lens",
     "build:win": "yarn compile && electron-builder --win --dir -c.productName=Lens",
@@ -32,8 +36,8 @@
     "download-bins": "concurrently yarn:download:*",
     "download:kubectl": "yarn run ts-node build/download_kubectl.ts",
     "download:helm": "yarn run ts-node build/download_helm.ts",
-    "lint": "eslint $@ --ext js,ts,tsx --max-warnings=0  src/",
-    "rebuild-pty": "yarn run electron-rebuild -f -w node-pty"
+    "build:tray-icons": "yarn run ts-node build/build_tray_icon.ts",
+    "lint": "eslint $@ --ext js,ts,tsx --max-warnings=0  src/"
   },
   "config": {
     "bundledKubectlVersion": "1.17.11",
@@ -60,7 +64,6 @@
     ]
   },
   "jest": {
-    "testRegex": ".*_(spec|test)\\.[jt]sx?$",
     "collectCoverage": false,
     "verbose": true,
     "testEnvironment": "node",
@@ -68,10 +71,20 @@
       "^.+\\.tsx?$": "ts-jest"
     },
     "moduleNameMapper": {
-      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts"
-    }
+      "\\.(css|scss)$": "<rootDir>/__mocks__/styleMock.ts",
+      "^@lingui/macro$": "<rootDir>/__mocks__/@linguiMacro.ts"
+    },
+    "modulePathIgnorePatterns": [
+      "<rootDir>/dist"
+    ],
+    "setupFiles": [
+      "<rootDir>/src/jest.setup.ts"
+    ]
   },
   "build": {
+    "files": [
+      "static/build/main.js"
+    ],
     "afterSign": "build/notarize.js",
     "extraResources": [
       {
@@ -89,6 +102,19 @@
         "to": "static/",
         "filter": "!**/main.js"
       },
+      {
+        "from": "build/tray",
+        "to": "static/icons",
+        "filter": "*.png"
+      },
+      {
+        "from": "extensions/",
+        "to": "./extensions/",
+        "filter": [
+          "**/*.js*",
+          "!**/node_modules"
+        ]
+      },
       "LICENSE"
     ],
     "linux": {
@@ -157,6 +183,16 @@
       "confinement": "classic"
     }
   },
+  "lens": {
+    "extensions": [
+      "telemetry",
+      "pod-menu",
+      "node-menu",
+      "metrics-cluster-feature",
+      "license-menu-item",
+      "support-page"
+    ]
+  },
   "dependencies": {
     "@hapi/call": "^8.0.0",
     "@hapi/subtext": "^7.0.3",
@@ -166,6 +202,7 @@
     "@types/fs-extra": "^9.0.1",
     "@types/http-proxy": "^1.17.4",
     "@types/js-yaml": "^3.12.4",
+    "@types/jsdom": "^16.2.4",
     "@types/jsonpath": "^0.2.0",
     "@types/lodash": "^4.14.155",
     "@types/marked": "^0.7.4",
@@ -176,6 +213,7 @@
     "@types/tar": "^4.0.3",
     "array-move": "^3.0.0",
     "chalk": "^4.1.0",
+    "command-exists": "1.2.9",
     "conf": "^7.0.1",
     "crypto-js": "^4.0.0",
     "electron-updater": "^4.3.1",
@@ -185,8 +223,8 @@
     "fs-extra": "^9.0.1",
     "handlebars": "^4.7.6",
     "http-proxy": "^1.18.1",
-    "immer": "^7.0.5",
     "js-yaml": "^3.14.0",
+    "jsdom": "^16.4.0",
     "jsonpath": "^1.0.2",
     "lodash": "^4.17.15",
     "mac-ca": "^1.0.4",
@@ -195,13 +233,11 @@
     "mobx": "^5.15.5",
     "mobx-observable-history": "^1.0.3",
     "mock-fs": "^4.12.0",
-    "node-machine-id": "^1.1.12",
     "node-pty": "^0.9.0",
+    "npm": "^6.14.8",
     "openid-client": "^3.15.2",
     "path-to-regexp": "^6.1.0",
     "proper-lockfile": "^4.1.1",
-    "react-beautiful-dnd": "^13.0.0",
-    "react-router": "^5.2.0",
     "request": "^2.88.2",
     "request-promise-native": "^1.0.8",
     "semver": "^7.3.2",
@@ -211,7 +247,6 @@
     "tar": "^6.0.2",
     "tcp-port-used": "^1.0.1",
     "tempy": "^0.5.0",
-    "universal-analytics": "^0.4.20",
     "uuid": "^8.1.0",
     "win-ca": "^3.2.0",
     "winston": "^3.2.1",
@@ -232,27 +267,46 @@
     "@lingui/macro": "^3.0.0-13",
     "@lingui/react": "^3.0.0-13",
     "@material-ui/core": "^4.10.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@testing-library/jest-dom": "^5.11.5",
+    "@testing-library/react": "^11.1.0",
     "@types/chart.js": "^2.9.21",
     "@types/circular-dependency-plugin": "^5.0.1",
     "@types/color": "^3.0.1",
+    "@types/crypto-js": "^3.1.47",
     "@types/dompurify": "^2.0.2",
+    "@types/electron-window-state": "^2.0.34",
+    "@types/fs-extra": "^9.0.1",
     "@types/hapi": "^18.0.3",
     "@types/hoist-non-react-statics": "^3.3.1",
     "@types/html-webpack-plugin": "^3.2.3",
+    "@types/http-proxy": "^1.17.4",
     "@types/jest": "^25.2.3",
+    "@types/js-yaml": "^3.12.4",
+    "@types/jsonpath": "^0.2.0",
+    "@types/lodash": "^4.14.155",
+    "@types/marked": "^0.7.4",
     "@types/material-ui": "^0.21.7",
     "@types/md5-file": "^4.0.2",
     "@types/mini-css-extract-plugin": "^0.9.1",
+    "@types/mock-fs": "^4.10.0",
+    "@types/module-alias": "^2.0.0",
+    "@types/node": "^12.12.45",
+    "@types/npm": "^2.0.31",
     "@types/progress-bar-webpack-plugin": "^2.1.0",
+    "@types/proper-lockfile": "^4.1.1",
     "@types/react": "^16.9.35",
+    "@types/react-beautiful-dnd": "^13.0.0",
     "@types/react-router-dom": "^5.1.5",
     "@types/react-select": "^3.0.13",
     "@types/react-window": "^1.8.2",
     "@types/request": "^2.48.5",
     "@types/request-promise-native": "^1.0.17",
     "@types/semver": "^7.2.0",
+    "@types/sharp": "^0.26.0",
     "@types/shelljs": "^0.8.8",
     "@types/spdy": "^3.4.4",
+    "@types/tar": "^4.0.3",
     "@types/tcp-port-used": "^1.0.0",
     "@types/tempy": "^0.3.0",
     "@types/terser-webpack-plugin": "^3.0.0",
@@ -280,7 +334,6 @@
     "electron": "^9.1.2",
     "electron-builder": "^22.7.0",
     "electron-notarize": "^0.3.0",
-    "electron-rebuild": "^1.11.0",
     "eslint": "^7.7.0",
     "file-loader": "^6.0.0",
     "flex.box": "^3.4.4",
@@ -290,8 +343,9 @@
     "identity-obj-proxy": "^3.0.0",
     "include-media": "^1.4.9",
     "jest": "^26.0.1",
+    "jest-fetch-mock": "^3.0.3",
+    "jest-mock-extended": "^1.0.10",
     "make-plural": "^6.2.1",
-    "material-design-icons": "^3.0.1",
     "mini-css-extract-plugin": "^0.9.0",
     "mobx-react": "^6.2.2",
     "moment": "^2.26.0",
@@ -302,12 +356,19 @@
     "postinstall-postinstall": "^2.1.0",
     "progress-bar-webpack-plugin": "^2.1.0",
     "raw-loader": "^4.0.1",
-    "react": "^16.13.1",
+    "react": "^16.14.0",
+    "react-beautiful-dnd": "^13.0.0",
     "react-dom": "^16.13.1",
+    "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "react-select": "^3.1.0",
     "react-window": "^1.8.5",
+    "rollup": "^2.28.2",
+    "rollup-plugin-dts": "^1.4.13",
+    "rollup-plugin-ignore-import": "^1.3.2",
+    "rollup-pluginutils": "^2.8.2",
     "sass-loader": "^8.0.2",
+    "sharp": "^0.26.1",
     "spectron": "11.0.0",
     "style-loader": "^1.2.1",
     "terser-webpack-plugin": "^3.0.3",

src/common/__tests__/cluster-store.test.ts

@@ -1,9 +1,9 @@
 import fs from "fs";
 import mockFs from "mock-fs";
 import yaml from "js-yaml";
-import { Cluster } from "../main/cluster";
-import { ClusterStore } from "./cluster-store";
-import { workspaceStore } from "./workspace-store";
+import { Cluster } from "../../main/cluster";
+import { ClusterStore } from "../cluster-store";
+import { workspaceStore } from "../workspace-store";
 
 const testDataIcon = fs.readFileSync("test-data/cluster-store-migration-icon.png")
 
@@ -12,7 +12,7 @@ console.log("") // fix bug
 let clusterStore: ClusterStore;
 
 describe("empty config", () => {
-  beforeAll(() => {
+  beforeEach(() => {
     ClusterStore.resetInstance();
     const mockOpts = {
       'tmp': {
@@ -24,27 +24,32 @@ describe("empty config", () => {
     return clusterStore.load();
   })
 
-  afterAll(() => {
+  afterEach(() => {
     mockFs.restore();
   })
 
-  it("adds new cluster to store", async () => {
-    const cluster = new Cluster({
+  describe("with foo cluster added", () => {
+    beforeEach(() => {
+      clusterStore.addCluster(
+        new Cluster({
           id: "foo",
           contextName: "minikube",
           preferences: {
             terminalCWD: "/tmp",
-        icon: "data:;base64,iVBORw0KGgoAAAANSUhEUgAAA1wAAAKoCAYAAABjkf5",
+            icon: "data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAA1wAAAKoCAYAAABjkf5",
             clusterName: "minikube"
           },
           kubeConfigPath: ClusterStore.embedCustomKubeConfig("foo", "fancy foo config"),
           workspace: workspaceStore.currentWorkspaceId
-    });
-    clusterStore.addCluster(cluster);
-    const storedCluster = clusterStore.getById(cluster.id);
-    expect(storedCluster.id).toBe(cluster.id);
-    expect(storedCluster.preferences.terminalCWD).toBe(cluster.preferences.terminalCWD);
-    expect(storedCluster.preferences.icon).toBe(cluster.preferences.icon);
+        })
+      );
+    })
+
+    it("adds new cluster to store", async () => {
+      const storedCluster = clusterStore.getById("foo");
+      expect(storedCluster.id).toBe("foo");
+      expect(storedCluster.preferences.terminalCWD).toBe("/tmp");
+      expect(storedCluster.preferences.icon).toBe("data:image/jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAA1wAAAKoCAYAAABjkf5");
     })
 
     it("adds cluster to default workspace", () => {
@@ -52,8 +57,21 @@ describe("empty config", () => {
       expect(storedCluster.workspace).toBe("default");
     })
 
-  it("check if store can contain multiple clusters", () => {
-    const prodCluster = new Cluster({
+    it("removes cluster from store", async () => {
+      await clusterStore.removeById("foo");
+      expect(clusterStore.getById("foo")).toBeUndefined();
+    })
+
+    it("sets active cluster", () => {
+      clusterStore.setActive("foo");
+      expect(clusterStore.active.id).toBe("foo");
+    })
+  })
+
+  describe("with prod and dev clusters added", () => {
+    beforeEach(() => {
+      clusterStore.addClusters(
+        new Cluster({
           id: "prod",
           contextName: "prod",
           preferences: {
@@ -61,8 +79,8 @@ describe("empty config", () => {
           },
           kubeConfigPath: ClusterStore.embedCustomKubeConfig("prod", "fancy config"),
           workspace: "workstation"
-    });
-    const devCluster = new Cluster({
+        }),
+        new Cluster({
           id: "dev",
           contextName: "dev",
           preferences: {
@@ -70,27 +88,24 @@ describe("empty config", () => {
           },
           kubeConfigPath: ClusterStore.embedCustomKubeConfig("dev", "fancy config"),
           workspace: "workstation"
-    });
-    clusterStore.addCluster(prodCluster);
-    clusterStore.addCluster(devCluster);
+        })
+      )
+    })
+
+    it("check if store can contain multiple clusters", () => {
       expect(clusterStore.hasClusters()).toBeTruthy();
-    expect(clusterStore.clusters.size).toBe(3);
+      expect(clusterStore.clusters.size).toBe(2);
     });
 
     it("gets clusters by workspaces", () => {
       const wsClusters = clusterStore.getByWorkspaceId("workstation");
       const defaultClusters = clusterStore.getByWorkspaceId("default");
-    expect(defaultClusters.length).toBe(1);
+      expect(defaultClusters.length).toBe(0);
       expect(wsClusters.length).toBe(2);
       expect(wsClusters[0].id).toBe("prod");
       expect(wsClusters[1].id).toBe("dev");
     })
 
-  it("sets active cluster", () => {
-    clusterStore.setActive("foo");
-    expect(clusterStore.activeCluster.id).toBe("foo");
-  })
-
     it("check if cluster's kubeconfig file saved", () => {
       const file = ClusterStore.embedCustomKubeConfig("boo", "kubeconfig");
       expect(fs.readFileSync(file, "utf8")).toBe("kubeconfig");
@@ -104,7 +119,7 @@ describe("empty config", () => {
       expect(clusters[0].preferences.iconOrder).toBe(0)
       expect(clusters[1].id).toBe("dev")
       expect(clusters[1].preferences.iconOrder).toBe(1)
-  });
+    })
 
     it("check if reorderring works for different from and to", () => {
       clusterStore.swapIconOrders("workstation", 0, 1)
@@ -114,19 +129,15 @@ describe("empty config", () => {
       expect(clusters[0].preferences.iconOrder).toBe(0)
       expect(clusters[1].id).toBe("prod")
       expect(clusters[1].preferences.iconOrder).toBe(1)
-  });
+    })
 
     it("check if after icon reordering, changing workspaces still works", () => {
       clusterStore.swapIconOrders("workstation", 1, 1)
       clusterStore.getById("prod").workspace = "default"
 
       expect(clusterStore.getByWorkspaceId("workstation").length).toBe(1);
-    expect(clusterStore.getByWorkspaceId("default").length).toBe(2);
-  });
-
-  it("removes cluster from store", async () => {
-    await clusterStore.removeById("foo");
-    expect(clusterStore.getById("foo")).toBeUndefined();
+      expect(clusterStore.getByWorkspaceId("default").length).toBe(1);
+    })
   })
 })
 

src/common/__tests__/event-bus.test.ts

@@ -0,0 +1,15 @@
+import { appEventBus, AppEvent } from "../event-bus"
+
+describe("event bus tests", () => {
+  describe("emit", () => {
+    it("emits an event", () => {
+      let event: AppEvent = null
+      appEventBus.addListener((data) => {
+        event = data
+      })
+
+      appEventBus.emit({name: "foo", action: "bar"})
+      expect(event.name).toBe("foo")
+    })
+  })
+})

src/common/__tests__/user-store.test.ts

@@ -10,7 +10,7 @@ jest.mock("electron", () => {
   }
 })
 
-import { UserStore } from "./user-store"
+import { UserStore } from "../user-store"
 import { SemVer } from "semver"
 import electron from "electron"