From bbd3b0feb85b6d2b138ca0109c9cfd242b025f10 Mon Sep 17 00:00:00 2001
From: mariana-furyk <mariana.furyk@globallogic.com>
Date: Tue, 29 Oct 2024 20:45:21 +0200
Subject: [PATCH] fixed testing bugs

---
 src/components/ActionBar/ActionBar.js         |   1 +
 src/components/Jobs/Jobs.js                   |  18 ++-
 .../Jobs/MonitorJobs/JobsFilters.js           |   7 +-
 .../Jobs/MonitorJobs/MonitorJobs.js           |   1 +
 .../Jobs/MonitorWorkflows/MonitorWorkflows.js |   1 +
 .../Jobs/MonitorWorkflows/WorkflowsFilters.js |   7 +-
 .../MonitorWorkflows/monitorWorkflows.util.js |  12 +-
 .../Jobs/ScheduledJobs/ScheduledJobs.js       |   3 +-
 .../ScheduledJobs/ScheduledJobsFilters.js     |   7 +-
 src/components/Jobs/jobs.util.js              |   2 +-
 .../JobsMonitoring/JobsMonitoringFilters.js   |   7 +-
 .../ScheduledMonitoring.js                    |   2 +-
 .../ScheduledMonitoringFilters.js             |   7 +-
 .../WorkflowsMonitoringFilters.js             |   7 +-
 src/elements/JobsTable/JobsTable.js           |   9 +-
 .../ScheduledJobsTable/ScheduledJobsTable.js  |   6 +-
 src/elements/WorkflowsTable/WorkflowsTable.js | 146 ++++++++++--------
 src/hooks/useJobsPageData.js                  |   2 +-
 src/utils/getNoDataMessage.js                 |  21 ++-
 src/utils/getState.js                         |  13 +-
 tests/mockServer/mock.js                      |  99 +++++++-----
 21 files changed, 245 insertions(+), 133 deletions(-)

