feat(ws): Add workspace endpoints to the expanded workspace row

Signed-off-by: Yael <[email protected]>
kubeflow · Jan 14, 2025 · eea81bb · eea81bb
1 parent d84621a
commit eea81bb
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 0 deletions.
diff --git a/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx b/workspaces/frontend/src/app/pages/Workspaces/ExpandedWorkspaceRow.tsx
@@ -2,6 +2,8 @@ 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';
+import { WorkspaceEndpoints } from '~/app/pages/Workspaces/WorkspaceEndpoints';
+
 
 interface ExpandedWorkspaceRowProps {
   workspace: Workspace;
@@ -23,6 +25,14 @@ export const ExpandedWorkspaceRow: React.FC<ExpandedWorkspaceRowProps> = ({
               </ExpandableRowContent>
             </Td>
           );
+        case 'kind':
+            return (
+            <Td noPadding colSpan={1}>
+                <ExpandableRowContent>
+                    <WorkspaceEndpoints endpoints={workspace.endpoints}/>
+                </ExpandableRowContent>
+            </Td>
+            );
         default:
           return <Td />;
       }

diff --git a/workspaces/frontend/src/app/pages/Workspaces/WorkspaceEndpoints.tsx b/workspaces/frontend/src/app/pages/Workspaces/WorkspaceEndpoints.tsx
@@ -0,0 +1,33 @@
+import * as React from 'react';
+import {
+  List,
+  ListItem,
+  Stack,
+  StackItem,
+  Content
+} from '@patternfly/react-core';
+import { ExternalLinkAltIcon } from '@patternfly/react-icons';
+
+
+type WorkspaceEndpointsProps = {
+    endpoints: string[];
+};
+
+export const WorkspaceEndpoints: React.FC<WorkspaceEndpointsProps> = ({ endpoints }) => {
+  return (
+    <Stack hasGutter>
+      <StackItem>
+        <strong>Endpoints</strong>
+      </StackItem>
+      <StackItem>
+        <List isPlain>
+          {endpoints.map((endpoint) => (
+              <ListItem>
+                <Content component="a" href={endpoint} target="_blank">{endpoint}</Content>
+              </ListItem>
+          ))}
+        </List>
+      </StackItem>
+    </Stack>
+  )
+};
diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx
@@ -95,6 +95,7 @@ export const Workspaces: React.FunctionComponent = () => {
         state: WorkspaceState.Paused,
         stateMessage: 'It is paused.',
       },
+      endpoints: ['endpoint1', 'endpoint2'],
     },
     {
       name: 'My Other Jupyter Notebook',
@@ -140,6 +141,7 @@ export const Workspaces: React.FunctionComponent = () => {
         state: WorkspaceState.Running,
         stateMessage: 'It is running.',
       },
+      endpoints: ['endpoint3', 'endpoint4'],
     },
   ];
 

diff --git a/workspaces/frontend/src/shared/types.ts b/workspaces/frontend/src/shared/types.ts
@@ -73,6 +73,7 @@ export interface Workspace {
     podConfig: string;
   };
   status: WorkspaceStatus;
+  endpoints: string[];
 }
 
 export type WorkspacesColumnNames = {