Skip to content
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

Updated the UI to display sent notifications in the exact format see… #960

Merged
merged 3 commits into from
Dec 2, 2024
Merged

Updated the UI to display sent notifications in the exact format see… #960

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
86156aa
Updated the UI to display sent notifications in the exact format see…
ydahal1 Nov 27, 2024
5dbf7cb
Removed return statement that was previously added for debugging on J…
ydahal1 Nov 28, 2024
5f3d724
Merge branch 'dev' into yadhap/notification-details-enhancement
ydahal1 Dec 2, 2024
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
233 changes: 112 additions & 121 deletions ...client-reactjs/src/components/application/dashboard/notifications/NotificationDetails.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,152 +1,143 @@
// Packages
import React from 'react';
import { Descriptions, Tooltip, Tag } from 'antd';
import React, { useState, useEffect } from 'react';
import { Descriptions, Tooltip, Tag, Tabs } from 'antd';

//Local Imports
import { formatDateTime } from '../../../common/CommonUtil';
import './notifications.css';
import { getNotificationHtmlCode } from './notificationUtil';

function NotificationDetails({ selectedNotification, domains, productCategories }) {
function NotificationDetails({ selectedNotification }) {
// Destructure metaData
const { asrSpecificMetaData } = selectedNotification;
const { metaData } = selectedNotification;

const [fetchingNotificationDetails, setFetchingNotificationDetails] = useState(true);
const [notificationHtmlCode, setNotificationHtmlCode] = useState(null);

useEffect(() => {
const fetchNotificationDetails = async () => {
if (selectedNotification) {
try {
const { id } = selectedNotification;

const notificationHtmlCode = await getNotificationHtmlCode(id);
setNotificationHtmlCode(notificationHtmlCode);
} catch (err) {
console.log(err);
} finally {
setFetchingNotificationDetails(false);
}
}
};

fetchNotificationDetails();
}, [selectedNotification]);

// JSX
return (
<>
<Descriptions column={1} bordered={true} size="small" className="notifications_tiny-description">
<Descriptions.Item label="Origin ">
{selectedNotification.notificationOrigin || <Tag>Unknown</Tag>}
</Descriptions.Item>
<Descriptions.Item label="Reason ">{selectedNotification.notificationTitle}</Descriptions.Item>
<Descriptions.Item label=" Details ">
<div className="notifications__fixed-size-description-item tiny-scroll-bar">
{selectedNotification.notificationDescription}
</div>
</Descriptions.Item>
<Descriptions.Item label="Status ">{selectedNotification.status}</Descriptions.Item>
{selectedNotification.recipients && (
<Descriptions.Item label="Recipient(s) ">
<div className="notifications__fixed-size-description-item tiny-scroll-bar">
{selectedNotification?.recipients?.intended.map((r, i) => (
<Tag key={i}>{r}</Tag>
))}
</div>
<Tabs>
<Tabs.TabPane tab="Summary" key="0">
<Descriptions column={1} bordered={true} size="small" className="notifications_tiny-description">
<Descriptions.Item label="Origin ">
{selectedNotification.notificationOrigin || <Tag>Unknown</Tag>}
</Descriptions.Item>
)}
<Descriptions.Item label="Channel ">{selectedNotification.notificationChannel}</Descriptions.Item>
<Descriptions.Item label="Reason ">{selectedNotification.notificationTitle}</Descriptions.Item>

{/* ASR specific metadata ------------------------------------*/}
<Descriptions.Item label="Status ">{selectedNotification.status}</Descriptions.Item>
{selectedNotification.recipients && (
<Descriptions.Item label="Recipient(s) ">
<div className="notifications__fixed-size-description-item tiny-scroll-bar">
{selectedNotification?.recipients?.intended.map((r, i) => (
<Tag key={i}>{r}</Tag>
))}
</div>
</Descriptions.Item>
)}

{asrSpecificMetaData && asrSpecificMetaData?.severity && (
<Descriptions.Item label="Severity">{asrSpecificMetaData.severity}</Descriptions.Item>
)}
{/* ASR specific metadata ------------------------------------*/}

{asrSpecificMetaData && asrSpecificMetaData?.domain && (
<Descriptions.Item label="Domain ">
{domains.find((d) => d.id === asrSpecificMetaData.domain)?.name || <Tag>Unknown</Tag>}
</Descriptions.Item>
)}
{asrSpecificMetaData && asrSpecificMetaData?.productCategory && (
<Descriptions.Item label="Product Category">
{productCategories.find((pc) => pc.id === asrSpecificMetaData.productCategory)?.name || <Tag>Unknown</Tag>}
</Descriptions.Item>
)}
{asrSpecificMetaData && asrSpecificMetaData?.jiraTickets && (
<Descriptions.Item label="Jira Tickets">
{asrSpecificMetaData.jiraTickets.map((t, i) => (
<Tag key={i}>{t}</Tag>
))}
</Descriptions.Item>
)}
{asrSpecificMetaData && asrSpecificMetaData?.interceptionStage && (
<Descriptions.Item label="Interception Stage">{asrSpecificMetaData.interceptionStage}</Descriptions.Item>
)}
{asrSpecificMetaData && asrSpecificMetaData?.primaryContact && (
<Descriptions.Item label="Primary Contact(s)">
<div className="notifications__fixed-size-description-item tiny-scroll-bar">
{asrSpecificMetaData.primaryContact.map((pc, i) => (
<Tag key={i}>{pc}</Tag>
{metaData?.asrSpecificMetaData && metaData?.asrSpecificMetaData?.jiraTickets && (
<Descriptions.Item label="Jira Tickets">
{metaData?.asrSpecificMetaData.jiraTickets.map((t, i) => (
<Tag key={i}>{t}</Tag>
))}
</div>
</Descriptions.Item>
)}
{asrSpecificMetaData && asrSpecificMetaData?.secondaryContact && (
<Descriptions.Item label="Secondary Contact(s)">
<div className="notifications__fixed-size-description-item">
{asrSpecificMetaData.secondaryContact.map((sc, i) => (
<Tag key={i}>{sc}</Tag>
))}
</div>
.
</Descriptions.Item>
)}
{asrSpecificMetaData && asrSpecificMetaData?.notifyContact && (
<Descriptions.Item label="Notify Contact(s)">
<div className="notifications__fixed-size-description-item">
{asrSpecificMetaData.notifyContact.map((nc, i) => (
<Tag key={i}>{nc}</Tag>
))}
</div>
</Descriptions.Item>
)}
</Descriptions.Item>
)}
{metaData?.asrSpecificMetaData && metaData?.asrSpecificMetaData?.interceptionStage && (
<Descriptions.Item label="Interception Stage">
{metaData?.asrSpecificMetaData.interceptionStage}
</Descriptions.Item>
)}

{/* -------------------------------------------------------------------------------------------- */}

<Descriptions.Item label="Created By" className="notifications__wider-tooltip">
<Tooltip
getPopupContainer={(triggerNode) => triggerNode.parentNode}
title={
<>
<div>{`User ID : ${selectedNotification?.createdBy.id}`}</div>
<div>{`Email : ${selectedNotification?.createdBy.email}`}</div>
</>
}>
<span className="notificationDetails__value-with-tooltip">{`${selectedNotification.createdBy.name}`}</span>{' '}
on{' '}
</Tooltip>
{formatDateTime(selectedNotification.createdAt)}{' '}
</Descriptions.Item>

{selectedNotification.updatedBy && (
<Descriptions.Item label="Updated By " className="notifications__wider-tooltip">
<Tooltip
getPopupContainer={(triggerNode) => triggerNode.parentNode}
title={
<>
<div>{`User ID: ${selectedNotification?.updatedBy?.id}`}</div>
<div>{`Email: ${selectedNotification?.updatedBy?.email}`}</div>
</>
}>
<span className="notificationDetails__value-with-tooltip">{`${selectedNotification.updatedBy.name}`}</span>{' '}
on{' '}
</Tooltip>
{formatDateTime(selectedNotification.updatedAt)}{' '}
</Descriptions.Item>
)}
{/* -------------------------------------------------------------------------------------------- */}

{selectedNotification.resolutionDateTime && (
<Descriptions.Item label="Resolved By " className="notifications__wider-tooltip">
<Descriptions.Item label="Created By" className="notifications__wider-tooltip">
<Tooltip
getPopupContainer={(triggerNode) => triggerNode.parentNode}
title={
<>
<div>{`User ID: ${selectedNotification?.updatedBy?.id}`}</div>
<div>{`Email: ${selectedNotification?.updatedBy?.email}`}</div>
<div>{`User ID : ${selectedNotification?.createdBy.id}`}</div>
<div>{`Email : ${selectedNotification?.createdBy.email}`}</div>
</>
}>
<span className="notificationDetails__value-with-tooltip">{`${selectedNotification.updatedBy.name}`}</span>{' '}
<span className="notificationDetails__value-with-tooltip">{`${selectedNotification.createdBy.name}`}</span>{' '}
on{' '}
</Tooltip>
{formatDateTime(selectedNotification.resolutionDateTime)}{' '}
{formatDateTime(selectedNotification.createdAt)}{' '}
</Descriptions.Item>
)}

<Descriptions.Item label="Comment">{selectedNotification.comment}</Descriptions.Item>
{selectedNotification.notifiedAt && (
<Descriptions.Item label="Notified on">{formatDateTime(selectedNotification.notifiedAt)}</Descriptions.Item>
{selectedNotification.updatedBy && (
<Descriptions.Item label="Updated By " className="notifications__wider-tooltip">
<Tooltip
getPopupContainer={(triggerNode) => triggerNode.parentNode}
title={
<>
<div>{`User ID: ${selectedNotification?.updatedBy?.id}`}</div>
<div>{`Email: ${selectedNotification?.updatedBy?.email}`}</div>
</>
}>
<span className="notificationDetails__value-with-tooltip">{`${selectedNotification.updatedBy.name}`}</span>{' '}
on{' '}
</Tooltip>
{formatDateTime(selectedNotification.updatedAt)}{' '}
</Descriptions.Item>
)}

{selectedNotification.resolutionDateTime && (
<Descriptions.Item label="Resolved By " className="notifications__wider-tooltip">
<Tooltip
getPopupContainer={(triggerNode) => triggerNode.parentNode}
title={
<>
<div>{`User ID: ${selectedNotification?.updatedBy?.id}`}</div>
<div>{`Email: ${selectedNotification?.updatedBy?.email}`}</div>
</>
}>
<span className="notificationDetails__value-with-tooltip">{`${selectedNotification.updatedBy.name}`}</span>{' '}
on{' '}
</Tooltip>
{formatDateTime(selectedNotification.resolutionDateTime)}{' '}
</Descriptions.Item>
)}

{selectedNotification.comment && (
<Descriptions.Item label="Comment">{selectedNotification.comment}</Descriptions.Item>
)}
{selectedNotification.notifiedAt && (
<Descriptions.Item label="Notified on">{formatDateTime(selectedNotification.notifiedAt)}</Descriptions.Item>
)}
</Descriptions>
</Tabs.TabPane>
<Tabs.TabPane tab="Details" key="1">
{fetchingNotificationDetails ? (
<div className="notificationDetails_notAvailable">Loading...</div>
) : notificationHtmlCode ? (
<div className="notificationDetails" dangerouslySetInnerHTML={{ __html: notificationHtmlCode }} />
) : (
<div className="notificationDetails_notAvailable">No details available</div>
)}
</Descriptions>
</>
</Tabs.TabPane>
</Tabs>
);
}

Expand Down
36 changes: 25 additions & 11 deletions ...t-reactjs/src/components/application/dashboard/notifications/NotificationDetailsModal.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// Packages
import React from 'react';
import { Modal, Button } from 'antd';
import { Modal, Button, Card } from 'antd';

// Local Imports
import NotificationDetails from './NotificationDetails';
Expand All @@ -13,7 +13,16 @@ function NotificationDetailsModal({
monitorings,
domains,
productCategories,
setSelectedNotificationsIds,
setDisplayUpdateModal,
}) {
// When Edit icon is clicked
const editNotification = (selectedNotification) => {
setDisplayNotificationDetailsModal(false);
setSelectedNotificationsIds([selectedNotification.id]);
setDisplayUpdateModal(true);
};

//Close Modal
const handleCancel = () => {
setDisplayNotificationDetailsModal(false);
Expand All @@ -27,17 +36,22 @@ function NotificationDetailsModal({
size="small"
width="800px"
maskClosable={false}
footer={
<Button size="small" type="primary" onClick={handleCancel}>
footer={[
<Button key="1" size="small" type="primary" onClick={() => editNotification(selectedNotification)}>
Edit
</Button>,
<Button key="2" size="small" type="primary" ghost onClick={handleCancel}>
Close
</Button>
}>
<NotificationDetails
selectedNotification={selectedNotification}
monitorings={monitorings}
domains={domains}
productCategories={productCategories}
/>
</Button>,
]}>
<Card size="small " style={{ marginTop: '20px', padding: '0px' }}>
<NotificationDetails
selectedNotification={selectedNotification}
monitorings={monitorings}
domains={domains}
productCategories={productCategories}
/>
</Card>
</Modal>
);
}
Expand Down
1 change: 1 addition & 0 deletions .../client-reactjs/src/components/application/dashboard/notifications/NotificationsTable.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,7 @@ function SentNotificationsTable({
const editNotification = (record) => {
setSelectedNotificationsIds([record.id]);
setDisplayUpdateModal(true);
setSelectedNotification(record);
};

// Delete notification
Expand Down
Loading
Loading