Skip to content

Impl [Alerts history] Separate AlertView component for Projects-Alerts and Alerts-Tab 1.9.0 #3112

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 6 commits into from
Closed

Impl [Alerts history] Separate AlertView component for Projects-Alerts and Alerts-Tab 1.9.0 #3112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e93502d
Refactor Alerts component: removed the AlertsView component and added…
pinis-gini-apps Feb 14, 2025
6238a40
merge with development
pinis-gini-apps Feb 14, 2025
e791ce8
Merge branch 'development' into ML-9205
pinis-gini-apps Feb 17, 2025
a4e169c
add first-child class to fix expand row style
pinis-gini-apps Feb 17, 2025
89e4f04
merge with development
pinis-gini-apps Mar 11, 2025
136b72b
add isAlertsPage props to AlertsTble in DetailsAlerts component
pinis-gini-apps Mar 12, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 51 additions & 18 deletions src/components/Alerts/Alerts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,8 +22,13 @@ import { useNavigate, useParams } from 'react-router-dom'
import { useDispatch, useSelector } from 'react-redux'
import { isEmpty } from 'lodash'

import AlertsView from './AlertsView'
import ActionBar from '../ActionBar/ActionBar'
import AlertsFilters from './AlertsFilters'
import AlertsTable from '../../elements/AlertsTable/AlertsTable'
import Breadcrumbs from '../../common/Breadcrumbs/Breadcrumbs'
import Pagination from '../../common/Pagination/Pagination'

import { ALERTS_FILTERS, ALERTS_PAGE_PATH } from '../../constants'
import { createAlertRowData } from '../../utils/createAlertsContent'
import {
getAlertsFiltersConfig,
Expand Down Expand Up @@ -142,23 +147,51 @@ const Alerts = () => {
}, [lastCheckedAlertIdRef, selectedAlert])

return (
<AlertsView
alerts={paginatedAlerts}
alertsFiltersConfig={alertsFiltersConfig}
alertsStore={alertsStore}
filters={alertsFilters}
filtersStore={filtersStore}
handleCancel={handleCancel}
handleRefreshAlerts={handleRefreshAlerts}
handleRefreshWithFilters={handleRefreshWithFilters}
isCrossProjects={isCrossProjects}
pageData={pageData}
paginationConfigAlertsRef={paginationConfigAlertsRef}
requestErrorMessage={requestErrorMessage}
selectedAlert={selectedAlert}
setSearchParams={setSearchParams}
tableContent={tableContent}
/>
<div className="content-wrapper">
<div className="content__header">
<Breadcrumbs />
</div>
<div className="content">
<div className="table-container alerts-container">
<div className="content__action-bar-wrapper">
<ActionBar
autoRefreshIsStopped={true}
closeParamName={ALERTS_PAGE_PATH}
filterMenuName={ALERTS_FILTERS}
filters={alertsFilters}
filtersConfig={alertsFiltersConfig}
handleRefresh={handleRefreshAlerts}
setSearchParams={setSearchParams}
withRefreshButton
withoutExpandButton
>
<AlertsFilters isAlertsPage={alertsFilters} isCrossProjects={isCrossProjects} />
</ActionBar>
</div>
<AlertsTable
alertsFiltersConfig={alertsFiltersConfig}
alertsStore={alertsStore}
filters={alertsFilters}
filtersStore={filtersStore}
handleCancel={handleCancel}
handleRefreshAlerts={handleRefreshAlerts}
handleRefreshWithFilters={handleRefreshWithFilters}
isCrossProjects={isCrossProjects}
pageData={pageData}
paginationConfigAlertsRef={paginationConfigAlertsRef}
requestErrorMessage={requestErrorMessage}
selectedAlert={selectedAlert}
setSearchParams={setSearchParams}
tableContent={tableContent}
/>
<Pagination
closeParamName={ALERTS_PAGE_PATH}
page={pageData.page}
paginationConfig={paginationConfigAlertsRef.current}
/>
</div>
</div>
</div>
)
}

