Update inputs overview pages (#24519)

* move notifications under title

- remove stop input button color

* update inputs overview

* fix quotes

Author: ousmaneo

graylog2-web-interface/src/components/inputs/InputStateControl.tsx

@@ -85,7 +85,7 @@ const InputStateControl = ({ input, openWizard, inputStates }: Props) => {
 
   if (isInputRunning(inputStates, input.id)) {
     return (
-      <Button bsStyle="danger" bsSize="xsmall" onClick={stopInput} disabled={isLoading}>
+      <Button bsSize="xsmall" onClick={stopInput} disabled={isLoading}>
         {isLoading ? 'Stopping...' : 'Stop input'}
       </Button>
     );

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

@@ -66,15 +66,15 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender
           <NodeCell input={input} />
         </ExpandedSectionToggleWrapper>
       ),
-      staticWidth: 130,
+      staticWidth: 150,
     },
     traffic: {
       renderCell: (_traffic: string, input: InputSummary) => (
         <ExpandedSectionToggleWrapper id={input.id}>
           <ThroughputCell input={input} />
         </ExpandedSectionToggleWrapper>
       ),
-      staticWidth: 130,
+      staticWidth: 180,
     },
     address: {
       renderCell: (_address: string, input: InputSummary) => (

graylog2-web-interface/src/components/inputs/InputsOveriew/Constants.ts

@@ -19,7 +19,7 @@ import type { Sort } from 'stores/PaginationTypes';
 const getInputsTableElements = () => {
   const tableLayout = {
     entityTableId: 'inputs',
-    defaultPageSize: 20,
+    defaultPageSize: 50,
     defaultSort: { attributeId: 'title', direction: 'asc' } as Sort,
     defaultDisplayedAttributes: [
       'title',
@@ -33,8 +33,9 @@ const getInputsTableElements = () => {
     ],
     defaultColumnOrder: ['title', 'type', 'direction', 'desired_state', 'traffic', 'node_id', 'address', 'port'],
   };
+
   const additionalAttributes = [
-    { id: 'traffic', title: 'Traffic' },
+    { id: 'traffic', title: 'Traffic Last Minute' },
     { id: 'address', title: 'Address' },
     { id: 'port', title: 'Port' },
   ];

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

@@ -77,7 +77,7 @@ const ThroughputCell = ({ input }: Props) => {
       ref={spanRef}
       title={`${throughputSectionIsOpen ? 'Hide' : 'Show'} metrics`}
       onClick={toggleTrafficSection}>
-      {!isNaN(incomingMessages) ? formatCount(incomingMessages) : 0} msg/s Last Minute
+      {!isNaN(incomingMessages) ? formatCount(incomingMessages) : 0} msg/s
     </StyledSpan>
   );
 };

graylog2-web-interface/src/pages/InputsPage.tsx

@@ -40,7 +40,6 @@ const InputsPage = () => {
 
   return (
     <DocumentTitle title="Inputs">
-      <InputsNotifications />
       <PageHeader
         title="Inputs"
         documentationLink={{
@@ -63,6 +62,7 @@ const InputsPage = () => {
           <span>{productName} nodes accept data via inputs. Launch or terminate as many inputs as you want here.</span>
         )}
       </PageHeader>
+      <InputsNotifications />
       <Row className="content">
         <Col md={12}>
           <InputsOverview inputTypeDescriptions={inputTypeDescriptions} inputTypes={inputTypes} />