frontend: Handle large list of ports

Signed-off-by: ashu8912 <aghildiyal@microsoft.com>
headlamp-k8s · Jun 24, 2024 · acd7832 · acd7832
1 parent 8e8f58c
commit acd7832
Show file tree

Hide file tree

Showing 3 changed files with 107 additions and 6 deletions.
diff --git a/frontend/src/components/common/Resource/Resource.tsx b/frontend/src/components/common/Resource/Resource.tsx
@@ -1,6 +1,6 @@
 import { Icon } from '@iconify/react';
 import Editor from '@monaco-editor/react';
-import { InputLabel } from '@mui/material';
+import { Button, InputLabel } from '@mui/material';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
 import Grid, { GridProps, GridSize } from '@mui/material/Grid';
@@ -644,7 +644,8 @@ export interface ContainerInfoProps {
 export function ContainerInfo(props: ContainerInfoProps) {
   const { container, status, resource } = props;
   const { t } = useTranslation(['glossary', 'translation']);
-
+  const [maxPortsToShow, setMaxPortsToShow] = React.useState(5);
+  const portsToShow = container.ports?.slice(0, 5 * maxPortsToShow);
   const [startedDate, finishDate, lastStateStartedDate, lastStateFinishDate] = React.useMemo(() => {
     function getStartedDate(state?: KubeContainerStatus['state']) {
       let startedDate = state?.running?.startedAt || state?.terminated?.startedAt || '';
@@ -738,7 +739,6 @@ export function ContainerInfo(props: ContainerInfoProps) {
   }) {
     const { rows } = props;
     const id = useId('status-value-');
-
     const rowsToDisplay = React.useMemo(() => {
       return rows.filter(({ hide }) => !hide);
     }, [rows]);
@@ -904,9 +904,9 @@ export function ContainerInfo(props: ContainerInfoProps) {
         name: t('Ports'),
         value: (
           <Grid container>
-            {container.ports?.map(({ containerPort, protocol }, index) => (
+            {portsToShow?.map(({ containerPort, protocol }, index) => (
               <>
-                <Grid item xs={12} key={`port_line_${index}`}>
+                <Grid item md={4} key={`port_line_${index}`}>
                   <Box display="flex" alignItems={'center'}>
                     <Box px={0.5} minWidth={120}>
                       <ValueLabel>{`${protocol}:`}</ValueLabel>
@@ -917,7 +917,7 @@ export function ContainerInfo(props: ContainerInfoProps) {
                     )}
                   </Box>
                 </Grid>
-                {index < container.ports!.length - 1 && (
+                {index !== 0 && index % 2 === 0 && index < portsToShow!.length - 1 && (
                   <Grid item xs={12}>
                     <Box mt={2} mb={2}>
                       <Divider />
@@ -926,6 +926,18 @@ export function ContainerInfo(props: ContainerInfoProps) {
                 )}
               </>
             ))}
+            {container.ports?.length! > 5 &&
+              portsToShow &&
+              container.ports &&
+              portsToShow.length < container.ports.length && (
+                <Grid item xs={12}>
+                  <Box display="flex" mt={2}>
+                    <Button onClick={() => setMaxPortsToShow(prev => prev * 2)}>
+                      {t('translation|Show More')}
+                    </Button>
+                  </Box>
+                </Grid>
+              )}
           </Grid>
         ),
         hide: _.isEmpty(container.ports),

diff --git a/frontend/src/components/pod/PodDetails.stories.tsx b/frontend/src/components/pod/PodDetails.stories.tsx
@@ -129,3 +129,9 @@ Successful.args = {
   useGet: usePhonyGet,
   podName: 'successful',
 };
+
+export const ManyPorts = Template.bind({});
+ManyPorts.args = {
+  useGet: usePhonyGet,
+  podName: 'manyports',
+};
diff --git a/frontend/src/components/pod/storyHelper.ts b/frontend/src/components/pod/storyHelper.ts
@@ -581,6 +581,88 @@ const running = {
   },
 };
 
+const manyPorts = {
+  ...basePod,
+  metadata: {
+    ...basePod.metadata,
+    name: 'manyports',
+  },
+  spec: {
+    ...basePod.spec,
+    containers: [
+      {
+        name: 'nginx-many-ports',
+        image: 'nginx:1.14.2',
+        ports: [],
+        imagePullPolicy: 'IfNotPresent',
+      },
+    ],
+  },
+  status: {
+    ...basePod.status,
+    phase: 'Running',
+    conditions: [
+      {
+        type: 'Initialized',
+        status: 'True',
+        lastProbeTime: null,
+        lastTransitionTime: stateDate,
+      },
+      {
+        type: 'Ready',
+        status: 'True',
+        lastProbeTime: null,
+        lastTransitionTime: stateDate,
+      },
+      {
+        type: 'ContainersReady',
+        status: 'True',
+        lastProbeTime: null,
+        lastTransitionTime: stateDate,
+      },
+      {
+        type: 'PodScheduled',
+        status: 'True',
+        lastProbeTime: null,
+        lastTransitionTime: stateDate,
+      },
+    ],
+    containerStatuses: [
+      {
+        name: 'nginx',
+        state: {
+          running: {
+            startedAt: stateDate,
+          },
+        },
+        lastState: {},
+        ready: true,
+        restartCount: 0,
+        image: 'docker.io/library/nginx:1.14.2',
+        imageID:
+          'docker.io/library/nginx@sha256:f7988fb6c02e0ce69257d9bd9cf37ae20a60f1df7563c3a2a6abe24160306b8d',
+        containerID:
+          'containerd://f8eb12a25a065d170b68cee522d431f4920fe083bf9cf53a4a576d60b8641584',
+        started: true,
+      },
+    ],
+  },
+};
+
+function addManyPortsToPod(pod: KubePod) {
+  if (!pod.spec?.containers[0]?.ports) {
+    return;
+  }
+  for (let i = 0; i < 100; i++) {
+    pod.spec?.containers[0]?.ports?.push({
+      containerPort: 80 + i,
+      protocol: 'TCP',
+    });
+  }
+}
+
+addManyPortsToPod(manyPorts);
+
 const nominatedNode = {
   ...basePod,
   metadata: {
@@ -749,4 +831,5 @@ export const podList = [
   running,
   nominatedNode,
   readinessGate,
+  manyPorts,
 ];