Show 'Type' for PVCs in the Mounted Volumes list

frontend/public/components/utils/index.tsx

@@ -8,7 +8,7 @@ export * from './log-window';
 export * from './resource-icon';
 export * from './resource-link';
 export * from './resource-log';
-export * from './volume-icon';
+export * from './volume-type';
 export * from './timestamp';
 export * from './horizontal-nav';
 export * from './details-page';

frontend/public/components/utils/volume-type.jsx

@@ -0,0 +1,26 @@
+import * as _ from 'lodash-es';
+import * as React from 'react';
+import { VolumeSource } from '../../module/k8s/pods';
+import { ResourceLink } from './resource-link';
+
+export const VolumeType = ({kind, name, namespace}) => {
+  const faClasses = _.fromPairs([
+    [VolumeSource.emptyDir.id, 'fa-folder-open-o'],
+    [VolumeSource.hostPath.id, 'fa-files-o'],
+  ]);
+  const faClass = faClasses[kind];
+  const k8sKind = _.get(VolumeSource[kind], 'link');
+
+  if (faClass) {
+    return <span className="co-icon-and-text co-m-volume-icon">
+      {faClass && <i className={`fa ${faClass} co-icon-and-text__icon`} aria-hidden="true" />}
+      {_.get(VolumeSource[kind], 'label')}
+    </span>;
+  }
+
+  if (name) {
+    return <ResourceLink kind={k8sKind} name={name} namespace={namespace} />;
+  }
+
+  return null;
+};

frontend/public/components/volumes-table.tsx

@@ -15,7 +15,7 @@ import {
   getVolumeLocation,
 } from '../module/k8s/pods';
 import {
-  VolumeIcon,
+  VolumeType,
   ResourceIcon,
   EmptyBox,
   SectionHeading,
@@ -56,6 +56,7 @@ const VolumeRow: React.FC<VolumeRowProps> = ({value, pod}) => {
   const kind = _.get(getVolumeType(value.volume), 'id', '');
   const loc = getVolumeLocation(value.volume);
   const name = value.name;
+  const namespace = pod.metadata.namespace;
   const permission = value.readOnly ? 'Read-only' : 'Read/Write';
 
   return <div>
@@ -67,8 +68,7 @@ const VolumeRow: React.FC<VolumeRowProps> = ({value, pod}) => {
           {_.get(m, 'subPath', '-')}
         </div>
         <div className="col-lg-2 col-md-2 hidden-sm hidden-xs">
-          <VolumeIcon kind={kind} />
-          <span className="co-break-word">{loc && ` (${loc})`}</span>
+          <VolumeType kind={kind} name={loc} namespace={namespace} />
         </div>
         <div className="col-lg-2 col-md-2 hidden-sm hidden-xs">{permission}</div>
         <div className="col-lg-2 hidden-md hidden-sm hidden-xs">

frontend/public/module/k8s/index.ts

@@ -244,6 +244,7 @@ export type PodStatus = {
 
 export type PodTemplate = {
   spec: PodSpec;
+  metadata: ObjectMetadata;
 };
 
 export type PodKind = {

frontend/public/module/k8s/pods.ts

@@ -51,6 +51,7 @@ export const VolumeSource = {
   },
   secret: {
     id: 'secret',
+    link: 'Secret',
     label: 'Secret',
     description: 'Secret to populate volume.',
   },
@@ -76,6 +77,7 @@ export const VolumeSource = {
   },
   configMap: {
     id: 'configMap',
+    link: 'ConfigMap',
     label: 'ConfigMap',
     description: 'ConfigMap to be consumed in volume.',
   },
@@ -84,6 +86,12 @@ export const VolumeSource = {
     label: 'Projected',
     description: 'A projected volume maps several existing volume sources into the same directory.',
   },
+  persistentVolumeClaim: {
+    id: 'persistentVolumeClaim',
+    link: 'PersistentVolumeClaim',
+    label: 'Persistent Volume Claim',
+    description: 'A Persistent Volume Claim is a request for a Persistent Volume',
+  },
 };
 
 export const getVolumeType = (volume: Volume) => {
@@ -101,12 +109,18 @@ const genericFormatter = volInfo => {
     if (key === 'readOnly') {
       return '';
     }
+    if (key === 'defaultMode') {
+      return '';
+    }
+    if (key === 'optional') {
+      return '';
+    }
     return volInfo[key];
   });
   if (keys.indexOf('readOnly') !== -1) {
     parts.push(volInfo.readOnly ? 'ro' : 'rw');
   }
-  return parts.join(' ') || null;
+  return parts.join(' ').trim() || null;
 };
 
 export const getVolumeLocation = (volume: Volume) => {
@@ -121,9 +135,7 @@ export const getVolumeLocation = (volume: Volume) => {
     // Override any special formatting cases.
     case VolumeSource.gitRepo.id:
       return `${info.repository}:${info.revision}`;
-    case VolumeSource.configMap.id:
     case VolumeSource.emptyDir.id:
-    case VolumeSource.secret.id:
     case VolumeSource.projected.id:
       return null;
     // Defaults to space separated sorted keys.