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

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

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