fix no alerts + graph to get greyed out

fkanout · Aug 1, 2022 · 1c96337 · 1c96337
1 parent a2b98d4
commit 1c96337
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 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,7 +214,7 @@ export async function fetchRuleAlertsAggByTimeRange({
         (
           acc: AlertChartData[],
           dayAlerts: {
-            key_as_string: string;
+            key: number;
             doc_count: number;
             alertStatus: {
               buckets: Array<{
@@ -226,8 +226,8 @@ export async function fetchRuleAlertsAggByTimeRange({
         ) => {
           // 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',
           };
 
@@ -238,14 +238,14 @@ export async function fetchRuleAlertsAggByTimeRange({
             dayAlerts.alertStatus.buckets.forEach((alert) => {
               countOfRecoveredActiveAlerts += alert.doc_count;
               localAlertChartData.push({
-                date: dayAlerts.key_as_string,
+                date: dayAlerts.key,
                 count: alert.doc_count,
                 status: alert.key,
               });
             });
             if (totalAlerts - countOfRecoveredActiveAlerts > 0) {
               localAlertChartData.push({
-                date: dayAlerts.key_as_string,
+                date: dayAlerts.key,
                 count: totalAlerts - countOfRecoveredActiveAlerts,
                 status: 'total',
               });
@@ -261,7 +261,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,

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,6 +32,7 @@ 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 '.';
@@ -44,6 +45,7 @@ const G_ACCESSORS = ['g'];
 export const RuleAlertsSummary = ({ rule, filteredRuleTypes }: RuleAlertsSummaryProps) => {
   const [features, setFeatures] = useState<string>('');
   const isDarkMode = useUiSetting<boolean>('theme:darkMode');
+  const dateFormat = useUiSetting<string>('dateFormat');
   const theme = useMemo(
     () => [
       EUI_SPARKLINE_THEME_PARTIAL,
@@ -64,6 +66,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(dateFormat)}</>;
+      },
+    }),
+    [dateFormat]
+  );
 
   useEffect(() => {
     const matchedRuleType = ruleTypes.find((type) => type.id === rule.ruleTypeId);
@@ -184,7 +195,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
@@ -14,7 +14,7 @@ export interface RuleAlertsSummaryProps {
 export interface AlertChartData {
   status: 'active' | 'recovered' | 'total';
   count: number;
-  date: string;
+  date: number;
 }
 
 export interface AlertsChartProps {