diff --git a/src/renderer/components/+nodes/node-details.tsx b/src/renderer/components/+nodes/node-details.tsx
index 9d1f697dfa..56ce3e53e2 100644
--- a/src/renderer/components/+nodes/node-details.tsx
+++ b/src/renderer/components/+nodes/node-details.tsx
@@ -32,7 +32,7 @@ import { podsStore } from "../+workloads-pods/pods.store";
 import type { KubeObjectDetailsProps } from "../kube-object";
 import { getMetricsByNodeNames, IClusterMetrics, Node } from "../../api/endpoints";
 import { NodeCharts } from "./node-charts";
-import { observable, reaction } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
@@ -48,6 +48,11 @@ interface Props extends KubeObjectDetailsProps<Node> {
 export class NodeDetails extends React.Component<Props> {
   @observable metrics: Partial<IClusterMetrics>;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @disposeOnUnmount
   clean = reaction(() => this.props.object.getName(), () => {
     this.metrics = null;
diff --git a/src/renderer/components/+workloads-daemonsets/daemonset-details.tsx b/src/renderer/components/+workloads-daemonsets/daemonset-details.tsx
index c9f363c5e9..4479995506 100644
--- a/src/renderer/components/+workloads-daemonsets/daemonset-details.tsx
+++ b/src/renderer/components/+workloads-daemonsets/daemonset-details.tsx
@@ -34,7 +34,7 @@ import type { KubeObjectDetailsProps } from "../kube-object";
 import { DaemonSet, getMetricsForDaemonSets, IPodMetrics } from "../../api/endpoints";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { observable, reaction } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
@@ -48,6 +48,11 @@ interface Props extends KubeObjectDetailsProps<DaemonSet> {
 export class DaemonSetDetails extends React.Component<Props> {
   @observable metrics: IPodMetrics = null;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @disposeOnUnmount
   clean = reaction(() => this.props.object, () => {
     this.metrics = null;
diff --git a/src/renderer/components/+workloads-deployments/deployment-details.tsx b/src/renderer/components/+workloads-deployments/deployment-details.tsx
index 18ac512038..110c9a5679 100644
--- a/src/renderer/components/+workloads-deployments/deployment-details.tsx
+++ b/src/renderer/components/+workloads-deployments/deployment-details.tsx
@@ -34,7 +34,7 @@ import type { KubeObjectDetailsProps } from "../kube-object";
 import { ResourceMetrics, ResourceMetricsText } from "../resource-metrics";
 import { deploymentStore } from "./deployments.store";
 import { PodCharts, podMetricTabs } from "../+workloads-pods/pod-charts";
-import { observable, reaction } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
 import { replicaSetStore } from "../+workloads-replicasets/replicasets.store";
@@ -50,6 +50,11 @@ interface Props extends KubeObjectDetailsProps<Deployment> {
 export class DeploymentDetails extends React.Component<Props> {
   @observable metrics: IPodMetrics = null;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @disposeOnUnmount
   clean = reaction(() => this.props.object, () => {
     this.metrics = null;
diff --git a/src/renderer/components/+workloads-jobs/job-details.tsx b/src/renderer/components/+workloads-jobs/job-details.tsx
index ba9f463147..b0ba055122 100644
--- a/src/renderer/components/+workloads-jobs/job-details.tsx
+++ b/src/renderer/components/+workloads-jobs/job-details.tsx
@@ -37,7 +37,7 @@ import { getMetricsForJobs, IPodMetrics, Job } from "../../api/endpoints";
 import { PodDetailsList } from "../+workloads-pods/pod-details-list";
 import { lookupApiLink } from "../../api/kube-api";
 import { KubeObjectMeta } from "../kube-object/kube-object-meta";
-import { observable } from "mobx";
+import { makeObservable, observable } from "mobx";
 import { podMetricTabs, PodCharts } from "../+workloads-pods/pod-charts";
 import { ClusterMetricsResourceType } from "../../../main/cluster";
 import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
@@ -51,6 +51,11 @@ interface Props extends KubeObjectDetailsProps<Job> {
 export class JobDetails extends React.Component<Props> {
   @observable metrics: IPodMetrics = null;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   async componentDidMount() {
     podsStore.reloadAll();
   }
diff --git a/src/renderer/components/+workloads-replicasets/replicaset-details.tsx b/src/renderer/components/+workloads-replicasets/replicaset-details.tsx
index 26b4e585dd..7c06b56840 100644
--- a/src/renderer/components/+workloads-replicasets/replicaset-details.tsx
+++ b/src/renderer/components/+workloads-replicasets/replicaset-details.tsx
@@ -21,7 +21,7 @@
 
 import "./replicaset-details.scss";
 import React from "react";
-import { observable, reaction } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { DrawerItem } from "../drawer";
 import { Badge } from "../badge";
 import { replicaSetStore } from "./replicasets.store";
@@ -47,6 +47,11 @@ interface Props extends KubeObjectDetailsProps<ReplicaSet> {
 export class ReplicaSetDetails extends React.Component<Props> {
   @observable metrics: IPodMetrics = null;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @disposeOnUnmount
   clean = reaction(() => this.props.object, () => {
     this.metrics = null;
diff --git a/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx b/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx
index 1d5acfecae..f16578c703 100644
--- a/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx
+++ b/src/renderer/components/+workloads-statefulsets/statefulset-details.tsx
@@ -23,7 +23,7 @@ import "./statefulset-details.scss";
 
 import React from "react";
 import { disposeOnUnmount, observer } from "mobx-react";
-import { observable, reaction } from "mobx";
+import { makeObservable, observable, reaction } from "mobx";
 import { Badge } from "../badge";
 import { DrawerItem } from "../drawer";
 import { PodDetailsStatuses } from "../+workloads-pods/pod-details-statuses";
@@ -48,6 +48,11 @@ interface Props extends KubeObjectDetailsProps<StatefulSet> {
 export class StatefulSetDetails extends React.Component<Props> {
   @observable metrics: IPodMetrics = null;
 
+  constructor(props: Props) {
+    super(props);
+    makeObservable(this);
+  }
+
   @disposeOnUnmount
   clean = reaction(() => this.props.object, () => {
     this.metrics = null;