From e00c4f351fab47f300b4d781e976e3cdccba6cc0 Mon Sep 17 00:00:00 2001
From: Ayush Ambastha <ambastha.ayush@gmail.com>
Date: Tue, 28 May 2019 14:03:13 +0530
Subject: [PATCH] Pod volume names

---
 frontend/public/components/utils/index.tsx    |  2 +-
 .../public/components/utils/volume-icon.jsx   | 17 ------------
 .../public/components/utils/volume-type.jsx   | 26 +++++++++++++++++++
 frontend/public/components/volumes-table.tsx  |  6 ++---
 frontend/public/module/k8s/index.ts           |  1 +
 frontend/public/module/k8s/pods.ts            | 18 ++++++++++---
 6 files changed, 46 insertions(+), 24 deletions(-)
 delete mode 100644 frontend/public/components/utils/volume-icon.jsx
 create mode 100644 frontend/public/components/utils/volume-type.jsx

diff --git a/frontend/public/components/utils/index.tsx b/frontend/public/components/utils/index.tsx
index 17ae2ca0b08..55ac0ee9451 100644
--- a/frontend/public/components/utils/index.tsx
+++ b/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';
diff --git a/frontend/public/components/utils/volume-icon.jsx b/frontend/public/components/utils/volume-icon.jsx
deleted file mode 100644
index adb0ff2da57..00000000000
--- a/frontend/public/components/utils/volume-icon.jsx
+++ /dev/null
@@ -1,17 +0,0 @@
-import * as _ from 'lodash-es';
-import * as React from 'react';
-import {VolumeSource} from '../../module/k8s/pods';
-
-export const VolumeIcon = ({kind}) => {
-  const faClasses = _.fromPairs([
-    [VolumeSource.emptyDir.id, 'fa-folder-open-o'],
-    [VolumeSource.hostPath.id, 'fa-files-o'],
-    [VolumeSource.secret.id, 'fa-lock'],
-  ]);
-  const faClass = faClasses[kind];
-
-  return <span className="co-icon-and-text co-m-volume-icon">
-    {faClass && <i className={`fa ${faClass} co-icon-and-text__icon`}></i>}
-    {_.get(VolumeSource[kind], 'label', '')}
-  </span>;
-};
diff --git a/frontend/public/components/utils/volume-type.jsx b/frontend/public/components/utils/volume-type.jsx
new file mode 100644
index 00000000000..b1af80476f7
--- /dev/null
+++ b/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;
+};
diff --git a/frontend/public/components/volumes-table.tsx b/frontend/public/components/volumes-table.tsx
index cd201fc1ad7..41f752c4a5b 100644
--- a/frontend/public/components/volumes-table.tsx
+++ b/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">
diff --git a/frontend/public/module/k8s/index.ts b/frontend/public/module/k8s/index.ts
index 6a3f23be59e..e14f6a99bb5 100644
--- a/frontend/public/module/k8s/index.ts
+++ b/frontend/public/module/k8s/index.ts
@@ -244,6 +244,7 @@ export type PodStatus = {
 
 export type PodTemplate = {
   spec: PodSpec;
+  metadata: ObjectMetadata;
 };
 
 export type PodKind = {
diff --git a/frontend/public/module/k8s/pods.ts b/frontend/public/module/k8s/pods.ts
index f7c2cd7a517..14f22002522 100644
--- a/frontend/public/module/k8s/pods.ts
+++ b/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.