Fix [Metrics] Wrong selected metrics when connection is slow (#2494)

mlrun · May 30, 2024 · b8fb1b5 · b8fb1b5
1 parent 497065c
commit b8fb1b5
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 28 deletions.
diff --git a/src/actions/details.js b/src/actions/details.js
@@ -49,7 +49,8 @@ import {
   SET_ITERATION,
   SET_ITERATION_OPTIONS,
   SET_SELECTED_METRICS_OPTIONS,
-  SHOW_WARNING
+  SHOW_WARNING,
+  DEFAULT_ABORT_MSG
 } from '../constants'
 import { generatePods } from '../utils/generatePods'
 import { generateMetricsItems, getMetricColorByFullName } from '../components/DetailsMetrics/detailsMetrics.utils'
@@ -158,11 +159,11 @@ const detailsActions = {
     type: FETCH_ENDPOINT_METRICS_SUCCESS,
     payload
   }),
-  fetchModelEndpointMetricsValues: (project, uid, params) => dispatch => {
+  fetchModelEndpointMetricsValues: (project, uid, params, signal) => dispatch => {
     dispatch(detailsActions.fetchEndpointMetricsValuesBegin())
 
     return detailsApi
-      .getModelEndpointMetricsValues(project, uid, params)
+      .getModelEndpointMetricsValues(project, uid, params, signal)
       .then(({ data = [] }) => {
         const metrics = data.map(metric => {
           return {
@@ -176,7 +177,11 @@ const detailsActions = {
         return metrics
       })
       .catch(error => {
-        dispatch(detailsActions.fetchEndpointMetricsValuesFailure(error))
+        dispatch(
+          detailsActions.fetchEndpointMetricsValuesFailure(
+            error?.message === DEFAULT_ABORT_MSG ? null : error
+          )
+        )
       })
   },
   fetchEndpointMetricsValuesBegin: () => ({

diff --git a/src/api/details-api.js b/src/api/details-api.js
@@ -37,10 +37,17 @@ const detailsApi = {
     mainHttpClient.get(`/projects/${project}/feature-vectors/${name}/references/${reference}`),
   getModelEndpointMetrics: (project, uid, type = 'all') =>
     mainHttpClient.get(`/projects/${project}/model-endpoints/${uid}/metrics?type=${type}`), // type=results/metrics/all
-  getModelEndpointMetricsValues: (project, uid, params) =>
-    mainHttpClient.get(`/projects/${project}/model-endpoints/${uid}/metrics-values`, {
+  getModelEndpointMetricsValues: (project, uid, params, signal) => {
+    const config = {
       params
-    })
+    }
+
+    if (signal) {
+      config.signal = signal
+    }
+
+    return mainHttpClient.get(`/projects/${project}/model-endpoints/${uid}/metrics-values`, config)
+  }
 }
 
 export default detailsApi
diff --git a/src/components/DetailsMetrics/DetailsMetrics.js b/src/components/DetailsMetrics/DetailsMetrics.js
@@ -17,17 +17,19 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 import { useSelector } from 'react-redux'
 import { useDispatch } from 'react-redux'
 import { isEmpty } from 'lodash'
 
 import detailsActions from '../../actions/details'
+import { REQUEST_CANCELED } from '../../constants'
 
 const DetailsMetrics = ({ selectedItem }) => {
   const [metrics, setMetrics] = useState([])
   const detailsStore = useSelector(store => store.detailsStore)
   const dispatch = useDispatch()
+  const metricsValuesAbortController = useRef(new AbortController())
 
   useEffect(() => {
     dispatch(
@@ -59,17 +61,33 @@ const DetailsMetrics = ({ selectedItem }) => {
         params.name.push(metric.full_name)
       })
 
-      dispatch(
-        detailsActions.fetchModelEndpointMetricsValues(
-          selectedItem.metadata.project,
-          selectedItem.metadata.uid,
-          params
-        )
-      ).then(metricsList => {
-        setMetrics(metricsList)
+      metricsValuesAbortController.current = new AbortController()
+
+      setTimeout(() => {
+        dispatch(
+          detailsActions.fetchModelEndpointMetricsValues(
+            selectedItem.metadata.project,
+            selectedItem.metadata.uid,
+            params,
+            metricsValuesAbortController.current.signal
+          )
+        ).then(metricsList => {
+          setMetrics(metricsList)
+        })
       })
+    } else {
+      setMetrics([])
+    }
+
+    return () => {
+      metricsValuesAbortController.current?.abort(REQUEST_CANCELED)
     }
-  }, [dispatch, selectedItem, detailsStore.dates, detailsStore.metricsOptions.selectedByEndpoint])
+  }, [
+    dispatch,
+    selectedItem,
+    detailsStore.dates.value,
+    detailsStore.metricsOptions.selectedByEndpoint
+  ])
 
   // todo: metrics - - remove when merge charts
   /* eslint-disable-next-line no-console */

diff --git a/src/reducers/detailsReducer.js b/src/reducers/detailsReducer.js
@@ -17,6 +17,7 @@ illegal under applicable law, and the grant of the foregoing license
 under the Apache 2.0 license is conditioned upon your compliance with
 such restriction.
 */
+import { isEmpty } from 'lodash'
 import {
   FETCH_JOB_PODS_SUCCESS,
   FETCH_JOB_PODS_FAILURE,
@@ -81,10 +82,14 @@ const initialState = {
   filtersWasHandled: false,
   showWarning: false,
   metricsOptions: {
+    loading: false,
     all: [],
     lastSelected: [],
     preselected: [],
     selectedByEndpoint: {}
+  },
+  metricsValues: {
+    loading: false
   }
 }
 
@@ -183,10 +188,14 @@ const detailsReducer = (state = initialState, { type, payload }) => {
         loading: true,
         metricsOptions: {
           ...state.metricsOptions,
+          loading: true,
         }
       }
     case FETCH_ENDPOINT_METRICS_SUCCESS: {
-      const selectedMetrics = state.metricsOptions.selectedByEndpoint[payload.endpointUid]?.length
+      const areMetricsSelectedForEndpoint = !isEmpty(
+        state.metricsOptions.selectedByEndpoint[payload.endpointUid]
+      )
+      const selectedMetrics = areMetricsSelectedForEndpoint
         ? state.metricsOptions.selectedByEndpoint[payload.endpointUid]
         : payload.metrics.filter(metric => {
             return state.metricsOptions.lastSelected.find(
@@ -196,47 +205,64 @@ const detailsReducer = (state = initialState, { type, payload }) => {
                 selectedMetric.type === metric.type
             )
           })
+
       return {
         ...state,
         error: null,
-        loading: false,
+        loading: state.metricsValues.loading,
         metricsOptions: {
           all: payload.metrics,
+          loading: false,
           lastSelected: selectedMetrics,
           preselected: selectedMetrics,
-          selectedByEndpoint: {
-            ...state.metricsOptions.selectedByEndpoint,
-            [payload.endpointUid]: selectedMetrics
-          }
+          selectedByEndpoint: areMetricsSelectedForEndpoint
+            ? state.metricsOptions.selectedByEndpoint
+            : {
+                ...state.metricsOptions.selectedByEndpoint,
+                [payload.endpointUid]: selectedMetrics
+              }
         }
       }
     }
     case FETCH_ENDPOINT_METRICS_FAILURE:
       return {
         ...state,
         error: payload,
-        loading: false,
+        loading: state.metricsValues.loading,
         metricsOptions: {
-          ...initialState.metricsOptions,
+          ...state.metricsOptions,
           all: [],
+          loading: false,
         }
       }
     case FETCH_ENDPOINT_METRICS_VALUES_BEGIN:
       return {
         ...state,
-        loading: true
+        loading: true,
+        metricsValues: {
+          ...state.metricsValues,
+          loading: true
+        }
       }
     case FETCH_ENDPOINT_METRICS_VALUES_SUCCESS:
       return {
         ...state,
         error: null,
-        loading: false
+        loading: state.metricsOptions.loading,
+        metricsValues: {
+          ...state.metricsValues,
+          loading: false
+        }
       }
     case FETCH_ENDPOINT_METRICS_VALUES_FAILURE:
       return {
         ...state,
         error: payload,
-        loading: false
+        loading: state.metricsOptions.loading,
+        metricsValues: {
+          ...state.metricsValues,
+          loading: false
+        }
       }
     case REMOVE_INFO_CONTENT:
       return {