Skip to content

Commit 83caeff

Browse files
paulovmrpaulovmr
authored
feat(ws): added images tab to workspace kind details (#398)
* feat(ws): added images tab to workspace kind details Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com> * feat(ws): added images tab to workspace kind details Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com> * feat(ws): added images tab to workspace kind details Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com> --------- Signed-off-by: paulovmr <832830+paulovmr@users.noreply.github.com>
1 parent d668eb8 commit 83caeff

File tree

6 files changed

+95
-9
lines changed

6 files changed

+95
-9
lines changed

‎workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts‎

Lines changed: 24 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
11
import * as React from 'react';
22
import { useNotebookAPI } from '~/app/hooks/useNotebookAPI';
33
import { Workspace, WorkspaceKind } from '~/shared/api/backendApiTypes';
4+
import { WorkspaceCountPerKindImagePodConfig } from '~/app/types';
45

5-
type WorkspaceCountPerKind = Record<WorkspaceKind['name'], number>;
6+
export type WorkspaceCountPerKind = Record<
7+
WorkspaceKind['name'],
8+
WorkspaceCountPerKindImagePodConfig
9+
>;
610

711
export const useWorkspaceCountPerKind = (): WorkspaceCountPerKind => {
812
const { api } = useNotebookAPI();
@@ -14,7 +18,25 @@ export const useWorkspaceCountPerKind = (): WorkspaceCountPerKind => {
1418
React.useEffect(() => {
1519
api.listAllWorkspaces({}).then((workspaces) => {
1620
const countPerKind = workspaces.reduce((acc: WorkspaceCountPerKind, workspace: Workspace) => {
17-
acc[workspace.workspaceKind.name] = (acc[workspace.workspaceKind.name] || 0) + 1;
21+
acc[workspace.workspaceKind.name] = acc[workspace.workspaceKind.name] ?? {
22+
count: 0,
23+
countByImage: {},
24+
countByPodConfig: {},
25+
};
26+
acc[workspace.workspaceKind.name].count =
27+
(acc[workspace.workspaceKind.name].count || 0) + 1;
28+
acc[workspace.workspaceKind.name].countByImage[
29+
workspace.podTemplate.options.imageConfig.current.id
30+
] =
31+
(acc[workspace.workspaceKind.name].countByImage[
32+
workspace.podTemplate.options.imageConfig.current.id
33+
] || 0) + 1;
34+
acc[workspace.workspaceKind.name].countByPodConfig[
35+
workspace.podTemplate.options.podConfig.current.id
36+
] =
37+
(acc[workspace.workspaceKind.name].countByPodConfig[
38+
workspace.podTemplate.options.podConfig.current.id
39+
] || 0) + 1;
1840
return acc;
1941
}, {});
2042
setWorkspaceCountPerKind(countPerKind);

‎workspaces/frontend/src/app/pages/WorkspaceKinds/WorkspaceKinds.tsx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -87,7 +87,8 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
8787
name: workspaceKind.name,
8888
description: workspaceKind.description,
8989
deprecated: workspaceKind.deprecated,
90-
numOfWorkspaces: workspaceCountPerKind[workspaceKind.name] ?? 0,
90+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
91+
numOfWorkspaces: workspaceCountPerKind[workspaceKind.name]?.count ?? 0,
9192
};
9293
return [icon, name, description, deprecated, numberOfWorkspaces];
9394
},
@@ -433,6 +434,7 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
433434
{selectedWorkspaceKind && (
434435
<WorkspaceKindDetails
435436
workspaceKind={selectedWorkspaceKind}
437+
workspaceCountPerKind={workspaceCountPerKind}
436438
onCloseClick={() => setSelectedWorkspaceKind(null)}
437439
/>
438440
)}
@@ -580,7 +582,10 @@ export const WorkspaceKinds: React.FunctionComponent = () => {
580582
)}
581583
</Td>
582584
<Td dataLabel={columns.numberOfWorkspaces.name}>
583-
{workspaceCountPerKind[workspaceKind.name] ?? 0}
585+
{
586+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
587+
workspaceCountPerKind[workspaceKind.name]?.count ?? 0
588+
}
584589
</Td>
585590

586591
<Td isActionCell data-testid="action-column">

‎workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx‎

Lines changed: 26 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,19 @@ import {
1313
TabContent,
1414
} from '@patternfly/react-core';
1515
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
16-
import { WorkspaceDetailsOverview } from './WorkspaceDetailsOverview';
16+
import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
17+
import { WorkspaceKindDetailsOverview } from './WorkspaceKindDetailsOverview';
18+
import { WorkspaceKindDetailsImages } from './WorkspaceKindDetailsImages';
1719

1820
type WorkspaceKindDetailsProps = {
1921
workspaceKind: WorkspaceKind;
22+
workspaceCountPerKind: WorkspaceCountPerKind;
2023
onCloseClick: React.MouseEventHandler;
2124
};
2225

2326
export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsProps> = ({
2427
workspaceKind,
28+
workspaceCountPerKind,
2529
onCloseClick,
2630
}) => {
2731
const [activeTabKey, setActiveTabKey] = React.useState<string | number>(0);
@@ -50,6 +54,12 @@ export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsP
5054
tabContentId="overviewTabContent"
5155
aria-label="Overview"
5256
/>
57+
<Tab
58+
eventKey={1}
59+
title={<TabTitleText>Images</TabTitleText>}
60+
tabContentId="imagesTabContent"
61+
aria-label="Images"
62+
/>
5363
</Tabs>
5464
</DrawerPanelBody>
5565

@@ -62,7 +72,21 @@ export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsP
6272
hidden={activeTabKey !== 0}
6373
>
6474
<TabContentBody hasPadding>
65-
<WorkspaceDetailsOverview workspaceKind={workspaceKind} />
75+
<WorkspaceKindDetailsOverview workspaceKind={workspaceKind} />
76+
</TabContentBody>
77+
</TabContent>
78+
<TabContent
79+
key={1}
80+
eventKey={1}
81+
id="imagesTabContent"
82+
activeKey={activeTabKey}
83+
hidden={activeTabKey !== 1}
84+
>
85+
<TabContentBody hasPadding>
86+
<WorkspaceKindDetailsImages
87+
workspaceKind={workspaceKind}
88+
workspaceCountPerKind={workspaceCountPerKind}
89+
/>
6690
</TabContentBody>
6791
</TabContent>
6892
</DrawerPanelBody>

‎workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsImages.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { List, ListItem } from '@patternfly/react-core';
3+
import { WorkspaceKind } from '~/shared/api/backendApiTypes';
4+
import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
5+
6+
type WorkspaceDetailsImagesProps = {
7+
workspaceKind: WorkspaceKind;
8+
workspaceCountPerKind: WorkspaceCountPerKind;
9+
};
10+
11+
export const WorkspaceKindDetailsImages: React.FunctionComponent<WorkspaceDetailsImagesProps> = ({
12+
workspaceKind,
13+
workspaceCountPerKind,
14+
}) => (
15+
<List isPlain>
16+
{workspaceKind.podTemplate.options.imageConfig.values.map((image, rowIndex) => (
17+
<ListItem key={rowIndex}>
18+
{image.displayName}:{' '}
19+
{
20+
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
21+
workspaceCountPerKind[workspaceKind.name]
22+
? workspaceCountPerKind[workspaceKind.name].countByImage[image.id]
23+
: 0
24+
}
25+
{' Workspaces'}
26+
</ListItem>
27+
))}
28+
</List>
29+
);

‎workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceDetailsOverview.tsx‎ renamed to ‎workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsOverview.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ type WorkspaceDetailsOverviewProps = {
1313
workspaceKind: WorkspaceKind;
1414
};
1515

16-
export const WorkspaceDetailsOverview: React.FunctionComponent<WorkspaceDetailsOverviewProps> = ({
17-
workspaceKind,
18-
}) => (
16+
export const WorkspaceKindDetailsOverview: React.FunctionComponent<
17+
WorkspaceDetailsOverviewProps
18+
> = ({ workspaceKind }) => (
1919
<DescriptionList isHorizontal>
2020
<DescriptionListGroup>
2121
<DescriptionListTerm>Name</DescriptionListTerm>

‎workspaces/frontend/src/app/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,3 +46,9 @@ export interface WorkspaceFormData {
4646
podConfig: WorkspacePodConfigValue | undefined;
4747
properties: WorkspaceFormProperties;
4848
}
49+
50+
export interface WorkspaceCountPerKindImagePodConfig {
51+
count: number;
52+
countByImage: Record<WorkspaceImageConfigValue['id'], number>;
53+
countByPodConfig: Record<WorkspacePodConfigValue['id'], number>;
54+
}

0 commit comments

Comments
 (0)