Merge pull request #3 from XavierM/pr/137476

Review Idea to always get a background on the graph
elastic · Aug 2, 2022 · a7f4ca0 · a7f4ca0
2 parents 2c68d83 + 1fca5af
commit a7f4ca0
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 17 deletions.
diff --git a/...plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts b/...plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts
@@ -214,35 +214,46 @@ export async function fetchRuleAlertsAggByTimeRange({
         (
           acc: AlertChartData[],
           dayAlerts: {
-            key_as_string: string;
+            key: number;
             doc_count: number;
             alertStatus: {
               buckets: Array<{
-                key: string;
+                key: 'active' | 'recovered';
                 doc_count: number;
               }>;
             };
           }
         ) => {
           // We are adding this to each day to construct the 30 days bars (background bar) when there is no data for a given day or to show the delta today alerts/total alerts.
           const totalDayAlerts = {
-            date: dayAlerts.key_as_string,
-            count: totalAlerts,
+            date: dayAlerts.key,
+            count: totalAlerts === 0 ? 1 : totalAlerts,
             status: 'total',
           };
 
           if (dayAlerts.doc_count > 0) {
+            const localAlertChartData = acc;
             // If there are alerts in this day, we construct the chart data.
-            return [
-              ...acc,
-              ...dayAlerts.alertStatus.buckets.map((alert) => ({
-                date: dayAlerts.key_as_string,
+            let countOfRecoveredActiveAlerts = 0;
+            dayAlerts.alertStatus.buckets.forEach((alert) => {
+              countOfRecoveredActiveAlerts += alert.doc_count;
+              localAlertChartData.push({
+                date: dayAlerts.key,
                 count: alert.doc_count,
                 status: alert.key,
-              })),
-            ];
+              });
+            });
+            const deltaAlertsCount = totalAlerts - countOfRecoveredActiveAlerts;
+            if (deltaAlertsCount > 0) {
+              localAlertChartData.push({
+                date: dayAlerts.key,
+                count: deltaAlertsCount,
+                status: 'total',
+              });
+            }
+            return localAlertChartData;
           }
-          return [...acc, { ...totalDayAlerts }];
+          return [...acc, totalDayAlerts];
         },
         []
       ),
@@ -251,7 +262,11 @@ export async function fetchRuleAlertsAggByTimeRange({
     return {
       active,
       recovered,
-      alertsChartData,
+      alertsChartData: [
+        ...alertsChartData.filter((acd) => acd.status === 'active'),
+        ...alertsChartData.filter((acd) => acd.status === 'recovered'),
+        ...alertsChartData.filter((acd) => acd.status === 'total'),
+      ],
     };
   } catch (error) {
     return {

diff --git a/..._actions_ui/public/application/sections/rule_details/components/alert_summary/helpers.tsx b/..._actions_ui/public/application/sections/rule_details/components/alert_summary/helpers.tsx
@@ -10,7 +10,7 @@ import { AlertChartData } from './types';
 
 export const formatChartAlertData = (
   data: AlertChartData[]
-): Array<{ x: string; y: number; g: string }> =>
+): Array<{ x: number; y: number; g: string }> =>
   data.map((alert) => ({
     x: alert.date,
     y: alert.count,
@@ -29,3 +29,13 @@ export const getColorSeries = ({ seriesKeys }: XYChartSeriesIdentifier) => {
       return null;
   }
 };
+
+/**
+ * This function may be passed to `Array.find()` to locate the `P1DT`
+ * configuration (sub) setting, a string array that contains two entries
+ * like the following example: `['P1DT', 'YYYY-MM-DD']`.
+ */
+export const isP1DTFormatterSetting = (formatNameFormatterPair?: string[]) =>
+  Array.isArray(formatNameFormatterPair) &&
+  formatNameFormatterPair[0] === 'P1DT' &&
+  formatNameFormatterPair.length === 2;
diff --git a/...public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx b/...public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx
@@ -32,18 +32,30 @@ import {
   EUI_SPARKLINE_THEME_PARTIAL,
 } from '@elastic/eui/dist/eui_charts_theme';
 import { useUiSetting } from '@kbn/kibana-react-plugin/public';
+import moment from 'moment';
 import { useLoadRuleAlertsAggs } from '../../../../hooks/use_load_rule_alerts_aggregations';
 import { useLoadRuleTypes } from '../../../../hooks/use_load_rule_types';
 import { formatChartAlertData, getColorSeries } from '.';
 import { RuleAlertsSummaryProps } from '.';
+import { isP1DTFormatterSetting } from './helpers';
 
 const Y_ACCESSORS = ['y'];
 const X_ACCESSORS = ['x'];
 const G_ACCESSORS = ['g'];
-
+const FALLBACK_DATE_FORMAT_SCALED_P1DT = 'YYYY-MM-DD';
 export const RuleAlertsSummary = ({ rule, filteredRuleTypes }: RuleAlertsSummaryProps) => {
   const [features, setFeatures] = useState<string>('');
   const isDarkMode = useUiSetting<boolean>('theme:darkMode');
+
+  const scaledDateFormatPreference = useUiSetting<string[][]>('dateFormat:scaled');
+  const maybeP1DTFormatter = Array.isArray(scaledDateFormatPreference)
+    ? scaledDateFormatPreference.find(isP1DTFormatterSetting)
+    : null;
+  const p1dtFormat =
+    Array.isArray(maybeP1DTFormatter) && maybeP1DTFormatter.length === 2
+      ? maybeP1DTFormatter[1]
+      : FALLBACK_DATE_FORMAT_SCALED_P1DT;
+
   const theme = useMemo(
     () => [
       EUI_SPARKLINE_THEME_PARTIAL,
@@ -64,6 +76,15 @@ export const RuleAlertsSummary = ({ rule, filteredRuleTypes }: RuleAlertsSummary
     features,
   });
   const chartData = useMemo(() => formatChartAlertData(alertsChartData), [alertsChartData]);
+  const tooltipSettings = useMemo(
+    () => ({
+      type: TooltipType.VerticalCursor,
+      headerFormatter: ({ value }: { value: number }) => {
+        return <>{moment(value).format(p1dtFormat)}</>;
+      },
+    }),
+    [p1dtFormat]
+  );
 
   useEffect(() => {
     const matchedRuleType = ruleTypes.find((type) => type.id === rule.ruleTypeId);
@@ -184,7 +205,7 @@ export const RuleAlertsSummary = ({ rule, filteredRuleTypes }: RuleAlertsSummary
       </EuiFlexGroup>
       <EuiSpacer size="m" />
       <Chart size={{ height: 50 }}>
-        <Settings tooltip={TooltipType.VerticalCursor} theme={theme} />
+        <Settings tooltip={tooltipSettings} theme={theme} />
         <BarSeries
           id="bars"
           xScaleType={ScaleType.Time}

diff --git a/...ers_actions_ui/public/application/sections/rule_details/components/alert_summary/types.ts b/...ers_actions_ui/public/application/sections/rule_details/components/alert_summary/types.ts
@@ -12,9 +12,9 @@ export interface RuleAlertsSummaryProps {
   filteredRuleTypes: string[];
 }
 export interface AlertChartData {
-  status: 'active' | 'recovered';
+  status: 'active' | 'recovered' | 'total';
   count: number;
-  date: string;
+  date: number;
 }
 
 export interface AlertsChartProps {