Workspace Data Vol column popup add

Signed-off-by: Elay Aharoni (EXT-Nokia) <elay.aharoni.ext@nokia.com>
kubeflow · Dec 12, 2024 · 61b14b3 · 61b14b3
1 parent 346a74e
commit 61b14b3
Showing 1 changed file with 36 additions and 4 deletions.
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
@@ -22,6 +22,7 @@ import {
   Button,
   PaginationVariant,
   Pagination,
+  Popover,
 } from '@patternfly/react-core';
 import {
   Table,
@@ -34,7 +35,7 @@ import {
   ActionsColumn,
   IActions,
 } from '@patternfly/react-table';
-import { FilterIcon } from '@patternfly/react-icons';
+import { FilterIcon, DatabaseIcon, OutlinedQuestionCircleIcon } from '@patternfly/react-icons';
 import { Workspace, WorkspaceState } from '~/shared/types';
 
 export const Workspaces: React.FunctionComponent = () => {
@@ -421,6 +422,39 @@ export const Workspaces: React.FunctionComponent = () => {
     setPage(newPage);
   };
 
+  const workspaceDataVolRender = (workspace: Workspace) => {
+    const workspaceDataVol = workspace.podTemplate.volumes.data[0];
+    return (
+      <div>
+        {workspace.podTemplate.volumes.data[0].pvcName || ''}
+        <Popover
+          triggerAction="hover"
+          aria-label="Hoverable popover"
+          headerContent={<b>Workspace Data Vol</b>}
+          headerIcon={<DatabaseIcon />}
+          bodyContent={
+            <div>
+              <div>
+                <b>pvc name: </b>
+                {workspaceDataVol.pvcName}
+              </div>
+              <div>
+                <b>mount path: </b>
+                {workspaceDataVol.mountPath}
+              </div>
+              <div>
+                <b>readonly: </b>
+                {workspaceDataVol.readOnly.toString()}
+              </div>
+            </div>
+          }
+        >
+          <OutlinedQuestionCircleIcon style={{ marginLeft: '3px' }} />
+        </Popover>
+      </div>
+    );
+  };
+
   return (
     <PageSection>
       <Title headingLevel="h1">Kubeflow Workspaces</Title>
@@ -453,9 +487,7 @@ export const Workspaces: React.FunctionComponent = () => {
                 </Label>
               </Td>
               <Td dataLabel={columnNames.homeVol}>{workspace.podTemplate.volumes.home}</Td>
-              <Td dataLabel={columnNames.dataVol}>
-                {workspace.podTemplate.volumes.data[0].pvcName || ''}
-              </Td>
+              <Td dataLabel={columnNames.dataVol}>{workspaceDataVolRender(workspace)}</Td>
               <Td dataLabel={columnNames.lastActivity}>
                 <Timestamp
                   date={new Date(workspace.status.activity.lastActivity)}