[SIEM] [Detection Engine] All Rules fixes (#55641)

## Summary This PR addresses bugs outlined in #54935 Including: * Add Risk Score column * Remove Method column * Fixes `Showing Events` on Alerts table * Fixes Tag overflow * Shows Tags/Filters ### Checklist Use ~~strikethroughs~~ to remove checklist items you don't feel are applicable to this PR. - [ ] ~This was checked for cross-browser compatibility, [including a check against IE11](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility)~ - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/master/packages/kbn-i18n/README.md) - [ ] ~[Documentation](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#writing-documentation) was added for features that require explanation or tutorials~ - [ ] ~[Unit or functional tests](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#cross-browser-compatibility) were updated or added to match the most common scenarios~ - [ ] ~This was checked for [keyboard-only and screenreader accessibility](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility#Accessibility_testing_checklist)~ ### For maintainers - [ ] ~This was checked for breaking API changes and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~ - [ ] ~This includes a feature addition or change that requires a release note and was [labeled appropriately](https://github.com/elastic/kibana/blob/master/CONTRIBUTING.md#release-notes-process)~
elastic · Jan 23, 2020 · 90e3bb0 · 90e3bb0
1 parent da5710d
commit 90e3bb0
Show file tree

Hide file tree

Showing 16 changed files with 425 additions and 91 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx b/x-pack/legacy/plugins/siem/public/components/alerts_viewer/alerts_table.tsx
@@ -64,6 +64,7 @@ const AlertsTableComponent: React.FC<Props> = ({ endDate, startDate, pageFilters
       documentType: i18n.ALERTS_DOCUMENT_TYPE,
       footerText: i18n.TOTAL_COUNT_OF_ALERTS,
       title: i18n.ALERTS_TABLE_TITLE,
+      unit: i18n.UNIT,
     }),
     []
   );

