[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,13 +40,12 @@ 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);
+  const alerts = Object.values(props.alerts).filter((alertItem) => Boolean(alertItem?.rawAlert));
 
   if (alerts.length === 0) {
     return null;
@@ -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

@@ -28,25 +28,24 @@ 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 [isEnabled, setIsEnabled] = React.useState(rawAlert?.enabled);
+  const [isMuted, setIsMuted] = React.useState(rawAlert?.muteAll);
   const [isSaving, setIsSaving] = React.useState(false);
   const inSetupMode = isInSetupMode(React.useContext(SetupModeContext));
 
   const flyoutUi = useMemo(
     () =>
       showFlyout &&
       Legacy.shims.triggersActionsUi.getEditAlertFlyout({
-        initialAlert: alert.rawAlert,
+        initialAlert: rawAlert,
         onClose: () => {
           setShowFlyout(false);
           showBottomBar();
@@ -56,14 +55,14 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
     [showFlyout]
   );
 
-  if (!alert.rawAlert) {
+  if (!rawAlert) {
     return null;
   }
 
   async function disableAlert() {
     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', {
@@ -77,7 +76,7 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
   async function enableAlert() {
     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', {
@@ -91,7 +90,7 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
   async function muteAlert() {
     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', {
@@ -105,7 +104,7 @@ export const AlertPanel: React.FC<Props> = (props: Props) => {
   async function unmuteAlert() {
     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', {
@@ -189,11 +188,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;
 

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

@@ -7,7 +7,7 @@ import React from 'react';
 import { EuiToolTip, EuiHealth } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
-import { CommonAlertStatus, AlertMessage, AlertState } from '../../common/types/alerts';
+import { CommonAlertStatus, AlertState } from '../../common/types/alerts';
 import { AlertSeverity } from '../../common/enums';
 import { AlertsBadge } from './badge';
 import { isInSetupMode } from '../lib/setup_mode';
@@ -18,16 +18,9 @@ interface Props {
   showBadge: boolean;
   showOnlyCount: boolean;
   stateFilter: (state: AlertState) => boolean;
-  nextStepsFilter: (nextStep: AlertMessage) => boolean;
 }
 export const AlertsStatus: React.FC<Props> = (props: Props) => {
-  const {
-    alerts,
-    showBadge = false,
-    showOnlyCount = false,
-    stateFilter = () => true,
-    nextStepsFilter = () => true,
-  } = props;
+  const { alerts, showBadge = false, showOnlyCount = false, stateFilter = () => true } = props;
   const inSetupMode = isInSetupMode(React.useContext(SetupModeContext));
 
   if (!alerts) {
@@ -78,9 +71,7 @@ export const AlertsStatus: React.FC<Props> = (props: Props) => {
   }
 
   if (showBadge || inSetupMode) {
-    return (
-      <AlertsBadge alerts={alerts} stateFilter={stateFilter} nextStepsFilter={nextStepsFilter} />
-    );
+    return <AlertsBadge alerts={alerts} stateFilter={stateFilter} />;
   }
 
   const severity = atLeastOneDanger ? AlertSeverity.Danger : AlertSeverity.Warning;

x-pack/plugins/monitoring/public/alerts/thread_pool_rejections_alert/index.tsx

@@ -23,11 +23,11 @@ interface ThreadPoolRejectionAlertDetails {
 }
 
 export function createThreadPoolRejectionsAlertType(
-  alertType: string,
+  alertId: string,
   threadPoolAlertDetails: ThreadPoolRejectionAlertDetails
 ): AlertTypeModel {
   return {
-    id: alertType,
+    id: alertId,
     name: threadPoolAlertDetails.label,
     description: threadPoolAlertDetails.description,
     iconClass: 'bell',