[Monitoring] Missing monitoring data alert

x-pack/plugins/monitoring/common/constants.ts

@@ -235,6 +235,7 @@ export const ALERT_NODES_CHANGED = `${ALERT_PREFIX}alert_nodes_changed`;
 export const ALERT_ELASTICSEARCH_VERSION_MISMATCH = `${ALERT_PREFIX}alert_elasticsearch_version_mismatch`;
 export const ALERT_KIBANA_VERSION_MISMATCH = `${ALERT_PREFIX}alert_kibana_version_mismatch`;
 export const ALERT_LOGSTASH_VERSION_MISMATCH = `${ALERT_PREFIX}alert_logstash_version_mismatch`;
+export const ALERT_MISSING_DATA = `${ALERT_PREFIX}alert_missing_data`;
 
 /**
  * A listing of all alert types
@@ -247,6 +248,7 @@ export const ALERTS = [
   ALERT_ELASTICSEARCH_VERSION_MISMATCH,
   ALERT_KIBANA_VERSION_MISMATCH,
   ALERT_LOGSTASH_VERSION_MISMATCH,
+  ALERT_MISSING_DATA,
 ];
 
 /**

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

@@ -30,10 +30,14 @@ export interface CommonAlertState {
 // eslint-disable-next-line @typescript-eslint/no-empty-interface
 export interface CommonAlertFilter {}
 
-export interface CommonAlertCpuUsageFilter extends CommonAlertFilter {
+export interface CommonAlertNodeUuidFilter extends CommonAlertFilter {
   nodeUuid: string;
 }
 
+export interface CommonAlertStackProductFilter extends CommonAlertFilter {
+  stackProduct: string;
+}
+
 export interface CommonAlertParamDetail {
   label: string;
   type: AlertParamType;

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

@@ -18,7 +18,7 @@ import { CommonAlertStatus, CommonAlertState } from '../../common/types';
 import { AlertSeverity } from '../../common/enums';
 // @ts-ignore
 import { formatDateTimeLocal } from '../../common/formatting';
-import { AlertState } from '../../server/alerts/types';
+import { AlertMessage, AlertState } from '../../server/alerts/types';
 import { AlertPanel } from './panel';
 import { Legacy } from '../legacy_shims';
 import { isInSetupMode } from '../lib/setup_mode';
@@ -39,9 +39,10 @@ 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 } = props;
+  const { stateFilter = () => true, nextStepsFilter = () => true } = props;
   const [showPopover, setShowPopover] = React.useState<AlertSeverity | boolean | null>(null);
   const inSetupMode = isInSetupMode();
   const alerts = Object.values(props.alerts).filter(Boolean);
@@ -80,7 +81,7 @@ export const AlertsBadge: React.FC<Props> = (props: Props) => {
           id: index + 1,
           title: alertStatus.alert.label,
           width: 400,
-          content: <AlertPanel alert={alertStatus} />,
+          content: <AlertPanel alert={alertStatus} nextStepsFilter={nextStepsFilter} />,
         };
       }),
     ];
@@ -158,7 +159,13 @@ 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} />,
+            content: (
+              <AlertPanel
+                alert={alertStatus.alert}
+                alertState={alertStatus.alertState}
+                nextStepsFilter={nextStepsFilter}
+              />
+            ),
           };
         }),
       ];

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

@@ -32,9 +32,10 @@ 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 } = props;
+  const { alerts, stateFilter = () => true, nextStepsFilter = () => true } = props;
 
   const callouts = TYPES.map((type) => {
     const list = [];
@@ -56,11 +57,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.map(
-                        (step: AlertMessage, nextStepIndex: number) => (
+                      {state.ui.message.nextSteps
+                        .filter(nextStepsFilter)
+                        .map((step: AlertMessage, nextStepIndex: number) => (
                           <li key={nextStepIndex}>{replaceTokens(step)}</li>
-                        )
-                      )}
+                        ))}
                     </ul>
                   ) : null;
 

x-pack/plugins/monitoring/public/alerts/filter_alert_states.ts

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { CommonAlertState, CommonAlertStatus } from '../../common/types';
+
+export function filterAlertStates(
+  alerts: { [type: string]: CommonAlertStatus },
+  filter: (type: string, state: CommonAlertState) => boolean
+) {
+  return Object.keys(alerts).reduce(
+    (accum: { [type: string]: CommonAlertStatus }, type: string) => {
+      accum[type] = {
+        ...alerts[type],
+        states: alerts[type].states.filter((state) => filter(type, state)),
+      };
+      return accum;
+    },
+    {}
+  );
+}

x-pack/plugins/monitoring/public/alerts/missing_data_alert/expression.tsx

@@ -0,0 +1,61 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * 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 { EuiForm, EuiSpacer } from '@elastic/eui';
+import { CommonAlertParamDetails } from '../../../common/types';
+import { AlertParamDuration } from '../flyout_expressions/alert_param_duration';
+import { AlertParamType } from '../../../common/enums';
+import { AlertParamPercentage } from '../flyout_expressions/alert_param_percentage';
+
+export interface Props {
+  alertParams: { [property: string]: any };
+  setAlertParams: (property: string, value: any) => void;
+  setAlertProperty: (property: string, value: any) => void;
+  errors: { [key: string]: string[] };
+  paramDetails: CommonAlertParamDetails;
+}
+
+export const Expression: React.FC<Props> = (props) => {
+  const { alertParams, paramDetails, setAlertParams, errors } = props;
+
+  const alertParamsUi = Object.keys(alertParams).map((alertParamName) => {
+    const details = paramDetails[alertParamName];
+    const value = alertParams[alertParamName];
+
+    switch (details.type) {
+      case AlertParamType.Duration:
+        return (
+          <AlertParamDuration
+            key={alertParamName}
+            name={alertParamName}
+            duration={value}
+            label={details.label}
+            errors={errors[alertParamName]}
+            setAlertParams={setAlertParams}
+          />
+        );
+      case AlertParamType.Percentage:
+        return (
+          <AlertParamPercentage
+            key={alertParamName}
+            name={alertParamName}
+            label={details.label}
+            percentage={value}
+            errors={errors[alertParamName]}
+            setAlertParams={setAlertParams}
+          />
+        );
+    }
+  });
+
+  return (
+    <Fragment>
+      <EuiForm component="form">{alertParamsUi}</EuiForm>
+      <EuiSpacer />
+    </Fragment>
+  );
+};

x-pack/plugins/monitoring/public/alerts/missing_data_alert/index.ts

@@ -0,0 +1,7 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export { createMissingDataAlertType } from './missing_data_alert';

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

@@ -0,0 +1,28 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * 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 from 'react';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { AlertTypeModel } from '../../../../triggers_actions_ui/public/types';
+import { validate } from './validation';
+import { ALERT_MISSING_DATA } from '../../../common/constants';
+import { Expression } from './expression';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { MissingDataAlert } from '../../../server/alerts';
+
+export function createMissingDataAlertType(): AlertTypeModel {
+  const alert = new MissingDataAlert();
+  return {
+    id: ALERT_MISSING_DATA,
+    name: alert.label,
+    iconClass: 'bell',
+    alertParamsExpression: (props: any) => (
+      <Expression {...props} paramDetails={MissingDataAlert.paramDetails} />
+    ),
+    validate,
+    defaultActionMessage: '{{context.internalFullMessage}}',
+    requiresAppContext: true,
+  };
+}

x-pack/plugins/monitoring/public/alerts/missing_data_alert/validation.tsx

@@ -0,0 +1,35 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import { i18n } from '@kbn/i18n';
+// eslint-disable-next-line @kbn/eslint/no-restricted-paths
+import { ValidationResult } from '../../../../triggers_actions_ui/public/types';
+
+export function validate(opts: any): ValidationResult {
+  const validationResult = { errors: {} };
+
+  const errors: { [key: string]: string[] } = {
+    duration: [],
+    limit: [],
+  };
+  if (!opts.duration) {
+    errors.duration.push(
+      i18n.translate('xpack.monitoring.alerts.missingData.validation.duration', {
+        defaultMessage: 'A valid duration is required.',
+      })
+    );
+  }
+  if (!opts.limit) {
+    errors.limit.push(
+      i18n.translate('xpack.monitoring.alerts.missingData.validation.limit', {
+        defaultMessage: 'A valid limit is required.',
+      })
+    );
+  }
+
+  validationResult.errors = errors;
+  return validationResult;
+}

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

@@ -30,11 +30,13 @@ import { BASE_ALERT_API_PATH } from '../../../alerts/common';
 interface Props {
   alert: CommonAlertStatus;
   alertState?: CommonAlertState;
+  nextStepsFilter: (nextStep: AlertMessage) => boolean;
 }
 export const AlertPanel: React.FC<Props> = (props: Props) => {
   const {
     alert: { alert },
     alertState,
+    nextStepsFilter = () => true,
   } = props;
   const [showFlyout, setShowFlyout] = React.useState(false);
   const [isEnabled, setIsEnabled] = React.useState(alert.rawAlert.enabled);
@@ -198,9 +200,11 @@ 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.map((step: AlertMessage, index: number) => (
-          <EuiListGroupItem size="s" key={index} label={replaceTokens(step)} />
-        ))}
+        {alertState.state.ui.message.nextSteps
+          .filter(nextStepsFilter)
+          .map((step: AlertMessage, index: number) => (
+            <EuiListGroupItem size="s" key={index} label={replaceTokens(step)} />
+          ))}
       </EuiListGroup>
     ) : null;
 

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

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

x-pack/plugins/monitoring/public/components/apm/instance/instance.js

@@ -18,8 +18,9 @@ import {
 } from '@elastic/eui';
 import { Status } from './status';
 import { FormattedMessage } from '@kbn/i18n/react';
+import { AlertsCallout } from '../../../alerts/callout';
 
-export function ApmServerInstance({ summary, metrics, ...props }) {
+export function ApmServerInstance({ summary, metrics, alerts, ...props }) {
   const seriesToShow = [
     metrics.apm_requests,
     metrics.apm_responses_valid,
@@ -58,9 +59,18 @@ export function ApmServerInstance({ summary, metrics, ...props }) {
           </h1>
         </EuiScreenReaderOnly>
         <EuiPanel>
-          <Status stats={summary} />
+          <Status stats={summary} alerts={alerts} />
         </EuiPanel>
         <EuiSpacer size="m" />
+        <AlertsCallout
+          alerts={alerts}
+          nextStepsFilter={(nextStep) => {
+            if (nextStep.text.includes('APM servers')) {
+              return false;
+            }
+            return true;
+          }}
+        />
         <EuiPageContent>
           <EuiFlexGroup wrap>{charts}</EuiFlexGroup>
         </EuiPageContent>

x-pack/plugins/monitoring/public/components/apm/instance/status.js

@@ -14,7 +14,7 @@ import { CALCULATE_DURATION_SINCE } from '../../../../common/constants';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
 
-export function Status({ stats }) {
+export function Status({ alerts, stats }) {
   const { name, output, version, uptime, timeOfLastEvent } = stats;
 
   const metrics = [
@@ -78,6 +78,7 @@ export function Status({ stats }) {
   return (
     <SummaryStatus
       metrics={metrics}
+      alerts={alerts}
       IconComponent={IconComponent}
       data-test-subj="apmDetailStatus"
     />