add Inputs notifications for failed, setup and stopped state and improve input creation (#24283)

* add Inputs notifications for failed, setup and stopped state

* fix lint

* improve input creation

- open wizard after saving input

* remove navigation

* remove filter copy

* adjust to upstream changes

* Update InputsPage.tsx

* Update graylog2-web-interface/src/util/DocsHelper.ts

Co-authored-by: Laura Bergenthal-Grotlüschen <laura.bergenthalgrotlueschen@graylog.com>

* reset field after opening wizard

* fix typo

* add column width

---------

Co-authored-by: Mohamed OULD HOCINE <106236152+gally47@users.noreply.github.com>
Co-authored-by: Laura Bergenthal-Grotlüschen <laura.bergenthalgrotlueschen@graylog.com>

Author: 3 people

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

@@ -31,9 +31,11 @@ import useLocation from 'routing/useLocation';
 import { Col, Row, Button } from 'components/bootstrap';
 import { Select } from 'components/common';
 import { InputForm } from 'components/inputs';
-import type { ConfiguredInput } from 'components/messageloaders/Types';
+import type { ConfiguredInput, Input } from 'components/messageloaders/Types';
 import useInputTypes from 'components/inputs/useInputTypes';
 import { KEY_PREFIX } from 'hooks/usePaginatedInputs';
+import useFeature from 'hooks/useFeature';
+import { INPUT_SETUP_MODE_FEATURE_FLAG, InputSetupWizard } from 'components/inputs/InputSetupWizard';
 
 const StyledForm = styled.form`
   display: flex;
@@ -52,10 +54,27 @@ const CreateInputControl = () => {
   const [selectedInput, setSelectedInput] = useState<string | undefined>(undefined);
   const [selectedInputDefinition, setSelectedInputDefinition] = useState<InputDescription | undefined>(undefined);
   const [customInputConfiguration, setCustomInputConfiguration] = useState(undefined);
+  const [showWizard, setShowWizard] = useState<boolean>(false);
+  const [createdInputId, setCreatedInputId] = useState<string | null>(null);
+  const [createdInputData, setCreatedInputData] = useState<ConfiguredInput | null>(null);
   const sendTelemetry = useSendTelemetry();
   const { pathname } = useLocation();
   const inputTypes = useInputTypes();
   const queryClient = useQueryClient();
+  const inputSetupFeatureFlagIsEnabled = useFeature(INPUT_SETUP_MODE_FEATURE_FLAG);
+
+  const openWizard = (inputId: string, inputData: ConfiguredInput) => {
+    setCreatedInputId(inputId);
+    setCreatedInputData(inputData);
+    setShowWizard(true);
+  };
+
+  const closeWizard = () => {
+    setShowWizard(false);
+    setCreatedInputId(null);
+    setCreatedInputData(null);
+  };
+
   const resetFields = () => {
     setSelectedInput(undefined);
     setSelectedInputDefinition(undefined);
@@ -119,12 +138,30 @@ const CreateInputControl = () => {
       app_action_value: 'input-create',
     });
 
-    InputsActions.create(data).then(() => {
-      resetFields();
+    InputsActions.create(data).then((response: { id: string }) => {
       queryClient.invalidateQueries({ queryKey: KEY_PREFIX });
+
+      if (inputSetupFeatureFlagIsEnabled && response?.id) {
+        setTimeout(() => openWizard(response.id, data), 500);
+      }
+
+      resetFields();
     });
   };
 
+  const createInputForWizard = () => {
+    if (!createdInputId || !createdInputData) return null;
+
+    return {
+      id: createdInputId,
+      title: createdInputData.title,
+      type: selectedInput,
+      attributes: createdInputData.configuration,
+      global: createdInputData.global || false,
+      node: createdInputData.node || null,
+    } as Input;
+  };
+
   const CustomInputsConfiguration = customInputConfiguration ? customInputConfiguration.component : null;
 
   return (
@@ -165,6 +202,9 @@ const CreateInputControl = () => {
               />
             )
           ))}
+        {inputSetupFeatureFlagIsEnabled && showWizard && createdInputId && (
+          <InputSetupWizard input={createInputForWizard()} show={showWizard} onClose={closeWizard} />
+        )}
       </Col>
     </Row>
   );

graylog2-web-interface/src/components/inputs/InputSetupWizard/Wizard.tsx

@@ -85,7 +85,7 @@ const Wizard = ({ show, input, onClose }: Props) => {
   const orderedStepsConfig = orderedSteps.map((step) => steps[step]);
 
   return (
-    <Modal show onHide={onClose} backdrop={false}>
+    <Modal show onHide={onClose}>
       <Modal.Header>Input Setup Wizard</Modal.Header>
       <Modal.Body>
         <InputSetupWizardStepsProvider>

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

@@ -0,0 +1,108 @@
+/*
+ * Copyright (C) 2020 Graylog, Inc.
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the Server Side Public License, version 1,
+ * as published by MongoDB, Inc.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * Server Side Public License for more details.
+ *
+ * You should have received a copy of the Server Side Public License
+ * along with this program. If not, see
+ * <http://www.mongodb.com/licensing/server-side-public-license>.
+ */
+import * as React from 'react';
+import { useEffect, useMemo } from 'react';
+import styled, { css } from 'styled-components';
+
+import { Alert, Row, Col } from 'components/bootstrap';
+import useInputsStates from 'hooks/useInputsStates';
+import type { InputStates, InputState } from 'hooks/useInputsStates';
+import { useStore } from 'stores/connect';
+import { InputsStore, InputsActions } from 'stores/inputs/InputsStore';
+
+const INPUT_STATES = {
+  FAILED: 'FAILED',
+  FAILING: 'FAILING',
+  SETUP: 'SETUP',
+} as const;
+const StyledAlert = styled(Alert)(
+  ({ theme }) => css`
+    margin-top: 10px;
+
+    i {
+      color: ${theme.colors.gray[10]};
+    }
+
+    form {
+      margin-bottom: 0;
+    }
+  `,
+);
+
+const hasInputInState = (inputStates: InputStates, targetStates: InputState | Array<InputState>) => {
+  const statesToCheck = Array.isArray(targetStates) ? targetStates : [targetStates];
+
+  for (const nodeStates of Object.values(inputStates)) {
+    for (const inputState of Object.values(nodeStates)) {
+      if (statesToCheck.includes(inputState.state)) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+};
+
+const InputsNotifications = () => {
+  const { data: inputStates, isLoading } = useInputsStates();
+  const inputs = useStore(InputsStore, (state) => state.inputs);
+
+  useEffect(() => {
+    InputsActions.list();
+  }, []);
+
+  const notifications = useMemo(() => {
+    if (isLoading || !inputs || !inputStates) return null;
+
+    return {
+      hasStoppedInputs: inputs.some((input) => !inputStates[input.id]),
+      hasFailedInputs: hasInputInState(inputStates, [INPUT_STATES.FAILED, INPUT_STATES.FAILING]),
+      hasSetupInputs: hasInputInState(inputStates, INPUT_STATES.SETUP),
+    };
+  }, [inputs, inputStates, isLoading]);
+
+  const { hasStoppedInputs, hasFailedInputs, hasSetupInputs } = notifications;
+
+  if (!hasStoppedInputs && !hasFailedInputs && !hasSetupInputs) {
+    return null;
+  };
+
+  return (
+    <Row className="content">
+      <Col md={12}>
+        {hasFailedInputs && (
+          <StyledAlert bsStyle="danger" title="Some inputs are in failed state.">
+            One or more inputs are currently in failed state. Failed or failing inputs will not receive traffic until
+            fixed.
+          </StyledAlert>
+        )}
+        {hasSetupInputs && (
+          <StyledAlert bsStyle="warning" title="Some inputs are in setup mode.">
+            One or more inputs are currently in setup mode. Inputs will not receive traffic until started.
+          </StyledAlert>
+        )}
+        {hasStoppedInputs && (
+          <StyledAlert bsStyle="warning" title="Some inputs are stopped.">
+            One or more inputs are currently stopped. Stopped Inputs will not receive traffic until started.
+          </StyledAlert>
+        )}
+      </Col>
+    </Row>
+  );
+};
+
+export default InputsNotifications;

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

@@ -42,46 +42,53 @@ const customColumnRenderers = ({ inputTypes, inputStates }: Props): ColumnRender
           <TitleCell input={input} />
         </ExpandedSectionToggleWrapper>
       ),
+      width: 0.5
     },
     type: {
       renderCell: (type: string, input: InputSummary) => (
         <ExpandedSectionToggleWrapper id={input.id}>
           <TypeCell type={type} inputTypes={inputTypes} />
         </ExpandedSectionToggleWrapper>
       ),
+      width: 0.5,
     },
     desired_state: {
       renderCell: (_state: string, input: InputSummary) => (
         <ExpandedSectionToggleWrapper id={input.id}>
           <InputStateBadge input={input} inputStates={inputStates} />
         </ExpandedSectionToggleWrapper>
       ),
+      staticWidth: 130,
     },
     node_id: {
-      renderCell: (_node: string, input: InputSummary) => (
+      renderCell: (_type: string, input: InputSummary) => (
         <ExpandedSectionToggleWrapper id={input.id}>
           <NodeCell input={input} />
         </ExpandedSectionToggleWrapper>
       ),
+      staticWidth: 130,
     },
     traffic: {
       renderCell: (_traffic: string, input: InputSummary) => (
         <ExpandedSectionToggleWrapper id={input.id}>
           <ThroughputCell input={input} />
         </ExpandedSectionToggleWrapper>
       ),
+      staticWidth: 130,
     },
     address: {
       renderCell: (_address: string, input: InputSummary) => (
         <ExpandedSectionToggleWrapper id={input.id}>
           {input.attributes?.bind_address || 'N/A'}
         </ExpandedSectionToggleWrapper>
       ),
+      staticWidth: 100,
     },
     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/Constants.ts

@@ -31,8 +31,8 @@ const getInputsTableElements = () => {
       'address',
       'port',
     ],
+    defaultColumnOrder:  ['title', 'type', 'direction', 'desired_state', 'traffic', 'node_id', 'address', 'port'],
   };
-  const columnsOrder = ['title', 'type', 'direction', 'desired_state', 'traffic', 'node_id', 'address', 'port'];
   const additionalAttributes = [
     { id: 'traffic', title: 'Traffic' },
     { id: 'address', title: 'Address' },
@@ -41,7 +41,6 @@ const getInputsTableElements = () => {
 
   return {
     tableLayout,
-    columnsOrder,
     additionalAttributes,
   };
 };

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

@@ -52,7 +52,7 @@ const entityName = 'input';
 
 const InputsOverview = ({ node = undefined, inputTypeDescriptions, inputTypes }: Props) => {
   const { data: inputStates } = useInputsStates();
-  const { columnsOrder, tableLayout, additionalAttributes } = getInputsTableElements();
+  const { tableLayout, additionalAttributes } = getInputsTableElements();
   const { entityActions, expandedSections } = useTableElements({
     inputTypes,
     inputTypeDescriptions,
@@ -77,7 +77,6 @@ const InputsOverview = ({ node = undefined, inputTypeDescriptions, inputTypes }:
       )}
       <PaginatedEntityTable<Input>
         humanName="inputs"
-        columnsOrder={columnsOrder}
         additionalAttributes={additionalAttributes}
         queryHelpComponent={<QueryHelper entityName={entityName} />}
         entityActions={entityActions}

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

@@ -20,10 +20,12 @@ import { Row, Col } from 'components/bootstrap';
 import { DocumentTitle, PageHeader, Spinner } from 'components/common';
 import AppConfig from 'util/AppConfig';
 import { Link } from 'components/common/router';
+import DocsHelper from 'util/DocsHelper';
 import useProductName from 'brand-customization/useProductName';
 import { InputsOverview } from 'components/inputs/InputsOveriew';
 import useInputTypes from 'hooks/useInputTypes';
 import useInputTypesDescriptions from 'hooks/useInputTypesDescriptions';
+import InputsNotifications from 'components/inputs/InputsNotifications';
 
 const isCloud = AppConfig.isCloud();
 
@@ -38,32 +40,34 @@ const InputsPage = () => {
 
   return (
     <DocumentTitle title="Inputs">
-      <div>
-        <PageHeader title="Inputs">
-          {isCloud ? (
-            <>
-              <p>
-                {' '}
-                {productName} cloud accepts data via inputs. There are many types of inputs to choose from, but only
-                some can run directly in the cloud. You can launch and terminate them on this page.
-              </p>
-              <p>
-                If you are missing an input type on this page&apos;s list of available inputs, you can start the input
-                on a <Link to="/system/forwarders">Forwarder</Link>.
-              </p>
-            </>
-          ) : (
-            <span>
-              {productName} nodes accept data via inputs. Launch or terminate as many inputs as you want here.
-            </span>
-          )}
-        </PageHeader>
-        <Row className="content">
-          <Col md={12}>
-            <InputsOverview inputTypeDescriptions={inputTypeDescriptions} inputTypes={inputTypes} />
-          </Col>
-        </Row>
-      </div>
+      <InputsNotifications />
+      <PageHeader
+        title="Inputs"
+        documentationLink={{
+          title: 'Inputs documentation',
+          path: DocsHelper.PAGES.INPUTS,
+        }}>
+        {isCloud ? (
+          <>
+            <p>
+              {' '}
+              {productName} cloud accepts data via inputs. There are many types of inputs to choose from, but only some
+              can run directly in the cloud. You can launch and terminate them on this page.
+            </p>
+            <p>
+              If you are missing an input type on this page&apos;s list of available inputs, you can start the input on
+                a <Link to='/system/forwarders'>Forwarder</Link>.
+            </p>
+          </>
+        ) : (
+          <span>{productName} nodes accept data via inputs. Launch or terminate as many inputs as you want here.</span>
+        )}
+      </PageHeader>
+      <Row className="content">
+        <Col md={12}>
+          <InputsOverview inputTypeDescriptions={inputTypeDescriptions} inputTypes={inputTypes} />
+        </Col>
+      </Row>
     </DocumentTitle>
   );
 };

graylog2-web-interface/src/stores/inputs/InputsStore.ts

@@ -27,7 +27,7 @@ type InputsActionsType = {
   list: () => Promise<{ inputs: Array<Input>; total: number }>;
   get: (id: string) => Promise<Input>;
   getOptional: (id: string, showError: boolean) => Promise<Input>;
-  create: (input: ConfiguredInput) => Promise<void>;
+  create: (input: ConfiguredInput) => Promise<{ id: string }>;
   delete: (input: Input) => Promise<void>;
   update: (id: string, input: ConfiguredInput) => Promise<void>;
 };

graylog2-web-interface/src/util/DocsHelper.ts

@@ -47,6 +47,7 @@ const defaultPages = {
   LICENSE_MANAGEMENT: 'setting_up_graylog/operations_license_management.html',
   LOAD_BALANCERS: 'setting_up_graylog/load_balancer_integration.html',
   LOOKUPTABLES: 'making_sense_of_your_log_data/lookup_tables.html',
+  INPUTS: 'getting_in_log_data/inputs.html',
   OPERATIONS_CHANGELOG: 'changelogs/operations_changelog.html',
   OPEN_SEARCH_SETUP: 'setting_up_graylog/opensearch.htm#InstallingOpenSearch',
   PAGE_FLEXIBLE_DATE_CONVERTER: 'making_sense_of_your_log_data/extractors.htm#Normalization',