[8.7] [Synthetics] only show errors icon when error is active (#152772) (#152855)

# Backport This will backport the following commits from `main` to `8.7`: - [[Synthetics] only show errors icon when error is active (#152772)](https://github.com/elastic/kibana/pull/152772)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)
2025-04-24 17:59:23 -04:00 · 2023-03-07 17:40:22 -05:00 · 2023-03-07 17:40:22 -05:00 · 578fccc965
commit 578fccc965
parent 55ece59683
4 changed files with 35 additions and 14 deletions
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_errors.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/hooks/use_monitor_errors.tsx
@ -4,7 +4,7 @@
 * 2.0; you may not use this file except in compliance with the Elastic License
 * 2.0.
 */
-
+import moment from 'moment';
 import { useTimeZone } from '@kbn/observability-plugin/public';
 import { useParams } from 'react-router-dom';
 import { useMemo } from 'react';
@ -99,10 +99,23 @@ export function useMonitorErrors(monitorIdArg?: string) {
      return loc.summary.hits.hits?.[0]._source as PingState;
    });

+    const hasActiveError: boolean =
+      errorStates?.some((errorState) => isActiveState(errorState)) || false;
+
    return {
      errorStates,
      loading,
      data,
+      hasActiveError,
    };
  }, [data, loading]);
 }
+
+export const isActiveState = (item: PingState) => {
+  const timestamp = item['@timestamp'];
+  const interval = moment(item.monitor.timespan?.lt).diff(
+    moment(item.monitor.timespan?.gte),
+    'milliseconds'
+  );
+  return moment().diff(moment(timestamp), 'milliseconds') < interval;
+};
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/errors_icon.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/errors_icon.tsx
@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import { EuiIcon } from '@elastic/eui';
+import { useMonitorErrors } from '../hooks/use_monitor_errors';
+
+export const MonitorErrorsIcon = () => {
+  const { hasActiveError } = useMonitorErrors();
+
+  return hasActiveError ? <EuiIcon type="alert" color="danger" /> : null;
+};
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/errors_list.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_errors/errors_list.tsx
@ -21,6 +21,7 @@ import { ErrorDetailsLink } from '../../common/links/error_details_link';
 import { useSelectedLocation } from '../hooks/use_selected_location';
 import { Ping, PingState } from '../../../../../../common/runtime_types';
 import { useErrorFailedStep } from '../hooks/use_error_failed_step';
+import { isActiveState } from '../hooks/use_monitor_errors';
 import {
  formatTestDuration,
  formatTestRunAt,
@ -34,7 +35,7 @@ export const ErrorsList = ({
  errorStates: PingState[];
  loading: boolean;
 }) => {
-  const { monitorId } = useParams<{ monitorId: string }>();
+  const { monitorId: configId } = useParams<{ monitorId: string }>();

  const checkGroups = useMemo(() => {
    return errorStates.map((error) => error.monitor.check_group!);
@ -64,7 +65,7 @@ export const ErrorsList = ({
      render: (value: string, item: PingState) => {
        const link = (
          <ErrorDetailsLink
-            configId={monitorId}
+            configId={configId}
            stateId={item.state?.id!}
            label={formatTestRunAt(item.state!.started_at, format)}
            locationId={selectedLocation?.id}
@ -157,7 +158,7 @@ export const ErrorsList = ({
        'data-test-subj': `row-${state.id}`,
        onClick: (evt: MouseEvent) => {
          history.push(
-            `/monitor/${monitorId}/errors/${state.id}?locationId=${selectedLocation?.id}`
+            `/monitor/${configId}/errors/${state.id}?locationId=${selectedLocation?.id}`
          );
        },
      };
@ -200,15 +201,6 @@ export const getErrorDetailsUrl = ({
  return `${basePath}/app/synthetics/monitor/${configId}/errors/${stateId}?locationId=${locationId}`;
 };

-const isActiveState = (item: PingState) => {
-  const timestamp = item['@timestamp'];
-  const interval = moment(item.monitor.timespan?.lt).diff(
-    moment(item.monitor.timespan?.gte),
-    'milliseconds'
-  );
-  return moment().diff(moment(timestamp), 'milliseconds') < interval;
-};
-
 const ERRORS_LIST_LABEL = i18n.translate('xpack.synthetics.errorsList.label', {
  defaultMessage: 'Errors list',
 });
--- a/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/route_config.tsx
+++ b/x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/route_config.tsx
@ -18,6 +18,7 @@ import { MonitorDetailsLastRun } from './monitor_details_last_run';
 import { MonitorDetailsStatus } from './monitor_details_status';
 import { MonitorDetailsLocation } from './monitor_details_location';
 import { MonitorErrors } from './monitor_errors/monitor_errors';
+import { MonitorErrorsIcon } from './monitor_errors/errors_icon';
 import { MonitorHistory } from './monitor_history/monitor_history';
 import { MonitorSummary } from './monitor_summary/monitor_summary';
 import { EditMonitorLink } from './monitor_summary/edit_monitor_link';
@ -143,7 +144,7 @@ const getMonitorSummaryHeader = (
        label: i18n.translate('xpack.synthetics.monitorErrorsTab.title', {
          defaultMessage: 'Errors',
        }),
-        prepend: <EuiIcon type="alert" color="danger" />,
+        prepend: <MonitorErrorsIcon />,
        isSelected: selectedTab === 'errors',
        href: `${syntheticsPath}${MONITOR_ERRORS_ROUTE.replace(':monitorId', monitorId)}${search}`,
        'data-test-subj': 'syntheticsMonitorErrorsTab',