diff --git a/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx b/x-pack/legacy/plugins/siem/public/components/events_viewer/events_viewer.tsx
@@ -154,20 +154,18 @@ const EventsViewerComponent: React.FC<Props> = ({
                   const totalCountMinusDeleted =
                     totalCount > 0 ? totalCount - deletedEventIds.length : 0;
 
+                  const subtitle = `${
+                    i18n.SHOWING
+                  }: ${totalCountMinusDeleted.toLocaleString()} ${timelineTypeContext.unit?.(
+                    totalCountMinusDeleted
+                  ) ?? i18n.UNIT(totalCountMinusDeleted)}`;
+
                   // TODO: Reset eventDeletedIds/eventLoadingIds on refresh/loadmore (getUpdatedAt)
                   return (
                     <>
                       <HeaderSection
                         id={id}
-                        subtitle={
-                          utilityBar
-                            ? undefined
-                            : `${
-                                i18n.SHOWING
-                              }: ${totalCountMinusDeleted.toLocaleString()} ${i18n.UNIT(
-                                totalCountMinusDeleted
-                              )}`
-                        }
+                        subtitle={utilityBar ? undefined : subtitle}
                         title={timelineTypeContext?.title ?? i18n.EVENTS}
                       >
                         {headerFilterGroup}

diff --git a/x-pack/legacy/plugins/siem/public/components/timeline/timeline_context.tsx b/x-pack/legacy/plugins/siem/public/components/timeline/timeline_context.tsx
@@ -23,6 +23,7 @@ export interface TimelineTypeContextProps {
   selectAll?: boolean;
   timelineActions?: TimelineAction[];
   title?: string;
+  unit?: (totalCount: number) => string;
 }
 const initTimelineType: TimelineTypeContextProps = {
   documentType: undefined,
@@ -32,6 +33,7 @@ const initTimelineType: TimelineTypeContextProps = {
   selectAll: false,
   timelineActions: [],
   title: undefined,
+  unit: undefined,
 };
 export const TimelineTypeContext = createContext<TimelineTypeContextProps>(initTimelineType);
 export const useTimelineTypeContext = () => useContext(TimelineTypeContext);

diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/api.ts b/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/api.ts
@@ -28,6 +28,7 @@ import {
   DETECTION_ENGINE_PREPACKAGED_URL,
   DETECTION_ENGINE_RULES_STATUS_URL,
   DETECTION_ENGINE_PREPACKAGED_RULES_STATUS_URL,
+  DETECTION_ENGINE_TAGS_URL,
 } from '../../../../common/constants';
 import * as i18n from '../../../pages/detection_engine/rules/translations';
 
@@ -54,61 +55,72 @@ export const addRule = async ({ rule, signal }: AddRulesProps): Promise<NewRule>
 };
 
 /**
- * Fetches all rules or single specified rule from the Detection Engine API
+ * Fetches all rules from the Detection Engine API
  *
  * @param filterOptions desired filters (e.g. filter/sortField/sortOrder)
  * @param pagination desired pagination options (e.g. page/perPage)
- * @param id if specified, will return specific rule if exists
  * @param signal to cancel request
+ *
  */
 export const fetchRules = async ({
   filterOptions = {
     filter: '',
-    sortField: 'name',
+    sortField: 'enabled',
     sortOrder: 'desc',
+    showCustomRules: false,
+    showElasticRules: false,
+    tags: [],
   },
   pagination = {
     page: 1,
     perPage: 20,
     total: 0,
   },
-  id,
   signal,
 }: FetchRulesProps): Promise<FetchRulesResponse> => {
+  const filters = [
+    ...(filterOptions.filter.length !== 0
+      ? [`alert.attributes.name:%20${encodeURIComponent(filterOptions.filter)}`]
+      : []),
+    ...(filterOptions.showCustomRules
+      ? ['alert.attributes.tags:%20%22__internal_immutable:false%22']
+      : []),
+    ...(filterOptions.showElasticRules
+      ? ['alert.attributes.tags:%20%22__internal_immutable:true%22']
+      : []),
+    ...(filterOptions.tags?.map(t => `alert.attributes.tags:${encodeURIComponent(t)}`) ?? []),
+  ];
+
   const queryParams = [
     `page=${pagination.page}`,
     `per_page=${pagination.perPage}`,
     `sort_field=${filterOptions.sortField}`,
     `sort_order=${filterOptions.sortOrder}`,
-    ...(filterOptions.filter.length !== 0
-      ? [`filter=alert.attributes.name:%20${encodeURIComponent(filterOptions.filter)}`]
-      : []),
+    ...(filters.length > 0 ? [`filter=${filters.join('%20AND%20')}`] : []),
   ];
 
-  const endpoint =
-    id != null
-      ? `${chrome.getBasePath()}${DETECTION_ENGINE_RULES_URL}?id="${id}"`
-      : `${chrome.getBasePath()}${DETECTION_ENGINE_RULES_URL}/_find?${queryParams.join('&')}`;
-
-  const response = await fetch(endpoint, {
-    method: 'GET',
-    signal,
-  });
+  const response = await fetch(
+    `${chrome.getBasePath()}${DETECTION_ENGINE_RULES_URL}/_find?${queryParams.join('&')}`,
+    {
+      method: 'GET',
+      credentials: 'same-origin',
+      headers: {
+        'content-type': 'application/json',
+        'kbn-xsrf': 'true',
+      },
+      signal,
+    }
+  );
   await throwIfNotOk(response);
-  return id != null
-    ? {
-        page: 0,
-        perPage: 1,
-        total: 1,
-        data: response.json(),
-      }
-    : response.json();
+  return response.json();
 };
 
 /**
  * Fetch a Rule by providing a Rule ID
  *
  * @param id Rule ID's (not rule_id)
+ * @param signal to cancel request
+ *
  */
 export const fetchRuleById = async ({ id, signal }: FetchRuleProps): Promise<Rule> => {
   const response = await fetch(`${chrome.getBasePath()}${DETECTION_ENGINE_RULES_URL}?id=${id}`, {
@@ -344,6 +356,27 @@ export const getRuleStatusById = async ({
   return response.json();
 };
 
+/**
+ * Fetch all unique Tags used by Rules
+ *
+ * @param signal to cancel request
+ *
+ */
+export const fetchTags = async ({ signal }: { signal: AbortSignal }): Promise<string[]> => {
+  const response = await fetch(`${chrome.getBasePath()}${DETECTION_ENGINE_TAGS_URL}`, {
+    method: 'GET',
+    credentials: 'same-origin',
+    headers: {
+      'content-type': 'application/json',
+      'kbn-xsrf': 'true',
+    },
+    signal,
+  });
+
+  await throwIfNotOk(response);
+  return response.json();
+};
+
 /**
  * Get pre packaged rules Status
  *

diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/translations.ts b/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/translations.ts
@@ -30,3 +30,10 @@ export const RULE_PREPACKAGED_SUCCESS = i18n.translate(
     defaultMessage: 'Installed pre-packaged rules from elastic',
   }
 );
+
+export const TAG_FETCH_FAILURE = i18n.translate(
+  'xpack.siem.containers.detectionEngine.tagFetchFailDescription',
+  {
+    defaultMessage: 'Failed to fetch Tags',
+  }
+);
diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/types.ts b/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/types.ts
@@ -114,14 +114,16 @@ export interface PaginationOptions {
 export interface FetchRulesProps {
   pagination?: PaginationOptions;
   filterOptions?: FilterOptions;
-  id?: string;
   signal: AbortSignal;
 }
 
 export interface FilterOptions {
   filter: string;
   sortField: string;
   sortOrder: 'asc' | 'desc';
+  showCustomRules?: boolean;
+  showElasticRules?: boolean;
+  tags?: string[];
 }
 
 export interface FetchRulesResponse {

diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/use_rules.tsx b/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/use_rules.tsx
@@ -70,6 +70,9 @@ export const useRules = (pagination: PaginationOptions, filterOptions: FilterOpt
     filterOptions.filter,
     filterOptions.sortField,
     filterOptions.sortOrder,
+    filterOptions.tags?.sort().join(),
+    filterOptions.showCustomRules,
+    filterOptions.showElasticRules,
   ]);
 
   return [loading, rules, reFetchRules.current];

diff --git a/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/use_tags.tsx b/x-pack/legacy/plugins/siem/public/containers/detection_engine/rules/use_tags.tsx
@@ -0,0 +1,57 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { useEffect, useState } from 'react';
+import { useStateToaster } from '../../../components/toasters';
+import { fetchTags } from './api';
+import { errorToToaster } from '../../../components/ml/api/error_to_toaster';
+import * as i18n from './translations';
+
+type Return = [boolean, string[]];
+
+/**
+ * Hook for using the list of Tags from the Detection Engine API
+ *
+ */
+export const useTags = (): Return => {
+  const [tags, setTags] = useState<string[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [, dispatchToaster] = useStateToaster();
+
+  useEffect(() => {
+    let isSubscribed = true;
+    const abortCtrl = new AbortController();
+
+    async function fetchData() {
+      setLoading(true);
+      try {
+        const fetchTagsResult = await fetchTags({
+          signal: abortCtrl.signal,
+        });
+
+        if (isSubscribed) {
+          setTags(fetchTagsResult);
+        }
+      } catch (error) {
+        if (isSubscribed) {
+          errorToToaster({ title: i18n.TAG_FETCH_FAILURE, error, dispatchToaster });
+        }
+      }
+      if (isSubscribed) {
+        setLoading(false);
+      }
+    }
+
+    fetchData();
+
+    return () => {
+      isSubscribed = false;
+      abortCtrl.abort();
+    };
+  }, []);
+
+  return [loading, tags];
+};
diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/__mocks__/mock.ts b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/__mocks__/mock.ts
@@ -56,13 +56,10 @@ export const mockTableData: TableData[] = [
     id: 'abe6c564-050d-45a5-aaf0-386c37dd1f61',
     immutable: false,
     isLoading: false,
-    lastCompletedRun: undefined,
-    lastResponse: { type: '—' },
-    method: 'saved_query',
+    risk_score: 21,
     rule: {
       href: '#/detections/rules/id/abe6c564-050d-45a5-aaf0-386c37dd1f61',
       name: 'Home Grown!',
-      status: 'Status Placeholder',
     },
     rule_id: 'b5ba41ab-aaf3-4f43-971b-bdf9434ce0ea',
     severity: 'low',
@@ -108,13 +105,10 @@ export const mockTableData: TableData[] = [
     id: '63f06f34-c181-4b2d-af35-f2ace572a1ee',
     immutable: false,
     isLoading: false,
-    lastCompletedRun: undefined,
-    lastResponse: { type: '—' },
-    method: 'saved_query',
+    risk_score: 21,
     rule: {
       href: '#/detections/rules/id/63f06f34-c181-4b2d-af35-f2ace572a1ee',
       name: 'Home Grown!',
-      status: 'Status Placeholder',
     },
     rule_id: 'b5ba41ab-aaf3-4f43-971b-bdf9434ce0ea',
     severity: 'low',

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/columns.tsx
@@ -31,6 +31,7 @@ import { RuleSwitch } from '../components/rule_switch';
 import { SeverityBadge } from '../components/severity_badge';
 import { ActionToaster } from '../../../../components/toasters';
 import { getStatusColor } from '../components/rule_status/helpers';
+import { TruncatableText } from '../../../../components/truncatable_text';
 
 const getActions = (
   dispatch: React.Dispatch<Action>,
@@ -84,8 +85,8 @@ export const getColumns = (
       width: '24%',
     },
     {
-      field: 'method',
-      name: i18n.COLUMN_METHOD,
+      field: 'risk_score',
+      name: i18n.COLUMN_RISK_SCORE,
       truncateText: true,
       width: '14%',
     },
@@ -129,13 +130,13 @@ export const getColumns = (
       field: 'tags',
       name: i18n.COLUMN_TAGS,
       render: (value: TableData['tags']) => (
-        <>
+        <TruncatableText>
           {value.map((tag, i) => (
             <EuiBadge color="hollow" key={`${tag}-${i}`}>
               {tag}
             </EuiBadge>
           ))}
-        </>
+        </TruncatableText>
       ),
       truncateText: true,
       width: '20%',

diff --git a/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/helpers.ts b/x-pack/legacy/plugins/siem/public/pages/detection_engine/rules/all/helpers.ts
@@ -10,7 +10,6 @@ import {
   RuleResponseBuckets,
 } from '../../../../containers/detection_engine/rules';
 import { TableData } from '../types';
-import { getEmptyValue } from '../../../../components/empty_value';
 
 /**
  * Formats rules into the correct format for the AllRulesTable
@@ -26,14 +25,9 @@ export const formatRules = (rules: Rule[], selectedIds?: string[]): TableData[]
     rule: {
       href: `#/detections/rules/id/${encodeURIComponent(rule.id)}`,
       name: rule.name,
-      status: 'Status Placeholder',
     },
-    method: rule.type, // TODO: Map to i18n?
+    risk_score: rule.risk_score,
     severity: rule.severity,
-    lastCompletedRun: undefined, // TODO: Not available yet
-    lastResponse: {
-      type: getEmptyValue(), // TODO: Not available yet
-    },
     tags: rule.tags ?? [],
     activate: rule.enabled,
     status: rule.status ?? null,