Workspace Data Vol column popup add

Signed-off-by: Elay Aharoni (EXT-Nokia) <[email protected]>
kubeflow · Jan 9, 2025 · 7f3288c · 7f3288c
1 parent 57fc8b1
commit 7f3288c
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 8 deletions.
diff --git a/workspaces/frontend/src/app/pages/Workspaces/ExpandedDataVol.tsx b/workspaces/frontend/src/app/pages/Workspaces/ExpandedDataVol.tsx
@@ -0,0 +1,37 @@
+import { Content } from '@patternfly/react-core';
+import { LockedIcon } from '@patternfly/react-icons';
+import * as React from 'react';
+import { Workspace } from '~/shared/types';
+
+interface ExpandedDataVolProps {
+  workspace: Workspace;
+}
+
+export const ExpandedDataVol: React.FC<ExpandedDataVolProps> = ({ workspace }) => {
+  const workspaceDataVol = workspace.podTemplate.volumes.data;
+  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>
+      ))}
+    </>
+  );
+};
diff --git a/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx b/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { ExpandableRowContent, Td, Tr } from '@patternfly/react-table';
+import { Workspace, WorkspacesColumnNames } from '~/shared/types';
+import { ExpandedDataVol } from '~/app/pages/Workspaces/ExpandedDataVol';
+
+interface ExpandedWorkspaceRowProps {
+  workspace: Workspace;
+  columnNames: WorkspacesColumnNames;
+}
+
+export const ExpandedWorkspaceRow: React.FC<ExpandedWorkspaceRowProps> = ({
+  workspace,
+  columnNames,
+}) => {
+  const renderExpandedData = () =>
+    Object.keys(columnNames).map((colName) => {
+      switch (colName) {
+        case 'name':
+          return (
+            <Td noPadding colSpan={1}>
+              <ExpandableRowContent>
+                <ExpandedDataVol workspace={workspace} />
+              </ExpandableRowContent>
+            </Td>
+          );
+        default:
+          return <Td />;
+      }
+    });
+
+  return (
+    <Tr>
+      <Td />
+      {renderExpandedData()}
+    </Tr>
+  );
+};
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
@@ -35,7 +35,9 @@ import {
   IActions,
 } from '@patternfly/react-table';
 import { FilterIcon } from '@patternfly/react-icons';
-import { Workspace, WorkspaceState } from 'shared/types';
+import { Workspace, WorkspaceState } from '~/shared/types';
+
+import { ExpandedWorkspaceRow } from '~/app/pages/Workspaces/ExpandedWorkspaceRow';
 import { formatRam } from 'shared/utilities/WorkspaceResources';
 
 export const Workspaces: React.FunctionComponent = () => {
@@ -54,7 +56,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,
             },
@@ -95,7 +102,7 @@ export const Workspaces: React.FunctionComponent = () => {
           home: '/home',
           data: [
             {
-              pvcName: 'data',
+              pvcName: 'PVC-1',
               mountPath: '/data',
               readOnly: false,
             },
@@ -147,6 +154,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
@@ -438,6 +457,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>
@@ -452,12 +472,20 @@ export const Workspaces: React.FunctionComponent = () => {
               {columnNames.ram}
             </Th>
             <Th sort={getSortParams(9)}>{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>
@@ -485,8 +513,11 @@ export const Workspaces: React.FunctionComponent = () => {
                 <ActionsColumn items={defaultActions(workspace)} />
               </Td>
             </Tr>
-          ))}
-        </Tbody>
+            {isWorkspaceExpanded(workspace) && (
+              <ExpandedWorkspaceRow workspace={workspace} columnNames={columnNames} />
+            )}
+          </Tbody>
+        ))}
       </Table>
       <Pagination
         itemCount={333}

diff --git a/workspaces/frontend/src/shared/types.ts b/workspaces/frontend/src/shared/types.ts
@@ -70,3 +70,16 @@ export interface Workspace {
   };
   status: WorkspaceStatus;
 }
+
+export type WorkspacesColumnNames = {
+  name: string;
+  kind: string;
+  image: string;
+  podConfig: string;
+  state: string;
+  homeVol: string;
+  dataVol: string;
+  cpu: string;
+  ram: string;
+  lastActivity: string;
+};