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.

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

WIP Alert page redesign #4081

Closed
wants to merge 42 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
42 commits
Select commit Hold shift + click to select a range
18a2b02
FIRST COMMIT
ranbena Aug 19, 2019
066edd7
Added email warning
ranbena Aug 19, 2019
239f96c
Fixed what I messed up
ranbena Aug 19, 2019
b62ad09
How did this get in here?
ranbena Aug 19, 2019
a90157a
Condition bgcolor was unnecessary
ranbena Aug 19, 2019
8367ad1
Added new capabilities to SelectItemsDialog
ranbena Aug 19, 2019
f940b95
Corrected destination icons
ranbena Aug 20, 2019
3576d3b
Updated hangouts destination icon
ranbena Aug 20, 2019
9111589
Fixed selected items padding
ranbena Aug 20, 2019
5e671a7
Added instructions helptrigger, new alert layout and loading indicator.
ranbena Aug 20, 2019
d6a4071
Small changes
ranbena Aug 20, 2019
518cbc4
Added showCount to SelectItemsDialog
ranbena Aug 20, 2019
e6fda38
Fixed lint errors, added query loading indication
ranbena Aug 20, 2019
ecc0863
Fixed UserProfile email warning, added helptrigger to warning.
ranbena Aug 20, 2019
7a45259
Handled arbitrary rearm values
ranbena Aug 21, 2019
138ee43
Changed query schedule notice
ranbena Aug 21, 2019
50ba271
Changed rearm texts
ranbena Aug 22, 2019
45090ed
Changed new alert flow
ranbena Aug 23, 2019
caa4aa7
Removed user email toggle if mail config missing
ranbena Aug 23, 2019
6659b15
Merge branch 'master' into alert-page
ranbena Aug 26, 2019
7fb1939
Made title editable
ranbena Aug 26, 2019
3b01c86
Added notification template feature
ranbena Aug 28, 2019
d3aab52
A few styling changes
ranbena Aug 31, 2019
006c0e9
A few styling changes
ranbena Aug 31, 2019
54d3593
Added monospace font fallback
ranbena Sep 1, 2019
5ed4713
Merge branch 'master' into alert-page
ranbena Sep 11, 2019
a6e03b5
Allow string criteria values
ranbena Sep 11, 2019
4468848
Moved delete button to danger zone
ranbena Sep 11, 2019
e0205b4
Render danger zone only if user editable
ranbena Sep 11, 2019
8195cbd
Updated alert validation messages
ranbena Sep 15, 2019
85c0aad
Merge branch 'master' into alert-page
ranbena Sep 15, 2019
263934c
Implemented view/edit modes
ranbena Sep 16, 2019
85d1264
Removed old alert files
ranbena Sep 16, 2019
6070018
Moved destinations file
ranbena Sep 16, 2019
f815959
Updated Alert name editing
ranbena Sep 16, 2019
6c1b2d7
Added edit / save / delete buttons
ranbena Sep 17, 2019
8074703
Cleanups
ranbena Sep 17, 2019
241de0e
Top row value now green when passing and red when triggering
ranbena Sep 17, 2019
c227410
Fixed rearm bug
ranbena Sep 17, 2019
ec230d9
Added cancel button and external link icon
ranbena Sep 18, 2019
1348773
Revert "Top row value now green when passing and red when triggering"
ranbena Sep 18, 2019
1d746da
Better create alert process
ranbena Sep 18, 2019
File filter...
Filter file types
Jump to…
Jump to file or symbol
Failed to load files and symbols.

Always

Just for now

Handled arbitrary rearm values

  • Loading branch information...
ranbena committed Aug 21, 2019
commit 7a4525957361189cc6f6aaa54b589e94fcfe1754
@@ -107,6 +107,17 @@
top: 10px;
}

.rearm {
> * {
vertical-align: top;
margin-right: 8px !important;

&.ant-select {
width: auto !important;
}
}
}

