From 7848c4f5b934b77afc091fc843328e1c66432f96 Mon Sep 17 00:00:00 2001
From: Kautilya Tripathi <ktripathi@microsoft.com>
Date: Mon, 18 Nov 2024 08:25:45 +0530
Subject: [PATCH] frontend: Add feature to view deploy logs

This adds feature to view all the pods of pods in a deployment rather
than going to a specific pod.

Fixes: #2552

Signed-off-by: Kautilya Tripathi <ktripathi@microsoft.com>
---
 .../components/common/Resource/LogsButton.tsx | 425 ++++++++++++++++++
 .../MainInfoSection/MainInfoSectionHeader.tsx |   7 +
 .../MainInfoSection.Normal.stories.storyshot  |   5 +
 ...InfoSection.NullBacklink.stories.storyshot |   5 +
 .../components/common/Resource/index.test.ts  |   3 +-
 .../src/components/common/Resource/index.tsx  |   1 +
 frontend/src/components/common/index.test.ts  |   2 +-
 .../Details.Empty.stories.storyshot           |   5 +
 .../Details.WithBase.stories.storyshot        |   5 +
 ...sourceDefinition.Details.stories.storyshot |   5 +
 ...mResourceDetails.NoError.stories.storyshot |   5 +
 .../CronJobDetails.EveryAst.stories.storyshot |   5 +
 ...onJobDetails.EveryMinute.stories.storyshot |   5 +
 .../EndpointDetails.Default.stories.storyshot |   5 +
 .../EndpointDetails.Error.stories.storyshot   |   5 +
 .../HPADetails.Default.stories.storyshot      |   5 +
 .../HPADetails.Error.stories.storyshot        |   5 +
 .../ClassDetails.Basic.stories.storyshot      |   5 +
 ...ClassDetails.WithDefault.stories.storyshot |   5 +
 .../Details.WithResource.stories.storyshot    |   5 +
 .../Details.WithTLS.stories.storyshot         |   5 +
 .../Details.WithWildcardTLS.stories.storyshot |   5 +
 .../Details.LeaseDetail.stories.storyshot     |   5 +
 ...Details.LimitRangeDetail.stories.storyshot |   5 +
 .../NamespaceDetails.Active.stories.storyshot |   5 +
 .../PodDetails.Error.stories.storyshot        |   5 +
 .../PodDetails.Initializing.stories.storyshot |   5 +
 ...odDetails.LivenessFailed.stories.storyshot |   5 +
 .../PodDetails.PullBackOff.stories.storyshot  |   5 +
 .../PodDetails.Running.stories.storyshot      |   5 +
 .../PodDetails.Successful.stories.storyshot   |   5 +
 .../pdbDetails.Default.stories.storyshot      |   5 +
 .../pdbDetails.Error.stories.storyshot        |   5 +
 ...rityClassDetails.Default.stories.storyshot |   5 +
 ...iorityClassDetails.Error.stories.storyshot |   5 +
 ...urceQuotaDetails.Default.stories.storyshot |   5 +
 ...sourceQuotaDetails.Error.stories.storyshot |   5 +
 .../Details.Base.stories.storyshot            |   5 +
 .../Details.Empty.stories.storyshot           |   5 +
 .../Details.WithBase.stories.storyshot        |   5 +
 .../ClaimDetails.Base.stories.storyshot       |   5 +
 .../ClassDetails.Base.stories.storyshot       |   5 +
 .../VolumeDetails.Base.stories.storyshot      |   5 +
 .../VPADetails.Default.stories.storyshot      |   5 +
 .../VPADetails.Error.stories.storyshot        |   5 +
 ...onfigDetails.WithService.stories.storyshot |   5 +
 ...ookConfigDetails.WithURL.stories.storyshot |   5 +
 ...onfigDetails.WithService.stories.storyshot |   5 +
 ...ookConfigDetails.WithURL.stories.storyshot |   5 +
 frontend/src/i18n/locales/de/translation.json |  13 +-
 frontend/src/i18n/locales/en/translation.json |  13 +-
 frontend/src/i18n/locales/es/translation.json |  13 +-
 frontend/src/i18n/locales/fr/translation.json |  13 +-
 frontend/src/i18n/locales/pt/translation.json |  13 +-
 .../plugin/__snapshots__/pluginLib.snapshot   |   5 +-
 frontend/src/redux/actionButtonsSlice.ts      |   1 +
 56 files changed, 706 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/components/common/Resource/LogsButton.tsx

