Merge branch 'master' into opensearch/update-to-2.19.4

Author: todvora

graylog2-web-interface/src/components/common/EntityDataTable/Table.tsx

@@ -37,6 +37,7 @@ const StyledTable = styled(BaseTable)(
   ({ theme }) => css`
     table-layout: fixed;
     margin-bottom: 0;
+    height: 100%; // required to be able to use height: 100% in td
 
     thead > tr > th,
     tbody > tr > td {
@@ -65,7 +66,7 @@ const Td = styled.td<{
     opacity: var(${columnOpacityVar($colId)}, 1);
     transform: var(${columnTransformVar($colId)}, none);
     transition: var(${columnTransition()}, none);
-    height: 0; // required to be able to use height: 100% in child elements
+    height: 100%; // required to be able to use height: 100% in child elements
     ${$pinningPosition
       ? css`
           position: sticky;

graylog2-web-interface/src/components/common/EntityDataTable/TableHead.tsx

@@ -48,7 +48,7 @@ export const Th = styled.th<{
     transform: var(${columnTransformVar($colId)}, translate3d(0, 0, 0));
     background-color: ${theme.colors.table.head.background};
     transition: var(${columnTransition()}, none);
-    height: 0; // required to be able to use height: 100% in child elements
+    height: 100%; // required to be able to use height: 100% in child elements
     ${$pinningPosition
       ? css`
           position: sticky;

graylog2-web-interface/src/components/common/EntityDataTable/hooks/useActionsColumnWidth.ts

@@ -15,57 +15,45 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 
 import { CELL_PADDING } from 'components/common/EntityDataTable/Constants';
 
 import type { EntityBase } from '../types';
 
 const useActionsColumnWidth = <Entity extends EntityBase>(entities: ReadonlyArray<Entity>, hasRowActions: boolean) => {
   const [rowWidths, setRowWidths] = useState<{ [rowId: string]: number }>({});
-  const visibleRowIdsSet = useMemo(() => new Set(entities.map(({ id }) => id)), [entities]);
+  const visibleRowIds = useMemo(() => new Set(entities.map(({ id }) => id)), [entities]);
+  const visibleRowIdsRef = useRef<Set<string>>(visibleRowIds);
 
   useEffect(() => {
-    // eslint-disable-next-line react-hooks/set-state-in-effect
-    setRowWidths((cur) => {
-      const curEntries = Object.entries(cur);
-      const filteredEntries = curEntries.filter(([rowId]) => visibleRowIdsSet.has(rowId));
+    visibleRowIdsRef.current = visibleRowIds;
+  }, [visibleRowIds]);
 
-      if (filteredEntries.length === curEntries.length) {
-        return cur;
-      }
+  const handleWidthChange = useCallback((rowId: string, width: number) => {
+    const rounded = Math.round(width);
 
-      return Object.fromEntries(filteredEntries);
-    });
-  }, [visibleRowIdsSet]);
-
-  const handleWidthChange = useCallback(
-    (rowId: string, width: number) => {
-      const rounded = Math.round(width);
-
-      if (rounded <= 0 || !visibleRowIdsSet.has(rowId)) {
-        return;
-      }
+    if (rounded <= 0 || !visibleRowIdsRef.current.has(rowId)) {
+      return;
+    }
 
-      setRowWidths((cur) => (cur[rowId] === rounded ? cur : { ...cur, [rowId]: rounded }));
-    },
-    [visibleRowIdsSet],
-  );
+    setRowWidths((cur) => (cur[rowId] === rounded ? cur : { ...cur, [rowId]: rounded }));
+  }, []);
 
   const colMinWidth = useMemo(() => {
-    if (!visibleRowIdsSet.size) {
+    if (!visibleRowIds.size) {
       return CELL_PADDING * 2;
     }
 
     const maxWidth = Math.max(
       0,
-      ...Array.from(visibleRowIdsSet)
+      ...Array.from(visibleRowIds)
         .map((rowId) => rowWidths[rowId])
         .filter((width) => !!width),
     );
 
     return hasRowActions ? maxWidth + CELL_PADDING * 2 : 0;
-  }, [hasRowActions, rowWidths, visibleRowIdsSet]);
+  }, [hasRowActions, rowWidths, visibleRowIds]);
 
   return { colMinWidth, handleWidthChange };
 };

graylog2-web-interface/src/components/inputs/InputsOveriew/ColumnRenderers.tsx

@@ -20,14 +20,10 @@ import type { ColumnRenderers } from 'components/common/EntityDataTable';
 import type { InputSummary } from 'hooks/usePaginatedInputs';
 import type { InputTypesSummary } from 'hooks/useInputTypes';
 import type { InputStates } from 'hooks/useInputsStates';
-import {
-  TitleCell,
-  TypeCell,
-  NodeCell,
-  ThroughputCell,
-  ExpandedSectionToggleWrapper,
-} from 'components/inputs/InputsOveriew';
+import { TypeCell, NodeCell, ThroughputCell, ExpandedSectionToggleWrapper } from 'components/inputs/InputsOveriew';
 import { InputStateBadge } from 'components/inputs';
+import Routes from 'routing/Routes';
+import { Link } from 'components/common/router';
 
 type Props = {
   inputTypes: InputTypesSummary;
@@ -39,7 +35,9 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender
     title: {
       renderCell: (_title: string, input: InputSummary) => (
         <ExpandedSectionToggleWrapper id={input.id}>
-          <TitleCell input={input} />
+          <Link to={Routes.SYSTEM.INPUT_DIAGNOSIS(input.id)} title={`show input diagnosis for ${input.title}`}>
+            {input.title}
+          </Link>
         </ExpandedSectionToggleWrapper>
       ),
       width: 0.5,
@@ -82,13 +80,12 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender
           {input.attributes?.bind_address || 'N/A'}
         </ExpandedSectionToggleWrapper>
       ),
-      staticWidth: 100,
+      staticWidth: 125,
     },
     port: {
       renderCell: (_port: string, input: InputSummary) => (
         <ExpandedSectionToggleWrapper id={input.id}>{input.attributes?.port || 'N/A'}</ExpandedSectionToggleWrapper>
       ),
-      staticWidth: 100,
     },
   },
 });

graylog2-web-interface/src/components/inputs/InputsOveriew/cells/TitleCell.tsx

@@ -18,7 +18,6 @@ export { default as ColumnRenderers } from './ColumnRenderers';
 export { default as Constants } from './Constants';
 export { default as InputsOverview } from './InputsOverview';
 export { default as InputsActions } from './InputsActions';
-export { default as TitleCell } from './cells/TitleCell';
 export { default as TypeCell } from './cells/TypeCell';
 export { default as NodeCell } from './cells/NodeCell';
 export { default as ThroughputCell } from './cells/ThroughputCell';