address comments and fix tests

x-pack/plugins/security_solution/cypress/screens/alerts.ts

@@ -90,7 +90,7 @@ export const RULE_NAME = '[data-test-subj^=formatted-field][data-test-subj$=rule
 
 export const SELECTED_ALERTS = '[data-test-subj="selectedShowBulkActionsButton"]';
 
-export const SELECT_TABLE = '[data-test-subj="chart-select-table"]';
+export const SELECT_AGGREGATION_CHART = '[data-test-subj="chart-select-table"]';
 
 export const SEND_ALERT_TO_TIMELINE_BTN = '[data-test-subj="send-alert-to-timeline-button"]';
 

x-pack/plugins/security_solution/cypress/tasks/alerts.ts

@@ -17,7 +17,7 @@ import {
   MARK_ALERT_ACKNOWLEDGED_BTN,
   OPEN_ALERT_BTN,
   SEND_ALERT_TO_TIMELINE_BTN,
-  SELECT_TABLE,
+  SELECT_AGGREGATION_CHART,
   TAKE_ACTION_POPOVER_BTN,
   TIMELINE_CONTEXT_MENU_BTN,
   CLOSE_FLYOUT,
@@ -256,7 +256,7 @@ export const openAlerts = () => {
 };
 
 export const selectCountTable = () => {
-  cy.get(SELECT_TABLE).click({ force: true });
+  cy.get(SELECT_AGGREGATION_CHART).click({ force: true });
 };
 
 export const clearGroupByTopInput = () => {

x-pack/plugins/security_solution/public/common/components/alerts_treemap/index.test.tsx

@@ -49,7 +49,7 @@ describe('AlertsTreemap', () => {
     });
 
     test('it renders the treemap', () => {
-      expect(screen.getByTestId('treemap').querySelector('.echChart')).toBeInTheDocument();
+      expect(screen.getByTestId('alerts-treemap').querySelector('.echChart')).toBeInTheDocument();
     });
 
     test('it renders the legend with the expected overflow-y style', () => {
@@ -71,7 +71,7 @@ describe('AlertsTreemap', () => {
     });
 
     test('it does NOT render the treemap', () => {
-      expect(screen.queryByTestId('treemap')).not.toBeInTheDocument();
+      expect(screen.queryByTestId('alerts-treemap')).not.toBeInTheDocument();
     });
 
     test('it does NOT render the legend', () => {
@@ -127,7 +127,7 @@ describe('AlertsTreemap', () => {
     });
 
     test('it renders the treemap', () => {
-      expect(screen.getByTestId('treemap').querySelector('.echChart')).toBeInTheDocument();
+      expect(screen.getByTestId('alerts-treemap').querySelector('.echChart')).toBeInTheDocument();
     });
 
     test('it does NOT render the "no data" message', () => {

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_by_type_panel/helpers.tsx

@@ -59,11 +59,11 @@ const getAggregateAlerts = (
   return ret;
 };
 
-export const isAlertsTypeData = (data: SummaryChartsData[]): data is AlertsTypeData[] => {
+export const getIsAlertsTypeData = (data: SummaryChartsData[]): data is AlertsTypeData[] => {
   return data?.every((x) => has(x, 'type'));
 };
 
-export const isAlertsByTypeAgg = (
+export const getIsAlertsByTypeAgg = (
   data: AlertSearchResponse<{}, SummaryChartsAgg>
 ): data is AlertSearchResponse<{}, AlertsByTypeAgg> => {
   return has(data, 'aggregations.alertsByRule');

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_by_type_panel/index.tsx

@@ -14,7 +14,7 @@ import { HeaderSection } from '../../../../common/components/header_section';
 import { InspectButtonContainer } from '../../../../common/components/inspect';
 import { useSummaryChartData } from '../alerts_summary_charts_panel/use_summary_chart_data';
 import { alertTypeAggregations } from '../alerts_summary_charts_panel/aggregations';
-import { isAlertsTypeData } from './helpers';
+import { getIsAlertsTypeData } from './helpers';
 import * as i18n from './translations';
 
 const ALERTS_BY_TYPE_CHART_ID = 'alerts-summary-alert_by_type';
@@ -37,7 +37,7 @@ export const AlertsByTypePanel: React.FC<ChartsPanelProps> = ({
     skip,
     uniqueQueryId,
   });
-  const data = useMemo(() => (isAlertsTypeData(items) ? items : []), [items]);
+  const data = useMemo(() => (getIsAlertsTypeData(items) ? items : []), [items]);
 
   return (
     <InspectButtonContainer>

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/helpers.tsx

@@ -43,13 +43,13 @@ export const parseAlertsGroupingData = (
   return topAlerts;
 };
 
-export const isAlertsProgressBarData = (
+export const getIsAlertsProgressBarData = (
   data: SummaryChartsData[]
 ): data is AlertsProgressBarData[] => {
   return data?.every((x) => has(x, 'percentage'));
 };
 
-export const isAlertsByGroupingAgg = (
+export const getIsAlertsByGroupingAgg = (
   data: AlertSearchResponse<{}, SummaryChartsAgg>
 ): data is AlertSearchResponse<{}, AlertsByGroupingAgg> => {
   return has(data, 'aggregations.alertsByGrouping');

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_progress_bar_panel/index.tsx

@@ -16,7 +16,7 @@ import { AlertsProgressBar } from './alerts_progress_bar';
 import { useSummaryChartData } from '../alerts_summary_charts_panel/use_summary_chart_data';
 import { alertsGroupingAggregations } from '../alerts_summary_charts_panel/aggregations';
 import { showInitialLoadingSpinner } from '../alerts_histogram_panel/helpers';
-import { isAlertsProgressBarData } from './helpers';
+import { getIsAlertsProgressBarData } from './helpers';
 import * as i18n from './translations';
 import type { GroupBySelection } from './types';
 
@@ -67,7 +67,7 @@ export const AlertsProgressBarPanel: React.FC<Props> = ({
     skip,
     uniqueQueryId,
   });
-  const data = useMemo(() => (isAlertsProgressBarData(items) ? items : []), [items]);
+  const data = useMemo(() => (getIsAlertsProgressBarData(items) ? items : []), [items]);
   useEffect(() => {
     if (!showInitialLoadingSpinner({ isInitialLoading, isLoadingAlerts: isLoading })) {
       setIsInitialLoading(false);

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/alerts_summary_charts_panel/helpers.tsx

@@ -6,28 +6,28 @@
  */
 import type { SummaryChartsAgg } from './types';
 import type { AlertSearchResponse } from '../../../containers/detection_engine/alerts/types';
-import { parseSeverityData, isAlertsBySeverityAgg } from '../severity_level_panel/helpers';
-import { parseAlertsTypeData, isAlertsByTypeAgg } from '../alerts_by_type_panel/helpers';
+import { parseSeverityData, getIsAlertsBySeverityAgg } from '../severity_level_panel/helpers';
+import { parseAlertsTypeData, getIsAlertsByTypeAgg } from '../alerts_by_type_panel/helpers';
 import {
   parseAlertsGroupingData,
-  isAlertsByGroupingAgg,
+  getIsAlertsByGroupingAgg,
 } from '../alerts_progress_bar_panel/helpers';
 import {
   parseChartCollapseData,
-  isChartCollapseAgg,
+  getIsChartCollapseAgg,
 } from '../../../pages/detection_engine/chart_panels/chart_collapse/helpers';
 
 export const parseData = (data: AlertSearchResponse<{}, SummaryChartsAgg>) => {
-  if (isAlertsBySeverityAgg(data)) {
+  if (getIsAlertsBySeverityAgg(data)) {
     return parseSeverityData(data);
   }
-  if (isAlertsByTypeAgg(data)) {
+  if (getIsAlertsByTypeAgg(data)) {
     return parseAlertsTypeData(data);
   }
-  if (isAlertsByGroupingAgg(data)) {
+  if (getIsAlertsByGroupingAgg(data)) {
     return parseAlertsGroupingData(data);
   }
-  if (isChartCollapseAgg(data)) {
+  if (getIsChartCollapseAgg(data)) {
     return parseChartCollapseData(data);
   }
   return [];

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/helpers.tsx

@@ -35,11 +35,11 @@ export const parseSeverityData = (
       });
 };
 
-export const isAlertsBySeverityData = (data: SummaryChartsData[]): data is SeverityData[] => {
+export const getIsAlertsBySeverityData = (data: SummaryChartsData[]): data is SeverityData[] => {
   return data?.every((x) => has(x, 'key'));
 };
 
-export const isAlertsBySeverityAgg = (
+export const getIsAlertsBySeverityAgg = (
   data: AlertSearchResponse<{}, SummaryChartsAgg>
 ): data is AlertSearchResponse<{}, AlertsBySeverityAgg> => {
   return has(data, 'aggregations.statusBySeverity');

x-pack/plugins/security_solution/public/detections/components/alerts_kpis/severity_level_panel/index.tsx

@@ -13,7 +13,7 @@ import { HeaderSection } from '../../../../common/components/header_section';
 import { InspectButtonContainer } from '../../../../common/components/inspect';
 import { useSummaryChartData } from '../alerts_summary_charts_panel/use_summary_chart_data';
 import { severityAggregations } from '../alerts_summary_charts_panel/aggregations';
-import { isAlertsBySeverityData } from './helpers';
+import { getIsAlertsBySeverityData } from './helpers';
 import { SeverityLevelChart } from './severity_level_chart';
 import * as i18n from './translations';
 
@@ -38,7 +38,7 @@ export const SeverityLevelPanel: React.FC<ChartsPanelProps> = ({
     skip,
     uniqueQueryId,
   });
-  const data = useMemo(() => (isAlertsBySeverityData(items) ? items : []), [items]);
+  const data = useMemo(() => (getIsAlertsBySeverityData(items) ? items : []), [items]);
   return (
     <InspectButtonContainer>
       <EuiPanel hasBorder hasShadow={false} data-test-subj="severty-level-panel">

x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/chart_collapse/helpers.tsx

@@ -36,11 +36,11 @@ export const parseChartCollapseData = (
   return [];
 };
 
-export const isChartCollapseData = (data: SummaryChartsData[]): data is ChartCollapseData[] => {
+export const getIsChartCollapseData = (data: SummaryChartsData[]): data is ChartCollapseData[] => {
   return data?.every((x) => has(x, 'rule') && has(x, 'group') && has(x, 'severities'));
 };
 
-export const isChartCollapseAgg = (
+export const getIsChartCollapseAgg = (
   data: AlertSearchResponse<{}, SummaryChartsAgg>
 ): data is AlertSearchResponse<{}, ChartCollapseAgg> => {
   return (

x-pack/plugins/security_solution/public/detections/pages/detection_engine/chart_panels/chart_collapse/index.tsx

@@ -18,7 +18,7 @@ import { InspectButton, InspectButtonContainer } from '../../../../../common/com
 import { useSummaryChartData } from '../../../../components/alerts_kpis/alerts_summary_charts_panel/use_summary_chart_data';
 import { getSeverityColor } from '../../../../components/alerts_kpis/severity_level_panel/helpers';
 import { FormattedCount } from '../../../../../common/components/formatted_number';
-import { isChartCollapseData } from './helpers';
+import { getIsChartCollapseData } from './helpers';
 import * as i18n from './translations';
 
 import { SEVERITY_COLOR } from '../../../../../overview/components/detection_response/utils';
@@ -88,7 +88,7 @@ export const ChartCollapse: React.FC<Props> = ({
     runtimeMappings,
     uniqueQueryId,
   });
-  const data = useMemo(() => (isChartCollapseData(items) ? items : []), [items]);
+  const data = useMemo(() => (getIsChartCollapseData(items) ? items : []), [items]);
 
   const topRule = useMemo(() => data.at(0)?.rule ?? i18n.NO_RESULT_MESSAGE, [data]);
   const topGroup = useMemo(() => data.at(0)?.group ?? i18n.NO_RESULT_MESSAGE, [data]);