Fix indefinite loading and handling of state pings for Last test run and Test Runs panels. (#142432) (#142734)

* Fix the loading behavior of "Last test run" and "Last Runs" panels on Synthetics UI -> Monitor Details -> Summary page.

* Do not show `0 ms` duration/rtt if no pings are available for a ping monitor.

(cherry picked from commit 57876a8597)

Co-authored-by: Abdul Wahab Zahid <awahab07@yahoo.com>

x-pack/plugins/synthetics/public/apps/synthetics/components/common/monitor_test_result/single_ping_result.tsx

@@ -18,8 +18,8 @@ import { formatTestDuration } from '../../../utils/monitor_test_result/test_time
 
 export const SinglePingResult = ({ ping, loading }: { ping: Ping; loading: boolean }) => {
   const ip = !loading ? ping?.resolve?.ip : undefined;
-  const durationUs = !loading ? ping?.monitor?.duration?.us : undefined;
-  const rtt = !loading ? ping?.resolve?.rtt?.us : undefined;
+  const durationUs = !loading ? ping?.monitor?.duration?.us ?? NaN : NaN;
+  const rtt = !loading ? ping?.resolve?.rtt?.us ?? NaN : NaN;
   const url = !loading ? ping?.url?.full : undefined;
   const responseStatus = !loading ? ping?.http?.response?.status_code : undefined;
 
@@ -29,10 +29,12 @@ export const SinglePingResult = ({ ping, loading }: { ping: Ping; loading: boole
       <EuiDescriptionListDescription>{ip}</EuiDescriptionListDescription>
       <EuiDescriptionListTitle>{DURATION_LABEL}</EuiDescriptionListTitle>
       <EuiDescriptionListDescription>
-        {formatTestDuration(durationUs)}
+        {isNaN(durationUs) ? '' : formatTestDuration(durationUs)}
       </EuiDescriptionListDescription>
       <EuiDescriptionListTitle>rtt</EuiDescriptionListTitle>
-      <EuiDescriptionListDescription>{formatTestDuration(rtt)}</EuiDescriptionListDescription>
+      <EuiDescriptionListDescription>
+        {isNaN(rtt) ? '' : formatTestDuration(rtt)}
+      </EuiDescriptionListDescription>
       <EuiDescriptionListTitle>URL</EuiDescriptionListTitle>
       <EuiDescriptionListDescription>{url}</EuiDescriptionListDescription>
 

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/last_ten_test_runs.tsx

@@ -31,7 +31,6 @@ import {
 import { useSyntheticsSettingsContext } from '../../../contexts/synthetics_settings_context';
 
 import { sortPings } from '../../../utils/monitor_test_result/sort_pings';
-import { checkIsStalePing } from '../../../utils/monitor_test_result/check_pings';
 import { selectPingsLoading, selectMonitorRecentPings, selectPingsError } from '../../../state';
 import { parseBadgeStatus, StatusBadge } from '../../common/monitor_test_result/status_badge';
 import { isStepEnd } from '../../common/monitor_test_result/browser_steps_list';
@@ -56,8 +55,6 @@ export const LastTenTestRuns = () => {
   const { monitor } = useSelectedMonitor();
 
   const isBrowserMonitor = monitor?.[ConfigKey.MONITOR_TYPE] === DataStream.BROWSER;
-  const hasStalePings = checkIsStalePing(monitor, pings?.[0]);
-  const loading = hasStalePings || pingsLoading;
 
   const sorting: EuiTableSortingType<Ping> = {
     sort: {
@@ -146,12 +143,12 @@ export const LastTenTestRuns = () => {
       </EuiFlexGroup>
       <EuiBasicTable
         compressed={false}
-        loading={loading}
+        loading={pingsLoading}
         columns={columns}
         error={pingsError?.body?.message}
-        items={hasStalePings ? [] : sortedPings}
+        items={sortedPings}
         noItemsMessage={
-          loading
+          pingsLoading
             ? i18n.translate('xpack.synthetics.monitorDetails.loadingTestRuns', {
                 defaultMessage: 'Loading test runs...',
               })

x-pack/plugins/synthetics/public/apps/synthetics/components/monitor_details/monitor_summary/last_test_run.tsx

@@ -28,7 +28,6 @@ import {
   EncryptedSyntheticsSavedMonitor,
   Ping,
 } from '../../../../../../common/runtime_types';
-import { checkIsStalePing } from '../../../utils/monitor_test_result/check_pings';
 import { formatTestRunAt } from '../../../utils/monitor_test_result/test_time_formats';
 
 import { useSyntheticsSettingsContext } from '../../../contexts';
@@ -50,8 +49,7 @@ export const LastTestRun = () => {
     latestPing?.monitor?.check_group
   );
 
-  const hasStalePings = checkIsStalePing(monitor, latestPing);
-  const loading = hasStalePings || stepsLoading || pingsLoading;
+  const loading = stepsLoading || pingsLoading;
 
   return (
     <EuiPanel css={{ minHeight: 356 }}>

x-pack/plugins/synthetics/public/apps/synthetics/state/monitor_details/index.ts

@@ -6,13 +6,16 @@
  */
 
 import { createReducer } from '@reduxjs/toolkit';
+import { EncryptedSyntheticsSavedMonitor, Ping } from '../../../../../common/runtime_types';
+import { checkIsStalePing } from '../../utils/monitor_test_result/check_pings';
+
 import { IHttpSerializedFetchError } from '../utils/http_error';
+
 import {
   getMonitorRecentPingsAction,
   setMonitorDetailsLocationAction,
   getMonitorAction,
 } from './actions';
-import { EncryptedSyntheticsSavedMonitor, Ping } from '../../../../../common/runtime_types';
 
 export interface MonitorDetailsState {
   pings: Ping[];
@@ -38,8 +41,9 @@ export const monitorDetailsReducer = createReducer(initialState, (builder) => {
       state.selectedLocationId = action.payload;
     })
 
-    .addCase(getMonitorRecentPingsAction.get, (state) => {
+    .addCase(getMonitorRecentPingsAction.get, (state, action) => {
       state.loading = true;
+      state.pings = state.pings.filter((ping) => !checkIsStalePing(action.payload.monitorId, ping));
     })
     .addCase(getMonitorRecentPingsAction.success, (state, action) => {
       state.pings = action.payload.pings;

x-pack/plugins/synthetics/public/apps/synthetics/utils/monitor_test_result/check_pings.ts

@@ -5,18 +5,15 @@
  * 2.0.
  */
 
-import { EncryptedSyntheticsSavedMonitor, Ping } from '../../../../../common/runtime_types';
+import { Ping } from '../../../../../common/runtime_types';
 
 /**
  * Checks if the loaded/cached pings are of the current selected monitors
  */
-export function checkIsStalePing(
-  monitor: EncryptedSyntheticsSavedMonitor | null,
-  ping: Ping | undefined
-) {
-  if (!monitor?.id || !ping?.monitor?.id) {
+export function checkIsStalePing(monitorOrConfigId: string | undefined, ping: Ping | undefined) {
+  if (!monitorOrConfigId || !ping?.monitor?.id) {
     return true;
   }
 
-  return monitor.id !== ping.monitor.id && monitor.id !== ping.config_id;
+  return monitorOrConfigId !== ping.monitor.id && monitorOrConfigId !== ping.config_id;
 }