Reusable HelpPopover (#22060)

* HelpPopover initial setup

* implemented new HelpPopoverButton

* add bsStyle prop

Author: gally47

graylog2-web-interface/src/components/inputs/InputDiagnosis/DiagnosisHelp.tsx renamed to graylog2-web-interface/src/components/common/HelpPopoverButton.tsx

@@ -17,33 +17,34 @@
 import type { PropsWithChildren } from 'react';
 import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
+import type { ColorVariant } from '@graylog/sawmill';
 
 import { Button } from 'components/bootstrap';
 import { Icon } from 'components/common';
 import Popover from 'components/common/Popover';
+import type { BsSize } from 'components/bootstrap/types';
 
 type Props = PropsWithChildren<{
-  helpText: string;
+  helpText: string|React.ReactNode;
+  bsStyle?: ColorVariant;
+  bsSize?: BsSize;
 }>;
 
-const StyledButton = styled(Button)(
-  ({ theme }) => css`
-    padding: 1px 0;
-    font-size: ${theme.fonts.size.body};
-  `,
-);
+const StyledButton = styled(Button)`
+  padding: 1px 0;
+`;
 
 const StyledOverlay = styled(Popover.Dropdown)`
   white-space: pre-line;
 `;
 
-const HelpIcon = styled(Icon)(
-  ({ theme }) => css`
-    color: ${theme.colors.variant.info};
+const StyledIcon = styled(Icon)<{ $bsStyle: ColorVariant }>(
+  ({ $bsStyle, theme }) => css`
+    color: ${theme.colors.variant[$bsStyle]};
   `,
 );
 
-const DiagnosisHelp = ({ helpText, children = null }: Props) => {
+const HelpPopoverButton = ({ helpText, bsStyle = "info", bsSize = "medium" }: Props) => {
   const [showHelp, setShowHelp] = useState(false);
   const toggleHelp = () => setShowHelp((cur) => !cur);
 
@@ -57,13 +58,13 @@ const DiagnosisHelp = ({ helpText, children = null }: Props) => {
       closeOnClickOutside
       withinPortal>
       <Popover.Target>
-        <StyledButton bsStyle="transparent" bsSize={children ? 'xs' : 'medium'} onClick={toggleHelp}>
-          {children || <HelpIcon name="help" />}
+        <StyledButton bsStyle="transparent" bsSize={bsSize} onClick={toggleHelp}>
+          <StyledIcon name="help" $bsStyle={bsStyle} />
         </StyledButton>
       </Popover.Target>
       <StyledOverlay>{helpText}</StyledOverlay>
     </Popover>
   );
 };
 
-export default DiagnosisHelp;
+export default HelpPopoverButton;

graylog2-web-interface/src/components/datanode/DataNodeUpgrade/DataNodeUpgradeHelp.tsx

@@ -21,8 +21,8 @@ import { Section } from 'components/common';
 import StatusColorIndicator from 'components/common/StatusColorIndicator';
 import { ListGroup, ListGroupItem } from 'components/bootstrap';
 import usePluginEntities from 'hooks/usePluginEntities';
+import HelpPopoverButton from 'components/common/HelpPopoverButton';
 
-import DiagnosisHelp from './DiagnosisHelp';
 import { DIAGNOSIS_HELP } from './Constants';
 
 type Props = {
@@ -83,7 +83,7 @@ const DiagnosisMessageErrors = ({ messageErrors, inputId }: Props) => {
     <Section
       preHeaderSection={<StatusColorIndicator radius="50%" bsStyle={hasError ? 'danger' : 'gray'} />}
       headerLeftSection={
-        <DiagnosisHelp
+        <HelpPopoverButton
           helpText={`Message Error at Input:
             ${DIAGNOSIS_HELP.MESSAGE_ERROR_AT_INPUT}
 

graylog2-web-interface/src/components/inputs/InputDiagnosis/DiagnosisMessageErrors.tsx

@@ -29,7 +29,7 @@ import useDataNodeUpgradeStatus, {
 import type { DataNodeInformation } from 'components/datanode/hooks/useDataNodeUpgradeStatus';
 import ClusterConfigurationPageNavigation from 'components/cluster-configuration/ClusterConfigurationPageNavigation';
 import DocumentationLink from 'components/support/DocumentationLink';
-import DataNodeUpgradeHelp from 'components/datanode/DataNodeUpgrade/DataNodeUpgradeHelp';
+import HelpPopoverButton from 'components/common/HelpPopoverButton';
 
 const StyledHorizontalDl = styled.dl(
   ({ theme }) => css`
@@ -186,8 +186,25 @@ const DataNodeUpgradePage = () => {
             <h3>
               <Label bsStyle={getClusterHealthStyle(data?.cluster_state?.status)} bsSize="xs">
                 {data?.cluster_state?.cluster_name}: {data?.cluster_state?.status}
-              </Label>
-              <DataNodeUpgradeHelp />
+              </Label>&nbsp;
+              <HelpPopoverButton helpText={
+                <>
+                  <p>How does my cluster change state during the rolling upgrade?</p>
+                  <p>
+                    RED - if you are using indices with no replication and upgrade the node hosting the shards of these indices,
+                    the cluster will go to a red state and no data will be ingested into or searchable from these indices.
+                  </p>
+                  <p>
+                    YELLOW - after starting the upgrade of a node, shard allocation will be set to no replication to allow
+                    OpenSearch to use only the available shards.
+                  </p>
+                  <p>
+                    After a node has been upgraded and you click on <em>Confirm Upgrade</em>, shard replication will be re-enabled
+                    and all shards that were unavailable due to the node being upgraded will be re-allocated and the cluster will
+                    return to a GREEN state.
+                  </p>
+                </>
+              } />
             </h3>
             <StyledHorizontalDl>
               <dt>Shard Replication:</dt>

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

@@ -36,8 +36,8 @@ import type { InputState } from 'stores/inputs/InputStatesStore';
 import SectionGrid from 'components/common/Section/SectionGrid';
 import StatusColorIndicator from 'components/common/StatusColorIndicator';
 import DiagnosisMessageErrors from 'components/inputs/InputDiagnosis/DiagnosisMessageErrors';
-import DiagnosisHelp from 'components/inputs/InputDiagnosis/DiagnosisHelp';
 import { DIAGNOSIS_HELP } from 'components/inputs/InputDiagnosis/Constants';
+import HelpPopoverButton from 'components/common/HelpPopoverButton';
 
 const LeftCol = styled.div(
   ({ theme }) => css`
@@ -250,7 +250,7 @@ const InputDiagnosisPage = () => {
               title="Information"
               preHeaderSection={<StatusColorIndicator radius="50%" />}
               headerLeftSection={
-                <DiagnosisHelp
+                <HelpPopoverButton
                   helpText={`This Input Is Listening On:
                         ${DIAGNOSIS_HELP.INPUT_LISTENING_ON}
             
@@ -296,7 +296,7 @@ const InputDiagnosisPage = () => {
                   bsStyle={isInputStateDown ? 'danger' : 'success'}
                 />
               }
-              headerLeftSection={<DiagnosisHelp helpText={DIAGNOSIS_HELP.INPUT_STATE} />}>
+              headerLeftSection={<HelpPopoverButton helpText={DIAGNOSIS_HELP.INPUT_STATE} />}>
               <StyledP>
                 Number of Graylog nodes the Input is configured to run, and on how many it is running. If any are not
                 running, click to see any associated error messages.
@@ -402,7 +402,7 @@ const InputDiagnosisPage = () => {
                 <StatusColorIndicator radius="50%" bsStyle={hasReceivedMessageMetrics ? 'success' : 'gray'} />
               }
               headerLeftSection={
-                <DiagnosisHelp
+                <HelpPopoverButton
                   helpText={`Empty Messages discarded:
                 ${DIAGNOSIS_HELP.EMPTY_MESSAGES_DISCARDED}
 
@@ -451,7 +451,7 @@ const InputDiagnosisPage = () => {
           <Section
             preHeaderSection={<StatusColorIndicator radius="50%" bsStyle={hasReceivedMessage ? 'success' : 'gray'} />}
             title="Received Message count by Stream"
-            headerLeftSection={<DiagnosisHelp helpText={DIAGNOSIS_HELP.RECEIVED_MESSAGE_COUNT_BY_STREAM} />}
+            headerLeftSection={<HelpPopoverButton helpText={DIAGNOSIS_HELP.RECEIVED_MESSAGE_COUNT_BY_STREAM} />}
             actions={<ShowReceivedMessagesButton input={input} />}>
             <StyledP>
               Messages successfully ingested into Graylog from this Input in the last 15 minutes. Click on the Stream to