Add cluster UI block injection token and current implementation as a Feature

Signed-off-by: Juho Heikka <juho.heikka@gmail.com>

packages/core/package.json

@@ -112,6 +112,8 @@
     "@astronautlabs/jsonpath": "^1.1.0",
     "@hapi/call": "^9.0.1",
     "@hapi/subtext": "^7.1.0",
+    "@k8slens/cluster-settings": "^6.5.0-alpha.1",
+    "@k8slens/metrics": "^6.5.0-alpha.1",
     "@k8slens/node-fetch": "^6.5.0-alpha.1",
     "@k8slens/react-application": "^1.0.0-alpha.0",
     "@kubernetes/client-node": "^0.18.1",

packages/core/src/features/metrics/metrics-feature.ts

@@ -0,0 +1,42 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { getFeature } from "@k8slens/feature-core";
+import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics";
+import { getInjectable } from "@ogre-tools/injectable";
+import { ClusterMetrics } from "../../renderer/components/+cluster/cluster-metrics";
+import { ClusterPieCharts } from "../../renderer/components/+cluster/cluster-pie-charts";
+
+const clusterPieChartsClusterOverviewInjectable = getInjectable({
+  id: "cluster-pie-charts-cluster-overview",
+
+  instantiate: () => ({
+    id: "cluster-pie-charts-cluster-overview",
+    Component: ClusterPieCharts,
+    orderNumber: 2,
+  }),
+
+  injectionToken: clusterOverviewUIBlockInjectionToken,
+});
+
+const clusterMetricsOverviewBlockInjectable = getInjectable({
+  id: "cluster-metrics-overview-block",
+
+  instantiate: () => ({
+    id: "cluster-metrics-overview-block",
+    Component: ClusterMetrics,
+    orderNumber: 1,
+  }),
+
+  injectionToken: clusterOverviewUIBlockInjectionToken,
+});
+
+export const metricsFeature = getFeature({
+  id: "core-metrics-feature",
+
+  register: (di) => {
+    di.register(clusterPieChartsClusterOverviewInjectable);
+    di.register(clusterMetricsOverviewBlockInjectable);
+  },
+});

packages/core/src/renderer/components/+cluster/cluster-overview.tsx

@@ -15,9 +15,7 @@ import { interval } from "@k8slens/utilities";
 import { TabLayout } from "../layout/tab-layout";
 import { Spinner } from "../spinner";
 import { ClusterIssues } from "./cluster-issues";
-import { ClusterMetrics } from "./cluster-metrics";
 import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store";
-import { ClusterPieCharts } from "./cluster-pie-charts";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import type { EventStore } from "../+events/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
@@ -28,6 +26,9 @@ import podStoreInjectable from "../+workloads-pods/store.injectable";
 import eventStoreInjectable from "../+events/store.injectable";
 import nodeStoreInjectable from "../+nodes/store.injectable";
 import enabledMetricsInjectable from "../../api/catalog/entity/metrics-enabled.injectable";
+import type { ClusterOverviewUIBlock } from "@k8slens/metrics";
+import { clusterOverviewUIBlockInjectionToken } from "@k8slens/metrics";
+import { orderByOrderNumber } from "../../../common/utils/composable-responsibilities/orderable/orderable";
 
 interface Dependencies {
   subscribeStores: SubscribeStores;
@@ -36,6 +37,7 @@ interface Dependencies {
   eventStore: EventStore;
   nodeStore: NodeStore;
   clusterMetricsAreVisible: IComputedValue<boolean>;
+  uiBlocks: ClusterOverviewUIBlock[];
 }
 
 @observer
@@ -76,8 +78,9 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
 
     return (
       <>
-        <ClusterMetrics/>
+        {orderByOrderNumber(this.props.uiBlocks).map((block) => (
-        <ClusterPieCharts/>
+          <block.Component key={block.id} />
+        ))}
       </>
     );
   }
