diff --git a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx index b6f5b724..8227170a 100644 --- a/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx +++ b/workspaces/frontend/src/app/pages/Workspaces/Workspaces.tsx @@ -22,6 +22,9 @@ import { Button, PaginationVariant, Pagination, + Popover, + List, + ListItem, } from '@patternfly/react-core'; import { Table, @@ -34,7 +37,10 @@ import { ActionsColumn, IActions, } from '@patternfly/react-table'; -import { FilterIcon } from '@patternfly/react-icons'; +import { + FilterIcon, + ExternalLinkAltIcon, + } from '@patternfly/react-icons'; import { Workspace, WorkspaceState } from '~/shared/types'; export const Workspaces: React.FunctionComponent = () => { @@ -78,6 +84,7 @@ export const Workspaces: React.FunctionComponent = () => { state: WorkspaceState.Paused, stateMessage: 'It is paused.', }, + endpoints: ['endpoint1', 'endpoint2'], }, { name: 'My Other Jupyter Notebook', @@ -117,6 +124,7 @@ export const Workspaces: React.FunctionComponent = () => { state: WorkspaceState.Running, stateMessage: 'It is running.', }, + endpoints: ['endpoint3', 'endpoint4'], }, ]; @@ -130,6 +138,7 @@ export const Workspaces: React.FunctionComponent = () => { homeVol: 'Home Vol', dataVol: 'Data Vol', lastActivity: 'Last Activity', + connect: 'Connect', }; // Filter @@ -421,6 +430,36 @@ export const Workspaces: React.FunctionComponent = () => { setPage(newPage); }; + interface EndpointPopoverProps { + endpoints: string[]; + } + + const EndpointPopover: React.FC = ({ endpoints }) => ( + Workspace endpoints} + headerIcon={} + triggerAction="hover" + bodyContent={ + + {endpoints.map((endpoint, index) => ( + + + {endpoint} + + + ))} + } + > + + Connect + + + + ); + return ( Kubeflow Workspaces @@ -437,6 +476,7 @@ export const Workspaces: React.FunctionComponent = () => { {columnNames.homeVol} {columnNames.dataVol} {columnNames.lastActivity} + {columnNames.connect} @@ -464,6 +504,9 @@ export const Workspaces: React.FunctionComponent = () => { 1 hour ago + + + diff --git a/workspaces/frontend/src/shared/types.ts b/workspaces/frontend/src/shared/types.ts index 159a66b5..f98c920c 100644 --- a/workspaces/frontend/src/shared/types.ts +++ b/workspaces/frontend/src/shared/types.ts @@ -67,4 +67,5 @@ export interface Workspace { podConfig: string; }; status: WorkspaceStatus; + endpoints: string[]; }