@backstage/plugin-kubernetes 0.4.22 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @backstage/plugin-kubernetes
 
+## 0.5.0
+
+### Minor Changes
+
+- c010632f88: Add pod metrics lookup and display in pod table.
+
+  ## Backwards incompatible changes
+
+  If your Kubernetes distribution does not have the [metrics server](https://github.com/kubernetes-sigs/metrics-server) installed,
+  you will need to set the `skipMetricsLookup` config flag to `false`.
+
+  See the [configuration docs](https://backstage.io/docs/features/kubernetes/configuration) for more details.
+
+### Patch Changes
+
+- cd450844f6: Moved React dependencies to `peerDependencies` and allow both React v16 and v17 to be used.
+- Updated dependencies
+  - @backstage/core-components@0.8.0
+  - @backstage/core-plugin-api@0.3.0
+  - @backstage/plugin-kubernetes-common@0.2.0
+  - @backstage/plugin-catalog-react@0.6.5
+
 ## 0.4.22
 
 ### Patch Changes

package/dist/index.esm.js

@@ -4,7 +4,7 @@ import React__default, { Fragment, useState, useEffect, useContext } from 'react
 import { useEntity } from '@backstage/plugin-catalog-react';
 import { Routes, Route } from 'react-router-dom';
 import { Typography, Chip, Grid, makeStyles, createStyles, Button, Drawer, IconButton, FormControlLabel, Switch, Accordion, AccordionSummary, AccordionDetails, Divider, Stepper, Step, StepLabel } from '@material-ui/core';
-import { WarningPanel, InfoCard, Table, SubvalueCell, StatusError, StatusOK, StatusAborted, Button as Button$1, CodeSnippet, StructuredMetadataTable, StatusPending, Page, Content, Progress, MissingAnnotationEmptyState } from '@backstage/core-components';
+import { WarningPanel, InfoCard, Table, StatusOK, SubvalueCell, StatusError, StatusAborted, Button as Button$1, CodeSnippet, StructuredMetadataTable, StatusPending, Page, Content, Progress, MissingAnnotationEmptyState } from '@backstage/core-components';
 import EmptyStateImage from './assets/emptystate.svg';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import Close from '@material-ui/icons/Close';
@@ -45,7 +45,7 @@ class KubernetesBackendClient {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
-        ...idToken && {Authorization: `Bearer ${idToken}`}
+        ...idToken && { Authorization: `Bearer ${idToken}` }
       },
       body: JSON.stringify(requestBody)
     });
@@ -60,7 +60,7 @@ class KubernetesBackendClient {
     const response = await fetch(url, {
       method: "GET",
       headers: {
-        ...idToken && {Authorization: `Bearer ${idToken}`}
+        ...idToken && { Authorization: `Bearer ${idToken}` }
       }
     });
     return (await this.handleResponse(response)).items;
@@ -86,7 +86,7 @@ class GoogleKubernetesAuthProvider {
     if ("auth" in requestBody) {
       requestBody.auth.google = googleAuthToken;
     } else {
-      requestBody.auth = {google: googleAuthToken};
+      requestBody.auth = { google: googleAuthToken };
     }
     return requestBody;
   }
@@ -106,7 +106,7 @@ class AwsKubernetesAuthProvider {
 
 class KubernetesAuthProviders {
   constructor(options) {
-    this.kubernetesAuthProviderMap = new Map();
+    this.kubernetesAuthProviderMap = /* @__PURE__ */ new Map();
     this.kubernetesAuthProviderMap.set("google", new GoogleKubernetesAuthProvider(options.googleAuthApi));
     this.kubernetesAuthProviderMap.set("serviceAccount", new ServiceAccountKubernetesAuthProvider());
     this.kubernetesAuthProviderMap.set("aws", new AwsKubernetesAuthProvider());
@@ -132,13 +132,13 @@ const kubernetesPlugin = createPlugin({
         discoveryApi: discoveryApiRef,
         identityApi: identityApiRef
       },
-      factory: ({discoveryApi, identityApi}) => new KubernetesBackendClient({discoveryApi, identityApi})
+      factory: ({ discoveryApi, identityApi }) => new KubernetesBackendClient({ discoveryApi, identityApi })
     }),
     createApiFactory({
       api: kubernetesAuthProvidersApiRef,
-      deps: {googleAuthApi: googleAuthApiRef},
-      factory: ({googleAuthApi}) => {
-        return new KubernetesAuthProviders({googleAuthApi});
+      deps: { googleAuthApi: googleAuthApiRef },
+      factory: ({ googleAuthApi }) => {
+        return new KubernetesAuthProviders({ googleAuthApi });
       }
     })
   ],
@@ -241,7 +241,7 @@ const ErrorEmptyState = () => {
     "data-testid": "emptyStateImg"
   })));
 };
