Turn on strict mode in tsconfig.json, some helpful lints, and required cleanup where strictness necessitates it (#5195)

* Turn on strict mode in tsconfig.json - Add route, clusterRoute, and payloadValidatedClusterRoute helper functions to improve types with backend routes - Turn on the following new lints: - react/jsx-first-prop-new-line - react/jsx-wrap-multilines - react/jsx-one-expression-per-line - react/jsx-max-props-per-line - react/jsx-indent - react/jsx-indent-props Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build Signed-off-by: Sebastian Malton <sebastian@malton.name> * Replace KubeObject scope strings with enum Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert package.json version changes Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move hostedCluster(Id) Signed-off-by: Sebastian Malton <sebastian@malton.name> * change some type param names to be not single letters Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove copy-extension-themes Signed-off-by: Sebastian Malton <sebastian@malton.name> * add new make clean action Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix build to not use webpack for generating types Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * revert move fileNameMigration to index Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix ref logic error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts test by overriding createStorage to not touch file system Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster.test.ts tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube=api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixed hotbar-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kubeconfig-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix daemonset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicaset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulsets/dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix replicasets/scale-dialog/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployments/scale/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cronjob.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stateful-set.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix deployment.api.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-manager.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix statefulset.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix job.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pods.store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix scroll-spy.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix welcome.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix verify-that-all-routes-have-route-component.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix pod-tolerations.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * better fix for previous 3 fixes, plus also select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object-menu.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix app-paths.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix isReactNode typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sub-title.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix drawer.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix list-layout.tsx and header.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix error-boundary.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix upgrade-chart/store.ts and dock-tab.store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix install-chart/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix edit-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix create-resource/store.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix namespace-select-filter.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crd-list.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix wrong types for extensions Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix circular dependency on catalogCategoryRegistry Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix api-kube Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors, most <Select /> errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * fixing more type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * some more fixing type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeApis to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * factor out into a common file all the exports Signed-off-by: Sebastian Malton <sebastian@malton.name> * convert all KubeObjectStores to injectable with legacy global backups Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unused legacy KubeApi globals Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bad previous commit Signed-off-by: Sebastian Malton <sebastian@malton.name> * more crash fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * try and fix behavioural tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-core.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix sidebar-and-tab-navigation-for-extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make ThemeStore non-singleton and fix navigation-to-terminal-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * extensions.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix catalog-entity-registry.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix log-resource-selector.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-tabs.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix delete-cluster-dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-kubernetes-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-using-application-menu.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-application-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix dock-store.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix select.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix hotbar-remove-command.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix cluster-role-bindings/__tests__/dialog.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-extension-specific-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-telemetry-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix closing-preferences.test.tsx Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-editor-preferences.test.ts Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix navigation-to-proxy-preferences.test.ts - Fix other type errors too Signed-off-by: Sebastian Malton <sebastian@malton.name> * final tweaks Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add more tsconfig files, fix bug in <Catalog> - Make all of history, navigation injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type errors Signed-off-by: Sebastian Malton <sebastian@malton.name> * Convert all of kube-details-params/ and navigate/ to injectable - This fixes a runtime error that was encountered during testing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix runtime errors on renderer - remove all static uses of `createPageParam` (and then removed the legacy global) - Made LensRendererExtension and LensMainExtension just used dependencies and not the getLegacyDi - Fixed circular dep in extension-loader Signed-off-by: Sebastian Malton <sebastian@malton.name> * Move registerStore calls to after injectMany Signed-off-by: Sebastian Malton <sebastian@malton.name> * replace all the rest of the legacy uses of apiManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix stack overflow and cycles in DI Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix NamespaceSelectFilter not opening Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix WizardStep and AddNamespaceDialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix KubeApi's not being registered Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup WindowManager Signed-off-by: Sebastian Malton <sebastian@malton.name> * Proper fix for Wizard, fix NamespaceStore.subscribe Signed-off-by: Sebastian Malton <sebastian@malton.name> * Rewrite withTooltip to be more type correct - Fixes mobx related "too many recursive actions" error - Change all the uses of withTooltips to be functional components Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add e2e test to cover kube api registration Signed-off-by: Sebastian Malton <sebastian@malton.name> * cleanup internal-commands Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove cast in <Animate> Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix command-palette e2e test Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix type error after rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix test name Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix code to help CodeQL scanner Signed-off-by: Sebastian Malton <sebastian@malton.name> * update intree extension lock files Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix build-extensions picking wrong @types/react Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix tests from rebase Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * Make KubeconfigSyncManager more injectable Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix crash in test mode for Dialog Signed-off-by: Sebastian Malton <sebastian@malton.name> * make Select snapshots deterministic Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix new type error Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix kube-object.store.test.ts typing Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix merge build issues Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix snapshots after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix lint after merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * reexport BaseKubeJsonApiObjectMetadata Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo in terminalSpawningPool Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove duplicate license header Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typo to waitUntilDefined Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove iter use from getLegacyGlobalDiForExtensionApi Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove complex createStorage override Signed-off-by: Sebastian Malton <sebastian@malton.name> * override logger with mocks only when needed for tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove specialized overrideStore flags for getDiForUnitTesting Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary | undefined types from the exactOptionalFieldTypes experiment Signed-off-by: Sebastian Malton <sebastian@malton.name> * use more descriptive name for local test mocks Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove unnecessary addition to 'make clean' target Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove oddity of KubeObjectStore.getById(undefined) being allowed Signed-off-by: Sebastian Malton <sebastian@malton.name> * rename KubeObject.getDescriptor in favour of name without fundemental JS meaning Signed-off-by: Sebastian Malton <sebastian@malton.name> * Simplify legacyRegisterApi when working in behaviour unit tests - Don't emit within main environment as there should be no auto registering there Signed-off-by: Sebastian Malton <sebastian@malton.name> * change confusing variable name in ReactiveDuration Signed-off-by: Sebastian Malton <sebastian@malton.name> * make visitor pattern more explicit for Entity contextMenuOpen Signed-off-by: Sebastian Malton <sebastian@malton.name> * toggleDetails -> toggleKubeDetailsPane is more specific Signed-off-by: Sebastian Malton <sebastian@malton.name> * remove outdated comment Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix bug where LensExtension dependencies are not set Signed-off-by: Sebastian Malton <sebastian@malton.name> * Fix tests from the revert of react 18 Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix more tests from merge Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix typings with new is-compatible-extension tests Signed-off-by: Sebastian Malton <sebastian@malton.name> * more type fixing Signed-off-by: Sebastian Malton <sebastian@malton.name> * Revert in-tree extension versions Signed-off-by: Sebastian Malton <sebastian@malton.name> * Improve name of guarding injectable for stores and apis - New name better implies that it is just a guard state and does not do anything Signed-off-by: Sebastian Malton <sebastian@malton.name> * Add helper for <Select>.isMulti for storing in a Set<Value> Signed-off-by: Sebastian Malton <sebastian@malton.name> * fix is-compatible-extension.test.ts types Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-05-16 07:17:57 -04:00
1 parent 381d77c633
commit dfcb7c3330
@@ -11,23 +11,31 @@ import { computed, makeObservable } from "mobx";
 import { Icon } from "../icon";
 import { SubHeader } from "../layout/sub-header";
 import { Table, TableCell, TableHead, TableRow } from "../table";
-import { nodesStore } from "../+nodes/nodes.store";
-import { eventStore } from "../+events/event.store";
 import { cssNames, prevDefault } from "../../utils";
 import type { ItemObject } from "../../../common/item.store";
 import { Spinner } from "../spinner";
-import { ThemeStore } from "../../theme.store";
-import { kubeSelectedUrlParam, toggleDetails } from "../kube-detail-params";
-import { apiManager } from "../../../common/k8s-api/api-manager";
+import type { ThemeStore } from "../../themes/store";
+import type { ApiManager } from "../../../common/k8s-api/api-manager";
 import { KubeObjectAge } from "../kube-object/age";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import themeStoreInjectable from "../../themes/store.injectable";
+import type { NodeStore } from "../+nodes/store";
+import type { EventStore } from "../+events/store";
+import apiManagerInjectable from "../../../common/k8s-api/api-manager/manager.injectable";
+import eventStoreInjectable from "../+events/store.injectable";
+import nodeStoreInjectable from "../+nodes/store.injectable";
+import type { PageParam } from "../../navigation";
+import type { ToggleKubeDetailsPane } from "../kube-detail-params/toggle-details.injectable";
+import kubeSelectedUrlParamInjectable from "../kube-detail-params/kube-selected-url.injectable";
+import toggleKubeDetailsPaneInjectable from "../kube-detail-params/toggle-details.injectable";

 export interface ClusterIssuesProps {
  className?: string;
 }

-interface IWarning extends ItemObject {
+interface Warning extends ItemObject {
  kind: string;
-  message: string;
+  message: string | undefined;
  selfLink: string;
  renderAge: () => React.ReactElement;
  ageMs: number;
@@ -39,16 +47,25 @@ enum sortBy {
  age = "age",
 }

+interface Dependencies {
+  themeStore: ThemeStore;
+  nodeStore: NodeStore;
+  eventStore: EventStore;
+  apiManager: ApiManager;
+  kubeSelectedUrlParam: PageParam<string>;
+  toggleKubeDetailsPane: ToggleKubeDetailsPane;
+}
+
@observer
-export class ClusterIssues extends React.Component<ClusterIssuesProps> {
-  constructor(props: ClusterIssuesProps) {
+class NonInjectedClusterIssues extends React.Component<ClusterIssuesProps & Dependencies> {
+  constructor(props: ClusterIssuesProps & Dependencies) {
    super(props);
    makeObservable(this);
  }

-  @computed get warnings(): IWarning[] {
+  @computed get warnings(): Warning[] {
    return [
-      ...nodesStore.items.flatMap(node => (
+      ...this.props.nodeStore.items.flatMap(node => (
        node.getWarningConditions()
          .map(({ message }) => ({
            selfLink: node.selfLink,
@@ -60,21 +77,27 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
            ageMs: -node.getCreationTimestamp(),
          }))
      )),
-      ...eventStore.getWarnings().map(warning => ({
+      ...this.props.eventStore.getWarnings().map(warning => ({
        getId: () => warning.involvedObject.uid,
        getName: () => warning.involvedObject.name,
        renderAge: () => <KubeObjectAge key="age" object={warning} />,
        ageMs: -warning.getCreationTimestamp(),
        message: warning.message,
        kind: warning.kind,
-        selfLink: apiManager.lookupApiLink(warning.involvedObject, warning),
+        selfLink: this.props.apiManager.lookupApiLink(warning.involvedObject, warning),
      })),
    ];
  }

  getTableRow = (uid: string) => {
    const { warnings } = this;
+    const { kubeSelectedUrlParam, toggleKubeDetailsPane: toggleDetails } = this.props;
    const warning = warnings.find(warn => warn.getId() == uid);
+
+    if (!warning) {
+      return undefined;
+    }
+
    const { getId, getName, message, kind, selfLink, renderAge } = warning;

    return (
@@ -85,7 +108,7 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
        onClick={prevDefault(() => toggleDetails(selfLink))}
      >
        <TableCell className={styles.message}>
-          {message}
+          {message ?? "<unknown>"}
        </TableCell>
        <TableCell className={styles.object}>
          {getName()}
@@ -103,7 +126,7 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
  renderContent() {
    const { warnings } = this;

-    if (!eventStore.isLoaded) {
+    if (!this.props.eventStore.isLoaded) {
      return (
        <Spinner center/>
      );
@@ -112,7 +135,12 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
    if (!warnings.length) {
      return (
        <div className={cssNames(styles.noIssues, "flex column box grow gaps align-center justify-center")}>
-          <Icon className={styles.Icon} material="check" big sticker/>
+          <Icon
+            className={styles.Icon}
+            material="check"
+            big
+            sticker
+          />
          <p className={styles.title}>No issues found</p>
          <p>Everything is fine in the Cluster</p>
        </div>
@@ -122,7 +150,8 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
    return (
      <>
        <SubHeader className={styles.SubHeader}>
-          <Icon material="error_outline"/> Warnings: {warnings.length}
+          <Icon material="error_outline"/>
+          {` Warnings: ${warnings.length}`}
        </SubHeader>
        <Table
          tableId="cluster_issues"
@@ -137,7 +166,7 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
          sortByDefault={{ sortBy: sortBy.object, orderBy: "asc" }}
          sortSyncWithUrl={false}
          getTableRow={this.getTableRow}
-          className={cssNames("box grow", ThemeStore.getInstance().activeTheme.type)}
+          className={cssNames("box grow", this.props.themeStore.activeTheme.type)}
        >
          <TableHead nowrap>
            <TableCell className="message">Message</TableCell>
@@ -158,3 +187,15 @@ export class ClusterIssues extends React.Component<ClusterIssuesProps> {
    );
  }
 }
+
+export const ClusterIssues = withInjectables<Dependencies, ClusterIssuesProps>(NonInjectedClusterIssues, {
+  getProps: (di, props) => ({
+    ...props,
+    themeStore: di.inject(themeStoreInjectable),
+    apiManager: di.inject(apiManagerInjectable),
+    eventStore: di.inject(eventStoreInjectable),
+    nodeStore: di.inject(nodeStoreInjectable),
+    kubeSelectedUrlParam: di.inject(kubeSelectedUrlParamInjectable),
+    toggleKubeDetailsPane: di.inject(toggleKubeDetailsPaneInjectable),
+  }),
+});
@@ -5,20 +5,25 @@

 import React from "react";
 import { observer } from "mobx-react";
-import { nodesStore } from "../+nodes/nodes.store";
+import type { NodeStore } from "../+nodes/store";
 import { cssNames } from "../../utils";
 import { Radio, RadioGroup } from "../radio";
 import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store";
 import { MetricNodeRole, MetricType } from "./cluster-overview-store/cluster-overview-store";
 import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable";
 import { withInjectables } from "@ogre-tools/injectable-react";
+import nodeStoreInjectable from "../+nodes/store.injectable";

 interface Dependencies {
  clusterOverviewStore: ClusterOverviewStore;
+  nodeStore: NodeStore;
 }

-const NonInjectedClusterMetricSwitchers = observer(({ clusterOverviewStore }: Dependencies) => {
-  const { masterNodes, workerNodes } = nodesStore;
+const NonInjectedClusterMetricSwitchers = observer(({
+  clusterOverviewStore,
+  nodeStore,
+}: Dependencies) => {
+  const { masterNodes, workerNodes } = nodeStore;
  const metricsValues = clusterOverviewStore.getMetricsValues(clusterOverviewStore.metrics);
  const disableRoles = !masterNodes.length || !workerNodes.length;
  const disableMetrics = !metricsValues.length;
@@ -30,7 +35,7 @@ const NonInjectedClusterMetricSwitchers = observer(({ clusterOverviewStore }: De
          asButtons
          className={cssNames("RadioGroup flex gaps", { disabled: disableRoles })}
          value={clusterOverviewStore.metricNodeRole}
-          onChange={(metric: MetricNodeRole) => clusterOverviewStore.metricNodeRole = metric}
+          onChange={metric => clusterOverviewStore.metricNodeRole = metric}
        >
          <Radio label="Master" value={MetricNodeRole.MASTER}/>
          <Radio label="Worker" value={MetricNodeRole.WORKER}/>
@@ -41,7 +46,7 @@ const NonInjectedClusterMetricSwitchers = observer(({ clusterOverviewStore }: De
          asButtons
          className={cssNames("RadioGroup flex gaps", { disabled: disableMetrics })}
          value={clusterOverviewStore.metricType}
-          onChange={(value: MetricType) => clusterOverviewStore.metricType = value}
+          onChange={value => clusterOverviewStore.metricType = value}
        >
          <Radio label="CPU" value={MetricType.CPU}/>
          <Radio label="Memory" value={MetricType.MEMORY}/>
@@ -51,13 +56,10 @@ const NonInjectedClusterMetricSwitchers = observer(({ clusterOverviewStore }: De
  );
 });

-export const ClusterMetricSwitchers = withInjectables<Dependencies>(
-  NonInjectedClusterMetricSwitchers,
-
-  {
-    getProps: (di) => ({
-      clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
-    }),
-  },
-);
+export const ClusterMetricSwitchers = withInjectables<Dependencies>(NonInjectedClusterMetricSwitchers, {
+  getProps: (di) => ({
+    clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
+    nodeStore: di.inject(nodeStoreInjectable),
+  }),
+});

@@ -5,7 +5,7 @@

 import styles from "./cluster-metrics.module.scss";

-import React from "react";
+import React, { useState } from "react";
 import { observer } from "mobx-react";
 import type { ChartOptions, ChartPoint } from "chart.js";
 import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-overview-store";
@@ -13,19 +13,19 @@ import { MetricType } from "./cluster-overview-store/cluster-overview-store";
 import { BarChart } from "../chart";
 import { bytesToUnits, cssNames } from "../../utils";
 import { Spinner } from "../spinner";
-import { ZebraStripes } from "../chart/zebra-stripes.plugin";
+import { ZebraStripesPlugin } from "../chart/zebra-stripes.plugin";
 import { ClusterNoMetrics } from "./cluster-no-metrics";
 import { ClusterMetricSwitchers } from "./cluster-metric-switchers";
 import { getMetricLastPoints } from "../../../common/k8s-api/endpoints/metrics.api";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import clusterOverviewStoreInjectable
-  from "./cluster-overview-store/cluster-overview-store.injectable";
+import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable";

 interface Dependencies {
  clusterOverviewStore: ClusterOverviewStore;
 }

 const NonInjectedClusterMetrics = observer(({ clusterOverviewStore: { metricType, metricNodeRole, getMetricsValues, metricsLoaded, metrics }}: Dependencies) => {
+  const [plugins] = useState([new ZebraStripesPlugin()]);
  const { memoryCapacity, cpuCapacity } = getMetricLastPoints(metrics);
  const metricValues = getMetricsValues(metrics);
  const colors = { cpu: "#3D90CE", memory: "#C93DCE" };
@@ -52,9 +52,13 @@ const NonInjectedClusterMetrics = observer(({ clusterOverviewStore: { metricType
    tooltips: {
      callbacks: {
        label: ({ index }, data) => {
-          const value = data.datasets[0].data[index] as ChartPoint;
+          if (!index) {
+            return "<unknown>";
+          }

-          return value.y.toString();
+          const value = data.datasets?.[0].data?.[index] as ChartPoint;
+
+          return value.y?.toString() ?? "<unknown>";
        },
      },
    },
@@ -71,7 +75,11 @@ const NonInjectedClusterMetrics = observer(({ clusterOverviewStore: { metricType
    tooltips: {
      callbacks: {
        label: ({ index }, data) => {
-          const value = data.datasets[0].data[index] as ChartPoint;
+          if (!index) {
+            return "<unknown>";
+          }
+
+          const value = data.datasets?.[0].data?.[index] as ChartPoint;

          return bytesToUnits(parseInt(value.y as string), { precision: 3 });
        },
@@ -96,7 +104,7 @@ const NonInjectedClusterMetrics = observer(({ clusterOverviewStore: { metricType
        data={{ datasets }}
        timeLabelStep={5}
        showLegend={false}
-        plugins={[ZebraStripes]}
+        plugins={plugins}
        className={styles.chart}
      />
    );
@@ -3,40 +3,36 @@
 * Licensed under MIT License. See LICENSE in root directory for more information.
 */
 import { getInjectable } from "@ogre-tools/injectable";
-import type {
-  ClusterOverviewStorageState } from "./cluster-overview-store";
-import {
-  ClusterOverviewStore,
-  MetricNodeRole,
-  MetricType,
-} from "./cluster-overview-store";
+
+import type { ClusterOverviewStorageState } from "./cluster-overview-store";
+import { ClusterOverviewStore, MetricNodeRole, MetricType } from "./cluster-overview-store";
 import createStorageInjectable from "../../../utils/create-storage/create-storage.injectable";
-import apiManagerInjectable from "../../kube-object-menu/dependencies/api-manager.injectable";
+import { kubeObjectStoreInjectionToken } from "../../../../common/k8s-api/api-manager/manager.injectable";
+import clusterApiInjectable from "../../../../common/k8s-api/endpoints/cluster.api.injectable";
+import storesAndApisCanBeCreatedInjectable from "../../../stores-apis-can-be-created.injectable";
+import assert from "assert";
+import nodeStoreInjectable from "../../+nodes/store.injectable";

 const clusterOverviewStoreInjectable = getInjectable({
  id: "cluster-overview-store",

  instantiate: (di) => {
+    assert(di.inject(storesAndApisCanBeCreatedInjectable), "clusterOverviewStore is only available in certain environments");
    const createStorage = di.inject(createStorageInjectable);
+    const clusterApi = di.inject(clusterApiInjectable);

-    const storage = createStorage<ClusterOverviewStorageState>(
-      "cluster_overview",
-      {
-        metricType: MetricType.CPU, // setup defaults
-        metricNodeRole: MetricNodeRole.WORKER,
-      },
-    );
-
-    const store = new ClusterOverviewStore({
-      storage,
-    });
-
-    const apiManager = di.inject(apiManagerInjectable);
-
-    apiManager.registerStore(store);
-
-    return store;
+    return new ClusterOverviewStore({
+      storage: createStorage<ClusterOverviewStorageState>(
+        "cluster_overview",
+        {
+          metricType: MetricType.CPU, // setup defaults
+          metricNodeRole: MetricNodeRole.WORKER,
+        },
+      ),
+      nodeStore: di.inject(nodeStoreInjectable),
+    }, clusterApi);
  },
+  injectionToken: kubeObjectStoreInjectionToken,
 });

 export default clusterOverviewStoreInjectable;
@@ -5,12 +5,12 @@

 import { action, observable, reaction, when, makeObservable } from "mobx";
 import { KubeObjectStore } from "../../../../common/k8s-api/kube-object.store";
-import type { Cluster } from "../../../../common/k8s-api/endpoints";
-import { clusterApi, getMetricsByNodeNames, type IClusterMetrics } from "../../../../common/k8s-api/endpoints";
-import type { StorageHelper } from "../../../utils";
+import type { Cluster, ClusterApi } from "../../../../common/k8s-api/endpoints";
+import { getMetricsByNodeNames, type ClusterMetricData } from "../../../../common/k8s-api/endpoints";
+import type { StorageLayer } from "../../../utils";
 import { autoBind } from "../../../utils";
 import { type IMetricsReqParams, normalizeMetrics } from "../../../../common/k8s-api/endpoints/metrics.api";
-import { nodesStore } from "../../+nodes/nodes.store";
+import type { NodeStore } from "../../+nodes/store";

 export enum MetricType {
  MEMORY = "memory",
@@ -27,14 +27,13 @@ export interface ClusterOverviewStorageState {
  metricNodeRole: MetricNodeRole;
 }

-interface Dependencies {
-  storage: StorageHelper<ClusterOverviewStorageState>;
+interface ClusterOverviewStoreDependencies {
+  readonly storage: StorageLayer<ClusterOverviewStorageState>;
+  readonly nodeStore: NodeStore;
 }

-export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements ClusterOverviewStorageState {
-  api = clusterApi;
-
-  @observable metrics: Partial<IClusterMetrics> = {};
+export class ClusterOverviewStore extends KubeObjectStore<Cluster, ClusterApi> implements ClusterOverviewStorageState {
+  @observable metrics: Partial<ClusterMetricData> = {};
  @observable metricsLoaded = false;

  get metricType(): MetricType {
@@ -53,8 +52,8 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements Cl
    this.dependencies.storage.merge({ metricNodeRole: value });
  }

-  constructor(private dependencies: Dependencies ) {
-    super();
+  constructor(protected readonly dependencies: ClusterOverviewStoreDependencies, api: ClusterApi) {
+    super(api);
    makeObservable(this);
    autoBind(this);

@@ -71,8 +70,8 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements Cl
    });

    // check which node type to select
-    reaction(() => nodesStore.items.length, () => {
-      const { masterNodes, workerNodes } = nodesStore;
+    reaction(() => this.dependencies.nodeStore.items.length, () => {
+      const { masterNodes, workerNodes } = this.dependencies.nodeStore;

      if (!masterNodes.length) this.metricNodeRole = MetricNodeRole.WORKER;
      if (!workerNodes.length) this.metricNodeRole = MetricNodeRole.MASTER;
@@ -81,15 +80,15 @@ export class ClusterOverviewStore extends KubeObjectStore<Cluster> implements Cl

  @action
  async loadMetrics(params?: IMetricsReqParams) {
-    await when(() => nodesStore.isLoaded);
-    const { masterNodes, workerNodes } = nodesStore;
+    await when(() => this.dependencies.nodeStore.isLoaded);
+    const { masterNodes, workerNodes } = this.dependencies.nodeStore;
    const nodes = this.metricNodeRole === MetricNodeRole.MASTER && masterNodes.length ? masterNodes : workerNodes;

    this.metrics = await getMetricsByNodeNames(nodes.map(node => node.getName()), params);
    this.metricsLoaded = true;
  }

-  getMetricsValues(source: Partial<IClusterMetrics>): [number, string][] {
+  getMetricsValues(source: Partial<ClusterMetricData>): [number, string][] {
    switch (this.metricType) {
      case MetricType.CPU:
        return normalizeMetrics(source.cpuUsage).data.result[0].values;
@@ -8,29 +8,36 @@ import styles from "./cluster-overview.module.scss";
 import React from "react";
 import { reaction } from "mobx";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { nodesStore } from "../+nodes/nodes.store";
-import { podsStore } from "../+workloads-pods/pods.store";
-import type { Disposer } from "../../utils";
-import { getHostedClusterId, interval } from "../../utils";
-import { TabLayout } from "../layout/tab-layout-2";
+import type { NodeStore } from "../+nodes/store";
+import type { PodStore } from "../+workloads-pods/store";
+import { interval } from "../../utils";
+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 { getActiveClusterEntity } from "../../api/catalog-entity-registry";
+import { getActiveClusterEntity } from "../../api/catalog/entity/legacy-globals";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
-import { ClusterStore } from "../../../common/cluster-store/cluster-store";
-import { eventStore } from "../+events/event.store";
+import type { EventStore } from "../+events/store";
 import { withInjectables } from "@ogre-tools/injectable-react";
-import kubeWatchApiInjectable from "../../kube-watch-api/kube-watch-api.injectable";
-import type { KubeObjectStore } from "../../../common/k8s-api/kube-object.store";
-import type { KubeObject } from "../../../common/k8s-api/kube-object";
 import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable";
+import type { SubscribeStores } from "../../kube-watch-api/kube-watch-api";
+import type { Cluster } from "../../../common/cluster/cluster";
+import hostedClusterInjectable from "../../../common/cluster-store/hosted-cluster.injectable";
+import assert from "assert";
+import subscribeStoresInjectable from "../../kube-watch-api/subscribe-stores.injectable";
+import podStoreInjectable from "../+workloads-pods/store.injectable";
+import eventStoreInjectable from "../+events/store.injectable";
+import nodeStoreInjectable from "../+nodes/store.injectable";

 interface Dependencies {
-  subscribeStores: (stores: KubeObjectStore<KubeObject>[]) => Disposer;
+  subscribeStores: SubscribeStores;
  clusterOverviewStore: ClusterOverviewStore;
+  hostedCluster: Cluster;
+  podStore: PodStore;
+  eventStore: EventStore;
+  nodeStore: NodeStore;
 }

@observer
@@ -38,9 +45,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
  private metricPoller = interval(60, () => this.loadMetrics());

  loadMetrics() {
-    const cluster = ClusterStore.getInstance().getById(getHostedClusterId());
-
-    if (cluster.available) {
+    if (this.props.hostedCluster.available) {
      this.props.clusterOverviewStore.loadMetrics();
    }
  }
@@ -50,9 +55,9 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {

    disposeOnUnmount(this, [
      this.props.subscribeStores([
-        podsStore,
-        eventStore,
-        nodesStore,
+        this.props.podStore,
+        this.props.eventStore,
+        this.props.nodeStore,
      ]),

      reaction(
@@ -66,7 +71,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
    this.metricPoller.stop();
  }

-  renderMetrics(isMetricsHidden: boolean) {
+  renderMetrics(isMetricsHidden?: boolean) {
    if (isMetricsHidden) {
      return null;
    }
@@ -79,7 +84,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
    );
  }

-  renderClusterOverview(isLoaded: boolean, isMetricsHidden: boolean) {
+  renderClusterOverview(isLoaded: boolean, isMetricsHidden?: boolean) {
    if (!isLoaded) {
      return <Spinner center/>;
    }
@@ -93,7 +98,8 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
  }

  render() {
-    const isLoaded = nodesStore.isLoaded && eventStore.isLoaded;
+    const { eventStore, nodeStore } = this.props;
+    const isLoaded = nodeStore.isLoaded && eventStore.isLoaded;
    const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.Cluster);

    return (
@@ -106,13 +112,19 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
  }
 }

-export const ClusterOverview = withInjectables<Dependencies>(
-  NonInjectedClusterOverview,
+export const ClusterOverview = withInjectables<Dependencies>(NonInjectedClusterOverview, {
+  getProps: (di) => {
+    const hostedCluster = di.inject(hostedClusterInjectable);

-  {
-    getProps: (di) => ({
-      subscribeStores: di.inject(kubeWatchApiInjectable).subscribeStores,
+    assert(hostedCluster, "Only allowed to renderer ClusterOverview within cluster frame");
+
+    return {
+      subscribeStores: di.inject(subscribeStoresInjectable),
      clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
-    }),
+      hostedCluster,
+      podStore: di.inject(podStoreInjectable),
+      eventStore: di.inject(eventStoreInjectable),
+      nodeStore: di.inject(nodeStoreInjectable),
+    };
  },
-);
+});
@@ -11,15 +11,17 @@ import type { ClusterOverviewStore } from "./cluster-overview-store/cluster-over
 import { MetricNodeRole } from "./cluster-overview-store/cluster-overview-store";
 import { Spinner } from "../spinner";
 import { Icon } from "../icon";
-import { nodesStore } from "../+nodes/nodes.store";
+import type { NodeStore } from "../+nodes/store";
 import type { PieChartData } from "../chart";
 import { PieChart } from "../chart";
 import { ClusterNoMetrics } from "./cluster-no-metrics";
 import { bytesToUnits, cssNames } from "../../utils";
-import { ThemeStore } from "../../theme.store";
+import type { ThemeStore } from "../../themes/store";
 import { getMetricLastPoints } from "../../../common/k8s-api/endpoints/metrics.api";
 import { withInjectables } from "@ogre-tools/injectable-react";
 import clusterOverviewStoreInjectable from "./cluster-overview-store/cluster-overview-store.injectable";
+import nodeStoreInjectable from "../+nodes/store.injectable";
+import themeStoreInjectable from "../../themes/store.injectable";

 function createLabels(rawLabelData: [string, number | undefined][]): string[] {
  return rawLabelData.map(([key, value]) => `${key}: ${value?.toFixed(2) || "N/A"}`);
@@ -27,9 +29,15 @@ function createLabels(rawLabelData: [string, number | undefined][]): string[] {

 interface Dependencies {
  clusterOverviewStore: ClusterOverviewStore;
+  nodeStore: NodeStore;
+  themeStore: ThemeStore;
 }

-const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependencies) => {
+const NonInjectedClusterPieCharts = observer(({
+  clusterOverviewStore,
+  nodeStore,
+  themeStore,
+}: Dependencies) => {
  const renderLimitWarning = () => {
    return (
      <div className="node-warning flex gaps align-center">
@@ -46,7 +54,7 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
    const { podUsage, podAllocatableCapacity, podCapacity } = data;
    const cpuLimitsOverload = cpuLimits > cpuAllocatableCapacity;
    const memoryLimitsOverload = memoryLimits > memoryAllocatableCapacity;
-    const defaultColor = ThemeStore.getInstance().activeTheme.colors.pieChartDefaultColor;
+    const defaultColor = themeStore.activeTheme.colors.pieChartDefaultColor;

    if (!memoryCapacity || !cpuCapacity || !podCapacity || !memoryAllocatableCapacity || !cpuAllocatableCapacity || !podAllocatableCapacity) return null;
    const cpuData: PieChartData = {
@@ -210,7 +218,7 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
  };

  const renderContent = ({ metricNodeRole, metricsLoaded }: ClusterOverviewStore) => {
-    const { masterNodes, workerNodes } = nodesStore;
+    const { masterNodes, workerNodes } = nodeStore;
    const nodes = metricNodeRole === MetricNodeRole.MASTER ? masterNodes : workerNodes;

    if (!nodes.length) {
@@ -249,12 +257,10 @@ const NonInjectedClusterPieCharts = observer(({ clusterOverviewStore }: Dependen
  );
 });

-export const ClusterPieCharts = withInjectables<Dependencies>(
-  NonInjectedClusterPieCharts,
-
-  {
-    getProps: (di) => ({
-      clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
-    }),
-  },
-);
+export const ClusterPieCharts = withInjectables<Dependencies>(NonInjectedClusterPieCharts, {
+  getProps: (di) => ({
+    clusterOverviewStore: di.inject(clusterOverviewStoreInjectable),
+    nodeStore: di.inject(nodeStoreInjectable),
+    themeStore: di.inject(themeStoreInjectable),
+  }),
+});