Manually pulled in changes from PR 753 to improve log type display la…

…bels. Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
opensearch-project · Oct 12, 2023 · e95543b · e95543b
1 parent b82c27a
commit e95543b
Show file tree

Hide file tree

Showing 10 changed files with 68 additions and 22 deletions.
diff --git a/.github/workflows/cypress-workflow.yml b/.github/workflows/cypress-workflow.yml
@@ -87,7 +87,7 @@ jobs:
       - name: Run OpenSearch-Dashboards server
         run: |
           cd OpenSearch-Dashboards
-          yarn start --no-base-path --no-watch &
+          yarn start --no-base-path --no-watch --server.host="0.0.0.0" &
         shell: bash
 
       # Window is slow so wait longer

diff --git a/cypress/integration/1_detectors.spec.js b/cypress/integration/1_detectors.spec.js
@@ -8,9 +8,9 @@ import sample_windows_index_settings from '../fixtures/sample_windows_index_sett
 import sample_dns_index_settings from '../fixtures/sample_dns_index_settings.json';
 import dns_name_rule_data from '../fixtures/integration_tests/rule/create_dns_rule_with_name_selection.json';
 import dns_type_rule_data from '../fixtures/integration_tests/rule/create_dns_rule_with_type_selection.json';
-import dns_mapping_fields from '../fixtures/integration_tests/rule/sample_dns_field_mappings.json';
 import _ from 'lodash';
 import { getMappingFields } from '../../public/pages/Detectors/utils/helpers';
+import { getLogTypeLabel } from '../../public/pages/LogTypes/utils/helpers';
 
 const cypressIndexDns = 'cypress-index-dns';
 const cypressIndexWindows = 'cypress-index-windows';
