Update detector details component (opensearch-project#504)

* [FEATURE] Update detector details component opensearch-project#502 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> * [FEATURE] Update detector details component opensearch-project#502 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> * [FEATURE] Update detector details component opensearch-project#502 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> * [FEATURE] Update detector details component opensearch-project#502 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> * Feature] update detector details component opensearch-project#504 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> * Update detector details component opensearch-project#504 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> * Update detector details component opensearch-project#504 Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com> --------- Signed-off-by: Jovan Cvetkovic <jovanca.cvetkovic@gmail.com>
riysaxen-amzn · Apr 12, 2023 · fdcc9c5 · fdcc9c5
1 parent cb8c0a0
commit fdcc9c5
Show file tree

Hide file tree

Showing 13 changed files with 509 additions and 184 deletions.
diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
@@ -339,7 +339,7 @@ describe('Detectors', () => {
     cy.contains('Active rules (13)');
   });
 
-  it('...should update field mappings if data source is changed', () => {
+  it('...should show field mappings if data source is changed', () => {
     // Click on detector name
     cy.contains(detectorName).click({ force: true });
     cy.waitForPageLoad('detector-details', {
@@ -365,7 +365,7 @@ describe('Detectors', () => {
     cy.get('.reviewFieldMappings').should('be.visible');
   });
 
-  it('...should update field mappings if rule selection is changed', () => {
+  it('...should show field mappings if rule selection is changed', () => {
     // Click on detector name
     cy.contains(detectorName).click({ force: true });
     cy.waitForPageLoad('detector-details', {

diff --git a/public/pages/Detectors/components/DetectorBasicDetailsView/DetectorBasicDetailsView.tsx b/public/pages/Detectors/components/DetectorBasicDetailsView/DetectorBasicDetailsView.tsx
@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiButton, EuiSpacer, EuiLink, EuiIcon } from '@elastic/eui';
+import { EuiButton, EuiSpacer, EuiLink, EuiIcon, EuiText } from '@elastic/eui';
 import React from 'react';
 import { ContentPanel } from '../../../../components/ContentPanel';
 import { createTextDetailsGroup, parseSchedule } from '../../../../utils/helpers';
@@ -37,23 +37,13 @@ export const DetectorBasicDetailsView: React.FC<DetectorBasicDetailsViewProps> =
   const lastUpdated = last_update_time
     ? moment(last_update_time).format('YYYY-MM-DDTHH:mm')
     : undefined;
-  const firstTextDetailsGroupEntries = [
-    { label: 'Detector name', content: name },
-    { label: 'Log type', content: detector_type.toLowerCase() },
-    { label: 'Data source', content: inputs[0].detector_input.indices[0] },
-    {
-      label: 'Detector dashboard',
-      content: (dashboardId ? (
-        <EuiLink onClick={() => window.open(`dashboards#/view/${dashboardId}`, '_blank')}>
-          {`${name} summary`}
-          <EuiIcon type={'popout'} />
-        </EuiLink>
-      ) : (
-        'Not available for this log type'
-      )) as any,
-    },
-  ];
-
+  const totalSelected = detector.inputs.reduce((sum, inputObj) => {
+    return (
+      sum +
+      inputObj.detector_input.custom_rules.length +
+      inputObj.detector_input.pre_packaged_rules.length
+    );
+  }, 0);
   return (
     <ContentPanel
       title={'Detector details'}
@@ -68,16 +58,43 @@ export const DetectorBasicDetailsView: React.FC<DetectorBasicDetailsViewProps> =
       }
     >
       <EuiSpacer size={'l'} />
-      {createTextDetailsGroup(firstTextDetailsGroupEntries, 4)}
-      {createTextDetailsGroup(
-        [
-          { label: 'Description', content: inputs[0].detector_input.description },
-          { label: 'Detector schedule', content: detectorSchedule },
-          { label: 'Created at', content: createdAt || DEFAULT_EMPTY_DATA },
-          { label: 'Last updated time', content: lastUpdated || DEFAULT_EMPTY_DATA },
-        ],
-        4
-      )}
+      {createTextDetailsGroup([
+        { label: 'Detector name', content: name },
+        {
+          label: 'Description',
+          content: inputs[0].detector_input.description || DEFAULT_EMPTY_DATA,
+        },
+        { label: 'Detector schedule', content: detectorSchedule },
+      ])}
+      {createTextDetailsGroup([
+        {
+          label: 'Data source',
+          content: (
+            <>
+              {inputs[0].detector_input.indices.map((ind: string) => (
+                <EuiText>{ind}</EuiText>
+              ))}
+            </>
+          ),
+        },
+        { label: 'Log type', content: detector_type.toLowerCase() },
+        {
+          label: 'Detector dashboard',
+          content: (dashboardId ? (
+            <EuiLink onClick={() => window.open(`dashboards#/view/${dashboardId}`, '_blank')}>
+              {`${name} summary`}
+              <EuiIcon type={'popout'} />
+            </EuiLink>
+          ) : (
+            'Not available for this log type'
+          )) as any,
+        },
+      ])}
+      {createTextDetailsGroup([
+        { label: 'Detection rules', content: totalSelected },
+        { label: 'Created at', content: createdAt || DEFAULT_EMPTY_DATA },
+        { label: 'Last updated time', content: lastUpdated || DEFAULT_EMPTY_DATA },
+      ])}
       {rulesCanFold ? children : null}
     </ContentPanel>
   );