fix(pods): represent pod container statuses correctly [r8s-416] (#910)

app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/actions.tsx

@@ -13,27 +13,30 @@ export function getActions(isServerMetricsEnabled: boolean) {
     enableSorting: false,
     cell: ({ row: { original: container } }) => (
       <div className="flex gap-x-2">
-        {container.status === 'Running' && isServerMetricsEnabled && (
+        {container.status.status.includes('Running') &&
+          isServerMetricsEnabled && (
+            <Link
+              className="flex items-center gap-1"
+              to="kubernetes.applications.application.stats"
+              params={{ pod: container.podName, container: container.name }}
+              data-cy={`application-container-stats-${container.name}`}
+            >
+              <Icon icon={BarChart} />
+              Stats
+            </Link>
+          )}
+        {container.status.hasLogs !== false && (
           <Link
             className="flex items-center gap-1"
-            to="kubernetes.applications.application.stats"
+            to="kubernetes.applications.application.logs"
             params={{ pod: container.podName, container: container.name }}
-            data-cy={`application-container-stats-${container.name}`}
+            data-cy={`application-container-logs-${container.name}`}
           >
-            <Icon icon={BarChart} />
-            Stats
+            <Icon icon={FileText} />
+            Logs
           </Link>
         )}
-        <Link
-          className="flex items-center gap-1"
-          to="kubernetes.applications.application.logs"
-          params={{ pod: container.podName, container: container.name }}
-          data-cy={`application-container-logs-${container.name}`}
-        >
-          <Icon icon={FileText} />
-          Logs
-        </Link>
-        {container.status === 'Running' && (
+        {container.status.status.includes('Running') && (
           <Authorized authorizations="K8sApplicationConsoleRW">
             <Link
               className="flex items-center gap-1"

app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/name.tsx

@@ -1,6 +1,65 @@
+import { Badge } from '@@/Badge';
+import { Tooltip } from '@@/Tip/Tooltip';
+import { ExternalLink } from '@@/ExternalLink';
+
+import { ContainerRowData } from '../types';
+
 import { columnHelper } from './helper';
 
 export const name = columnHelper.accessor('name', {
   header: 'Name',
   id: 'name',
+  cell: ({ row: { original: container } }) => (
+    <div className="flex justify-between gap-2">
+      <span>{container.name}</span>
+      <ContainerTypeBadge container={container} />
+    </div>
+  ),
 });
+
+function ContainerTypeBadge({ container }: { container: ContainerRowData }) {
+  if (container.isSidecar) {
+    return (
+      <Badge type="info">
+        Sidecar
+        <Tooltip
+          message={
+            <>
+              <ExternalLink
+                to="https://kubernetes.io/docs/concepts/workloads/pods/sidecar-containers/"
+                data-cy="sidecar-link"
+              >
+                Sidecar containers
+              </ExternalLink>{' '}
+              run continuously alongside the main application, starting before
+              other containers.
+            </>
+          }
+        />
+      </Badge>
+    );
+  }
+
+  if (container.isInit) {
+    return (
+      <Badge type="info">
+        Init
+        <Tooltip
+          message={
+            <>
+              <ExternalLink
+                to="https://kubernetes.io/docs/concepts/workloads/pods/init-containers/"
+                data-cy="init-link"
+              >
+                Init containers
+              </ExternalLink>{' '}
+              run and complete before the main application containers start.
+            </>
+          }
+        />
+      </Badge>
+    );
+  }
+
+  return null;
+}

app/react/kubernetes/applications/DetailsView/ApplicationContainersDatatable/columns/status.tsx

@@ -1,6 +1,9 @@
 import { CellContext } from '@tanstack/react-table';
 
-import { Badge, BadgeType } from '@@/Badge';
+import { pluralize } from '@/react/common/string-utils';
+
+import { Badge } from '@@/Badge';
+import { Tooltip } from '@@/Tip/Tooltip';
 
 import { ContainerRowData } from '../types';
 
@@ -11,19 +14,24 @@ export const status = columnHelper.accessor('status', {
   cell: StatusCell,
 });
 
-function StatusCell({ getValue }: CellContext<ContainerRowData, string>) {
-  return <Badge type={getContainerStatusType(getValue())}>{getValue()}</Badge>;
-}
+function StatusCell({
+  getValue,
+}: CellContext<ContainerRowData, ContainerRowData['status']>) {
+  const statusData = getValue();
 
-function getContainerStatusType(status: string): BadgeType {
-  switch (status.toLowerCase()) {
-    case 'running':
-      return 'success';
-    case 'waiting':
-      return 'warn';
-    case 'terminated':
-      return 'info';
-    default:
-      return 'danger';
-  }
+  return (
+    <Badge type={statusData.type}>
+      <div className="flex items-center gap-1">
+        <span>
+          {statusData.status}
+          {statusData.restartCount &&
+            ` (Restarted ${statusData.restartCount} ${pluralize(
+              statusData.restartCount,
+              'time'
+            )})`}
+        </span>
+      </div>
+      {statusData.message && <Tooltip message={statusData.message} />}
+    </Badge>
+  );
 }