Skip to content

Commit

Permalink
Merged dev
Browse files Browse the repository at this point in the history
  • Loading branch information
@ydahal1
ydahal1 committed Nov 21, 2024
2 parents 0f12961 + 0bd0abf commit a910a56
Show file tree
Hide file tree
Showing 13 changed files with 253 additions and 196 deletions.
4 changes: 2 additions & 2 deletions ...t-reactjs/src/components/application/dashboard/notifications/NotificationTableFilters.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -79,8 +79,8 @@ function NotificationTableFilters({ setFilters, sentNotifications, monitorings,
<div className="notifications__filter-label">Origin</div>
<Form.Item name="origin">
<Select placeholder="Origin" allowClear>
{originOptions.map((o) => (
<Option key={o} value={o}>
{originOptions.map((o, i) => (
<Option key={i} value={o}>
{o}
</Option>
))}
Expand Down
116 changes: 67 additions & 49 deletions Tombolo/client-reactjs/src/components/application/jobMonitoring/ApproveRejectModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React, { useState, useEffect } from 'react';
import { Modal, Form, Input, Button, message, Tooltip } from 'antd';
import { Modal, Form, Input, Button, message, Tooltip, Select, Checkbox } from 'antd';

import { authHeader } from '../../common/AuthHeader.js';
import { Constants } from '../../common/Constants';
Expand All @@ -12,10 +12,12 @@ const ApproveRejectModal = ({
user,
selectedMonitoring,
setJobMonitorings,
selectedRows,
}) => {
const [form] = Form.useForm();
const [savingEvaluation, setSavingEvaluation] = useState(false);
const [monitoringEvaluated, setMonitoringEvaluated] = useState(false);
const [isActive, setIsActive] = useState(true);

//When component mounts check if monitoring is already evaluated
useEffect(() => {
Expand All @@ -28,15 +30,31 @@ const ApproveRejectModal = ({
}
}, [selectedMonitoring]);

// Handle action change
const handleActionChange = (value) => {
if (value === 'Rejected') {
setIsActive(false);
} else {
setIsActive(true);
}
};

// Monitor changes to the approvalStatus field
useEffect(() => {
form.setFieldsValue({
isActive: form.getFieldValue('approvalStatus') !== 'Rejected',
});
}, [form.getFieldValue('approvalStatus')]);

// When cancel button is clicked
const handleCancel = () => {
setDisplayAddRejectModal(false);
form.resetFields();
setSelectedMonitoring(null);
};

// When reject or accepted is clicked
const handleSubmit = async ({ action }) => {
// When save button is clicked
const handleSubmit = async () => {
setSavingEvaluation(true);
let fromErr = false;
try {
Expand All @@ -52,18 +70,23 @@ const ApproveRejectModal = ({

try {
const formData = form.getFieldsValue();
formData.id = id;
formData.approvalStatus = action;
if (selectedRows.length > 0) {
formData.ids = selectedRows.map((row) => row.id);
} else {
formData.ids = [id];
}
formData.isActive = formData.isActive || false;
const approverObj = {
id: user.id,
name: `${user.firstName} ${user.lastName}`,
email: user.email,
};
if (typeof user === 'object' && user !== null) {
formData.approvedBy = JSON.stringify({
id: user.id,
name: `${user.firstName} ${user.lastName}`,
email: user.email,
});
formData.approvedBy = JSON.stringify(approverObj);
}
const payload = {
method: 'PATCH',
header: authHeader(),
headers: authHeader(),
body: JSON.stringify(formData),
};

Expand All @@ -77,24 +100,20 @@ const ApproveRejectModal = ({
setSelectedMonitoring(null);
setDisplayAddRejectModal(false);
setJobMonitorings((prev) => {
const index = prev.findIndex((item) => item.id === id);
let approvedBy = prev[index].approvedBy;
if (typeof user === 'object' && user !== null) {
approvedBy = JSON.stringify({
id: user.id,
name: `${user.firstName} ${user.lastName}`,
email: user.email,
});
}
prev[index] = {
...prev[index],
approvalStatus: action,
isActive: action === 'rejected' ? false : prev[index].isActive,
approvedBy,
approvedAt: new Date(),
approverComment: formData.approverComment,
};
return [...prev];
const updatedJobMonitorings = prev.map((item) => {
if (formData.ids.includes(item.id)) {
return {
...item,
approvalStatus: formData.approvalStatus,
isActive: formData.approvalStatus === 'Rejected' ? false : formData.isActive,
approvedBy: approverObj,
approvedAt: new Date(),
approverComment: formData.approverComment,
};
}
return item;
});
return updatedJobMonitorings;
});
}
} catch (error) {
Expand All @@ -108,26 +127,16 @@ const ApproveRejectModal = ({
<Modal
open={displayAddRejectModal}
onCancel={handleCancel}
// closable={false}
maskClosable={false}
width={600}
footer={
!monitoringEvaluated
? [
<Button
key="reject"
type="primary"
danger
onClick={() => handleSubmit({ action: 'Rejected' })}
disabled={savingEvaluation}>
Reject
<Button key="cancel" onClick={handleCancel}>
Cancel
</Button>,
<Button
key="accepted"
type="primary"
onClick={() => handleSubmit({ action: 'Approved' })}
disabled={savingEvaluation}>
Approve
<Button key="save" type="primary" onClick={handleSubmit} disabled={savingEvaluation}>
Save
</Button>,
]
: [
Expand All @@ -144,18 +153,24 @@ const ApproveRejectModal = ({
<div style={{ marginTop: '15px' }}>
This monitoring was{' '}
<span style={{ color: 'var(--primary)', fontWeight: 'bold' }}>{selectedMonitoring?.approvalStatus}</span> by{' '}
<Tooltip
title={
<div>{selectedMonitoring?.approvedBy ? JSON.parse(selectedMonitoring?.approvedBy)?.email : ''}</div>
}>
<Tooltip title={<div>{selectedMonitoring?.approvedBy ? selectedMonitoring?.approvedBy?.email : ''}</div>}>
<span style={{ color: 'var(--primary)', fontWeight: 'bold' }}>
{selectedMonitoring?.approvedBy ? JSON.parse(selectedMonitoring?.approvedBy)?.name : ''}{' '}
{selectedMonitoring?.approvedBy ? selectedMonitoring?.approvedBy?.name : ''}{' '}
</span>
</Tooltip>
on {new Date(selectedMonitoring?.approvedAt).toLocaleDateString('en-US', Constants.DATE_FORMAT_OPTIONS)}.
</div>
) : (
<Form form={form} layout="vertical">
<Form form={form} layout="vertical" initialValues={{ isActive: true }}>
<Form.Item
label="Action"
name="approvalStatus"
rules={[{ required: true, message: 'Please select an action' }]}>
<Select placeholder="Select an action" onChange={handleActionChange}>
<Select.Option value="Approved">Approve</Select.Option>
<Select.Option value="Rejected">Reject</Select.Option>
</Select>
</Form.Item>
<Form.Item
label="Comments"
name="approverComment"
Expand All @@ -166,6 +181,9 @@ const ApproveRejectModal = ({
]}>
<Input.TextArea rows={3} maxLength={200} showCount placeholder="Comments" />
</Form.Item>
<Form.Item name="isActive" valuePropName={isActive ? 'checked' : 'unchecked'}>
<Checkbox disabled={!isActive}>Start monitoring</Checkbox>
</Form.Item>
</Form>
)}
</div>
Expand Down
6 changes: 6 additions & 0 deletions ...olo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringActionButton.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const JobMonitoringActionButton = ({
setBulkEditModalVisibility,
setFiltersVisible,
filtersVisible,
setDisplayAddRejectModal,
}) => {
const [bulkStartPauseForm] = Form.useForm(); // Form Instance

Expand Down Expand Up @@ -51,6 +52,8 @@ const JobMonitoringActionButton = ({
setBulkEditModalVisibility(true);
} else if (key === '4') {
changeFilterVisibility();
} else if (key === '5') {
setDisplayAddRejectModal(true);
}
};

Expand Down Expand Up @@ -99,6 +102,9 @@ const JobMonitoringActionButton = ({
<a>Bulk start/pause</a>
</Popover>
</Menu.Item>
<Menu.Item key="5" disabled={selectedRows.length < 2}>
Bulk Approve / Reject
</Menu.Item>
<Menu.Item key="3" disabled={selectedRows.length < 2}>
<Popconfirm
title={`Are you sure you want to delete selected ${selectedRows.length} monitorings?. `}
Expand Down
151 changes: 76 additions & 75 deletions Tombolo/client-reactjs/src/components/application/jobMonitoring/JobMonitoringTable.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,85 +101,86 @@ const JobMonitoringTable = ({
{
title: 'Actions',
key: 'actions',
render: (_, record) => (
<>
<Tooltip title="View Details">
<EyeOutlined
style={{ color: 'var(--primary)', marginRight: 15 }}
onClick={() => viewMonitoringDetails(record)}
/>
</Tooltip>
<Tooltip title="Edit">
<EditOutlined
style={{ color: 'var(--primary)', marginRight: 15 }}
onClick={() => editJobMonitoring(record)}
/>
</Tooltip>
render: (_, record) =>
selectedRows.length > 1 ? null : (
<>
<Tooltip title="View Details">
<EyeOutlined
style={{ color: 'var(--primary)', marginRight: 15 }}
onClick={() => viewMonitoringDetails(record)}
/>
</Tooltip>
<Tooltip title="Edit">
<EditOutlined
style={{ color: 'var(--primary)', marginRight: 15 }}
onClick={() => editJobMonitoring(record)}
/>
</Tooltip>

<Popover
placement="bottom"
content={
<div
style={{ display: 'flex', flexDirection: 'column', color: 'var(--primary)', cursor: 'pointer' }}
className="jobMonitoringTable__hidden_actions">
<div title="Approve" onClick={() => evaluateMonitoring(record)}>
<CheckCircleFilled style={{ color: approveButtonColor(record.approvalStatus), marginRight: 15 }} />{' '}
Approve / Reject
</div>

{record.isActive ? (
<div onClick={() => toggleMonitoringStatus(record)}>
<PauseCircleOutlined
disabled={record.approvalStatus !== 'Approved'}
style={{ color: 'var(--primary)', marginRight: 15 }}
/>
Pause
</div>
) : (
<div onClick={() => toggleMonitoringStatus(record)}>
<PlayCircleOutlined
disabled={record.approvalStatus !== 'Approved'}
style={{ color: 'var(--primary)', marginRight: 15 }}
/>
Start
<Popover
placement="bottom"
content={
<div
style={{ display: 'flex', flexDirection: 'column', color: 'var(--primary)', cursor: 'pointer' }}
className="jobMonitoringTable__hidden_actions">
<div title="Approve" onClick={() => evaluateMonitoring(record)}>
<CheckCircleFilled style={{ color: approveButtonColor(record.approvalStatus), marginRight: 15 }} />{' '}
Approve / Reject
</div>
)}

<Popconfirm
title={
<>
<div style={{ fontWeight: 'bold' }}>{`Delete ${record.monitoringName}`} </div>
<div style={{ maxWidth: 400 }}>
This action will delete all related data including notifications generated by this monitoring.
If you would like to keep the data, you can deactivate the monitoring instead.
</div>
</>
}
onConfirm={() => handleDeleteJobMonitoring({ id: record.id, jobMonitorings, setJobMonitorings })}
okText="Continue"
okButtonProps={{ danger: true }}
cancelText="Close"
cancelButtonProps={{ type: 'primary', ghost: true }}
style={{ width: '500px !important' }}>
<DeleteOutlined style={{ marginRight: 15 }} />
Delete
</Popconfirm>
<Link to={`/${applicationId}/dashboard/notifications?monitoringId=124&monitoringType=jobMonitoring`}>
<BellOutlined style={{ marginRight: 15 }} />
Notifications
</Link>
<div style={{ color: 'var(--primary)' }} onClick={() => duplicateJobMonitoring(record)}>
<CopyOutlined style={{ marginRight: 15 }} />
Duplicate
{record.isActive ? (
<div onClick={() => toggleMonitoringStatus(record)}>
<PauseCircleOutlined
disabled={record.approvalStatus !== 'Approved'}
style={{ color: 'var(--primary)', marginRight: 15 }}
/>
Pause
</div>
) : (
<div onClick={() => toggleMonitoringStatus(record)}>
<PlayCircleOutlined
disabled={record.approvalStatus !== 'Approved'}
style={{ color: 'var(--primary)', marginRight: 15 }}
/>
Start
</div>
)}

<Popconfirm
title={
<>
<div style={{ fontWeight: 'bold' }}>{`Delete ${record.monitoringName}`} </div>
<div style={{ maxWidth: 400 }}>
This action will delete all related data including notifications generated by this monitoring.
If you would like to keep the data, you can deactivate the monitoring instead.
</div>
</>
}
onConfirm={() => handleDeleteJobMonitoring({ id: record.id, jobMonitorings, setJobMonitorings })}
okText="Continue"
okButtonProps={{ danger: true }}
cancelText="Close"
cancelButtonProps={{ type: 'primary', ghost: true }}
style={{ width: '500px !important' }}>
<DeleteOutlined style={{ marginRight: 15 }} />
Delete
</Popconfirm>
<Link to={`/${applicationId}/dashboard/notifications?monitoringId=124&monitoringType=jobMonitoring`}>
<BellOutlined style={{ marginRight: 15 }} />
Notifications
</Link>
<div style={{ color: 'var(--primary)' }} onClick={() => duplicateJobMonitoring(record)}>
<CopyOutlined style={{ marginRight: 15 }} />
Duplicate
</div>
</div>
</div>
}>
<span style={{ color: 'var(--secondary)' }}>
More <DownOutlined style={{ fontSize: '10px' }} />
</span>
</Popover>
</>
),
}>
<span style={{ color: 'var(--secondary)' }}>
More <DownOutlined style={{ fontSize: '10px' }} />
</span>
</Popover>
</>
),
},
];

Expand Down
Loading

0 comments on commit a910a56

Please sign in to comment.