move variants into seperate files

Signed-off-by: Sebastian Malton <sebastian@malton.name>
2025-05-20 05:10:56 +00:00 · 2022-03-11 12:34:20 -05:00 · 2022-03-11 12:34:20 -05:00 · fcccbfbbb9
commit fcccbfbbb9
parent 35418cae12
38 changed files with 1162 additions and 670 deletions
--- a/src/common/k8s-api/endpoints/pods.api.ts
+++ b/src/common/k8s-api/endpoints/pods.api.ts
@ -389,7 +389,7 @@ export interface HostPathSource {
  type?: "" | "DirectoryOrCreate" | "Directory" | "FileOrCreate" | "File" | "Socket" | "CharDevice" | "BlockDevice";
 }

-export interface IscsiSource {
+export interface IScsiSource {
  targetPortal: string;
  iqn: string;
  lun: number;
@ -410,7 +410,7 @@ export interface NetworkFsSource {
  readOnly?: boolean;
 }

-export interface PVCSource {
+export interface PersistentVolumeClaimSource {
  claimName: string;
 }

@ -485,7 +485,7 @@ export interface QuobyteSource {
  tenant?: string;
 }

-export interface RbdSource {
+export interface RadosBlockDeviceSource {
  monitors: string[];
  image: string;
  /**
@ -598,30 +598,30 @@ export interface PodVolumeVariants {
  cephfs: CephfsSource;
  cinder: CinderSource;
  configMap: ConfigMapSource;
+  csi: ContainerStorageInterfaceSource;
  downwardAPI: DownwardApiSource;
-  ephemeral: EphemeralSource;
  emptyDir: EmptyDirSource;
+  ephemeral: EphemeralSource;
  fc: FiberChannelSource;
-  flocker: FlokerSource;
  flexVolume: FlexVolumeSource;
+  flocker: FlokerSource;
  gcePersistentDisk: GcePersistentDiskSource;
  gitRepo: GitRepoSource;
  glusterfs: GlusterFsSource;
  hostPath: HostPathSource;
-  iscsi: IscsiSource;
+  iscsi: IScsiSource;
  local: LocalSource;
  nfs: NetworkFsSource;
-  persistentVolumeClaim: PVCSource;
+  persistentVolumeClaim: PersistentVolumeClaimSource;
  photonPersistentDisk: PhotonPersistentDiskSource;
  portworxVolume: PortworxVolumeSource;
  projected: ProjectedSource;
  quobyte: QuobyteSource;
-  rbd: RbdSource;
+  rbd: RadosBlockDeviceSource;
  scaleIO: ScaleIoSource;
  secret: SecretSource;
  storageos: StorageOsSource;
  vsphereVolume: VsphereVolumeSource;
-  csi: ContainerStorageInterfaceSource;
 }

 /**
--- a/src/renderer/components/+workloads-pods/details/volumes/variant-helpers.tsx
+++ b/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;
+  ref: LocalObjectReference | SecretReference | undefined;
+  api: KubeApi<KubeObject>;
+}
+
+export const LocalRef = ({ pod, title, ref, api }: LocalRefProps) => {
+  if (!ref) {
+    return null;
+  }
+
+  return (
+    <DrawerItem name={title}>
+      <Link to={getDetailsUrl(api.getUrl({ namespace: pod.getNs(), ...ref }))}>
+        {ref.name}
+      </Link>
+    </DrawerItem>
+  );
+};
--- a/src/renderer/components/+workloads-pods/details/volumes/variant.tsx
+++ b/src/renderer/components/+workloads-pods/details/volumes/variant.tsx
@ -0,0 +1,50 @@
+/**
+ * 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 { entries } from "../../../../utils";
+import { DrawerItem } from "../../../drawer";
+import { Icon } from "../../../icon";
+import getVolumeVariantComponent from "./variants";
+
+const deprecatedVolumeTypes = new Set<PodVolumeKind>([
+  "flocker",
+  "gitRepo",
+  "quobyte",
+  "storageos",
+]);
+
+interface VolumeVarientProps {
+  pod: Pod;
+  volume: PodVolume;
+}
+
+export function VolumeVarient({ pod, volume }: VolumeVarientProps) {
+  for (const [kind, variant] of entries(volume)) {
+    if (kind === "name") {
+      continue; // This key is not a kind field
+    }
+
+    if (!variant || typeof variant !== "object") {
+      continue;
+    }
+
+    const isDeprecated = deprecatedVolumeTypes.has(kind);
+    const VolumeVariantComponent = getVolumeVariantComponent(kind);
+
+    return (
+      <>
+        <DrawerItem name="Kind">
+          {kind}
+          {isDeprecated && <Icon title="Deprecated" material="warning_amber" />}
+        </DrawerItem>
+        <VolumeVariantComponent variant={variant} pod={pod} volumeName={volume.name} />
+      </>
+    );
+  }
+
+  return <p>Error! Unknown pod volume kind</p>;
+}
--- a/src/renderer/components/+workloads-pods/details/volumes/variants.tsx
+++ b/src/renderer/components/+workloads-pods/details/volumes/variants.tsx
@ -0,0 +1,80 @@
+/**
+ * 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 { PodVolumeKind, PodVolumeVariants } from "../../../../../common/k8s-api/endpoints";
+import type { VolumeVariantComponent } from "./variant-helpers";
+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 variantComponents = new Map<PodVolumeKind, VolumeVariantComponent<keyof PodVolumeVariants>>([
+  ["awsElasticBlockStore", AwsElasticBlockStore],
+  ["azureDisk", AzureDisk],
+  ["azureFile", AzureFile],
+  ["cephfs", CephFs],
+  ["cinder", Cinder],
+  ["configMap", ConfigMap],
+  ["csi", ContainerStorageInterface],
+  ["downwardAPI", DownwardApi],
+  ["emptyDir", EmptyDir],
+  ["ephemeral", Ephemeral],
+  ["fc", FiberChannel],
+  ["flexVolume", FlexVolume],
+  ["flocker", Flocker],
+  ["gcePersistentDisk", GcePersistentDisk],
+  ["gitRepo", GitRepo],
+  ["glusterfs", GlusterFs],
+  ["hostPath", HostPath],
+  ["iscsi", IScsi],
+  ["local", Local],
+  ["nfs", NetworkFs],
+  ["persistentVolumeClaim", PersistentVolumeClaim],
+  ["photonPersistentDisk", PhotonPersistentDisk],
+  ["portworxVolume", PortworxVolume],
+  ["projected", Projected],
+  ["quobyte", Quobyte],
+  ["rbd", RadosBlockDevice],
+  ["scaleIO", ScaleIo],
+  ["secret", Secret],
+  ["storageos", StorageOs],
+  ["vsphereVolume", VsphereVolume],
+]);
+
+
+export default function getVolumeVariantComponent(kind: PodVolumeKind) {
+  const NotSupported: VolumeVariantComponent<keyof PodVolumeVariants> = (
+    () => <p>Variant {kind} is not yet supported</p>
+  );
+
+  return variantComponents.get(kind) ?? NotSupported;
+}
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/aws-elastic-block-store.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/azure-disk.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/azure-file.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/ceph-fs.tsx
+++ b/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"
+              ref={secretRef}
+              api={secretsApi}
+            />
+          )
+          : (
+            <DrawerItem name="Secret Filepath">
+              {secretFile}
+            </DrawerItem>
+          )
+      }
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/cinder.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/config-map.tsx
+++ b/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"
+      ref={{ name }}
+      api={configMapApi}
+    />
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/container-storage-interface.tsx
+++ b/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"
+      ref={controllerPublishSecretRef}
+      api={secretsApi}
+    />
+    <LocalRef
+      pod={pod}
+      title="Controller Expand Secret"
+      ref={controllerExpandSecretRef}
+      api={secretsApi}
+    />
+    <LocalRef
+      pod={pod}
+      title="Node Publish Secret"
+      ref={nodePublishSecretRef}
+      api={secretsApi}
+    />
+    <LocalRef
+      pod={pod}
+      title="Node Stage Secret"
+      ref={nodeStageSecretRef}
+      api={secretsApi}
+    />
+    {
+      Object.entries(volumeAttributes)
+        .map(([key, value]) => (
+          <DrawerItem key={key} name={key}>
+            {value}
+          </DrawerItem>
+        ))
+    }
+  </>
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/downward-api.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/empty-dir.tsx
+++ b/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" hidden={!medium}>
+        {medium}
+      </DrawerItem>
+      <DrawerItem name="Size Limit" hidden={!sizeLimit}>
+        {sizeLimit}
+      </DrawerItem>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/ephemeral.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/fiber-channel.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/flex-volume.tsx
+++ b/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"
+        ref={secretRef}
+        api={secretsApi}
+      />
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+        {
+          ...Object.entries(options)
+            .map(([key, value]) => (
+              <DrawerItem key={key} name={`Option: ${key}`}>
+                {value}
+              </DrawerItem>
+            ))
+        }
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/flocker.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/gce-persistent-disk.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/git-repo.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/gluster-fs.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/host-path.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/i-scsi.tsx
+++ b/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>
+      )}
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/local.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/network-fs.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/persistent-volume-claim.tsx
+++ b/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"
+      ref={{ name: claimName }}
+      api={pvcApi}
+    />
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/photon-persistent-disk.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/portworx-volume.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/projected.tsx
+++ b/src/renderer/components/+workloads-pods/details/volumes/variants/projected.tsx
@ -0,0 +1,82 @@
+/**
+ * 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>
+                  {secret.items && (
+                    <DrawerItem name="Items">
+                      <ul>
+                        {secret.items.map(({ key }) => <li key={key}>{key}</li>)}
+                      </ul>
+                    </DrawerItem>
+                  )}
+                </>
+              )}
+              {downwardAPI && (
+                <>
+                  <DrawerTitle size="sub-title">Downward API</DrawerTitle>
+                  {downwardAPI.items && (
+                    <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>
+                  {configMap.items && (
+                    <DrawerItem name="Items">
+                      <ul>
+                        {configMap.items.map(({ path }) => <li key={path}>{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" hidden={!serviceAccountToken.expirationSeconds}>
+                    {serviceAccountToken.expirationSeconds}s
+                  </DrawerItem>
+                  <DrawerItem name="Path">
+                    {serviceAccountToken.path}
+                  </DrawerItem>
+                </>
+              )}
+            </React.Fragment>
+          ))
+        }
+      </DrawerItem>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/quobyte.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/rados-block-device.tsx
+++ b/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"
+              ref={secretRef}
+              api={secretsApi}
+            />
+          )
+          : (
+            <DrawerItem name="Keyright Path">
+              {keyring}
+            </DrawerItem>
+          )
+      }
+      <DrawerItem name="Readonly">
+        {readOnly.toString()}
+      </DrawerItem>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/scale-io.tsx
+++ b/src/renderer/components/+workloads-pods/details/volumes/variants/scale-io.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 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"
+        ref={secretRef}
+        api={secretsApi}
+      />
+      <DrawerItem name="SSL Enabled">
+        {sslEnabled.toString()}
+      </DrawerItem>
+      <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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/secret.tsx
+++ b/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"
+        ref={{ 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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/storage-os.tsx
+++ b/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"
+        ref={secretRef}
+        api={secretsApi}
+      />
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/variants/vsphere-volume.tsx
+++ b/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>
+    </>
+  )
+);
--- a/src/renderer/components/+workloads-pods/details/volumes/view.tsx
+++ b/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 { VolumeVarient } 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>
+          <VolumeVarient pod={pod} volume={volume} />
+        </div>
+      ))}
+    </>
+  );
+});
--- a/src/renderer/components/+workloads-pods/pod-details-volumes.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details-volumes.tsx
@ -1,658 +0,0 @@
-/**
- * Copyright (c) OpenLens Authors. All rights reserved.
- * Licensed under MIT License. See LICENSE in root directory for more information.
- */
-
-import jsyaml from "js-yaml";
-import { observer } from "mobx-react";
-import React from "react";
-import { Link } from "react-router-dom";
-import type { RequireAllOrNone } from "type-fest";
-import { configMapApi, Pod, PodVolume, PodVolumeKind, PodVolumeVariants, pvcApi, SecretReference, secretsApi } from "../../../common/k8s-api/endpoints";
-import type { KubeApi } from "../../../common/k8s-api/kube-api";
-import type { KubeObject, LocalObjectReference } from "../../../common/k8s-api/kube-object";
-import { entries } from "../../utils";
-import { DrawerItem, DrawerItemLabels, DrawerTitle } from "../drawer";
-import { Icon } from "../icon";
-import { getDetailsUrl } from "../kube-detail-params";
-
-/**
- * Additional parameters for each volume variant
- */
-export interface VariantOptions {
-  pod: Pod;
-  volumeName: string;
-}
-
-function renderLocalRef(pod: Pod, title: string, ref: LocalObjectReference | SecretReference, typeApi: KubeApi<KubeObject>) {
-  return (
-    <DrawerItem name={title}>
-      <Link to={getDetailsUrl(typeApi.getUrl({ namespace: pod.getNs(), ...ref }))}>
-        {ref.name}
-      </Link>
-    </DrawerItem>
-  );
-}
-
-/**
- *
- */
-type PodVolumeVariantRenderers = {
-  [Key in keyof PodVolumeVariants]: (variant: PodVolumeVariants[Key], opts: VariantOptions) => React.ReactChild;
-};
-
-const volumeRenderers: PodVolumeVariantRenderers = {
-  awsElasticBlockStore: ({ volumeID, fsType = "ext4" }) => (
-    <>
-      <DrawerItem name="Volume ID">
-        {volumeID}
-      </DrawerItem>
-      <DrawerItem name="Filesystem Type">
-        {fsType}
-      </DrawerItem>
-    </>
-  ),
-  azureDisk: ({ 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>
-    </>
-  ),
-  azureFile: ({ 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>
-    </>
-  ),
-  ephemeral: ({ volumeClaimTemplate: { metadata, spec }}, { pod, volumeName }) => (
-    <>
-      <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">
-        {jsyaml.dump(spec)}
-      </DrawerItem>
-    </>
-  ),
-  emptyDir: ({ medium, sizeLimit }) => (
-    <>
-      <DrawerItem name="Medium" hidden={!medium}>
-        {medium}
-      </DrawerItem>
-      <DrawerItem name="Size Limit" hidden={!sizeLimit}>
-        {sizeLimit}
-      </DrawerItem>
-    </>
-  ),
-  cephfs: ({ monitors, path = "/", user = "admin", secretFile = "/etc/ceph/user.secret", secretRef, readOnly }, { pod }) => (
-    <>
-      <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
-          ? renderLocalRef(pod, "Secret", secretRef, secretsApi)
-          : (
-            <DrawerItem name="Secret Filepath">
-              {secretFile}
-            </DrawerItem>
-          )
-      }
-      <DrawerItem name="Readonly">
-        {readOnly.toString()}
-      </DrawerItem>
-    </>
-  ),
-  cinder: ({ volumeID, fsType = "ext4" }) => (
-    <>
-      <DrawerItem name="Volume ID">
-        {volumeID}
-      </DrawerItem>
-      <DrawerItem name="Filesystem Type">
-        {fsType}
-      </DrawerItem>
-    </>
-  ),
-  configMap: ({ name }, { pod }) => renderLocalRef(pod, "Name", { name }, configMapApi),
-  downwardAPI: ({ items }) => (
-    <>
-      <DrawerItem name="Items">
-        <ul>
-          {items.map(item => <li key={item.path}>{item.path}</li>)}
-        </ul>
-      </DrawerItem>
-    </>
-  ),
-  fc: ({ 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>
-    </>
-  ),
-  flexVolume: ({ driver, fsType, secretRef, readOnly = false, options }, { pod }) => (
-    <>
-      <DrawerItem name="Driver">
-        {driver}
-      </DrawerItem>
-      <DrawerItem name="Filesystem Type">
-        {fsType || "-- system default --"}
-      </DrawerItem>
-      {secretRef && renderLocalRef(pod, "Secret", secretRef, secretsApi)}
-      <DrawerItem name="Readonly">
-        {readOnly.toString()}
-      </DrawerItem>
-        {
-          ...Object.entries(options)
-            .map(([key, value]) => (
-              <DrawerItem key={key} name={`Option: ${key}`}>
-                {value}
-              </DrawerItem>
-            ))
-        }
-    </>
-  ),
-  flocker: ({ datasetName }) => (
-    <>
-      <DrawerItem name="Dataset Name">
-        {datasetName}
-      </DrawerItem>
-    </>
-  ),
-  gcePersistentDisk: ({ pdName, fsType = "ext4" }) => (
-    <>
-      <DrawerItem name="Persistent Disk Name">
-        {pdName}
-      </DrawerItem>
-      <DrawerItem name="Filesystem Type">
-        {fsType}
-      </DrawerItem>
-    </>
-  ),
-  gitRepo: ({ repository, revision }) => (
-    <>
-      <DrawerItem name="Repository URL">
-        {repository}
-      </DrawerItem>
-      <DrawerItem name="Commit Hash">
-        {revision}
-      </DrawerItem>
-    </>
-  ),
-  glusterfs: ({ 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>
-    </>
-  ),
-  hostPath: ({ path, type }) => (
-    <>
-      <DrawerItem name="Node's Host Filesystem Path">
-        {path}
-      </DrawerItem>
-      <DrawerItem name="Check Behaviour">
-        {type || "-- none --"}
-      </DrawerItem>
-    </>
-  ),
-  iscsi: ({ 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>
-      )}
-    </>
-  ),
-  local: ({ path }) => (
-    <>
-      <DrawerItem name="Path">
-        {path}
-      </DrawerItem>
-    </>
-  ),
-  nfs: ({ server, path, readOnly = false }) => (
-    <>
-      <DrawerItem name="Server">
-        {server}
-      </DrawerItem>
-      <DrawerItem name="Path">
-        {path}
-      </DrawerItem>
-      <DrawerItem name="Readonly">
-        {readOnly.toString()}
-      </DrawerItem>
-    </>
-  ),
-  persistentVolumeClaim: ({ claimName }, { pod }) => renderLocalRef(pod, "Name", { name: claimName }, pvcApi),
-  photonPersistentDisk: ({ pdID, fsType = "ext4" }) => (
-    <>
-      <DrawerItem name="Persistent Disk ID">
-        {pdID}
-      </DrawerItem>
-      <DrawerItem name="Filesystem Type">
-        {fsType}
-      </DrawerItem>
-    </>
-  ),
-  portworxVolume: ({ volumeID, fsType = "ext4", readOnly = false }) => (
-    <>
-      <DrawerItem name="Volume ID">
-        {volumeID}
-      </DrawerItem>
-      <DrawerItem name="Filesystem Type">
-        {fsType}
-      </DrawerItem>
-      <DrawerItem name="Readonly">
-        {readOnly.toString()}
-      </DrawerItem>
-    </>
-  ),
-  projected: ({ 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>
-                  {secret.items && (
-                    <DrawerItem name="Items">
-                      <ul>
-                        {secret.items.map(({ key }) => <li key={key}>{key}</li>)}
-                      </ul>
-                    </DrawerItem>
-                  )}
-                </>
-              )}
-              {downwardAPI && (
-                <>
-                  <DrawerTitle size="sub-title">Downward API</DrawerTitle>
-                  {downwardAPI.items && (
-                    <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>
-                  {configMap.items && (
-                    <DrawerItem name="Items">
-                      <ul>
-                        {configMap.items.map(({ path }) => <li key={path}>{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" hidden={!serviceAccountToken.expirationSeconds}>
-                    {serviceAccountToken.expirationSeconds}s
-                  </DrawerItem>
-                  <DrawerItem name="Path">
-                    {serviceAccountToken.path}
-                  </DrawerItem>
-                </>
-              )}
-            </React.Fragment>
-          ))
-        }
-      </DrawerItem>
-    </>
-  ),
-  quobyte: ({ 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>
-    </>
-  ),
-  rbd: ({ monitors, image, fsType = "ext4", pool = "rbd", user = "admin", keyring = "/etc/ceph/keyright", secretRef, readOnly = false }, { pod }) => (
-    <>
-      <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
-          ? renderLocalRef(pod, "Authentication Secret", secretRef, secretsApi)
-          : (
-            <DrawerItem name="Keyright Path">
-              {keyring}
-            </DrawerItem>
-          )
-      }
-      <DrawerItem name="Readonly">
-        {readOnly.toString()}
-      </DrawerItem>
-    </>
-  ),
-  scaleIO: ({ gateway, system, secretRef, sslEnabled = false, protectionDomain, storagePool, storageMode = "ThinProvisioned", volumeName, fsType = "xfs", readOnly = false }, { pod }) => (
-    <>
-      <DrawerItem name="Gateway">
-        {gateway}
-      </DrawerItem>
-      <DrawerItem name="System">
-        {system}
-      </DrawerItem>
-      {renderLocalRef(pod, "Name", secretRef, secretsApi)}
-      <DrawerItem name="SSL Enabled">
-        {sslEnabled.toString()}
-      </DrawerItem>
-      <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>
-    </>
-  ),
-  secret: ({ secretName, items = [], defaultMode = 0o644, optional = false }, { pod }) => (
-    <>
-      {renderLocalRef(pod, "Name", { name: secretName }, 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>
-    </>
-  ),
-  storageos: ({ volumeName, volumeNamespace, fsType = "ext4", readOnly = false, secretRef }, { pod }) => (
-    <>
-      <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>
-      {secretRef && renderLocalRef(pod, "Secret", secretRef, secretsApi)}
-    </>
-  ),
-  vsphereVolume: ({ 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>
-    </>
-  ),
-  csi: ({ driver, readOnly = false, fsType = "ext4", volumeAttributes = {}, nodePublishSecretRef, controllerPublishSecretRef, nodeStageSecretRef, controllerExpandSecretRef }, { pod }) => (
-    <>
-      <DrawerItem name="Driver">
-        {driver}
-      </DrawerItem>
-      <DrawerItem name="ReadOnly">
-        {readOnly.toString()}
-      </DrawerItem>
-      <DrawerItem name="Filesystem Type">
-        {fsType}
-      </DrawerItem>
-      {controllerPublishSecretRef && renderLocalRef(pod, "Controller Publish Secret", controllerPublishSecretRef, secretsApi)}
-      {controllerExpandSecretRef && renderLocalRef(pod, "Controller Expand Secret", controllerExpandSecretRef, secretsApi)}
-      {nodePublishSecretRef && renderLocalRef(pod, "Node Publish Secret", nodePublishSecretRef, secretsApi)}
-      {nodeStageSecretRef && renderLocalRef(pod, "Node Stage Secret", nodeStageSecretRef, secretsApi)}
-        {
-          ...Object.entries(volumeAttributes)
-            .map(([key, value]) => (
-              <DrawerItem key={key} name={key}>
-                {value}
-              </DrawerItem>
-            ))
-        }
-    </>
-  ),
-};
-
-export interface PodVolumesProps {
-  pod: Pod;
-}
-
-const deprecatedVolumeTypes = new Set<PodVolumeKind>([
-  "flocker",
-  "gitRepo",
-  "quobyte",
-  "storageos",
-]);
-
-interface VolumeRendererPair {
-  kind: PodVolumeKind;
-  render: () => React.ReactChild;
-}
-
-function getVolumeType(pod: Pod, volume: PodVolume): RequireAllOrNone<VolumeRendererPair, keyof VolumeRendererPair> {
-  for (const [kind, varient] of entries(volume)) {
-    if (kind === "name") {
-      continue; // This key is not a kind field
-    }
-
-    if (!varient || typeof varient !== "object") {
-      continue;
-    }
-
-    return {
-      kind,
-      render: () =>  volumeRenderers[kind](varient as never, { pod, volumeName: volume.name }),
-    };
-  }
-
-  return {};
-}
-
-export const PodVolumes = observer(({ pod }: PodVolumesProps) => {
-  if (!pod) {
-    return null;
-  }
-
-  const renderVolume = (volume: PodVolume) => {
-    const { kind, render } = getVolumeType(pod, volume);
-    const isDeprecated = deprecatedVolumeTypes.has(kind);
-
-    console.log(volume, render);
-
-    return (
-      <div key={volume.name} className="volume">
-        <div className="title flex gaps">
-          <Icon small material="storage" />
-          <span>{volume.name}</span>
-        </div>
-        {
-          kind
-            ? (
-              <>
-                <DrawerItem name="Kind">
-                  {kind}
-                  {isDeprecated && <Icon title="Deprecated" material="warning_amber" />}
-                </DrawerItem>
-                {render?.()}
-              </>
-            )
-            : <p>Error! Unknown pod volume kind</p>
-        }
-      </div>
-    );
-  };
-
-  const volumes = pod.getVolumes();
-
-  if (volumes.length === 0) {
-    return null;
-  }
-
-  return (
-    <>
-      <DrawerTitle>Volumes</DrawerTitle>
-      {volumes.map(renderVolume)}
-    </>
-  );
-});
--- a/src/renderer/components/+workloads-pods/pod-details.tsx
+++ b/src/renderer/components/+workloads-pods/pod-details.tsx
@ -27,7 +27,7 @@ import { getActiveClusterEntity } from "../../api/catalog-entity-registry";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { getDetailsUrl } from "../kube-detail-params";
 import logger from "../../../common/logger";
-import { PodVolumes } from "./pod-details-volumes";
+import { PodVolumes } from "./details/volumes/view";

 export interface PodDetailsProps extends KubeObjectDetailsProps<Pod> {
 }
--- a/src/renderer/components/drawer/drawer-item.tsx
+++ b/src/renderer/components/drawer/drawer-item.tsx
@ -20,12 +20,12 @@ export function DrawerItem({
  title,
  labelsOnly,
  children,
-  hidden,
+  hidden = false,
  className,
  renderBoolean,
  ...elemProps
 }: DrawerItemProps) {
-  if (!hidden) {
+  if (hidden) {
    return null;
  }