Expand Down
208 changes: 0 additions & 208 deletions src/components/Alerts/AlertsView.js
View file
Open in desktop

This file was deleted.

65 changes: 41 additions & 24 deletions src/components/DetailsAlerts/DetailsAlerts.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ import React, { useCallback, useMemo, useState } from 'react'
import { useNavigate, useParams } from 'react-router-dom'
import { useSelector } from 'react-redux'

import AlertsView from '../Alerts/AlertsView'
import AlertsTable from '../../elements/AlertsTable/AlertsTable'

import { ALERTS_DISPLAY_LIMIT } from '../../constants'
import { createAlertRowData } from '../../utils/createAlertsContent'
Expand All @@ -34,6 +34,8 @@ import {
import { useAlertsPageData } from '../../hooks/useAlertsPageData'
import { useFiltersFromSearchParams } from '../../hooks/useFiltersFromSearchParams.hook'

import { ReactComponent as ExclamationMarkIcon } from 'igz-controls/images/exclamation-mark.svg'

const DetailsAlerts = () => {
const [selectedAlert, setSelectedAlert] = useState({})
const alertsStore = useSelector(state => state.alertsStore)
Expand All @@ -51,7 +53,6 @@ const DetailsAlerts = () => {
const {
alerts,
handleRefreshAlerts,
paginatedAlerts,
paginationConfigAlertsRef,
requestErrorMessage,
refreshAlerts,
Copy link
Contributor

@Taras-Hlukhovetskyi Taras-Hlukhovetskyi Mar 21, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pinis-gini-apps, @adi-gini , switching between model endpoints doesn't trigger new requests for alerts, the reason is that on details we use the pagination hook, we need to fix and separate logic in useAlertsPageData as well, so we don't have to use the pagination hook for alerts details

Expand Down Expand Up @@ -89,28 +90,44 @@ const DetailsAlerts = () => {
)

return (
<AlertsView
alerts={paginatedAlerts}
alertsFiltersConfig={alertsFiltersConfig}
alertsStore={alertsStore}
entityId={entityId}
filters={alertsFilters}
filtersStore={filtersStore}
handleRefreshAlerts={handleRefreshAlerts}
handleRefreshWithFilters={handleRefreshWithFilters}
isAlertsPage={false}
isCrossProjects={false}
navigate={navigate}
navigateToPerProjectAlertsPage={navigateToPerProjectAlertsPage}
pageData={pageData}
paginationConfigAlertsRef={paginationConfigAlertsRef}
projectName={projectName}
requestErrorMessage={requestErrorMessage}
selectedAlert={selectedAlert}
setSearchParams={setSearchParams}
tableContent={tableContent}
toggleRow={toggleRow}
/>
<div className="content-wrapper">
<div className="content">
<div className="table-container alerts-container">
<div className="content__action-bar-wrapper">
{tableContent.length >= ALERTS_DISPLAY_LIMIT && (
<div className="alerts-container__content-info">
<ExclamationMarkIcon />
<div>Only 100 alerts are displayed. View all in</div>
<span
className="link"
onClick={() => navigateToPerProjectAlertsPage(navigate, projectName, entityId)}
>
alerts screen
</span>
.
</div>
)}
</div>
<AlertsTable
alertsFiltersConfig={alertsFiltersConfig}
alertsStore={alertsStore}
filters={alertsFilters}
filtersStore={filtersStore}
handleRefreshAlerts={handleRefreshAlerts}
handleRefreshWithFilters={handleRefreshWithFilters}
isAlertsPage={false}
isCrossProjects={false}
pageData={pageData}
paginationConfigAlertsRef={paginationConfigAlertsRef}
requestErrorMessage={requestErrorMessage}
selectedAlert={selectedAlert}
setSearchParams={setSearchParams}
tableContent={tableContent}
toggleRow={toggleRow}
/>
</div>
</div>
</div>
)
}
export default React.memo(DetailsAlerts)
Loading