Customize AuthenticationsOverTimeHistogram colors to match KPIs

elastic · Oct 19, 2019 · 7789c2f · 7789c2f
1 parent 8ee8abe
commit 7789c2f
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 22 deletions.
diff --git a/x-pack/legacy/plugins/siem/public/components/matrix_over_time/index.tsx b/x-pack/legacy/plugins/siem/public/components/matrix_over_time/index.tsx
@@ -31,6 +31,7 @@ export interface MatrixOverTimeBasicProps {
 }
 
 export interface MatrixOverTimeProps extends MatrixOverTimeBasicProps {
+  customChartData?: ChartSeriesData[];
   title: string;
   subtitle?: string;
   dataKey: string;
@@ -73,6 +74,7 @@ const getBarchartConfigs = (from: number, to: number, onBrushEnd: UpdateDateRang
 });
 
 export const MatrixOverTimeHistogram = ({
+  customChartData,
   id,
   loading,
   data,
@@ -91,7 +93,7 @@ export const MatrixOverTimeHistogram = ({
   const [darkMode] = useKibanaUiSetting(DEFAULT_DARK_MODE);
   const [loadingInitial, setLoadingInitial] = useState(false);
 
-  const barChartData: ChartSeriesData[] = [
+  const barChartData: ChartSeriesData[] = customChartData || [
     {
       key: dataKey,
       value: data,

diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_over_time/index.tsx b/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_over_time/index.tsx
@@ -7,16 +7,21 @@
 import React from 'react';
 
 import * as i18n from './translation';
+import { getCustomChartData } from './utils';
 import { MatrixOverTimeHistogram, MatrixOverTimeBasicProps } from '../../../matrix_over_time';
 
 export const AuthenticationsOverTimeHistogram = (props: MatrixOverTimeBasicProps) => {
   const dataKey = 'authenticationsOverTime';
-  const { ...matrixOverTimeProps } = props;
+  const { data, ...matrixOverTimeProps } = props;
+
+  const customChartData = getCustomChartData(data);
 
   return (
     <MatrixOverTimeHistogram
       title={i18n.AUTHENTICATIONS_COUNT}
       dataKey={dataKey}
+      data={data}
+      customChartData={customChartData}
       {...matrixOverTimeProps}
     />
   );

diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_over_time/utils.ts b/x-pack/legacy/plugins/siem/public/components/page/hosts/authentications_over_time/utils.ts
@@ -0,0 +1,39 @@
+/*
+ * 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 { groupBy, map, toPairs } from 'lodash/fp';
+
+import { ChartSeriesData } from '../../../charts/common';
+import { MatrixOverTimeHistogramData } from '../../../../graphql/types';
+import { KpiHostsChartColors } from '../kpi_hosts/types';
+
+const formatToChartDataItem = ([key, value]: [
+  string,
+  MatrixOverTimeHistogramData[]
+]): ChartSeriesData => ({
+  key,
+  value,
+});
+
+const addCustomColors = (item: ChartSeriesData) => {
+  if (item.key === 'authentication_success') {
+    item.color = KpiHostsChartColors.authSuccess;
+  }
+
+  if (item.key === 'authentication_failure') {
+    item.color = KpiHostsChartColors.authFailure;
+  }
+
+  return item;
+};
+
+export const getCustomChartData = (data: MatrixOverTimeHistogramData[]): ChartSeriesData[] => {
+  const dataGroupedByEvent = groupBy('g', data);
+  const dataGroupedEntries = toPairs(dataGroupedByEvent);
+  const formattedChartData = map(formatToChartDataItem, dataGroupedEntries);
+
+  return map(addCustomColors, formattedChartData);
+};
diff --git a/...ck/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_host_details_mapping.ts b/...ck/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_host_details_mapping.ts
@@ -6,11 +6,7 @@
 
 import * as i18n from './translations';
 import { StatItems } from '../../../stat_items';
-
-const euiColorVis0 = '#00B3A4';
-const euiColorVis2 = '#DB1374';
-const euiColorVis3 = '#490092';
-const euiColorVis9 = '#920000';
+import { KpiHostsChartColors } from './types';
 
 export const kpiHostDetailsMapping: Readonly<StatItems[]> = [
   {
@@ -22,15 +18,15 @@ export const kpiHostDetailsMapping: Readonly<StatItems[]> = [
         name: i18n.SUCCESS_CHART_LABEL,
         description: i18n.SUCCESS_UNIT_LABEL,
         value: null,
-        color: euiColorVis0,
+        color: KpiHostsChartColors.authSuccess,
         icon: 'check',
       },
       {
         key: 'authFailure',
         name: i18n.FAIL_CHART_LABEL,
         description: i18n.FAIL_UNIT_LABEL,
         value: null,
-        color: euiColorVis9,
+        color: KpiHostsChartColors.authFailure,
         icon: 'cross',
       },
     ],
@@ -48,15 +44,15 @@ export const kpiHostDetailsMapping: Readonly<StatItems[]> = [
         name: i18n.SOURCE_CHART_LABEL,
         description: i18n.SOURCE_UNIT_LABEL,
         value: null,
-        color: euiColorVis2,
+        color: KpiHostsChartColors.uniqueSourceIps,
         icon: 'visMapCoordinate',
       },
       {
         key: 'uniqueDestinationIps',
         name: i18n.DESTINATION_CHART_LABEL,
         description: i18n.DESTINATION_UNIT_LABEL,
         value: null,
-        color: euiColorVis3,
+        color: KpiHostsChartColors.uniqueDestinationIps,
         icon: 'visMapCoordinate',
       },
     ],

diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_hosts_mapping.ts b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/kpi_hosts_mapping.ts
@@ -6,12 +6,7 @@
 
 import * as i18n from './translations';
 import { StatItems } from '../../../stat_items';
-
-const euiColorVis0 = '#00B3A4';
-const euiColorVis1 = '#3185FC';
-const euiColorVis2 = '#DB1374';
-const euiColorVis3 = '#490092';
-const euiColorVis9 = '#920000';
+import { KpiHostsChartColors } from './types';
 
 export const kpiHostsMapping: Readonly<StatItems[]> = [
   {
@@ -21,7 +16,7 @@ export const kpiHostsMapping: Readonly<StatItems[]> = [
       {
         key: 'hosts',
         value: null,
-        color: euiColorVis1,
+        color: KpiHostsChartColors.hosts,
         icon: 'storage',
       },
     ],
@@ -38,15 +33,15 @@ export const kpiHostsMapping: Readonly<StatItems[]> = [
         name: i18n.SUCCESS_CHART_LABEL,
         description: i18n.SUCCESS_UNIT_LABEL,
         value: null,
-        color: euiColorVis0,
+        color: KpiHostsChartColors.authSuccess,
         icon: 'check',
       },
       {
         key: 'authFailure',
         name: i18n.FAIL_CHART_LABEL,
         description: i18n.FAIL_UNIT_LABEL,
         value: null,
-        color: euiColorVis9,
+        color: KpiHostsChartColors.authFailure,
         icon: 'cross',
       },
     ],
@@ -64,15 +59,15 @@ export const kpiHostsMapping: Readonly<StatItems[]> = [
         name: i18n.SOURCE_CHART_LABEL,
         description: i18n.SOURCE_UNIT_LABEL,
         value: null,
-        color: euiColorVis2,
+        color: KpiHostsChartColors.uniqueSourceIps,
         icon: 'visMapCoordinate',
       },
       {
         key: 'uniqueDestinationIps',
         name: i18n.DESTINATION_CHART_LABEL,
         description: i18n.DESTINATION_UNIT_LABEL,
         value: null,
-        color: euiColorVis3,
+        color: KpiHostsChartColors.uniqueDestinationIps,
         icon: 'visMapCoordinate',
       },
     ],

diff --git a/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/types.ts b/x-pack/legacy/plugins/siem/public/components/page/hosts/kpi_hosts/types.ts
@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+export enum KpiHostsChartColors {
+  authSuccess = '#00B3A4',
+  authFailure = '#920000',
+  uniqueSourceIps = '#DB1374',
+  uniqueDestinationIps = '#490092',
+  hosts = '#3185FC',
+}