[8.x] [Observability Onboarding] Prevent showing duplcated AWS servic…

…es in Firehose flow (elastic#201613) (elastic#202894) # Backport This will backport the following commits from `main` to `8.x`: - [[Observability Onboarding] Prevent showing duplcated AWS services in Firehose flow (elastic#201613)](elastic#201613)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Mykola Harmash <[email protected]>
TattdCodeMonkey · Dec 6, 2024 · f55a0aa · f55a0aa
1 parent ba9ba62
commit f55a0aa
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 63 deletions.
diff --git a/...boarding/public/application/quickstart_flows/firehose/use_aws_service_get_started_list.ts b/...boarding/public/application/quickstart_flows/firehose/use_aws_service_get_started_list.ts
@@ -14,7 +14,7 @@ import { DISCOVER_APP_LOCATOR } from '@kbn/discover-plugin/common';
 import { AWSIndexName } from '../../../../common/aws_firehose';
 import { ObservabilityOnboardingContextValue } from '../../../plugin';
 
-interface AWSServiceGetStartedConfig {
+export interface AWSServiceGetStartedConfig {
   id: string;
   indexNameList: AWSIndexName[];
   title: string;

diff --git a/.../observability_onboarding/public/application/quickstart_flows/firehose/visualize_data.tsx b/.../observability_onboarding/public/application/quickstart_flows/firehose/visualize_data.tsx
@@ -9,19 +9,21 @@ import { EuiIcon, EuiSpacer, EuiText, useGeneratedHtmlId } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React, { useEffect, useState } from 'react';
 import useInterval from 'react-use/lib/useInterval';
-import { union } from 'lodash';
+import { unionBy } from 'lodash';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { ObservabilityOnboardingAppServices } from '../../..';
 import {
   FIREHOSE_CLOUDFORMATION_STACK_NAME,
   FIREHOSE_LOGS_STREAM_NAME,
-  type AWSIndexName,
 } from '../../../../common/aws_firehose';
 import { FETCH_STATUS, useFetcher } from '../../../hooks/use_fetcher';
 import { AccordionWithIcon } from '../shared/accordion_with_icon';
 import { GetStartedPanel } from '../shared/get_started_panel';
-import { useAWSServiceGetStartedList } from './use_aws_service_get_started_list';
+import {
+  type AWSServiceGetStartedConfig,
+  useAWSServiceGetStartedList,
+} from './use_aws_service_get_started_list';
 import { AutoRefreshCallout } from './auto_refresh_callout';
 import { ProgressCallout } from './progress_callout';
 import { HAS_DATA_FETCH_INTERVAL } from './utils';
@@ -36,12 +38,12 @@ interface Props {
 
 export function VisualizeData({ onboardingId, selectedCreateStackOption }: Props) {
   const accordionId = useGeneratedHtmlId({ prefix: 'accordion' });
-  const [orderedPopulatedAWSLogsIndexList, setOrderedPopulatedAWSLogsIndexList] = useState<
-    AWSIndexName[]
+  const [orderedVisibleAWSServiceList, setOrderedVisibleAWSServiceList] = useState<
+    AWSServiceGetStartedConfig[]
   >([]);
   const [shouldShowDataReceivedToast, setShouldShowDataReceivedToast] = useState<boolean>(true);
   const {
-    data: populatedAWSLogsIndexList,
+    data: populatedAWSIndexList,
     status,
     refetch,
   } = useFetcher((callApi) => {
@@ -60,12 +62,13 @@ export function VisualizeData({ onboardingId, selectedCreateStackOption }: Props
       context: { cloudServiceProvider },
     },
   } = useKibana<ObservabilityOnboardingAppServices>();
+  const awsServiceGetStartedConfigList = useAWSServiceGetStartedList();
 
   useEffect(() => {
     if (
       shouldShowDataReceivedToast &&
-      Array.isArray(populatedAWSLogsIndexList) &&
-      populatedAWSLogsIndexList.length > 0
+      Array.isArray(populatedAWSIndexList) &&
+      populatedAWSIndexList.length > 0
     ) {
       notifications?.toasts.addSuccess(
         {
@@ -90,17 +93,27 @@ export function VisualizeData({ onboardingId, selectedCreateStackOption }: Props
       setShouldShowDataReceivedToast(false);
     }
 
-    setOrderedPopulatedAWSLogsIndexList((currentList) =>
+    setOrderedVisibleAWSServiceList((currentList) =>
       /**
-       * Using union() to ensure items in the array are unique
-       * add stay in the insertion order to keep the order of
-       * the AWS services in the UI.
+       * unionBy() ensures uniqueness of the resulting list
+       * and preserves the order of the first list passed to it,
+       * which in turn keeps already visible services in the UI
+       * in place and new services are only appended to the end.
        */
-      union(currentList, populatedAWSLogsIndexList)
+      unionBy(
+        currentList,
+        awsServiceGetStartedConfigList.filter(({ indexNameList }) =>
+          indexNameList.some((indexName) => populatedAWSIndexList?.includes(indexName))
+        ),
+        'id'
+      )
     );
-  }, [notifications?.toasts, populatedAWSLogsIndexList, shouldShowDataReceivedToast]);
-
-  const awsServiceGetStartedConfigList = useAWSServiceGetStartedList();
+  }, [
+    awsServiceGetStartedConfigList,
+    notifications?.toasts,
+    populatedAWSIndexList,
+    shouldShowDataReceivedToast,
+  ]);
 
   useInterval(() => {
     if (REQUEST_PENDING_STATUS_LIST.includes(status)) {
@@ -110,7 +123,7 @@ export function VisualizeData({ onboardingId, selectedCreateStackOption }: Props
     refetch();
   }, HAS_DATA_FETCH_INTERVAL);
 
-  if (populatedAWSLogsIndexList === undefined) {
+  if (populatedAWSIndexList === undefined) {
     return null;
   }
 
@@ -127,56 +140,48 @@ export function VisualizeData({ onboardingId, selectedCreateStackOption }: Props
 
       <EuiSpacer size="m" />
 
-      {orderedPopulatedAWSLogsIndexList.length === 0 && <ProgressCallout />}
-      {orderedPopulatedAWSLogsIndexList.length > 0 && <AutoRefreshCallout />}
+      {orderedVisibleAWSServiceList.length === 0 && <ProgressCallout />}
+      {orderedVisibleAWSServiceList.length > 0 && <AutoRefreshCallout />}
 
       <EuiSpacer size="m" />
 
       <div data-test-subj="observabilityOnboardingAWSServiceList">
-        {orderedPopulatedAWSLogsIndexList.map((indexName, index) => {
-          const getStartedConfig = awsServiceGetStartedConfigList.find(({ indexNameList }) =>
-            indexNameList.includes(indexName)
-          );
-
-          if (!getStartedConfig) {
-            return null;
+        {orderedVisibleAWSServiceList.map(
+          ({ id, actionLinks, title, logoURL, previewImage }, index) => {
+            return (
+              <AccordionWithIcon
+                data-test-subj={`observabilityOnboardingAWSService-${id}`}
+                key={id}
+                id={`${accordionId}_${id}`}
+                icon={<EuiIcon type={logoURL} size="l" />}
+                title={title}
+                initialIsOpen={true}
+                borders={
+                  index === 0 || index === orderedVisibleAWSServiceList.length - 1
+                    ? 'none'
+                    : 'horizontal'
+                }
+              >
+                <GetStartedPanel
+                  onboardingFlowType="firehose"
+                  dataset={id}
+                  telemetryEventContext={{
+                    firehose: {
+                      selectedCreateStackOption,
+                      cloudServiceProvider,
+                    },
+                  }}
+                  integration="aws"
+                  newTab
+                  isLoading={false}
+                  actionLinks={actionLinks}
+                  previewImage={previewImage}
+                  onboardingId={onboardingId}
+                />
+              </AccordionWithIcon>
+            );
           }
-
-          const { id, actionLinks, title, logoURL, previewImage } = getStartedConfig;
-
-          return (
-            <AccordionWithIcon
-              data-test-subj={`observabilityOnboardingAWSService-${id}`}
-              key={id}
-              id={`${accordionId}_${id}`}
-              icon={<EuiIcon type={logoURL} size="l" />}
-              title={title}
-              initialIsOpen={true}
-              borders={
-                index === 0 || index === orderedPopulatedAWSLogsIndexList.length - 1
-                  ? 'none'
-                  : 'horizontal'
-              }
-            >
-              <GetStartedPanel
-                onboardingFlowType="firehose"
-                dataset={indexName}
-                telemetryEventContext={{
-                  firehose: {
-                    selectedCreateStackOption,
-                    cloudServiceProvider,
-                  },
-                }}
-                integration="aws"
-                newTab
-                isLoading={false}
-                actionLinks={actionLinks}
-                previewImage={previewImage}
-                onboardingId={onboardingId}
-              />
-            </AccordionWithIcon>
-          );
-        })}
+        )}
       </div>
     </>
   );