aboutsummaryrefslogtreecommitdiff
path: root/frontend
diff options
context:
space:
mode:
authorEmiliano Ciavatta2020-12-17 09:57:02 +0000
committerEmiliano Ciavatta2020-12-17 09:57:02 +0000
commit1c7bd710650cafbf1eb093344a95a57882069fae (patch)
treeb65405425d3325935a8bcd8fbedd7e8905eb7c6c /frontend
parent216f53dc7de379956f884cd68ed7fcf33adf6c65 (diff)
Add time boundary check in timeline to prevent page crashes
Diffstat (limited to 'frontend')
-rw-r--r--frontend/src/components/Notifications.js5
-rw-r--r--frontend/src/components/Notifications.scss6
-rw-r--r--frontend/src/components/Timeline.js32
3 files changed, 37 insertions, 6 deletions
diff --git a/frontend/src/components/Notifications.js b/frontend/src/components/Notifications.js
index 0b47b43..8356e80 100644
--- a/frontend/src/components/Notifications.js
+++ b/frontend/src/components/Notifications.js
@@ -66,6 +66,11 @@ class Notifications extends Component {
n.description = `${n.message["processed_packets"]} packets processed`;
n.variant = "blue";
return this.pushNotification(n);
+ case "timeline.range.large":
+ n.title = "timeline cropped";
+ n.description = `the maximum range is 24h`;
+ n.variant = "red";
+ return this.pushNotification(n);
default:
return null;
}
diff --git a/frontend/src/components/Notifications.scss b/frontend/src/components/Notifications.scss
index 5852c7d..5a032c8 100644
--- a/frontend/src/components/Notifications.scss
+++ b/frontend/src/components/Notifications.scss
@@ -45,5 +45,11 @@
border-left: 5px solid $color-blue-dark;
background-color: $color-blue;
}
+
+ &.notification-red {
+ color: $color-red-light;
+ border-left: 5px solid $color-red-dark;
+ background-color: $color-red;
+ }
}
}
diff --git a/frontend/src/components/Timeline.js b/frontend/src/components/Timeline.js
index 5443a3b..ec791e0 100644
--- a/frontend/src/components/Timeline.js
+++ b/frontend/src/components/Timeline.js
@@ -35,6 +35,7 @@ import ChoiceField from "./fields/ChoiceField";
import "./Timeline.scss";
const minutes = 60 * 1000;
+const maxTimelineRange = 24 * 60 * minutes;
const classNames = require("classnames");
const leftSelectionPaddingMultiplier = 24;
@@ -109,8 +110,25 @@ class Timeline extends Component {
const zeroFilledMetrics = [];
const toTime = (m) => new Date(m["range_start"]).getTime();
- let i = 0;
- for (let interval = toTime(metrics[0]) - minutes; interval <= toTime(metrics[metrics.length - 1]) + minutes; interval += minutes) {
+
+ let i;
+ let timeStart = toTime(metrics[0]) - minutes;
+ for (i = 0; timeStart < 0 && i < metrics.length; i++) { // workaround to remove negative timestamps :(
+ timeStart = toTime(metrics[i]) - minutes;
+ }
+
+ let timeEnd = toTime(metrics[metrics.length - 1]) + minutes;
+ if (timeEnd - timeStart > maxTimelineRange) {
+ timeEnd = timeStart + maxTimelineRange;
+
+ const now = new Date().getTime();
+ if (!this.lastDisplayNotificationTime || this.lastDisplayNotificationTime + minutes < now) {
+ this.lastDisplayNotificationTime = now;
+ dispatcher.dispatch("notifications", {event: "timeline.range.large"});
+ }
+ }
+
+ for (let interval = timeStart; interval <= timeEnd; interval += minutes) {
if (i < metrics.length && interval === toTime(metrics[i])) {
const m = metrics[i++];
m["range_start"] = new Date(m["range_start"]);
@@ -204,10 +222,12 @@ class Timeline extends Component {
};
handleConnectionUpdates = (payload) => {
- this.setState({
- selection: new TimeRange(payload.from, payload.to),
- });
- this.adjustSelection();
+ if (payload.from >= this.state.start && payload.from < payload.to && payload.to <= this.state.end) {
+ this.setState({
+ selection: new TimeRange(payload.from, payload.to),
+ });
+ this.adjustSelection();
+ }
};
handleNotifications = (payload) => {