diff --git a/workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts b/workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts index 8e3e259e..7ff1aa4f 100644 --- a/workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts +++ b/workspaces/frontend/src/app/hooks/useWorkspaceCountPerKind.ts @@ -1,12 +1,9 @@ import * as React from 'react'; import { useNotebookAPI } from '~/app/hooks/useNotebookAPI'; import { Workspace, WorkspaceKind } from '~/shared/api/backendApiTypes'; -import { WorkspaceCountPerKindImagePodConfig } from '~/app/types'; +import { WorkspaceCountPerOption } from '~/app/types'; -export type WorkspaceCountPerKind = Record< - WorkspaceKind['name'], - WorkspaceCountPerKindImagePodConfig ->; +export type WorkspaceCountPerKind = Record; export const useWorkspaceCountPerKind = (): WorkspaceCountPerKind => { const { api } = useNotebookAPI(); @@ -22,6 +19,7 @@ export const useWorkspaceCountPerKind = (): WorkspaceCountPerKind => { count: 0, countByImage: {}, countByPodConfig: {}, + countByNamespace: {}, }; acc[workspace.workspaceKind.name].count = (acc[workspace.workspaceKind.name].count || 0) + 1; @@ -37,6 +35,8 @@ export const useWorkspaceCountPerKind = (): WorkspaceCountPerKind => { (acc[workspace.workspaceKind.name].countByPodConfig[ workspace.podTemplate.options.podConfig.current.id ] || 0) + 1; + acc[workspace.workspaceKind.name].countByNamespace[workspace.namespace] = + (acc[workspace.workspaceKind.name].countByNamespace[workspace.namespace] || 0) + 1; return acc; }, {}); setWorkspaceCountPerKind(countPerKind); diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx index 13a168eb..ba65dbd2 100644 --- a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetails.tsx @@ -14,6 +14,7 @@ import { } from '@patternfly/react-core'; import { WorkspaceKind } from '~/shared/api/backendApiTypes'; import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind'; +import { WorkspaceKindDetailsNamespaces } from '~/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces'; import { WorkspaceKindDetailsOverview } from './WorkspaceKindDetailsOverview'; import { WorkspaceKindDetailsImages } from './WorkspaceKindDetailsImages'; import { WorkspaceKindDetailsPodConfigs } from './WorkspaceKindDetailsPodConfigs'; @@ -67,6 +68,12 @@ export const WorkspaceKindDetails: React.FunctionComponent + Namespaces} + tabContentId="namespacesTabContent" + aria-label="Namespaces" + /> @@ -110,6 +117,20 @@ export const WorkspaceKindDetails: React.FunctionComponent + ); diff --git a/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces.tsx b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces.tsx new file mode 100644 index 00000000..fb14174f --- /dev/null +++ b/workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsNamespaces.tsx @@ -0,0 +1,33 @@ +import React from 'react'; +import { List, ListItem } from '@patternfly/react-core'; +import { WorkspaceKind } from '~/shared/api/backendApiTypes'; +import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind'; + +type WorkspaceDetailsNamespacesProps = { + workspaceKind: WorkspaceKind; + workspaceCountPerKind: WorkspaceCountPerKind; +}; + +export const WorkspaceKindDetailsNamespaces: React.FunctionComponent< + WorkspaceDetailsNamespacesProps +> = ({ workspaceKind, workspaceCountPerKind }) => ( + + {Object.keys( + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + workspaceCountPerKind[workspaceKind.name] + ? workspaceCountPerKind[workspaceKind.name].countByNamespace + : [], + ).map((namespace, rowIndex) => ( + + {namespace}:{' '} + { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + workspaceCountPerKind[workspaceKind.name] + ? workspaceCountPerKind[workspaceKind.name].countByNamespace[namespace] + : 0 + } + {' Workspaces'} + + ))} + +); diff --git a/workspaces/frontend/src/app/types.ts b/workspaces/frontend/src/app/types.ts index 4b8ce928..c153af0a 100644 --- a/workspaces/frontend/src/app/types.ts +++ b/workspaces/frontend/src/app/types.ts @@ -4,6 +4,7 @@ import { WorkspacePodConfigValue, WorkspacePodVolumeMount, WorkspacePodSecretMount, + Workspace, } from '~/shared/api/backendApiTypes'; export interface WorkspacesColumnNames { @@ -47,8 +48,9 @@ export interface WorkspaceFormData { properties: WorkspaceFormProperties; } -export interface WorkspaceCountPerKindImagePodConfig { +export interface WorkspaceCountPerOption { count: number; countByImage: Record; countByPodConfig: Record; + countByNamespace: Record; }