diff --git a/src/components/ActionBar/ActionBar.js b/src/components/ActionBar/ActionBar.js
index 7bae4e631..207072ab9 100644
--- a/src/components/ActionBar/ActionBar.js
+++ b/src/components/ActionBar/ActionBar.js
@@ -332,6 +332,7 @@ const ActionBar = ({
                   !actionButton.hidden &&
                   (actionButton.template || (
                     <Button
+                      disabled={actionButton.disabled}
                       key={index}
                       variant={actionButton.variant}
                       label={actionButton.label}
diff --git a/src/components/Jobs/Jobs.js b/src/components/Jobs/Jobs.js
index 4f4d39d09..afe834c62 100755
--- a/src/components/Jobs/Jobs.js
+++ b/src/components/Jobs/Jobs.js
@@ -64,6 +64,7 @@ const Jobs = ({ fetchAllJobRuns, fetchJobFunction, fetchJobs }) => {
   const jobsStore = useSelector(store => store.jobsStore)
   const workflowsStore = useSelector(store => store.workflowsStore)
   const artifactsStore = useSelector(store => store.artifactsStore)
+  const appStore = useSelector(store => store.appStore)
 
   const {
     abortControllerRef,
@@ -76,6 +77,7 @@ const Jobs = ({ fetchAllJobRuns, fetchJobFunction, fetchJobs }) => {
     jobs,
     jobWizardIsOpened,
     jobWizardMode,
+    handleMonitoring,
     handleRerunJob,
     refreshJobs,
     refreshScheduled,
@@ -181,6 +183,17 @@ const Jobs = ({ fetchAllJobRuns, fetchJobFunction, fetchJobs }) => {
                     label: actionButtonHeader,
                     onClick: handleActionsMenuClick,
                     variant: PRIMARY_BUTTON
+                  },
+                  {
+                    className: 'action-button',
+                    label: 'Resource monitoring',
+                    hidden: selectedTab !== MONITOR_JOBS_TAB,
+                    tooltip: !appStore.frontendSpec.jobs_dashboard_url
+                      ? 'Grafana service unavailable'
+                      : '',
+                    variant: TERTIARY_BUTTON,
+                    disabled: !appStore.frontendSpec.jobs_dashboard_url,
+                    onClick: () => handleMonitoring()
                   }
                 ]}
                 autoRefreshIsEnabled={selectedTab === MONITOR_JOBS_TAB}
@@ -211,10 +224,12 @@ const Jobs = ({ fetchAllJobRuns, fetchJobFunction, fetchJobs }) => {
                   jobRuns,
                   jobs,
                   jobWizardMode,
+                  jobWizardIsOpened,
                   refreshJobs,
                   refreshScheduled,
                   requestErrorMessage,
                   scheduledJobs,
+                  scheduledFiltersConfig: tabData[SCHEDULE_TAB].filtersConfig,
                   setAbortingJobs,
                   setConfirmData,
                   setEditableItem,
@@ -224,7 +239,8 @@ const Jobs = ({ fetchAllJobRuns, fetchJobFunction, fetchJobs }) => {
                   setJobs,
                   setScheduledJobs,
                   setSelectedRunProject,
-                  terminateAbortTasksPolling
+                  terminateAbortTasksPolling,
+                  workflowsFiltersConfig: tabData[MONITOR_WORKFLOWS_TAB].filtersConfig
                 }}
               >
                 <Outlet />
diff --git a/src/components/Jobs/MonitorJobs/JobsFilters.js b/src/components/Jobs/MonitorJobs/JobsFilters.js
index b10dcef43..a56ad09ad 100644
--- a/src/components/Jobs/MonitorJobs/JobsFilters.js
+++ b/src/components/Jobs/MonitorJobs/JobsFilters.js
@@ -42,7 +42,12 @@ const JobsFilters = () => {
         <FormSelect label="Type" name="type" options={generateTypeFilter()} />
       </div>
       <div className="form-row">
-        <FormInput label="Labels" name={LABELS_FILTER} placeholder="key1,key2=value,..." />
+        <FormInput
+          label="Labels"
+          name={LABELS_FILTER}
+          placeholder="key1,key2=value,..."
+          tip="Add ~ before the filter value to return substring and case insensitive value."
+        />
         <FormOnChange
           handler={value => handleInputChange(value, LABELS_FILTER)}
           name={LABELS_FILTER}
diff --git a/src/components/Jobs/MonitorJobs/MonitorJobs.js b/src/components/Jobs/MonitorJobs/MonitorJobs.js
index a1a7fa11d..77d2d267d 100644
--- a/src/components/Jobs/MonitorJobs/MonitorJobs.js
+++ b/src/components/Jobs/MonitorJobs/MonitorJobs.js
@@ -134,6 +134,7 @@ const MonitorJobs = () => {
         abortingJobs={abortingJobs}
         ref={{ abortJobRef }}
         context={JobsContext}
+        filterMenuName={MONITOR_JOBS_TAB}
         filters={filters}
         jobRuns={jobRuns}
         jobs={jobs}
diff --git a/src/components/Jobs/MonitorWorkflows/MonitorWorkflows.js b/src/components/Jobs/MonitorWorkflows/MonitorWorkflows.js
index 851b80b83..732a1c22d 100644
--- a/src/components/Jobs/MonitorWorkflows/MonitorWorkflows.js
+++ b/src/components/Jobs/MonitorWorkflows/MonitorWorkflows.js
@@ -129,6 +129,7 @@ const MonitorWorkflows = ({ deleteWorkflows, fetchFunctionLogs }) => {
         backLink={`/projects/${params.projectName}/jobs/${MONITOR_WORKFLOWS_TAB}`}
         context={JobsContext}
         fetchFunctionLogs={fetchFunctionLogs}
+        filterMenuName={MONITOR_WORKFLOWS_TAB}
         filtersConfig={workflowsFiltersConfig}
         getWorkflows={getWorkflows}
         itemIsSelected={itemIsSelected}
diff --git a/src/components/Jobs/MonitorWorkflows/WorkflowsFilters.js b/src/components/Jobs/MonitorWorkflows/WorkflowsFilters.js
index 22fa2abe8..32586df3c 100644
--- a/src/components/Jobs/MonitorWorkflows/WorkflowsFilters.js
+++ b/src/components/Jobs/MonitorWorkflows/WorkflowsFilters.js
@@ -42,7 +42,12 @@ const WorkflowsFilters = () => {
       </div>
       {isDemoMode && (
         <div className="form-row">
-          <FormInput label="Labels" name={LABELS_FILTER} placeholder="key1,key2=value,..." />
+          <FormInput
+            label="Labels"
+            name={LABELS_FILTER}
+            placeholder="key1,key2=value,..."
+            tip="Add ~ before the filter value to return substring and case insensitive value."
+          />
           <FormOnChange
             handler={value => handleInputChange(value, LABELS_FILTER)}
             name={LABELS_FILTER}
diff --git a/src/components/Jobs/MonitorWorkflows/monitorWorkflows.util.js b/src/components/Jobs/MonitorWorkflows/monitorWorkflows.util.js
index 8e088ed02..8b5dfe83f 100644
--- a/src/components/Jobs/MonitorWorkflows/monitorWorkflows.util.js
+++ b/src/components/Jobs/MonitorWorkflows/monitorWorkflows.util.js
@@ -43,7 +43,7 @@ import {
   detailsMenu as functionsDetailsMenu,
   infoHeaders as functionsInfoHeaders
 } from '../../FunctionsPage/functions.util'
-import { datePickerPastOptions, PAST_WEEK_DATE_OPTION } from '../../../utils/datePicker.util'
+import { datePickerPastOptions, PAST_24_HOUR_DATE_OPTION } from '../../../utils/datePicker.util'
 import { isEveryObjectValueEmpty } from '../../../utils/isEveryObjectValueEmpty'
 
 import { ReactComponent as MonitorIcon } from 'igz-controls/images/monitor-icon.svg'
@@ -176,10 +176,10 @@ export const fetchInitialWorkflows = debounce(
           getWorkflows(filters)
           dispatch(setFilters(filters))
         } else if (workflowsLength === 0) {
-          const pastWeekOption = datePickerPastOptions.find(
-            option => option.id === PAST_WEEK_DATE_OPTION
+          const past24HourOption = datePickerPastOptions.find(
+            option => option.id === PAST_24_HOUR_DATE_OPTION
           )
-          const generatedDates = [...pastWeekOption.handler()]
+          const generatedDates = [...past24HourOption.handler()]
 
           if (generatedDates.length === 1) {
             generatedDates.push(new Date())
@@ -187,8 +187,8 @@ export const fetchInitialWorkflows = debounce(
           const filters = {
             dates: {
               value: generatedDates,
-              isPredefined: pastWeekOption.isPredefined,
-              initialSelectedOptionId: pastWeekOption.id
+              isPredefined: past24HourOption.isPredefined,
+              initialSelectedOptionId: past24HourOption.id
             },
             state: FILTER_ALL_ITEMS,
             groupBy: GROUP_BY_WORKFLOW
diff --git a/src/components/Jobs/ScheduledJobs/ScheduledJobs.js b/src/components/Jobs/ScheduledJobs/ScheduledJobs.js
index 375bd29b4..2cc1c1ab1 100644
--- a/src/components/Jobs/ScheduledJobs/ScheduledJobs.js
+++ b/src/components/Jobs/ScheduledJobs/ScheduledJobs.js
@@ -50,7 +50,7 @@ const ScheduledJobs = () => {
   useEffect(() => {
     if (!dataIsLoaded) {
       refreshJobs({
-        ...schedulesFilterMenu,
+        ...schedulesFilterMenu.values,
         ...schedulesFilterMenuModal.values
       })
       setDataIsLoaded(true)
@@ -74,6 +74,7 @@ const ScheduledJobs = () => {
   return (
     <ScheduledJobsTable
       context={JobsContext}
+      filterMenuName={SCHEDULE_TAB}
       filtersConfig={scheduledFiltersConfig}
       jobs={scheduledJobs}
       requestErrorMessage={requestErrorMessage}
diff --git a/src/components/Jobs/ScheduledJobs/ScheduledJobsFilters.js b/src/components/Jobs/ScheduledJobs/ScheduledJobsFilters.js
index a70092f27..514d315be 100644
--- a/src/components/Jobs/ScheduledJobs/ScheduledJobsFilters.js
+++ b/src/components/Jobs/ScheduledJobs/ScheduledJobsFilters.js
@@ -38,7 +38,12 @@ const ScheduledJobsFilters = () => {
         <FormSelect label="Type" name="type" options={filterScheduledTypeOptions} />
       </div>
       <div className="form-row">
-        <FormInput label="Labels" name={LABELS_FILTER} placeholder="key1,key2=value,..." />
+        <FormInput
+          label="Labels"
+          name={LABELS_FILTER}
+          placeholder="key1,key2=value,..."
+          tip="Add ~ before the filter value to return substring and case insensitive value."
+        />
         <FormOnChange
           handler={value => handleInputChange(value, LABELS_FILTER)}
           name={LABELS_FILTER}
diff --git a/src/components/Jobs/jobs.util.js b/src/components/Jobs/jobs.util.js
index ca5046b8c..aba0755e1 100644
--- a/src/components/Jobs/jobs.util.js
+++ b/src/components/Jobs/jobs.util.js
@@ -76,7 +76,7 @@ export const getInfoHeaders = (isSpark, selectedJob) => {
 
   return infoHeaders
 }
-export const actionButtonHeader = 'Batch run'
+export const actionButtonHeader = 'Batch Run'
 
 export const JOB_STEADY_STATES = ['completed', 'error', 'aborted', 'failed']
 export const JOB_RUNNING_STATES = ['running', 'pending']
diff --git a/src/components/ProjectsJobsMonitoring/JobsMonitoring/JobsMonitoringFilters.js b/src/components/ProjectsJobsMonitoring/JobsMonitoring/JobsMonitoringFilters.js
index 96e581371..bec84f0e7 100644
--- a/src/components/ProjectsJobsMonitoring/JobsMonitoring/JobsMonitoringFilters.js
+++ b/src/components/ProjectsJobsMonitoring/JobsMonitoring/JobsMonitoringFilters.js
@@ -49,7 +49,12 @@ const JobsMonitoringFilters = () => {
         <FormSelect label="Type" name="type" options={generateTypeFilter()} />
       </div>
       <div className="form-row">
-        <FormInput label="Labels" name={LABELS_FILTER} placeholder="key1,key2=value,..." />
+        <FormInput
+          label="Labels"
+          name={LABELS_FILTER}
+          placeholder="key1,key2=value,..."
+          tip="Add ~ before the filter value to return substring and case insensitive value."
+        />
         <FormOnChange
           handler={value => handleInputChange(value, LABELS_FILTER)}
           name={LABELS_FILTER}
diff --git a/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoring.js b/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoring.js
index 573f3729d..69437d147 100644
--- a/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoring.js
+++ b/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoring.js
@@ -73,7 +73,7 @@ const ScheduledMonitoring = () => {
     <ScheduledJobsTable
       context={ProjectJobsMonitoringContext}
       filtersConfig={scheduledFiltersConfig}
-      filtersMenuName={JOBS_MONITORING_SCHEDULED_TAB}
+      filterMenuName={JOBS_MONITORING_SCHEDULED_TAB}
       jobs={scheduledJobs}
       requestErrorMessage={requestErrorMessage}
       refreshJobs={() =>
diff --git a/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoringFilters.js b/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoringFilters.js
index c0d667004..64765faa3 100644
--- a/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoringFilters.js
+++ b/src/components/ProjectsJobsMonitoring/ScheduledMonitoring/ScheduledMonitoringFilters.js
@@ -45,7 +45,12 @@ const ScheduledMonitoringFilters = () => {
         <FormSelect label="Type" name="type" options={filterScheduledTypeOptions} />
       </div>
       <div className="form-row">
-        <FormInput label="Labels" name={LABELS_FILTER} placeholder="key1,key2=value,..." />
+        <FormInput
+          label="Labels"
+          name={LABELS_FILTER}
+          placeholder="key1,key2=value,..."
+          tip="Add ~ before the filter value to return substring and case insensitive value."
+        />
         <FormOnChange
           handler={value => handleInputChange(value, LABELS_FILTER)}
           name={LABELS_FILTER}
diff --git a/src/components/ProjectsJobsMonitoring/WorkflowsMonitoring/WorkflowsMonitoringFilters.js b/src/components/ProjectsJobsMonitoring/WorkflowsMonitoring/WorkflowsMonitoringFilters.js
index 6bc0b4af9..04c3edd2c 100644
--- a/src/components/ProjectsJobsMonitoring/WorkflowsMonitoring/WorkflowsMonitoringFilters.js
+++ b/src/components/ProjectsJobsMonitoring/WorkflowsMonitoring/WorkflowsMonitoringFilters.js
@@ -49,7 +49,12 @@ const WorkflowsMonitoringFilters = () => {
       </div>
       {isDemoMode && (
         <div className="form-row">
-          <FormInput label="Labels" name={LABELS_FILTER} placeholder="key1,key2=value,..." />
+          <FormInput
+            label="Labels"
+            name={LABELS_FILTER}
+            placeholder="key1,key2=value,..."
+            tip="Add ~ before the filter value to return substring and case insensitive value."
+          />
           <FormOnChange
             handler={value => handleInputChange(value, LABELS_FILTER)}
             name={LABELS_FILTER}
diff --git a/src/elements/JobsTable/JobsTable.js b/src/elements/JobsTable/JobsTable.js
index e459385c7..1e658fa6d 100644
--- a/src/elements/JobsTable/JobsTable.js
+++ b/src/elements/JobsTable/JobsTable.js
@@ -208,9 +208,12 @@ const JobsTable = React.forwardRef(
       [dispatch, modifyAndSelectRun, navigate, navigateLink, params.jobId]
     )
 
-    const refreshRun = useCallback((selectedItem) => {
-      fetchRun(selectedItem.project)
-    }, [fetchRun])
+    const refreshRun = useCallback(
+      selectedItem => {
+        fetchRun(selectedItem.project)
+      },
+      [fetchRun]
+    )
 
     const onAbortJob = useCallback(
       job => {
diff --git a/src/elements/ScheduledJobsTable/ScheduledJobsTable.js b/src/elements/ScheduledJobsTable/ScheduledJobsTable.js
index afe368ed0..bbb485a6b 100644
--- a/src/elements/ScheduledJobsTable/ScheduledJobsTable.js
+++ b/src/elements/ScheduledJobsTable/ScheduledJobsTable.js
@@ -53,7 +53,7 @@ const ScheduledJobsTable = ({
   context,
   filters = null,
   filtersConfig = null,
-  filtersMenuName = '',
+  filterMenuName = '',
   jobs,
   refreshJobs,
   requestErrorMessage,
@@ -263,7 +263,7 @@ const ScheduledJobsTable = ({
             requestErrorMessage,
             JOBS_PAGE,
             SCHEDULE_TAB,
-            filtersMenuName
+            filterMenuName
           )}
         />
       ) : (
@@ -297,7 +297,7 @@ ScheduledJobsTable.propTypes = {
   context: PropTypes.object.isRequired,
   filters: PropTypes.array,
   filtersConfig: FILTERS_CONFIG,
-  filtersMenuName: PropTypes.string,
+  filterMenuName: PropTypes.string,
   jobs: PropTypes.array.isRequired,
   refreshJobs: PropTypes.func.isRequired,
   requestErrorMessage: PropTypes.string.isRequired,
diff --git a/src/elements/WorkflowsTable/WorkflowsTable.js b/src/elements/WorkflowsTable/WorkflowsTable.js
index 48d6a0d00..81b3e6947 100644
--- a/src/elements/WorkflowsTable/WorkflowsTable.js
+++ b/src/elements/WorkflowsTable/WorkflowsTable.js
@@ -183,7 +183,14 @@ const WorkflowsTable = React.forwardRef(
           replace: true
         })
       })
-    }, [backLink, dispatch, navigate, params.projectName, params.workflowId, params.workflowProjectName])
+    }, [
+      backLink,
+      dispatch,
+      navigate,
+      params.projectName,
+      params.workflowId,
+      params.workflowProjectName
+    ])
 
     const handlePollAbortingJob = useCallback(
       (jobRun, refresh) => {
@@ -231,60 +238,62 @@ const WorkflowsTable = React.forwardRef(
       if (workflowsStore.activeWorkflow?.data) {
         const workflow = { ...workflowsStore.activeWorkflow.data }
 
-        return find(workflow.graph, workflowItem =>
-          workflowItem.run_type === 'run' && workflowItem.run_uid === params.jobId)
+        return find(
+          workflow.graph,
+          workflowItem => workflowItem.run_type === 'run' && workflowItem.run_uid === params.jobId
+        )
       }
     }, [params.jobId, workflowsStore.activeWorkflow.data])
 
-    const getPipelineError = useCallback(isErrorState => {
-      return isErrorState &&
-      workflowsStore.activeWorkflow?.data?.run?.error &&
-      workflowsStore.activeWorkflow.data.run.error !== 'None' ? {
-        title: 'Pipeline error - ',
-        message: workflowsStore.activeWorkflow.data.run.error
-      } : {}
-    }, [workflowsStore.activeWorkflow.data])
-
-    const fetchRun = useCallback(
-      () => {
-        return dispatch(
-          jobsActions.fetchJob(params.workflowProjectName || params.projectName, params.jobId)
-        )
-          .then(job => {
-            const selectedJob = findSelectedWorkflowJob()
-            const graphJobState = selectedJob?.phase?.toLowerCase()
-            const isErrorState = ['failed', 'error'].includes(graphJobState)
-            const customJobState = isErrorState ? graphJobState : ''
-
-            return modifyAndSelectRun(parseJob(
-              job,
-              MONITOR_WORKFLOWS_TAB,
-              customJobState,
-              getPipelineError(isErrorState)
-            ), fetchRun)
-          })
-          .catch(() =>
-            navigate(backLink, {
-              replace: true
-            })
-          )
-          .finally(() => {
-            fetchJobFunctionsPromiseRef.current = null
-          })
+    const getPipelineError = useCallback(
+      isErrorState => {
+        return isErrorState &&
+          workflowsStore.activeWorkflow?.data?.run?.error &&
+          workflowsStore.activeWorkflow.data.run.error !== 'None'
+          ? {
+              title: 'Pipeline error - ',
+              message: workflowsStore.activeWorkflow.data.run.error
+            }
+          : {}
       },
-      [
-        backLink,
-        dispatch,
-        findSelectedWorkflowJob,
-        modifyAndSelectRun,
-        navigate,
-        params.jobId,
-        params.projectName,
-        params.workflowProjectName,
-        getPipelineError
-      ]
+      [workflowsStore.activeWorkflow.data]
     )
 
+    const fetchRun = useCallback(() => {
+      return dispatch(
+        jobsActions.fetchJob(params.workflowProjectName || params.projectName, params.jobId)
+      )
+        .then(job => {
+          const selectedJob = findSelectedWorkflowJob()
+          const graphJobState = selectedJob?.phase?.toLowerCase()
+          const isErrorState = ['failed', 'error'].includes(graphJobState)
+          const customJobState = isErrorState ? graphJobState : ''
+
+          return modifyAndSelectRun(
+            parseJob(job, MONITOR_WORKFLOWS_TAB, customJobState, getPipelineError(isErrorState)),
+            fetchRun
+          )
+        })
+        .catch(() =>
+          navigate(backLink, {
+            replace: true
+          })
+        )
+        .finally(() => {
+          fetchJobFunctionsPromiseRef.current = null
+        })
+    }, [
+      backLink,
+      dispatch,
+      findSelectedWorkflowJob,
+      modifyAndSelectRun,
+      navigate,
+      params.jobId,
+      params.projectName,
+      params.workflowProjectName,
+      getPipelineError
+    ])
+
     const setJobStatusAborting = useCallback(
       task => {
         setSelectedJob(state => ({
@@ -326,7 +335,7 @@ const WorkflowsTable = React.forwardRef(
             <div>
               Are you sure you want to abort the job "{job.name}"? <br />
               {isJobKindLocal(job) &&
-              'This is a local run. You can abort the run, though the actual process will continue.'}
+                'This is a local run. You can abort the run, though the actual process will continue.'}
             </div>
           ),
           btnConfirmLabel: 'Abort',
@@ -407,25 +416,27 @@ const WorkflowsTable = React.forwardRef(
       setItemIsSelected(false)
     }, [setItemIsSelected, setSelectedFunction, setSelectedJob])
 
-    const findSelectedWorkflowFunction = useCallback((withoutRunType) => {
-      if (workflowsStore.activeWorkflow?.data) {
-        const workflow = { ...workflowsStore.activeWorkflow.data }
+    const findSelectedWorkflowFunction = useCallback(
+      withoutRunType => {
+        if (workflowsStore.activeWorkflow?.data) {
+          const workflow = { ...workflowsStore.activeWorkflow.data }
 
-        return find(workflow.graph, workflowItem => {
-          let workflowItemIsFound = (
-            workflowItem.function?.includes(`${params.functionName}@${params.functionHash}`) ||
-            workflowItem.function?.includes(params.functionName) ||
-            workflowItem.function?.includes(params.jobId)
-          )
+          return find(workflow.graph, workflowItem => {
+            let workflowItemIsFound =
+              workflowItem.function?.includes(`${params.functionName}@${params.functionHash}`) ||
+              workflowItem.function?.includes(params.functionName) ||
+              workflowItem.function?.includes(params.jobId)
 
-          if (withoutRunType) {
-            workflowItemIsFound = workflowItemIsFound && workflowItem.run_type !== 'run'
-          }
+            if (withoutRunType) {
+              workflowItemIsFound = workflowItemIsFound && workflowItem.run_type !== 'run'
+            }
 
-          return workflowItemIsFound
-        })
-      }
-    }, [params.functionName, params.functionHash, params.jobId, workflowsStore.activeWorkflow.data])
+            return workflowItemIsFound
+          })
+        }
+      },
+      [params.functionName, params.functionHash, params.jobId, workflowsStore.activeWorkflow.data]
+    )
 
     const checkIfWorkflowItemIsJob = useCallback(() => {
       if (workflowsStore.activeWorkflow?.data?.graph) {
@@ -457,7 +468,8 @@ const WorkflowsTable = React.forwardRef(
         !fetchJobFunctionsPromiseRef.current &&
         params.jobId &&
         (isEmpty(selectedJob) || params.jobId !== selectedJob.uid) &&
-        checkIfWorkflowItemIsJob() && !dataIsLoading
+        checkIfWorkflowItemIsJob() &&
+        !dataIsLoading
       ) {
         setDataIsLoading(true)
 
diff --git a/src/hooks/useJobsPageData.js b/src/hooks/useJobsPageData.js
index ec035eef8..5c2e1891b 100644
--- a/src/hooks/useJobsPageData.js
+++ b/src/hooks/useJobsPageData.js
@@ -194,7 +194,7 @@ export const useJobsPageData = (fetchAllJobRuns, fetchJobFunction, fetchJobs) =>
         }
       })
     },
-    [dispatch, params.projectName, selectedRunProject]
+    [dispatch, params.projectName]
   )
 
   const getWorkflows = useCallback(
diff --git a/src/utils/getNoDataMessage.js b/src/utils/getNoDataMessage.js
index 0772426fb..f3190b0f8 100644
--- a/src/utils/getNoDataMessage.js
+++ b/src/utils/getNoDataMessage.js
@@ -53,7 +53,9 @@ import {
   PROJECT_FILTER,
   TYPE_FILTER,
   CONSUMER_GROUP_PAGE,
-  CONSUMER_GROUPS_PAGE
+  CONSUMER_GROUPS_PAGE,
+  MONITOR_JOBS_TAB,
+  SCHEDULE_TAB
 } from '../constants'
 
 const messageNamesList = {
@@ -87,6 +89,12 @@ const messageNamesList = {
   [MONITOR_WORKFLOWS_TAB]: {
     plural: 'Workflows'
   },
+  [MONITOR_JOBS_TAB]: {
+    plural: 'Jobs'
+  },
+  [SCHEDULE_TAB]: {
+    plural: 'Scheduled jobs'
+  },
   [MODEL_ENDPOINTS_TAB]: {
     plural: 'Model endpoints'
   },
@@ -149,7 +157,12 @@ const getSelectedDateValue = (filterType, filtersStore, filtersStoreKey) => {
   )
 
   return (filterType === DATE_RANGE_TIME_FILTER &&
-    !isEqual(filtersStore.dates.value, DATE_FILTER_ANY_TIME)) ||
+    (filtersStoreKey
+      ? !isEqual(
+          filtersStore[FILTER_MENU][filtersStoreKey].values[DATES_FILTER].value[0],
+          DATE_FILTER_ANY_TIME
+        )
+      : !isEqual(filtersStore.dates.value, DATE_FILTER_ANY_TIME))) ||
     (filterType === DATES_FILTER &&
       !isEqual(
         filtersStore[FILTER_MENU][filtersStoreKey].values[DATES_FILTER].value,
@@ -172,9 +185,9 @@ const generateNoEntriesFoundMessage = (
       ? 'true'
       : filterType === DATE_RANGE_TIME_FILTER || filterType === DATES_FILTER
         ? getSelectedDateValue(filterType, filtersStore, filtersStoreKey)
-        : filtersStore[FILTER_MENU][filtersStoreKey]?.values?.[filterType] ??
+        : (filtersStore[FILTER_MENU][filtersStoreKey]?.values?.[filterType] ??
           filtersStore[FILTER_MENU_MODAL][filtersStoreKey]?.values?.[filterType] ??
-          filtersStore[filterType]
+          filtersStore[filterType])
     const isLastElement = index === visibleFilterTypes.length - 1
 
     return message + `${label} ${value}${isLastElement ? '"' : ', '}`
diff --git a/src/utils/getState.js b/src/utils/getState.js
index 9055a7f04..018499576 100644
--- a/src/utils/getState.js
+++ b/src/utils/getState.js
@@ -19,7 +19,12 @@ such restriction.
 */
 
 import { isEmpty } from 'lodash'
-import { FUNCTION_INITIALIZED_STATE, FUNCTIONS_PAGE, JOBS_MONITORING_WORKFLOWS_TAB } from '../constants'
+import {
+  FUNCTION_INITIALIZED_STATE,
+  FUNCTIONS_PAGE,
+  JOBS_MONITORING_WORKFLOWS_TAB,
+  MONITOR_WORKFLOWS_TAB
+} from '../constants'
 
 const getState = (state, page, kind) => {
   const stateExists = !isEmpty(state)
@@ -35,7 +40,11 @@ const getState = (state, page, kind) => {
   } else {
     return {
       value: state ?? null,
-      label: state ? commonStateLabels(page === JOBS_MONITORING_WORKFLOWS_TAB)[state] : '',
+      label: state
+        ? commonStateLabels(
+            page === JOBS_MONITORING_WORKFLOWS_TAB || page === MONITOR_WORKFLOWS_TAB
+          )[state]
+        : '',
       className: `state${state ? '-' + state : ''}${kind ? '-' + kind : ''}`
     }
   }
diff --git a/tests/mockServer/mock.js b/tests/mockServer/mock.js
index 80c8eb13a..7042ada4e 100644
--- a/tests/mockServer/mock.js
+++ b/tests/mockServer/mock.js
@@ -160,7 +160,8 @@ const projectExistsConflict = {
   detail: "MLRunConflictError('Conflict - Project already exists')"
 }
 const projectsLimitReachedConflict = {
-    detail: "MLRunHTTPError(\"Failed creating project in Iguazio: [{'status': 405, 'detail': 'Resource limit reached. Cannot create more records'}]\")"
+  detail:
+    "MLRunHTTPError(\"Failed creating project in Iguazio: [{'status': 405, 'detail': 'Resource limit reached. Cannot create more records'}]\")"
 }
 const secretKeyTemplate = {
   provider: 'kubernetes',
@@ -308,7 +309,9 @@ function deleteProjectHandler(req, res, omitResponse) {
 
 function filterByLabels(elementLabels, requestLabels) {
   if (requestLabels?.length > 0 && !isEmpty(elementLabels)) {
-    const requestLabelsList = (isArray(requestLabels) ? requestLabels : [requestLabels]).map(label => label.split('='))
+    const requestLabelsList = (isArray(requestLabels) ? requestLabels : [requestLabels]).map(
+      label => label.split('=')
+    )
 
     return requestLabelsList.every(([key = '', value = '']) => {
       const trimmedKey = key.trim()
@@ -319,10 +322,15 @@ function filterByLabels(elementLabels, requestLabels) {
       }
 
       if (trimmedValue && trimmedValue.startsWith('~')) {
-        return elementLabels[trimmedKey] && elementLabels[trimmedKey].toLowerCase().includes(trimmedValue.substring(1).toLowerCase())
+        return (
+          elementLabels[trimmedKey] &&
+          elementLabels[trimmedKey].toLowerCase().includes(trimmedValue.substring(1).toLowerCase())
+        )
       }
 
-      return elementLabels[trimmedKey] && (!trimmedValue || elementLabels[trimmedKey] === trimmedValue)
+      return (
+        elementLabels[trimmedKey] && (!trimmedValue || elementLabels[trimmedKey] === trimmedValue)
+      )
     })
   }
 
@@ -372,7 +380,9 @@ function getFeatureSet(req, res) {
   }
 
   if (req.query['label']) {
-    collectedFeatureSets = collectedFeatureSets.filter(featureSet => filterByLabels(featureSet.metadata.labels, req.query['label']))
+    collectedFeatureSets = collectedFeatureSets.filter(featureSet =>
+      filterByLabels(featureSet.metadata.labels, req.query['label'])
+    )
   }
 
   res.send({ feature_sets: collectedFeatureSets })
@@ -700,17 +710,17 @@ function getRuns(req, res) {
       .filter(run => {
         const runStartTime = new Date(run.status.start_time)
 
-      if (!start_time_from || runStartTime >= new Date(start_time_from)) {
-        if (state) {
-          if (isArray(state)) {
-            return state.includes(run.status.state)
+        if (!start_time_from || runStartTime >= new Date(start_time_from)) {
+          if (state) {
+            if (isArray(state)) {
+              return state.includes(run.status.state)
+            } else {
+              return run.status.state === state
+            }
           } else {
-            return run.status.state === state
+            return true
           }
-        } else {
-          return true
         }
-      }
 
         return false
       })
@@ -733,12 +743,22 @@ function getRuns(req, res) {
     }
 
     if (req.query['state']) {
-      collectedRuns = collectedRuns.filter(run => run.status.state === req.query['state'])
+      const state = req.query['state']
+
+      collectedRuns = collectedRuns.filter(run => {
+        if (isArray(state)) {
+          return state.includes(run.status.state)
+        } else {
+          return run.status.state === state
+        }
+      })
     }
   }
 
   if (req.query['label']) {
-    collectedRuns = collectedRuns.filter(run => filterByLabels(run.metadata.labels, req.query['label']))
+    collectedRuns = collectedRuns.filter(run =>
+      filterByLabels(run.metadata.labels, req.query['label'])
+    )
   }
 
   if (req.query['partition-by'] && req.query['partition-sort-by']) {
@@ -876,7 +896,9 @@ function getProjectsSchedules(req, res) {
   }
 
   if (req.query['label']) {
-    collectedSchedules = collectedSchedules.filter(schedule => filterByLabels(schedule.labels, req.query['label']))
+    collectedSchedules = collectedSchedules.filter(schedule =>
+      filterByLabels(schedule.labels, req.query['label'])
+    )
   }
 
   res.send({ schedules: collectedSchedules })
@@ -1153,7 +1175,9 @@ function getArtifacts(req, res) {
   }
 
   if (req.query['label']) {
-    collectedArtifacts = collectedArtifacts.filter(artifact => filterByLabels(artifact.metadata.labels, req.query['label']))
+    collectedArtifacts = collectedArtifacts.filter(artifact =>
+      filterByLabels(artifact.metadata.labels, req.query['label'])
+    )
   }
 
   if (req.query['name']) {
@@ -1192,17 +1216,17 @@ function getArtifacts(req, res) {
 
   if (req.query['format'] === 'minimal') {
     collectedArtifacts = collectedArtifacts.map(func => {
-      const fieldsToPick = [
-        'db_key',
-        'producer',
-        'size',
-        'target_path',
-        'framework',
-        'metrics'
-      ]
+      const fieldsToPick = ['db_key', 'producer', 'size', 'target_path', 'framework', 'metrics']
       const specFieldsToPick = fieldsToPick.map(fieldName => `spec.${fieldName}`)
 
-      return pick(func, ['kind', 'metadata', 'status', 'project', ...specFieldsToPick, ...fieldsToPick])
+      return pick(func, [
+        'kind',
+        'metadata',
+        'status',
+        'project',
+        ...specFieldsToPick,
+        ...fieldsToPick
+      ])
     })
   }
 
@@ -1290,13 +1314,12 @@ function patchProjectsFeatureVectors(req, res) {
 }
 
 function getProjectsFeatureVector(req, res) {
-  const featureVector = featureVectors.feature_vectors
-    .find(
-      item =>
-        item.metadata.project === req.params.project &&
-        item.metadata.name === req.params.name &&
-        (item.metadata.uid === req.params.reference || item.metadata.tag === req.params.reference)
-    )
+  const featureVector = featureVectors.feature_vectors.find(
+    item =>
+      item.metadata.project === req.params.project &&
+      item.metadata.name === req.params.name &&
+      (item.metadata.uid === req.params.reference || item.metadata.tag === req.params.reference)
+  )
 
   if (featureVector) {
     res.send(featureVector)
@@ -1674,7 +1697,7 @@ function getFileStats(req, res) {
   const { size } = fs.statSync(filePath)
   const mimeType = mime.lookup(filePath)
 
-  res.send({mimetype: mimeType, size, modified: Date.now()})
+  res.send({ mimetype: mimeType, size, modified: Date.now() })
 }
 
 function deleteSchedule(req, res) {
@@ -1854,7 +1877,8 @@ function putTags(req, res) {
 
     return (
       artifactMetaData?.project === req.params.project &&
-      (artifact.kind === req.body.identifiers[0].kind || (!artifact.kind && req.body.identifiers[0].kind === 'artifact')) &&
+      (artifact.kind === req.body.identifiers[0].kind ||
+        (!artifact.kind && req.body.identifiers[0].kind === 'artifact')) &&
       (artifactMetaData?.uid === req.body.identifiers[0].uid ||
         artifactMetaData?.tree === req.body.identifiers[0].uid) &&
       artifactSpecData?.db_key === req.body.identifiers[0].key
@@ -2064,7 +2088,9 @@ function getModelEndpoints(req, res) {
       }
     }))
   if (req.query['label']) {
-    collectedEndpoints = collectedEndpoints.filter(endpoint => filterByLabels(endpoint.metadata.labels, req.query['label']))
+    collectedEndpoints = collectedEndpoints.filter(endpoint =>
+      filterByLabels(endpoint.metadata.labels, req.query['label'])
+    )
   }
 
   res.send({ endpoints: collectedEndpoints })
@@ -2494,7 +2520,6 @@ app.post(`${mlrunAPIIngress}/build/function`, deployMLFunction)
 app.get(`${mlrunAPIIngress}/projects/:project/files`, getFile)
 app.get(`${mlrunAPIIngress}/projects/:project/filestat`, getFileStats)
 
-
 app.get(`${mlrunAPIIngress}/log/:project/:uid`, getLog)
 
 app.get(`${mlrunAPIIngress}/projects/:project/runtime-resources`, getRuntimeResources)