feat(ws): added namespaces tab to workspace kind details (#406)

Signed-off-by: paulovmr <[email protected]>

Author: paulovmr

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<WorkspaceKind['name'], WorkspaceCountPerOption>;
 
 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);

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<WorkspaceKindDetailsP
             tabContentId="podConfigsTabContent"
             aria-label="Pod Configs"
           />
+          <Tab
+            eventKey={3}
+            title={<TabTitleText>Namespaces</TabTitleText>}
+            tabContentId="namespacesTabContent"
+            aria-label="Namespaces"
+          />
         </Tabs>
       </DrawerPanelBody>
 
@@ -110,6 +117,20 @@ export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsP
             />
           </TabContentBody>
         </TabContent>
+        <TabContent
+          key={3}
+          eventKey={3}
+          id="namespacesTabContent"
+          activeKey={activeTabKey}
+          hidden={activeTabKey !== 3}
+        >
+          <TabContentBody hasPadding>
+            <WorkspaceKindDetailsNamespaces
+              workspaceKind={workspaceKind}
+              workspaceCountPerKind={workspaceCountPerKind}
+            />
+          </TabContentBody>
+        </TabContent>
       </DrawerPanelBody>
     </DrawerPanelContent>
   );

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 }) => (
+  <List isPlain>
+    {Object.keys(
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+      workspaceCountPerKind[workspaceKind.name]
+        ? workspaceCountPerKind[workspaceKind.name].countByNamespace
+        : [],
+    ).map((namespace, rowIndex) => (
+      <ListItem key={rowIndex}>
+        {namespace}:{' '}
+        {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          workspaceCountPerKind[workspaceKind.name]
+            ? workspaceCountPerKind[workspaceKind.name].countByNamespace[namespace]
+            : 0
+        }
+        {' Workspaces'}
+      </ListItem>
+    ))}
+  </List>
+);

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<WorkspaceImageConfigValue['id'], number>;
   countByPodConfig: Record<WorkspacePodConfigValue['id'], number>;
+  countByNamespace: Record<Workspace['namespace'], number>;
 }