Commit 0f884393 authored by Andrew Hrdy's avatar Andrew Hrdy

Updated alerts to API v2.2 schema.

Closes #66
parent 8d7b1d5e
Pipeline #3778 passed with stage
in 1 minute and 47 seconds
This diff is collapsed.
...@@ -2,6 +2,8 @@ import React from 'react'; ...@@ -2,6 +2,8 @@ import React from 'react';
import classNames from 'classnames'; import classNames from 'classnames';
import {findLink} from '../utils/nameUtils'; import {findLink} from '../utils/nameUtils';
import Chip from 'material-ui/Chip'; import Chip from 'material-ui/Chip';
import Button from 'material-ui/Button';
import ArrowForwardIcon from 'material-ui-icons/ArrowForward';
const Alert = ({alert}) => { const Alert = ({alert}) => {
const getUrgencyClass = () => { const getUrgencyClass = () => {
...@@ -18,19 +20,33 @@ const Alert = ({alert}) => { ...@@ -18,19 +20,33 @@ const Alert = ({alert}) => {
} }
}; };
const getMessage = () => { const getBody = () => {
const links = findLink(alert.message); /*
API V2.2 removed the message field and replaced it with
subject and body. In order to ensure backwards compatability,
use the message field if it exists, otherwise use body.
TODO: Eventually, this check will be useless when older alerts
are phased out and should be removed to minimize complexity.
Alternatively, move this into the mapper once TypeScript is added.
*/
const body = alert.message ? alert.message : alert.body;
const links = findLink(body);
if (!links) { if (!links) {
return (<span className={'alert-message'}> return (
{alert.message} <span className={'alert-body'}>
</span>); {body}
</span>
);
} }
return ( return (
<span className={'alert-message'}> <span className={'alert-body'}>
{alert.message.substring(0, links.index)} {body.substring(0, links.index)}
<a href={links[0]} className={'alert-link'} target="_blank" rel="noopener noreferrer">{links[0]}</a> <a href={links[0]} className={'alert-link'} target="_blank" rel="noopener noreferrer">{links[0]}</a>
{alert.message.substring(links.index + links[0].length)} {body.substring(links.index + links[0].length)}
</span> </span>
); );
}; };
...@@ -39,8 +55,24 @@ const Alert = ({alert}) => { ...@@ -39,8 +55,24 @@ const Alert = ({alert}) => {
return ( return (
<div className={'alert'}> <div className={'alert'}>
{getMessage()} <div className={'alert-subject-container'}>
<Chip label={getChipLabel()} className={classNames('alert-urgency-chip', getUrgencyClass())}/> <h3 className={'alert-subject'}>{alert.subject}</h3>
<Chip label={getChipLabel()} className={classNames('alert-urgency-chip', getUrgencyClass())} />
</div>
{getBody()}
{
alert.url &&
<span className={'alert-url-container'}>
<Button size={'small'} href={alert.url} target="_blank" rel="noopener noreferrer" classes={{
root: 'alert-url-button-root'
}}>
More Information
<ArrowForwardIcon />
</Button>
</span>
}
</div> </div>
); );
}; };
......
...@@ -49,6 +49,7 @@ class AlertContainer extends React.Component { ...@@ -49,6 +49,7 @@ class AlertContainer extends React.Component {
render() { render() {
const {alerts} = this.props; const {alerts} = this.props;
const activeAlerts = alerts.filter(this.isAlertActive); const activeAlerts = alerts.filter(this.isAlertActive);
return ( return (
<div> <div>
<IconButton classes={{ <IconButton classes={{
......
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
padding: 8px 16px; padding: 8px 16px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; flex-direction: column;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 400; font-weight: 400;
font-family: "Roboto", "Helvetica", "Arial", sans-serif; font-family: "Roboto", "Helvetica", "Arial", sans-serif;
...@@ -16,10 +16,21 @@ ...@@ -16,10 +16,21 @@
} }
} }
.alert-message { .alert-subject-container {
display: flex; display: flex;
flex-wrap: wrap; justify-content: space-between;
margin-right: 10px; align-items: center;
width: 100%;
margin-bottom: 5px;
}
.alert-subject {
margin: 0;
}
.alert-body {
display: inline;
} }
.alert-urgency-chip { .alert-urgency-chip {
...@@ -29,6 +40,13 @@ ...@@ -29,6 +40,13 @@
color: white !important; color: white !important;
} }
.alert-url-container {
width: 100%;
}
.alert-url-button-root {
padding: 0 !important;
}
.alert-link { .alert-link {
color: #0645AD; color: #0645AD;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment