Collection of smaller improvements for entity data table usage

graylog2-web-interface/src/components/inputs/InputsOveriew/ExpandedSectionToggleWrapper.tsx → graylog2-web-interface/src/components/common/EntityDataTable/ExpandedSectionToggleWrapper.tsx

@@ -15,24 +15,33 @@
  * <http://www.mongodb.com/licensing/server-side-public-license>.
  */
 import React from 'react';
-import { styled } from 'styled-components';
+import { styled, css } from 'styled-components';
 
 import useExpandedSections from 'components/common/EntityDataTable/hooks/useExpandedSections';
 
-const StyledWrapper = styled.div`
-  cursor: pointer;
-`;
+const StyledWrapper = styled.div<{ $align?: 'right' }>(
+  ({ $align }) => css`
+    display: flex;
+    cursor: pointer;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: ${$align === 'right' ? 'flex-end' : 'flex-start'};
+  `,
+);
 
 type Props = React.PropsWithChildren<{
   id: string;
+  align?: 'right';
+  section: string;
 }>;
 
-const ExpandedSectionToggleWrapper = ({ id, children = undefined }: Props) => {
+const ExpandedSectionToggleWrapper = ({ id, section, align = undefined, children = undefined }: Props) => {
   const { toggleSection } = useExpandedSections();
-  const _toggleSection = () => toggleSection(id, 'configuration');
+  const _toggleSection = () => toggleSection(id, section);
 
   return (
-    <StyledWrapper title="show details" onClick={_toggleSection}>
+    <StyledWrapper title="Show details" onClick={_toggleSection} $align={align}>
       {children}
     </StyledWrapper>
   );

graylog2-web-interface/src/components/common/EntityDataTable/index.ts

@@ -17,8 +17,9 @@
 import EntityDataTable from './EntityDataTable';
 import MoreActions from './MoreActions';
 import type { ColumnRenderers, ColumnSchema } from './types';
+import ExpandedSectionToggleWrapper from './ExpandedSectionToggleWrapper';
 
 export { default as useTableEventHandlers } from './hooks/useTableEventHandlers';
 
-export { ColumnRenderers, ColumnSchema, MoreActions };
+export { ColumnRenderers, ColumnSchema, MoreActions, ExpandedSectionToggleWrapper };
 export default EntityDataTable;

graylog2-web-interface/src/components/common/Icon/Icon.tsx

@@ -41,7 +41,7 @@ const spinAnimation = keyframes`
   }
 `;
 
-type ColorVariants = 'success' | 'warning';
+type ColorVariants = 'success' | 'warning' | 'info';
 
 const StyledSpan = styled.span<{
   $size: string;

graylog2-web-interface/src/components/event-definitions/event-definitions/SchedulingCell.tsx

@@ -51,8 +51,8 @@ const DetailValue = styled.dd(
   `,
 );
 
-const DetailsButton = styled(Button)`
-  padding: 6px 8px;
+const DetailsOverlayTrigger = styled(OverlayTrigger)`
+  vertical-align: bottom;
 `;
 
 const getTimeRange = (scheduler: Scheduler) => {
@@ -144,17 +144,15 @@ const SchedulingInfo = ({
   return (
     <>
       {`Runs ${executeEveryFormatted}${searchWithinMessage} `}
-      <OverlayTrigger
+      <DetailsOverlayTrigger
         trigger="click"
         rootClose
         placement="left"
         title={`${title} details.`}
         overlay={detailsPopover(scheduler, clearNotifications)}
         width={500}>
-        <DetailsButton bsStyle="link">
-          <Icon name="info" />
-        </DetailsButton>
-      </OverlayTrigger>
+        <Icon name="info" title={`${title} details.`} bsStyle={'info'} />
+      </DetailsOverlayTrigger>
     </>
   );
 };

graylog2-web-interface/src/components/indices/IndexSetFieldTypes/hooks/useCustomColumnRenderers.tsx

@@ -17,10 +17,10 @@
 import React, { useMemo } from 'react';
 
 import type { FieldTypeOrigin } from 'components/indices/IndexSetFieldTypes/types';
-import ExpandedRowToggleWrapper from 'components/indices/IndexSetFieldTypes/originBadges/ExpandedRowToggleWrapper';
 import { Icon } from 'components/common';
 import useFieldTypesForMappings from 'views/logic/fieldactions/ChangeFieldType/hooks/useFieldTypesForMappings';
 import OriginCell from 'components/indices/IndexSetFieldTypes/originBadges/OriginCell';
+import { ExpandedSectionToggleWrapper } from 'components/common/EntityDataTable';
 
 const useCustomColumnRenderers = () => {
   const {
@@ -35,9 +35,9 @@ const useCustomColumnRenderers = () => {
         },
         origin: {
           renderCell: (origin: FieldTypeOrigin, { id }) => (
-            <ExpandedRowToggleWrapper id={id}>
+            <ExpandedSectionToggleWrapper id={id} section="overriddenProfile">
               <OriginCell origin={origin} />
-            </ExpandedRowToggleWrapper>
+            </ExpandedSectionToggleWrapper>
           ),
           staticWidth: 200,
         },

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

@@ -17,10 +17,11 @@
 import * as React from 'react';
 
 import type { ColumnRenderers } from 'components/common/EntityDataTable';
+import { ExpandedSectionToggleWrapper } from 'components/common/EntityDataTable';
 import type { InputSummary } from 'hooks/usePaginatedInputs';
 import type { InputTypesSummary } from 'hooks/useInputTypes';
 import type { InputStates } from 'hooks/useInputsStates';
-import { TypeCell, NodeCell, ThroughputCell, ExpandedSectionToggleWrapper } from 'components/inputs/InputsOveriew';
+import { TypeCell, NodeCell, ThroughputCell } from 'components/inputs/InputsOveriew';
 import FailuresCell from 'components/inputs/InputsOveriew/cells/FailuresCell';
 import MessageCountCell from 'components/inputs/InputsOveriew/cells/MessageCountCell';
 import ExtractorCountCell from 'components/inputs/InputsOveriew/cells/ExtractorCountCell';
@@ -30,6 +31,8 @@ import { InputStateBadge } from 'components/inputs';
 import Routes from 'routing/Routes';
 import { Link } from 'components/common';
 
+const EXPANDED_SECTION = 'EXPANDED_SECTION';
+
 type Props = {
   inputTypes: InputTypesSummary;
   inputStates?: InputStates;
@@ -39,7 +42,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender
   attributes: {
     title: {
       renderCell: (_title: string, input: InputSummary) => (
-        <ExpandedSectionToggleWrapper id={input.id}>
+        <ExpandedSectionToggleWrapper id={input.id} section={EXPANDED_SECTION}>
           <Link to={Routes.SYSTEM.INPUT_DIAGNOSIS(input.id)} title={`show input diagnosis for ${input.title}`}>
             {input.title}
           </Link>
@@ -49,31 +52,31 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender
     },
     type: {
       renderCell: (type: string, input: InputSummary) => (
-        <ExpandedSectionToggleWrapper id={input.id}>
+        <ExpandedSectionToggleWrapper id={input.id} section={EXPANDED_SECTION}>
           <TypeCell type={type} inputTypes={inputTypes} />
         </ExpandedSectionToggleWrapper>
       ),
       width: 0.5,
     },
     desired_state: {
       renderCell: (_state: string, input: InputSummary) => (
-        <ExpandedSectionToggleWrapper id={input.id}>
+        <ExpandedSectionToggleWrapper id={input.id} section={EXPANDED_SECTION}>
           <InputStateBadge input={input} inputStates={inputStates} />
         </ExpandedSectionToggleWrapper>
       ),
       staticWidth: 130,
     },
     node_id: {
       renderCell: (_type: string, input: InputSummary) => (
-        <ExpandedSectionToggleWrapper id={input.id}>
+        <ExpandedSectionToggleWrapper id={input.id} section={EXPANDED_SECTION}>
           <NodeCell input={input} />
         </ExpandedSectionToggleWrapper>
       ),
       staticWidth: 150,
     },
     traffic: {
       renderCell: (_traffic: string, input: InputSummary) => (
-        <ExpandedSectionToggleWrapper id={input.id}>
+        <ExpandedSectionToggleWrapper id={input.id} section={EXPANDED_SECTION} align="right">
           <ThroughputCell input={input} />
         </ExpandedSectionToggleWrapper>
       ),
@@ -82,7 +85,7 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender
     },
     input_failures: {
       renderCell: (_failures: string, input: InputSummary) => (
-        <ExpandedSectionToggleWrapper id={input.id}>
+        <ExpandedSectionToggleWrapper id={input.id} section={EXPANDED_SECTION} align="right">
           <FailuresCell input={input} />
         </ExpandedSectionToggleWrapper>
       ),
@@ -91,15 +94,17 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender
     },
     address: {
       renderCell: (_address: string, input: InputSummary) => (
-        <ExpandedSectionToggleWrapper id={input.id}>
+        <ExpandedSectionToggleWrapper id={input.id} section={EXPANDED_SECTION}>
           {input.attributes?.bind_address || 'N/A'}
         </ExpandedSectionToggleWrapper>
       ),
       staticWidth: 125,
     },
     port: {
       renderCell: (_port: string, input: InputSummary) => (
-        <ExpandedSectionToggleWrapper id={input.id}>{input.attributes?.port || 'N/A'}</ExpandedSectionToggleWrapper>
+        <ExpandedSectionToggleWrapper id={input.id} section={EXPANDED_SECTION} align="right">
+          {input.attributes?.port || 'N/A'}
+        </ExpandedSectionToggleWrapper>
       ),
       staticWidth: 'matchHeader',
     },

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

@@ -25,7 +25,6 @@ export { default as FailuresCell } from './cells/FailuresCell';
 export { default as MessageCountCell } from './cells/MessageCountCell';
 export { default as ExtractorCountCell } from './cells/ExtractorCountCell';
 export { default as AssociatedStreamsCell } from './cells/AssociatedStreamsCell';
-export { default as ExpandedSectionToggleWrapper } from './ExpandedSectionToggleWrapper';
 export { default as ThroughputSection } from './expanded-sections/ThroughputSection';
 export { default as Connections } from './expanded-sections/Connections';
 export { default as NetworkIOStats } from './expanded-sections/NetworkIOStats';