kubeflow
/
notebooks
mirror of https://github.com/kubeflow/notebooks.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Workspace Kinds Summary:UX Enchancements 

Signed-off-by: DominikKawka <dkawka@redhat.com>
This commit is contained in:
DominikKawka 2025-07-08 14:55:16 +01:00
parent 526ef9dd58
commit f766f767bc
2 changed files with 14 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummary.tsx
View File

@ -1,13 +1,13 @@
import React, { useCallback, useRef, useState } from 'react'; import React, { useCallback, useRef, useState } from 'react';
import { import {
Button,
Content, Content,
ContentVariants, ContentVariants,
PageSection, PageSection,
Stack, Stack,
StackItem, StackItem,
Breadcrumb,
BreadcrumbItem,
} from '@patternfly/react-core'; } from '@patternfly/react-core';
import { ArrowLeftIcon } from '@patternfly/react-icons';
import { useTypedLocation, useTypedNavigate, useTypedParams } from '~/app/routerHelper'; import { useTypedLocation, useTypedNavigate, useTypedParams } from '~/app/routerHelper';
import WorkspaceTable, { import WorkspaceTable, {
WorkspaceTableFilteredColumn, WorkspaceTableFilteredColumn,
@ -22,7 +22,6 @@ import { useWorkspaceRowActions } from '~/app/hooks/useWorkspaceRowActions';
import { usePolling } from '~/app/hooks/usePolling'; import { usePolling } from '~/app/hooks/usePolling';
const WorkspaceKindSummary: React.FC = () => { const WorkspaceKindSummary: React.FC = () => {
const navigate = useTypedNavigate();
const [isSummaryExpanded, setIsSummaryExpanded] = useState(true); const [isSummaryExpanded, setIsSummaryExpanded] = useState(true);
const { state } = useTypedLocation<'workspaceKindSummary'>(); const { state } = useTypedLocation<'workspaceKindSummary'>();
@ -60,18 +59,15 @@ const WorkspaceKindSummary: React.FC = () => {
} }
return ( return (
<PageSection isFilled> <PageSection>
<Stack hasGutter> <Stack hasGutter>
<StackItem> <StackItem>
<Button <Breadcrumb>
variant="link" <BreadcrumbItem to="workspaceKinds">Workspace Kinds</BreadcrumbItem>
icon={<ArrowLeftIcon />} <BreadcrumbItem to="#" isActive>
iconPosition="left" Workspaces in {kind}
onClick={() => navigate('workspaceKinds')} </BreadcrumbItem>
aria-label="Back to Workspace Kinds" </Breadcrumb>
>
Back
</Button>
</StackItem> </StackItem>
<StackItem> <StackItem>
<Content component={ContentVariants.h1}>{kind}</Content> <Content component={ContentVariants.h1}>{kind}</Content>
@ -87,7 +83,7 @@ const WorkspaceKindSummary: React.FC = () => {
onAddFilter={onAddFilter} onAddFilter={onAddFilter}
/> />
</StackItem> </StackItem>
<StackItem isFilled> <StackItem>
<WorkspaceTable <WorkspaceTable
ref={workspaceTableRef} ref={workspaceTableRef}
workspaces={workspaces} workspaces={workspaces}

6
workspaces/frontend/src/app/pages/WorkspaceKinds/summary/WorkspaceKindSummaryExpandableCard.tsx
View File

@ -54,7 +54,7 @@ const WorkspaceKindSummaryExpandableCard: React.FC<WorkspaceKindSummaryExpandabl
); );
return ( return (
<Card isExpanded={isExpanded}> <Card isExpanded={isExpanded} variant="secondary">
<CardHeader onExpand={onExpandToggle}> <CardHeader onExpand={onExpandToggle}>
<CardTitle> <CardTitle>
<Content component={ContentVariants.h2}>Workspaces Summary</Content> <Content component={ContentVariants.h2}>Workspaces Summary</Content>
@ -65,7 +65,9 @@ const WorkspaceKindSummaryExpandableCard: React.FC<WorkspaceKindSummaryExpandabl
<Flex wrap="wrap"> <Flex wrap="wrap">
<SectionFlex title="Total GPUs in use"> <SectionFlex title="Total GPUs in use">
<FlexItem> <FlexItem>
<Content> <Content
style={{ fontSize: LargeFontSize.value, fontWeight: BoldFontWeight.value }}
>
{countGpusFromWorkspaces(filterRunningWorkspaces(workspaces))} GPUs {countGpusFromWorkspaces(filterRunningWorkspaces(workspaces))} GPUs
</Content> </Content>
</FlexItem> </FlexItem>