Fully support displaying all supported PodVolume types (#4131)

src/renderer/components/+workloads-pods/details/volumes/variant-helpers.tsx

@@ -0,0 +1,40 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { Link } from "react-router-dom";
+import type { PodVolumeVariants, Pod, SecretReference } from "../../../../../common/k8s-api/endpoints";
+import type { KubeApi } from "../../../../../common/k8s-api/kube-api";
+import type { LocalObjectReference, KubeObject } from "../../../../../common/k8s-api/kube-object";
+import { DrawerItem } from "../../../drawer";
+import { getDetailsUrl } from "../../../kube-detail-params";
+
+export interface PodVolumeVariantSpecificProps<Kind extends keyof PodVolumeVariants> {
+  variant: PodVolumeVariants[Kind];
+  pod: Pod;
+  volumeName: string;
+}
+
+export type VolumeVariantComponent<Kind extends keyof PodVolumeVariants> = React.FunctionComponent<PodVolumeVariantSpecificProps<Kind>>;
+
+export interface LocalRefProps {
+  pod: Pod;
+  title: string;
+  kubeRef: LocalObjectReference | SecretReference | undefined;
+  api: KubeApi<KubeObject>;
+}
+
+export const LocalRef = ({ pod, title, kubeRef: ref, api }: LocalRefProps) => {
+  if (!ref) {
+    return null;
+  }
+
+  return (
+    <DrawerItem name={title}>
+      <Link to={getDetailsUrl(api.getUrl({ namespace: pod.getNs(), ...ref }))}>
+        {ref.name}
+      </Link>
+    </DrawerItem>
+  );
+};

src/renderer/components/+workloads-pods/details/volumes/variant.tsx

@@ -0,0 +1,291 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import type { Pod, PodVolume, PodVolumeKind } from "../../../../../common/k8s-api/endpoints";
+import { DrawerItem } from "../../../drawer";
+import { Icon } from "../../../icon";
+import { AwsElasticBlockStore } from "./variants/aws-elastic-block-store";
+import { AzureDisk } from "./variants/azure-disk";
+import { AzureFile } from "./variants/azure-file";
+import { CephFs } from "./variants/ceph-fs";
+import { Cinder } from "./variants/cinder";
+import { ConfigMap } from "./variants/config-map";
+import { ContainerStorageInterface } from "./variants/container-storage-interface";
+import { DownwardAPI } from "./variants/downward-api";
+import { EmptyDir } from "./variants/empty-dir";
+import { Ephemeral } from "./variants/ephemeral";
+import { FiberChannel } from "./variants/fiber-channel";
+import { FlexVolume } from "./variants/flex-volume";
+import { Flocker } from "./variants/flocker";
+import { GcePersistentDisk } from "./variants/gce-persistent-disk";
+import { GitRepo } from "./variants/git-repo";
+import { GlusterFs } from "./variants/gluster-fs";
+import { HostPath } from "./variants/host-path";
+import { IScsi } from "./variants/i-scsi";
+import { Local } from "./variants/local";
+import { NetworkFs } from "./variants/network-fs";
+import { PersistentVolumeClaim } from "./variants/persistent-volume-claim";
+import { PhotonPersistentDisk } from "./variants/photon-persistent-disk";
+import { PortworxVolume } from "./variants/portworx-volume";
+import { Projected } from "./variants/projected";
+import { Quobyte } from "./variants/quobyte";
+import { RadosBlockDevice } from "./variants/rados-block-device";
+import { ScaleIo } from "./variants/scale-io";
+import { Secret } from "./variants/secret";
+import { StorageOs } from "./variants/storage-os";
+import { VsphereVolume } from "./variants/vsphere-volume";
+
+const deprecatedVolumeTypes = new Set<PodVolumeKind>([
+  "flocker",
+  "gitRepo",
+  "quobyte",
+  "storageos",
+]);
+
+interface VolumeVariantProps {
+  pod: Pod;
+  volume: PodVolume;
+}
+
+interface VolumeVariantRender {
+  kind: PodVolumeKind;
+  element: JSX.Element;
+}
+
+function renderVolumeVariant({ pod, volume }: VolumeVariantProps): VolumeVariantRender | null {
+  if (volume.awsElasticBlockStore) {
+    return {
+      kind: "awsElasticBlockStore",
+      element: <AwsElasticBlockStore variant={volume.awsElasticBlockStore} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.azureDisk) {
+    return {
+      kind: "azureDisk",
+      element: <AzureDisk variant={volume.azureDisk} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.azureFile) {
+    return {
+      kind: "azureFile",
+      element: <AzureFile variant={volume.azureFile} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.cephfs) {
+    return {
+      kind: "cephfs",
+      element: <CephFs variant={volume.cephfs} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.cinder) {
+    return {
+      kind: "cinder",
+      element: <Cinder variant={volume.cinder} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.configMap) {
+    return {
+      kind: "configMap",
+      element: <ConfigMap variant={volume.configMap} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.csi) {
+    return {
+      kind: "csi",
+      element: <ContainerStorageInterface variant={volume.csi} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.downwardAPI) {
+    return {
+      kind: "downwardAPI",
+      element: <DownwardAPI variant={volume.downwardAPI} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.emptyDir) {
+    return {
+      kind: "emptyDir",
+      element: <EmptyDir variant={volume.emptyDir} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.ephemeral) {
+    return {
+      kind: "ephemeral",
+      element: <Ephemeral variant={volume.ephemeral} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.fc) {
+    return {
+      kind: "fc",
+      element: <FiberChannel variant={volume.fc} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.flexVolume) {
+    return {
+      kind: "flexVolume",
+      element: <FlexVolume variant={volume.flexVolume} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.flocker) {
+    return {
+      kind: "flocker",
+      element: <Flocker variant={volume.flocker} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.gcePersistentDisk) {
+    return {
+      kind: "gcePersistentDisk",
+      element: <GcePersistentDisk variant={volume.gcePersistentDisk} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.gitRepo) {
+    return {
+      kind: "gitRepo",
+      element: <GitRepo variant={volume.gitRepo} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.glusterfs) {
+    return {
+      kind: "glusterfs",
+      element: <GlusterFs variant={volume.glusterfs} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.hostPath) {
+    return {
+      kind: "hostPath",
+      element: <HostPath variant={volume.hostPath} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.iscsi) {
+    return {
+      kind: "iscsi",
+      element: <IScsi variant={volume.iscsi} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.local) {
+    return {
+      kind: "local",
+      element: <Local variant={volume.local} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.nfs) {
+    return {
+      kind: "nfs",
+      element: <NetworkFs variant={volume.nfs} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.persistentVolumeClaim) {
+    return {
+      kind: "persistentVolumeClaim",
+      element: <PersistentVolumeClaim variant={volume.persistentVolumeClaim} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.photonPersistentDisk) {
+    return {
+      kind: "photonPersistentDisk",
+      element: <PhotonPersistentDisk variant={volume.photonPersistentDisk} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.portworxVolume) {
+    return {
+      kind: "portworxVolume",
+      element: <PortworxVolume variant={volume.portworxVolume} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.projected) {
+    return {
+      kind: "projected",
+      element: <Projected variant={volume.projected} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.quobyte) {
+    return {
+      kind: "quobyte",
+      element: <Quobyte variant={volume.quobyte} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.rbd) {
+    return {
+      kind: "rbd",
+      element: <RadosBlockDevice variant={volume.rbd} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.scaleIO) {
+    return {
+      kind: "scaleIO",
+      element: <ScaleIo variant={volume.scaleIO} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.secret) {
+    return {
+      kind: "secret",
+      element: <Secret variant={volume.secret} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.storageos) {
+    return {
+      kind: "storageos",
+      element: <StorageOs variant={volume.storageos} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  if (volume.vsphereVolume) {
+    return {
+      kind: "vsphereVolume",
+      element: <VsphereVolume variant={volume.vsphereVolume} pod={pod} volumeName={volume.name} />,
+    };
+  }
+
+  return null;
+}
+
+export function VolumeVariant(props: VolumeVariantProps) {
+  const result = renderVolumeVariant(props);
+
+  if (!result) {
+    return <p>Error! Unknown pod volume kind</p>;
+  }
+
+  const { kind, element } = result;
+  const isDeprecated = deprecatedVolumeTypes.has(kind);
+
+  return (
+    <>
+      <DrawerItem name="Kind">
+        {kind}
+        {isDeprecated && <Icon title="Deprecated" material="warning_amber" />}
+      </DrawerItem>
+      {element}
+    </>
+  );
+}

src/renderer/components/+workloads-pods/details/volumes/variants/aws-elastic-block-store.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const AwsElasticBlockStore: VolumeVariantComponent<"awsElasticBlockStore"> = (
+  ({ variant: { volumeID, fsType = "ext4" }}) => (
+    <>
+      <DrawerItem name="Volume ID">
+        {volumeID}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/azure-disk.tsx

@@ -0,0 +1,32 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const AzureDisk: VolumeVariantComponent<"azureDisk"> = (
+  ({ variant: { diskName, diskURI, kind = "Shared", cachingMode = "None", fsType = "ext4", readonly = false }}) => (
+    <>
+      <DrawerItem name={kind === "Managed" ? "Disk Name" : "VHD blob Name"}>
+        {diskName}
+      </DrawerItem>
+      <DrawerItem name={kind === "Managed" ? "Resource ID" : "Disk URI"}>
+        {diskURI}
+      </DrawerItem>
+      <DrawerItem name="Kind">
+        {kind}
+      </DrawerItem>
+      <DrawerItem name="Caching Mode">
+        {cachingMode}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readonly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/azure-file.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const AzureFile: VolumeVariantComponent<"azureFile"> = (
+  ({ variant: { readOnly = false, secretName, shareName, secretNamespace = "default" }}) => (
+    <>
+      <DrawerItem name="Secret Name">
+        {secretName}
+      </DrawerItem>
+      <DrawerItem name="Share Name">
+        {shareName}
+      </DrawerItem>
+      <DrawerItem name="Namespace of Secret">
+        {secretNamespace}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/ceph-fs.tsx

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
+import { DrawerItem } from "../../../../drawer";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const CephFs: VolumeVariantComponent<"cephfs"> = (
+  ({ pod, variant: { monitors, path = "/", user = "admin", secretFile = "/etc/ceph/user.secret", secretRef, readOnly }}) => (
+    <>
+      <DrawerItem name="Monitors">
+        <ul>
+          {monitors.map(monitor => <li key={monitor}>{monitor}</li>)}
+        </ul>
+      </DrawerItem>
+      <DrawerItem name="Mount Path">
+        {path}
+      </DrawerItem>
+      <DrawerItem name="Username">
+        {user}
+      </DrawerItem>
+      {
+        secretRef
+          ? (
+            <LocalRef
+              pod={pod}
+              title="Secret"
+              kubeRef={secretRef}
+              api={secretsApi}
+            />
+          )
+          : (
+            <DrawerItem name="Secret Filepath">
+              {secretFile}
+            </DrawerItem>
+          )
+      }
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/cinder.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const Cinder: VolumeVariantComponent<"cinder"> = (
+  ({ variant: { volumeID, fsType = "ext4" }}) => (
+    <>
+      <DrawerItem name="Volume ID">
+        {volumeID}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/config-map.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { configMapApi } from "../../../../../../common/k8s-api/endpoints";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const ConfigMap: VolumeVariantComponent<"configMap"> = (
+  ({ pod, variant: { name }}) => (
+    <LocalRef
+      pod={pod}
+      title="Name"
+      kubeRef={{ name }}
+      api={configMapApi}
+    />
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/container-storage-interface.tsx

@@ -0,0 +1,67 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
+import { DrawerItem } from "../../../../drawer";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const ContainerStorageInterface: VolumeVariantComponent<"csi"> = ({
+  pod,
+  variant: {
+    driver,
+    readOnly = false,
+    fsType = "ext4",
+    volumeAttributes = {},
+    nodePublishSecretRef,
+    controllerPublishSecretRef,
+    nodeStageSecretRef,
+    controllerExpandSecretRef,
+  },
+}) => (
+  <>
+    <DrawerItem name="Driver">
+      {driver}
+    </DrawerItem>
+    <DrawerItem name="ReadOnly">
+      {readOnly.toString()}
+    </DrawerItem>
+    <DrawerItem name="Filesystem Type">
+      {fsType}
+    </DrawerItem>
+    <LocalRef
+      pod={pod}
+      title="Controller Publish Secret"
+      kubeRef={controllerPublishSecretRef}
+      api={secretsApi}
+    />
+    <LocalRef
+      pod={pod}
+      title="Controller Expand Secret"
+      kubeRef={controllerExpandSecretRef}
+      api={secretsApi}
+    />
+    <LocalRef
+      pod={pod}
+      title="Node Publish Secret"
+      kubeRef={nodePublishSecretRef}
+      api={secretsApi}
+    />
+    <LocalRef
+      pod={pod}
+      title="Node Stage Secret"
+      kubeRef={nodeStageSecretRef}
+      api={secretsApi}
+    />
+    {
+      Object.entries(volumeAttributes)
+        .map(([key, value]) => (
+          <DrawerItem key={key} name={key}>
+            {value}
+          </DrawerItem>
+        ))
+    }
+  </>
+);

src/renderer/components/+workloads-pods/details/volumes/variants/downward-api.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const DownwardAPI: VolumeVariantComponent<"downwardAPI"> = (
+  ({ variant: { items }}) => (
+    <>
+      <DrawerItem name="Items">
+        <ul>
+          {items.map(item => <li key={item.path}>{item.path}</li>)}
+        </ul>
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/empty-dir.tsx

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const EmptyDir: VolumeVariantComponent<"emptyDir"> = (
+  ({ variant: { medium, sizeLimit }}) => (
+    <>
+      <DrawerItem name="Medium">
+        {medium || "<node's default medium>"}
+      </DrawerItem>
+      <DrawerItem name="Size Limit" hidden={!sizeLimit}>
+        {sizeLimit}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/ephemeral.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+import { dump } from "js-yaml";
+import React from "react";
+import { DrawerItem, DrawerItemLabels } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const Ephemeral: VolumeVariantComponent<"ephemeral"> = (
+  ({ pod, volumeName, variant: { volumeClaimTemplate: { metadata, spec }}}) => (
+    <>
+      <DrawerItem name="PVC Template Name">
+        {pod.getName()}-{volumeName}
+      </DrawerItem>
+      <DrawerItemLabels
+        name="Template Labels"
+        labels={metadata.labels}
+      />
+      <DrawerItemLabels
+        name="Template Annotations"
+        labels={metadata.annotations}
+      />
+      <DrawerItem name="Template PVC Spec">
+        {dump(spec)}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/fiber-channel.tsx

@@ -0,0 +1,29 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const FiberChannel: VolumeVariantComponent<"fc"> = (
+  ({ variant: { targetWWNs, lun, fsType = "ext4", readOnly = false }}) => (
+    <>
+      <DrawerItem name="Target World Wide Names">
+        <ul>
+          {targetWWNs.map(targetWWN => <li key={targetWWN}>{targetWWN}</li>)}
+        </ul>
+      </DrawerItem>
+      <DrawerItem name="Logical Unit Number">
+        {lun.toString()}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/flex-volume.tsx

@@ -0,0 +1,39 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
+import { DrawerItem } from "../../../../drawer";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const FlexVolume: VolumeVariantComponent<"flexVolume"> = (
+  ({ pod, variant: { driver, fsType, secretRef, readOnly = false, options }}) => (
+    <>
+      <DrawerItem name="Driver">
+        {driver}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType || "-- system default --"}
+      </DrawerItem>
+      <LocalRef
+        pod={pod}
+        title="Secret"
+        kubeRef={secretRef}
+        api={secretsApi}
+      />
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+      {
+        ...Object.entries(options)
+          .map(([key, value]) => (
+            <DrawerItem key={key} name={`Option: ${key}`}>
+              {value}
+            </DrawerItem>
+          ))
+      }
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/flocker.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const Flocker: VolumeVariantComponent<"flocker"> = (
+  ({ variant: { datasetName }}) => (
+    <>
+      <DrawerItem name="Dataset Name">
+        {datasetName}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/gce-persistent-disk.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const GcePersistentDisk: VolumeVariantComponent<"gcePersistentDisk"> = (
+  ({ variant: { pdName, fsType = "ext4" }}) => (
+    <>
+      <DrawerItem name="Persistent Disk Name">
+        {pdName}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/git-repo.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const GitRepo: VolumeVariantComponent<"gitRepo"> = (
+  ({ variant: { repository, revision }}) => (
+    <>
+      <DrawerItem name="Repository URL">
+        {repository}
+      </DrawerItem>
+      <DrawerItem name="Commit Hash">
+        {revision}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/gluster-fs.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const GlusterFs: VolumeVariantComponent<"glusterfs"> = (
+  ({ variant: { endpoints, path, readOnly = false }}) => (
+    <>
+      <DrawerItem name="Endpoints object name">
+        {endpoints}
+      </DrawerItem>
+      <DrawerItem name="Glusterfs volume name">
+        {path}
+      </DrawerItem>
+      <DrawerItem name="Readonly Mountpoint">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/host-path.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const HostPath: VolumeVariantComponent<"hostPath"> = (
+  ({ variant: { path, type }}) => (
+    <>
+      <DrawerItem name="Node's Host Filesystem Path">
+        {path}
+      </DrawerItem>
+      <DrawerItem name="Check Behaviour">
+        {type || "-- none --"}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/i-scsi.tsx

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const IScsi: VolumeVariantComponent<"iscsi"> = (
+  ({ variant: { targetPortal, iqn, lun, fsType = "ext4", readOnly = false, chapAuthDiscovery, chapAuthSession, secretRef }}) => (
+    <>
+      <DrawerItem name="Target Address">
+        {targetPortal}
+      </DrawerItem>
+      <DrawerItem name="iSCSI qualified name">
+        {iqn}
+      </DrawerItem>
+      <DrawerItem name="Logical Unit Number">
+        {lun.toString()}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+      {chapAuthDiscovery && (
+        <DrawerItem name="CHAP Discovery Authentication">
+          {chapAuthDiscovery.toString()}
+        </DrawerItem>
+      )}
+      {chapAuthSession && (
+        <DrawerItem name="CHAP Session Authentication">
+          {chapAuthSession.toString()}
+        </DrawerItem>
+      )}
+      { secretRef && (
+        <DrawerItem name="CHAP Secret">
+          {secretRef.name}
+        </DrawerItem>
+      )}
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/local.tsx

@@ -0,0 +1,18 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const Local: VolumeVariantComponent<"local"> = (
+  ({ variant: { path }}) => (
+    <>
+      <DrawerItem name="Path">
+        {path}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/network-fs.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const NetworkFs: VolumeVariantComponent<"nfs"> = (
+  ({ variant: { server, path, readOnly = false }}) => (
+    <>
+      <DrawerItem name="Server">
+        {server}
+      </DrawerItem>
+      <DrawerItem name="Path">
+        {path}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/persistent-volume-claim.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { pvcApi } from "../../../../../../common/k8s-api/endpoints";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const PersistentVolumeClaim: VolumeVariantComponent<"persistentVolumeClaim"> = (
+  ({ pod, variant: { claimName }}) => (
+    <LocalRef
+      pod={pod}
+      title="Name"
+      kubeRef={{ name: claimName }}
+      api={pvcApi}
+    />
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/photon-persistent-disk.tsx

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const PhotonPersistentDisk: VolumeVariantComponent<"photonPersistentDisk"> = (
+  ({ variant: { pdID, fsType = "ext4" }}) => (
+    <>
+      <DrawerItem name="Persistent Disk ID">
+        {pdID}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/portworx-volume.tsx

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const PortworxVolume: VolumeVariantComponent<"portworxVolume"> = (
+  ({ variant: { volumeID, fsType = "ext4", readOnly = false }}) => (
+    <>
+      <DrawerItem name="Volume ID">
+        {volumeID}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/projected.tsx

@@ -0,0 +1,88 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem, DrawerTitle } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const Projected: VolumeVariantComponent<"projected"> = (
+  ({ variant: { sources, defaultMode }}) => (
+    <>
+      <DrawerItem name="Default Mount Mode">
+          0o{defaultMode.toString(8)}
+      </DrawerItem>
+      <DrawerItem name="Sources">
+        {
+          sources.map(({ secret, downwardAPI, configMap, serviceAccountToken }, index) => (
+            <React.Fragment key={index}>
+              {secret && (
+                <>
+                  <DrawerTitle size="sub-title">Secret</DrawerTitle>
+                  <DrawerItem name="Name">
+                    {secret.name}
+                  </DrawerItem>
+                  <DrawerItem name="Items">
+                    <ul>
+                      {secret.items?.map(({ key, path }) => (
+                        <li key={key}>
+                          {key} ⇢ {path}
+                        </li>
+                      ))}
+                    </ul>
+                  </DrawerItem>
+                </>
+              )}
+              {downwardAPI && (
+                <>
+                  <DrawerTitle size="sub-title">Downward API</DrawerTitle>
+                  <DrawerItem name="Items">
+                    <ul>
+                      {downwardAPI.items?.map(({ path }) => (
+                        <li key={path}>
+                          {path}
+                        </li>
+                      ))}
+                    </ul>
+                  </DrawerItem>
+                </>
+              )}
+              {configMap && (
+                <>
+                  <DrawerTitle size="sub-title">Config Map</DrawerTitle>
+                  <DrawerItem name="Name">
+                    {configMap.name}
+                  </DrawerItem>
+                  <DrawerItem name="Items">
+                    <ul>
+                      {configMap.items?.map(({ key, path }) => (
+                        <li key={key}>
+                          {key} ⇢ {path}
+                        </li>
+                      ))}
+                    </ul>
+                  </DrawerItem>
+                </>
+              )}
+              {serviceAccountToken && (
+                <>
+                  <DrawerTitle size="sub-title">Service Account Token</DrawerTitle>
+                  <DrawerItem name="Audience" hidden={!serviceAccountToken.audience}>
+                    {serviceAccountToken.audience}
+                  </DrawerItem>
+                  <DrawerItem name="Expiration">
+                    {String(serviceAccountToken.expirationSeconds || (60*60 /* an hour */))}s
+                  </DrawerItem>
+                  <DrawerItem name="Path">
+                    {serviceAccountToken.path}
+                  </DrawerItem>
+                </>
+              )}
+            </React.Fragment>
+          ))
+        }
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/quobyte.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const Quobyte: VolumeVariantComponent<"quobyte"> = (
+  ({ variant: { registry, volume, readOnly = false, user = "serviceaccount", group, tenant }}) => (
+    <>
+      <DrawerItem name="Registry">
+        {registry}
+      </DrawerItem>
+      <DrawerItem name="Volume">
+        {volume}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+      <DrawerItem name="User">
+        {user}
+      </DrawerItem>
+      <DrawerItem name="Group">
+        {group ?? "-- no group --"}
+      </DrawerItem>
+      <DrawerItem name="Tenant" hidden={!tenant}>
+        {tenant}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/rados-block-device.tsx

@@ -0,0 +1,52 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
+import { DrawerItem } from "../../../../drawer";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const RadosBlockDevice: VolumeVariantComponent<"rbd"> = (
+  ({ pod, variant: { monitors, image, fsType = "ext4", pool = "rbd", user = "admin", keyring = "/etc/ceph/keyright", secretRef, readOnly = false }}) => (
+    <>
+      <DrawerItem name="Ceph Monitors">
+        <ul>
+          {monitors.map(monitor => <li key={monitor}>{monitor}</li>)}
+        </ul>
+      </DrawerItem>
+      <DrawerItem name="Image">
+        {image}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+      <DrawerItem name="Pool">
+        {pool}
+      </DrawerItem>
+      <DrawerItem name="User">
+        {user}
+      </DrawerItem>
+      {
+        secretRef
+          ? (
+            <LocalRef
+              pod={pod}
+              title="Authentication Secret"
+              kubeRef={secretRef}
+              api={secretsApi}
+            />
+          )
+          : (
+            <DrawerItem name="Keyright Path">
+              {keyring}
+            </DrawerItem>
+          )
+      }
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/scale-io.tsx

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
+import { DrawerItem } from "../../../../drawer";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const ScaleIo: VolumeVariantComponent<"scaleIO"> = (
+  ({ pod, variant: { gateway, system, secretRef, sslEnabled = false, protectionDomain, storagePool, storageMode = "ThinProvisioned", volumeName, fsType = "xfs", readOnly = false }}) => (
+    <>
+      <DrawerItem name="Gateway">
+        {gateway}
+      </DrawerItem>
+      <DrawerItem name="System">
+        {system}
+      </DrawerItem>
+      <LocalRef
+        pod={pod}
+        title="Name"
+        kubeRef={secretRef}
+        api={secretsApi}
+      />
+      <DrawerItem name="SSL Enabled">
+        {sslEnabled.toString()}
+      </DrawerItem>
+      <DrawerItem name="Protection Domain Name" hidden={!protectionDomain}>
+        {protectionDomain}
+      </DrawerItem>
+      <DrawerItem name="Storage Pool" hidden={!storagePool}>
+        {storagePool}
+      </DrawerItem>
+      <DrawerItem name="Storage Mode" hidden={!storageMode}>
+        {storageMode}
+      </DrawerItem>
+      <DrawerItem name="Volume Name">
+        {volumeName}
+      </DrawerItem>
+      <DrawerItem name="Filesystem Type">
+        {fsType}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/secret.tsx

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
+import { DrawerItem } from "../../../../drawer";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const Secret: VolumeVariantComponent<"secret"> = (
+  ({ pod, variant: { secretName, items = [], defaultMode = 0o644, optional = false }}) => (
+    <>
+      <LocalRef
+        pod={pod}
+        title="Name"
+        kubeRef={{ name: secretName }}
+        api={secretsApi}
+      />
+      <DrawerItem name="Items" hidden={items.length === 0}>
+        <ul>
+          {items.map(({ key }) => <li key={key}>{key}</li>)}
+        </ul>
+      </DrawerItem>
+      <DrawerItem name="Default File Mode">
+          0o{defaultMode.toString(8)}
+      </DrawerItem>
+      <DrawerItem name="Optional">
+        {optional.toString()}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/storage-os.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { secretsApi } from "../../../../../../common/k8s-api/endpoints";
+import { DrawerItem } from "../../../../drawer";
+import { LocalRef, VolumeVariantComponent } from "../variant-helpers";
+
+export const StorageOs: VolumeVariantComponent<"storageos"> = (
+  ({ pod, variant: { volumeName, volumeNamespace, fsType = "ext4", readOnly = false, secretRef }}) => (
+    <>
+      <DrawerItem name="Volume Name">
+        {volumeName}
+      </DrawerItem>
+      <DrawerItem name="Volume Namespace" hidden={volumeNamespace === "default"}>
+        {
+          volumeNamespace === volumeName
+            ? "- no default behaviour -"
+            : volumeNamespace || pod.getNs()
+        }
+      </DrawerItem>
+      <DrawerItem name="Filesystem type">
+        {fsType}
+      </DrawerItem>
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+      <LocalRef
+        pod={pod}
+        title="Secret"
+        kubeRef={secretRef}
+        api={secretsApi}
+      />
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/variants/vsphere-volume.tsx

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import React from "react";
+import { DrawerItem } from "../../../../drawer";
+import type { VolumeVariantComponent } from "../variant-helpers";
+
+export const VsphereVolume: VolumeVariantComponent<"vsphereVolume"> = (
+  ({ variant: { volumePath, fsType = "ext4", storagePolicyName, storagePolicyID }}) => (
+    <>
+      <DrawerItem name="Virtual Machine Disk Volume">
+        {volumePath}
+      </DrawerItem>
+      <DrawerItem name="Filesystem type">
+        {fsType}
+      </DrawerItem>
+      <DrawerItem name="Storage Policy Based Management Profile Name" hidden={!storagePolicyName}>
+        {storagePolicyName}
+      </DrawerItem>
+      <DrawerItem name="Storage Policy Based Management Profile ID" hidden={!storagePolicyID}>
+        {storagePolicyID}
+      </DrawerItem>
+    </>
+  )
+);

src/renderer/components/+workloads-pods/details/volumes/view.tsx

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import { observer } from "mobx-react";
+import React from "react";
+import type { Pod } from "../../../../../common/k8s-api/endpoints";
+import { DrawerTitle } from "../../../drawer";
+import { Icon } from "../../../icon";
+import { VolumeVariant } from "./variant";
+
+export interface PodVolumesProps {
+  pod: Pod;
+}
+
+export const PodVolumes = observer(({ pod }: PodVolumesProps) => {
+  const volumes = pod.getVolumes() ?? [];
+
+  if (volumes.length === 0) {
+    return null;
+  }
+
+  return (
+    <>
+      <DrawerTitle>Volumes</DrawerTitle>
+      {volumes.map(volume => (
+        <div key={volume.name} className="volume">
+          <div className="title flex gaps">
+            <Icon small material="storage" />
+            <span>{volume.name}</span>
+          </div>
+          <VolumeVariant pod={pod} volume={volume} />
+        </div>
+      ))}
+    </>
+  );
+});