Update rule type lists in multiple pages (#298) (#373)

* Update rule type lists in multiple pages Signed-off-by: Sinisa Andric <[email protected]> * Fix RuleEditorForm logType render Signed-off-by: Sinisa Andric <[email protected]> * Move rule type formatting to helper Signed-off-by: Sinisa Andric <[email protected]> * Lint fix Signed-off-by: Sinisa Andric <[email protected]> Signed-off-by: Sinisa Andric <[email protected]> (cherry picked from commit 8b40f16) Co-authored-by: Sinisa Andric <[email protected]>
opensearch-project · Jan 17, 2023 · bbbdb5e · bbbdb5e
1 parent 20ba1d2
commit bbbdb5e
Show file tree

Hide file tree

Showing 8 changed files with 34 additions and 22 deletions.
diff --git a/public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx b/public/pages/Alerts/components/AlertFlyout/AlertFlyout.tsx
@@ -25,6 +25,7 @@ import {
   capitalizeFirstLetter,
   createTextDetailsGroup,
   errorNotificationToast,
+  formatRuleType,
   renderTime,
 } from '../../../../utils/helpers';
 import { FindingsService, RuleService, OpenSearchService } from '../../../../services';
@@ -170,7 +171,7 @@ export class AlertFlyout extends React.Component<AlertFlyoutProps, AlertFlyoutSt
         name: 'Log type',
         sortable: true,
         dataType: 'string',
-        render: () => capitalizeFirstLetter(detector.detector_type) || DEFAULT_EMPTY_DATA,
+        render: () => formatRuleType(detector.detector_type),
       },
     ];
   }

diff --git a/public/pages/Detectors/containers/Detectors/Detectors.tsx b/public/pages/Detectors/containers/Detectors/Detectors.tsx
@@ -27,6 +27,7 @@ import { getDetectorNames } from '../../utils/helpers';
 import {
   capitalizeFirstLetter,
   errorNotificationToast,
+  formatRuleType,
   renderTime,
 } from '../../../../utils/helpers';
 import { CoreServicesContext } from '../../../../components/core_services';
@@ -272,8 +273,7 @@ export default class Detectors extends Component<DetectorsProps, DetectorsState>
         name: 'Log type',
         sortable: true,
         dataType: 'string',
-        render: (detector_type: string) =>
-          capitalizeFirstLetter(detector_type) || DEFAULT_EMPTY_DATA,
+        render: (logType: string) => formatRuleType(logType),
       },
       {
         field: 'rulesCount',
@@ -320,7 +320,7 @@ export default class Detectors extends Component<DetectorsProps, DetectorsState>
           name: 'Log type',
           options: logType.map((logType) => ({
             value: logType,
-            name: capitalizeFirstLetter(logType),
+            name: formatRuleType(logType),
           })),
           multiSelect: 'or',
         } as FieldValueSelectionFilterConfigType,

diff --git a/public/pages/Findings/components/FindingsTable/FindingsTable.tsx b/public/pages/Findings/components/FindingsTable/FindingsTable.tsx
@@ -15,7 +15,7 @@ import {
 } from '@elastic/eui';
 import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
 import dateMath from '@elastic/datemath';
-import { capitalizeFirstLetter, renderTime } from '../../../../utils/helpers';
+import { capitalizeFirstLetter, formatRuleType, renderTime } from '../../../../utils/helpers';
 import { DEFAULT_EMPTY_DATA } from '../../../../utils/constants';
 import { DetectorsService, OpenSearchService } from '../../../../services';
 import FindingDetailsFlyout from '../FindingDetailsFlyout';
@@ -185,7 +185,7 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
         name: 'Log type',
         sortable: true,
         dataType: 'string',
-        render: (logType) => capitalizeFirstLetter(logType) || DEFAULT_EMPTY_DATA,
+        render: (logType: string) => formatRuleType(logType),
       },
       {
         field: 'ruleSeverity',
@@ -258,7 +258,7 @@ export default class FindingsTable extends Component<FindingsTableProps, Finding
           name: 'Log type',
           options: Array.from(logTypes).map((type) => ({
             value: type,
-            name: capitalizeFirstLetter(type) || type,
+            name: formatRuleType(type),
           })),
           multiSelect: 'or',
         } as FieldValueSelectionFilterConfigType,

diff --git a/public/pages/Overview/components/Widgets/DetectorsWidget.tsx b/public/pages/Overview/components/Widgets/DetectorsWidget.tsx
@@ -11,7 +11,7 @@ import { TableWidget } from './TableWidget';
 import { WidgetContainer } from './WidgetContainer';
 import { DetectorHit } from '../../../../../server/models/interfaces';
 import { RouteComponentProps } from 'react-router-dom';
