From 66f3cc8bcfbf0dc606dacf4dafb238ff5d38bec0 Mon Sep 17 00:00:00 2001 From: Juho Heikka Date: Wed, 29 Mar 2023 15:29:42 +0300 Subject: [PATCH] Add cluster UI block injection token and current implementation as a Feature Signed-off-by: Juho Heikka --- packages/core/package.json | 2 + .../src/features/metrics/metrics-feature.ts | 42 +++++++++++++++++++ .../components/+cluster/cluster-overview.tsx | 12 ++++-- packages/core/src/renderer/library.ts | 1 + packages/metrics/.eslintrc.js | 6 +++ packages/metrics/.prettierrc | 1 + packages/metrics/index.ts | 17 ++++++++ packages/metrics/jest.config.js | 1 + packages/metrics/package.json | 41 ++++++++++++++++++ packages/metrics/tsconfig.json | 4 ++ packages/metrics/webpack.config.js | 1 + packages/open-lens/src/renderer/index.ts | 4 +- 12 files changed, 127 insertions(+), 5 deletions(-) create mode 100644 packages/core/src/features/metrics/metrics-feature.ts create mode 100644 packages/metrics/.eslintrc.js create mode 100644 packages/metrics/.prettierrc create mode 100644 packages/metrics/index.ts create mode 100644 packages/metrics/jest.config.js create mode 100644 packages/metrics/package.json create mode 100644 packages/metrics/tsconfig.json create mode 100644 packages/metrics/webpack.config.js diff --git a/packages/core/package.json b/packages/core/package.json index 5ac43c7007..89e517fe44 100644 --- a/packages/core/package.json +++ b/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", diff --git a/packages/core/src/features/metrics/metrics-feature.ts b/packages/core/src/features/metrics/metrics-feature.ts new file mode 100644 index 0000000000..13a374ae2f --- /dev/null +++ b/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); + }, +}); diff --git a/packages/core/src/renderer/components/+cluster/cluster-overview.tsx b/packages/core/src/renderer/components/+cluster/cluster-overview.tsx index 75b3e8cd1e..0fa475b4ff 100644 --- a/packages/core/src/renderer/components/+cluster/cluster-overview.tsx +++ b/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; + uiBlocks: ClusterOverviewUIBlock[]; } @observer @@ -76,8 +78,9 @@ class NonInjectedClusterOverview extends React.Component { return ( <> - - + {orderByOrderNumber(this.props.uiBlocks).map((block) => ( + + ))} ); } @@ -118,5 +121,6 @@ export const ClusterOverview = withInjectables(NonInjectedClusterO podStore: di.inject(podStoreInjectable), eventStore: di.inject(eventStoreInjectable), nodeStore: di.inject(nodeStoreInjectable), + uiBlocks: di.injectMany(clusterOverviewUIBlockInjectionToken), }), }); diff --git a/packages/core/src/renderer/library.ts b/packages/core/src/renderer/library.ts index 41c7dea0e7..5dbe66518a 100644 --- a/packages/core/src/renderer/library.ts +++ b/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"; diff --git a/packages/metrics/.eslintrc.js b/packages/metrics/.eslintrc.js new file mode 100644 index 0000000000..f404cf0ace --- /dev/null +++ b/packages/metrics/.eslintrc.js @@ -0,0 +1,6 @@ +module.exports = { + extends: "@k8slens/eslint-config/eslint", + parserOptions: { + project: "./tsconfig.json", + }, + }; diff --git a/packages/metrics/.prettierrc b/packages/metrics/.prettierrc new file mode 100644 index 0000000000..edd47b479e --- /dev/null +++ b/packages/metrics/.prettierrc @@ -0,0 +1 @@ +"@k8slens/eslint-config/prettier" diff --git a/packages/metrics/index.ts b/packages/metrics/index.ts new file mode 100644 index 0000000000..0375f957b2 --- /dev/null +++ b/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({ + id: "cluster-overview-ui-block-injection-token", +}); diff --git a/packages/metrics/jest.config.js b/packages/metrics/jest.config.js new file mode 100644 index 0000000000..38d54ab7b6 --- /dev/null +++ b/packages/metrics/jest.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/jest").monorepoPackageConfig(__dirname).configForReact; diff --git a/packages/metrics/package.json b/packages/metrics/package.json new file mode 100644 index 0000000000..f9a6c846c9 --- /dev/null +++ b/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" + } + } diff --git a/packages/metrics/tsconfig.json b/packages/metrics/tsconfig.json new file mode 100644 index 0000000000..2b0f0e5603 --- /dev/null +++ b/packages/metrics/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "@k8slens/typescript/config/base.json", + "include": ["**/*.ts"] + } diff --git a/packages/metrics/webpack.config.js b/packages/metrics/webpack.config.js new file mode 100644 index 0000000000..1cda407f5a --- /dev/null +++ b/packages/metrics/webpack.config.js @@ -0,0 +1 @@ +module.exports = require("@k8slens/webpack").configForReact; diff --git a/packages/open-lens/src/renderer/index.ts b/packages/open-lens/src/renderer/index.ts index d14e817347..ce7ce7b232 100644 --- a/packages/open-lens/src/renderer/index.ts +++ b/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({