Add time boundary check in timeline to prevent page crashes

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) => {