Impl [UI] Show error message in the tables across the app 1.11

src/components/MonitoringApplicationsPage/MonitoringApplications/MEPsWithDetections.jsx

@@ -24,9 +24,7 @@ import MlChart from '../../../common/MlChart/MlChart'
 import NoData from '../../../common/NoData/NoData'
 import { Loader, Tip } from 'igz-controls/components'
 
-import {
-  MONITORING_APPLICATIONS_NO_DATA_MESSAGE
-} from '../MonitoringApplicationsPage.util'
+import { MONITORING_APPLICATIONS_NO_DATA_MESSAGE } from '../MonitoringApplicationsPage.util'
 import { getMEPsWithDetectionChartConfig } from '../../../utils/getChartConfig'
 import { groupDataToBins } from './monitoringApplications.util'
 import { useSelector } from 'react-redux'
@@ -38,7 +36,7 @@ const MEPsWithDetections = () => {
   const chartWrapperRef = useRef()
   const barConfig = useMemo(() => getMEPsWithDetectionChartConfig(), [])
   const {
-    endpointsWithDetections: { data: endpointsWithDetectionsData, loading }
+    endpointsWithDetections: { data: endpointsWithDetectionsData, loading, error }
   } = useSelector(store => store.monitoringApplicationsStore)
 
   const renderPlugin = useMemo(() => {
@@ -133,7 +131,13 @@ const MEPsWithDetections = () => {
         <Tip text="This chart displays the number of model endpoints that had at least one detected issue, in any monitoring application, in the relevant time period" />
       </div>
       {endpointsWithDetectionsData.values?.length === 0 && !(isLoading || loading) ? (
-        <NoData message={MONITORING_APPLICATIONS_NO_DATA_MESSAGE} />
+        <NoData
+          message={
+            error
+              ? 'Failed to fetch Model Endpoints with suspected/detected issue'
+              : MONITORING_APPLICATIONS_NO_DATA_MESSAGE
+          }
+        />
       ) : (
         <div className="section-item_chart-wrapper">
           <div className="section-item_chart">
@@ -143,10 +147,7 @@ const MEPsWithDetections = () => {
             >
               <canvas id="chart-y-axis" ref={chartYAxisRef} width={0} height={0} />
               <div className="section-item_ml-chart-wrapper" ref={chartWrapperRef}>
-                <MlChart
-                  config={barChartConfig}
-                  chartRef={chartRef}
-                />
+                <MlChart config={barChartConfig} chartRef={chartRef} />
               </div>
               <div className="section-item_chart-area_x-axis-label">Time range</div>
             </div>

src/components/MonitoringApplicationsPage/MonitoringApplications/MonitoringApplications.jsx

@@ -32,7 +32,10 @@ import { MODEL_ENDPOINTS_TAB, MONITORING_APP_PAGE } from '../../../constants'
 import { MONITORING_APPLICATIONS_NO_DATA_MESSAGE } from '../MonitoringApplicationsPage.util'
 import { createApplicationContent } from '../../../utils/createApplicationContent'
 import { generateOperatingFunctionsTable } from './monitoringApplications.util'
-import { removeMonitoringApplications, removeMEPWithDetections } from '../../../reducers/monitoringApplicationsReducer'
+import {
+  removeMonitoringApplications,
+  removeMEPWithDetections
+} from '../../../reducers/monitoringApplicationsReducer'
 
 import PresentMetricsIcon from 'igz-controls/images/present-metrics-icon.svg?react'
 
@@ -42,7 +45,8 @@ const MonitoringApplications = () => {
   const navigate = useNavigate()
   const {
     monitoringApplications: { applications = [], operatingFunctions = [] },
-    loading
+    loading,
+    error
   } = useSelector(store => store.monitoringApplicationsStore)
 
   const applicationsTableActionsMenu = useMemo(
@@ -94,7 +98,13 @@ const MonitoringApplications = () => {
             <Tip text="System functions that are used for the monitoring application operation" />
           </div>
           {operatingFunctions.length === 0 && !loading ? (
-            <NoData message={MONITORING_APPLICATIONS_NO_DATA_MESSAGE} />
+            <NoData
+              message={
+                error
+                  ? 'Failed to fetch monitoring applications'
+                  : MONITORING_APPLICATIONS_NO_DATA_MESSAGE
+              }
+            />
           ) : (
             <SectionTable loading={loading} params={params} table={operatingFunctionsTable} />
           )}
@@ -106,7 +116,13 @@ const MonitoringApplications = () => {
             <span>All Applications</span>
           </div>
           {applications.length === 0 && !loading ? (
-            <NoData message={MONITORING_APPLICATIONS_NO_DATA_MESSAGE} />
+            <NoData
+              message={
+                error
+                  ? 'Failed to fetch monitoring applications'
+                  : MONITORING_APPLICATIONS_NO_DATA_MESSAGE
+              }
+            />
           ) : loading ? (
             <Loader section secondary />
           ) : (

src/reducers/featureStoreReducer.js

@@ -124,7 +124,8 @@ export const createNewFeatureSet = createAsyncThunk(
             : error.message
 
         showErrorNotification(thunkAPI.dispatch, error, '', message)
-        thunkAPI.rejectWithValue(error)
+
+        return thunkAPI.rejectWithValue(error)
       })
   }
 )
@@ -181,7 +182,8 @@ export const fetchFeatureSets = createAsyncThunk(
           thunkAPI.dispatch,
           config?.ui?.setRequestErrorMessage
         )
-        thunkAPI.rejectWithValue(error.message)
+
+        return thunkAPI.rejectWithValue(error.message)
       })
   }
 )
@@ -236,7 +238,8 @@ export const fetchFeatureVectors = createAsyncThunk(
             thunkAPI.dispatch,
             config?.ui?.setRequestErrorMessage
           )
-          thunkAPI.rejectWithValue(error)
+
+          return thunkAPI.rejectWithValue(error)
         }
       })
   }
@@ -268,7 +271,8 @@ export const fetchFeatureSetsTags = createAsyncThunk(
   ({ project, config }, thunkAPI) => {
     return featureStoreApi.fetchFeatureSetsTags(project, config).catch(error => {
       largeResponseCatchHandler(error, 'Failed to fetch tags', thunkAPI.dispatch)
-      thunkAPI.rejectWithValue(error)
+
+      return thunkAPI.rejectWithValue(error)
     })
   }
 )
@@ -277,7 +281,8 @@ export const fetchFeatureVectorsTags = createAsyncThunk(
   ({ project, config }, thunkAPI) => {
     return featureStoreApi.fetchFeatureVectorsTags(project, config).catch(error => {
       largeResponseCatchHandler(error, 'Failed to fetch tags', thunkAPI.dispatch)
-      thunkAPI.rejectWithValue(error)
+
+      return thunkAPI.rejectWithValue(error)
     })
   }
 )
@@ -296,7 +301,8 @@ export const startFeatureSetIngest = createAsyncThunk(
             : error.message
 
         showErrorNotification(thunkAPI.dispatch, error, '', message)
-        thunkAPI.rejectWithValue(message)
+
+        return thunkAPI.rejectWithValue(message)
       })
   }
 )
@@ -499,7 +505,7 @@ const featureStoreSlice = createSlice({
       state.features.loading = true
     })
     builder.addCase(fetchFeatures.rejected, (state, action) => {
-      state.features.loading = true
+      state.features.loading = false
       state.error = action.payload
     })
     builder.addCase(fetchFeatures.fulfilled, (state, action) => {

src/reducers/workflowReducer.js

@@ -45,7 +45,7 @@ export const fetchWorkflow = createAsyncThunk('fetchWorkflow', ({ project, workf
 })
 export const fetchWorkflows = createAsyncThunk(
   'fetchWorkflows',
-  async ({ project, filter, config, withPagination }, { rejectWithValue }) => {
+  async ({ project, filter, config, withPagination }, { dispatch, rejectWithValue }) => {
     const page = project === '*' ? JOBS_MONITORING_WORKFLOWS_TAB : MONITOR_WORKFLOWS_TAB
     let result = []
     let nextPageToken = ''
@@ -56,7 +56,7 @@ export const fetchWorkflows = createAsyncThunk(
       largeResponseCatchHandler(
         error,
         'Failed to fetch workflows',
-        null,
+        dispatch,
         config?.ui?.setRequestErrorMessage
       )