From 3e0b7fa8d2f29fa016fff700b2d3c7420be53112 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 10 Jan 2023 10:59:03 -0800
Subject: [PATCH] Improve rules view in detector details (#310) (#314)

* updated column widths

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>

* improved typography; removed log type filter

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>

Signed-off-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
(cherry picked from commit 9dba6c12ec45ea0f3cdb1be28405178b28b61abf)

Co-authored-by: Amardeepsingh Siglani <amardeep7194@gmail.com>
Signed-off-by: AWSHurneyt <hurneyt@amazon.com>
---
 .../DetectionRules/DetectionRulesTable.tsx          | 13 ++-----------
 .../components/DetectionRules/utils/constants.tsx   | 11 +++++++++++
 2 files changed, 13 insertions(+), 11 deletions(-)

diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRulesTable.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRulesTable.tsx
index c6be37e46..2ecf65507 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/DetectionRulesTable.tsx
+++ b/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);
   };
diff --git a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/utils/constants.tsx b/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/utils/constants.tsx
index 6c62db00a..1b7132f44 100644
--- a/public/pages/CreateDetector/components/DefineDetector/components/DetectionRules/utils/constants.tsx
+++ b/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',