[FEATURE] Create detector \ Refactor and move field mapping to first …

…the page of create detector feature opensearch-project#495

Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>

cypress/integration/1_detectors.spec.js

@@ -86,7 +86,7 @@ describe('Detectors', () => {
 
     cy.get('.euiCallOut')
       .should('be.visible')
-      .contains('The selected log sources contain different types of logs');
+      .contains('The selected log sources contain different log types');
   });
 
   it('...can be created', () => {
@@ -140,12 +140,6 @@ describe('Detectors', () => {
       });
     });
 
-    // Click Next button to continue
-    cy.get('button').contains('Next').click({ force: true });
-
-    // Check that correct page now showing
-    cy.contains('Configure field mapping');
-
     // Select appropriate names to map fields to
     for (let field_name in testMappings.properties) {
       const mappedTo = testMappings.properties[field_name].path;
@@ -155,8 +149,8 @@ describe('Detectors', () => {
       });
     }
 
-    // Continue to next page
-    cy.get('button').contains('Next').click({ force: true, timeout: 2000 });
+    // Click Next button to continue
+    cy.get('button').contains('Next').click({ force: true });
 
     // Check that correct page now showing
     cy.contains('Set up alerts');
@@ -245,11 +239,10 @@ describe('Detectors', () => {
       .realType('Edited description');
 
     // Change input source
-    cy.get(`[data-test-subj="define-detector-select-data-source"]`)
-      .find('input')
-      .ospClear()
-      .focus()
-      .realType(cypressIndexWindows);
+    cy.get('.euiBadge__iconButton > .euiIcon').click({ force: true });
+    cy.get(`[data-test-subj="define-detector-select-data-source"]`).type(
+      `${cypressIndexWindows}{enter}`
+    );
 
     // Change detector scheduling
     cy.get(`[data-test-subj="detector-schedule-number-select"]`).ospClear().focus().realType('10');

public/pages/CreateDetector/components/DefineDetector/components/DetectorDataSource/DetectorDataSource.tsx

@@ -25,7 +25,7 @@ import { FieldMappingService } from '../../../../../../services';
 interface DetectorDataSourceProps {
   detectorIndices: string[];
   indexService: IndexService;
-  fieldMappingService: FieldMappingService;
+  fieldMappingService?: FieldMappingService;
   isEdit: boolean;
   onDetectorInputIndicesChange: (selectedOptions: EuiComboBoxOptionOption<string>[]) => void;
   notifications: NotificationsStart;
@@ -109,11 +109,11 @@ export default class DetectorDataSource extends Component<
     for (const indexName of allIndices) {
       if (!this.indicesMappings[indexName]) {
         const detectorType = this.props.detector_type.toLowerCase();
-        const result = await this.props.fieldMappingService.getMappingsView(
+        const result = await this.props.fieldMappingService?.getMappingsView(
           indexName,
           detectorType
         );
-        result.ok && (this.indicesMappings[indexName] = result.response.unmapped_field_aliases);
+        result?.ok && (this.indicesMappings[indexName] = result.response.unmapped_field_aliases);
       }
     }
 

public/pages/Detectors/components/UpdateBasicDetails/UpdateBasicDetails.tsx

@@ -222,7 +222,7 @@ export const UpdateDetectorBasicDetails: React.FC<UpdateDetectorBasicDetailsProp
         notifications={props.notifications}
         indexService={services?.indexService as IndexService}
         detectorIndices={inputs[0].detector_input.indices}
-        filedMappingService={services?.fieldMappingService}
+        fieldMappingService={services?.fieldMappingService}
         onDetectorInputIndicesChange={onDetectorInputIndicesChange}
       />
       <EuiSpacer size={'xl'} />