added rule flyout in log type details page; removed log type column f…

…rom rules table in log type details Signed-off-by: Amardeepsingh Siglani <[email protected]>
amsiglan · Sep 5, 2023 · d01fbd7 · d01fbd7
1 parent 0e3900a
commit d01fbd7
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 40 deletions.
diff --git a/public/pages/LogTypes/components/LogTypeDetectionRules.tsx b/public/pages/LogTypes/components/LogTypeDetectionRules.tsx
@@ -3,11 +3,12 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { RulesTable } from '../../Rules/components/RulesTable/RulesTable';
 import { RuleTableItem } from '../../Rules/utils/helpers';
 import { ContentPanel } from '../../../components/ContentPanel';
 import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon, EuiSpacer, EuiText } from '@elastic/eui';
+import { RuleViewerFlyout } from '../../Rules/components/RuleViewerFlyout/RuleViewerFlyout';
 
 export interface LogTypeDetectionRulesProps {
   rules: RuleTableItem[];
@@ -20,34 +21,47 @@ export const LogTypeDetectionRules: React.FC<LogTypeDetectionRulesProps> = ({
   loadingRules,
   refreshRules,
 }) => {
+  const [flyoutData, setFlyoutData] = useState<RuleTableItem | undefined>(undefined);
+  const hideFlyout = useCallback(() => {
+    setFlyoutData(undefined);
+  }, []);
+
   return (
-    <ContentPanel
-      title="Detection rules"
-      hideHeaderBorder={true}
-      actions={[<EuiButton onClick={refreshRules}>Refresh</EuiButton>]}
-    >
-      {rules.length === 0 ? (
-        <EuiFlexGroup justifyContent="center" alignItems="center" direction="column">
-          <EuiFlexItem grow={false}>
-            <EuiText color="subdued">
-              <p>There are no detection rules associated with this log type. </p>
-            </EuiText>
-          </EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            <EuiButton
-              fill
-              href={`opensearch_security_analytics_dashboards#/create-rule`}
-              target="_blank"
-            >
-              Create detection rule&nbsp;
-              <EuiIcon type={'popout'} />
-            </EuiButton>
-            <EuiSpacer size="xl" />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      ) : (
-        <RulesTable loading={loadingRules} ruleItems={rules} showRuleDetails={() => {}} />
-      )}
-    </ContentPanel>
+    <>
+      {flyoutData && <RuleViewerFlyout hideFlyout={hideFlyout} ruleTableItem={flyoutData} />}
+      <ContentPanel
+        title="Detection rules"
+        hideHeaderBorder={true}
+        actions={[<EuiButton onClick={refreshRules}>Refresh</EuiButton>]}
+      >
+        {rules.length === 0 ? (
+          <EuiFlexGroup justifyContent="center" alignItems="center" direction="column">
+            <EuiFlexItem grow={false}>
+              <EuiText color="subdued">
+                <p>There are no detection rules associated with this log type. </p>
+              </EuiText>
+            </EuiFlexItem>
+            <EuiFlexItem grow={false}>
+              <EuiButton
+                fill
+                href={`opensearch_security_analytics_dashboards#/create-rule`}
+                target="_blank"
+              >
+                Create detection rule&nbsp;
+                <EuiIcon type={'popout'} />
+              </EuiButton>
+              <EuiSpacer size="xl" />
+            </EuiFlexItem>
+          </EuiFlexGroup>
+        ) : (
+          <RulesTable
+            loading={loadingRules}
+            ruleItems={rules}
+            columnsToHide={['category']}
+            showRuleDetails={setFlyoutData}
+          />
+        )}
+      </ContentPanel>
+    </>
   );
 };
diff --git a/public/pages/Rules/components/RulesTable/RulesTable.tsx b/public/pages/Rules/components/RulesTable/RulesTable.tsx
@@ -10,21 +10,28 @@ import {
   RuleTableItem,
 } from '../../utils/helpers';
 import { CriteriaWithPagination, EuiInMemoryTable } from '@elastic/eui';
+import { RulesTableColumnFields } from '../../../../../types';
 
 export interface RulesTableProps {
   ruleItems: RuleTableItem[];
   loading: boolean;
+  columnsToHide?: RulesTableColumnFields[];
   showRuleDetails: (ruleItem: RuleTableItem) => void;
 }
 
-export const RulesTable: React.FC<RulesTableProps> = ({ ruleItems, loading, showRuleDetails }) => {
+export const RulesTable: React.FC<RulesTableProps> = ({
+  columnsToHide,
+  ruleItems,
+  loading,
+  showRuleDetails,
+}) => {
   const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 25 });
 
   return (
     <EuiInMemoryTable
       loading={loading}
       items={ruleItems}
-      columns={getRulesTableColumns(showRuleDetails)}
+      columns={getRulesTableColumns(showRuleDetails, columnsToHide)}
       search={getRulesTableSearchConfig()}
       pagination={{ ...pagination, pageSizeOptions: [10, 25, 50] }}
       onTableChange={(nextValues: CriteriaWithPagination<any>) =>

diff --git a/public/pages/Rules/utils/helpers.tsx b/public/pages/Rules/utils/helpers.tsx
@@ -13,7 +13,7 @@ import { NotificationsStart } from 'opensearch-dashboards/public';
 import { AUTHOR_REGEX, validateDescription, validateName } from '../../../utils/validation';
 import { dump, load } from 'js-yaml';
 import { BREADCRUMBS, DEFAULT_EMPTY_DATA } from '../../../utils/constants';
-import { RuleItemInfoBase } from '../../../../types';
+import { RuleItemInfoBase, RulesTableColumnFields } from '../../../../types';
 
 export interface RuleTableItem {
   title: string;
@@ -26,10 +26,12 @@ export interface RuleTableItem {
 }
 
 export const getRulesTableColumns = (
-  showRuleDetails: (rule: RuleTableItem) => void
+  showRuleDetails: (rule: RuleTableItem) => void,
+  columnsToHide: RulesTableColumnFields[] = []
 ): EuiBasicTableColumn<RuleTableItem>[] => {
-  return [
-    {
+  const fields: RulesTableColumnFields[] = ['title', 'level', 'category', 'source', 'description'];
+  const tableColumnByField: { [field: string]: EuiBasicTableColumn<RuleTableItem> } = {
+    title: {
       field: 'title',
       name: 'Rule name',
       sortable: true,
@@ -41,15 +43,15 @@ export const getRulesTableColumns = (
         </EuiLink>
       ),
     },
-    {
+    level: {
       field: 'level',
       name: 'Rule Severity',
       sortable: true,
       width: '10%',
       truncateText: true,
       render: (level: string) => capitalizeFirstLetter(level),
     },
-    {
+    category: {
       field: 'category',
       name: 'Log type',
       sortable: true,
@@ -59,20 +61,30 @@ export const getRulesTableColumns = (
         ruleTypes.find((ruleType) => ruleType.label.toLowerCase() === category)?.label ||
         DEFAULT_EMPTY_DATA,
     },
-    {
+    source: {
       field: 'source',
       name: 'Source',
       sortable: true,
       width: '10%',
       truncateText: true,
     },
-    {
+    description: {
       field: 'description',
       name: 'Description',
       sortable: false,
       truncateText: true,
     },
-  ];
+  };
+
+  const columns: EuiBasicTableColumn<RuleTableItem>[] = [];
+
+  fields.forEach((field) => {
+    if (!columnsToHide.includes(field)) {
+      columns.push(tableColumnByField[field]);
+    }
+  });
+
+  return columns;
 };
 
 export const getRulesTableSearchConfig = (): Search => {

diff --git a/types/Rule.ts b/types/Rule.ts
@@ -123,3 +123,5 @@ export interface IRulesStore {
 
   getCustomRules: (terms?: { [key: string]: string[] }) => Promise<RuleItemInfoBase[]>;
 }
+
+export type RulesTableColumnFields = 'title' | 'level' | 'category' | 'source' | 'description';