[Monitoring] Optimizing alerting code

x-pack/plugins/monitoring/common/types/alerts.ts

@@ -4,22 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { Alert } from '../../../alerts/common';
+import { Alert, SanitizedAlert } from '../../../alerts/common';
 import { AlertParamType, AlertMessageTokenType, AlertSeverity } from '../enums';
 
-export interface CommonBaseAlert {
-  type: string;
-  label: string;
-  paramDetails: CommonAlertParamDetails;
-  rawAlert: Alert;
-  isLegacy: boolean;
-}
-
 export interface CommonAlertStatus {
-  exists: boolean;
-  enabled: boolean;
   states: CommonAlertState[];
-  alert: CommonBaseAlert;
+  rawAlert: Alert | SanitizedAlert;
 }
 
 export interface CommonAlertState {
@@ -32,14 +22,6 @@ export interface CommonAlertFilter {
   nodeUuid?: string;
 }
 
-export interface CommonAlertNodeUuidFilter extends CommonAlertFilter {
-  nodeUuid: string;
-}
-
-export interface CommonAlertStackProductFilter extends CommonAlertFilter {
-  stackProduct: string;
-}
-
 export interface CommonAlertParamDetail {
   label: string;
   type?: AlertParamType;
@@ -50,7 +32,9 @@ export interface CommonAlertParamDetails {
 }
 
 export interface CommonAlertParams {
-  [name: string]: string | number;
+  duration: string;
+  threshold?: number;
+  limit?: string;
 }
 
 export interface ThreadPoolRejectionsAlertParams {
@@ -65,7 +49,11 @@ export interface AlertEnableAction {
 
 export interface AlertInstanceState {
   alertStates: Array<
-    AlertState | AlertCpuUsageState | AlertDiskUsageState | AlertThreadPoolRejectionsState
+    | AlertState
+    | AlertCpuUsageState
+    | AlertDiskUsageState
+    | AlertThreadPoolRejectionsState
+    | AlertNodeState
   >;
   [x: string]: unknown;
 }
@@ -74,11 +62,13 @@ export interface AlertState {
   cluster: AlertCluster;
   ccs?: string;
   ui: AlertUiState;
+  [key: string]: unknown;
 }
 
 export interface AlertNodeState extends AlertState {
   nodeId: string;
   nodeName?: string;
+  [key: string]: unknown;
 }
 
 export interface AlertCpuUsageState extends AlertNodeState {
@@ -89,13 +79,6 @@ export interface AlertDiskUsageState extends AlertNodeState {
   diskUsage: number;
 }
 
-export interface AlertMissingDataState extends AlertState {
-  stackProduct: string;
-  stackProductUuid: string;
-  stackProductName: string;
-  gapDuration: number;
-}
-
 export interface AlertMemoryUsageState extends AlertNodeState {
   memoryUsage: number;
 }
@@ -109,9 +92,9 @@ export interface AlertThreadPoolRejectionsState extends AlertState {
 
 export interface AlertUiState {
   isFiring: boolean;
+  resolvedMS?: number;
   severity: AlertSeverity;
   message: AlertMessage | null;
-  resolvedMS: number;
   lastCheckedMS: number;
   triggeredMS: number;
 }
@@ -177,17 +160,13 @@ export interface AlertMemoryUsageNodeStats extends AlertNodeStats {
   memoryUsage: number;
 }
 
-export interface AlertMissingData {
-  stackProduct: string;
-  stackProductUuid: string;
-  stackProductName: string;
-  clusterUuid: string;
+export interface AlertMissingData extends AlertNodeStats {
   gapDuration: number;
-  ccs?: string;
 }
 
 export interface AlertData {
-  instanceKey: string;
+  nodeName?: string;
+  nodeId?: string;
   clusterUuid: string;
   ccs?: string;
   shouldFire?: boolean;

x-pack/plugins/monitoring/public/alerts/badge.tsx

@@ -18,7 +18,7 @@ import { CommonAlertStatus, CommonAlertState } from '../../common/types/alerts';
 import { AlertSeverity } from '../../common/enums';
 // @ts-ignore
 import { formatDateTimeLocal } from '../../common/formatting';
-import { AlertMessage, AlertState } from '../../common/types/alerts';
+import { AlertState } from '../../common/types/alerts';
 import { AlertPanel } from './panel';
 import { Legacy } from '../legacy_shims';
 import { isInSetupMode } from '../lib/setup_mode';
@@ -40,10 +40,9 @@ interface AlertInPanel {
 interface Props {
   alerts: { [alertTypeId: string]: CommonAlertStatus };
   stateFilter: (state: AlertState) => boolean;
-  nextStepsFilter: (nextStep: AlertMessage) => boolean;
 }
 export const AlertsBadge: React.FC<Props> = (props: Props) => {
-  const { stateFilter = () => true, nextStepsFilter = () => true } = props;
+  const { stateFilter = () => true } = props;
   const [showPopover, setShowPopover] = React.useState<AlertSeverity | boolean | null>(null);
   const inSetupMode = isInSetupMode(React.useContext(SetupModeContext));
   const alerts = Object.values(props.alerts).filter(Boolean);
@@ -70,19 +69,19 @@ export const AlertsBadge: React.FC<Props> = (props: Props) => {
         title: i18n.translate('xpack.monitoring.alerts.badge.panelTitle', {
           defaultMessage: 'Alerts',
         }),
-        items: alerts.map(({ alert }, index) => {
+        items: alerts.map(({ rawAlert }, index) => {
           return {
-            name: <EuiText>{alert.label}</EuiText>,
+            name: <EuiText>{rawAlert.name}</EuiText>,
             panel: index + 1,
           };
         }),
       },
       ...alerts.map((alertStatus, index) => {
         return {
           id: index + 1,
-          title: alertStatus.alert.label,
+          title: alertStatus.rawAlert.name,
           width: 400,
-          content: <AlertPanel alert={alertStatus} nextStepsFilter={nextStepsFilter} />,
+          content: <AlertPanel alert={alertStatus} />,
         };
       }),
     ];
@@ -147,7 +146,7 @@ export const AlertsBadge: React.FC<Props> = (props: Props) => {
                   <EuiText size="s">
                     <h4>{getDateFromState(alertState)}</h4>
                   </EuiText>
-                  <EuiText>{alert.alert.label}</EuiText>
+                  <EuiText>{alert.rawAlert.name}</EuiText>
                 </Fragment>
               ),
               panel: index + 1,
@@ -159,13 +158,7 @@ export const AlertsBadge: React.FC<Props> = (props: Props) => {
             id: index + 1,
             title: getDateFromState(alertStatus.alertState),
             width: 400,
-            content: (
-              <AlertPanel
-                alert={alertStatus.alert}
-                alertState={alertStatus.alertState}
-                nextStepsFilter={nextStepsFilter}
-              />
-            ),
+            content: <AlertPanel alert={alertStatus.alert} alertState={alertStatus.alertState} />,
           };
         }),
       ];

x-pack/plugins/monitoring/public/alerts/callout.tsx

@@ -32,10 +32,9 @@ const TYPES = [
 interface Props {
   alerts: { [alertTypeId: string]: CommonAlertStatus };
   stateFilter: (state: AlertState) => boolean;
-  nextStepsFilter: (nextStep: AlertMessage) => boolean;
 }
 export const AlertsCallout: React.FC<Props> = (props: Props) => {
-  const { alerts, stateFilter = () => true, nextStepsFilter = () => true } = props;
+  const { alerts, stateFilter = () => true } = props;
 
   const callouts = TYPES.map((type) => {
     const list = [];
@@ -57,11 +56,11 @@ export const AlertsCallout: React.FC<Props> = (props: Props) => {
                 const nextStepsUi =
                   state.ui.message.nextSteps && state.ui.message.nextSteps.length ? (
                     <ul>
-                      {state.ui.message.nextSteps
-                        .filter(nextStepsFilter)
-                        .map((step: AlertMessage, nextStepIndex: number) => (
+                      {state.ui.message.nextSteps.map(
+                        (step: AlertMessage, nextStepIndex: number) => (
                           <li key={nextStepIndex}>{replaceTokens(step)}</li>
-                        ))}
+                        )
+                      )}
                     </ul>
                   ) : null;
 

x-pack/plugins/monitoring/public/alerts/panel.tsx

@@ -3,7 +3,7 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React, { Fragment } from 'react';
+import React, { Fragment, useState } from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
@@ -30,28 +30,35 @@ import { SetupModeContext } from '../components/setup_mode/setup_mode_context';
 interface Props {
   alert: CommonAlertStatus;
   alertState?: CommonAlertState;
-  nextStepsFilter: (nextStep: AlertMessage) => boolean;
 }
 export const AlertPanel: React.FC<Props> = (props: Props) => {
   const {
-    alert: { alert },
+    alert: { rawAlert },
     alertState,
-    nextStepsFilter = () => true,
   } = props;
-  const [showFlyout, setShowFlyout] = React.useState(false);
-  const [isEnabled, setIsEnabled] = React.useState(alert.rawAlert.enabled);
-  const [isMuted, setIsMuted] = React.useState(alert.rawAlert.muteAll);
-  const [isSaving, setIsSaving] = React.useState(false);
-  const inSetupMode = isInSetupMode(React.useContext(SetupModeContext));
 
-  if (!alert.rawAlert) {
+  if (!rawAlert) {
     return null;
   }
 
-  async function disableAlert() {
+  /*
+    Looks like a false positive, see: https://github.com/typescript-eslint/typescript-eslint/issues/1051#issuecomment-555604349
+  */
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [showFlyout, setShowFlyout] = useState(false);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [isEnabled, setIsEnabled] = useState(rawAlert.enabled);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [isMuted, setIsMuted] = useState(rawAlert.muteAll);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const [isSaving, setIsSaving] = useState(false);
+  // eslint-disable-next-line react-hooks/rules-of-hooks
+  const inSetupMode = isInSetupMode(React.useContext(SetupModeContext));
+
+  const disableAlert = async () => {
     setIsSaving(true);
     try {
-      await Legacy.shims.http.post(`${BASE_ALERT_API_PATH}/alert/${alert.rawAlert.id}/_disable`);
+      await Legacy.shims.http.post(`${BASE_ALERT_API_PATH}/alert/${rawAlert.id}/_disable`);
     } catch (err) {
       Legacy.shims.toastNotifications.addDanger({
         title: i18n.translate('xpack.monitoring.alerts.panel.disableAlert.errorTitle', {
@@ -61,11 +68,11 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
       });
     }
     setIsSaving(false);
-  }
-  async function enableAlert() {
+  };
+  const enableAlert = async () => {
     setIsSaving(true);
     try {
-      await Legacy.shims.http.post(`${BASE_ALERT_API_PATH}/alert/${alert.rawAlert.id}/_enable`);
+      await Legacy.shims.http.post(`${BASE_ALERT_API_PATH}/alert/${rawAlert.id}/_enable`);
     } catch (err) {
       Legacy.shims.toastNotifications.addDanger({
         title: i18n.translate('xpack.monitoring.alerts.panel.enableAlert.errorTitle', {
@@ -75,11 +82,11 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
       });
     }
     setIsSaving(false);
-  }
-  async function muteAlert() {
+  };
+  const muteAlert = async () => {
     setIsSaving(true);
     try {
-      await Legacy.shims.http.post(`${BASE_ALERT_API_PATH}/alert/${alert.rawAlert.id}/_mute_all`);
+      await Legacy.shims.http.post(`${BASE_ALERT_API_PATH}/alert/${rawAlert.id}/_mute_all`);
     } catch (err) {
       Legacy.shims.toastNotifications.addDanger({
         title: i18n.translate('xpack.monitoring.alerts.panel.muteAlert.errorTitle', {
@@ -89,11 +96,12 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
       });
     }
     setIsSaving(false);
-  }
-  async function unmuteAlert() {
+  };
+
+  const unmuteAlert = async () => {
     setIsSaving(true);
     try {
-      await Legacy.shims.http.post(`${BASE_ALERT_API_PATH}/alert/${alert.rawAlert.id}/_unmute_all`);
+      await Legacy.shims.http.post(`${BASE_ALERT_API_PATH}/alert/${rawAlert.id}/_unmute_all`);
     } catch (err) {
       Legacy.shims.toastNotifications.addDanger({
         title: i18n.translate('xpack.monitoring.alerts.panel.ummuteAlert.errorTitle', {
@@ -103,7 +111,7 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
       });
     }
     setIsSaving(false);
-  }
+  };
 
   const flyoutUi = showFlyout ? (
     <AlertsContextProvider
@@ -119,7 +127,7 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
       }}
     >
       <AlertEdit
-        initialAlert={alert.rawAlert}
+        initialAlert={rawAlert}
         onClose={() => {
           setShowFlyout(false);
           showBottomBar();
@@ -200,11 +208,9 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
   const nextStepsUi =
     alertState.state.ui.message.nextSteps && alertState.state.ui.message.nextSteps.length ? (
       <EuiListGroup>
-        {alertState.state.ui.message.nextSteps
-          .filter(nextStepsFilter)
-          .map((step: AlertMessage, index: number) => (
-            <EuiListGroupItem size="s" key={index} label={replaceTokens(step)} />
-          ))}
+        {alertState.state.ui.message.nextSteps.map((step: AlertMessage, index: number) => (
+          <EuiListGroupItem size="s" key={index} label={replaceTokens(step)} />
+        ))}
       </EuiListGroup>
     ) : null;