review I

elastic · Aug 1, 2022 · 1fca5af · 1fca5af
1 parent 1c96337
commit 1fca5af
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 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
@@ -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/..._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
@@ -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
@@ -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(() => {