@@ -118,5 +121,6 @@ export const ClusterOverview = withInjectables<Dependencies>(NonInjectedClusterO
     podStore: di.inject(podStoreInjectable),
     eventStore: di.inject(eventStoreInjectable),
     nodeStore: di.inject(nodeStoreInjectable),
+    uiBlocks: di.injectMany(clusterOverviewUIBlockInjectionToken),
   }),
 });

packages/core/src/renderer/library.ts

@@ -20,3 +20,4 @@ export * as ReactRouter from "react-router";
 export * as ReactRouterDom from "react-router-dom";
 export * as rendererExtensionApi from "../extensions/renderer-api";
 export * as commonExtensionApi from "../extensions/common-api";
+export { metricsFeature } from "../features/metrics/metrics-feature";

packages/metrics/.eslintrc.js

@@ -0,0 +1,6 @@
+module.exports = {
+    extends: "@k8slens/eslint-config/eslint",
+    parserOptions: {
+      project: "./tsconfig.json",
+    },
+  };

packages/metrics/.prettierrc

@@ -0,0 +1 @@
+"@k8slens/eslint-config/prettier"

packages/metrics/index.ts

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import type React from "react";
+import { getInjectionToken } from "@ogre-tools/injectable";
+
+export type ClusterOverviewUIBlock = {
+  id: string;
+  Component: React.ElementType;
+  orderNumber: number;
+};
+
+export const clusterOverviewUIBlockInjectionToken = getInjectionToken<ClusterOverviewUIBlock>({
+  id: "cluster-overview-ui-block-injection-token",
+});

packages/metrics/jest.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact;

packages/metrics/package.json

@@ -0,0 +1,41 @@
+{
+    "name": "@k8slens/metrics",
+    "private": false,
+    "version": "6.5.0-alpha.1",
+    "description": "Code that is common to all Features and those registering them.",
+    "type": "commonjs",
+    "publishConfig": {
+      "access": "public",
+      "registry": "https://registry.npmjs.org/"
+    },
+    "files": [
+      "dist"
+    ],
+    "repository": {
+      "type": "git",
+      "url": "git+https://github.com/lensapp/lens.git"
+    },
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "author": {
+      "name": "OpenLens Authors",
+      "email": "info@k8slens.dev"
+    },
+    "license": "MIT",
+    "homepage": "https://github.com/lensapp/lens",
+    "scripts": {
+      "build": "webpack",
+      "clean": "rimraf dist/",
+      "dev": "webpack --mode=development --watch",
+      "test": "jest --coverage --runInBand",
+      "lint": "lens-lint",
+      "lint:fix": "lens-lint --fix"
+    },
+    "peerDependencies": {
+      "@ogre-tools/injectable": "^15.1.2",
+      "react": "^17.0.2"
+    },
+    "devDependencies": {
+      "@k8slens/eslint-config": "6.5.0-alpha.1"
+    }
+  }

packages/metrics/tsconfig.json

@@ -0,0 +1,4 @@
+{
+    "extends": "@k8slens/typescript/config/base.json",
+    "include": ["**/*.ts"]
+  }

packages/metrics/webpack.config.js

@@ -0,0 +1 @@
+module.exports = require("@k8slens/webpack").configForReact;

packages/open-lens/src/renderer/index.ts

@@ -4,6 +4,7 @@ import {
   rendererExtensionApi as Renderer,
   commonExtensionApi as Common,
   registerLensCore,
+  metricsFeature
 } from "@k8slens/core/renderer";
 import { autoRegister } from "@ogre-tools/injectable-extension-for-auto-registration";
 import { registerFeature } from "@k8slens/feature-core";
@@ -32,7 +33,8 @@ runInAction(() => {
     applicationFeature,
     messagingFeatureForRenderer,
     keyboardShortcutsFeature,
-    reactApplicationFeature
+    reactApplicationFeature,
+    metricsFeature
   );
 
   autoRegister({