@@ -115,7 +115,7 @@ const validatePendingFieldMappingsPanel = (mappings) => {
 const fillDetailsForm = (detectorName, dataSource) => {
   getNameField().type(detectorName);
   getDataSourceField().selectComboboxItem(dataSource);
-  getLogTypeField().selectComboboxItem(cypressLogTypeDns);
+  getLogTypeField().selectComboboxItem(getLogTypeLabel(cypressLogTypeDns));
   getLogTypeField().blur();
 };
 

diff --git a/cypress/integration/2_rules.spec.js b/cypress/integration/2_rules.spec.js
@@ -4,6 +4,7 @@
  */
 
 import { OPENSEARCH_DASHBOARDS_URL } from '../support/constants';
+import { getLogTypeLabel } from '../../public/pages/LogTypes/utils/helpers';
 
 const uniqueId = Cypress._.random(0, 1e6);
 const SAMPLE_RULE = {
@@ -55,7 +56,9 @@ const checkRulesFlyout = () => {
       cy.get('[data-test-subj="rule_flyout_rule_name"]').contains(SAMPLE_RULE.name);
 
       // Validate log type
-      cy.get('[data-test-subj="rule_flyout_rule_log_type"]').contains(SAMPLE_RULE.logType);
+      cy.get('[data-test-subj="rule_flyout_rule_log_type"]').contains(
+        getLogTypeLabel(SAMPLE_RULE.logType)
+      );
 
       // Validate description
       cy.get('[data-test-subj="rule_flyout_rule_description"]').contains(SAMPLE_RULE.description);
@@ -159,7 +162,7 @@ const fillCreateForm = () => {
   getAuthorField().type(`${SAMPLE_RULE.author}`);
 
   // rule details
-  getLogTypeField().type(SAMPLE_RULE.logType);
+  getLogTypeField().selectComboboxItem(getLogTypeLabel(SAMPLE_RULE.logType));
   getRuleLevelField().selectComboboxItem(SAMPLE_RULE.severity);
 
   // rule detection
@@ -282,7 +285,7 @@ describe('Rules', () => {
       getLogTypeField().focus().blur();
       getLogTypeField().containsError('Log type is required');
 
-      getLogTypeField().selectComboboxItem(SAMPLE_RULE.logType);
+      getLogTypeField().selectComboboxItem(getLogTypeLabel(SAMPLE_RULE.logType));
       getLogTypeField().focus().blur().shouldNotHaveError();
     });
 
@@ -423,7 +426,7 @@ describe('Rules', () => {
       // log field
       getLogTypeField().clearCombobox();
       toastShouldExist();
-      getLogTypeField().selectComboboxItem(SAMPLE_RULE.logType);
+      getLogTypeField().selectComboboxItem(getLogTypeLabel(SAMPLE_RULE.logType));
 
       // severity field
       getRuleLevelField().clearCombobox();
@@ -548,8 +551,10 @@ describe('Rules', () => {
       SAMPLE_RULE.logType = 'dns';
       YAML_RULE_LINES[2] = `product: ${SAMPLE_RULE.logType}`;
       YAML_RULE_LINES[3] = `title: ${SAMPLE_RULE.name}`;
-      getLogTypeField().type(SAMPLE_RULE.logType).type('{enter}');
-      getLogTypeField().containsValue(SAMPLE_RULE.logType).contains(SAMPLE_RULE.logType);
+      getLogTypeField().selectComboboxItem(getLogTypeLabel(SAMPLE_RULE.logType));
+      getLogTypeField()
+        .containsValue(SAMPLE_RULE.logType)
+        .contains(getLogTypeLabel(SAMPLE_RULE.logType));
 
       SAMPLE_RULE.description += ' edited';
       YAML_RULE_LINES[4] = `description: ${SAMPLE_RULE.description}`;

diff --git a/...c/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx b/...c/pages/CreateDetector/components/DefineDetector/components/DetectorType/DetectorType.tsx
@@ -10,6 +10,7 @@ import { FormFieldHeader } from '../../../../../../components/FormFieldHeader/Fo
 import { CreateDetectorRulesState, DetectionRules } from '../DetectionRules/DetectionRules';
 import { RuleItem } from '../DetectionRules/types/interfaces';
 import { ruleTypes } from '../../../../../Rules/utils/constants';
+import { getLogTypeLabel } from '../../../../../LogTypes/utils/helpers';
 
 interface DetectorTypeProps {
   detectorType: string;
@@ -86,9 +87,11 @@ export default class DetectorType extends Component<DetectorTypeProps, DetectorT
             options={this.detectorTypeOptions}
             singleSelection={{ asPlainText: true }}
             onChange={(e) => {
-              this.onChange(e[0]?.label || '');
+              this.onChange(e[0]?.value || '');
             }}
-            selectedOptions={detectorType ? [{ value: detectorType, label: detectorType }] : []}
+            selectedOptions={
+              detectorType ? [{ value: detectorType, label: getLogTypeLabel(detectorType) }] : []
+            }
           />
         </EuiFormRow>
 

diff --git a/public/pages/LogTypes/utils/constants.ts b/public/pages/LogTypes/utils/constants.ts
@@ -22,3 +22,21 @@ export const defaultLogType: LogTypeBase = {
   source: 'Custom',
   tags: null,
 };
+
+export const logTypeLabels = {
+  cloudtrail: 'Cloudtrail',
+  dns: 'DNS',
+  vpcflow: 'VPC Flow',
+  ad_ldap: 'Ad/ldap',
+  apache_access: 'Apache Access',
+  m365: 'M365',
+  okta: 'Okta',
+  waf: 'WAF',
+  s3: 'S3',
+  github: 'Github',
+  gworkspace: 'GWorkspace',
+  windows: 'Windows',
+  network: 'Network',
+  linux: 'Linux',
+  azure: 'Azure',
+};
diff --git a/public/pages/LogTypes/utils/helpers.tsx b/public/pages/LogTypes/utils/helpers.tsx
@@ -6,7 +6,8 @@
 import React from 'react';
 import { EuiButtonIcon, EuiLink, EuiToolTip } from '@elastic/eui';
 import { LogType } from '../../../../types';
-import { capitalize } from 'lodash';
+import { capitalize, startCase } from 'lodash';
+import { logTypeLabels } from './constants';
 
 export const getLogTypesTableColumns = (
   showDetails: (id: string) => void,
@@ -17,7 +18,7 @@ export const getLogTypesTableColumns = (
     name: 'Name',
     sortable: true,
     render: (name: string, item: LogType) => {
-      return <EuiLink onClick={() => showDetails(item.id)}>{name}</EuiLink>;
+      return <EuiLink onClick={() => showDetails(item.id)}>{getLogTypeLabel(name)}</EuiLink>;
     },
   },
   {
@@ -50,3 +51,7 @@ export const getLogTypesTableColumns = (
     ],
   },
 ];
+
+export const getLogTypeLabel = (name: String) => {
+  return logTypeLabels[name] || startCase(name);
+};
diff --git a/public/pages/Rules/components/RuleContentViewer/RuleContentViewer.tsx b/public/pages/Rules/components/RuleContentViewer/RuleContentViewer.tsx
@@ -20,6 +20,7 @@ import { DEFAULT_EMPTY_DATA } from '../../../../utils/constants';
 import React, { useState } from 'react';
 import { RuleContentYamlViewer } from './RuleContentYamlViewer';
 import { RuleItemInfoBase } from '../../../../../types';
+import { getLogTypeLabel } from '../../../LogTypes/utils/helpers';
 
 export interface RuleContentViewerProps {
   rule: RuleItemInfoBase;
@@ -67,7 +68,9 @@ export const RuleContentViewer: React.FC<RuleContentViewerProps> = ({
             </EuiFlexItem>
             <EuiFlexItem>
               <EuiFormLabel>Log Type</EuiFormLabel>
-              <EuiText data-test-subj={'rule_flyout_rule_log_type'}>{ruleData.category}</EuiText>
+              <EuiText data-test-subj={'rule_flyout_rule_log_type'}>
+                {getLogTypeLabel(ruleData.category)}
+              </EuiText>
             </EuiFlexItem>
           </EuiFlexGroup>
 

diff --git a/public/pages/Rules/components/RuleEditor/RuleEditorForm.tsx b/public/pages/Rules/components/RuleEditor/RuleEditorForm.tsx
@@ -32,6 +32,7 @@ import { mapFormToRule, mapRuleToForm } from './mappers';
 import { DetectionVisualEditor } from './DetectionVisualEditor';
 import { useCallback } from 'react';
 import { DataStore } from '../../../../store/DataStore';
+import { getLogTypeLabel } from '../../../LogTypes/utils/helpers';
 
 export interface VisualRuleEditorProps {
   initialValue: RuleEditorFormModel;
@@ -75,7 +76,9 @@ export const RuleEditorForm: React.FC<VisualRuleEditorProps> = ({
 
   const refreshLogTypeOptions = useCallback(async () => {
     const logTypes = await DataStore.logTypes.getLogTypes();
-    setLogTypeOptions(logTypes.map(({ id, name }) => ({ value: id, label: name })));
+    setLogTypeOptions(
+      logTypes.map(({ id, name }) => ({ value: id, label: getLogTypeLabel(name) }))
+    );
   }, []);
 
   const validateTags = (fields: string[]) => {
@@ -92,6 +95,8 @@ export const RuleEditorForm: React.FC<VisualRuleEditorProps> = ({
     return isValid;
   };
 
+  console.info(`hurneyt logTypeOptions = ${JSON.stringify(logTypeOptions, null, 4)}`);
+
   return (
     <Formik
       initialValues={initialValue}
@@ -284,13 +289,18 @@ export const RuleEditorForm: React.FC<VisualRuleEditorProps> = ({
                         options={logTypeOptions}
                         singleSelection={{ asPlainText: true }}
                         onChange={(e) => {
-                          props.handleChange('logType')(e[0]?.label ? e[0].label : '');
+                          props.handleChange('logType')(e[0]?.value ? e[0].value : '');
                         }}
                         onFocus={refreshLogTypeOptions}
                         onBlur={props.handleBlur('logType')}
                         selectedOptions={
                           props.values.logType
-                            ? [{ value: props.values.logType, label: props.values.logType }]
+                            ? [
+                                {
+                                  value: props.values.logType,
+                                  label: getLogTypeLabel(props.values.logType),
+                                },
+                              ]
                             : []
                         }
                       />

diff --git a/public/store/LogTypeStore.ts b/public/store/LogTypeStore.ts
@@ -9,6 +9,7 @@ import LogTypeService from '../services/LogTypeService';
 import { errorNotificationToast } from '../utils/helpers';
 import { DataStore } from './DataStore';
 import { ruleTypes } from '../pages/Rules/utils/constants';
+import { getLogTypeLabel } from '../pages/LogTypes/utils/helpers';
 
 export class LogTypeStore {
   constructor(private service: LogTypeService, private notifications: NotificationsStart) {}
@@ -52,7 +53,7 @@ export class LogTypeStore {
         0,
         ruleTypes.length,
         ...logTypes.map((logType) => ({
-          label: logType.name,
+          label: getLogTypeLabel(logType.name),
           value: logType.name,
           id: logType.id,
         }))

diff --git a/public/utils/helpers.tsx b/public/utils/helpers.tsx
@@ -31,6 +31,7 @@ import { OpenSearchService } from '../services';
 import { ruleSeverity, ruleTypes } from '../pages/Rules/utils/constants';
 import { Handler } from 'vega-tooltip';
 import _ from 'lodash';
+import { getLogTypeLabel } from '../pages/LogTypes/utils/helpers';
 
 export const parseStringsToOptions = (strings: string[]) => {
   return strings.map((str) => ({ id: str, label: str }));
@@ -295,10 +296,10 @@ export const getPlugins = async (opensearchService: OpenSearchService) => {
 };
 
 export const formatRuleType = (matchingRuleType: string) => {
-  return (
-    ruleTypes.find((ruleType) => ruleType.label.toLowerCase() === matchingRuleType.toLowerCase())
-      ?.label || DEFAULT_EMPTY_DATA
-  );
+  const type = ruleTypes.find(
+    (ruleType) => ruleType.label.toLowerCase() === matchingRuleType.toLowerCase()
+  )?.label;
+  return type === undefined ? DEFAULT_EMPTY_DATA : getLogTypeLabel(type);
 };
 
 export const getSeverityBadge = (severity: string) => {