feat(ws): added pod configs tab to workspace kind details (#399)

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

Author: paulovmr

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

@@ -16,6 +16,7 @@ import { WorkspaceKind } from '~/shared/api/backendApiTypes';
 import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
 import { WorkspaceKindDetailsOverview } from './WorkspaceKindDetailsOverview';
 import { WorkspaceKindDetailsImages } from './WorkspaceKindDetailsImages';
+import { WorkspaceKindDetailsPodConfigs } from './WorkspaceKindDetailsPodConfigs';
 
 type WorkspaceKindDetailsProps = {
   workspaceKind: WorkspaceKind;
@@ -60,6 +61,12 @@ export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsP
             tabContentId="imagesTabContent"
             aria-label="Images"
           />
+          <Tab
+            eventKey={2}
+            title={<TabTitleText>Pod Configs</TabTitleText>}
+            tabContentId="podConfigsTabContent"
+            aria-label="Pod Configs"
+          />
         </Tabs>
       </DrawerPanelBody>
 
@@ -89,6 +96,20 @@ export const WorkspaceKindDetails: React.FunctionComponent<WorkspaceKindDetailsP
             />
           </TabContentBody>
         </TabContent>
+        <TabContent
+          key={2}
+          eventKey={2}
+          id="podConfigsTabContent"
+          activeKey={activeTabKey}
+          hidden={activeTabKey !== 2}
+        >
+          <TabContentBody hasPadding>
+            <WorkspaceKindDetailsPodConfigs
+              workspaceKind={workspaceKind}
+              workspaceCountPerKind={workspaceCountPerKind}
+            />
+          </TabContentBody>
+        </TabContent>
       </DrawerPanelBody>
     </DrawerPanelContent>
   );

workspaces/frontend/src/app/pages/WorkspaceKinds/details/WorkspaceKindDetailsPodConfigs.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+import { WorkspaceKind } from '~/shared/api/backendApiTypes';
+import { WorkspaceCountPerKind } from '~/app/hooks/useWorkspaceCountPerKind';
+
+type WorkspaceDetailsPodConfigsProps = {
+  workspaceKind: WorkspaceKind;
+  workspaceCountPerKind: WorkspaceCountPerKind;
+};
+
+export const WorkspaceKindDetailsPodConfigs: React.FunctionComponent<
+  WorkspaceDetailsPodConfigsProps
+> = ({ workspaceKind, workspaceCountPerKind }) => (
+  <List isPlain>
+    {workspaceKind.podTemplate.options.podConfig.values.map((podConfig, rowIndex) => (
+      <ListItem key={rowIndex}>
+        {podConfig.displayName}:{' '}
+        {
+          // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+          workspaceCountPerKind[workspaceKind.name]
+            ? workspaceCountPerKind[workspaceKind.name].countByPodConfig[podConfig.id]
+            : 0
+        }
+        {' Workspaces'}
+      </ListItem>
+    ))}
+  </List>
+);