improve: UX Enhancements in workspace summary (#473)
* Workspace Kinds Summary:UX Enchancements Signed-off-by: DominikKawka <dkawka@redhat.com> * frontend build and test fix Signed-off-by: DominikKawka <dkawka@redhat.com> * replaced inline styling with PF utility classes Signed-off-by: DominikKawka <dkawka@redhat.com> * prettier check Signed-off-by: DominikKawka <dkawka@redhat.com> * fix(ws): apply left alignment and fix padding to match other items Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> * prettier check Signed-off-by: DominikKawka <dkawka@redhat.com> * resolved merge conflict Signed-off-by: DominikKawka <dkawka@redhat.com> * fixed merge conflicts Signed-off-by: DominikKawka <dkawka@redhat.com> --------- Signed-off-by: DominikKawka <dkawka@redhat.com> Signed-off-by: Jenny <32821331+jenny-s51@users.noreply.github.com> Signed-off-by: Dominik Kawka <31955648+dominikkawka@users.noreply.github.com> Co-authored-by: Jenny <32821331+jenny-s51@users.noreply.github.com>
This commit is contained in:
Dominik Kawka
Bhakti Narvekar
parent
b18812a567
commit
4b88c153e2
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useCallback, useRef, useState } from 'react';
|
||||
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
|
||||
import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/components/Content';
|
||||
import { PageSection } from '@patternfly/react-core/dist/esm/components/Page';
|
||||
import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack';
|
||||
import { ArrowLeftIcon } from '@patternfly/react-icons/dist/esm/icons/arrow-left-icon';
|
||||
import { useTypedLocation, useTypedNavigate, useTypedParams } from '~/app/routerHelper';
|
||||
import { Breadcrumb } from '@patternfly/react-core/dist/esm/components/Breadcrumb';
|
||||
import { BreadcrumbItem } from '@patternfly/react-core/dist/esm/components/Breadcrumb/BreadcrumbItem';
|
||||
import { useTypedLocation, useTypedParams } from '~/app/routerHelper';
|
||||
import WorkspaceTable, {
|
||||
WorkspaceTableFilteredColumn,
|
||||
WorkspaceTableRef,
|
||||
|
|
@ -18,7 +18,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'>();
|
||||
|
|
@ -56,18 +55,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>
|
||||
|
|
@ -83,7 +79,7 @@ const WorkspaceKindSummary: React.FC = () => {
|
|||
onAddFilter={onAddFilter}
|
||||
/>
|
||||
</StackItem>
|
||||
<StackItem isFilled>
|
||||
<StackItem>
|
||||
<WorkspaceTable
|
||||
ref={workspaceTableRef}
|
||||
workspaces={workspaces}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
import React, { useMemo } from 'react';
|
||||
import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye';
|
||||
import { Button } from '@patternfly/react-core/dist/esm/components/Button';
|
||||
import {
|
||||
Card,
|
||||
|
|
@ -12,11 +11,7 @@ import { Content, ContentVariants } from '@patternfly/react-core/dist/esm/compon
|
|||
import { Divider } from '@patternfly/react-core/dist/esm/components/Divider';
|
||||
import { Flex, FlexItem } from '@patternfly/react-core/dist/esm/layouts/Flex';
|
||||
import { Stack, StackItem } from '@patternfly/react-core/dist/esm/layouts/Stack';
|
||||
import {
|
||||
t_global_spacer_md as MediumPadding,
|
||||
t_global_font_size_4xl as LargeFontSize,
|
||||
t_global_font_weight_heading_bold as BoldFontWeight,
|
||||
} from '@patternfly/react-tokens';
|
||||
import { t_global_spacer_md as MediumPadding } from '@patternfly/react-tokens';
|
||||
import { Workspace } from '~/shared/api/backendApiTypes';
|
||||
import {
|
||||
countGpusFromWorkspaces,
|
||||
|
|
@ -51,7 +46,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>
|
||||
|
|
@ -62,7 +57,7 @@ const WorkspaceKindSummaryExpandableCard: React.FC<WorkspaceKindSummaryExpandabl
|
|||
<Flex wrap="wrap">
|
||||
<SectionFlex title="Total GPUs in use">
|
||||
<FlexItem>
|
||||
<Content>
|
||||
<Content className="pf-v6-u-font-size-4xl pf-v6-u-font-weight-bold">
|
||||
{countGpusFromWorkspaces(filterRunningWorkspaces(workspaces))} GPUs
|
||||
</Content>
|
||||
</FlexItem>
|
||||
|
|
@ -73,29 +68,25 @@ const WorkspaceKindSummaryExpandableCard: React.FC<WorkspaceKindSummaryExpandabl
|
|||
<SectionDivider />
|
||||
<SectionFlex title="Idle GPU workspaces">
|
||||
<FlexItem>
|
||||
<Bullseye>
|
||||
<Button
|
||||
variant="link"
|
||||
isInline
|
||||
style={{ fontSize: LargeFontSize.value, fontWeight: BoldFontWeight.value }}
|
||||
className="pf-v6-u-font-size-4xl pf-v6-u-font-weight-bold"
|
||||
onClick={() => {
|
||||
onAddFilter({ columnKey: 'idleGpu', value: YesNoValue.Yes });
|
||||
}}
|
||||
>
|
||||
{filterIdleWorkspacesWithGpu(workspaces).length}
|
||||
</Button>
|
||||
</Bullseye>
|
||||
</FlexItem>
|
||||
<FlexItem>
|
||||
<Bullseye>
|
||||
<Content>Idle GPU workspaces</Content>
|
||||
</Bullseye>
|
||||
<Content>Idle GPU Workspaces</Content>
|
||||
</FlexItem>
|
||||
</SectionFlex>
|
||||
<SectionDivider />
|
||||
<SectionFlex title="Top GPU consumer namespaces">
|
||||
<FlexItem>
|
||||
<Stack hasGutter>
|
||||
<SectionFlex title="Top GPU Consumer Namespaces">
|
||||
<Content>
|
||||
<Stack className="pf-v6-u-pt-sm">
|
||||
{topGpuConsumersByNamespace.length > 0 ? (
|
||||
topGpuConsumersByNamespace.map(([ns, record]) => (
|
||||
<StackItem key={ns}>
|
||||
|
|
@ -112,7 +103,7 @@ const WorkspaceKindSummaryExpandableCard: React.FC<WorkspaceKindSummaryExpandabl
|
|||
</StackItem>
|
||||
)}
|
||||
</Stack>
|
||||
</FlexItem>
|
||||
</Content>
|
||||
</SectionFlex>
|
||||
</Flex>
|
||||
</CardBody>
|
||||
|
|
@ -134,7 +125,6 @@ const SectionFlex: React.FC<SectionFlexProps> = ({ children, title }) => (
|
|||
<Flex
|
||||
direction={{ default: 'column' }}
|
||||
justifyContent={{ default: 'justifyContentSpaceBetween' }}
|
||||
style={{ height: '100%' }}
|
||||
>
|
||||
<FlexItem>
|
||||
<Content component={ContentVariants.h3}>{title}</Content>
|
||||
|
|
|
|||
Loading…
Reference in New Issue