frontend: Handle large list of ports

headlamp-k8s · Jun 13, 2024 · fc3b1a0 · fc3b1a0
1 parent 8e8f58c
commit fc3b1a0
Showing 1 changed file with 17 additions and 5 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,7 +904,7 @@ 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}`}>
  <Box display="flex" alignItems={'center'}>
@@ -917,7 +917,7 @@ export function ContainerInfo(props: ContainerInfoProps) {
  )}
  </Box>
  </Grid>
- {index < container.ports!.length - 1 && (
+ {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),