Skip to content

Commit

Permalink
[PLAT-2074] Alert configuration active status in page view + activate…
Browse files Browse the repository at this point in the history 
…/deactivate from actions + sorting fixes

Summary:
Need to show if alert is enabled or not in the alert configuration page view.
Also, need an ability to activate/deactivate alerts from actions menu.
With that - added ability to sort by any column in page view + fixed initial sorting.

Test Plan:
Open alert configuration page view.
Sort by all fields, make sure sorting works as expected. Initially should have sorting by name.
Activate/deactivate alert from actions menu.
Activate/deactivate alert from edit view - make sure initial value is correct for "Active" field.

Reviewers: kkannan

Reviewed By: kkannan

Subscribers: jenkins-bot, yugaware

Differential Revision: https://phabricator.dev.yugabyte.com/D13585
  • Loading branch information
@anmalysh-yb
anmalysh-yb committed Oct 25, 2021
1 parent 7df5274 commit b314232
Show file tree
Hide file tree
Showing 2 changed files with 121 additions and 12 deletions.
131 changes: 120 additions & 11 deletions managed/ui/src/components/alerts/AlertConfiguration/AlertsList.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,6 @@ const header = (
const payload = {
uuids: [],
name: null,
active: true,
targetUuid: null,
routeUuid: null
};
Expand All @@ -92,18 +91,19 @@ export const AlertsList = (props) => {
onCreateAlert,
showDeleteModal,
setInitialValues,
universes
universes,
updateAlertConfig
} = props;
const [options, setOptions] = useState({
noDataText: 'Loading...',
sortName: 'createTime',
sortOrder: 'desc'
defaultSortName: 'name',
defaultSortOrder: 'asc'
});

const onInit = () => {
alertConfigs(payload).then((res) => {
setAlertList(res);
setOptions({ noDataText: 'There is no data to display ' });
setOptions({ ...options, noDataText: 'There is no data to display ' });
});

alertDestinations().then((res) => {
Expand All @@ -114,6 +114,15 @@ export const AlertsList = (props) => {

useEffect(onInit, []);

const formatName = (cell, row) => {
if (!row.active) {
return (
<span className="text-red text-regular">{row.name} (Inactive)</span>
);
}
return row.name
};

/**
* This method is used to congifure the destinationUUID with its repsective
* destination name.
Expand Down Expand Up @@ -147,7 +156,8 @@ export const AlertsList = (props) => {
*/
const formatThresholds = (cell, row) => {
return Object.keys(row.thresholds)
.map((threshold) => threshold)
.map((severity) => severity)
.sort()
.join(', ');
};

Expand All @@ -157,7 +167,7 @@ export const AlertsList = (props) => {
* @param {string} cell Not in-use.
* @param {object} row Respective row.
*/
const formatcreatedTime = (cell, row) => {
const formatCreatedTime = (cell, row) => {
return moment(row.createTime).format('MM/DD/yyyy');
};

Expand Down Expand Up @@ -221,6 +231,14 @@ export const AlertsList = (props) => {
onCreateAlert(true);
};

const onToggleActive = (row) => {
const updatedAlertConfig = { ...row, active: !row.active }
updateAlertConfig(updatedAlertConfig, row.uuid).then(() => {
alertConfigs(payload).then((res) => {
setAlertList(res);
});
});
};
/**
* This method will help us to delete the respective row record.
*
Expand All @@ -234,13 +252,14 @@ export const AlertsList = (props) => {
});
};

const formatAlertDestinationName = (cell) => {
const formatAlertTargets = (cell) => {
if (cell.all) return 'ALL';
const targetUniverse = cell.uuids
.map((uuid) => {
return universes.data.find((destination) => destination.universeUUID === uuid);
})
.filter(Boolean); //filtering undefined, if the universe is already deleted
.filter(Boolean) //filtering undefined, if the universe is already deleted
.sort();

return (
<span>
Expand All @@ -251,6 +270,71 @@ export const AlertsList = (props) => {
);
};

const targetSortFunc = (a, b, order) => {
const targetA = getTargetString(a.target)
const targetB = getTargetString(b.target)
if (order === 'desc') {
return targetB.localeCompare(targetA);
} else {
return targetA.localeCompare(targetB);
}
}

const getTargetString = (target) => {
if (target.all) return 'ALL';
return target.uuids
.map((uuid) => {
return universes.data.find((destination) => destination.universeUUID === uuid);
})
.filter(Boolean) //filtering undefined, if the universe is already deleted
.sort()
.join();
}

const thresholdSortFunc = (a, b, order) => {
const severitiesA = getSeveritiesString(a.thresholds)
const severitiesB = getSeveritiesString(b.thresholds)
if (order === 'desc') {
return severitiesB.localeCompare(severitiesA);
} else {
return severitiesA.localeCompare(severitiesB);
}
}

const getSeveritiesString = (thresholds) => {
return Object.keys(thresholds)
.map((severity) => severity)
.sort()
.join();
}

const destinationsSortFunc = (a, b, order) => {
const destinationA = getDestinationsString(a)
const destinationB = getDestinationsString(b)
if (order === 'desc') {
return destinationB.localeCompare(destinationA);
} else {
return destinationA.localeCompare(destinationB);
}
}

const getDestinationsString = (config) => {
if (config.defaultDestination) {
return "Use Default"
}
const destination = alertDestinationList
.map((destination) => {
return destination.uuid === config.destinationUUID ? destination.name : null;
})
.filter((res) => res !== null)
.join();

if (destination) {
return destination;
}
return "No destination"
}

// This method will handle all the required actions for the particular row.
const formatConfigActions = (cell, row) => {
return (
Expand All @@ -270,6 +354,22 @@ export const AlertsList = (props) => {
<i className="fa fa-pencil"></i> Edit Alert
</MenuItem>

{!row.active ? (<MenuItem
onClick={() => {
onToggleActive(row);
}}
>
<i className="fa fa-toggle-on"></i> Activate
</MenuItem>) : null}

{row.active ? (<MenuItem
onClick={() => {
onToggleActive(row);
}}
>
<i className="fa fa-toggle-off"></i> Deactivate
</MenuItem>) : null}

<MenuItem onClick={() => showDeleteModal(row?.uuid)}>
<i className="fa fa-trash"></i> Delete Alert
</MenuItem>
Expand Down Expand Up @@ -312,7 +412,9 @@ export const AlertsList = (props) => {
<TableHeaderColumn dataField="uuid" isKey={true} hidden={true} />
<TableHeaderColumn
dataField="name"
dataSort
columnClassName="no-border name-column"
dataFormat={formatName}
className="no-border"
>
Name
Expand All @@ -327,14 +429,18 @@ export const AlertsList = (props) => {
</TableHeaderColumn>
<TableHeaderColumn
dataField="target"
dataSort
sortFunc={targetSortFunc}
columnClassName="no-border name-column"
className="no-border"
dataFormat={formatAlertDestinationName}
dataFormat={formatAlertTargets}
>
Target Universes
</TableHeaderColumn>
<TableHeaderColumn
dataField="thresholds"
dataSort
sortFunc={thresholdSortFunc}
dataFormat={formatThresholds}
columnClassName="no-border name-column"
className="no-border"
Expand All @@ -343,6 +449,8 @@ export const AlertsList = (props) => {
</TableHeaderColumn>
<TableHeaderColumn
dataField="destinationUUID"
dataSort
sortFunc={destinationsSortFunc}
dataFormat={formatRoutes}
columnClassName="no-border name-column"
className="no-border"
Expand All @@ -351,8 +459,8 @@ export const AlertsList = (props) => {
</TableHeaderColumn>
<TableHeaderColumn
dataField="createTime"
dataFormat={formatcreatedTime}
dataSort
dataFormat={formatCreatedTime}
width="120px"
columnClassName="no-border name-column"
className="no-border"
Expand All @@ -361,6 +469,7 @@ export const AlertsList = (props) => {
</TableHeaderColumn>
<TableHeaderColumn
dataField="template"
dataSort
columnClassName="no-border name-column"
className="no-border"
>
Expand Down
2 changes: 1 addition & 1 deletion managed/ui/src/components/alerts/AlertConfiguration/CreateAlert.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -128,6 +128,7 @@ const CreateAlert = (props) => {
props.updateField('alertConfigForm', 'ALERT_METRICS_DURATION', metric.durationSec);
props.updateField('alertConfigForm', 'ALERT_CONFIGURATION_NAME', metric.name);
props.updateField('alertConfigForm', 'ALERT_CONFIGURATION_DESCRIPTION', metric.description);
props.updateField('alertConfigForm', 'ALERT_STATUS', true);
};

/**
Expand Down Expand Up @@ -283,7 +284,6 @@ const CreateAlert = (props) => {
name="ALERT_STATUS"
component={YBToggle}
onChange={(event) => props.updateField('alertConfigForm', 'ALERT_STATUS', event?.target?.checked)}
defaultChecked={true}
label="Active"
/>
</Col>
Expand Down

0 comments on commit b314232

Please sign in to comment.