-const ErrorReporting = ({detectedErrors}) => {
+const ErrorReporting = ({ detectedErrors }) => {
   const errors = Array.from(detectedErrors.values()).flat().sort(sortBySeverity);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, errors.length === 0 ? /* @__PURE__ */ React.createElement(InfoCard, {
     title: "Error Reporting"
@@ -249,7 +249,7 @@ const ErrorReporting = ({detectedErrors}) => {
     title: "Error Reporting",
     data: errors,
     columns,
-    options: {paging: true, search: false}
+    options: { paging: true, search: false }
   }));
 };
 
@@ -372,10 +372,36 @@ const renderCondition = (condition) => {
   }
   return [condition.type, /* @__PURE__ */ React__default.createElement(StatusAborted, null)];
 };
+const currentToDeclaredResourceToPerc = (current, resource) => {
+  if (typeof current === "number" && typeof resource === "number") {
+    return `${Math.round(current / resource * 100)}%`;
+  }
+  const numerator = BigInt(current);
+  const denominator = BigInt(resource);
+  return `${numerator * BigInt(100) / denominator}%`;
+};
+const podStatusToCpuUtil = (podStatus) => {
+  const cpuUtil = podStatus.cpu;
+  let currentUsage = cpuUtil.currentUsage;
+  if (typeof cpuUtil.currentUsage === "number") {
+    currentUsage = cpuUtil.currentUsage / 10;
+  }
+  return /* @__PURE__ */ React__default.createElement(SubvalueCell, {
+    value: `requests: ${currentToDeclaredResourceToPerc(currentUsage, cpuUtil.requestTotal)}`,
+    subvalue: `limits: ${currentToDeclaredResourceToPerc(currentUsage, cpuUtil.limitTotal)}`
+  });
+};
+const podStatusToMemoryUtil = (podStatus) => {
+  const memUtil = podStatus.memory;
+  return /* @__PURE__ */ React__default.createElement(SubvalueCell, {
+    value: `requests: ${currentToDeclaredResourceToPerc(memUtil.currentUsage, memUtil.requestTotal)}`,
+    subvalue: `limits: ${currentToDeclaredResourceToPerc(memUtil.currentUsage, memUtil.limitTotal)}`
+  });
+};
 
 const detectErrorsInObjects = (objects, kind, clusterName, errorMappers) => {
   var _a, _b;
-  const errors = new Map();
+  const errors = /* @__PURE__ */ new Map();
   for (const object of objects) {
     for (const errorMapper of errorMappers) {
       if (errorMapper.errorExists(object)) {
@@ -523,7 +549,7 @@ const hpaErrorMappers = [
 const detectErrorsInHpa = (hpas, clusterName) => detectErrorsInObjects(hpas, "HorizontalPodAutoscaler", clusterName, hpaErrorMappers);
 
 const detectErrors = (objects) => {
-  const errors = new Map();
+  const errors = /* @__PURE__ */ new Map();
   for (const clusterResponse of objects.items) {
     let clusterErrors = [];
     const groupedResponses = groupResponses(clusterResponse.resources);
@@ -581,7 +607,7 @@ const useKubernetesObjects = (entity, intervalMs = 1e4) => {
   };
 };
 
-const PodNamesWithErrorsContext = React__default.createContext(new Set());
+const PodNamesWithErrorsContext = React__default.createContext(/* @__PURE__ */ new Set());
 
 const GroupedResponsesContext = React__default.createContext({
   pods: [],
@@ -761,7 +787,7 @@ const PodDrawerButton = withStyles({
     textTransform: "none"
   }
 })(Button);
-const ErrorPanel = ({cluster, errorMessage}) => /* @__PURE__ */ React__default.createElement(WarningPanel, {
+const ErrorPanel = ({ cluster, errorMessage }) => /* @__PURE__ */ React__default.createElement(WarningPanel, {
   title: "There was a problem formatting the link to the Kubernetes dashboard",
   message: `Could not format the link to the dashboard of your cluster named '${cluster.name}'. Its dashboardApp property has been set to '${cluster.dashboardApp || "standard"}.'`
 }, errorMessage && /* @__PURE__ */ React__default.createElement(Typography, {
@@ -794,7 +820,7 @@ const KubernetesDrawerContent = ({
   const [isYaml, setIsYaml] = useState(false);
   const classes = useDrawerContentStyles();
   const cluster = useContext(ClusterContext);
-  const {clusterLink, errorMessage} = tryFormatClusterLink({
+  const { clusterLink, errorMessage } = tryFormatClusterLink({
     dashboardUrl: cluster.dashboardUrl,
     dashboardApp: cluster.dashboardApp,
     object,
@@ -923,6 +949,10 @@ const PodDrawer = ({
   });
 };
 
+const PodNamesWithMetricsContext = React__default.createContext(/* @__PURE__ */ new Map());
+
+const READY_COLUMNS = "READY";
+const RESOURCE_COLUMNS = "RESOURCE";
 const DEFAULT_COLUMNS = [
   {
     title: "name",
@@ -943,7 +973,52 @@ const DEFAULT_COLUMNS = [
     render: containerStatuses
   }
 ];
-const PodsTable = ({pods, extraColumns = []}) => {
+const READY = [
+  {
+    title: "containers ready",
+    align: "center",
+    render: containersReady
+  },
+  {
+    title: "total restarts",
+    align: "center",
+    render: totalRestarts,
+    type: "numeric"
+  }
+];
+const PodsTable = ({ pods, extraColumns = [] }) => {
+  const podNamesWithMetrics = useContext(PodNamesWithMetricsContext);
+  const columns = [...DEFAULT_COLUMNS];
+  if (extraColumns.includes(READY_COLUMNS)) {
+    columns.push(...READY);
+  }
+  if (extraColumns.includes(RESOURCE_COLUMNS)) {
+    const resourceColumns = [
+      {
+        title: "CPU usage %",
+        render: (pod) => {
+          var _a, _b;
+          const metrics = podNamesWithMetrics.get((_b = (_a = pod.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+          if (!metrics) {
+            return "unknown";
+          }
+          return podStatusToCpuUtil(metrics);
+        }
+      },
+      {
+        title: "Memory usage %",
+        render: (pod) => {
+          var _a, _b;
+          const metrics = podNamesWithMetrics.get((_b = (_a = pod.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+          if (!metrics) {
+            return "unknown";
+          }
+          return podStatusToMemoryUtil(metrics);
+        }
+      }
+    ];
+    columns.push(...resourceColumns);
+  }
   const tableStyle = {
     minWidth: "0",
     width: "100%"
@@ -951,9 +1026,9 @@ const PodsTable = ({pods, extraColumns = []}) => {
   return /* @__PURE__ */ React__default.createElement("div", {
     style: tableStyle
   }, /* @__PURE__ */ React__default.createElement(Table, {
-    options: {paging: true, search: false},
+    options: { paging: true, search: false },
     data: pods,
-    columns: DEFAULT_COLUMNS.concat(extraColumns)
+    columns
   }));
 };
 
@@ -1047,19 +1122,6 @@ const getMatchingHpa = (ownerName, ownerKind, hpas) => {
   });
 };
 
-const deploymentPodColumns = [
-  {
-    title: "containers ready",
-    align: "center",
-    render: containersReady
-  },
-  {
-    title: "total restarts",
-    align: "center",
-    render: totalRestarts,
-    type: "numeric"
-  }
-];
 const DeploymentSummary = ({
   deployment,
   numberOfCurrentPods,
@@ -1081,7 +1143,7 @@ const DeploymentSummary = ({
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })), hpa && /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
@@ -1131,7 +1193,7 @@ const DeploymentAccordion = ({
     return podNamesWithErrors.has((_b = (_a = p.metadata) == null ? void 0 : _a.name) != null ? _b : "");
   });
   return /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(DeploymentSummary, {
@@ -1141,7 +1203,7 @@ const DeploymentAccordion = ({
     hpa: matchingHpa
   })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(PodsTable, {
     pods: ownedPods,
-    extraColumns: deploymentPodColumns
+    extraColumns: [READY_COLUMNS, RESOURCE_COLUMNS]
   })));
 };
 const DeploymentsAccordions = ({}) => {
@@ -1199,7 +1261,7 @@ const IngressDrawer = ({
   }, "Ingress"))));
 };
 
-const IngressSummary = ({ingress}) => {
+const IngressSummary = ({ ingress }) => {
   return /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
     direction: "row",
@@ -1214,20 +1276,20 @@ const IngressSummary = ({ingress}) => {
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })));
 };
-const IngressCard = ({ingress}) => {
+const IngressCard = ({ ingress }) => {
   return /* @__PURE__ */ React__default.createElement(StructuredMetadataTable, {
     metadata: {
       ...ingress.spec
     }
   });
 };
-const IngressAccordion = ({ingress}) => {
+const IngressAccordion = ({ ingress }) => {
   return /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(IngressSummary, {
@@ -1282,7 +1344,7 @@ const ServiceDrawer = ({
   }, "Service"))));
 };
 
-const ServiceSummary = ({service}) => {
+const ServiceSummary = ({ service }) => {
   var _a, _b;
   return /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
@@ -1298,7 +1360,7 @@ const ServiceSummary = ({service}) => {
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true
@@ -1306,7 +1368,7 @@ const ServiceSummary = ({service}) => {
     variant: "subtitle2"
   }, "Type: ", (_b = (_a = service.spec) == null ? void 0 : _a.type) != null ? _b : "?")));
 };
-const ServiceCard = ({service}) => {
+const ServiceCard = ({ service }) => {
   var _a, _b, _c, _d, _e, _f, _g, _h, _i;
   const metadata = {};
   if ((_d = (_c = (_b = (_a = service.status) == null ? void 0 : _a.loadBalancer) == null ? void 0 : _b.ingress) == null ? void 0 : _c.length) != null ? _d : -1 > 0) {
@@ -1326,9 +1388,9 @@ const ServiceCard = ({service}) => {
     }
   });
 };
-const ServiceAccordion = ({service}) => {
+const ServiceAccordion = ({ service }) => {
   return /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(ServiceSummary, {
@@ -1389,7 +1451,7 @@ const JobDrawer = ({
   }, "Job"))));
 };
 
-const JobSummary = ({job}) => {
+const JobSummary = ({ job }) => {
   var _a, _b, _c, _d, _e, _f;
   return /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
@@ -1405,7 +1467,7 @@ const JobSummary = ({job}) => {
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
@@ -1422,9 +1484,9 @@ const JobSummary = ({job}) => {
     item: true
   }, "Completion time: ", job.status.completionTime.toString())));
 };
-const JobAccordion = ({job, ownedPods}) => {
+const JobAccordion = ({ job, ownedPods }) => {
   return /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(JobSummary, {
@@ -1433,7 +1495,7 @@ const JobAccordion = ({job, ownedPods}) => {
     pods: ownedPods
   })));
 };
-const JobsAccordions = ({jobs}) => {
+const JobsAccordions = ({ jobs }) => {
   const groupedResponses = useContext(GroupedResponsesContext);
   return /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
@@ -1496,7 +1558,7 @@ const CronJobDrawer = ({
   }))));
 };
 
-const CronJobSummary = ({cronJob}) => {
+const CronJobSummary = ({ cronJob }) => {
   var _a, _b;
   return /* @__PURE__ */ React__default.createElement(Grid, {
     container: true,
@@ -1512,7 +1574,7 @@ const CronJobSummary = ({cronJob}) => {
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
@@ -1529,9 +1591,9 @@ const CronJobSummary = ({cronJob}) => {
     variant: "body1"
   }, "Schedule:", " ", ((_b = cronJob.spec) == null ? void 0 : _b.schedule) ? `${cronJob.spec.schedule} (${cronstrue.toString(cronJob.spec.schedule)})` : "N/A"))));
 };
-const CronJobAccordion = ({cronJob, ownedJobs}) => {
+const CronJobAccordion = ({ cronJob, ownedJobs }) => {
   return /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(CronJobSummary, {
@@ -1660,7 +1722,7 @@ const RolloutSummary = ({
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })), hpa && /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
@@ -1708,7 +1770,7 @@ const RolloutSummary = ({
     }
   }, /* @__PURE__ */ React__default.createElement(PauseIcon, null), /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle1"
-  }, "Paused (", DateTime.fromISO(pauseTime).toRelative({locale: "en"}), ")"))), abortedMessage && /* @__PURE__ */ React__default.createElement(Grid, {
+  }, "Paused (", DateTime.fromISO(pauseTime).toRelative({ locale: "en" }), ")"))), abortedMessage && /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
     xs: 3
   }, AbortedTitle));
@@ -1729,7 +1791,7 @@ const RolloutAccordion = ({
   const abortedMessage = findAbortedMessage(rollout);
   return /* @__PURE__ */ React__default.createElement(Accordion, {
     defaultExpanded,
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(RolloutSummary, {
@@ -1738,11 +1800,11 @@ const RolloutAccordion = ({
     numberOfPodsWithErrors: podsWithErrors.length,
     hpa: matchingHpa
   })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement("div", {
-    style: {width: "100%"}
+    style: { width: "100%" }
   }, /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "h6"
   }, "Rollout status")), /* @__PURE__ */ React__default.createElement("div", {
-    style: {margin: "1rem"}
+    style: { margin: "1rem" }
   }, abortedMessage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, AbortedTitle, /* @__PURE__ */ React__default.createElement(Typography, {
     variant: "subtitle2"
   }, abortedMessage)), /* @__PURE__ */ React__default.createElement(StepsProgress, {
@@ -1750,7 +1812,8 @@ const RolloutAccordion = ({
     steps: (_f = (_e = (_d = (_c = rollout.spec) == null ? void 0 : _c.strategy) == null ? void 0 : _d.canary) == null ? void 0 : _e.steps) != null ? _f : [],
     currentStepIndex
   })), /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(PodsTable, {
-    pods: ownedPods
+    pods: ownedPods,
+    extraColumns: [READY_COLUMNS, RESOURCE_COLUMNS]
   })))));
 };
 const RolloutAccordions = ({
@@ -1832,7 +1895,7 @@ const DefaultCustomResourceSummary = ({
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "5em"},
+    style: { height: "5em" },
     orientation: "vertical"
   })));
 };
@@ -1843,7 +1906,7 @@ const DefaultCustomResourceAccordion = ({
 }) => {
   return /* @__PURE__ */ React__default.createElement(Accordion, {
     defaultExpanded,
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(DefaultCustomResourceSummary, {
@@ -1933,7 +1996,7 @@ const ClusterSummary = ({
     item: true,
     xs: 1
   }, /* @__PURE__ */ React__default.createElement(Divider, {
-    style: {height: "4em"},
+    style: { height: "4em" },
     orientation: "vertical"
   })), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true,
@@ -1948,16 +2011,26 @@ const ClusterSummary = ({
     item: true
   }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pods with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))));
 };
-const Cluster = ({clusterObjects, podsWithErrors}) => {
+const Cluster = ({ clusterObjects, podsWithErrors }) => {
   const groupedResponses = groupResponses(clusterObjects.resources);
+  const podNameToMetrics = clusterObjects.podMetrics.flat().reduce((accum, next) => {
+    var _a;
+    const name = (_a = next.pod.metadata) == null ? void 0 : _a.name;
+    if (name !== void 0) {
+      accum.set(name, next);
+    }
+    return accum;
+  }, /* @__PURE__ */ new Map());
   return /* @__PURE__ */ React__default.createElement(ClusterContext.Provider, {
     value: clusterObjects.cluster
   }, /* @__PURE__ */ React__default.createElement(GroupedResponsesContext.Provider, {
     value: groupedResponses
+  }, /* @__PURE__ */ React__default.createElement(PodNamesWithMetricsContext.Provider, {
+    value: podNameToMetrics
   }, /* @__PURE__ */ React__default.createElement(PodNamesWithErrorsContext.Provider, {
     value: podsWithErrors
   }, /* @__PURE__ */ React__default.createElement(Accordion, {
-    TransitionProps: {unmountOnExit: true}
+    TransitionProps: { unmountOnExit: true }
   }, /* @__PURE__ */ React__default.createElement(AccordionSummary, {
     expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null)
   }, /* @__PURE__ */ React__default.createElement(ClusterSummary, {
@@ -1975,16 +2048,16 @@ const Cluster = ({clusterObjects, podsWithErrors}) => {
     item: true
   }, /* @__PURE__ */ React__default.createElement(IngressesAccordions, null)), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true
-  }, /* @__PURE__ */ React__default.createElement(ServicesAccordions, null)), /* @__PURE__ */ React__default.createElement(Grid, {
+  }, /* @__PURE__ */ React__default.createElement(ServicesAccordions, null))), /* @__PURE__ */ React__default.createElement(Grid, {
     item: true
   }, /* @__PURE__ */ React__default.createElement(CronJobsAccordions, null))))))));
 };
 
-const KubernetesContent = ({entity}) => {
+const KubernetesContent = ({ entity }) => {
   var _a;
-  const {kubernetesObjects, error} = useKubernetesObjects(entity);
+  const { kubernetesObjects, error } = useKubernetesObjects(entity);
   const clustersWithErrors = (_a = kubernetesObjects == null ? void 0 : kubernetesObjects.items.filter((r) => r.errors.length > 0)) != null ? _a : [];
-  const detectedErrors = kubernetesObjects !== void 0 ? detectErrors(kubernetesObjects) : new Map();
+  const detectedErrors = kubernetesObjects !== void 0 ? detectErrors(kubernetesObjects) : /* @__PURE__ */ new Map();
   return /* @__PURE__ */ React__default.createElement(Page, {
     themeId: "tool"
   }, /* @__PURE__ */ React__default.createElement(Content, null, kubernetesObjects === void 0 && error === void 0 && /* @__PURE__ */ React__default.createElement(Progress, null), clustersWithErrors.length > 0 && /* @__PURE__ */ React__default.createElement(Grid, {
@@ -2062,7 +2135,7 @@ const isKubernetesAvailable = (entity) => {
 };
 const Router = (_props) => {
   var _a, _b;
-  const {entity} = useEntity();
+  const { entity } = useEntity();
   const kubernetesAnnotationValue = (_a = entity.metadata.annotations) == null ? void 0 : _a[KUBERNETES_ANNOTATION];
   const kubernetesLabelSelectorQueryAnnotationValue = (_b = entity.metadata.annotations) == null ? void 0 : _b[KUBERNETES_LABEL_SELECTOR_QUERY_ANNOTATION];
   if (kubernetesAnnotationValue || kubernetesLabelSelectorQueryAnnotationValue) {