@backstage/plugin-kubernetes-react 0.0.0-nightly-20230927021302

package/dist/index.esm.js

@@ -0,0 +1,3229 @@
+import { createApiRef, useApi, discoveryApiRef } from '@backstage/core-plugin-api';
+import useAsync from 'react-use/lib/useAsync';
+import * as React from 'react';
+import React__default, { useCallback, useContext, useState, useEffect, useMemo, Fragment } from 'react';
+import useInterval from 'react-use/lib/useInterval';
+import useAsyncRetry from 'react-use/lib/useAsyncRetry';
+import { stringifyEntityRef } from '@backstage/catalog-model';
+import { NotFoundError } from '@backstage/errors';
+import { makeStyles, createStyles, Dialog, DialogTitle, IconButton, DialogContent, Button, Grid, Typography, Paper, Card, CardHeader, CardContent, CardActions, FormControlLabel, Switch, Drawer, withStyles as withStyles$1, List, ListItem, Container, Tooltip, ListItemText, ListItemAvatar, Avatar, Divider, Chip, Accordion, AccordionSummary, AccordionDetails, Stepper, Step, StepLabel } from '@material-ui/core';
+import { groupResponses } from '@backstage/plugin-kubernetes-common';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import { LinearGauge, DismissableBanner, EmptyState, LogViewer, StructuredMetadataTable, CodeSnippet, WarningPanel, LinkButton, StatusError, StatusOK, StatusWarning, ItemCardGrid, SubvalueCell, StatusAborted, Table, StatusPending } from '@backstage/core-components';
+import { DateTime } from 'luxon';
+import CloseIcon from '@material-ui/icons/Close';
+import OpenInBrowserIcon from '@material-ui/icons/OpenInBrowser';
+import { Terminal } from 'xterm';
+import { FitAddon } from 'xterm-addon-fit';
+import { AttachAddon } from 'xterm-addon-attach';
+import { Skeleton } from '@material-ui/lab';
+import SubjectIcon from '@material-ui/icons/Subject';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import { withStyles, makeStyles as makeStyles$1, createStyles as createStyles$1 } from '@material-ui/core/styles';
+import jsyaml from 'js-yaml';
+import Dialog$1 from '@material-ui/core/Dialog';
+import DialogActions from '@material-ui/core/DialogActions';
+import DialogContent$1 from '@material-ui/core/DialogContent';
+import DialogTitle$1 from '@material-ui/core/DialogTitle';
+import IconButton$1 from '@material-ui/core/IconButton';
+import Typography$1 from '@material-ui/core/Typography';
+import HelpIcon from '@material-ui/icons/Help';
+import InfoIcon from '@material-ui/icons/Info';
+import WarningIcon from '@material-ui/icons/Warning';
+import cronstrue from 'cronstrue';
+import lodash from 'lodash';
+import PauseIcon from '@material-ui/icons/Pause';
+import ErrorOutlineIcon from '@material-ui/icons/ErrorOutline';
+
+const kubernetesApiRef = createApiRef({
+  id: "plugin.kubernetes.service"
+});
+const kubernetesProxyApiRef = createApiRef({
+  id: "plugin.kubernetes.proxy-service"
+});
+
+const useIsPodExecTerminalSupported = () => {
+  const kubernetesApi = useApi(kubernetesApiRef);
+  return useAsync(async () => {
+    const clusters = await kubernetesApi.getClusters();
+    if (clusters.length !== 1) {
+      return false;
+    }
+    const { authProvider } = clusters[0];
+    const isClientAuthProvider = ["aks", "google", "oidc"].some(
+      (authProviderName) => authProvider.includes(authProviderName)
+    );
+    return !isClientAuthProvider;
+  });
+};
+
+const generateAuth = async (entity, kubernetesApi, kubernetesAuthProvidersApi) => {
+  var _a;
+  const clusters = await kubernetesApi.getClusters();
+  const authProviders = [
+    ...new Set(
+      clusters.map(
+        (c) => `${c.authProvider}${c.oidcTokenProvider ? `.${c.oidcTokenProvider}` : ""}`
+      )
+    )
+  ];
+  let requestBody = {
+    entity
+  };
+  for (const authProviderStr of authProviders) {
+    requestBody = await kubernetesAuthProvidersApi.decorateRequestBodyForAuth(
+      authProviderStr,
+      requestBody
+    );
+  }
+  return (_a = requestBody.auth) != null ? _a : {};
+};
+
+const kubernetesAuthProvidersApiRef = createApiRef({
+  id: "plugin.kubernetes-auth-providers.service"
+});
+
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => {
+  __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class GoogleKubernetesAuthProvider {
+  constructor(authProvider) {
+    __publicField$4(this, "authProvider");
+    this.authProvider = authProvider;
+  }
+  async decorateRequestBodyForAuth(requestBody) {
+    const googleAuthToken = (await this.getCredentials()).token;
+    if ("auth" in requestBody) {
+      requestBody.auth.google = googleAuthToken;
+    } else {
+      requestBody.auth = { google: googleAuthToken };
+    }
+    return requestBody;
+  }
+  async getCredentials() {
+    return {
+      token: await this.authProvider.getAccessToken(
+        "https://www.googleapis.com/auth/cloud-platform.read-only"
+      )
+    };
+  }
+}
+
+class ServerSideKubernetesAuthProvider {
+  async decorateRequestBodyForAuth(requestBody) {
+    return requestBody;
+  }
+  async getCredentials() {
+    return {};
+  }
+}
+
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => {
+  __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class OidcKubernetesAuthProvider {
+  constructor(providerName, authProvider) {
+    __publicField$3(this, "providerName");
+    __publicField$3(this, "authProvider");
+    this.providerName = providerName;
+    this.authProvider = authProvider;
+  }
+  async decorateRequestBodyForAuth(requestBody) {
+    const authToken = (await this.getCredentials()).token;
+    const auth = { ...requestBody.auth };
+    if (auth.oidc) {
+      auth.oidc[this.providerName] = authToken;
+    } else {
+      auth.oidc = { [this.providerName]: authToken };
+    }
+    requestBody.auth = auth;
+    return requestBody;
+  }
+  async getCredentials() {
+    return {
+      token: await this.authProvider.getIdToken()
+    };
+  }
+}
+
+class AksKubernetesAuthProvider {
+  constructor(microsoftAuthApi) {
+    this.microsoftAuthApi = microsoftAuthApi;
+  }
+  async decorateRequestBodyForAuth(requestBody) {
+    return {
+      ...requestBody,
+      auth: { ...requestBody.auth, aks: (await this.getCredentials()).token }
+    };
+  }
+  async getCredentials() {
+    return {
+      token: await this.microsoftAuthApi.getAccessToken(
+        "6dae42f8-4368-4678-94ff-3960e28e3630/user.read"
+      )
+    };
+  }
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => {
+  __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class KubernetesAuthProviders {
+  constructor(options) {
+    __publicField$2(this, "kubernetesAuthProviderMap");
+    this.kubernetesAuthProviderMap = /* @__PURE__ */ new Map();
+    this.kubernetesAuthProviderMap.set(
+      "google",
+      new GoogleKubernetesAuthProvider(options.googleAuthApi)
+    );
+    this.kubernetesAuthProviderMap.set(
+      "serviceAccount",
+      new ServerSideKubernetesAuthProvider()
+    );
+    this.kubernetesAuthProviderMap.set(
+      "googleServiceAccount",
+      new ServerSideKubernetesAuthProvider()
+    );
+    this.kubernetesAuthProviderMap.set(
+      "aws",
+      new ServerSideKubernetesAuthProvider()
+    );
+    this.kubernetesAuthProviderMap.set(
+      "azure",
+      new ServerSideKubernetesAuthProvider()
+    );
+    this.kubernetesAuthProviderMap.set(
+      "localKubectlProxy",
+      new ServerSideKubernetesAuthProvider()
+    );
+    this.kubernetesAuthProviderMap.set(
+      "aks",
+      new AksKubernetesAuthProvider(options.microsoftAuthApi)
+    );
+    if (options.oidcProviders) {
+      Object.keys(options.oidcProviders).forEach((provider) => {
+        this.kubernetesAuthProviderMap.set(
+          `oidc.${provider}`,
+          new OidcKubernetesAuthProvider(
+            provider,
+            options.oidcProviders[provider]
+          )
+        );
+      });
+    }
+  }
+  async decorateRequestBodyForAuth(authProvider, requestBody) {
+    const kubernetesAuthProvider = this.kubernetesAuthProviderMap.get(authProvider);
+    if (kubernetesAuthProvider) {
+      return await kubernetesAuthProvider.decorateRequestBodyForAuth(
+        requestBody
+      );
+    }
+    if (authProvider.startsWith("oidc.")) {
+      throw new Error(
+        `KubernetesAuthProviders has no oidcProvider configured for ${authProvider}`
+      );
+    }
+    throw new Error(
+      `authProvider "${authProvider}" has no KubernetesAuthProvider defined for it`
+    );
+  }
+  async getCredentials(authProvider) {
+    const kubernetesAuthProvider = this.kubernetesAuthProviderMap.get(authProvider);
+    if (kubernetesAuthProvider) {
+      return await kubernetesAuthProvider.getCredentials();
+    }
+    if (authProvider.startsWith("oidc.")) {
+      throw new Error(
+        `KubernetesAuthProviders has no oidcProvider configured for ${authProvider}`
+      );
+    }
+    throw new Error(
+      `authProvider "${authProvider}" has no KubernetesAuthProvider defined for it`
+    );
+  }
+}
+
+const useKubernetesObjects = (entity, intervalMs = 1e4) => {
+  const kubernetesApi = useApi(kubernetesApiRef);
+  const kubernetesAuthProvidersApi = useApi(kubernetesAuthProvidersApiRef);
+  const getObjects = useCallback(async () => {
+    const auth = await generateAuth(
+      entity,
+      kubernetesApi,
+      kubernetesAuthProvidersApi
+    );
+    return await kubernetesApi.getObjectsByEntity({
+      auth,
+      entity
+    });
+  }, [kubernetesApi, entity, kubernetesAuthProvidersApi]);
+  const { value, loading, error, retry } = useAsyncRetry(
+    () => getObjects(),
+    [getObjects]
+  );
+  useInterval(() => retry(), intervalMs);
+  return {
+    kubernetesObjects: value,
+    loading,
+    error: error == null ? void 0 : error.message
+  };
+};
+
+const useCustomResources = (entity, customResourceMatchers, intervalMs = 1e4) => {
+  const kubernetesApi = useApi(kubernetesApiRef);
+  const kubernetesAuthProvidersApi = useApi(kubernetesAuthProvidersApiRef);
+  const matchersString = JSON.stringify(customResourceMatchers);
+  const getCustomObjects = useCallback(
+    async () => {
+      const auth = await generateAuth(
+        entity,
+        kubernetesApi,
+        kubernetesAuthProvidersApi
+      );
+      return await kubernetesApi.getCustomObjectsByEntity({
+        auth,
+        customResources: customResourceMatchers,
+        entity
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [kubernetesApi, entity, kubernetesAuthProvidersApi, matchersString]
+  );
+  const { value, loading, error, retry } = useAsyncRetry(
+    () => getCustomObjects(),
+    [getCustomObjects]
+  );
+  useInterval(() => retry(), intervalMs);
+  return {
+    kubernetesObjects: value,
+    loading,
+    error: error == null ? void 0 : error.message
+  };
+};
+
+const PodNamesWithErrorsContext = React__default.createContext(
+  /* @__PURE__ */ new Set()
+);
+
+const PodNamesWithMetricsContext = React__default.createContext(/* @__PURE__ */ new Map());
+
+const GroupedResponsesContext = React__default.createContext({
+  pods: [],
+  replicaSets: [],
+  deployments: [],
+  services: [],
+  configMaps: [],
+  horizontalPodAutoscalers: [],
+  ingresses: [],
+  jobs: [],
+  cronJobs: [],
+  customResources: [],
+  statefulsets: []
+});
+
+const ClusterContext = React__default.createContext({
+  name: ""
+});
+
+const PodMetricsContext = React__default.createContext(/* @__PURE__ */ new Map());
+const usePodMetrics = (clusterName, matcher) => {
+  var _a, _b, _c, _d;
+  const targetRef = {
+    name: (_b = (_a = matcher.metadata) == null ? void 0 : _a.name) != null ? _b : "",
+    namespace: (_d = (_c = matcher.metadata) == null ? void 0 : _c.namespace) != null ? _d : ""
+  };
+  const metricsMap = useContext(PodMetricsContext);
+  const metrics = metricsMap.get(clusterName);
+  return metrics == null ? void 0 : metrics.find((m) => {
+    var _a2, _b2, _c2, _d2;
+    const pod = m.pod;
+    return targetRef.name === ((_b2 = (_a2 = pod.metadata) == null ? void 0 : _a2.name) != null ? _b2 : "") && targetRef.namespace === ((_d2 = (_c2 = pod.metadata) == null ? void 0 : _c2.namespace) != null ? _d2 : "");
+  });
+};
+
+const DetectedErrorsContext = React__default.createContext([]);
+const useMatchingErrors = (matcher) => {
+  var _a, _b, _c, _d;
+  const targetRef = {
+    name: (_b = (_a = matcher.metadata) == null ? void 0 : _a.name) != null ? _b : "",
+    namespace: (_d = (_c = matcher.metadata) == null ? void 0 : _c.namespace) != null ? _d : "",
+    kind: matcher.kind,
+    apiGroup: matcher.apiVersion
+  };
+  const errors = useContext(DetectedErrorsContext);
+  return errors.filter((e) => {
+    const r = e.sourceRef;
+    return targetRef.apiGroup === r.apiGroup && targetRef.kind === r.kind && targetRef.name === r.name && targetRef.namespace === r.namespace;
+  });
+};
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => {
+  __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class KubernetesBackendClient {
+  constructor(options) {
+    __publicField$1(this, "discoveryApi");
+    __publicField$1(this, "identityApi");
+    __publicField$1(this, "kubernetesAuthProvidersApi");
+    this.discoveryApi = options.discoveryApi;
+    this.identityApi = options.identityApi;
+    this.kubernetesAuthProvidersApi = options.kubernetesAuthProvidersApi;
+  }
+  async handleResponse(response) {
+    if (!response.ok) {
+      const payload = await response.text();
+      let message;
+      switch (response.status) {
+        case 404:
+          message = "Could not find the Kubernetes Backend (HTTP 404). Make sure the plugin has been fully installed.";
+          break;
+        default:
+          message = `Request failed with ${response.status} ${response.statusText}, ${payload}`;
+      }
+      throw new Error(message);
+    }
+    return await response.json();
+  }
+  async postRequired(path, requestBody) {
+    const url = `${await this.discoveryApi.getBaseUrl("kubernetes")}${path}`;
+    const { token: idToken } = await this.identityApi.getCredentials();
+    const response = await fetch(url, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+        ...idToken && { Authorization: `Bearer ${idToken}` }
+      },
+      body: JSON.stringify(requestBody)
+    });
+    return this.handleResponse(response);
+  }
+  async getCluster(clusterName) {
+    const cluster = await this.getClusters().then(
+      (clusters) => clusters.find((c) => c.name === clusterName)
+    );
+    if (!cluster) {
+      throw new NotFoundError(`Cluster ${clusterName} not found`);
+    }
+    return cluster;
+  }
+  async getCredentials(authProvider) {
+    return await this.kubernetesAuthProvidersApi.getCredentials(authProvider);
+  }
+  async getObjectsByEntity(requestBody) {
+    return await this.postRequired(
+      `/services/${requestBody.entity.metadata.name}`,
+      requestBody
+    );
+  }
+  async getWorkloadsByEntity(request) {
+    return await this.postRequired("/resources/workloads/query", {
+      auth: request.auth,
+      entityRef: stringifyEntityRef(request.entity)
+    });
+  }
+  async getCustomObjectsByEntity(request) {
+    return await this.postRequired(`/resources/custom/query`, {
+      entityRef: stringifyEntityRef(request.entity),
+      auth: request.auth,
+      customResources: request.customResources
+    });
+  }
+  async getClusters() {
+    const { token: idToken } = await this.identityApi.getCredentials();
+    const url = `${await this.discoveryApi.getBaseUrl("kubernetes")}/clusters`;
+    const response = await fetch(url, {
+      method: "GET",
+      headers: {
+        ...idToken && { Authorization: `Bearer ${idToken}` }
+      }
+    });
+    return (await this.handleResponse(response)).items;
+  }
+  async proxy(options) {
+    var _a;
+    const { authProvider } = await this.getCluster(options.clusterName);
+    const { token: k8sToken } = await this.getCredentials(authProvider);
+    const url = `${await this.discoveryApi.getBaseUrl("kubernetes")}/proxy${options.path}`;
+    const identityResponse = await this.identityApi.getCredentials();
+    const headers = {
+      ...(_a = options.init) == null ? void 0 : _a.headers,
+      [`Backstage-Kubernetes-Cluster`]: options.clusterName,
+      ...k8sToken && {
+        [`Backstage-Kubernetes-Authorization`]: `Bearer ${k8sToken}`
+      },
+      ...identityResponse.token && {
+        Authorization: `Bearer ${identityResponse.token}`
+      }
+    };
+    return await fetch(url, { ...options.init, headers });
+  }
+}
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class KubernetesProxyClient {
+  constructor(options) {
+    __publicField(this, "kubernetesApi");
+    this.kubernetesApi = options.kubernetesApi;
+  }
+  async handleText(response) {
+    if (!response.ok) {
+      const payload = await response.text();
+      let message;
+      switch (response.status) {
+        default:
+          message = `Proxy request failed with ${response.status} ${response.statusText}, ${payload}`;
+      }
+      throw new Error(message);
+    }
+    return await response.text();
+  }
+  async handleJson(response) {
+    if (!response.ok) {
+      const payload = await response.text();
+      let message = `Request failed with ${response.status} ${response.statusText}, ${payload}`;
+      switch (response.status) {
+        case 404:
+          message = `Proxy request failed with ${response.status} ${response.statusText}, ${payload}`;
+          break;
+        default:
+          message = `Request failed with ${response.status} ${response.statusText}, ${payload}`;
+      }
+      throw new Error(message);
+    }
+    return await response.json();
+  }
+  async getEventsByInvolvedObjectName({
+    clusterName,
+    involvedObjectName,
+    namespace
+  }) {
+    return await this.kubernetesApi.proxy({
+      clusterName,
+      path: `/api/v1/namespaces/${namespace}/events?fieldSelector=involvedObject.name=${involvedObjectName}`,
+      init: {
+        method: "GET"
+      }
+    }).then((response) => this.handleJson(response)).then((eventList) => eventList.items);
+  }
+  async getPodLogs({
+    podName,
+    namespace,
+    clusterName,
+    containerName,
+    previous
+  }) {
+    const params = new URLSearchParams({
+      container: containerName
+    });
+    if (previous) {
+      params.append("previous", "");
+    }
+    return await this.kubernetesApi.proxy({
+      clusterName,
+      path: `/api/v1/namespaces/${namespace}/pods/${podName}/log?${params.toString()}`,
+      init: {
+        method: "GET"
+      }
+    }).then((response) => this.handleText(response)).then((text) => ({ text }));
+  }
+}
+
+const currentToDeclaredResourceToPerc$1 = (current, resource) => {
+  if (Number(resource) === 0)
+    return 0;
+  if (typeof current === "number" && typeof resource === "number") {
+    return Math.round(current / resource * 100);
+  }
+  const numerator = BigInt(current);
+  const denominator = BigInt(resource);
+  return Number(numerator * BigInt(100) / denominator);
+};
+const bytesToMiB = (value) => {
+  return `${(parseFloat(value.toString()) / 1024 / 1024).toFixed(0)}MiB`;
+};
+const formatMillicores = (value) => {
+  return `${(parseFloat(value.toString()) * 1e3).toFixed(0)}m`;
+};
+
+var __accessCheck = (obj, member, msg) => {
+  if (!member.has(obj))
+    throw TypeError("Cannot " + msg);
+};
+var __privateGet = (obj, member, getter) => {
+  __accessCheck(obj, member, "read from private field");
+  return getter ? getter.call(obj) : member.get(obj);
+};
+var __privateAdd = (obj, member, value) => {
+  if (member.has(obj))
+    throw TypeError("Cannot add the same private member more than once");
+  member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+};
+var _textEncoder;
+class PodExecTerminalAttachAddon extends AttachAddon {
+  constructor(socket, options) {
+    super(socket, options);
+    __privateAdd(this, _textEncoder, new TextEncoder());
+    const thisAddon = this;
+    thisAddon._sendBinary = (data) => {
+      if (!thisAddon._checkOpenSocket()) {
+        return;
+      }
+      const buffer = Uint8Array.from([0, ...__privateGet(this, _textEncoder).encode(data)]);
+      thisAddon._socket.send(buffer);
+    };
+    thisAddon._sendData = (data) => {
+      if (!thisAddon._checkOpenSocket()) {
+        return;
+      }
+      thisAddon._sendBinary(data);
+    };
+  }
+}
+_textEncoder = new WeakMap();
+
+const hasSocketProtocol = (url) => /wss?:\/\//.test(url.toString());
+const PodExecTerminal = (props) => {
+  const { containerName, podNamespace, podName } = props;
+  const [baseUrl, setBaseUrl] = useState(window.location.host);
+  const terminalRef = React__default.useRef(null);
+  const discoveryApi = useApi(discoveryApiRef);
+  const namespace = podNamespace != null ? podNamespace : "default";
+  useEffect(() => {
+    discoveryApi.getBaseUrl("kubernetes").then((url) => url != null ? url : window.location.host).then((url) => url.replace(/^http(s?):\/\//, "ws$1://")).then((url) => setBaseUrl(url));
+  }, [discoveryApi]);
+  const urlParams = useMemo(() => {
+    const params = new URLSearchParams({
+      container: containerName,
+      stdin: "true",
+      stdout: "true",
+      stderr: "true",
+      tty: "true",
+      command: "/bin/sh"
+    });
+    return params;
+  }, [containerName]);
+  const socketUrl = useMemo(() => {
+    if (!hasSocketProtocol(baseUrl)) {
+      return "";
+    }
+    return new URL(
+      `${baseUrl}/proxy/api/v1/namespaces/${namespace}/pods/${podName}/exec?${urlParams}`
+    );
+  }, [baseUrl, namespace, podName, urlParams]);
+  useEffect(() => {
+    if (!hasSocketProtocol(socketUrl)) {
+      return () => {
+      };
+    }
+    const terminal = new Terminal();
+    const fitAddon = new FitAddon();
+    terminal.loadAddon(fitAddon);
+    if (terminalRef.current) {
+      terminal.open(terminalRef.current);
+      fitAddon.fit();
+    }
+    terminal.writeln("Starting terminal, please wait...");
+    const socket = new WebSocket(socketUrl, ["channel.k8s.io"]);
+    socket.onopen = () => {
+      terminal.clear();
+      const attachAddon = new PodExecTerminalAttachAddon(socket, {
+        bidirectional: true
+      });
+      terminal.loadAddon(attachAddon);
+    };
+    socket.onclose = () => {
+      terminal.writeln("Socket connection closed");
+    };
+    return () => {
+      terminal == null ? void 0 : terminal.clear();
+      socket == null ? void 0 : socket.close();
+    };
+  }, [baseUrl, socketUrl]);
+  return /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      "data-testid": "terminal",
+      ref: terminalRef,
+      style: {
+        width: "100%",
+        height: "100%"
+      }
+    }
+  );
+};
+
+const useStyles$3 = makeStyles(
+  (theme) => createStyles({
+    dialogPaper: { minHeight: "calc(100% - 64px)" },
+    dialogContent: { flexBasis: 0 },
+    closeButton: {
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  })
+);
+const PodExecTerminalDialog = (props) => {
+  const classes = useStyles$3();
+  const { clusterName, containerName, podName } = props;
+  const [open, setOpen] = useState(false);
+  const isPodExecTerminalSupported = useIsPodExecTerminalSupported();
+  const openDialog = () => {
+    setOpen(true);
+  };
+  const closeDialog = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, !isPodExecTerminalSupported.loading && isPodExecTerminalSupported.value && /* @__PURE__ */ React__default.createElement(
+    Dialog,
+    {
+      maxWidth: false,
+      fullWidth: true,
+      open,
+      onClose: closeDialog,
+      PaperProps: { className: classes.dialogPaper }
+    },
+    /* @__PURE__ */ React__default.createElement(DialogTitle, { id: "dialog-title" }, podName, " - ", containerName, " terminal shell on cluster", " ", clusterName, /* @__PURE__ */ React__default.createElement(
+      IconButton,
+      {
+        "aria-label": "close",
+        className: classes.closeButton,
+        onClick: closeDialog
+      },
+      /* @__PURE__ */ React__default.createElement(CloseIcon, null)
+    )),
+    /* @__PURE__ */ React__default.createElement(DialogContent, { className: classes.dialogContent }, /* @__PURE__ */ React__default.createElement(PodExecTerminal, { ...props }))
+  ), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "outlined",
+      "aria-label": "open terminal",
+      component: "label",
+      disabled: isPodExecTerminalSupported.loading || !isPodExecTerminalSupported.value,
+      onClick: openDialog,
+      startIcon: /* @__PURE__ */ React__default.createElement(OpenInBrowserIcon, null)
+    },
+    "Terminal"
+  ));
+};
+
+const getProgressColor = ({
+  palette,
+  value,
+  inverse,
+  max
+}) => {
+  if (isNaN(value)) {
+    return palette.status.pending;
+  }
+  const actualMax = max ? max : 100;
+  const actualValue = inverse ? actualMax - value : value;
+  if (actualValue >= actualMax) {
+    return palette.status.error;
+  } else if (actualValue > 90 || actualValue < 40) {
+    return palette.status.warning;
+  }
+  return palette.status.ok;
+};
+const ResourceUtilization = ({
+  compressed = false,
+  title,
+  usage,
+  total,
+  totalFormatted
+}) => {
+  const utilization = currentToDeclaredResourceToPerc$1(usage, total);
+  return /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 0 }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(
+    Typography,
+    {
+      variant: compressed ? "caption" : "subtitle2"
+    },
+    `${title}: ${totalFormatted}`
+  )), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(
+    LinearGauge,
+    {
+      getColor: getProgressColor,
+      width: compressed ? "thin" : "thick",
+      value: utilization / 100
+    }
+  ), !compressed && /* @__PURE__ */ React__default.createElement(Typography, { variant: "caption" }, "usage: ", `${utilization}%`)));
+};
+
+const usePodLogs = ({ containerScope, previous }) => {
+  const kubernetesProxyApi = useApi(kubernetesProxyApiRef);
+  return useAsync(async () => {
+    return await kubernetesProxyApi.getPodLogs({
+      podName: containerScope.podName,
+      namespace: containerScope.podNamespace,
+      containerName: containerScope.containerName,
+      clusterName: containerScope.clusterName,
+      previous
+    });
+  }, [JSON.stringify(containerScope)]);
+};
+
+const PodLogs = ({
+  containerScope,
+  previous
+}) => {
+  const { value, error, loading } = usePodLogs({
+    containerScope,
+    previous
+  });
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, error && /* @__PURE__ */ React__default.createElement(
+    DismissableBanner,
+    {
+      ...{
+        message: error.message,
+        variant: "error",
+        fixed: false
+      },
+      id: "pod-logs"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Paper,
+    {
+      elevation: 1,
+      style: { height: "100%", width: "100%", minHeight: "55rem" }
+    },
+    loading && /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rect", width: "100%", height: "100%" }),
+    !loading && value !== void 0 && (value.text === "" ? /* @__PURE__ */ React__default.createElement(
+      EmptyState,
+      {
+        missing: "data",
+        title: "No logs emitted",
+        description: "No logs were emitted by the container"
+      }
+    ) : /* @__PURE__ */ React__default.createElement(LogViewer, { text: value.text }))
+  ));
+};
+
+const useStyles$2 = makeStyles(
+  (theme) => createStyles({
+    closeButton: {
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  })
+);
+const PodLogsDialog = ({ containerScope }) => {
+  const classes = useStyles$2();
+  const [open, setOpen] = useState(false);
+  const openDialog = () => {
+    setOpen(true);
+  };
+  const closeDialog = () => {
+    setOpen(false);
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Dialog, { maxWidth: "xl", fullWidth: true, open, onClose: closeDialog }, /* @__PURE__ */ React__default.createElement(DialogTitle, { id: "dialog-title" }, containerScope.podName, " - ", containerScope.containerName, " logs on cluster ", containerScope.clusterName, /* @__PURE__ */ React__default.createElement(
+    IconButton,
+    {
+      "aria-label": "close",
+      className: classes.closeButton,
+      onClick: closeDialog
+    },
+    /* @__PURE__ */ React__default.createElement(CloseIcon, null)
+  )), /* @__PURE__ */ React__default.createElement(DialogContent, null, /* @__PURE__ */ React__default.createElement(PodLogs, { containerScope }))), /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "outlined",
+      "aria-label": "get logs",
+      component: "label",
+      onClick: openDialog,
+      startIcon: /* @__PURE__ */ React__default.createElement(SubjectIcon, null)
+    },
+    "Logs"
+  ));
+};
+
+const getContainerHealthChecks = (containerSpec, containerStatus) => {
+  var _a, _b, _c, _d;
+  if (((_b = (_a = containerStatus.state) == null ? void 0 : _a.terminated) == null ? void 0 : _b.reason) === "Completed") {
+    return {
+      "not waiting to start": ((_c = containerStatus.state) == null ? void 0 : _c.waiting) === void 0,
+      "no restarts": containerStatus.restartCount === 0
+    };
+  }
+  return {
+    "not waiting to start": ((_d = containerStatus.state) == null ? void 0 : _d.waiting) === void 0,
+    started: !!containerStatus.started,
+    ready: containerStatus.ready,
+    "no restarts": containerStatus.restartCount === 0,
+    "readiness probe set": containerSpec && (containerSpec == null ? void 0 : containerSpec.readinessProbe) !== void 0
+  };
+};
+const getCurrentState = (containerStatus) => {
+  var _a, _b, _c, _d, _e;
+  return ((_b = (_a = containerStatus.state) == null ? void 0 : _a.waiting) == null ? void 0 : _b.reason) || ((_d = (_c = containerStatus.state) == null ? void 0 : _c.terminated) == null ? void 0 : _d.reason) || (((_e = containerStatus.state) == null ? void 0 : _e.running) !== void 0 ? "Running" : "Unknown");
+};
+const getStartedAtTime = (containerStatus) => {
+  var _a, _b, _c, _d;
+  return ((_b = (_a = containerStatus.state) == null ? void 0 : _a.running) == null ? void 0 : _b.startedAt) || ((_d = (_c = containerStatus.state) == null ? void 0 : _c.terminated) == null ? void 0 : _d.startedAt);
+};
+const ContainerDatetime = ({ prefix, dateTime }) => {
+  return /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, prefix, ":", " ", DateTime.fromISO(dateTime).toRelative({
+    locale: "en"
+  }));
+};
+const ContainerCard = ({
+  podScope,
+  containerSpec,
+  containerStatus,
+  containerMetrics
+}) => {
+  var _a, _b;
+  if (containerSpec === void 0) {
+    return /* @__PURE__ */ React__default.createElement(Typography, null, "error reading pod from cluster");
+  }
+  const containerStartedTime = getStartedAtTime(containerStatus);
+  const containerFinishedTime = (_b = (_a = containerStatus.state) == null ? void 0 : _a.terminated) == null ? void 0 : _b.finishedAt;
+  return /* @__PURE__ */ React__default.createElement(Card, null, /* @__PURE__ */ React__default.createElement(
+    CardHeader,
+    {
+      title: containerStatus.name,
+      subheader: containerStatus.image
+    }
+  ), /* @__PURE__ */ React__default.createElement(CardContent, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, containerStartedTime && /* @__PURE__ */ React__default.createElement(
+    ContainerDatetime,
+    {
+      prefix: "Started",
+      dateTime: containerStartedTime
+    }
+  ), containerFinishedTime && /* @__PURE__ */ React__default.createElement(
+    ContainerDatetime,
+    {
+      prefix: "Completed",
+      dateTime: containerFinishedTime
+    }
+  ), containerStartedTime && containerFinishedTime && /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "Execution time:", " ", DateTime.fromISO(containerFinishedTime).diff(DateTime.fromISO(containerStartedTime), [
+    "hours",
+    "minutes",
+    "seconds"
+  ]).toHuman())), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "Status: ", getCurrentState(containerStatus))), containerStatus.restartCount > 0 && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "Restarts: ", containerStatus.restartCount)), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "Container health")), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(
+    StructuredMetadataTable,
+    {
+      metadata: getContainerHealthChecks(
+        containerSpec,
+        containerStatus
+      )
+    }
+  )), containerMetrics && /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, xs: 12, spacing: 0 }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle1" }, "Resource utilization")), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12, style: { minHeight: "5rem" } }, /* @__PURE__ */ React__default.createElement(
+    ResourceUtilization,
+    {
+      compressed: true,
+      title: "CPU requests",
+      usage: containerMetrics.cpuUsage.currentUsage,
+      total: containerMetrics.cpuUsage.requestTotal,
+      totalFormatted: formatMillicores(
+        containerMetrics.cpuUsage.requestTotal
+      )
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResourceUtilization,
+    {
+      compressed: true,
+      title: "CPU limits",
+      usage: containerMetrics.cpuUsage.currentUsage,
+      total: containerMetrics.cpuUsage.limitTotal,
+      totalFormatted: formatMillicores(
+        containerMetrics.cpuUsage.limitTotal
+      )
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResourceUtilization,
+    {
+      compressed: true,
+      title: "Memory requests",
+      usage: containerMetrics.memoryUsage.currentUsage,
+      total: containerMetrics.memoryUsage.requestTotal,
+      totalFormatted: bytesToMiB(
+        containerMetrics.memoryUsage.requestTotal
+      )
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    ResourceUtilization,
+    {
+      compressed: true,
+      title: "Memory limits",
+      usage: containerMetrics.memoryUsage.currentUsage,
+      total: containerMetrics.memoryUsage.limitTotal,
+      totalFormatted: bytesToMiB(
+        containerMetrics.memoryUsage.limitTotal
+      )
+    }
+  ))))), /* @__PURE__ */ React__default.createElement(CardActions, null, /* @__PURE__ */ React__default.createElement(
+    PodLogsDialog,
+    {
+      containerScope: {
+        containerName: containerStatus.name,
+        ...podScope
+      }
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    PodExecTerminalDialog,
+    {
+      clusterName: podScope.clusterName,
+      containerName: containerStatus.name,
+      podName: podScope.podName,
+      podNamespace: podScope.podNamespace
+    }
+  )));
+};
+
+const kindMappings$3 = {
+  deployment: "deployment",
+  pod: "pod",
+  ingress: "ingress",
+  service: "service",
+  horizontalpodautoscaler: "deployment",
+  statefulset: "statefulset"
+};
+function standardFormatter(options) {
+  var _a, _b, _c, _d;
+  if (!options.dashboardUrl) {
+    throw new Error("standard dashboard requires a dashboardUrl option");
+  }
+  const result = new URL(options.dashboardUrl.href);
+  const name = encodeURIComponent((_b = (_a = options.object.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+  const namespace = encodeURIComponent(
+    (_d = (_c = options.object.metadata) == null ? void 0 : _c.namespace) != null ? _d : ""
+  );
+  const validKind = kindMappings$3[options.kind.toLocaleLowerCase("en-US")];
+  if (!result.pathname.endsWith("/")) {
+    result.pathname += "/";
+  }
+  if (validKind && name && namespace) {
+    result.hash = `/${validKind}/${namespace}/${name}`;
+  } else if (namespace) {
+    result.hash = "/workloads";
+  }
+  if (namespace) {
+    result.hash += `?namespace=${namespace}`;
+  }
+  return result;
+}
+
+const kindMappings$2 = {
+  deployment: "apps.deployment",
+  ingress: "networking.k8s.io.ingress",
+  service: "service",
+  horizontalpodautoscaler: "autoscaling.horizontalpodautoscaler"
+};
+function rancherFormatter(options) {
+  var _a, _b, _c, _d;
+  if (!options.dashboardUrl) {
+    throw new Error("Rancher dashboard requires a dashboardUrl option");
+  }
+  const basePath = new URL(options.dashboardUrl.href);
+  const name = encodeURIComponent((_b = (_a = options.object.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+  const namespace = encodeURIComponent(
+    (_d = (_c = options.object.metadata) == null ? void 0 : _c.namespace) != null ? _d : ""
+  );
+  const validKind = kindMappings$2[options.kind.toLocaleLowerCase("en-US")];
+  if (!basePath.pathname.endsWith("/")) {
+    basePath.pathname += "/";
+  }
+  let path = "";
+  if (validKind && name && namespace) {
+    path = `explorer/${validKind}/${namespace}/${name}`;
+  } else if (namespace) {
+    path = "explorer/workload";
+  }
+  return new URL(path, basePath);
+}
+
+const kindMappings$1 = {
+  deployment: "deployments",
+  ingress: "ingresses",
+  service: "services",
+  horizontalpodautoscaler: "horizontalpodautoscalers",
+  persistentvolume: "persistentvolumes"
+};
+function openshiftFormatter(options) {
+  var _a, _b, _c, _d;
+  if (!options.dashboardUrl) {
+    throw new Error("OpenShift dashboard requires a dashboardUrl option");
+  }
+  const basePath = new URL(options.dashboardUrl.href);
+  const name = encodeURIComponent((_b = (_a = options.object.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+  const namespace = encodeURIComponent(
+    (_d = (_c = options.object.metadata) == null ? void 0 : _c.namespace) != null ? _d : ""
+  );
+  const validKind = kindMappings$1[options.kind.toLocaleLowerCase("en-US")];
+  if (!basePath.pathname.endsWith("/")) {
+    basePath.pathname += "/";
+  }
+  let path = "";
+  if (namespace) {
+    if (name && validKind) {
+      path = `k8s/ns/${namespace}/${validKind}/${name}`;
+    } else {
+      path = `k8s/cluster/projects/${namespace}`;
+    }
+  } else if (validKind) {
+    path = `k8s/cluster/${validKind}`;
+    if (name) {
+      path += `/${name}`;
+    }
+  }
+  return new URL(path, basePath);
+}
+
+const basePath = "https://portal.azure.com/#blade/Microsoft_Azure_ContainerService/AksK8ResourceMenuBlade/overview-Deployment/aksClusterId";
+const requiredParams = ["subscriptionId", "resourceGroup", "clusterName"];
+function aksFormatter(options) {
+  if (!options.dashboardParameters) {
+    throw new Error("AKS dashboard requires a dashboardParameters option");
+  }
+  const args = options.dashboardParameters;
+  for (const param of requiredParams) {
+    if (typeof args[param] !== "string") {
+      throw new Error(
+        `AKS dashboard requires a "${param}" of type string in the dashboardParameters option`
+      );
+    }
+  }
+  const path = `/subscriptions/${args.subscriptionId}/resourceGroups/${args.resourceGroup}/providers/Microsoft.ContainerService/managedClusters/${args.clusterName}`;
+  const { name, namespace, uid } = options.object.metadata;
+  const { selector } = options.object.spec;
+  const params = {
+    kind: options.kind,
+    metadata: { name, namespace, uid },
+    spec: {
+      selector
+    }
+  };
+  return new URL(
+    `${basePath}/${encodeURIComponent(path)}/resource/${encodeURIComponent(
+      JSON.stringify(params)
+    )}`
+  );
+}
+
+function eksFormatter(_options) {
+  throw new Error("EKS formatter is not yet implemented. Please, contribute!");
+}
+
+const kindMappings = {
+  deployment: "deployment",
+  pod: "pod",
+  ingress: "ingress",
+  service: "service",
+  horizontalpodautoscaler: "deployment"
+};
+function gkeFormatter(options) {
+  var _a, _b, _c, _d;
+  if (!options.dashboardParameters) {
+    throw new Error("GKE dashboard requires a dashboardParameters option");
+  }
+  const args = options.dashboardParameters;
+  if (typeof args.projectId !== "string") {
+    throw new Error(
+      'GKE dashboard requires a "projectId" of type string in the dashboardParameters option'
+    );
+  }
+  if (typeof args.region !== "string") {
+    throw new Error(
+      'GKE dashboard requires a "region" of type string in the dashboardParameters option'
+    );
+  }
+  if (typeof args.clusterName !== "string") {
+    throw new Error(
+      'GKE dashboard requires a "clusterName" of type string in the dashboardParameters option'
+    );
+  }
+  const basePath = new URL("https://console.cloud.google.com/");
+  const region = encodeURIComponent(args.region);
+  const clusterName = encodeURIComponent(args.clusterName);
+  const name = encodeURIComponent((_b = (_a = options.object.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+  const namespace = encodeURIComponent(
+    (_d = (_c = options.object.metadata) == null ? void 0 : _c.namespace) != null ? _d : ""
+  );
+  const validKind = kindMappings[options.kind.toLocaleLowerCase("en-US")];
+  let path = "";
+  if (namespace && name && validKind) {
+    const kindsWithDetails = ["ingress", "pod"];
+    const landingPage = kindsWithDetails.includes(validKind) ? "details" : "overview";
+    path = `kubernetes/${validKind}/${region}/${clusterName}/${namespace}/${name}/${landingPage}`;
+  } else {
+    path = `kubernetes/clusters/details/${region}/${clusterName}/details`;
+  }
+  const result = new URL(path, basePath);
+  result.searchParams.set("project", args.projectId);
+  return result;
+}
+
+const clusterLinksFormatters = {
+  standard: standardFormatter,
+  rancher: rancherFormatter,
+  openshift: openshiftFormatter,
+  aks: aksFormatter,
+  eks: eksFormatter,
+  gke: gkeFormatter
+};
+const defaultFormatterName = "standard";
+
+function formatClusterLink(options) {
+  if (!options.dashboardUrl && !options.dashboardParameters) {
+    return void 0;
+  }
+  if (options.dashboardUrl && !options.object) {
+    return options.dashboardUrl;
+  }
+  const app = options.dashboardApp || defaultFormatterName;
+  const formatter = clusterLinksFormatters[app];
+  if (!formatter) {
+    throw new Error(`Could not find Kubernetes dashboard app named '${app}'`);
+  }
+  const url = formatter({
+    dashboardUrl: options.dashboardUrl ? new URL(options.dashboardUrl) : void 0,
+    dashboardParameters: options.dashboardParameters,
+    object: options.object,
+    kind: options.kind
+  });
+  return url.toString();
+}
+
+const ManifestYaml = ({ object }) => {
+  const [managedFields, setManagedFields] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React__default.createElement(
+        Switch,
+        {
+          checked: managedFields,
+          onChange: (event) => {
+            setManagedFields(event.target.checked);
+          },
+          name: "Managed Fields"
+        }
+      ),
+      label: "Managed Fields"
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    CodeSnippet,
+    {
+      language: "yaml",
+      text: jsyaml.dump(object, {
+        // NOTE: this will remove any field called `managedFields`
+        // not just the metadata one
+        // TODO: @mclarke make this only remove the `metadata.managedFields`
+        replacer: (key, value) => {
+          if (!managedFields) {
+            return key === "managedFields" ? void 0 : value;
+          }
+          return value;
+        }
+      })
+    }
+  ));
+};
+
+const useDrawerStyles$1 = makeStyles(
+  (theme) => createStyles({
+    paper: {
+      width: "50%",
+      justifyContent: "space-between",
+      padding: theme.spacing(2.5)
+    }
+  })
+);
+const useDrawerContentStyles$2 = makeStyles(
+  (_) => createStyles({
+    header: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    errorMessage: {
+      marginTop: "1em",
+      marginBottom: "1em"
+    },
+    options: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    icon: {
+      fontSize: 20
+    },
+    content: {
+      height: "80%"
+    }
+  })
+);
+const PodDrawerButton = withStyles({
+  root: {
+    padding: "6px 5px"
+  },
+  label: {
+    textTransform: "none"
+  }
+})(Button);
+const LinkErrorPanel = ({
+  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, { variant: "body2" }, "Errors: ", errorMessage)
+);
+function replaceNullsWithUndefined(someObj) {
+  const replacer = (_, value) => String(value) === "null" || String(value) === "undefined" ? void 0 : value;
+  return JSON.parse(JSON.stringify(someObj, replacer));
+}
+function tryFormatClusterLink(options) {
+  try {
+    return {
+      clusterLink: formatClusterLink(options),
+      errorMessage: ""
+    };
+  } catch (err) {
+    return {
+      clusterLink: "",
+      errorMessage: err.message || err.toString()
+    };
+  }
+}
+const KubernetesStructuredMetadataTableDrawerContent = ({
+  toggleDrawer,
+  object,
+  renderObject,
+  kind
+}) => {
+  var _a, _b;
+  const [isYaml, setIsYaml] = useState(false);
+  const classes = useDrawerContentStyles$2();
+  const cluster = useContext(ClusterContext);
+  const { clusterLink, errorMessage } = tryFormatClusterLink({
+    dashboardUrl: cluster.dashboardUrl,
+    dashboardApp: cluster.dashboardApp,
+    dashboardParameters: cluster.dashboardParameters,
+    object,
+    kind
+  });
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: classes.header }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "flex-start", alignItems: "flex-start" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_b = (_a = object.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown name")), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(
+    IconButton,
+    {
+      key: "dismiss",
+      title: "Close the drawer",
+      onClick: (e) => toggleDrawer(e, false),
+      color: "inherit"
+    },
+    /* @__PURE__ */ React__default.createElement(CloseIcon, { className: classes.icon })
+  )), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "body1" }, kind)), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React__default.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React__default.createElement(
+        Switch,
+        {
+          checked: isYaml,
+          onChange: (event) => {
+            setIsYaml(event.target.checked);
+          },
+          name: "YAML"
+        }
+      ),
+      label: "YAML"
+    }
+  )))), errorMessage && /* @__PURE__ */ React__default.createElement("div", { className: classes.errorMessage }, /* @__PURE__ */ React__default.createElement(LinkErrorPanel, { cluster, errorMessage })), /* @__PURE__ */ React__default.createElement("div", { className: classes.options }, /* @__PURE__ */ React__default.createElement("div", null, clusterLink && /* @__PURE__ */ React__default.createElement(
+    LinkButton,
+    {
+      variant: "outlined",
+      color: "primary",
+      size: "small",
+      to: clusterLink,
+      endIcon: /* @__PURE__ */ React__default.createElement(OpenInNewIcon, null)
+    },
+    "Open Kubernetes Dashboard"
+  ))), /* @__PURE__ */ React__default.createElement("div", { className: classes.content }, isYaml && /* @__PURE__ */ React__default.createElement(ManifestYaml, { object }), !isYaml && /* @__PURE__ */ React__default.createElement(
+    StructuredMetadataTable,
+    {
+      metadata: renderObject(replaceNullsWithUndefined(object))
+    }
+  )));
+};
+const KubernetesStructuredMetadataTableDrawer = ({
+  object,
+  renderObject,
+  kind,
+  buttonVariant = "subtitle2",
+  expanded = false,
+  children
+}) => {
+  var _a, _b;
+  const [isOpen, setIsOpen] = useState(expanded);
+  const classes = useDrawerStyles$1();
+  const toggleDrawer = (e, newValue) => {
+    e.stopPropagation();
+    setIsOpen(newValue);
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    PodDrawerButton,
+    {
+      onClick: (e) => toggleDrawer(e, true),
+      onFocus: (event) => event.stopPropagation()
+    },
+    children === void 0 ? /* @__PURE__ */ React__default.createElement(Typography, { variant: buttonVariant }, (_b = (_a = object.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object") : children
+  ), /* @__PURE__ */ React__default.createElement(
+    Drawer,
+    {
+      classes: {
+        paper: classes.paper
+      },
+      anchor: "right",
+      open: isOpen,
+      onClose: (e) => toggleDrawer(e, false),
+      onClick: (event) => event.stopPropagation()
+    },
+    /* @__PURE__ */ React__default.createElement(
+      KubernetesStructuredMetadataTableDrawerContent,
+      {
+        kind,
+        toggleDrawer,
+        object,
+        renderObject
+      }
+    )
+  ));
+};
+
+const useDrawerContentStyles$1 = makeStyles(
+  (_theme) => createStyles({
+    header: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    content: {
+      height: "80%"
+    },
+    icon: {
+      fontSize: 20
+    }
+  })
+);
+const KubernetesDrawerContent = ({
+  children,
+  header,
+  kubernetesObject,
+  close
+}) => {
+  var _a;
+  const classes = useDrawerContentStyles$1();
+  const [isYaml, setIsYaml] = useState(false);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement("div", { className: classes.header }, /* @__PURE__ */ React__default.createElement(Grid, { container: true, justifyContent: "flex-start", alignItems: "flex-start" }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 11 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, (_a = kubernetesObject.metadata) == null ? void 0 : _a.name)), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 1 }, /* @__PURE__ */ React__default.createElement(
+    IconButton,
+    {
+      key: "dismiss",
+      title: "Close the drawer",
+      onClick: () => close(),
+      color: "inherit"
+    },
+    /* @__PURE__ */ React__default.createElement(CloseIcon, { className: classes.icon })
+  )), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, header), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(
+    FormControlLabel,
+    {
+      control: /* @__PURE__ */ React__default.createElement(
+        Switch,
+        {
+          checked: isYaml,
+          onChange: (event) => {
+            setIsYaml(event.target.checked);
+          },
+          name: "YAML"
+        }
+      ),
+      label: "YAML"
+    }
+  )))), /* @__PURE__ */ React__default.createElement("div", { className: classes.content }, isYaml && /* @__PURE__ */ React__default.createElement(ManifestYaml, { object: kubernetesObject }), !isYaml && children));
+};
+const useDrawerStyles = makeStyles(
+  (theme) => createStyles({
+    paper: {
+      width: "50%",
+      justifyContent: "space-between",
+      padding: theme.spacing(2.5)
+    }
+  })
+);
+const DrawerButton = withStyles$1({
+  root: {
+    padding: "6px 5px"
+  },
+  label: {
+    textTransform: "none"
+  }
+})(Button);
+const KubernetesDrawer = ({
+  open,
+  label,
+  drawerContentsHeader,
+  kubernetesObject,
+  children
+}) => {
+  const classes = useDrawerStyles();
+  const [isOpen, setIsOpen] = useState(open != null ? open : false);
+  const toggleDrawer = (e, newValue) => {
+    e.stopPropagation();
+    setIsOpen(newValue);
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DrawerButton, { onClick: () => setIsOpen(true) }, label), /* @__PURE__ */ React__default.createElement(
+    Drawer,
+    {
+      classes: {
+        paper: classes.paper
+      },
+      anchor: "right",
+      open: isOpen,
+      onClose: (e) => toggleDrawer(e, false),
+      onClick: (event) => event.stopPropagation()
+    },
+    isOpen && /* @__PURE__ */ React__default.createElement(
+      KubernetesDrawerContent,
+      {
+        header: drawerContentsHeader,
+        kubernetesObject,
+        children,
+        close: () => setIsOpen(false)
+      }
+    )
+  ));
+};
+
+const PodCondition = ({ condition }) => {
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, condition.status === "False" && /* @__PURE__ */ React__default.createElement(StatusError, null, condition.type, " - (", condition.reason, " ", condition.lastTransitionTime && DateTime.fromISO(condition.lastTransitionTime).toRelative({
+    locale: "en"
+  }), ") - ", condition.message, " "), condition.status === "True" && /* @__PURE__ */ React__default.createElement(StatusOK, null, condition.type, " - (", condition.lastTransitionTime && DateTime.fromISO(condition.lastTransitionTime).toRelative({
+    locale: "en"
+  }), ")"), condition.status === "Unknown" && /* @__PURE__ */ React__default.createElement(StatusWarning, null, condition.type, " - (", condition.lastTransitionTime && DateTime.fromISO(condition.lastTransitionTime).toRelative({
+    locale: "en"
+  }), ") ", condition.message));
+};
+const PendingPodContent = ({ pod }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const startupConditions = [
+    (_b = (_a = pod.status) == null ? void 0 : _a.conditions) == null ? void 0 : _b.find((c) => c.type === "PodScheduled"),
+    (_d = (_c = pod.status) == null ? void 0 : _c.conditions) == null ? void 0 : _d.find((c) => c.type === "Initialized"),
+    (_f = (_e = pod.status) == null ? void 0 : _e.conditions) == null ? void 0 : _f.find((c) => c.type === "ContainersReady"),
+    (_h = (_g = pod.status) == null ? void 0 : _g.conditions) == null ? void 0 : _h.find((c) => c.type === "Ready")
+  ].filter((c) => !!c);
+  return /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, "Pod is Pending. Conditions:"), /* @__PURE__ */ React__default.createElement(List, null, startupConditions.map((c) => /* @__PURE__ */ React__default.createElement(ListItem, { key: c.type }, /* @__PURE__ */ React__default.createElement(PodCondition, { condition: c }))))));
+};
+
+const useEvents = ({
+  involvedObjectName,
+  namespace,
+  clusterName
+}) => {
+  const kubernetesProxyApi = useApi(kubernetesProxyApiRef);
+  return useAsync(async () => {
+    return await kubernetesProxyApi.getEventsByInvolvedObjectName({
+      involvedObjectName,
+      namespace,
+      clusterName
+    });
+  }, [involvedObjectName, namespace, clusterName]);
+};
+
+const getAvatarByType = (type) => {
+  return /* @__PURE__ */ React__default.createElement(ListItemAvatar, null, /* @__PURE__ */ React__default.createElement(Avatar, null, type === "Warning" ? /* @__PURE__ */ React__default.createElement(WarningIcon, null) : /* @__PURE__ */ React__default.createElement(InfoIcon, null)));
+};
+const EventsContent = ({
+  events,
+  warningEventsOnly
+}) => {
+  if (events.length === 0) {
+    return /* @__PURE__ */ React__default.createElement(Typography, null, "No events found");
+  }
+  return /* @__PURE__ */ React__default.createElement(Container, null, /* @__PURE__ */ React__default.createElement(Grid, null, /* @__PURE__ */ React__default.createElement(List, null, events.filter((event) => {
+    if (warningEventsOnly) {
+      return event.type === "Warning";
+    }
+    return true;
+  }).map((event) => {
+    var _a;
+    const timeAgo = event.metadata.creationTimestamp ? DateTime.fromISO(event.metadata.creationTimestamp).toRelative(
+      {
+        locale: "en"
+      }
+    ) : "unknown";
+    return /* @__PURE__ */ React__default.createElement(ListItem, { key: event.metadata.name }, /* @__PURE__ */ React__default.createElement(Tooltip, { title: `${(_a = event.type) != null ? _a : ""} event` }, getAvatarByType(event.type)), /* @__PURE__ */ React__default.createElement(
+      ListItemText,
+      {
+        primary: `First event ${timeAgo} (count: ${event.count})`,
+        secondary: `${event.reason}: ${event.message}`
+      }
+    ));
+  }))));
+};
+const Events = ({
+  involvedObjectName,
+  namespace,
+  clusterName,
+  warningEventsOnly
+}) => {
+  const { value, error, loading } = useEvents({
+    involvedObjectName,
+    namespace,
+    clusterName
+  });
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, error && /* @__PURE__ */ React__default.createElement(
+    DismissableBanner,
+    {
+      ...{
+        message: error.message,
+        variant: "error",
+        fixed: false
+      },
+      id: "events"
+    }
+  ), loading && /* @__PURE__ */ React__default.createElement(Skeleton, { variant: "rect", width: "100%", height: "100%" }), !loading && value !== void 0 && /* @__PURE__ */ React__default.createElement(EventsContent, { warningEventsOnly, events: value }));
+};
+
+const useStyles$1 = makeStyles$1(
+  (theme) => createStyles$1({
+    closeButton: {
+      position: "absolute",
+      right: theme.spacing(1),
+      top: theme.spacing(1),
+      color: theme.palette.grey[500]
+    }
+  })
+);
+const FixDialog = ({
+  open,
+  pod,
+  error,
+  clusterName
+}) => {
+  var _a;
+  const [isOpen, setOpen] = useState(!!open);
+  const classes = useStyles$1();
+  const openDialog = () => {
+    setOpen(true);
+  };
+  const closeDialog = () => {
+    setOpen(false);
+  };
+  const pf = error.proposedFix;
+  const dialogContent = () => {
+    var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+    return /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography$1, { variant: "h6" }, "Detected error:"), /* @__PURE__ */ React__default.createElement(Typography$1, null, error.message)), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography$1, { variant: "h6" }, "Cause explanation:"), /* @__PURE__ */ React__default.createElement(Typography$1, null, (_b = (_a2 = error.proposedFix) == null ? void 0 : _a2.rootCauseExplanation) != null ? _b : "unknown")), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography$1, { variant: "h6" }, "Fix:"), /* @__PURE__ */ React__default.createElement(Typography$1, null, /* @__PURE__ */ React__default.createElement("ul", null, ((_d = (_c = error.proposedFix) == null ? void 0 : _c.actions) != null ? _d : []).map((fix, i) => {
+      var _a3, _b2;
+      return /* @__PURE__ */ React__default.createElement("li", { key: `${(_b2 = (_a3 = pod.metadata) == null ? void 0 : _a3.name) != null ? _b2 : "unknown"}-pf-${i}` }, fix);
+    })))), pf && pf.type === "logs" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography$1, { variant: "h6" }, "Crash logs:")), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 9 }, /* @__PURE__ */ React__default.createElement(
+      PodLogs,
+      {
+        previous: true,
+        containerScope: {
+          podName: (_f = (_e = pod.metadata) == null ? void 0 : _e.name) != null ? _f : "unknown",
+          podNamespace: (_h = (_g = pod.metadata) == null ? void 0 : _g.namespace) != null ? _h : "unknown",
+          clusterName,
+          containerName: pf.container
+        }
+      }
+    ))), pf && pf.type === "events" && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography$1, { variant: "h6" }, "Events:")), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 9 }, /* @__PURE__ */ React__default.createElement(
+      Events,
+      {
+        warningEventsOnly: true,
+        involvedObjectName: (_j = (_i = pod.metadata) == null ? void 0 : _i.name) != null ? _j : "",
+        namespace: (_l = (_k = pod.metadata) == null ? void 0 : _k.namespace) != null ? _l : "",
+        clusterName
+      }
+    ))));
+  };
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
+    Button,
+    {
+      variant: "outlined",
+      "aria-label": "fix issue",
+      component: "label",
+      onClick: openDialog,
+      startIcon: /* @__PURE__ */ React__default.createElement(HelpIcon, null)
+    },
+    "Help"
+  ), /* @__PURE__ */ React__default.createElement(Dialog$1, { maxWidth: "xl", fullWidth: true, open: isOpen, onClose: closeDialog }, /* @__PURE__ */ React__default.createElement(DialogTitle$1, { id: "dialog-title" }, (_a = pod.metadata) == null ? void 0 : _a.name, " - ", error.type, /* @__PURE__ */ React__default.createElement(
+    IconButton$1,
+    {
+      "aria-label": "close",
+      className: classes.closeButton,
+      onClick: closeDialog
+    },
+    /* @__PURE__ */ React__default.createElement(CloseIcon, null)
+  )), /* @__PURE__ */ React__default.createElement(DialogContent$1, null, dialogContent()), /* @__PURE__ */ React__default.createElement(DialogActions, null, pf && pf.type === "docs" && /* @__PURE__ */ React__default.createElement(
+    LinkButton,
+    {
+      to: pf.docsLink,
+      variant: "outlined",
+      startIcon: /* @__PURE__ */ React__default.createElement(OpenInNewIcon, null),
+      target: "_blank",
+      rel: "noopener"
+    },
+    "Open docs"
+  ))));
+};
+
+const useStyles = makeStyles(
+  (_theme) => createStyles({
+    root: {
+      overflow: "auto"
+    },
+    list: {
+      width: "100%"
+    }
+  })
+);
+const ErrorList = ({ podAndErrors }) => {
+  const classes = useStyles();
+  return /* @__PURE__ */ React__default.createElement(Paper, { className: classes.root }, /* @__PURE__ */ React__default.createElement(List, { className: classes.list }, podAndErrors.filter((pae) => pae.errors.length > 0).flatMap((onlyPodWithErrors) => {
+    return onlyPodWithErrors.errors.map((error, i) => {
+      var _a, _b, _c;
+      return /* @__PURE__ */ React__default.createElement(
+        React__default.Fragment,
+        {
+          key: `${(_b = (_a = onlyPodWithErrors.pod.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown"}-eli-${i}`
+        },
+        i > 0 && /* @__PURE__ */ React__default.createElement(Divider, { key: `error-divider${i}` }),
+        /* @__PURE__ */ React__default.createElement(ListItem, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 9 }, /* @__PURE__ */ React__default.createElement(
+          ListItemText,
+          {
+            primary: error.message,
+            secondary: (_c = onlyPodWithErrors.pod.metadata) == null ? void 0 : _c.name
+          }
+        )), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(
+          FixDialog,
+          {
+            pod: onlyPodWithErrors.pod,
+            error,
+            clusterName: onlyPodWithErrors.clusterName
+          }
+        ))))
+      );
+    });
+  })));
+};
+
+const useDrawerContentStyles = makeStyles(
+  (_theme) => createStyles({
+    header: {
+      display: "flex",
+      flexDirection: "row",
+      justifyContent: "space-between"
+    },
+    content: {
+      height: "80%"
+    },
+    icon: {
+      fontSize: 20
+    },
+    podoklist: {
+      width: "100%",
+      maxWidth: 360,
+      maxHeight: 360
+    }
+  })
+);
+function getContainerSpecByName(pod, containerName) {
+  var _a;
+  return (_a = pod.spec) == null ? void 0 : _a.containers.find((c) => c.name === containerName);
+}
+const PodDrawer = ({ podAndErrors, open }) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+  const classes = useDrawerContentStyles();
+  const podMetrics = usePodMetrics(podAndErrors.clusterName, podAndErrors.pod);
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesDrawer,
+    {
+      open,
+      drawerContentsHeader: /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle1" }, "Pod", " ", ((_a = podAndErrors.pod.status) == null ? void 0 : _a.podIP) && `(${(_b = podAndErrors.pod.status) == null ? void 0 : _b.podIP})`),
+      kubernetesObject: podAndErrors.pod,
+      label: /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle1" }, (_d = (_c = podAndErrors.pod.metadata) == null ? void 0 : _c.name) != null ? _d : "unknown")
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: classes.content }, podMetrics && /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, "Resource utilization")), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React__default.createElement(
+      ResourceUtilization,
+      {
+        title: "CPU requests",
+        usage: podMetrics.cpu.currentUsage,
+        total: podMetrics.cpu.requestTotal,
+        totalFormatted: formatMillicores(podMetrics.cpu.requestTotal)
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      ResourceUtilization,
+      {
+        title: "CPU limits",
+        usage: podMetrics.cpu.currentUsage,
+        total: podMetrics.cpu.limitTotal,
+        totalFormatted: formatMillicores(podMetrics.cpu.limitTotal)
+      }
+    )), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 6 }, /* @__PURE__ */ React__default.createElement(
+      ResourceUtilization,
+      {
+        title: "Memory requests",
+        usage: podMetrics.memory.currentUsage,
+        total: podMetrics.memory.requestTotal,
+        totalFormatted: bytesToMiB(podMetrics.memory.requestTotal)
+      }
+    ), /* @__PURE__ */ React__default.createElement(
+      ResourceUtilization,
+      {
+        title: "Memory limits",
+        usage: podMetrics.memory.currentUsage,
+        total: podMetrics.memory.limitTotal,
+        totalFormatted: bytesToMiB(podMetrics.memory.requestTotal)
+      }
+    ))), ((_e = podAndErrors.pod.status) == null ? void 0 : _e.phase) === "Pending" && /* @__PURE__ */ React__default.createElement(PendingPodContent, { pod: podAndErrors.pod }), ((_g = (_f = podAndErrors.pod.status) == null ? void 0 : _f.containerStatuses) == null ? void 0 : _g.length) && /* @__PURE__ */ React__default.createElement(Grid, { container: true, spacing: 2 }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, "Containers")), /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(ItemCardGrid, null, (_i = (_h = podAndErrors.pod.status) == null ? void 0 : _h.containerStatuses) == null ? void 0 : _i.map(
+      (containerStatus, i) => {
+        var _a2, _b2, _c2, _d2, _e2, _f2;
+        const containerSpec = getContainerSpecByName(
+          podAndErrors.pod,
+          containerStatus.name
+        );
+        const containerMetrics = ((_a2 = podMetrics == null ? void 0 : podMetrics.containers) != null ? _a2 : []).find((c) => c.container === containerStatus.name);
+        return /* @__PURE__ */ React__default.createElement(
+          ContainerCard,
+          {
+            key: `container-card-${(_b2 = podAndErrors.pod.metadata) == null ? void 0 : _b2.name}-${i}`,
+            containerMetrics,
+            podScope: {
+              podName: (_d2 = (_c2 = podAndErrors.pod.metadata) == null ? void 0 : _c2.name) != null ? _d2 : "unknown",
+              podNamespace: (_f2 = (_e2 = podAndErrors.pod.metadata) == null ? void 0 : _e2.namespace) != null ? _f2 : "unknown",
+              clusterName: podAndErrors.clusterName
+            },
+            containerSpec,
+            containerStatus
+          }
+        );
+      }
+    ))), podAndErrors.errors.length > 0 && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "h5" }, "Errors")), podAndErrors.errors.length > 0 && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 12 }, /* @__PURE__ */ React__default.createElement(ErrorList, { podAndErrors: [podAndErrors] }))))
+  );
+};
+
+const containersReady = (pod) => {
+  var _a, _b;
+  const containerStatuses2 = (_b = (_a = pod.status) == null ? void 0 : _a.containerStatuses) != null ? _b : [];
+  const containersReadyItem = containerStatuses2.filter((cs) => cs.ready).length;
+  return `${containersReadyItem}/${containerStatuses2.length}`;
+};
+const totalRestarts = (pod) => {
+  var _a, _b;
+  const containerStatuses2 = (_b = (_a = pod.status) == null ? void 0 : _a.containerStatuses) != null ? _b : [];
+  return containerStatuses2 == null ? void 0 : containerStatuses2.reduce((a, b) => a + b.restartCount, 0);
+};
+const containerStatuses = (pod) => {
+  var _a, _b;
+  const containerStatusesItem = (_b = (_a = pod.status) == null ? void 0 : _a.containerStatuses) != null ? _b : [];
+  const errors = containerStatusesItem.reduce((accum, next) => {
+    if (next.state === void 0) {
+      return accum;
+    }
+    const waiting = next.state.waiting;
+    const terminated = next.state.terminated;
+    const renderCell = (reason) => {
+      var _a2;
+      return /* @__PURE__ */ React__default.createElement(Fragment, { key: `${(_a2 = pod.metadata) == null ? void 0 : _a2.name}-${next.name}` }, /* @__PURE__ */ React__default.createElement(
+        SubvalueCell,
+        {
+          value: reason === "Completed" ? /* @__PURE__ */ React__default.createElement(StatusOK, null, "Container: ", next.name) : /* @__PURE__ */ React__default.createElement(StatusError, null, "Container: ", next.name),
+          subvalue: reason
+        }
+      ), /* @__PURE__ */ React__default.createElement("br", null));
+    };
+    if (waiting) {
+      accum.push(renderCell(waiting.reason));
+    }
+    if (terminated) {
+      accum.push(renderCell(terminated.reason));
+    }
+    return accum;
+  }, []);
+  if (errors.length === 0) {
+    return /* @__PURE__ */ React__default.createElement(StatusOK, null, "OK");
+  }
+  return errors;
+};
+const renderCondition = (condition) => {
+  var _a;
+  const status = condition.status;
+  if (status === "True") {
+    return [condition.type, /* @__PURE__ */ React__default.createElement(StatusOK, null, "True")];
+  } else if (status === "False") {
+    return [
+      condition.type,
+      /* @__PURE__ */ React__default.createElement(
+        SubvalueCell,
+        {
+          value: /* @__PURE__ */ React__default.createElement(StatusError, null, "False"),
+          subvalue: (_a = condition.message) != null ? _a : ""
+        }
+      )
+    ];
+  }
+  return [condition.type, /* @__PURE__ */ React__default.createElement(StatusAborted, null)];
+};
+const currentToDeclaredResourceToPerc = (current, resource) => {
+  if (Number(resource) === 0)
+    return `0%`;
+  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
+      )} of ${formatMillicores(cpuUtil.requestTotal)}`,
+      subvalue: `limits: ${currentToDeclaredResourceToPerc(
+        currentUsage,
+        cpuUtil.limitTotal
+      )} of ${formatMillicores(cpuUtil.limitTotal)}`
+    }
+  );
+};
+const podStatusToMemoryUtil = (podStatus) => {
+  const memUtil = podStatus.memory;
+  return /* @__PURE__ */ React__default.createElement(
+    SubvalueCell,
+    {
+      value: `requests: ${currentToDeclaredResourceToPerc(
+        memUtil.currentUsage,
+        memUtil.requestTotal
+      )} of ${bytesToMiB(memUtil.requestTotal)}`,
+      subvalue: `limits: ${currentToDeclaredResourceToPerc(
+        memUtil.currentUsage,
+        memUtil.limitTotal
+      )} of ${bytesToMiB(memUtil.limitTotal)}`
+    }
+  );
+};
+
+const READY_COLUMNS = "READY";
+const RESOURCE_COLUMNS = "RESOURCE";
+const READY = [
+  {
+    title: "containers ready",
+    align: "center",
+    render: containersReady,
+    width: "auto"
+  },
+  {
+    title: "total restarts",
+    align: "center",
+    render: totalRestarts,
+    type: "numeric",
+    width: "auto"
+  }
+];
+const PodDrawerTrigger = ({ pod }) => {
+  const cluster = useContext(ClusterContext);
+  const errors = useMatchingErrors({
+    kind: "Pod",
+    apiVersion: "v1",
+    metadata: pod.metadata
+  });
+  return /* @__PURE__ */ React__default.createElement(
+    PodDrawer,
+    {
+      podAndErrors: {
+        pod,
+        clusterName: cluster.name,
+        errors
+      }
+    }
+  );
+};
+const Cpu = ({ clusterName, pod }) => {
+  const metrics = usePodMetrics(clusterName, pod);
+  if (!metrics) {
+    return /* @__PURE__ */ React__default.createElement(Typography, null, "unknown");
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, podStatusToCpuUtil(metrics));
+};
+const Memory = ({ clusterName, pod }) => {
+  const metrics = usePodMetrics(clusterName, pod);
+  if (!metrics) {
+    return /* @__PURE__ */ React__default.createElement(Typography, null, "unknown");
+  }
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, podStatusToMemoryUtil(metrics));
+};
+const PodsTable = ({ pods, extraColumns = [] }) => {
+  const cluster = useContext(ClusterContext);
+  const defaultColumns = [
+    {
+      title: "name",
+      highlight: true,
+      render: (pod) => {
+        return /* @__PURE__ */ React__default.createElement(PodDrawerTrigger, { pod });
+      }
+    },
+    {
+      title: "phase",
+      render: (pod) => {
+        var _a, _b;
+        return (_b = (_a = pod.status) == null ? void 0 : _a.phase) != null ? _b : "unknown";
+      },
+      width: "auto"
+    },
+    {
+      title: "status",
+      render: containerStatuses
+    }
+  ];
+  const columns = [...defaultColumns];
+  if (extraColumns.includes(READY_COLUMNS)) {
+    columns.push(...READY);
+  }
+  if (extraColumns.includes(RESOURCE_COLUMNS)) {
+    const resourceColumns = [
+      {
+        title: "CPU usage %",
+        render: (pod) => {
+          return /* @__PURE__ */ React__default.createElement(Cpu, { clusterName: cluster.name, pod });
+        },
+        width: "auto"
+      },
+      {
+        title: "Memory usage %",
+        render: (pod) => {
+          return /* @__PURE__ */ React__default.createElement(Memory, { clusterName: cluster.name, pod });
+        },
+        width: "auto"
+      }
+    ];
+    columns.push(...resourceColumns);
+  }
+  const tableStyle = {
+    minWidth: "0",
+    width: "100%"
+  };
+  return /* @__PURE__ */ React__default.createElement("div", { style: tableStyle }, /* @__PURE__ */ React__default.createElement(
+    Table,
+    {
+      options: { paging: true, search: false, emptyRowsWhenPaging: false },
+      data: pods,
+      columns
+    }
+  ));
+};
+
+const DeploymentDrawer = ({
+  deployment,
+  expanded
+}) => {
+  var _a, _b, _c;
+  const namespace = (_a = deployment.metadata) == null ? void 0 : _a.namespace;
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      object: deployment,
+      expanded,
+      kind: "Deployment",
+      renderObject: (deploymentObj) => {
+        var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+        const conditions = ((_b2 = (_a2 = deploymentObj.status) == null ? void 0 : _a2.conditions) != null ? _b2 : []).map(renderCondition).reduce((accum, next) => {
+          accum[next[0]] = next[1];
+          return accum;
+        }, {});
+        return {
+          strategy: (_d = (_c2 = deploymentObj.spec) == null ? void 0 : _c2.strategy) != null ? _d : "???",
+          minReadySeconds: (_f = (_e = deploymentObj.spec) == null ? void 0 : _e.minReadySeconds) != null ? _f : "???",
+          progressDeadlineSeconds: (_h = (_g = deploymentObj.spec) == null ? void 0 : _g.progressDeadlineSeconds) != null ? _h : "???",
+          ...conditions
+        };
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_c = (_b = deployment.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Deployment")),
+      namespace && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Chip, { size: "small", label: `namespace: ${namespace}` }))
+    )
+  );
+};
+
+const HorizontalPodAutoscalerDrawer = (props) => {
+  const { hpa, expanded, children } = props;
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      kind: "HorizontalPodAutoscaler",
+      object: hpa,
+      expanded,
+      renderObject: (hpaObject) => {
+        var _a, _b, _c, _d, _e, _f;
+        return {
+          targetCPUUtilizationPercentage: (_a = hpaObject.spec) == null ? void 0 : _a.targetCPUUtilizationPercentage,
+          currentCPUUtilizationPercentage: (_b = hpaObject.status) == null ? void 0 : _b.currentCPUUtilizationPercentage,
+          minReplicas: (_c = hpaObject.spec) == null ? void 0 : _c.minReplicas,
+          maxReplicas: (_d = hpaObject.spec) == null ? void 0 : _d.maxReplicas,
+          currentReplicas: (_e = hpaObject.status) == null ? void 0 : _e.currentReplicas,
+          desiredReplicas: (_f = hpaObject.status) == null ? void 0 : _f.desiredReplicas
+        };
+      }
+    },
+    children
+  );
+};
+
+function getOwnedResources(potentialOwner, possiblyOwned) {
+  return possiblyOwned.filter(
+    (p) => {
+      var _a, _b, _c;
+      return (_c = (_b = (_a = p.metadata) == null ? void 0 : _a.ownerReferences) == null ? void 0 : _b.some(
+        (o) => {
+          var _a2;
+          return o.uid === ((_a2 = potentialOwner.metadata) == null ? void 0 : _a2.uid);
+        }
+      )) != null ? _c : false;
+    }
+  );
+}
+const getOwnedPodsThroughReplicaSets = (potentialOwner, replicaSets, pods) => {
+  return getOwnedResources(
+    potentialOwner,
+    replicaSets.filter((rs) => rs.status && rs.status.replicas > 0)
+  ).reduce((accum, rs) => {
+    return accum.concat(getOwnedResources(rs, pods));
+  }, []);
+};
+const getMatchingHpa = (owner, hpas) => {
+  return hpas.find((hpa) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+    return ((_c = (_b = (_a = hpa.spec) == null ? void 0 : _a.scaleTargetRef) == null ? void 0 : _b.kind) != null ? _c : "").toLocaleLowerCase("en-US") === owner.kind.toLocaleLowerCase("en-US") && ((_e = (_d = hpa.metadata) == null ? void 0 : _d.namespace) != null ? _e : "") === ((_f = owner.namespace) != null ? _f : "unknown-namespace") && ((_i = (_h = (_g = hpa.spec) == null ? void 0 : _g.scaleTargetRef) == null ? void 0 : _h.name) != null ? _i : "") === ((_j = owner.name) != null ? _j : "unknown-deployment");
+  });
+};
+
+const DeploymentSummary = ({
+  deployment,
+  numberOfCurrentPods,
+  numberOfPodsWithErrors,
+  hpa
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 4, item: true }, /* @__PURE__ */ React__default.createElement(DeploymentDrawer, { deployment })),
+    hpa && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 4 }, /* @__PURE__ */ React__default.createElement(HorizontalPodAutoscalerDrawer, { hpa }, /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "min replicas ", (_b = (_a = hpa.spec) == null ? void 0 : _a.minReplicas) != null ? _b : "?", " / max replicas", " ", (_d = (_c = hpa.spec) == null ? void 0 : _c.maxReplicas) != null ? _d : "?")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "current CPU usage:", " ", (_f = (_e = hpa.status) == null ? void 0 : _e.currentCPUUtilizationPercentage) != null ? _f : "?", "%")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "target CPU usage:", " ", (_h = (_g = hpa.spec) == null ? void 0 : _g.targetCPUUtilizationPercentage) != null ? _h : "?", "%"))
+    ))),
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        xs: 4,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatusOK, null, numberOfCurrentPods, " pods")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pod", numberOfPodsWithErrors > 1 ? "s" : "", " with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))
+    )
+  );
+};
+const DeploymentAccordion = ({
+  deployment,
+  ownedPods,
+  matchingHpa
+}) => {
+  const podNamesWithErrors = useContext(PodNamesWithErrorsContext);
+  const podsWithErrors = ownedPods.filter(
+    (p) => {
+      var _a, _b;
+      return podNamesWithErrors.has((_b = (_a = p.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+    }
+  );
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
+    DeploymentSummary,
+    {
+      deployment,
+      numberOfCurrentPods: ownedPods.length,
+      numberOfPodsWithErrors: podsWithErrors.length,
+      hpa: matchingHpa
+    }
+  )), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(
+    PodsTable,
+    {
+      pods: ownedPods,
+      extraColumns: [READY_COLUMNS, RESOURCE_COLUMNS]
+    }
+  )));
+};
+const DeploymentsAccordions = ({}) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "column",
+      justifyContent: "flex-start",
+      alignItems: "flex-start"
+    },
+    groupedResponses.deployments.map((deployment, i) => {
+      var _a, _b;
+      return /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, key: i, xs: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(
+        DeploymentAccordion,
+        {
+          matchingHpa: getMatchingHpa(
+            {
+              name: (_a = deployment.metadata) == null ? void 0 : _a.name,
+              namespace: (_b = deployment.metadata) == null ? void 0 : _b.namespace,
+              kind: "deployment"
+            },
+            groupedResponses.horizontalPodAutoscalers
+          ),
+          ownedPods: getOwnedPodsThroughReplicaSets(
+            deployment,
+            groupedResponses.replicaSets,
+            groupedResponses.pods
+          ),
+          deployment
+        }
+      )));
+    })
+  );
+};
+
+const StatefulSetDrawer = ({
+  statefulset,
+  expanded
+}) => {
+  var _a, _b, _c;
+  const namespace = (_a = statefulset.metadata) == null ? void 0 : _a.namespace;
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      object: statefulset,
+      expanded,
+      kind: "StatefulSet",
+      renderObject: (statefulsetObj) => {
+        var _a2, _b2, _c2, _d, _e, _f, _g, _h, _i, _j, _k, _l;
+        const conditions = ((_b2 = (_a2 = statefulsetObj.status) == null ? void 0 : _a2.conditions) != null ? _b2 : []).map(renderCondition).reduce((accum, next) => {
+          accum[next[0]] = next[1];
+          return accum;
+        }, {});
+        return {
+          updateStrategy: (_d = (_c2 = statefulset.spec) == null ? void 0 : _c2.updateStrategy) != null ? _d : "???",
+          podManagementPolicy: (_f = (_e = statefulset.spec) == null ? void 0 : _e.podManagementPolicy) != null ? _f : "???",
+          serviceName: (_h = (_g = statefulset.spec) == null ? void 0 : _g.serviceName) != null ? _h : "???",
+          selector: (_j = (_i = statefulset.spec) == null ? void 0 : _i.selector) != null ? _j : "???",
+          revisionHistoryLimit: (_l = (_k = statefulset.spec) == null ? void 0 : _k.revisionHistoryLimit) != null ? _l : "???",
+          ...conditions
+        };
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_c = (_b = statefulset.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Stateful Set")),
+      namespace && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Chip, { size: "small", label: `namespace: ${namespace}` }))
+    )
+  );
+};
+
+const StatefulSetSummary = ({
+  statefulset,
+  numberOfCurrentPods,
+  numberOfPodsWithErrors,
+  hpa
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 6, item: true }, /* @__PURE__ */ React__default.createElement(StatefulSetDrawer, { statefulset })),
+    hpa && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(HorizontalPodAutoscalerDrawer, { hpa }, /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "min replicas ", (_b = (_a = hpa.spec) == null ? void 0 : _a.minReplicas) != null ? _b : "?", " / max replicas", " ", (_d = (_c = hpa.spec) == null ? void 0 : _c.maxReplicas) != null ? _d : "?")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "current CPU usage:", " ", (_f = (_e = hpa.status) == null ? void 0 : _e.currentCPUUtilizationPercentage) != null ? _f : "?", "%")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "target CPU usage:", " ", (_h = (_g = hpa.spec) == null ? void 0 : _g.targetCPUUtilizationPercentage) != null ? _h : "?", "%"))
+    ))),
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        xs: 3,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatusOK, null, numberOfCurrentPods, " pods")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pod", numberOfPodsWithErrors > 1 ? "s" : "", " with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))
+    )
+  );
+};
+const StatefulSetAccordion = ({
+  statefulset,
+  ownedPods,
+  matchingHpa
+}) => {
+  const podNamesWithErrors = useContext(PodNamesWithErrorsContext);
+  const podsWithErrors = ownedPods.filter(
+    (p) => {
+      var _a, _b;
+      return podNamesWithErrors.has((_b = (_a = p.metadata) == null ? void 0 : _a.name) != null ? _b : "");
+    }
+  );
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
+    StatefulSetSummary,
+    {
+      statefulset,
+      numberOfCurrentPods: ownedPods.length,
+      numberOfPodsWithErrors: podsWithErrors.length,
+      hpa: matchingHpa
+    }
+  )), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(
+    PodsTable,
+    {
+      pods: ownedPods,
+      extraColumns: [READY_COLUMNS, RESOURCE_COLUMNS]
+    }
+  )));
+};
+const StatefulSetsAccordions = ({}) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "column",
+      justifyContent: "flex-start",
+      alignItems: "flex-start"
+    },
+    groupedResponses.statefulsets.map((statefulset, i) => {
+      var _a, _b;
+      return /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, key: i, xs: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(
+        StatefulSetAccordion,
+        {
+          matchingHpa: getMatchingHpa(
+            {
+              name: (_a = statefulset.metadata) == null ? void 0 : _a.name,
+              namespace: (_b = statefulset.metadata) == null ? void 0 : _b.namespace,
+              kind: "statefulset"
+            },
+            groupedResponses.horizontalPodAutoscalers
+          ),
+          ownedPods: getOwnedResources(statefulset, groupedResponses.pods),
+          statefulset
+        }
+      )));
+    })
+  );
+};
+
+const IngressDrawer = ({
+  ingress,
+  expanded
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      object: ingress,
+      expanded,
+      kind: "Ingress",
+      renderObject: (ingressObject) => {
+        return ingressObject.spec || {};
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = ingress.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Ingress"))
+    )
+  );
+};
+
+const IngressSummary = ({ ingress }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "flex-start",
+      alignItems: "center"
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React__default.createElement(IngressDrawer, { ingress }))
+  );
+};
+const IngressCard = ({ ingress }) => {
+  return /* @__PURE__ */ React__default.createElement(
+    StructuredMetadataTable,
+    {
+      metadata: {
+        ...ingress.spec
+      }
+    }
+  );
+};
+const IngressAccordion = ({ ingress }) => {
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true } }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(IngressSummary, { ingress })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(IngressCard, { ingress })));
+};
+const IngressesAccordions = ({}) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "flex-start",
+      alignItems: "flex-start"
+    },
+    groupedResponses.ingresses.map((ingress, i) => /* @__PURE__ */ React__default.createElement(Grid, { item: true, key: i, xs: true }, /* @__PURE__ */ React__default.createElement(IngressAccordion, { ingress })))
+  );
+};
+
+const ServiceDrawer = ({
+  service,
+  expanded
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      object: service,
+      expanded,
+      kind: "Service",
+      renderObject: (serviceObject) => {
+        return serviceObject.spec || {};
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = service.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Service"))
+    )
+  );
+};
+
+const ServiceSummary = ({ service }) => {
+  var _a, _b;
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 8, item: true }, /* @__PURE__ */ React__default.createElement(ServiceDrawer, { service })),
+    /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "Type: ", (_b = (_a = service.spec) == null ? void 0 : _a.type) != null ? _b : "?"))
+  );
+};
+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) {
+    metadata.loadbalancer = (_e = service.status) == null ? void 0 : _e.loadBalancer;
+  }
+  if (((_f = service.spec) == null ? void 0 : _f.type) === "ClusterIP") {
+    metadata.clusterIP = service.spec.clusterIP;
+  }
+  if (((_g = service.spec) == null ? void 0 : _g.type) === "ExternalName") {
+    metadata.externalName = service.spec.externalName;
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    StructuredMetadataTable,
+    {
+      metadata: {
+        type: (_h = service.spec) == null ? void 0 : _h.type,
+        ports: (_i = service.spec) == null ? void 0 : _i.ports,
+        ...metadata
+      }
+    }
+  );
+};
+const ServiceAccordion = ({ service }) => {
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(ServiceSummary, { service })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(ServiceCard, { service })));
+};
+const ServicesAccordions = ({}) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "flex-start",
+      alignItems: "flex-start"
+    },
+    groupedResponses.services.map((service, i) => /* @__PURE__ */ React__default.createElement(Grid, { item: true, key: i, xs: true }, /* @__PURE__ */ React__default.createElement(ServiceAccordion, { service })))
+  );
+};
+
+const JobDrawer = ({
+  job,
+  expanded
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      object: job,
+      expanded,
+      kind: "Job",
+      renderObject: (jobObj) => {
+        var _a2, _b2, _c, _d, _e, _f, _g, _h;
+        return {
+          parallelism: (_b2 = (_a2 = jobObj.spec) == null ? void 0 : _a2.parallelism) != null ? _b2 : "???",
+          completions: (_d = (_c = jobObj.spec) == null ? void 0 : _c.completions) != null ? _d : "???",
+          backoffLimit: (_f = (_e = jobObj.spec) == null ? void 0 : _e.backoffLimit) != null ? _f : "???",
+          startTime: (_h = (_g = jobObj.status) == null ? void 0 : _g.startTime) != null ? _h : "???"
+        };
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = job.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Job"))
+    )
+  );
+};
+
+const JobSummary = ({ job }) => {
+  var _a, _b, _c, _d, _e, _f;
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 6, item: true }, /* @__PURE__ */ React__default.createElement(JobDrawer, { job })),
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        xs: 6,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, ((_a = job.status) == null ? void 0 : _a.succeeded) && /* @__PURE__ */ React__default.createElement(StatusOK, null, "Succeeded"), ((_b = job.status) == null ? void 0 : _b.active) && /* @__PURE__ */ React__default.createElement(StatusPending, null, "Running"), ((_c = job.status) == null ? void 0 : _c.failed) && /* @__PURE__ */ React__default.createElement(StatusError, null, "Failed")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, "Start time: ", (_e = (_d = job.status) == null ? void 0 : _d.startTime) == null ? void 0 : _e.toString()),
+      ((_f = job.status) == null ? void 0 : _f.completionTime) && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, "Completion time: ", job.status.completionTime.toString())
+    )
+  );
+};
+const JobAccordion = ({ job, ownedPods }) => {
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(JobSummary, { job })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(PodsTable, { pods: ownedPods })));
+};
+const JobsAccordions = ({ jobs }) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "column",
+      justifyContent: "flex-start",
+      alignItems: "flex-start"
+    },
+    jobs.map((job, i) => /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, key: i, xs: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(
+      JobAccordion,
+      {
+        ownedPods: getOwnedResources(job, groupedResponses.pods),
+        job
+      }
+    ))))
+  );
+};
+
+const CronJobDrawer = ({
+  cronJob,
+  expanded
+}) => {
+  var _a, _b, _c;
+  const namespace = (_a = cronJob.metadata) == null ? void 0 : _a.namespace;
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      object: cronJob,
+      expanded,
+      kind: "CronJob",
+      renderObject: (cronJobObj) => {
+        var _a2, _b2, _c2, _d, _e, _f, _g, _h;
+        return {
+          schedule: (_b2 = (_a2 = cronJobObj.spec) == null ? void 0 : _a2.schedule) != null ? _b2 : "???",
+          startingDeadlineSeconds: (_d = (_c2 = cronJobObj.spec) == null ? void 0 : _c2.startingDeadlineSeconds) != null ? _d : "???",
+          concurrencyPolicy: (_f = (_e = cronJobObj.spec) == null ? void 0 : _e.concurrencyPolicy) != null ? _f : "???",
+          lastScheduleTime: (_h = (_g = cronJobObj.status) == null ? void 0 : _g.lastScheduleTime) != null ? _h : "???"
+        };
+      }
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_c = (_b = cronJob.metadata) == null ? void 0 : _b.name) != null ? _c : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "CronJob")),
+      namespace && /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Chip, { size: "small", label: `namespace: ${namespace}` }))
+    )
+  );
+};
+
+const k8sCronAliases = /* @__PURE__ */ new Map([
+  ["@yearly", "0 0 1 1 *"],
+  ["@annually", "0 0 1 1 *"],
+  ["@monthly", "0 0 1 * *"],
+  ["@weekly", "0 0 * * 0"],
+  ["@daily", "0 0 * * *"],
+  ["@midnight", "0 0 * * *"],
+  ["@hourly", "0 * * * *"]
+]);
+const humanizeCron = (schedule) => {
+  const deAliasedSchedule = k8sCronAliases.get(schedule) || schedule;
+  try {
+    return cronstrue.toString(deAliasedSchedule);
+  } catch (e) {
+    return deAliasedSchedule;
+  }
+};
+
+const CronJobSummary = ({ cronJob }) => {
+  var _a, _b;
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 6, item: true }, /* @__PURE__ */ React__default.createElement(CronJobDrawer, { cronJob })),
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        xs: 6,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, ((_a = cronJob.spec) == null ? void 0 : _a.suspend) ? /* @__PURE__ */ React__default.createElement(StatusError, null, "Suspended") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "Active")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, "Schedule:", " ", ((_b = cronJob.spec) == null ? void 0 : _b.schedule) ? `${cronJob.spec.schedule} (${humanizeCron(
+        cronJob.spec.schedule
+      )})` : "N/A"))
+    )
+  );
+};
+const CronJobAccordion = ({ cronJob, ownedJobs }) => {
+  return /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true }, variant: "outlined" }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(CronJobSummary, { cronJob })), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(JobsAccordions, { jobs: ownedJobs.reverse() })));
+};
+const CronJobsAccordions = ({}) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "column",
+      justifyContent: "flex-start",
+      alignItems: "flex-start"
+    },
+    groupedResponses.cronJobs.map((cronJob, i) => /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, key: i, xs: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(
+      CronJobAccordion,
+      {
+        ownedJobs: getOwnedResources(cronJob, groupedResponses.jobs),
+        cronJob
+      }
+    ))))
+  );
+};
+
+const RolloutDrawer = ({
+  rollout,
+  expanded
+}) => {
+  var _a, _b;
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      object: rollout,
+      expanded,
+      kind: "Rollout",
+      renderObject: () => ({})
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = rollout.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Rollout"))
+    )
+  );
+};
+
+const isSetWeightStep = (step) => step.hasOwnProperty("setWeight");
+const isPauseStep = (step) => step.hasOwnProperty("pause");
+const isAnalysisStep = (step) => step.hasOwnProperty("analysis");
+const createLabelForStep = (step) => {
+  if (isSetWeightStep(step)) {
+    return `setWeight ${step.setWeight}%`;
+  } else if (isPauseStep(step)) {
+    return step.pause.duration === void 0 ? "infinite pause" : `pause for ${step.pause.duration}`;
+  } else if (isAnalysisStep(step)) {
+    return /* @__PURE__ */ React__default.createElement("div", null, /* @__PURE__ */ React__default.createElement(Typography$1, { paragraph: true }, "analysis templates:"), step.analysis.templates.map((t, i) => /* @__PURE__ */ React__default.createElement(Typography$1, { paragraph: true, key: i }, `${t.templateName}${t.clusterScope ? " (cluster scoped)" : ""}`)));
+  }
+  return "unknown step";
+};
+const StepsProgress = ({
+  currentStepIndex,
+  aborted,
+  steps
+}) => {
+  const activeStepIndex = currentStepIndex >= steps.length ? currentStepIndex + 1 : currentStepIndex;
+  return /* @__PURE__ */ React__default.createElement(Stepper, { activeStep: aborted ? -1 : activeStepIndex, alternativeLabel: true }, steps.map((step, i) => /* @__PURE__ */ React__default.createElement(Step, { key: i }, /* @__PURE__ */ React__default.createElement(StepLabel, { "data-testid": `step-${i}` }, createLabelForStep(step)))).concat(
+    /* @__PURE__ */ React__default.createElement(Step, { key: "-1" }, /* @__PURE__ */ React__default.createElement(StepLabel, { "data-testid": "step--1" }, "Canary promoted"))
+  ));
+};
+
+const AbortedTitle = /* @__PURE__ */ React__default.createElement(
+  "div",
+  {
+    style: {
+      display: "flex",
+      alignItems: "center",
+      flexWrap: "wrap"
+    }
+  },
+  /* @__PURE__ */ React__default.createElement(ErrorOutlineIcon, null),
+  /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle1" }, "Aborted")
+);
+const findAbortedMessage = (rollout) => {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = rollout.status) == null ? void 0 : _a.conditions) == null ? void 0 : _b.find(
+    (c) => c.type === "Progressing" && c.status === "False" && c.reason === "RolloutAborted"
+  )) == null ? void 0 : _c.message;
+};
+const RolloutSummary = ({
+  rollout,
+  numberOfCurrentPods,
+  numberOfPodsWithErrors,
+  hpa
+}) => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  const pauseTime = (_c = (_b = (_a = rollout.status) == null ? void 0 : _a.pauseConditions) == null ? void 0 : _b.find(
+    (p) => p.reason === "CanaryPauseStep"
+  )) == null ? void 0 : _c.startTime;
+  const abortedMessage = findAbortedMessage(rollout);
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 6, item: true }, /* @__PURE__ */ React__default.createElement(RolloutDrawer, { rollout })),
+    hpa && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(HorizontalPodAutoscalerDrawer, { hpa }, /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "min replicas ", (_e = (_d = hpa.spec) == null ? void 0 : _d.minReplicas) != null ? _e : "?", " / max replicas", " ", (_g = (_f = hpa.spec) == null ? void 0 : _f.maxReplicas) != null ? _g : "?")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "current CPU usage:", " ", (_i = (_h = hpa.status) == null ? void 0 : _h.currentCPUUtilizationPercentage) != null ? _i : "?", "%")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, "target CPU usage:", " ", (_k = (_j = hpa.spec) == null ? void 0 : _j.targetCPUUtilizationPercentage) != null ? _k : "?", "%"))
+    ))),
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        xs: 3,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatusOK, null, numberOfCurrentPods, " pods")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, numberOfPodsWithErrors > 0 ? /* @__PURE__ */ React__default.createElement(StatusError, null, numberOfPodsWithErrors, " pod", numberOfPodsWithErrors > 1 ? "s" : "", " with errors") : /* @__PURE__ */ React__default.createElement(StatusOK, null, "No pods with errors"))
+    ),
+    pauseTime && /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: 3 }, /* @__PURE__ */ React__default.createElement(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          flexWrap: "wrap"
+        }
+      },
+      /* @__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, { item: true, xs: 3 }, AbortedTitle)
+  );
+};
+const RolloutAccordion = ({
+  rollout,
+  ownedPods,
+  matchingHpa,
+  defaultExpanded
+}) => {
+  var _a, _b, _c, _d, _e, _f;
+  const podNamesWithErrors = useContext(PodNamesWithErrorsContext);
+  const podsWithErrors = ownedPods.filter(
+    (p) => {
+      var _a2, _b2;
+      return podNamesWithErrors.has((_b2 = (_a2 = p.metadata) == null ? void 0 : _a2.name) != null ? _b2 : "");
+    }
+  );
+  const currentStepIndex = (_b = (_a = rollout.status) == null ? void 0 : _a.currentStepIndex) != null ? _b : 0;
+  const abortedMessage = findAbortedMessage(rollout);
+  return /* @__PURE__ */ React__default.createElement(
+    Accordion,
+    {
+      defaultExpanded,
+      TransitionProps: { unmountOnExit: true },
+      variant: "outlined"
+    },
+    /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
+      RolloutSummary,
+      {
+        rollout,
+        numberOfCurrentPods: ownedPods.length,
+        numberOfPodsWithErrors: podsWithErrors.length,
+        hpa: matchingHpa
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement("div", { 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" } }, abortedMessage && /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, AbortedTitle, /* @__PURE__ */ React__default.createElement(Typography, { variant: "subtitle2" }, abortedMessage)), /* @__PURE__ */ React__default.createElement(
+      StepsProgress,
+      {
+        aborted: abortedMessage !== void 0,
+        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,
+        extraColumns: [READY_COLUMNS, RESOURCE_COLUMNS]
+      }
+    ))))
+  );
+};
+const RolloutAccordions = ({
+  rollouts,
+  defaultExpanded = false
+}) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "column",
+      justifyContent: "flex-start",
+      alignItems: "flex-start"
+    },
+    rollouts.map((rollout, i) => {
+      var _a, _b;
+      return /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, key: i, xs: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(
+        RolloutAccordion,
+        {
+          defaultExpanded,
+          matchingHpa: getMatchingHpa(
+            {
+              name: (_a = rollout.metadata) == null ? void 0 : _a.name,
+              namespace: (_b = rollout.metadata) == null ? void 0 : _b.namespace,
+              kind: "rollout"
+            },
+            groupedResponses.horizontalPodAutoscalers
+          ),
+          ownedPods: getOwnedPodsThroughReplicaSets(
+            rollout,
+            groupedResponses.replicaSets,
+            groupedResponses.pods
+          ),
+          rollout
+        }
+      )));
+    })
+  );
+};
+
+const capitalize = (str) => str.charAt(0).toLocaleUpperCase("en-US") + str.slice(1);
+const DefaultCustomResourceDrawer = ({
+  customResource,
+  customResourceName,
+  expanded
+}) => {
+  var _a, _b;
+  const capitalizedName = capitalize(customResourceName);
+  return /* @__PURE__ */ React__default.createElement(
+    KubernetesStructuredMetadataTableDrawer,
+    {
+      object: customResource,
+      expanded,
+      kind: capitalizedName,
+      renderObject: (cr) => cr
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, (_b = (_a = customResource.metadata) == null ? void 0 : _a.name) != null ? _b : "unknown object")),
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, capitalizedName))
+    )
+  );
+};
+
+const DefaultCustomResourceSummary = ({
+  customResource,
+  customResourceName
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "center",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__default.createElement(Grid, { xs: 12, item: true }, /* @__PURE__ */ React__default.createElement(
+      DefaultCustomResourceDrawer,
+      {
+        customResource,
+        customResourceName
+      }
+    ))
+  );
+};
+const DefaultCustomResourceAccordion = ({
+  customResource,
+  customResourceName,
+  defaultExpanded
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Accordion,
+    {
+      defaultExpanded,
+      TransitionProps: { unmountOnExit: true },
+      variant: "outlined"
+    },
+    /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
+      DefaultCustomResourceSummary,
+      {
+        customResource,
+        customResourceName
+      }
+    )),
+    /* @__PURE__ */ React__default.createElement(AccordionDetails, null, customResource.hasOwnProperty("status") && /* @__PURE__ */ React__default.createElement(StructuredMetadataTable, { metadata: customResource.status }))
+  );
+};
+const DefaultCustomResourceAccordions = ({
+  customResources,
+  customResourceName,
+  defaultExpanded = false
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "column",
+      justifyContent: "flex-start",
+      alignItems: "flex-start"
+    },
+    customResources.map((cr, i) => /* @__PURE__ */ React__default.createElement(Grid, { container: true, item: true, key: i, xs: true }, /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(
+      DefaultCustomResourceAccordion,
+      {
+        defaultExpanded,
+        customResource: cr,
+        customResourceName
+      }
+    ))))
+  );
+};
+
+const kindToResource = (customResources) => {
+  return lodash.groupBy(customResources, (value) => {
+    return value.kind;
+  });
+};
+const CustomResources = ({}) => {
+  const groupedResponses = useContext(GroupedResponsesContext);
+  const kindToResourceMap = kindToResource(groupedResponses.customResources);
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, Object.entries(kindToResourceMap).map(([kind, resources], i) => {
+    switch (kind) {
+      case "Rollout":
+        return /* @__PURE__ */ React__default.createElement(RolloutAccordions, { key: i, rollouts: resources });
+      default:
+        return /* @__PURE__ */ React__default.createElement(
+          DefaultCustomResourceAccordions,
+          {
+            key: i,
+            customResources: resources,
+            customResourceName: kind
+          }
+        );
+    }
+  }));
+};
+
+const ClusterSummary = ({
+  clusterName,
+  totalNumberOfPods,
+  numberOfPodsWithErrors
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    Grid,
+    {
+      container: true,
+      direction: "row",
+      justifyContent: "space-between",
+      alignItems: "flex-start",
+      spacing: 0
+    },
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        xs: 6,
+        item: true,
+        container: true,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true, xs: true }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body1" }, clusterName), /* @__PURE__ */ React__default.createElement(Typography, { color: "textSecondary", variant: "subtitle1" }, "Cluster"))
+    ),
+    /* @__PURE__ */ React__default.createElement(
+      Grid,
+      {
+        item: true,
+        container: true,
+        xs: 3,
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-end",
+        spacing: 0
+      },
+      /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatusOK, null, totalNumberOfPods, " pods")),
+      /* @__PURE__ */ React__default.createElement(Grid, { 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 groupedResponses = groupResponses(clusterObjects.resources);
+  const podMetricsMap = /* @__PURE__ */ new Map();
+  podMetricsMap.set(clusterObjects.cluster.name, clusterObjects.podMetrics);
+  return /* @__PURE__ */ React__default.createElement(ClusterContext.Provider, { value: clusterObjects.cluster }, /* @__PURE__ */ React__default.createElement(GroupedResponsesContext.Provider, { value: groupedResponses }, /* @__PURE__ */ React__default.createElement(PodMetricsContext.Provider, { value: podMetricsMap }, /* @__PURE__ */ React__default.createElement(PodNamesWithErrorsContext.Provider, { value: podsWithErrors }, /* @__PURE__ */ React__default.createElement(Accordion, { TransitionProps: { unmountOnExit: true } }, /* @__PURE__ */ React__default.createElement(AccordionSummary, { expandIcon: /* @__PURE__ */ React__default.createElement(ExpandMoreIcon, null) }, /* @__PURE__ */ React__default.createElement(
+    ClusterSummary,
+    {
+      clusterName: clusterObjects.cluster.name,
+      totalNumberOfPods: groupedResponses.pods.length,
+      numberOfPodsWithErrors: podsWithErrors.size
+    }
+  )), /* @__PURE__ */ React__default.createElement(AccordionDetails, null, /* @__PURE__ */ React__default.createElement(Grid, { container: true, direction: "column" }, groupedResponses.customResources.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(CustomResources, null)) : void 0, groupedResponses.deployments.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(DeploymentsAccordions, null)) : void 0, groupedResponses.statefulsets.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(StatefulSetsAccordions, null)) : void 0, groupedResponses.ingresses.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(IngressesAccordions, null)) : void 0, groupedResponses.services.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(ServicesAccordions, null)) : void 0, groupedResponses.cronJobs.length > 0 ? /* @__PURE__ */ React__default.createElement(Grid, { item: true }, /* @__PURE__ */ React__default.createElement(CronJobsAccordions, null)) : void 0)))))));
+};
+
+const clustersWithErrorsToErrorMessage = (clustersWithErrors) => {
+  return clustersWithErrors.map((c, i) => {
+    return /* @__PURE__ */ React__default.createElement("div", { key: i }, /* @__PURE__ */ React__default.createElement(Typography, { variant: "body2" }, `Cluster: ${c.cluster.name}`), c.errors.map((e, j) => {
+      return /* @__PURE__ */ React__default.createElement(Typography, { variant: "body2", key: j }, e.errorType === "FETCH_ERROR" ? `Error communicating with Kubernetes: ${e.errorType}, message: ${e.message}` : `Error fetching Kubernetes resource: '${e.resourcePath}', error: ${e.errorType}, status code: ${e.statusCode}`);
+    }), /* @__PURE__ */ React__default.createElement("br", null));
+  });
+};
+const ErrorPanel = ({
+  entityName,
+  errorMessage,
+  clustersWithErrors
+}) => /* @__PURE__ */ React__default.createElement(
+  WarningPanel,
+  {
+    title: "There was a problem retrieving Kubernetes objects",
+    message: `There was a problem retrieving some Kubernetes resources for the entity: ${entityName}. This could mean that the Error Reporting card is not completely accurate.`
+  },
+  clustersWithErrors && /* @__PURE__ */ React__default.createElement("div", null, "Errors: ", clustersWithErrorsToErrorMessage(clustersWithErrors)),
+  errorMessage && /* @__PURE__ */ React__default.createElement(Typography, { variant: "body2" }, "Errors: ", errorMessage)
+);
+
+const columns = [
+  {
+    title: "cluster",
+    width: "10%",
+    render: (row) => row.clusterName
+  },
+  {
+    title: "namespace",
+    width: "10%",
+    render: (row) => row.error.sourceRef.namespace
+  },
+  {
+    title: "kind",
+    width: "10%",
+    render: (row) => row.error.sourceRef.kind
+  },
+  {
+    title: "name",
+    width: "30%",
+    render: (row) => {
+      return /* @__PURE__ */ React.createElement(React.Fragment, null, row.error.sourceRef.name, " ");
+    }
+  },
+  {
+    title: "messages",
+    width: "40%",
+    render: (row) => row.error.message
+  }
+];
+const sortBySeverity = (a, b) => {
+  if (a.error.severity < b.error.severity) {
+    return 1;
+  } else if (b.error.severity < a.error.severity) {
+    return -1;
+  }
+  return 0;
+};
+const ErrorReporting = ({ detectedErrors }) => {
+  const errors = Array.from(detectedErrors.entries()).flatMap(([clusterName, resourceErrors]) => {
+    return resourceErrors.map((e) => ({
+      clusterName,
+      error: e
+    }));
+  }).sort(sortBySeverity);
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, errors.length !== 0 && /* @__PURE__ */ React.createElement(
+    Table,
+    {
+      title: "Error Reporting",
+      data: errors,
+      columns,
+      options: { paging: true, search: false, emptyRowsWhenPaging: false }
+    }
+  ));
+};
+
+export { AksKubernetesAuthProvider, Cluster, ClusterContext, ContainerCard, CronJobsAccordions, CustomResources, DetectedErrorsContext, ErrorList, ErrorPanel, ErrorReporting, Events, EventsContent, FixDialog, GoogleKubernetesAuthProvider, GroupedResponsesContext, HorizontalPodAutoscalerDrawer, IngressesAccordions, JobsAccordions, KubernetesAuthProviders, KubernetesBackendClient, KubernetesDrawer, KubernetesProxyClient, KubernetesStructuredMetadataTableDrawer, LinkErrorPanel, ManifestYaml, OidcKubernetesAuthProvider, PendingPodContent, PodDrawer, PodExecTerminal, PodExecTerminalDialog, PodLogs, PodLogsDialog, PodMetricsContext, PodNamesWithErrorsContext, PodNamesWithMetricsContext, PodsTable, READY_COLUMNS, RESOURCE_COLUMNS, ResourceUtilization, ServerSideKubernetesAuthProvider, ServicesAccordions, kubernetesApiRef, kubernetesAuthProvidersApiRef, kubernetesProxyApiRef, useCustomResources, useEvents, useIsPodExecTerminalSupported, useKubernetesObjects, useMatchingErrors, usePodLogs, usePodMetrics };
+//# sourceMappingURL=index.esm.js.map