.alert-destinations {
ul {
list-style: none;
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import { react2angular } from 'react2angular';
import { head, includes, toString } from 'lodash';
@@ -187,6 +187,88 @@ AlertState.propTypes = {
state: PropTypes.string.isRequired,
};

const DURATIONS = [
['Second', 1],
['Minute', 60],
['Hour', 3600],
['Day', 86400],
['Week', 604800],
];

function RearmByDuration({ value, onChange }) {
const [durationIdx, setDurationIdx] = useState();
const [count, setCount] = useState();

useEffect(() => {
for (let i = DURATIONS.length - 1; i >= 0; i -= 1) {
const [, durValue] = DURATIONS[i];
if (value % durValue === 0) {
setDurationIdx(i);
setCount(value / durValue);
break;
}
}
}, []);

const onChangeCount = (newCount) => {
setCount(newCount);
onChange(newCount * DURATIONS[durationIdx][1]);
};

const onChangeIdx = (newIdx) => {
setDurationIdx(newIdx);
onChange(count * DURATIONS[newIdx][1]);
};

return (
<>
<InputNumber value={count} onChange={onChangeCount} min={1} precision={0} />
<Select value={durationIdx} onChange={onChangeIdx}>
{DURATIONS.map(([name], idx) => (
<Select.Option value={idx} key={name}>{name}{count !== 1 && 's'}</Select.Option>
))}
</Select>
</>
);
}
RearmByDuration.propTypes = {
onChange: PropTypes.func.isRequired,
value: PropTypes.number.isRequired,
};
function Rearm({ value, onChange }) {
const [selected, setSelected] = useState(value < 2 ? value : 2);
const _onChange = (newSelected) => {
setSelected(newSelected);
onChange(newSelected < 2 ? newSelected : 3600);
};
return (
<div className="rearm">
<Select className="alert-notification" optionLabelProp="label" defaultValue={selected || 0} dropdownMatchSelectWidth={false} onChange={_onChange}>
<Select.Option value={0} label="Just once">Just once</Select.Option>
<Select.Option value={1} label="Each time results are refreshed">
Each time results are refreshed
</Select.Option>
<Select.Option value={2} label="At most every">At most every ...</Select.Option>
</Select>
{selected === 2 && <RearmByDuration value={value} onChange={onChange} />}
</div>
);
}
Rearm.propTypes = {
onChange: PropTypes.func.isRequired,
value: PropTypes.number,
};
Rearm.defaultProps = {
value: 0,
};
function SetupInstructions() {
return (
<HelpTrigger className="alert-setup-instructions" type="ALERT_SETUP">
@@ -199,6 +281,7 @@ class AlertPage extends React.Component {
state = {
alert: null,
queryResult: null,
pendingRearm: null,
// editable: false,
}
@@ -209,7 +292,9 @@ class AlertPage extends React.Component {
options: {
op: 'greater than',
value: 1,
rearm: 0,
},
pendingRearm: 0,
}),
// editable: true,
});
@@ -218,6 +303,7 @@ class AlertPage extends React.Component {
AlertService.get({ id: alertId }).$promise.then((alert) => {
this.setState({
alert,
pendingRearm: alert.rearm,
// editable: currentUser.canEdit(alert),
});
this.onQuerySelected(alert.query);
@@ -249,11 +335,8 @@ class AlertPage extends React.Component {
}
}
onRearmChange = (rearm) => {
const { alert } = this.state;
this.setState({
alert: Object.assign(alert, { rearm }),
});
onRearmChange = (pendingRearm) => {
this.setState({ pendingRearm });
}
setAlertOptions = (obj) => {
@@ -265,20 +348,19 @@ class AlertPage extends React.Component {
}
save = () => {
const { alert } = this.state;
const { alert, pendingRearm } = this.state;
if (alert.name === undefined || alert.name === '') {
alert.name = this.getDefaultName();
}
if (!alert.rearm) {
alert.rearm = null;
}
alert.rearm = pendingRearm || null;
alert.$save().then(() => {
if (isNewAlert()) {
notification.success('Saved new Alert.');
navigateTo(`/alerts/${alert.id}`, true);
} else {
this.setState({ alert });
notification.success('Saved.');
}
}).catch(() => {
@@ -310,7 +392,7 @@ class AlertPage extends React.Component {
}
render() {
const { alert } = this.state;
const { alert, pendingRearm } = this.state;
if (!alert) {
return (
<div className="container alert-page new-alert">
@@ -319,7 +401,7 @@ class AlertPage extends React.Component {
);
}
const { rearm, query, name, options, state, id } = alert;
const { query, name, options, state, id } = alert;
if (!id) {
return (
<div className="container alert-page new-alert">
@@ -373,16 +455,7 @@ class AlertPage extends React.Component {
onChange={this.setAlertOptions}
/>
<HorizontalFormItem label="Send notification">
<Select className="alert-notification" value={rearm || 0} dropdownMatchSelectWidth={false} onChange={this.onRearmChange}>
<Select.Option value={0}>Just once</Select.Option>
<Select.Option value={1}>
Each time results are refreshed
</Select.Option>
<Select.Option value={1800}>At most every 30 minutes</Select.Option>
<Select.Option value={3600}>At most once an hour</Select.Option>
<Select.Option value={86400}>At most once a day</Select.Option>
<Select.Option value={604800}>At most once a week</Select.Option>
</Select>
<Rearm value={pendingRearm} onChange={this.onRearmChange} />
</HorizontalFormItem>
<HorizontalFormItem>
<Button type="primary" onClick={this.save}>Save</Button>{' '}
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.