Improve rules view in detector details (#310)

* updated column widths

Signed-off-by: Amardeepsingh Siglani <[email protected]>

* improved typography; removed log type filter

Signed-off-by: Amardeepsingh Siglani <[email protected]>

Signed-off-by: Amardeepsingh Siglani <[email protected]>
(cherry picked from commit 9dba6c1)

Author: amsiglan

public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRulesTable.tsx

@@ -8,7 +8,7 @@ import React, { useState } from 'react';
 import { RuleItem } from './types/interfaces';
 import { getRulesColumns } from './utils/constants';
 import { Search } from '@opensearch-project/oui/src/eui_components/basic_table';
-import { ruleTypes, ruleSeverity, ruleSource } from '../../../../../Rules/utils/constants';
+import { ruleSeverity, ruleSource } from '../../../../../Rules/utils/constants';
 
 export interface DetectionRulesTableProps {
   ruleItems: RuleItem[];
@@ -43,15 +43,6 @@ export const DetectionRulesTable: React.FC<DetectionRulesTableProps> = ({
       schema: true,
     },
     filters: [
-      {
-        type: 'field_value_selection',
-        field: 'logType',
-        name: 'Log Type',
-        multiSelect: true,
-        options: ruleTypes.map((type: string) => ({
-          value: type,
-        })),
-      },
       {
         type: 'field_value_selection',
         field: 'severity',
@@ -76,7 +67,7 @@ export const DetectionRulesTable: React.FC<DetectionRulesTableProps> = ({
     return (rulePriorityBySeverity[a.severity] || 6) - (rulePriorityBySeverity[b.severity] || 6);
   });
 
-  const onTableChangeHandler = (pagination: CriteriaWithPagination<T>) => {
+  const onTableChangeHandler = (pagination: CriteriaWithPagination<RuleItem>) => {
     setPagination({ pageIndex: pagination.page.index });
     onTableChange && onTableChange(pagination);
   };

public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/utils/constants.tsx

@@ -4,6 +4,7 @@
  */
 
 import { EuiBasicTableColumn, EuiLink, EuiSwitch } from '@elastic/eui';
+import { capitalizeFirstLetter } from '../../../../../../../utils/helpers';
 import React, { ReactNode } from 'react';
 import { RuleItem } from '../types/interfaces';
 
@@ -35,18 +36,28 @@ export const getRulesColumns = (
           </EuiLink>
         );
       },
+      width: '30%',
+      sortable: true,
     },
     {
       field: 'severity',
       name: 'Rule severity',
+      width: '10%',
+      sortable: true,
+      render: (severity: string) => capitalizeFirstLetter(severity),
     },
     {
       field: 'logType',
       name: 'Log type',
+      width: '10%',
+      sortable: true,
+      render: (logType: string) => capitalizeFirstLetter(logType),
     },
     {
       field: 'library',
       name: 'Source',
+      width: '10%',
+      render: (library: string) => capitalizeFirstLetter(library),
     },
     {
       field: 'description',