diff --git a/frontend/src/components/common/Resource/LogsButton.tsx b/frontend/src/components/common/Resource/LogsButton.tsx
new file mode 100644
index 0000000000..7505ed5e34
--- /dev/null
+++ b/frontend/src/components/common/Resource/LogsButton.tsx
@@ -0,0 +1,425 @@
+import { Box, FormControl, InputLabel, MenuItem, Select, styled, Switch } from '@mui/material';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import { Terminal as XTerminal } from '@xterm/xterm';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { request } from '../../../lib/k8s/apiProxy';
+import { KubeContainerStatus } from '../../../lib/k8s/cluster';
+import Deployment from '../../../lib/k8s/deployment';
+import { KubeObject } from '../../../lib/k8s/KubeObject';
+import Pod from '../../../lib/k8s/pod';
+import ActionButton from '../ActionButton';
+import { LogViewer } from '../LogViewer';
+import { LightTooltip } from '../Tooltip';
+
+// Component props interface
+interface LogsButtonProps {
+  item: KubeObject | null;
+}
+
+// Styled component for consistent padding in form controls
+const PaddedFormControlLabel = styled(FormControlLabel)(({ theme }) => ({
+  margin: 0,
+  paddingTop: theme.spacing(2),
+  paddingRight: theme.spacing(2),
+}));
+
+export function LogsButton({ item }: LogsButtonProps) {
+  const [showLogs, setShowLogs] = useState(false);
+  const [pods, setPods] = useState<Pod[]>([]);
+  const [selectedPodIndex, setSelectedPodIndex] = useState<number | 'all'>('all');
+  const [selectedContainer, setSelectedContainer] = useState('');
+
+  const [logs, setLogs] = useState<{ logs: string[]; lastLineShown: number }>({
+    logs: [],
+    lastLineShown: -1,
+  });
+  const [allPodLogs, setAllPodLogs] = useState<{ [podName: string]: string[] }>({});
+
+  const [showTimestamps, setShowTimestamps] = useState<boolean>(true);
+  const [follow, setFollow] = useState<boolean>(true);
+  const [lines, setLines] = useState<number>(100);
+  const [showPrevious, setShowPrevious] = React.useState<boolean>(false);
+  const [showReconnectButton, setShowReconnectButton] = useState(false);
+
+  const xtermRef = React.useRef<XTerminal | null>(null);
+  const { t } = useTranslation(['glossary', 'translation']);
+
+  const clearLogs = React.useCallback(() => {
+    if (xtermRef.current) {
+      xtermRef.current.clear();
+    }
+    setLogs({ logs: [], lastLineShown: -1 });
+  }, []);
+
+  // Fetch related pods.
+  async function getRelatedPods(): Promise<Pod[]> {
+    if (item instanceof Deployment) {
+      const labelSelector = item.getMatchLabelsList().join(',');
+      const response = await request(
+        `/api/v1/namespaces/${item.metadata.namespace}/pods?labelSelector=${labelSelector}`,
+        { method: 'GET' }
+      );
+      return response.items.map((podData: any) => new Pod(podData));
+    }
+    return [];
+  }
+
+  // Event handlers for log viewing options
+  function handleLinesChange(event: any) {
+    setLines(event.target.value);
+  }
+
+  function handleTimestampsChange() {
+    setShowTimestamps(prev => !prev);
+  }
+
+  function handleFollowChange() {
+    setFollow(prev => !prev);
+  }
+
+  function handlePreviousChange() {
+    setShowPrevious(previous => !previous);
+  }
+
+  // Handler for initial logs button click
+  async function handleClick() {
+    if (item instanceof Deployment) {
+      const fetchedPods = await getRelatedPods();
+      if (fetchedPods.length > 0) {
+        setPods(fetchedPods);
+        setSelectedPodIndex('all');
+        setSelectedContainer(fetchedPods[0].spec.containers[0].name);
+        setShowLogs(true);
+      }
+    }
+  }
+
+  // Handler for closing the logs viewer
+  function handleClose() {
+    setShowLogs(false);
+    setPods([]);
+    setSelectedPodIndex('all');
+    setSelectedContainer('');
+    setLogs({ logs: [], lastLineShown: -1 });
+  }
+
+  // Get containers for the selected pod
+  const containers = React.useMemo(() => {
+    if (!pods.length) return [];
+    if (selectedPodIndex === 'all')
+      return pods[0]?.spec?.containers?.map(container => container.name) || [];
+    const selectedPod = pods[selectedPodIndex as number];
+    return selectedPod?.spec?.containers?.map(container => container.name) || [];
+  }, [pods, selectedPodIndex]);
+
+  // Check if a container has been restarted
+  function hasContainerRestarted(podName: string | undefined, containerName: string) {
+    if (!podName) return false;
+    const pod = pods.find(p => p.getName() === podName);
+    const cont = pod?.status?.containerStatuses?.find(
+      (c: KubeContainerStatus) => c.name === containerName
+    );
+    if (!cont) {
+      return false;
+    }
+
+    return cont.restartCount > 0;
+  }
+
+  // Handler for reconnecting to logs stream
+  function handleReconnect() {
+    if (pods.length && selectedContainer) {
+      setShowReconnectButton(false);
+      setLogs({ logs: [], lastLineShown: -1 });
+    }
+  }
+
+  // Function to process and display all logs
+  const processAllLogs = React.useCallback(() => {
+    const allLogs: string[] = [];
+    Object.entries(allPodLogs).forEach(([podName, podLogs]) => {
+      podLogs.forEach(log => {
+        allLogs.push(`[${podName}] ${log}`);
+      });
+    });
+
+    // Sort logs by timestamp
+    allLogs.sort((a, b) => {
+      const timestampA = a.match(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)?.[0] || '';
+      const timestampB = b.match(/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}/)?.[0] || '';
+      return timestampA.localeCompare(timestampB);
+    });
+
+    if (xtermRef.current) {
+      xtermRef.current.clear();
+      xtermRef.current.write(allLogs.join('').replaceAll('\n', '\r\n'));
+    }
+
+    setLogs({
+      logs: allLogs,
+      lastLineShown: allLogs.length - 1,
+    });
+  }, [allPodLogs]);
+
+  // Function to fetch and aggregate logs from all pods
+  function fetchAllPodsLogs(pods: Pod[], container: string): () => void {
+    clearLogs();
+    setAllPodLogs({});
+
+    const cleanups: Array<() => void> = [];
+
+    pods.forEach(pod => {
+      const cleanup = pod.getLogs(
+        container,
+        (newLogs: string[]) => {
+          const podName = pod.getName();
+          setAllPodLogs(current => {
+            const updated = {
+              ...current,
+              [podName]: newLogs,
+            };
+            return updated;
+          });
+        },
+        {
+          tailLines: lines,
+          showPrevious,
+          showTimestamps,
+          follow,
+          onReconnectStop: () => {
+            setShowReconnectButton(true);
+          },
+        }
+      );
+      cleanups.push(cleanup);
+    });
+
+    return () => cleanups.forEach(cleanup => cleanup());
+  }
+
+  // Effect for fetching and updating logs
+  React.useEffect(() => {
+    let cleanup: (() => void) | null = null;
+    let isSubscribed = true;
+
+    if (showLogs && selectedContainer) {
+      clearLogs();
+      setAllPodLogs({}); // Clear aggregated logs when switching pods
+
+      // Handle paused logs state
+      if (!follow && logs.logs.length > 0) {
+        xtermRef.current?.write(
+          '\n\n' +
+            t('translation|Logs are paused. Click the follow button to resume following them.') +
+            '\r\n'
+        );
+        return;
+      }
+
+      if (selectedPodIndex === 'all') {
+        cleanup = fetchAllPodsLogs(pods, selectedContainer);
+      } else {
+        const pod = pods[selectedPodIndex as number];
+        if (pod) {
+          let lastLogLength = 0;
+          cleanup = pod.getLogs(
+            selectedContainer,
+            (newLogs: string[]) => {
+              if (!isSubscribed) return;
+
+              setLogs(current => {
+                const terminalRef = xtermRef.current;
+                if (!terminalRef) return current;
+
+                // Only write the new logs that we haven't seen before
+                if (newLogs.length > lastLogLength) {
+                  const newLogContent = newLogs
+                    .slice(lastLogLength)
+                    .join('')
+                    .replaceAll('\n', '\r\n');
+                  terminalRef.write(newLogContent);
+                  lastLogLength = newLogs.length;
+                }
+
+                return {
+                  logs: newLogs,
+                  lastLineShown: newLogs.length - 1,
+                };
+              });
+            },
+            {
+              tailLines: lines,
+              showPrevious,
+              showTimestamps,
+              follow,
+              onReconnectStop: () => {
+                if (isSubscribed) {
+                  setShowReconnectButton(true);
+                }
+              },
+            }
+          );
+        }
+      }
+    }
+
+    return () => {
+      isSubscribed = false;
+      if (cleanup) {
+        cleanup();
+      }
+    };
+  }, [
+    selectedPodIndex,
+    selectedContainer,
+    showLogs,
+    lines,
+    showTimestamps,
+    follow,
+    clearLogs,
+    t,
+    pods,
+  ]);
+
+  // Effect to process logs when allPodLogs changes - only for "All Pods" mode
+  React.useEffect(() => {
+    if (selectedPodIndex === 'all' && showLogs && Object.keys(allPodLogs).length > 0) {
+      processAllLogs();
+    }
+  }, [allPodLogs, selectedPodIndex, showLogs, processAllLogs]);
+
+  const topActions = [
+    <Box
+      key="container-controls"
+      sx={{ display: 'flex', gap: 2, alignItems: 'center', width: '100%' }}
+    >
+      {/* Pod selection dropdown */}
+      <FormControl sx={{ minWidth: 200 }}>
+        <InputLabel>{t('translation|Select Pod')}</InputLabel>
+        <Select
+          value={selectedPodIndex}
+          onChange={event => {
+            setSelectedPodIndex(event.target.value as number | 'all');
+            clearLogs();
+          }}
+          label={t('translation|Select Pod')}
+        >
+          <MenuItem value="all">{t('translation|All Pods')}</MenuItem>
+          {pods.map((pod, index) => (
+            <MenuItem key={pod.getName()} value={index}>
+              {pod.getName()}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+
+      {/* Container selection dropdown */}
+      <FormControl sx={{ minWidth: 200 }}>
+        <InputLabel>{t('translation|Container')}</InputLabel>
+        <Select
+          value={selectedContainer}
+          onChange={event => {
+            setSelectedContainer(event.target.value);
+            clearLogs();
+          }}
+          label={t('translation|Container')}
+        >
+          {containers.map(container => (
+            <MenuItem key={container} value={container}>
+              {container}
+              {hasContainerRestarted(
+                pods[selectedPodIndex === 'all' ? 0 : selectedPodIndex]?.getName(),
+                container
+              ) && ` (${t('translation|Restarted')})`}
+            </MenuItem>
+          ))}
+        </Select>
+      </FormControl>
+
+      {/* Lines selector */}
+      <FormControl sx={{ minWidth: 120 }}>
+        <InputLabel>Lines</InputLabel>
+        <Select value={lines} onChange={handleLinesChange}>
+          {[100, 1000, 2500].map(i => (
+            <MenuItem key={i} value={i}>
+              {i}
+            </MenuItem>
+          ))}
+          <MenuItem value={-1}>All</MenuItem>
+        </Select>
+      </FormControl>
+
+      {/* Show previous logs switch */}
+      <LightTooltip
+        title={
+          hasContainerRestarted(
+            selectedPodIndex === 'all'
+              ? pods[0]?.getName()
+              : pods[selectedPodIndex as number]?.getName(),
+            selectedContainer
+          )
+            ? t('translation|Show logs for previous instances of this container.')
+            : t(
+                'translation|You can only select this option for containers that have been restarted.'
+              )
+        }
+      >
+        <PaddedFormControlLabel
+          label={t('translation|Show previous')}
+          disabled={
+            !hasContainerRestarted(
+              selectedPodIndex === 'all'
+                ? pods[0]?.getName()
+                : pods[selectedPodIndex as number]?.getName(),
+              selectedContainer
+            )
+          }
+          control={<Switch checked={showPrevious} onChange={handlePreviousChange} />}
+        />
+      </LightTooltip>
+
+      {/* Timestamps switch */}
+      <FormControlLabel
+        control={<Switch checked={showTimestamps} onChange={handleTimestampsChange} size="small" />}
+        label="Timestamps"
+      />
+
+      {/* Follow logs switch */}
+      <FormControlLabel
+        control={<Switch checked={follow} onChange={handleFollowChange} size="small" />}
+        label="Follow"
+      />
+    </Box>,
+  ];
+
+  return (
+    <>
+      {/* Show logs button for deployments */}
+      {item instanceof Deployment && (
+        <ActionButton
+          icon="mdi:file-document-box-outline"
+          onClick={handleClick}
+          description={t('translation|Show logs')}
+        />
+      )}
+
+      {/* Logs viewer dialog */}
+      {pods.length && showLogs && (
+        <LogViewer
+          title={item?.getName() || ''}
+          downloadName={`${item?.getName()}_${
+            selectedPodIndex === 'all' ? 'all_pods' : pods[selectedPodIndex as number]?.getName()
+          }`}
+          open={showLogs}
+          onClose={handleClose}
+          logs={logs.logs}
+          topActions={topActions}
+          xtermRef={xtermRef}
+          handleReconnect={handleReconnect}
+          showReconnectButton={showReconnectButton}
+        />
+      )}
+    </>
+  );
+}
diff --git a/frontend/src/components/common/Resource/MainInfoSection/MainInfoSectionHeader.tsx b/frontend/src/components/common/Resource/MainInfoSection/MainInfoSectionHeader.tsx
index 2a354093b8..6f6813747c 100644
--- a/frontend/src/components/common/Resource/MainInfoSection/MainInfoSectionHeader.tsx
+++ b/frontend/src/components/common/Resource/MainInfoSection/MainInfoSectionHeader.tsx
@@ -12,6 +12,7 @@ import ErrorBoundary from '../../ErrorBoundary';
 import SectionHeader, { HeaderStyle } from '../../SectionHeader';
 import DeleteButton from '../DeleteButton';
 import EditButton from '../EditButton';
+import { LogsButton } from '../LogsButton';
 import { RestartButton } from '../RestartButton';
 import ScaleButton from '../ScaleButton';
 
@@ -44,6 +45,9 @@ export function MainInfoHeader<T extends KubeObject>(props: MainInfoHeaderProps<
         case DefaultHeaderAction.RESTART:
           Action = RestartButton;
           break;
+        case DefaultHeaderAction.DEPLOYMENT_LOGS:
+          Action = LogsButton;
+          break;
         case DefaultHeaderAction.SCALE:
           Action = ScaleButton;
           break;
@@ -79,6 +83,9 @@ export function MainInfoHeader<T extends KubeObject>(props: MainInfoHeaderProps<
     {
       id: DefaultHeaderAction.RESTART,
     },
+    {
+      id: DefaultHeaderAction.DEPLOYMENT_LOGS,
+    },
     {
       id: DefaultHeaderAction.SCALE,
     },
diff --git a/frontend/src/components/common/Resource/MainInfoSection/__snapshots__/MainInfoSection.Normal.stories.storyshot b/frontend/src/components/common/Resource/MainInfoSection/__snapshots__/MainInfoSection.Normal.stories.storyshot
index 22e8e5c331..ea6f79ba4b 100644
--- a/frontend/src/components/common/Resource/MainInfoSection/__snapshots__/MainInfoSection.Normal.stories.storyshot
+++ b/frontend/src/components/common/Resource/MainInfoSection/__snapshots__/MainInfoSection.Normal.stories.storyshot
@@ -49,6 +49,11 @@
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             />
+            <div
+              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+            >
+              0
+            </div>
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             />
diff --git a/frontend/src/components/common/Resource/MainInfoSection/__snapshots__/MainInfoSection.NullBacklink.stories.storyshot b/frontend/src/components/common/Resource/MainInfoSection/__snapshots__/MainInfoSection.NullBacklink.stories.storyshot
index d69fd3d48f..cb1e081a15 100644
--- a/frontend/src/components/common/Resource/MainInfoSection/__snapshots__/MainInfoSection.NullBacklink.stories.storyshot
+++ b/frontend/src/components/common/Resource/MainInfoSection/__snapshots__/MainInfoSection.NullBacklink.stories.storyshot
@@ -31,6 +31,11 @@
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             />
+            <div
+              class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+            >
+              0
+            </div>
             <div
               class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
             />
diff --git a/frontend/src/components/common/Resource/index.test.ts b/frontend/src/components/common/Resource/index.test.ts
index ae4c85ad8c..57df9a8207 100644
--- a/frontend/src/components/common/Resource/index.test.ts
+++ b/frontend/src/components/common/Resource/index.test.ts
@@ -35,13 +35,14 @@ const checkExports = [
   'SimpleEditor',
   'ViewButton',
   'AuthVisible',
+  'LogsButton',
 ];
 
 function getFilesToVerify() {
   const filesToVerify: string[] = [];
   fs.readdirSync(__dirname).forEach(file => {
     const fileNoSuffix = file.replace(/\.[^/.]+$/, '');
-    if (!avoidCheck.find(suffix => fileNoSuffix.endsWith(suffix))) {
+    if (!avoidCheck.find(suffix => fileNoSuffix.endsWith(suffix)) && fileNoSuffix) {
       filesToVerify.push(fileNoSuffix);
     }
   });
diff --git a/frontend/src/components/common/Resource/index.tsx b/frontend/src/components/common/Resource/index.tsx
index d7e64f6245..46db337a9c 100644
--- a/frontend/src/components/common/Resource/index.tsx
+++ b/frontend/src/components/common/Resource/index.tsx
@@ -27,6 +27,7 @@ export { default as ResourceTableColumnChooser } from './ResourceTableColumnChoo
 export { addResourceTableColumnsProcessor } from './resourceTableSlice';
 export * from './RestartButton';
 export * from './ScaleButton';
+export * from './LogsButton';
 export { default as ScaleButton } from './ScaleButton';
 export * from './SimpleEditor';
 export { default as SimpleEditor } from './SimpleEditor';
diff --git a/frontend/src/components/common/index.test.ts b/frontend/src/components/common/index.test.ts
index a1d343491c..b93ea2e7dd 100644
--- a/frontend/src/components/common/index.test.ts
+++ b/frontend/src/components/common/index.test.ts
@@ -50,7 +50,7 @@ function getFilesToVerify() {
   const filesToVerify: string[] = [];
   fs.readdirSync(__dirname).forEach(file => {
     const fileNoSuffix = file.replace(/\.[^/.]+$/, '');
-    if (!avoidCheck.find(suffix => fileNoSuffix.endsWith(suffix))) {
+    if (!avoidCheck.find(suffix => fileNoSuffix.endsWith(suffix)) && fileNoSuffix) {
       filesToVerify.push(fileNoSuffix);
     }
   });
diff --git a/frontend/src/components/configmap/__snapshots__/Details.Empty.stories.storyshot b/frontend/src/components/configmap/__snapshots__/Details.Empty.stories.storyshot
index 9b7d70afaf..4749925e87 100644
--- a/frontend/src/components/configmap/__snapshots__/Details.Empty.stories.storyshot
+++ b/frontend/src/components/configmap/__snapshots__/Details.Empty.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/configmap/__snapshots__/Details.WithBase.stories.storyshot b/frontend/src/components/configmap/__snapshots__/Details.WithBase.stories.storyshot
index 6fb2a76c9c..1dd3e3f3c8 100644
--- a/frontend/src/components/configmap/__snapshots__/Details.WithBase.stories.storyshot
+++ b/frontend/src/components/configmap/__snapshots__/Details.WithBase.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.Details.stories.storyshot b/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.Details.stories.storyshot
index 711d954cf6..97a10e90ab 100644
--- a/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.Details.stories.storyshot
+++ b/frontend/src/components/crd/__snapshots__/CustomResourceDefinition.Details.stories.storyshot
@@ -58,6 +58,11 @@
                   <div
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   />
+                  <div
+                    class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                  >
+                    0
+                  </div>
                   <div
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   />
diff --git a/frontend/src/components/crd/__snapshots__/CustomResourceDetails.NoError.stories.storyshot b/frontend/src/components/crd/__snapshots__/CustomResourceDetails.NoError.stories.storyshot
index e9ac5f7662..8a698d83aa 100644
--- a/frontend/src/components/crd/__snapshots__/CustomResourceDetails.NoError.stories.storyshot
+++ b/frontend/src/components/crd/__snapshots__/CustomResourceDetails.NoError.stories.storyshot
@@ -58,6 +58,11 @@
                   <div
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   />
+                  <div
+                    class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                  >
+                    0
+                  </div>
                   <div
                     class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                   />
diff --git a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryAst.stories.storyshot b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryAst.stories.storyshot
index 9b863e2aa0..7dcfb9b5b1 100644
--- a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryAst.stories.storyshot
+++ b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryAst.stories.storyshot
@@ -93,6 +93,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryMinute.stories.storyshot b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryMinute.stories.storyshot
index 0240bbe4cb..8bd0cc53f0 100644
--- a/frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryMinute.stories.storyshot
+++ b/frontend/src/components/cronjob/__snapshots__/CronJobDetails.EveryMinute.stories.storyshot
@@ -93,6 +93,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/endpoints/__snapshots__/EndpointDetails.Default.stories.storyshot b/frontend/src/components/endpoints/__snapshots__/EndpointDetails.Default.stories.storyshot
index 8e1b195ed3..dac40a6f93 100644
--- a/frontend/src/components/endpoints/__snapshots__/EndpointDetails.Default.stories.storyshot
+++ b/frontend/src/components/endpoints/__snapshots__/EndpointDetails.Default.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/endpoints/__snapshots__/EndpointDetails.Error.stories.storyshot b/frontend/src/components/endpoints/__snapshots__/EndpointDetails.Error.stories.storyshot
index a8ef8b1325..64441925ab 100644
--- a/frontend/src/components/endpoints/__snapshots__/EndpointDetails.Error.stories.storyshot
+++ b/frontend/src/components/endpoints/__snapshots__/EndpointDetails.Error.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Default.stories.storyshot b/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Default.stories.storyshot
index a026353bb3..da82796f4b 100644
--- a/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Default.stories.storyshot
+++ b/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Default.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Error.stories.storyshot b/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Error.stories.storyshot
index 45e720a92e..5940b375c5 100644
--- a/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Error.stories.storyshot
+++ b/frontend/src/components/horizontalPodAutoscaler/__snapshots__/HPADetails.Error.stories.storyshot
@@ -50,6 +50,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/ingress/__snapshots__/ClassDetails.Basic.stories.storyshot b/frontend/src/components/ingress/__snapshots__/ClassDetails.Basic.stories.storyshot
index 08b4dc333d..24583b6b82 100644
--- a/frontend/src/components/ingress/__snapshots__/ClassDetails.Basic.stories.storyshot
+++ b/frontend/src/components/ingress/__snapshots__/ClassDetails.Basic.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/ingress/__snapshots__/ClassDetails.WithDefault.stories.storyshot b/frontend/src/components/ingress/__snapshots__/ClassDetails.WithDefault.stories.storyshot
index f750058388..09dde82bc9 100644
--- a/frontend/src/components/ingress/__snapshots__/ClassDetails.WithDefault.stories.storyshot
+++ b/frontend/src/components/ingress/__snapshots__/ClassDetails.WithDefault.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/ingress/__snapshots__/Details.WithResource.stories.storyshot b/frontend/src/components/ingress/__snapshots__/Details.WithResource.stories.storyshot
index d23738d23b..eacf2d04c6 100644
--- a/frontend/src/components/ingress/__snapshots__/Details.WithResource.stories.storyshot
+++ b/frontend/src/components/ingress/__snapshots__/Details.WithResource.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/ingress/__snapshots__/Details.WithTLS.stories.storyshot b/frontend/src/components/ingress/__snapshots__/Details.WithTLS.stories.storyshot
index d87018cb28..fc86044291 100644
--- a/frontend/src/components/ingress/__snapshots__/Details.WithTLS.stories.storyshot
+++ b/frontend/src/components/ingress/__snapshots__/Details.WithTLS.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/ingress/__snapshots__/Details.WithWildcardTLS.stories.storyshot b/frontend/src/components/ingress/__snapshots__/Details.WithWildcardTLS.stories.storyshot
index cbe46040f6..00a5d39c80 100644
--- a/frontend/src/components/ingress/__snapshots__/Details.WithWildcardTLS.stories.storyshot
+++ b/frontend/src/components/ingress/__snapshots__/Details.WithWildcardTLS.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/lease/__snapshots__/Details.LeaseDetail.stories.storyshot b/frontend/src/components/lease/__snapshots__/Details.LeaseDetail.stories.storyshot
index 5c88415449..a54e9ef34d 100644
--- a/frontend/src/components/lease/__snapshots__/Details.LeaseDetail.stories.storyshot
+++ b/frontend/src/components/lease/__snapshots__/Details.LeaseDetail.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/limitRange/__snapshots__/Details.LimitRangeDetail.stories.storyshot b/frontend/src/components/limitRange/__snapshots__/Details.LimitRangeDetail.stories.storyshot
index 4c934ad309..2685297d28 100644
--- a/frontend/src/components/limitRange/__snapshots__/Details.LimitRangeDetail.stories.storyshot
+++ b/frontend/src/components/limitRange/__snapshots__/Details.LimitRangeDetail.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/namespace/__snapshots__/NamespaceDetails.Active.stories.storyshot b/frontend/src/components/namespace/__snapshots__/NamespaceDetails.Active.stories.storyshot
index 15e3b8b9af..d263d5facb 100644
--- a/frontend/src/components/namespace/__snapshots__/NamespaceDetails.Active.stories.storyshot
+++ b/frontend/src/components/namespace/__snapshots__/NamespaceDetails.Active.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/pod/__snapshots__/PodDetails.Error.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodDetails.Error.stories.storyshot
index 2a7df5c86c..7dc014f2c0 100644
--- a/frontend/src/components/pod/__snapshots__/PodDetails.Error.stories.storyshot
+++ b/frontend/src/components/pod/__snapshots__/PodDetails.Error.stories.storyshot
@@ -108,6 +108,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/pod/__snapshots__/PodDetails.Initializing.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodDetails.Initializing.stories.storyshot
index cbf3288b92..ff26b5c229 100644
--- a/frontend/src/components/pod/__snapshots__/PodDetails.Initializing.stories.storyshot
+++ b/frontend/src/components/pod/__snapshots__/PodDetails.Initializing.stories.storyshot
@@ -108,6 +108,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/pod/__snapshots__/PodDetails.LivenessFailed.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodDetails.LivenessFailed.stories.storyshot
index ba88ddd57b..146177502b 100644
--- a/frontend/src/components/pod/__snapshots__/PodDetails.LivenessFailed.stories.storyshot
+++ b/frontend/src/components/pod/__snapshots__/PodDetails.LivenessFailed.stories.storyshot
@@ -108,6 +108,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/pod/__snapshots__/PodDetails.PullBackOff.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodDetails.PullBackOff.stories.storyshot
index 10bb00edc6..4a65d5c8dd 100644
--- a/frontend/src/components/pod/__snapshots__/PodDetails.PullBackOff.stories.storyshot
+++ b/frontend/src/components/pod/__snapshots__/PodDetails.PullBackOff.stories.storyshot
@@ -108,6 +108,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/pod/__snapshots__/PodDetails.Running.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodDetails.Running.stories.storyshot
index cacb1d08b6..5f34d6b2f0 100644
--- a/frontend/src/components/pod/__snapshots__/PodDetails.Running.stories.storyshot
+++ b/frontend/src/components/pod/__snapshots__/PodDetails.Running.stories.storyshot
@@ -108,6 +108,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/pod/__snapshots__/PodDetails.Successful.stories.storyshot b/frontend/src/components/pod/__snapshots__/PodDetails.Successful.stories.storyshot
index cc5f7d91dc..a1ec8fce9a 100644
--- a/frontend/src/components/pod/__snapshots__/PodDetails.Successful.stories.storyshot
+++ b/frontend/src/components/pod/__snapshots__/PodDetails.Successful.stories.storyshot
@@ -108,6 +108,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Default.stories.storyshot b/frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Default.stories.storyshot
index b8fc59859c..60bd044c2f 100644
--- a/frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Default.stories.storyshot
+++ b/frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Default.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Error.stories.storyshot b/frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Error.stories.storyshot
index 45e720a92e..5940b375c5 100644
--- a/frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Error.stories.storyshot
+++ b/frontend/src/components/podDisruptionBudget/__snapshots__/pdbDetails.Error.stories.storyshot
@@ -50,6 +50,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Default.stories.storyshot b/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Default.stories.storyshot
index 035b38e7cb..ee934383fb 100644
--- a/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Default.stories.storyshot
+++ b/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Default.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Error.stories.storyshot b/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Error.stories.storyshot
index 45e720a92e..5940b375c5 100644
--- a/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Error.stories.storyshot
+++ b/frontend/src/components/priorityClass/__snapshots__/priorityClassDetails.Error.stories.storyshot
@@ -50,6 +50,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Default.stories.storyshot b/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Default.stories.storyshot
index 9b40540733..8768daaa24 100644
--- a/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Default.stories.storyshot
+++ b/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Default.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Error.stories.storyshot b/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Error.stories.storyshot
index 45e720a92e..5940b375c5 100644
--- a/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Error.stories.storyshot
+++ b/frontend/src/components/resourceQuota/__snapshots__/resourceQuotaDetails.Error.stories.storyshot
@@ -50,6 +50,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/runtimeClass/__snapshots__/Details.Base.stories.storyshot b/frontend/src/components/runtimeClass/__snapshots__/Details.Base.stories.storyshot
index cfd9e8a01a..e0fd373942 100644
--- a/frontend/src/components/runtimeClass/__snapshots__/Details.Base.stories.storyshot
+++ b/frontend/src/components/runtimeClass/__snapshots__/Details.Base.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/secret/__snapshots__/Details.Empty.stories.storyshot b/frontend/src/components/secret/__snapshots__/Details.Empty.stories.storyshot
index c4284210cf..93b560d6ba 100644
--- a/frontend/src/components/secret/__snapshots__/Details.Empty.stories.storyshot
+++ b/frontend/src/components/secret/__snapshots__/Details.Empty.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot b/frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot
index 3a5f6d126a..5528b5e0d0 100644
--- a/frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot
+++ b/frontend/src/components/secret/__snapshots__/Details.WithBase.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/storage/__snapshots__/ClaimDetails.Base.stories.storyshot b/frontend/src/components/storage/__snapshots__/ClaimDetails.Base.stories.storyshot
index 630eedd472..c96db2bde8 100644
--- a/frontend/src/components/storage/__snapshots__/ClaimDetails.Base.stories.storyshot
+++ b/frontend/src/components/storage/__snapshots__/ClaimDetails.Base.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/storage/__snapshots__/ClassDetails.Base.stories.storyshot b/frontend/src/components/storage/__snapshots__/ClassDetails.Base.stories.storyshot
index 4618009ca3..fec8816620 100644
--- a/frontend/src/components/storage/__snapshots__/ClassDetails.Base.stories.storyshot
+++ b/frontend/src/components/storage/__snapshots__/ClassDetails.Base.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/storage/__snapshots__/VolumeDetails.Base.stories.storyshot b/frontend/src/components/storage/__snapshots__/VolumeDetails.Base.stories.storyshot
index e7eb994dfc..688f77c75a 100644
--- a/frontend/src/components/storage/__snapshots__/VolumeDetails.Base.stories.storyshot
+++ b/frontend/src/components/storage/__snapshots__/VolumeDetails.Base.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.Default.stories.storyshot b/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.Default.stories.storyshot
index fc283ff814..579d6061dd 100644
--- a/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.Default.stories.storyshot
+++ b/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.Default.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.Error.stories.storyshot b/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.Error.stories.storyshot
index 45e720a92e..5940b375c5 100644
--- a/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.Error.stories.storyshot
+++ b/frontend/src/components/verticalPodAutoscaler/__snapshots__/VPADetails.Error.stories.storyshot
@@ -50,6 +50,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithService.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithService.stories.storyshot
index 28a6311afd..a592ee1a70 100644
--- a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithService.stories.storyshot
+++ b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithService.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithURL.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithURL.stories.storyshot
index 04735caf17..a1b1f65012 100644
--- a/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithURL.stories.storyshot
+++ b/frontend/src/components/webhookconfiguration/__snapshots__/MutatingWebhookConfigDetails.WithURL.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithService.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithService.stories.storyshot
index f43a438321..cf8a8f0db1 100644
--- a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithService.stories.storyshot
+++ b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithService.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithURL.stories.storyshot b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithURL.stories.storyshot
index 6161bc9ec6..a1c142d207 100644
--- a/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithURL.stories.storyshot
+++ b/frontend/src/components/webhookconfiguration/__snapshots__/ValidatingWebhookConfigDetails.WithURL.stories.storyshot
@@ -63,6 +63,11 @@
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
+                <div
+                  class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
+                >
+                  0
+                </div>
                 <div
                   class="MuiGrid-root MuiGrid-item css-13i4rnv-MuiGrid-root"
                 />
diff --git a/frontend/src/i18n/locales/de/translation.json b/frontend/src/i18n/locales/de/translation.json
index 025012a3ce..4d6905daa4 100644
--- a/frontend/src/i18n/locales/de/translation.json
+++ b/frontend/src/i18n/locales/de/translation.json
@@ -218,6 +218,15 @@
   "Are you sure?": "Sind Sie sicher?",
   "This will discard your changes in the editor. Do you want to proceed?": "Dadurch werden Ihre Änderungen im Editor verworfen. Möchten Sie fortfahren?",
   "Undo Changes": "Änderungen rückgängig machen",
+  "Logs are paused. Click the follow button to resume following them.": "Ereignisprotokolle wurden angehalten. Klicken Sie auf die Schaltfläche \"Verfolgen\", um die Protokollanzeige fortzusetzen.",
+  "Select Pod": "",
+  "All Pods": "",
+  "Container": "",
+  "Restarted": "",
+  "Show logs for previous instances of this container.": "Ereignisprotokolle für frühere Instanzen dieses Containers anzeigen.",
+  "You can only select this option for containers that have been restarted.": "Sie können diese Option nur für Container wählen, die neu gestartet wurden.",
+  "Show previous": "Vorherige anzeigen",
+  "Show logs": "",
   "Loading resource data": "Lade Ressourcendaten",
   "Creation": "Erstellung",
   "Labels": "Labels",
@@ -366,11 +375,7 @@
   "None": "",
   "Software": "Software",
   "Redirecting to main page…": "Weiterleiten zur Hauptseite…",
-  "Logs are paused. Click the follow button to resume following them.": "Ereignisprotokolle wurden angehalten. Klicken Sie auf die Schaltfläche \"Verfolgen\", um die Protokollanzeige fortzusetzen.",
   "Lines": "Zeilen",
-  "Show logs for previous instances of this container.": "Ereignisprotokolle für frühere Instanzen dieses Containers anzeigen.",
-  "You can only select this option for containers that have been restarted.": "Sie können diese Option nur für Container wählen, die neu gestartet wurden.",
-  "Show previous": "Vorherige anzeigen",
   "Timestamps": "Zeitstempel anzeigen",
   "Follow": "Verfolgen",
   "Max Unavailable": "Max Nicht verfügbar",
diff --git a/frontend/src/i18n/locales/en/translation.json b/frontend/src/i18n/locales/en/translation.json
index 7874af5189..8c517068dd 100644
--- a/frontend/src/i18n/locales/en/translation.json
+++ b/frontend/src/i18n/locales/en/translation.json
@@ -218,6 +218,15 @@
   "Are you sure?": "Are you sure?",
   "This will discard your changes in the editor. Do you want to proceed?": "This will discard your changes in the editor. Do you want to proceed?",
   "Undo Changes": "Undo Changes",
+  "Logs are paused. Click the follow button to resume following them.": "Logs are paused. Click the follow button to resume following them.",
+  "Select Pod": "Select Pod",
+  "All Pods": "All Pods",
+  "Container": "Container",
+  "Restarted": "Restarted",
+  "Show logs for previous instances of this container.": "Show logs for previous instances of this container.",
+  "You can only select this option for containers that have been restarted.": "You can only select this option for containers that have been restarted.",
+  "Show previous": "Show previous",
+  "Show logs": "Show logs",
   "Loading resource data": "Loading resource data",
   "Creation": "Creation",
   "Labels": "Labels",
@@ -366,11 +375,7 @@
   "None": "None",
   "Software": "Software",
   "Redirecting to main page…": "Redirecting to main page…",
-  "Logs are paused. Click the follow button to resume following them.": "Logs are paused. Click the follow button to resume following them.",
   "Lines": "Lines",
-  "Show logs for previous instances of this container.": "Show logs for previous instances of this container.",
-  "You can only select this option for containers that have been restarted.": "You can only select this option for containers that have been restarted.",
-  "Show previous": "Show previous",
   "Timestamps": "Timestamps",
   "Follow": "Follow",
   "Max Unavailable": "Max Unavailable",
diff --git a/frontend/src/i18n/locales/es/translation.json b/frontend/src/i18n/locales/es/translation.json
index a70637833b..12a472f9d6 100644
--- a/frontend/src/i18n/locales/es/translation.json
+++ b/frontend/src/i18n/locales/es/translation.json
@@ -219,6 +219,15 @@
   "Are you sure?": "¿Está seguro?",
   "This will discard your changes in the editor. Do you want to proceed?": "Esto descartará sus cambios en el editor. ¿Desea avanzar?",
   "Undo Changes": "Deshacer cambios",
+  "Logs are paused. Click the follow button to resume following them.": "Los registros están en pausa. Haga clic en el botón siguiente para continuar a seguirlos.",
+  "Select Pod": "",
+  "All Pods": "",
+  "Container": "",
+  "Restarted": "",
+  "Show logs for previous instances of this container.": "Mostrar registros para instancias anteriores de este contenedor.",
+  "You can only select this option for containers that have been restarted.": "Sólo podrá seleccionar esta opción para los contenedores que se han reiniciado.",
+  "Show previous": "Mostrar anteriores",
+  "Show logs": "",
   "Loading resource data": "Cargando datos del recurso",
   "Creation": "Creación",
   "Labels": "Etiquetas",
@@ -367,11 +376,7 @@
   "None": "",
   "Software": "Software",
   "Redirecting to main page…": "Redireccionando a la página principal…",
-  "Logs are paused. Click the follow button to resume following them.": "Los registros están en pausa. Haga clic en el botón siguiente para continuar a seguirlos.",
   "Lines": "Líneas",
-  "Show logs for previous instances of this container.": "Mostrar registros para instancias anteriores de este contenedor.",
-  "You can only select this option for containers that have been restarted.": "Sólo podrá seleccionar esta opción para los contenedores que se han reiniciado.",
-  "Show previous": "Mostrar anteriores",
   "Timestamps": "Marcas de tiempo",
   "Follow": "Seguir",
   "Max Unavailable": "Máx. Disponible",
diff --git a/frontend/src/i18n/locales/fr/translation.json b/frontend/src/i18n/locales/fr/translation.json
index 61134299e9..04aaa7eb8c 100644
--- a/frontend/src/i18n/locales/fr/translation.json
+++ b/frontend/src/i18n/locales/fr/translation.json
@@ -219,6 +219,15 @@
   "Are you sure?": "Êtes-vous sûr ?",
   "This will discard your changes in the editor. Do you want to proceed?": "Vos modifications seront perdues. Voulez-vous continuer ?",
   "Undo Changes": "Annuler les modifications",
+  "Logs are paused. Click the follow button to resume following them.": "Les journaux sont en pause. Cliquez sur le bouton suivre pour reprendre leur suivi.",
+  "Select Pod": "",
+  "All Pods": "",
+  "Container": "",
+  "Restarted": "",
+  "Show logs for previous instances of this container.": "Afficher les journaux des instances précédentes de ce conteneur.",
+  "You can only select this option for containers that have been restarted.": "Vous ne pouvez sélectionner cette option que pour les conteneurs qui ont été redémarrés.",
+  "Show previous": "Montrer le précédent",
+  "Show logs": "",
   "Loading resource data": "Chargement des données sur les ressources",
   "Creation": "Création",
   "Labels": "Étiquettes",
@@ -367,11 +376,7 @@
   "None": "",
   "Software": "Logiciel",
   "Redirecting to main page…": "Redirection vers la page principale…",
-  "Logs are paused. Click the follow button to resume following them.": "Les journaux sont en pause. Cliquez sur le bouton suivre pour reprendre leur suivi.",
   "Lines": "Lignes",
-  "Show logs for previous instances of this container.": "Afficher les journaux des instances précédentes de ce conteneur.",
-  "You can only select this option for containers that have been restarted.": "Vous ne pouvez sélectionner cette option que pour les conteneurs qui ont été redémarrés.",
-  "Show previous": "Montrer le précédent",
   "Timestamps": "Horodatages",
   "Follow": "Suivez",
   "Max Unavailable": "Max Indisponible",
diff --git a/frontend/src/i18n/locales/pt/translation.json b/frontend/src/i18n/locales/pt/translation.json
index 47caf5a133..16a14c248e 100644
--- a/frontend/src/i18n/locales/pt/translation.json
+++ b/frontend/src/i18n/locales/pt/translation.json
@@ -219,6 +219,15 @@
   "Are you sure?": "Tem a certeza?",
   "This will discard your changes in the editor. Do you want to proceed?": "Irá descartar as suas modificações no editor. Deseja prosseguir?",
   "Undo Changes": "Desfazer modificações",
+  "Logs are paused. Click the follow button to resume following them.": "Os \"logs\" estão pausados. Clique no seguinte botão para voltar a segui-los.",
+  "Select Pod": "",
+  "All Pods": "",
+  "Container": "",
+  "Restarted": "",
+  "Show logs for previous instances of this container.": "Mostrar \"logs\" para instâncias anteriores deste \"container\".",
+  "You can only select this option for containers that have been restarted.": "Só pode escolher esta opção para \"containers\" que tenham sido reiniciados.",
+  "Show previous": "Mostrar anteriores",
+  "Show logs": "",
   "Loading resource data": "A carregar dados do recurso",
   "Creation": "Criação",
   "Labels": "Etiquetas",
@@ -367,11 +376,7 @@
   "None": "",
   "Software": "Software",
   "Redirecting to main page…": "A redireccionar para a página principal…",
-  "Logs are paused. Click the follow button to resume following them.": "Os \"logs\" estão pausados. Clique no seguinte botão para voltar a segui-los.",
   "Lines": "Linhas",
-  "Show logs for previous instances of this container.": "Mostrar \"logs\" para instâncias anteriores deste \"container\".",
-  "You can only select this option for containers that have been restarted.": "Só pode escolher esta opção para \"containers\" que tenham sido reiniciados.",
-  "Show previous": "Mostrar anteriores",
   "Timestamps": "Marcações de tempo",
   "Follow": "Seguir",
   "Max Unavailable": "Máx. Indisponíveis",
diff --git a/frontend/src/plugin/__snapshots__/pluginLib.snapshot b/frontend/src/plugin/__snapshots__/pluginLib.snapshot
index dafdc1d599..632ac62db0 100644
--- a/frontend/src/plugin/__snapshots__/pluginLib.snapshot
+++ b/frontend/src/plugin/__snapshots__/pluginLib.snapshot
@@ -54,6 +54,7 @@
     "Link": [Function],
     "Loader": [Function],
     "LogViewer": [Function],
+    "LogsButton": [Function],
     "MatchExpressions": [Function],
     "MetadataDictGrid": [Function],
     "MetadataDisplay": [Function],
@@ -76,6 +77,7 @@
       "DocsViewer": [Function],
       "EditButton": [Function],
       "EditorDialog": [Function],
+      "LogsButton": [Function],
       "MatchExpressions": [Function],
       "MetadataDictGrid": [Function],
       "MetadataDisplay": [Function],
@@ -202,6 +204,7 @@
   },
   "DetailsViewDefaultHeaderActions": {
     "DELETE": "DELETE",
+    "DEPLOYMENT_LOGS": "DEPLOYMENT_LOGS",
     "EDIT": "EDIT",
     "NODE_DRAIN": "NODE_DRAIN",
     "NODE_TOGGLE_CORDON": "NODE_TOGGLE_CORDON",
@@ -16114,4 +16117,4 @@
   "registerSidebarEntry": [Function],
   "registerSidebarEntryFilter": [Function],
   "runCommand": [Function],
-}
\ No newline at end of file
+}
diff --git a/frontend/src/redux/actionButtonsSlice.ts b/frontend/src/redux/actionButtonsSlice.ts
index cf96080970..124b62a8db 100644
--- a/frontend/src/redux/actionButtonsSlice.ts
+++ b/frontend/src/redux/actionButtonsSlice.ts
@@ -31,6 +31,7 @@ export enum DefaultHeaderAction {
   VIEW = 'VIEW',
   SCALE = 'SCALE',
   POD_LOGS = 'POD_LOGS',
+  DEPLOYMENT_LOGS = 'DEPLOYMENT_LOGS',
   POD_TERMINAL = 'POD_TERMINAL',
   POD_ATTACH = 'POD_ATTACH',
   NODE_TOGGLE_CORDON = 'NODE_TOGGLE_CORDON',