Added PVC volume type info for volume information on workloads

frontend/public/components/daemon-set.jsx

@@ -120,7 +120,7 @@ const Details = ({obj: daemonset}) => <React.Fragment>
     <ContainerTable containers={daemonset.spec.template.spec.containers} />
   </div>
   <div className="co-m-pane__body">
-    <VolumesTable podTemplate={daemonset.spec.template} heading="Volumes" />
+    <VolumesTable resource={daemonset} heading="Volumes" />
   </div>
 </React.Fragment>;
 

frontend/public/components/deployment-config.tsx

@@ -155,7 +155,7 @@ export const DeploymentConfigsDetails: React.FC<{obj: K8sResourceKind}> = ({obj:
       <ContainerTable containers={dc.spec.template.spec.containers} />
     </div>
     <div className="co-m-pane__body">
-      <VolumesTable podTemplate={dc.spec.template} heading="Volumes" />
+      <VolumesTable resource={dc} heading="Volumes" />
     </div>
     <div className="co-m-pane__body">
       <SectionHeading text="Conditions" />

frontend/public/components/deployment.tsx

@@ -114,7 +114,7 @@ const DeploymentDetails: React.FC<DeploymentDetailsProps> = ({obj: deployment})
       <ContainerTable containers={deployment.spec.template.spec.containers} />
     </div>
     <div className="co-m-pane__body">
-      <VolumesTable podTemplate={deployment.spec.template} heading="Volumes" />
+      <VolumesTable resource={deployment} heading="Volumes" />
     </div>
     <div className="co-m-pane__body">
       <SectionHeading text="Conditions" />

frontend/public/components/modals/index.ts

@@ -63,5 +63,8 @@ export const installPlanPreviewModal = (props) => import('./installplan-preview-
 export const expandPVCModal = (props) => import('./expand-pvc-modal' /* webpackChunkName: "expand-pvc-modal" */)
   .then(m => m.expandPVCModal(props));
 
+export const removeVolumeModal = (props) => import('./remove-volume-modal' /* webpackChunkName: "remove-volume-modal" */)
+  .then(m => m.removeVolumeModal(props));
+
 export const configureMachineAutoscalerModal = (props) => import('./configure-machine-autoscaler-modal' /* webpackChunkName: "configure-machine-autoscaler-modal" */)
   .then(m => m.configureMachineAutoscalerModal(props));

frontend/public/components/modals/remove-volume-modal.tsx

@@ -0,0 +1,86 @@
+import * as _ from 'lodash-es';
+import * as React from 'react';
+
+import { createModalLauncher, ModalTitle, ModalBody, ModalSubmitFooter } from '../factory';
+import { ContainerSpec, getVolumeType, K8sKind, k8sPatch, K8sResourceKind, Volume, VolumeMount } from '../../module/k8s/';
+import { RowVolumeData } from '../volumes-table';
+
+export const RemoveVolumeModal: React.FC<RemoveVolumeModalProps> = (props) => {
+  const [inProgress, setInProgress] = React.useState(false);
+  const [errorMessage, setErrorMessage] = React.useState('');
+
+  const getRemoveVolumePatch = (resource: K8sResourceKind, rowVolumeData: RowVolumeData) => {
+    const containers: ContainerSpec[] = _.get(resource, 'spec.template.spec.containers', []);
+    const patches = [];
+    let allowRemoveVolume = true;
+    containers.forEach((container: ContainerSpec, i: number) => {
+      const mounts: VolumeMount[] = _.get(container, 'volumeMounts', []);
+      mounts.forEach((mount: VolumeMount, j: number) => {
+        if (mount.name !== rowVolumeData.name) {
+          return;
+        }
+        if (mount.mountPath === rowVolumeData.mountPath) {
+          patches.push({op: 'remove', path: `/spec/template/spec/containers/${i}/volumeMounts/${j}`});
+        } else {
+          allowRemoveVolume = false;
+        }
+      });
+    });
+
+    // if the mountCount is greater than zero, then the volume is still being used at a different mount point or in a different container
+    // Either way, we cannot give the cmd to remove it
+    if (allowRemoveVolume) {
+      const volumes: Volume[] = _.get(resource, 'spec.template.spec.volumes', []);
+      const volumeIndex = volumes.findIndex((v: Volume) => v.name === rowVolumeData.volumeDetail.name);
+      patches.push({op: 'remove', path: `/spec/template/spec/volumes/${volumeIndex}`});
+    }
+    return patches;
+  };
+
+  const submit = (event: React.FormEvent<EventTarget>) => {
+    event.preventDefault();
+    setErrorMessage('');
+    setInProgress(true);
+    const { kind, resource, volume } = props;
+    k8sPatch(kind, resource, getRemoveVolumePatch(resource, volume)).then(() => {
+      setInProgress(false);
+      props.close();
+    }).catch(({message: errMessage}) => {
+      setErrorMessage(errMessage);
+      setInProgress(false);
+    });
+  };
+
+  const {kind, resource, volume} = props;
+  const type: string = _.get(getVolumeType(volume.volumeDetail), 'id', '');
+  return <form onSubmit={submit} className="modal-content">
+    <ModalTitle>Remove Volume</ModalTitle>
+    <ModalBody className="modal-body">
+      <div className="co-delete-modal">
+        <span aria-hidden="true" className="co-delete-modal__icon pficon pficon-warning-triangle-o" />
+        <div>
+          <p className="lead">Remove volume <span className="co-break-word">{volume.volumeDetail.name}</span>?</p>
+          <div>Are you sure you want to remove volume <strong className="co-break-word">{volume.volumeDetail.name}</strong>
+            <span> from <strong>{ kind.label }</strong>: <strong>{ resource.metadata.name }</strong>?</span>
+          </div>
+          {type && <div>
+            <label className="control-label">
+              Note: This will not remove the underlying { type }.
+            </label>
+          </div>}
+        </div>
+      </div>
+    </ModalBody>
+    <ModalSubmitFooter errorMessage={errorMessage} inProgress={inProgress} submitButtonClass="btn-danger" submitText="Remove Volume" cancel={props.cancel} />
+  </form>;
+};
+
+export const removeVolumeModal = createModalLauncher(RemoveVolumeModal);
+
+export type RemoveVolumeModalProps = {
+  cancel: (e: Event) => void;
+  close: () => void;
+  volume: RowVolumeData;
+  kind: K8sKind;
+  resource: K8sResourceKind;
+};

frontend/public/components/pod.tsx

@@ -276,7 +276,7 @@ const Details: React.FC<PodDetailsProps> = ({obj: pod}) => {
       <PodContainerTable key="containerTable" heading="Containers" containers={pod.spec.containers} pod={pod} />
     </div>
     <div className="co-m-pane__body">
-      <VolumesTable podTemplate={pod} heading="Volumes" />
+      <VolumesTable resource={pod} heading="Volumes" />
     </div>
   </React.Fragment>;
 };

frontend/public/components/replicaset.jsx

@@ -50,7 +50,7 @@ const Details = ({obj: replicaSet}) => {
       <ContainerTable containers={replicaSet.spec.template.spec.containers} />
     </div>
     <div className="co-m-pane__body">
-      <VolumesTable podTemplate={replicaSet.spec.template} heading="Volumes" />
+      <VolumesTable resource={replicaSet} heading="Volumes" />
     </div>
   </React.Fragment>;
 };

frontend/public/components/replication-controller.jsx

@@ -44,7 +44,7 @@ const Details = ({obj: replicationController}) => {
       <ContainerTable containers={replicationController.spec.template.spec.containers} />
     </div>
     <div className="co-m-pane__body">
-      <VolumesTable podTemplate={replicationController.spec.template} heading="Volumes" />
+      <VolumesTable resource={replicationController} heading="Volumes" />
     </div>
   </React.Fragment>;
 };

frontend/public/components/stateful-set.jsx

@@ -50,7 +50,7 @@ const Details = ({obj: ss}) => <React.Fragment>
     <ContainerTable containers={ss.spec.template.spec.containers} />
   </div>
   <div className="co-m-pane__body">
-    <VolumesTable podTemplate={ss.spec.template} heading="Volumes" />
+    <VolumesTable resource={ss} heading="Volumes" />
   </div>
 </React.Fragment>;