Skip to content

Commit

Permalink
Merge pull request #839 from hpcc-systems/yadhap/domain-level-severit…
Browse files Browse the repository at this point in the history 
…y-threshold-ui

Yadhap/domain level severity threshold UI
  • Loading branch information
@FancMa01
FancMa01 authored Aug 29, 2024
2 parents 59984ef + f109eaa commit 14772ec
Show file tree
Hide file tree
Showing 7 changed files with 315 additions and 394 deletions.
85 changes: 77 additions & 8 deletions Tombolo/client-reactjs/src/components/admin/Integrations/asr/DomainModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,16 @@
// Package imports
import React, { useEffect } from 'react';
import { useSelector } from 'react-redux';
import { Modal, Form, Input, Select, message } from 'antd';
import { Modal, Form, Input, Select, message, Row, Col } from 'antd';
import { isEmail } from 'validator';

//Local Imports
import { createNewDomain, getDomains, updateDomain } from './asr-integration-util.js';

// Constants
const { Option } = Select;
const severityThresholds = [0, 1, 2, 3];
const regions = ['UK', 'USA'];

const DomainModal = ({
domainModalOpen,
Expand All @@ -25,7 +28,13 @@ const DomainModal = ({
if (selectedDomain) {
let activityTypesIds = selectedDomain.activityTypes.map((d) => d.id);
activityTypesIds = activityTypesIds.filter((id) => id !== null);
form.setFieldsValue({ name: selectedDomain.name, monitoringTypeIds: activityTypesIds });
form.setFieldsValue({
name: selectedDomain.name,
region: selectedDomain.region,
severityThreshold: selectedDomain.severityThreshold,
monitoringTypeIds: activityTypesIds,
severityAlertRecipients: selectedDomain.severityAlertRecipients,
});
}
}, [selectedDomain]);

Expand Down Expand Up @@ -123,14 +132,74 @@ const DomainModal = ({
okText={selectedDomain ? 'Update' : 'Save'}
maskClosable={false}>
<Form form={form} layout="vertical">
<Row gutter={8}>
<Col span={10}>
<Form.Item
label="Domain"
name="name"
rules={[{ required: true, message: 'Please input the product name!' }, { max: 100 }]}>
<Input />
</Form.Item>
</Col>

<Col span={7}>
<Form.Item label="Region" name="region" rules={[{ required: true, message: 'Please Select a region' }]}>
<Select>
{regions.map((region) => (
<Option key={region} value={region}>
{region}
</Option>
))}
</Select>
</Form.Item>
</Col>

<Col span={7}>
<Form.Item
label="Severity Threshold"
rules={[{ required: true, message: 'Severity threshold is required' }]}
name="severityThreshold">
<Select>
{severityThresholds.map((severity) => (
<Option key={severity} value={severity}>
{severity}
</Option>
))}
</Select>
</Form.Item>
</Col>
</Row>

<Form.Item
label="Domain"
name="name"
rules={[{ required: true, message: 'Please input the product name!' }, { max: 100 }]}>
<Input placeholder="Product Name" />
label="Severity E-mail Recipients"
name="severityAlertRecipients"
required
rules={[
{
validator: (_, value) => {
if (!value || value.length === 0) {
return Promise.reject(new Error('Please add at least one email!'));
}
if (value.length > 20) {
return Promise.reject(new Error('Too many emails'));
}
if (!value.every((v) => isEmail(v))) {
return Promise.reject(new Error('One or more emails are invalid'));
}
return Promise.resolve();
},
},
]}>
<Select
mode="tags"
allowClear
placeholder="Enter a comma-delimited list of email addresses"
tokenSeparators={[',']}
/>
</Form.Item>
<Form.Item label="Activity Type" name="monitoringTypeIds" rules={[{ required: false }]}>
<Select placeholder="Select Activity Type" mode="multiple">

<Form.Item label="Activity Type(s)" name="monitoringTypeIds" rules={[{ required: false }]}>
<Select mode="multiple">
{monitoringTypes.map((type) => (
<Option key={type.id} value={type.id}>
{type.name}
Expand Down
27 changes: 25 additions & 2 deletions Tombolo/client-reactjs/src/components/admin/Integrations/asr/DomainsTab.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,34 @@ const DomainsTab = ({ domains, setSelectedDomain, setDomainModalOpen }) => {
{
title: 'Domain Name',
dataIndex: 'name',
width: '15%',
width: '11%',
},
{
title: 'Region',
dataIndex: 'region',
width: '4%',
},
{
title: 'Severity Threshold',
dataIndex: 'severityThreshold',
width: '9%',
},
{
title: 'Severity Alert Recipients',
dataIndex: 'severityAlertRecipients',
render: (recipients) => <>{recipients.map((r, i) => `${i < recipients.length - 1 ? r + ', ' : r}`)}</>,
width: '38%',
},
{
title: 'Activity Type',
dataIndex: 'activityTypes',
width: '30%',
render: (tags) => (
<>
{tags.map(
(tag, i) =>
tag.name && (
<Tag color="blue" key={i}>
<Tag color="blue" key={i} size="small">
{tag.name}
</Tag>
)
Expand Down Expand Up @@ -58,7 +75,10 @@ const DomainsTab = ({ domains, setSelectedDomain, setDomainModalOpen }) => {
domains.forEach((d) => {
domainAndActivityTypes.push({
name: d.name,
region: d.region,
id: d.id,
severityThreshold: d.severityThreshold,
severityAlertRecipients: d.severityAlertRecipients || [],
activityType: { id: d['monitoringTypes.id'], name: d['monitoringTypes.name'] },
});
});
Expand All @@ -75,6 +95,9 @@ const DomainsTab = ({ domains, setSelectedDomain, setDomainModalOpen }) => {
acc.push({
id: item.id,
name: item.name,
region: item.region,
severityThreshold: item.severityThreshold,
severityAlertRecipients: item.severityAlertRecipients || [],
activityTypes: [item.activityType],
});
}
Expand Down
130 changes: 1 addition & 129 deletions Tombolo/client-reactjs/src/components/admin/Integrations/asr/GeneralSettingsEditModal.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,11 @@
// Package Imports
import React, { useEffect, useState } from 'react';
import { Modal, Form, Checkbox, Select, Card, message, Row, Col, Input } from 'antd';
import { Modal, Form, Checkbox, Select, Card, message } from 'antd';
import { isEmail } from 'validator';

//Local Imports
const { updateIntegrationSettings } = require('../integration-utils.js');

// Constants
const { Option } = Select;
const severityLevels = [
{ value: '0', label: 'All Levels (0 and above)' },
{ value: '1', label: '1 and above' },
{ value: '2', label: '2 and above' },
{ value: '3', label: 'Only 3' },
];

function GeneralSettingsEditModal({
displayGeneralSettingsEditModal,
setDisplayGeneralSettingsEditModal,
Expand All @@ -24,44 +15,27 @@ function GeneralSettingsEditModal({
}) {
//Local State
const [displayRecipients, setDisplayRecipients] = useState({
severity3Alerts: false,
megaPhoneAlerts: false,
nocAlerts: false,
});

// Hooks
const [form] = Form.useForm();

// Effects
useEffect(() => {
const severity3AlertsActive = integrationDetails?.appSpecificIntegrationMetaData?.severity3Alerts?.active;
const megaPhoneAlertsActive = integrationDetails?.appSpecificIntegrationMetaData?.megaPhoneAlerts?.active;
const nocAlertsActive = integrationDetails?.appSpecificIntegrationMetaData?.nocAlerts?.active;
const severityLevelForNocAlerts =
integrationDetails?.appSpecificIntegrationMetaData?.nocAlerts?.severityLevelForNocAlerts;

const severity3EmailContacts =
integrationDetails?.appSpecificIntegrationMetaData?.severity3Alerts?.emailContacts || [];
const megaphoneEmailContacts =
integrationDetails?.appSpecificIntegrationMetaData?.megaPhoneAlerts?.emailContacts || [];
const megaPhoneTeamsContacts =
integrationDetails?.appSpecificIntegrationMetaData?.megaPhoneAlerts?.teamsChannel || [];
const nocEmailContacts = integrationDetails?.appSpecificIntegrationMetaData?.nocAlerts?.emailContacts || [];

// Set display recipients
setDisplayRecipients({
severity3Alerts: severity3AlertsActive,
megaPhoneAlerts: megaPhoneAlertsActive,
nocAlerts: nocAlertsActive,
});

// Populate form fields
form.setFieldsValue({
severity3AlertsActive,
severity3EmailContacts,
nocAlertsActive,
nocEmailContacts: nocEmailContacts[0],
severityLevelForNocAlerts,
megaPhoneAlertsActive,
megaphoneEmailContacts,
megaPhoneTeamsContacts,
Expand All @@ -74,21 +48,11 @@ function GeneralSettingsEditModal({
setDisplayGeneralSettingsEditModal(false);
};

// Handle severity3AlertsActive checkbox change
const handleSeverity3AlertsActiveChange = (e) => {
setDisplayRecipients({ ...displayRecipients, severity3Alerts: e.target.checked });
};

// Handle megaPhoneAlertsActive checkbox change
const handleMegaPhoneAlertsActiveChange = (e) => {
setDisplayRecipients({ ...displayRecipients, megaPhoneAlerts: e.target.checked });
};

// When activate noc alerts checkbox is changed
const handleNocAlertsActiveChange = (e) => {
setDisplayRecipients({ ...displayRecipients, nocAlerts: e.target.checked });
};

// Handle form submission
const handleFormSubmit = async () => {
// If error return
Expand All @@ -101,20 +65,11 @@ function GeneralSettingsEditModal({
// Construct payload
const payload = {
integrationSettings: {
severity3Alerts: {
active: form.getFieldValue('severity3AlertsActive'),
emailContacts: form.getFieldValue('severity3EmailContacts'),
},
megaPhoneAlerts: {
active: form.getFieldValue('megaPhoneAlertsActive'),
emailContacts: form.getFieldValue('megaphoneEmailContacts'),
teamsChannel: form.getFieldValue('megaPhoneTeamsContacts'),
},
nocAlerts: {
active: form.getFieldValue('nocAlertsActive'),
severityLevelForNocAlerts: form.getFieldValue('severityLevelForNocAlerts'),
emailContacts: [form.getFieldValue('nocEmailContacts')],
},
},
};

Expand Down Expand Up @@ -156,43 +111,6 @@ function GeneralSettingsEditModal({
cancelButtonProps={{ type: 'primary', ghost: true }}>
<Card size="small">
<Form layout="vertical" form={form}>
<Form.Item name="severity3AlertsActive" valuePropName="checked">
<Checkbox onChange={handleSeverity3AlertsActiveChange}>Activate Severity-3 alerts</Checkbox>
</Form.Item>
{displayRecipients.severity3Alerts && (
<Form.Item
required
name="severity3EmailContacts"
label="Severity 3 Notification Emails"
validateTrigger={['onChange', 'onBlur']}
rules={[
{
validator: (_, value) => {
if (!value || value.length === 0) {
return Promise.reject(new Error('E-mail is required!'));
}
if (value.length > 20) {
return Promise.reject(new Error('Too many emails'));
}
if (!value.every((v) => isEmail(v))) {
return Promise.reject(new Error('One or more emails are invalid'));
}
if (!value.every((v) => isEmail(v) && v.length <= 254)) {
return Promise.reject(new Error('One or more exceed the maximum length'));
}
return Promise.resolve();
},
},
]}>
<Select
mode="tags"
allowClear
placeholder="Enter a comma-delimited list of email addresses"
tokenSeparators={[',']}
/>
</Form.Item>
)}

<Form.Item name="megaPhoneAlertsActive" valuePropName="checked">
<Checkbox onChange={handleMegaPhoneAlertsActiveChange}>Activate Megaphone alerts</Checkbox>
</Form.Item>
Expand Down Expand Up @@ -241,52 +159,6 @@ function GeneralSettingsEditModal({
</Form.Item>
</>
)}

<Form.Item name="nocAlertsActive" valuePropName="checked">
<Checkbox onChange={handleNocAlertsActiveChange}>Activate NOC alerts</Checkbox>
</Form.Item>

{displayRecipients.nocAlerts && (
<Row gutter={12}>
<Col span={12}>
<Form.Item
name="severityLevelForNocAlerts"
label="Severity level for NOC alerts"
required
rules={[{ required: true, message: 'Severity level is required' }]}>
<Select allowClear={true}>
{severityLevels.map((level) => (
<Option key={level.value} value={level.value}>
{level.label}
</Option>
))}
</Select>
</Form.Item>
</Col>
<Col span={12}>
<Form.Item
required
name="nocEmailContacts"
label="NOC Notification Email"
validateTrigger={['onBlur']}
rules={[
{ required: true, message: 'Email is required' },
{
validator: (_, value) => {
if (value && !isEmail(value)) {
return Promise.reject(new Error('Invalid email'));
} else if (value.length > 255) {
return Promise.reject(new Error('Email provided exceeds the maximum length'));
}
return Promise.resolve();
},
},
]}>
<Input allowClear placeholder="Enter NOC email address" tokenSeparators={[',']} />
</Form.Item>
</Col>
</Row>
)}
</Form>
</Card>
</Modal>
Expand Down
Loading

0 comments on commit 14772ec

Please sign in to comment.