${formatters.toTimeago(timestamp)} at ${formatters.toTimestring(timestamp)}
`;
+ return `${formatters.toTimeago(timestamp * 1000)} at ${formatters.toTimestring(timestamp * 1000)}
`;
}
return '';
}
@@ -113,11 +113,9 @@ export default class AlertsTable extends React.Component {
}
static toAlertTypeString = (num) => {
- if (num === 'count') {
- return 'Total Count';
- } else if (num === 'durationTP99') {
+ if (num === 'duration') {
return 'Duration TP99';
- } else if (num === 'failureCount') {
+ } else if (num === 'failure-span') {
return 'Failure Count';
}
@@ -125,13 +123,12 @@ export default class AlertsTable extends React.Component {
};
static toTrendTypeString = (alertType) => {
- if (alertType === 'count') {
- return 'count';
- } else if (alertType === 'durationTP99') {
+ if (alertType === 'duration') {
return 'tp99Duration';
- } else if (alertType === 'failureCount') {
+ } else if (alertType === 'failure-span') {
return 'failureCount';
}
+
return null;
};
diff --git a/src/components/alerts/alertsToolbar.jsx b/src/components/alerts/alertsToolbar.jsx
index 8d2ef8b2..fb057879 100644
--- a/src/components/alerts/alertsToolbar.jsx
+++ b/src/components/alerts/alertsToolbar.jsx
@@ -20,6 +20,7 @@ import PropTypes from 'prop-types';
import {observer} from 'mobx-react';
import timeWindow from '../../utils/timeWindow';
+import granularityMetrics from '../trends/utils/metricGranularity';
import {toQuery, toQueryUrlString} from '../../utils/queryParser';
import './alerts';
@@ -33,8 +34,7 @@ export default class AlertsToolbar extends React.Component {
alertsStore: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
defaultPreset: PropTypes.object.isRequired,
- interval: PropTypes.string.isRequired,
- updateInterval: PropTypes.func.isRequired
+ interval: PropTypes.string.isRequired
};
constructor(props) {
@@ -43,6 +43,7 @@ export default class AlertsToolbar extends React.Component {
const query = toQuery(this.props.location.search);
const activeWindow = query.preset ? timeWindow.presets.find(presetItem => presetItem.shortName === query.preset) : this.props.defaultPreset;
this.state = {
+ interval: this.props.interval,
options: timeWindow.presets,
activeWindow,
autoRefreshTimer: new Date(),
@@ -61,7 +62,7 @@ export default class AlertsToolbar extends React.Component {
componentWillReceiveProps(nextProps) {
const query = toQuery(nextProps.location.search);
const activeWindow = query.preset ? timeWindow.presets.find(presetItem => presetItem.shortName === query.preset) : nextProps.defaultPreset;
- this.setState({activeWindow, autoRefresh: false});
+ this.setState({activeWindow, autoRefresh: false, interval: nextProps.interval || 'FiveMinute'});
this.stopRefresh();
}
@@ -131,27 +132,33 @@ export default class AlertsToolbar extends React.Component {
}
handleIntervalChange(event) {
- const newInterval = event.target.value;
- this.props.updateInterval(newInterval);
+ const query = toQuery(this.props.location.search);
+ query.interval = event.target.value;
+
+ const queryUrl = toQueryUrlString(query);
+ if (queryUrl !== this.props.location.search) {
+ this.props.history.push({
+ search: queryUrl
+ });
+ }
}
render() {
const countDownMiliSec = (this.state.countdownTimer && this.state.autoRefreshTimer) && (refreshInterval - (this.state.countdownTimer.getTime() - this.state.autoRefreshTimer.getTime()));
+
return (
- Alert Interval
+ Metric Interval
diff --git a/src/components/alerts/details/alertDetails.jsx b/src/components/alerts/details/alertDetails.jsx
index 8f2b2c64..b52662cd 100644
--- a/src/components/alerts/details/alertDetails.jsx
+++ b/src/components/alerts/details/alertDetails.jsx
@@ -42,6 +42,13 @@ export default class AlertDetails extends React.Component {
this.props.alertDetailsStore.fetchAlertHistory(this.props.serviceName, this.props.operationName, this.props.type, Date.now() - AlertDetails.historyWindow, this.props.interval);
}
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.type !== this.props.type) {
+ this.props.alertDetailsStore.fetchAlertSubscriptions(nextProps.serviceName, nextProps.operationName, nextProps.type, nextProps.interval);
+ this.props.alertDetailsStore.fetchAlertHistory(nextProps.serviceName, nextProps.operationName, nextProps.type, Date.now() - AlertDetails.historyWindow, nextProps.interval);
+ }
+ }
+
render() {
const enableAlertSubscriptions = window.haystackUiConfig.enableAlertSubscriptions;
@@ -59,6 +66,7 @@ export default class AlertDetails extends React.Component {
fulfilled: () => (
-
- See Traces
-
+ { tracesEnabled &&
+
+ See Traces
+
+ }
alert.timestamp, ['desc']);
return (
-
+
- History
- ({sortedHistoryResults.length} times unhealthy in last {this.props.historyWindow / 86400000} day)
+
History
- ({sortedHistoryResults.length} times unhealthy in last {this.props.historyWindow / 86400000} day)
+ Anomaly History
+ ({sortedHistoryResults.length} anomalies in the last {this.props.historyWindow / 86400000} day)
| Timestamp | -Observed Value | -Expected Value | -Trends & Traces | +Timestamp | +Anomaly Strength | +Observed Value | +Expected Value | +{tracesEnabled ? 'Trends & Traces' : 'Trends'} |
|---|---|---|---|---|---|---|---|---|
| {AlertHistory.timeAgoFormatter(alert.timestamp)} at {AlertHistory.timestampFormatter(alert.timestamp)} | -{alert.observedValue} | -{alert.expectedValue} | +{AlertHistory.timeAgoFormatter(alert.timestamp * 1000)} at {AlertHistory.timestampFormatter(alert.timestamp * 1000)} | +{alert.strength} | +{alert.observedvalue && AlertHistory.valueFormatter(alert.observedvalue, this.props.type)} | +{alert.expectedvalue && AlertHistory.valueFormatter(alert.expectedvalue, this.props.type)} |
-
+
-
-
-
+ { tracesEnabled &&
+
+
+
+ }
|
| No Subscriptions Found | |
| No Subscriptions Found | |
| + + AlertSubscriptions.handleInputKeypress(event, this.toggleNewSubscriptionBox, this.handleSubmit)} + placeholder={this.state.selectValue === '1' ? 'Public Slack Channel' : 'Email Address'} + name="endpoint" + /> + | +
+
+
+
+ |
+
-
+ {showNewSubscriptionBox ?
+ :
+
+ }
- {/* TODO: more verbose errors */}
- Could not process subscription. Please try again.
+ {subscriptionErrorMessage || 'Could not process subscription. Please try again.'}
-
-
-
- Dispatchers:
- - {this.state.dispatchers.map((dispatcher, index) => ( -
-
- this.editDispatcher(e, index)}
- name="endpoint"
- />
-
-
- )
- )}
-
-
-
- 
Slack Email
;
- }
-
constructor(props) {
super(props);
this.state = {
- modalIsOpen: false
+ modifySubscription: false,
+ dispatcher: JSON.parse(JSON.stringify(this.props.subscription.dispatchersList[0])) // deep copy, so client side changes don't affect store
};
- this.openModal = this.openModal.bind(this);
- this.closeModal = this.closeModal.bind(this);
this.handleDeleteSubscription = this.handleDeleteSubscription.bind(this);
this.handleSubmitModifiedSubscription = this.handleSubmitModifiedSubscription.bind(this);
+ this.handleCancelModifiedSubscription = this.handleCancelModifiedSubscription.bind(this);
+ this.handleModifySubscription = this.handleModifySubscription.bind(this);
+ this.updateDispatcherType = this.updateDispatcherType.bind(this);
+ this.updateDispatcherEndpoint = this.updateDispatcherEndpoint.bind(this);
}
- openModal() {
- this.setState({modalIsOpen: true});
- }
+ handleSubmitModifiedSubscription() {
+ const oldSubscription = this.props.subscription;
+ const dispatcher = this.state.dispatcher;
+ dispatcher.endpoint = dispatcher.endpoint.trim();
+ if (!dispatcher.endpoint.length) {
+ this.props.errorCallback('Updated endpoint cannot be empty.');
+ return;
+ }
+ const dispatchers = [dispatcher];
- closeModal() {
- this.setState({modalIsOpen: false});
- }
+ const {serviceName, operationName, type, interval} = this.props.subscription.expressionTree;
- handleSubmitModifiedSubscription(modifiedSubscription) {
- const oldSubscription = this.props.subscription;
+ const modifiedSubscription = newSubscriptionConstructor(
+ serviceName,
+ operationName,
+ type,
+ interval,
+ dispatchers,
+ );
const subscriptions = {old: oldSubscription, modified: modifiedSubscription};
this.props.alertDetailsStore.updateSubscription(
subscriptions,
this.props.successCallback,
- this.props.errorCallback
+ this.props.errorCallback('Error updating subscription.')
);
this.setState({activeModifyInput: null});
}
+ handleCancelModifiedSubscription() {
+ this.setState({
+ modifySubscription: false,
+ dispatcher: JSON.parse(JSON.stringify(this.props.subscription.dispatchersList[0]))
+ });
+ }
+
+ handleModifySubscription() {
+ this.setState({
+ modifySubscription: true
+ });
+ }
+
handleDeleteSubscription(subscriptionId) {
this.props.alertDetailsStore.deleteSubscription(
subscriptionId
);
}
+ updateDispatcherType(e) {
+ this.setState({dispatcher: {type: e.target.value, endpoint: this.state.dispatcher.endpoint}});
+ }
+
+ updateDispatcherEndpoint(e) {
+ this.setState({dispatcher: {type: this.state.dispatcher.type, endpoint: e.target.value}});
+ }
+
+
render() {
- const subscription = JSON.parse(JSON.stringify(this.props.subscription)); // deep copy, so client side changes don't affect store
- const {serviceName, operationName, type, interval} = subscription.expressionTree;
-
- const SubscriptionButtons = () => (
-
-
-
-
);
+ const dispatcher = this.state.dispatcher;
+
+ const HandleSubscriptionModifyButtons = () => (
+
+
+
);
+
+ const DefaultSubscriptionButtons = () => (
+
+
+
);
return (
- {SubscriptionRow.getDispatcherType(dispatcher)}: {dispatcher.endpoint}
-
-
- )
- )}
+ -
+
+
+
+
+
-
: null}
diff --git a/src/utils/formatters.js b/src/utils/formatters.js
index 00ad1358..d555cbf6 100644
--- a/src/utils/formatters.js
+++ b/src/utils/formatters.js
@@ -22,6 +22,8 @@ const formatters = {};
formatters.toTimestring = startTime => moment(Math.floor(startTime / 1000)).format('kk:mm:ss, DD MMM YY');
+formatters.toShortTimestring = startTime => moment(Math.floor(startTime / 1000)).format('kk:mm:ss');
+
formatters.toTimestringWithMs = startTime => moment(Math.floor(startTime / 1000)).format('kk:mm:ss.SSS, DD MMM YY');
formatters.toTimeago = startTime => timeago().format(Math.floor(startTime / 1000));
diff --git a/test/src/components/alerts.spec.jsx b/test/src/components/alerts.spec.jsx
index 162acf04..77310e38 100644
--- a/test/src/components/alerts.spec.jsx
+++ b/test/src/components/alerts.spec.jsx
@@ -78,9 +78,9 @@ const stubSubscriptions = [
expressionTree: {
serviceName: 'test',
operationName: 'test',
- name: 'failureCount',
+ metric_key: 'failure-span',
interval: '5m',
- stat: 'failure-span',
+ stat: 'count',
mtype: 'gauge',
product: 'haystack'
}
@@ -101,9 +101,9 @@ const stubSubscriptions = [
expressionTree: {
serviceName: 'test',
operationName: 'test',
- name: 'failureCount',
+ name: 'failure-span',
interval: '5m',
- stat: 'failure-span',
+ stat: 'count',
mtype: 'gauge',
product: 'haystack'
}
@@ -134,6 +134,8 @@ const stubAddedSubscription = [
}
];
+const fiveMinuteInterval = 'FiveMinute';
+
function getValue(min, max) {
return _.round((Math.random() * (max - min)) + min, 0);
}
@@ -162,28 +164,14 @@ function getAlertHistoryTimestamps() {
const stubAlerts = [
{
operationName: 'test',
- type: 'durationTP99',
+ type: 'duration',
isHealthy: false,
timestamp: getRandomTimeStamp(),
trend: getRandomValues()
},
{
operationName: 'test',
- type: 'failureCount',
- isHealthy: true,
- timestamp: getRandomTimeStamp(),
- trend: getRandomValues()
- },
- {
- operationName: 'test',
- type: 'count',
- isHealthy: true,
- timestamp: getRandomTimeStamp(),
- trend: getRandomValues()
- },
- {
- operationName: 'test',
- type: 'AADuration',
+ type: 'failure-span',
isHealthy: true,
timestamp: getRandomTimeStamp(),
trend: getRandomValues()
@@ -252,7 +240,7 @@ describe('