Clickable StorageClass (#6410)

Signed-off-by: Piotr Roszatycki <piotr.roszatycki@gmail.com> Signed-off-by: Piotr Roszatycki <piotr.roszatycki@gmail.com>
lensapp · Oct 14, 2022 · 19a18eb · 19a18eb
1 parent 491082f
commit 19a18eb
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 9 deletions.
diff --git a/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx b/src/renderer/components/+storage-volume-claims/volume-claim-details.tsx
@@ -14,7 +14,7 @@ import { Link } from "react-router-dom";
 import { ResourceMetrics } from "../resource-metrics";
 import { VolumeClaimDiskChart } from "./volume-claim-disk-chart";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
-import { PersistentVolumeClaim } from "../../../common/k8s-api/endpoints";
+import { PersistentVolumeClaim, storageClassApi } from "../../../common/k8s-api/endpoints";
 import { ClusterMetricsResourceType } from "../../../common/cluster-types";
 import { KubeObjectMeta } from "../kube-object-meta";
 import logger from "../../../common/logger";
@@ -27,6 +27,7 @@ import type { PodStore } from "../+workloads-pods/store";
 import getActiveClusterEntityInjectable from "../../api/catalog/entity/get-active-cluster-entity.injectable";
 import getDetailsUrlInjectable from "../kube-detail-params/get-details-url.injectable";
 import podStoreInjectable from "../+workloads-pods/store.injectable";
+import { stopPropagation } from "../../../renderer/utils";
 
 export interface PersistentVolumeClaimDetailsProps extends KubeObjectDetailsProps<PersistentVolumeClaim> {
 }
@@ -78,6 +79,10 @@ class NonInjectedPersistentVolumeClaimDetails extends React.Component<Persistent
     const pods = volumeClaim.getPods(podStore.items);
     const isMetricHidden = getActiveClusterEntity()?.isMetricHidden(ClusterMetricsResourceType.VolumeClaim);
 
+    const storageClassDetailsUrl = getDetailsUrl(storageClassApi.getUrl({
+      name: storageClassName,
+    }));
+
     return (
       <div className="PersistentVolumeClaimDetails">
         {!isMetricHidden && (
@@ -89,15 +94,21 @@ class NonInjectedPersistentVolumeClaimDetails extends React.Component<Persistent
             object={volumeClaim}
             metrics={this.metrics}
           >
-            <VolumeClaimDiskChart/>
+            <VolumeClaimDiskChart />
           </ResourceMetrics>
         )}
-        <KubeObjectMeta object={volumeClaim}/>
+        <KubeObjectMeta object={volumeClaim} />
         <DrawerItem name="Access Modes">
           {accessModes?.join(", ")}
         </DrawerItem>
         <DrawerItem name="Storage Class Name">
-          {storageClassName}
+          <Link
+            key="link"
+            to={storageClassDetailsUrl}
+            onClick={stopPropagation}
+          >
+            {storageClassName}
+          </Link>
         </DrawerItem>
         <DrawerItem name="Storage">
           {volumeClaim.getStorage()}
@@ -116,7 +127,7 @@ class NonInjectedPersistentVolumeClaimDetails extends React.Component<Persistent
         <DrawerTitle>Selector</DrawerTitle>
 
         <DrawerItem name="Match Labels" labelsOnly>
-          {volumeClaim.getMatchLabels().map(label => <Badge key={label} label={label}/>)}
+          {volumeClaim.getMatchLabels().map(label => <Badge key={label} label={label} />)}
         </DrawerItem>
 
         <DrawerItem name="Match Expressions">

diff --git a/src/renderer/components/+storage-volumes/volume-details.tsx b/src/renderer/components/+storage-volumes/volume-details.tsx
@@ -11,11 +11,12 @@ import { Link } from "react-router-dom";
 import { observer } from "mobx-react";
 import { DrawerItem, DrawerTitle } from "../drawer";
 import { Badge } from "../badge";
-import { PersistentVolume, persistentVolumeClaimApi } from "../../../common/k8s-api/endpoints";
+import { PersistentVolume, persistentVolumeClaimApi, storageClassApi } from "../../../common/k8s-api/endpoints";
 import type { KubeObjectDetailsProps } from "../kube-object-details";
 import { KubeObjectMeta } from "../kube-object-meta";
 import { getDetailsUrl } from "../kube-detail-params";
 import logger from "../../../common/logger";
+import { stopPropagation } from "../../../renderer/utils";
 
 export interface PersistentVolumeDetailsProps extends KubeObjectDetailsProps<PersistentVolume> {
 }
@@ -37,9 +38,13 @@ export class PersistentVolumeDetails extends React.Component<PersistentVolumeDet
 
     const { accessModes, capacity, persistentVolumeReclaimPolicy, storageClassName, claimRef, flexVolume, mountOptions, nfs } = volume.spec;
 
+    const storageClassDetailsUrl = getDetailsUrl(storageClassApi.getUrl({
+      name: storageClassName,
+    }));
+
     return (
       <div className="PersistentVolumeDetails">
-        <KubeObjectMeta object={volume}/>
+        <KubeObjectMeta object={volume} />
         <DrawerItem name="Capacity">
           {capacity?.storage}
         </DrawerItem>
@@ -57,10 +62,16 @@ export class PersistentVolumeDetails extends React.Component<PersistentVolumeDet
           {persistentVolumeReclaimPolicy}
         </DrawerItem>
         <DrawerItem name="Storage Class Name">
-          {storageClassName}
+          <Link
+            key="link"
+            to={storageClassDetailsUrl}
+            onClick={stopPropagation}
+          >
+            {storageClassName}
+          </Link>
         </DrawerItem>
         <DrawerItem name="Status" labelsOnly>
-          <Badge label={volume.getStatus()}/>
+          <Badge label={volume.getStatus()} />
         </DrawerItem>
 
         {nfs && (