Workspace Data Vol column popup add

Signed-off-by: Elay Aharoni (EXT-Nokia) <[email protected]>

workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx

@@ -55,6 +55,11 @@ export const Workspaces: React.FunctionComponent = () => {
               mountPath: '/data',
               readOnly: false,
             },
+            {
+              pvcName: 'data',
+              mountPath: '/data',
+              readOnly: false,
+            },
           ],
         },
       },
@@ -140,6 +145,18 @@ export const Workspaces: React.FunctionComponent = () => {
   const attributeContainerRef = React.useRef<HTMLDivElement | null>(null);
 
   const [searchValue, setSearchValue] = React.useState('');
+  const [expandedWorkspacesNames, setExpandedWorkspacesNames] = React.useState<string[]>([]);
+
+  const setWorkspaceExpanded = (workspace: Workspace, isExpanding = true) =>
+    setExpandedWorkspacesNames((prevExpanded) => {
+      const newExpandedWorkspacesNames = prevExpanded.filter((wsName) => wsName !== workspace.name);
+      return isExpanding
+        ? [...newExpandedWorkspacesNames, workspace.name]
+        : newExpandedWorkspacesNames;
+    });
+
+  const isWorkspaceExpanded = (workspace: Workspace) =>
+    expandedWorkspacesNames.includes(workspace.name);
 
   const searchInput = (
     <SearchInput
@@ -421,6 +438,39 @@ export const Workspaces: React.FunctionComponent = () => {
     setPage(newPage);
   };
 
+  const workspaceDataVolRender = (workspace: Workspace) => {
+    const workspaceDataVol = workspace.podTemplate.volumes.data;
+    return workspaceDataVol.map((data, index) => (
+      <div key={`data-vol-${index}`} style={{ borderBottom: '1px solid #ccc' }}>
+        <div>
+          <b>pvc name: </b>
+          {data.pvcName}
+        </div>
+        <div>
+          <b>mount path: </b>
+          {data.mountPath}
+        </div>
+        <div>
+          <b>readonly: </b>
+          {data.readOnly.toString()}
+        </div>
+      </div>
+    ));
+  };
+
+  const expandedRowRenderer = (workspace: Workspace) => (
+    <Tr>
+      {Object.keys(columnNames).map((colName) => {
+        switch (colName) {
+          case 'dataVol':
+            return <Td>{workspaceDataVolRender(workspace)}</Td>;
+          default:
+            return <Td />;
+        }
+      })}
+    </Tr>
+  );
+
   return (
     <PageSection>
       <Title headingLevel="h1">Kubeflow Workspaces</Title>
@@ -429,6 +479,7 @@ export const Workspaces: React.FunctionComponent = () => {
       <Table aria-label="Sortable table" ouiaId="SortableTable">
         <Thead>
           <Tr>
+            <Th />
             <Th sort={getSortParams(0)}>{columnNames.name}</Th>
             <Th sort={getSortParams(1)}>{columnNames.kind}</Th>
             <Th sort={getSortParams(2)}>{columnNames.image}</Th>
@@ -440,9 +491,16 @@ export const Workspaces: React.FunctionComponent = () => {
             <Th screenReaderText="Primary action" />
           </Tr>
         </Thead>
-        <Tbody>
-          {sortedWorkspaces.map((workspace, rowIndex) => (
-            <Tr key={rowIndex}>
+        {sortedWorkspaces.map((workspace, rowIndex) => (
+          <Tbody key={rowIndex} isExpanded={isWorkspaceExpanded(workspace)}>
+            <Tr>
+              <Td
+                expand={{
+                  rowIndex,
+                  isExpanded: isWorkspaceExpanded(workspace),
+                  onToggle: () => setWorkspaceExpanded(workspace, !isWorkspaceExpanded(workspace)),
+                }}
+              />
               <Td dataLabel={columnNames.name}>{workspace.name}</Td>
               <Td dataLabel={columnNames.kind}>{workspace.kind}</Td>
               <Td dataLabel={columnNames.image}>{workspace.options.imageConfig}</Td>
@@ -454,7 +512,7 @@ export const Workspaces: React.FunctionComponent = () => {
               </Td>
               <Td dataLabel={columnNames.homeVol}>{workspace.podTemplate.volumes.home}</Td>
               <Td dataLabel={columnNames.dataVol}>
-                {workspace.podTemplate.volumes.data[0].pvcName || ''}
+                {workspace.podTemplate.volumes.data[0].pvcName}
               </Td>
               <Td dataLabel={columnNames.lastActivity}>
                 <Timestamp
@@ -468,8 +526,9 @@ export const Workspaces: React.FunctionComponent = () => {
                 <ActionsColumn items={defaultActions(workspace)} />
               </Td>
             </Tr>
-          ))}
-        </Tbody>
+            {isWorkspaceExpanded(workspace) && expandedRowRenderer(workspace)}
+          </Tbody>
+        ))}
       </Table>
       <Pagination
         itemCount={333}