Fix [Alerts history] filtering by project name doesn't work

src/common/Download/DownloadItem.js

@@ -25,7 +25,11 @@ import { useDispatch } from 'react-redux'
 import { RoundedIcon, Tooltip, TextTooltipTemplate } from 'igz-controls/components'
 
 import downloadFile from '../../utils/downloadFile'
-import { ARTIFACT_MAX_CHUNK_SIZE, ARTIFACT_MAX_DOWNLOAD_SIZE, REQUEST_CANCELED } from '../../constants'
+import {
+  ARTIFACT_MAX_CHUNK_SIZE,
+  ARTIFACT_MAX_DOWNLOAD_SIZE,
+  REQUEST_CANCELED
+} from '../../constants'
 import { removeDownloadItem } from '../../reducers/downloadReducer'
 import api from '../../api/artifacts-api'
 
@@ -55,7 +59,7 @@ const DownloadItem = ({ downloadItem }) => {
   const downloadCallback = useCallback(async () => {
     if (isDownload) {
       let isFileTooLargeLocal = false
-      
+
       try {
         downloadAbortControllerRef.current = new AbortController()
 
@@ -185,9 +189,7 @@ const DownloadItem = ({ downloadItem }) => {
         ) : isSuccessResponse ? (
           <div className="download-item__message_succeed">Done</div>
         ) : (
-          <div className="download-item__message_failed">
-            {failedDownloadMessage}
-          </div>
+          <div className="download-item__message_failed">{failedDownloadMessage}</div>
         )}
       </div>
       {!isFileTooLarge ? (
@@ -213,7 +215,6 @@ DownloadItem.propTypes = {
       max_chunk_size: PropTypes.number,
       max_download_size: PropTypes.number,
       max_preview_size: PropTypes.number
-
     }),
     filename: PropTypes.string,
     fileSize: PropTypes.number,

src/components/Alerts/Alerts.js

@@ -60,7 +60,7 @@ const Alerts = () => {
     refreshAlerts,
     setAlerts,
     setSearchParams
-  } = useAlertsPageData(alertsFilters)
+  } = useAlertsPageData(alertsFilters, true)
 
   const handleRefreshWithFilters = useCallback(
     filters => {

src/components/Alerts/AlertsFilters.js

@@ -46,7 +46,7 @@ import {
   JOB_NAME,
   MODEL_ENDPOINT_RESULT,
   MODEL_MONITORING_APPLICATION,
-  PROJECTS_FILTER,
+  PROJECT_FILTER,
   SEVERITY
 } from '../../constants'
 
@@ -91,7 +91,7 @@ const AlertsFilters = ({ isAlertsPage, isCrossProjects }) => {
     <>
       {isCrossProjects && (
         <div className="form-row">
-          <FormSelect label="Project name" name={PROJECTS_FILTER} options={projectsList} />
+          <FormSelect label="Project name" name={PROJECT_FILTER} options={projectsList} />
         </div>
       )}
       {isAlertsPage && (

src/components/Alerts/alerts.util.js

@@ -36,7 +36,7 @@ import {
   MODEL_ENDPOINT_RESULT,
   MODEL_MONITORING_APPLICATION,
   NAME_FILTER,
-  PROJECTS_FILTER,
+  PROJECT_FILTER,
   SEVERITY,
   SEVERITY_HIGH,
   SEVERITY_LOW,
@@ -57,7 +57,7 @@ export const getAlertsFiltersConfig = (timeFrameLimit = false) => {
       initialValue: getDatePickerFilterValue(datePickerPastOptions, PAST_24_HOUR_DATE_OPTION),
       timeFrameLimit: timeFrameLimit ? TIME_FRAME_LIMITS.MONTH : Infinity
     },
-    [PROJECTS_FILTER]: { label: 'Project:', initialValue: FILTER_ALL_ITEMS, isModal: true },
+    [PROJECT_FILTER]: { label: 'Project:', initialValue: FILTER_ALL_ITEMS, isModal: true },
     [ENTITY_TYPE]: { label: 'Entity Type:', initialValue: FILTER_ALL_ITEMS, isModal: true },
     [ENTITY_ID]: { label: 'Entity ID:', initialValue: '', isModal: true },
     [JOB_NAME]: { label: 'Job Name:', initialValue: '', isModal: true },

src/components/DetailsAlerts/DetailsAlerts.js

@@ -51,7 +51,7 @@ const DetailsAlerts = () => {
     refreshAlerts,
     setAlerts,
     setSearchParams
-  } = useAlertsPageData(alertsFilters, false)
+  } = useAlertsPageData(alertsFilters)
 
   const handleRefreshWithFilters = useCallback(
     filters => {

src/components/ProjectsJobsMonitoring/JobsMonitoring/JobsMonitoringFilters.js

@@ -39,7 +39,7 @@ const JobsMonitoringFilters = () => {
   }
 
   return (
-    <div>
+    <>
       <div className="form-row">
         <FormInput name={PROJECT_FILTER} placeholder="Search by project name..." />
         <FormOnChange
@@ -69,7 +69,7 @@ const JobsMonitoringFilters = () => {
           name={LABELS_FILTER}
         />
       </div>
-    </div>
+    </>
   )
 }
 

src/components/Table/table.scss

@@ -229,6 +229,7 @@
         }
 
         &_type {
+          display: inline-flex;
           text-transform: capitalize;
         }
 

src/constants.js

@@ -523,7 +523,6 @@ export const LABELS_FILTER = 'labels'
 export const NAME_FILTER = 'name'
 export const DATES_FILTER = 'dates'
 export const PROJECT_FILTER = 'project'
-export const PROJECTS_FILTER = 'projects-list'
 export const TYPE_FILTER = 'type'
 export const SHOW_UNTAGGED_FILTER = 'showUntagged'
 export const SORT_BY = 'sortBy'

src/hooks/useAlertsPageData.js

@@ -21,7 +21,7 @@ import { useCallback, useRef, useState } from 'react'
 import { useParams } from 'react-router-dom'
 import { useDispatch } from 'react-redux'
 
-import { BE_PAGE, BE_PAGE_SIZE, FILTER_ALL_ITEMS, PROJECTS_FILTER } from '../constants'
+import { BE_PAGE, BE_PAGE_SIZE, FILTER_ALL_ITEMS, PROJECT_FILTER } from '../constants'
 import { usePagination } from './usePagination.hook'
 import { fetchAlerts } from '../reducers/alertsReducer'
 
@@ -42,8 +42,8 @@ export const useAlertsPageData = (filters, isAlertsPage) => {
 
       const projectName = !isAlertsPage
         ? params.projectName || params.id
-        : filters?.[PROJECTS_FILTER]?.toLowerCase?.() !== FILTER_ALL_ITEMS
-          ? filters?.[PROJECTS_FILTER]?.toLowerCase?.()
+        : filters?.[PROJECT_FILTER]?.toLowerCase?.() !== FILTER_ALL_ITEMS
+          ? filters?.[PROJECT_FILTER]?.toLowerCase?.()
           : params.id
 
       dispatch(

src/utils/getNoDataMessage.js

@@ -54,7 +54,6 @@ import {
   MONITOR_JOBS_TAB,
   NAME_FILTER,
   PROJECT_FILTER,
-  PROJECTS_FILTER,
   REAL_TIME_PIPELINES_TAB,
   SCHEDULE_TAB,
   SEVERITY,
@@ -207,7 +206,7 @@ const getVisibleFilterTypes = (filtersConfig, filters, filtersStore) => {
     const isEventTypeVisible =
       type === EVENT_TYPE && !isEqual(filters[EVENT_TYPE], FILTER_ALL_ITEMS)
     const isProjectsVisible =
-      type === PROJECTS_FILTER && !isEqual(filters[PROJECTS_FILTER], FILTER_ALL_ITEMS)
+      type === PROJECT_FILTER && !isEqual(filters[PROJECT_FILTER], FILTER_ALL_ITEMS)
     const isSeverityVisible = type === SEVERITY && !isEqual(filters[SEVERITY], [FILTER_ALL_ITEMS])
     const isTypeVisible = type === TYPE_FILTER && !isEqual(filters[TYPE_FILTER], FILTER_ALL_ITEMS)
     const isDateVisible =