Add interval selector to anomalies tab

elastic · Sep 5, 2022 · cd2a6a5 · cd2a6a5
1 parent 97076ae
commit cd2a6a5
Show file tree

Hide file tree

Showing 22 changed files with 329 additions and 244 deletions.
diff --git a/.../plugins/security_solution/public/common/components/ml/anomaly/anomaly_table_provider.tsx b/.../plugins/security_solution/public/common/components/ml/anomaly/anomaly_table_provider.tsx
@@ -26,14 +26,15 @@ interface Props {
 
 export const AnomalyTableProvider = React.memo<Props>(
   ({ influencers, startDate, endDate, children, criteriaFields, skip }) => {
-    const jobIds = useInstalledSecurityJobsIds();
+    const { jobIds } = useInstalledSecurityJobsIds();
     const [isLoadingAnomaliesData, anomaliesData] = useAnomaliesTableData({
       criteriaFields,
       influencers,
       startDate,
       endDate,
       skip,
       jobIds,
+      aggregationInterval: 'auto',
     });
     return <>{children({ isLoadingAnomaliesData, anomaliesData })}</>;
   }

diff --git a/...plugins/security_solution/public/common/components/ml/anomaly/use_anomalies_table_data.ts b/...plugins/security_solution/public/common/components/ml/anomaly/use_anomalies_table_data.ts
@@ -26,6 +26,7 @@ interface Args {
   criteriaFields?: CriteriaFields[];
   filterQuery?: estypes.QueryDslQueryContainer;
   jobIds: string[];
+  aggregationInterval: string;
 }
 
 type Return = [boolean, Anomalies | null];
@@ -60,6 +61,7 @@ export const useAnomaliesTableData = ({
   skip = false,
   filterQuery,
   jobIds,
+  aggregationInterval,
 }: Args): Return => {
   const [tableData, setTableData] = useState<Anomalies | null>(null);
   const mlCapabilities = useMlCapabilities();
@@ -93,7 +95,7 @@ export const useAnomaliesTableData = ({
               jobIds,
               criteriaFields: criteriaFieldsInput,
               influencersFilterQuery: filterQuery,
-              aggregationInterval: 'auto',
+              aggregationInterval,
               threshold: getThreshold(anomalyScore, threshold),
               earliestMs,
               latestMs,
@@ -139,6 +141,7 @@ export const useAnomaliesTableData = ({
     endDateMs,
     skip,
     isMlUser,
+    aggregationInterval,
     // eslint-disable-next-line react-hooks/exhaustive-deps
     jobIds.sort().join(),
   ]);

diff --git a/...lugins/security_solution/public/common/components/ml/hooks/use_installed_security_jobs.ts b/...lugins/security_solution/public/common/components/ml/hooks/use_installed_security_jobs.ts
@@ -67,8 +67,8 @@ export const useInstalledSecurityJobs = (): UseInstalledSecurityJobsReturn => {
 };
 
 export const useInstalledSecurityJobsIds = () => {
-  const { jobs } = useInstalledSecurityJobs();
+  const { jobs, loading } = useInstalledSecurityJobs();
   const jobIds = useMemo(() => jobs.map((job) => job.id), [jobs]);
 
-  return jobIds;
+  return { jobIds, loading };
 };
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/tables/anomalies_host_table.tsx b/x-pack/plugins/security_solution/public/common/components/ml/tables/anomalies_host_table.tsx
@@ -8,9 +8,9 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useDispatch } from 'react-redux';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useAnomaliesTableData } from '../anomaly/use_anomalies_table_data';
 import { HeaderSection } from '../../header_section';
-
 import { hasMlUserPermissions } from '../../../../../common/machine_learning/has_ml_user_permissions';
 import * as i18n from './translations';
 import { getAnomaliesHostTableColumnsCurated } from './get_anomalies_host_table_columns';
@@ -21,12 +21,12 @@ import { useMlCapabilities } from '../hooks/use_ml_capabilities';
 import { BasicTable } from './basic_table';
 import { getCriteriaFromHostType } from '../criteria/get_criteria_from_host_type';
 import { Panel } from '../../panel';
-import { anomaliesTableDefaultEquality } from './default_equality';
 import { useQueryToggle } from '../../../containers/query_toggle';
 import { useInstalledSecurityJobsIds } from '../hooks/use_installed_security_jobs';
 import { useDeepEqualSelector } from '../../../hooks/use_selector';
 import type { State } from '../../../store';
 import { JobIdFilter } from './job_id_filter';
+import { SelectInterval } from './select_interval';
 import { hostsActions, hostsSelectors } from '../../../../hosts/store';
 
 const sorting = {
@@ -59,7 +59,7 @@ const AnomaliesHostTableComponent: React.FC<AnomaliesHostTableProps> = ({
     [setQuerySkip, setToggleStatus]
   );
 
-  const jobIds = useInstalledSecurityJobsIds();
+  const { jobIds, loading: loadingJobs } = useInstalledSecurityJobsIds();
 
   const getAnomaliesHostsTableFilterQuerySelector = useMemo(
     () => hostsSelectors.hostsAnomaliesJobIdFilterSelector(),
@@ -82,7 +82,28 @@ const AnomaliesHostTableComponent: React.FC<AnomaliesHostTableProps> = ({
     [dispatch, type]
   );
 
-  const [loading, tableData] = useAnomaliesTableData({
+  const getAnomaliesHostTableIntervalQuerySelector = useMemo(
+    () => hostsSelectors.hostsAnomaliesIntervalSelector(),
+    []
+  );
+
+  const selectedInterval = useDeepEqualSelector((state: State) =>
+    getAnomaliesHostTableIntervalQuerySelector(state, type)
+  );
+
+  const onSelectInterval = useCallback(
+    (newInterval: string) => {
+      dispatch(
+        hostsActions.updateHostsAnomaliesInterval({
+          interval: newInterval,
+          hostsType: type,
+        })
+      );
+    },
+    [dispatch, type]
+  );
+
+  const [loadingTable, tableData] = useAnomaliesTableData({
     startDate,
     endDate,
     skip: querySkip,
@@ -91,6 +112,7 @@ const AnomaliesHostTableComponent: React.FC<AnomaliesHostTableProps> = ({
       exists: { field: 'host.name' },
     },
     jobIds: selectedJobIds.length > 0 ? selectedJobIds : jobIds,
+    aggregationInterval: selectedInterval,
   });
 
   const hosts = convertAnomaliesToHosts(tableData, hostName);
@@ -108,7 +130,7 @@ const AnomaliesHostTableComponent: React.FC<AnomaliesHostTableProps> = ({
     return null;
   } else {
     return (
-      <Panel loading={loading}>
+      <Panel loading={loadingTable || loadingJobs}>
         <HeaderSection
           subtitle={`${i18n.SHOWING}: ${pagination.totalItemCount.toLocaleString()} ${i18n.UNIT(
             pagination.totalItemCount
@@ -119,14 +141,19 @@ const AnomaliesHostTableComponent: React.FC<AnomaliesHostTableProps> = ({
           tooltip={i18n.TOOLTIP}
           isInspectDisabled={skip}
           headerFilters={
-            jobIds.length > 0 && (
-              <JobIdFilter
-                title={i18n.JOB_ID}
-                onSelect={onSelectJobId}
-                selectedJobIds={selectedJobIds}
-                jobIds={jobIds}
-              />
-            )
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <SelectInterval interval={selectedInterval} onChange={onSelectInterval} />
+              </EuiFlexItem>
+              <EuiFlexItem grow={false}>
+                <JobIdFilter
+                  title={i18n.JOB_ID}
+                  onSelect={onSelectJobId}
+                  selectedJobIds={selectedJobIds}
+                  jobIds={jobIds}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
           }
         />
         {toggleStatus && (
@@ -140,15 +167,12 @@ const AnomaliesHostTableComponent: React.FC<AnomaliesHostTableProps> = ({
           />
         )}
 
-        {loading && (
+        {(loadingTable || loadingJobs) && (
           <Loader data-test-subj="anomalies-host-table-loading-panel" overlay size="xl" />
         )}
       </Panel>
     );
   }
 };
 
-export const AnomaliesHostTable = React.memo(
-  AnomaliesHostTableComponent,
-  anomaliesTableDefaultEquality
-);
+export const AnomaliesHostTable = React.memo(AnomaliesHostTableComponent);
diff --git a/.../plugins/security_solution/public/common/components/ml/tables/anomalies_network_table.tsx b/.../plugins/security_solution/public/common/components/ml/tables/anomalies_network_table.tsx
@@ -18,7 +18,6 @@ import type { AnomaliesNetworkTableProps } from '../types';
 import { getAnomaliesNetworkTableColumnsCurated } from './get_anomalies_network_table_columns';
 import { useMlCapabilities } from '../hooks/use_ml_capabilities';
 import { BasicTable } from './basic_table';
-import { networkEquality } from './network_equality';
 import { getCriteriaFromNetworkType } from '../criteria/get_criteria_from_network_type';
 import { Panel } from '../../panel';
 import { useQueryToggle } from '../../../containers/query_toggle';
@@ -59,7 +58,7 @@ const AnomaliesNetworkTableComponent: React.FC<AnomaliesNetworkTableProps> = ({
     [setQuerySkip, setToggleStatus]
   );
 
-  const jobIds = useInstalledSecurityJobsIds();
+  const { jobIds, loading: loadingJobs } = useInstalledSecurityJobsIds();
 
   const getAnomaliesUserTableFilterQuerySelector = useMemo(
     () => networkSelectors.networkAnomaliesJobIdFilterSelector(),
@@ -81,12 +80,13 @@ const AnomaliesNetworkTableComponent: React.FC<AnomaliesNetworkTableProps> = ({
     },
     [dispatch, type]
   );
-  const [loading, tableData] = useAnomaliesTableData({
+  const [loadingTable, tableData] = useAnomaliesTableData({
     startDate,
     endDate,
     skip: querySkip,
     criteriaFields: getCriteriaFromNetworkType(type, ip, flowTarget),
     jobIds: selectedJobIds.length > 0 ? selectedJobIds : jobIds,
+    aggregationInterval: 'second',
   });
 
   const networks = convertAnomaliesToNetwork(tableData, ip);
@@ -103,7 +103,7 @@ const AnomaliesNetworkTableComponent: React.FC<AnomaliesNetworkTableProps> = ({
     return null;
   } else {
     return (
-      <Panel loading={loading}>
+      <Panel loading={loadingTable || loadingJobs}>
         <HeaderSection
           subtitle={`${i18n.SHOWING}: ${pagination.totalItemCount.toLocaleString()} ${i18n.UNIT(
             pagination.totalItemCount
@@ -114,14 +114,12 @@ const AnomaliesNetworkTableComponent: React.FC<AnomaliesNetworkTableProps> = ({
           toggleStatus={toggleStatus}
           isInspectDisabled={skip}
           headerFilters={
-            jobIds.length > 0 && (
-              <JobIdFilter
-                title={i18n.JOB_ID}
-                onSelect={onSelectJobId}
-                selectedJobIds={selectedJobIds}
-                jobIds={jobIds}
-              />
-            )
+            <JobIdFilter
+              title={i18n.JOB_ID}
+              onSelect={onSelectJobId}
+              selectedJobIds={selectedJobIds}
+              jobIds={jobIds}
+            />
           }
         />
         {toggleStatus && (
@@ -135,12 +133,12 @@ const AnomaliesNetworkTableComponent: React.FC<AnomaliesNetworkTableProps> = ({
           />
         )}
 
-        {loading && (
+        {(loadingTable || loadingJobs) && (
           <Loader data-test-subj="anomalies-network-table-loading-panel" overlay size="xl" />
         )}
       </Panel>
     );
   }
 };
 
-export const AnomaliesNetworkTable = React.memo(AnomaliesNetworkTableComponent, networkEquality);
+export const AnomaliesNetworkTable = React.memo(AnomaliesNetworkTableComponent);
diff --git a/x-pack/plugins/security_solution/public/common/components/ml/tables/anomalies_user_table.tsx b/x-pack/plugins/security_solution/public/common/components/ml/tables/anomalies_user_table.tsx
@@ -8,6 +8,7 @@
 import React, { useCallback, useEffect, useState, useMemo } from 'react';
 
 import { useDispatch } from 'react-redux';
+import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import { useAnomaliesTableData } from '../anomaly/use_anomalies_table_data';
 import { HeaderSection } from '../../header_section';
 
@@ -21,11 +22,11 @@ import { BasicTable } from './basic_table';
 
 import { getCriteriaFromUsersType } from '../criteria/get_criteria_from_users_type';
 import { Panel } from '../../panel';
-import { anomaliesTableDefaultEquality } from './default_equality';
 import { convertAnomaliesToUsers } from './convert_anomalies_to_users';
 import { getAnomaliesUserTableColumnsCurated } from './get_anomalies_user_table_columns';
 import { useQueryToggle } from '../../../containers/query_toggle';
 import { JobIdFilter } from './job_id_filter';
+import { SelectInterval } from './select_interval';
 import { useDeepEqualSelector } from '../../../hooks/use_selector';
 import { usersActions, usersSelectors } from '../../../../users/store';
 import type { State } from '../../../store/types';
@@ -62,7 +63,7 @@ const AnomaliesUserTableComponent: React.FC<AnomaliesUserTableProps> = ({
     [setQuerySkip, setToggleStatus]
   );
 
-  const jobIds = useInstalledSecurityJobsIds();
+  const { jobIds, loading: loadingJobs } = useInstalledSecurityJobsIds();
 
   const getAnomaliesUserTableFilterQuerySelector = useMemo(
     () => usersSelectors.usersAnomaliesJobIdFilterSelector(),
@@ -85,7 +86,28 @@ const AnomaliesUserTableComponent: React.FC<AnomaliesUserTableProps> = ({
     [dispatch, type]
   );
 
-  const [loading, tableData] = useAnomaliesTableData({
+  const getAnomaliesUserTableIntervalQuerySelector = useMemo(
+    () => usersSelectors.usersAnomaliesIntervalSelector(),
+    []
+  );
+
+  const selectedInterval = useDeepEqualSelector((state: State) =>
+    getAnomaliesUserTableIntervalQuerySelector(state, type)
+  );
+
+  const onSelectInterval = useCallback(
+    (newInterval: string) => {
+      dispatch(
+        usersActions.updateUsersAnomaliesInterval({
+          interval: newInterval,
+          usersType: type,
+        })
+      );
+    },
+    [dispatch, type]
+  );
+
+  const [loadingTable, tableData] = useAnomaliesTableData({
     startDate,
     endDate,
     skip: querySkip,
@@ -94,6 +116,7 @@ const AnomaliesUserTableComponent: React.FC<AnomaliesUserTableProps> = ({
       exists: { field: 'user.name' },
     },
     jobIds: selectedJobIds.length > 0 ? selectedJobIds : jobIds,
+    aggregationInterval: selectedInterval,
   });
 
   const users = convertAnomaliesToUsers(tableData, userName);
@@ -111,7 +134,7 @@ const AnomaliesUserTableComponent: React.FC<AnomaliesUserTableProps> = ({
     return null;
   } else {
     return (
-      <Panel loading={loading} data-test-subj="user-anomalies-tab">
+      <Panel loading={loadingTable || loadingJobs} data-test-subj="user-anomalies-tab">
         <HeaderSection
           subtitle={`${i18n.SHOWING}: ${pagination.totalItemCount.toLocaleString()} ${i18n.UNIT(
             pagination.totalItemCount
@@ -122,14 +145,20 @@ const AnomaliesUserTableComponent: React.FC<AnomaliesUserTableProps> = ({
           tooltip={i18n.TOOLTIP}
           isInspectDisabled={skip}
           headerFilters={
-            jobIds.length > 0 && (
-              <JobIdFilter
-                title={i18n.JOB_ID}
-                onSelect={onSelectJobId}
-                selectedJobIds={selectedJobIds}
-                jobIds={jobIds}
-              />
-            )
+            <EuiFlexGroup>
+              <EuiFlexItem>
+                <SelectInterval interval={selectedInterval} onChange={onSelectInterval} />
+              </EuiFlexItem>
+
+              <EuiFlexItem grow={false}>
+                <JobIdFilter
+                  title={i18n.JOB_ID}
+                  onSelect={onSelectJobId}
+                  selectedJobIds={selectedJobIds}
+                  jobIds={jobIds}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
           }
         />
 
@@ -144,15 +173,12 @@ const AnomaliesUserTableComponent: React.FC<AnomaliesUserTableProps> = ({
           />
         )}
 
-        {loading && (
-          <Loader data-test-subj="anomalies-host-table-loading-panel" overlay size="xl" />
+        {(loadingTable || loadingJobs) && (
+          <Loader data-test-subj="anomalies-user-table-loading-panel" overlay size="xl" />
         )}
       </Panel>
     );
   }
 };
 
-export const AnomaliesUserTable = React.memo(
-  AnomaliesUserTableComponent,
-  anomaliesTableDefaultEquality
-);
+export const AnomaliesUserTable = React.memo(AnomaliesUserTableComponent);