Workspace Data Vol column popup add

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

Author: Elay Aharoni (EXT-Nokia)

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

@@ -22,6 +22,7 @@ import {
   Button,
   PaginationVariant,
   Pagination,
+  Content,
 } from '@patternfly/react-core';
 import {
   Table,
@@ -33,8 +34,9 @@ import {
   ThProps,
   ActionsColumn,
   IActions,
+  ExpandableRowContent,
 } from '@patternfly/react-table';
-import { FilterIcon } from '@patternfly/react-icons';
+import { FilterIcon, LockedIcon } from '@patternfly/react-icons';
 import { Workspace, WorkspaceState } from '~/shared/types';
 
 export const Workspaces: React.FunctionComponent = () => {
@@ -51,7 +53,12 @@ export const Workspaces: React.FunctionComponent = () => {
           home: '/home',
           data: [
             {
-              pvcName: 'data',
+              pvcName: 'Volume-1',
+              mountPath: '/data',
+              readOnly: true,
+            },
+            {
+              pvcName: 'Volume-2',
               mountPath: '/data',
               readOnly: false,
             },
@@ -128,7 +135,6 @@ export const Workspaces: React.FunctionComponent = () => {
     podConfig: 'Pod Config',
     state: 'State',
     homeVol: 'Home Vol',
-    dataVol: 'Data Vol',
     lastActivity: 'Last Activity',
   };
 
@@ -140,6 +146,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 +439,54 @@ export const Workspaces: React.FunctionComponent = () => {
     setPage(newPage);
   };
 
+  const workspaceDataVolRender = (workspace: Workspace) => {
+    const workspaceDataVol = workspace.podTemplate.volumes.data;
+    console.log(workspaceDataVol);
+    return (
+      <>
+        <Content component="h3">Data Volumes:</Content>
+        {workspaceDataVol.map((data, index) => (
+          <Content key={`data-vol-${index}`} component="blockquote">
+            <div>
+              <div>
+                <Content component="h5">{data.pvcName}</Content>
+              </div>
+              <div>
+                <Content component="small">
+                  mount path: {data.mountPath}
+                  {data.readOnly && (
+                    <Content component="small">
+                      Data is readonly
+                      <LockedIcon style={{ marginLeft: '3px' }} />
+                    </Content>
+                  )}
+                </Content>
+              </div>
+            </div>
+          </Content>
+        ))}
+      </>
+    );
+  };
+
+  const expandedRowRenderer = (workspace: Workspace) => (
+    <Tr>
+      <Td />
+      {Object.keys(columnNames).map((colName) => {
+        switch (colName) {
+          case 'name':
+            return (
+              <Td noPadding colSpan={1}>
+                <ExpandableRowContent>{workspaceDataVolRender(workspace)}</ExpandableRowContent>
+              </Td>
+            );
+          default:
+            return <Td />;
+        }
+      })}
+    </Tr>
+  );
+
   return (
     <PageSection>
       <Title headingLevel="h1">Kubeflow Workspaces</Title>
@@ -429,20 +495,27 @@ 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>
             <Th sort={getSortParams(3)}>{columnNames.podConfig}</Th>
             <Th sort={getSortParams(4)}>{columnNames.state}</Th>
             <Th sort={getSortParams(5)}>{columnNames.homeVol}</Th>
-            <Th sort={getSortParams(6)}>{columnNames.dataVol}</Th>
-            <Th sort={getSortParams(7)}>{columnNames.lastActivity}</Th>
+            <Th sort={getSortParams(6)}>{columnNames.lastActivity}</Th>
             <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>
@@ -453,9 +526,6 @@ 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.lastActivity}>
                 <Timestamp
                   date={new Date(workspace.status.activity.lastActivity)}
@@ -468,8 +538,9 @@ export const Workspaces: React.FunctionComponent = () => {
                 <ActionsColumn items={defaultActions(workspace)} />
               </Td>
             </Tr>
-          ))}
-        </Tbody>
+            {isWorkspaceExpanded(workspace) && expandedRowRenderer(workspace)}
+          </Tbody>
+        ))}
       </Table>
       <Pagination
         itemCount={333}