Workspace Data Vol column popup add

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

Hide file tree

Showing 4 changed files with 163 additions and 8 deletions.
diff --git a/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx b/workspaces/frontend/src/app/pages/Workspaces/DataVolumesList.tsx
@@ -0,0 +1,74 @@
+import {
+  ClipboardCopy,
+  ClipboardCopyVariant,
+  Content,
+  Flex,
+  FlexItem,
+  List,
+  ListItem,
+  Stack,
+  StackItem,
+  Tooltip,
+} from '@patternfly/react-core';
+import { DatabaseIcon, LockedIcon } from '@patternfly/react-icons';
+import * as React from 'react';
+import { Workspace } from '~/shared/types';
+
+interface ExpandedDataVolProps {
+  workspace: Workspace;
+}
+
+export const DataVolumesList: React.FC<ExpandedDataVolProps> = ({ workspace }) => {
+  const workspaceDataVol = workspace.podTemplate.volumes.data;
+
+  const singleDataVolRenderer = (data: {
+    pvcName: string;
+    mountPath: string;
+    readOnly: boolean;
+  }) => (
+    <Flex
+      gap={{ default: 'gapSm' }}
+      alignItems={{ default: 'alignItemsFlexStart' }}
+      flexWrap={{ default: 'nowrap' }}
+    >
+      <FlexItem>
+        <DatabaseIcon />
+      </FlexItem>
+      <FlexItem>
+        <Content>
+          {data.pvcName}
+          {data.readOnly && (
+            <Tooltip content="Data is readonly">
+              <LockedIcon style={{ marginLeft: '5px' }} />
+            </Tooltip>
+          )}
+        </Content>
+        <Stack>
+          <StackItem>
+            <Content component="small">
+              Mount path:{' '}
+              <ClipboardCopy variant={ClipboardCopyVariant.inlineCompact}>
+                {data.mountPath}
+              </ClipboardCopy>
+            </Content>
+          </StackItem>
+        </Stack>
+      </FlexItem>
+    </Flex>
+  );
+
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <strong data-testid="notebook-storage-bar-title">Cluster storage</strong>
+      </StackItem>
+      <StackItem>
+        <List isPlain>
+          {workspaceDataVol.map((data, index) => (
+            <ListItem key={`data-vol-${index}`}>{singleDataVolRenderer(data)}</ListItem>
+          ))}
+        </List>
+      </StackItem>
+    </Stack>
+  );
+};
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 { DataVolumesList } from '~/app/pages/Workspaces/DataVolumesList';
+
+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>
+                <DataVolumesList 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;
+};