From 1fca5af9f1ce5b6eb7b3a8bf91503a89f8666136 Mon Sep 17 00:00:00 2001
From: Xavier Mouligneau <xavier.mouligneau@elastic.co>
Date: Mon, 1 Aug 2022 10:34:04 -0400
Subject: [PATCH] review I

---
 .../hooks/use_load_rule_alerts_aggregations.ts |  5 +++--
 .../components/alert_summary/helpers.tsx       | 10 ++++++++++
 .../alert_summary/rule_alerts_summary.tsx      | 18 ++++++++++++++----
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts
index efd830dd4b24f..362ca1027a218 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts
+++ b/x-pack/plugins/triggers_actions_ui/public/application/hooks/use_load_rule_alerts_aggregations.ts
@@ -243,10 +243,11 @@ export async function fetchRuleAlertsAggByTimeRange({
                 status: alert.key,
               });
             });
-            if (totalAlerts - countOfRecoveredActiveAlerts > 0) {
+            const deltaAlertsCount = totalAlerts - countOfRecoveredActiveAlerts;
+            if (deltaAlertsCount > 0) {
               localAlertChartData.push({
                 date: dayAlerts.key,
-                count: totalAlerts - countOfRecoveredActiveAlerts,
+                count: deltaAlertsCount,
                 status: 'total',
               });
             }
diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/helpers.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/helpers.tsx
index 020742c6c3010..dd0ebd7e76f06 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/helpers.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/helpers.tsx
@@ -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/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx
index b1133ac4a9b32..93c559639107b 100644
--- a/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx
+++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/rule_details/components/alert_summary/rule_alerts_summary.tsx
@@ -37,15 +37,25 @@ import { useLoadRuleAlertsAggs } from '../../../../hooks/use_load_rule_alerts_ag
 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 dateFormat = useUiSetting<string>('dateFormat');
+
+  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,
@@ -70,10 +80,10 @@ export const RuleAlertsSummary = ({ rule, filteredRuleTypes }: RuleAlertsSummary
     () => ({
       type: TooltipType.VerticalCursor,
       headerFormatter: ({ value }: { value: number }) => {
-        return <>{moment(value).format(dateFormat)}</>;
+        return <>{moment(value).format(p1dtFormat)}</>;
       },
     }),
-    [dateFormat]
+    [p1dtFormat]
   );
 
   useEffect(() => {