-import { capitalizeFirstLetter } from '../../../../utils/helpers';
+import { formatRuleType } from '../../../../utils/helpers';
 
 type DetectorIdToHit = { [id: string]: DetectorHit };
 
@@ -38,7 +38,7 @@ const getColumns = (
     name: 'Log types',
     sortable: true,
     align: 'left',
-    render: (logType: string) => capitalizeFirstLetter(logType),
+    render: (logType: string) => formatRuleType(logType),
   },
 ];
 

diff --git a/public/pages/Rules/components/RuleEditor/RuleEditorForm.tsx b/public/pages/Rules/components/RuleEditor/RuleEditorForm.tsx
@@ -178,7 +178,7 @@ export const RuleEditorForm: React.FC<VisualRuleEditorProps> = ({
                         isInvalid={props.touched.logType && !!props.errors.logType}
                         placeholder="Select a log type"
                         data-test-subj={'rule_type_dropdown'}
-                        options={ruleTypes.map((type: string) => ({ value: type, label: type }))}
+                        options={ruleTypes.map(({ value, label }) => ({ value, label }))}
                         singleSelection={{ asPlainText: true }}
                         onChange={(e) => {
                           props.handleChange('logType')(e[0]?.value ? e[0].value : '');

diff --git a/public/pages/Rules/utils/constants.ts b/public/pages/Rules/utils/constants.ts
@@ -3,15 +3,15 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export const ruleTypes: string[] = [
-  'network',
-  'dns',
-  'apache_access',
-  'windows',
-  'ad_ldap',
-  'linux',
-  'cloudtrail',
-  's3',
+export const ruleTypes: { label: string; value: string }[] = [
+  { label: 'Network', value: 'network' },
+  { label: 'DNS', value: 'dns' },
+  { label: 'Apache Access', value: 'apache_access' },
+  { label: 'Windows', value: 'windows' },
+  { label: 'AD/LDAP', value: 'ad_ldap' },
+  { label: 'Linux', value: 'linux' },
+  { label: 'Cloudtrail', value: 'cloudtrail' },
+  { label: 'S3', value: 's3' },
 ];
 
 export const ruleSeverity: { name: string; value: string }[] = [

diff --git a/public/pages/Rules/utils/helpers.tsx b/public/pages/Rules/utils/helpers.tsx
@@ -13,7 +13,7 @@ import { Rule } from '../../../../models/interfaces';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { AUTHOR_REGEX, validateDescription, validateName } from '../../../utils/validation';
 import { dump, load } from 'js-yaml';
-import { BREADCRUMBS } from '../../../utils/constants';
+import { BREADCRUMBS, DEFAULT_EMPTY_DATA } from '../../../utils/constants';
 
 export interface RuleTableItem {
   title: string;
@@ -55,6 +55,8 @@ export const getRulesTableColumns = (
       sortable: true,
       width: '10%',
       truncateText: true,
+      render: (category: string) =>
+        ruleTypes.find((ruleType) => ruleType.value === category)?.label || DEFAULT_EMPTY_DATA,
     },
     {
       field: 'source',
@@ -84,8 +86,9 @@ export const getRulesTableSearchConfig = (): Search => {
         field: 'category',
         name: 'Rule Type',
         multiSelect: 'or',
-        options: ruleTypes.map((type: string) => ({
-          value: type,
+        options: ruleTypes.map(({ value, label }) => ({
+          value,
+          name: label,
         })),
       },
       {

diff --git a/public/utils/helpers.tsx b/public/utils/helpers.tsx
@@ -27,6 +27,7 @@ import { expressionInterpreter as vegaExpressionInterpreter } from 'vega-interpr
 import { RuleInfo } from '../../server/models/interfaces';
 import { NotificationsStart } from 'opensearch-dashboards/public';
 import { OpenSearchService } from '../services';
+import { ruleTypes } from '../pages/Rules/utils/constants';
 import { Handler } from 'vega-tooltip';
 
 export const parseStringsToOptions = (strings: string[]) => {
@@ -243,3 +244,10 @@ export const getPlugins = async (opensearchService: OpenSearchService) => {
     return [];
   }
 };
+
+export const formatRuleType = (matchingRuleType: string) => {
+  return (
+    ruleTypes.find((ruleType) => ruleType.value === matchingRuleType.toLowerCase())?.label ||
+    DEFAULT_EMPTY_DATA
+  );
+};