[Feature] Auto trigger schema setup in assets creation flow of get st…

…arted page (#2200) * updated release notes (#1997) Signed-off-by: sumukhswamy <[email protected]> * updated release notes (#1997) Signed-off-by: sumukhswamy <[email protected]> * add template creation to assests creation flow Signed-off-by: Eric <[email protected]> * adopt recent UI changes for the same flow Signed-off-by: Eric <[email protected]> * fix lint issue Signed-off-by: Eric <[email protected]> * add types Signed-off-by: Eric <[email protected]> * update snapshots Signed-off-by: Eric <[email protected]> * fix default selection between metrics / traces Signed-off-by: Adam Tackett <[email protected]> * update snapshots Signed-off-by: Eric <[email protected]> --------- Signed-off-by: sumukhswamy <[email protected]> Signed-off-by: Eric <[email protected]> Signed-off-by: Adam Tackett <[email protected]> Co-authored-by: Sumukh Swamy <[email protected]> Co-authored-by: Adam Tackett <[email protected]>
opensearch-project · Oct 14, 2024 · 3939809 · 3939809
1 parent f68eba1
commit 3939809
Show file tree

Hide file tree

Showing 13 changed files with 250 additions and 15 deletions.
diff --git a/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/log_config.test.tsx.snap
@@ -20,6 +20,9 @@ exports[`Log Config component renders empty log config 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {
@@ -687,6 +690,9 @@ exports[`Log Config component renders with query 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {

diff --git a/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/service_config.test.tsx.snap
@@ -20,6 +20,9 @@ exports[`Service Config component renders empty service config 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {
@@ -1230,6 +1233,9 @@ exports[`Service Config component renders with one service selected 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {

diff --git a/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap b/public/components/application_analytics/__tests__/__snapshots__/trace_config.test.tsx.snap
@@ -19,6 +19,9 @@ exports[`Trace Config component renders empty trace config 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {
@@ -942,6 +945,9 @@ exports[`Trace Config component renders with one trace selected 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {

diff --git a/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap b/public/components/custom_panels/__tests__/__snapshots__/custom_panel_view.test.tsx.snap
@@ -1167,6 +1167,9 @@ exports[`Panels View Component renders panel view container with visualizations
           ],
         },
         "getIsVisible$": [MockFunction],
+        "globalSearch": Object {
+          "getAllSearchCommands": [MockFunction],
+        },
         "logos": Object {
           "AnimatedMark": Object {
             "dark": Object {
@@ -3069,6 +3072,9 @@ exports[`Panels View Component renders panel view container with visualizations
                           ],
                         },
                         "getIsVisible$": [MockFunction],
+                        "globalSearch": Object {
+                          "getAllSearchCommands": [MockFunction],
+                        },
                         "logos": Object {
                           "AnimatedMark": Object {
                             "dark": Object {
@@ -3527,6 +3533,9 @@ exports[`Panels View Component renders panel view container without visualizatio
           ],
         },
         "getIsVisible$": [MockFunction],
+        "globalSearch": Object {
+          "getAllSearchCommands": [MockFunction],
+        },
         "logos": Object {
           "AnimatedMark": Object {
             "dark": Object {
@@ -5313,6 +5322,9 @@ exports[`Panels View Component renders panel view container without visualizatio
                           ],
                         },
                         "getIsVisible$": [MockFunction],
+                        "globalSearch": Object {
+                          "getAllSearchCommands": [MockFunction],
+                        },
                         "logos": Object {
                           "AnimatedMark": Object {
                             "dark": Object {

diff --git a/...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap b/...s/custom_panels/panel_modules/panel_grid/__tests__/__snapshots__/panel_grid.test.tsx.snap
@@ -177,6 +177,9 @@ exports[`Panel Grid Component renders panel grid component with empty visualizat
         ],
       },
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {

diff --git a/public/components/getting_started/components/getting_started_collectData.tsx b/public/components/getting_started/components/getting_started_collectData.tsx
@@ -21,6 +21,7 @@ import {
   EuiButton,
   EuiIcon,
   EuiCard,
+  EuiSelectableOption,
 } from '@elastic/eui';
 import React, { useEffect, useState } from 'react';
 
@@ -52,7 +53,7 @@ interface CollectAndShipDataProps {
   selectedDataSourceLabel: string;
 }
 
-interface CollectorOption {
+export interface CollectorOption {
   label: string;
   value: string;
 }
@@ -70,6 +71,21 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
   const [collectorOptions, setCollectorOptions] = useState<CollectorOption[]>([]);
   const [patternsContent, setPatternsContent] = useState<any[]>([]);
 
+  const getTelemetryOption = (collectionMethodOtel: string) => {
+    switch (collectionMethodOtel) {
+      case cardTwo:
+        return { label: 'Open Telemetry', value: 'otelMetrics' };
+      case cardThree:
+        return { label: 'Open Telemetry', value: 'otelTraces' };
+      default:
+        return { label: 'Open Telemetry', value: 'otelLogs' };
+    }
+  };
+
+  const [selectedIntegration, setSelectedIntegration] = useState<
+    Array<EuiSelectableOption<CollectorOption>>
+  >([getTelemetryOption(cardOne)]);
+
   const technologyJsonMap: Record<string, any> = {
     otelLogs: otelJsonLogs,
     otelMetrics: otelJsonMetrics,
@@ -122,13 +138,14 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
     };
   }, [specificMethod]);
 
-  const handleSpecificMethodChange = (newOption: any) => {
+  const handleSpecificMethodChange = (newOption: Array<EuiSelectableOption<CollectorOption>>) => {
     const selectedOptionValue = newOption[0]?.value;
 
     if (selectedOptionValue === specificMethod) {
       return;
     }
 
+    setSelectedIntegration(newOption);
     setSpecificMethod(selectedOptionValue);
     setSelectedWorkflow('');
     setGettingStarted(null);
@@ -138,7 +155,8 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
   // Auto-select first collector if nothing is selected and a collection method is set
   useEffect(() => {
     if (collectorOptions.length > 0 && !specificMethod && collectionMethod) {
-      handleSpecificMethodChange([{ value: collectorOptions[0].value }]);
+      const telemetryOption = getTelemetryOption(collectionMethod);
+      handleSpecificMethodChange([{ ...telemetryOption }]);
     }
   }, [collectorOptions, specificMethod, collectionMethod]);
 
@@ -151,17 +169,19 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
 
     if (value === cardOne) {
       setCollectorOptions([
-        { label: 'Open Telemetry', value: 'otelLogs' },
+        getTelemetryOption(cardOne),
         { label: 'Nginx', value: 'nginx' },
         { label: 'Java', value: 'java' },
         { label: 'Python', value: 'python' },
         { label: 'Golang', value: 'golang' },
       ]);
     } else if (value === cardTwo) {
-      setCollectorOptions([{ label: 'Open Telemetry', value: 'otelMetrics' }]);
+      setCollectorOptions([getTelemetryOption(cardTwo)]);
     } else if (value === cardThree) {
-      setCollectorOptions([{ label: 'Open Telemetry', value: 'otelTraces' }]);
+      setCollectorOptions([getTelemetryOption(cardThree)]);
     }
+
+    setSelectedIntegration([getTelemetryOption(value)]);
   };
 
   const renderSpecificMethodDropdown = () => {
@@ -200,7 +220,9 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
             singleSelection={{ asPlainText: true }}
             options={optionsWithIcons}
             selectedOptions={selectedOption ? [selectedOption] : []}
-            onChange={(newOptions) => handleSpecificMethodChange(newOptions)}
+            onChange={(newOptions) =>
+              handleSpecificMethodChange(newOptions as Array<EuiSelectableOption<CollectorOption>>)
+            }
             renderOption={(option) => (
               <div style={{ display: 'flex', alignItems: 'center' }}>
                 {option.prepend}
@@ -347,7 +369,15 @@ export const CollectAndShipData: React.FC<CollectAndShipDataProps> = ({
       </EuiListGroup>
       <EuiButton
         onClick={async () => {
-          await UploadAssets(specificMethod, selectedDataSourceId, selectedDataSourceLabel);
+          await UploadAssets(
+            specificMethod,
+            selectedDataSourceId,
+            selectedDataSourceLabel,
+            technologyJsonMap[specificMethod]?.['getting-started']?.schema ||
+              technologyJsonMap[specificMethod]?.schema ||
+              [],
+            selectedIntegration
+          );
         }}
         fill
       >

diff --git a/public/components/getting_started/components/utils.tsx b/public/components/getting_started/components/utils.tsx
@@ -3,8 +3,27 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
+import { MappingTypeMapping } from '@opensearch-project/opensearch/api/types';
+import { EuiSelectableOption } from '@elastic/eui';
 import { coreRefs } from '../../../framework/core_refs';
 import { useToast } from '../../../../public/components/common/toast';
+import { CollectorOption } from './getting_started_collectData';
+
+export interface ICollectorIndexTemplate {
+  name: string;
+  templatePath: string;
+  template: MappingTypeMapping;
+}
+
+export interface ICollectorSchema {
+  alias: string;
+  content: string;
+  description: string;
+  'index-pattern-name': string;
+  type: string;
+  'index-template': string;
+  info: string[];
+}
 
 const fetchAssets = async (tutorialId: string, assetFilter?: 'dashboards' | 'indexPatterns') => {
   const assetFilterParam = assetFilter ? `${assetFilter}/` : '';
@@ -20,16 +39,51 @@ const fetchAssets = async (tutorialId: string, assetFilter?: 'dashboards' | 'ind
   return responeData;
 };
 
-export const UploadAssets = async (tutorialId: string, mdsId: string, mdsLabel: string) => {
+export const UploadAssets = async (
+  tutorialId: string,
+  mdsId: string,
+  mdsLabel: string,
+  schema: ICollectorSchema[],
+  selectedIntegration: Array<EuiSelectableOption<CollectorOption>>
+) => {
   const { setToast } = useToast();
   const http = coreRefs.http;
 
+  let curIntegration: string | undefined;
+  if (selectedIntegration !== undefined) {
+    if (/^otel[A-Za-z]+$/i.test(selectedIntegration[0].value)) {
+      curIntegration = 'otel-services';
+    } else if (selectedIntegration[0].value === 'nginx') {
+      curIntegration = selectedIntegration[0].value;
+    }
+  }
+
   try {
+    // Auto-generate index templates based on the selected integration
+    let templates: ICollectorIndexTemplate[] = [];
+    if (curIntegration !== undefined) {
+      const indexTemplateMappings = await http!.get(
+        `/api/integrations/repository/${curIntegration}/schema`
+      );
+      templates = schema.reduce((acc: ICollectorIndexTemplate[], sh) => {
+        const templateMapping = indexTemplateMappings?.data?.mappings?.[sh.type.toLowerCase()];
+        if (!!templateMapping) {
+          acc.push({
+            name: sh.content.match(/[^/]+$/)?.[0] || '',
+            templatePath: sh.content.match(/PUT\s+(.+)/)?.[1] || '',
+            template: templateMapping,
+          });
+        }
+        return acc;
+      }, []);
+    }
+
     const response = await http!.post(`/api/observability/gettingStarted/createAssets`, {
       body: JSON.stringify({
         mdsId,
         mdsLabel,
         tutorialId,
+        indexTemplates: templates,
       }),
     });
 

diff --git a/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap b/public/components/metrics/view/__tests__/__snapshots__/metrics_grid.test.tsx.snap
@@ -30,6 +30,9 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
         "getHelpExtension$": [MockFunction],
         "getIsNavDrawerLocked$": [MockFunction],
         "getIsVisible$": [MockFunction],
+        "globalSearch": Object {
+          "getAllSearchCommands": [MockFunction],
+        },
         "logos": Object {
           "AnimatedMark": Object {
             "dark": Object {
@@ -204,6 +207,9 @@ exports[`Metrics Grid Component renders Metrics Grid Component 1`] = `
           "getHelpExtension$": [MockFunction],
           "getIsNavDrawerLocked$": [MockFunction],
           "getIsVisible$": [MockFunction],
+          "globalSearch": Object {
+            "getAllSearchCommands": [MockFunction],
+          },
           "logos": Object {
             "AnimatedMark": Object {
               "dark": Object {

diff --git a/...ents/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap b/...ents/trace_analytics/components/dashboard/__tests__/__snapshots__/dashboard.test.tsx.snap
@@ -33,6 +33,9 @@ exports[`Dashboard component renders dashboard 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {
@@ -423,6 +426,9 @@ exports[`Dashboard component renders dashboard 1`] = `
         "getHelpExtension$": [MockFunction],
         "getIsNavDrawerLocked$": [MockFunction],
         "getIsVisible$": [MockFunction],
+        "globalSearch": Object {
+          "getAllSearchCommands": [MockFunction],
+        },
         "logos": Object {
           "AnimatedMark": Object {
             "dark": Object {
@@ -1285,6 +1291,9 @@ exports[`Dashboard component renders empty dashboard 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {
@@ -1674,6 +1683,9 @@ exports[`Dashboard component renders empty dashboard 1`] = `
         "getHelpExtension$": [MockFunction],
         "getIsNavDrawerLocked$": [MockFunction],
         "getIsVisible$": [MockFunction],
+        "globalSearch": Object {
+          "getAllSearchCommands": [MockFunction],
+        },
         "logos": Object {
           "AnimatedMark": Object {
             "dark": Object {
@@ -2536,6 +2548,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
       "getHelpExtension$": [MockFunction],
       "getIsNavDrawerLocked$": [MockFunction],
       "getIsVisible$": [MockFunction],
+      "globalSearch": Object {
+        "getAllSearchCommands": [MockFunction],
+      },
       "logos": Object {
         "AnimatedMark": Object {
           "dark": Object {
@@ -2927,6 +2942,9 @@ exports[`Dashboard component renders empty jaeger dashboard 1`] = `
         "getHelpExtension$": [MockFunction],
         "getIsNavDrawerLocked$": [MockFunction],
         "getIsVisible$": [MockFunction],
+        "globalSearch": Object {
+          "getAllSearchCommands": [MockFunction],
+        },
         "logos": Object {
           "AnimatedMark": Object {
             "dark": Object {