adding errors flows

KeithWoods · KeithWoods · commit e320e20ce4d3 · 2016-02-09T12:02:09.000Z
perf improvements, now only displays max 200 points
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "name": "esp-js-devtools",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "description": "Evented State Processor (ESP) dev tools",
   "main": "dist/esp-js-devtools.js",
   "scripts": {
-    "start": "npm run build",
+    "start": "npm run build:dev",
     "build:dev": "webpack --config webpack.dev.config.js",
     "dev": "webpack --progress --watch --colors --hot --debug --display-chunks --config webpack.dev.config.js"
   },
@@ -13,7 +13,7 @@
   "repository": "https://github.com/esp/esp-js",
   "dependencies": {
     "babel-plugin-transform-runtime": "^6.4.3",
-    "esp-js": "^0.5.14",
+    "esp-js": "^0.5.15",
     "install": "^0.4.2",
     "jquery": "^2.2.0",
     "jquery-ui": "^1.10.5",
diff --git a/src/model/analyticsMonitor.js b/src/model/analyticsMonitor.js
@@ -50,7 +50,7 @@ export default class AnalyticsMonitor {
     }
     halted(modelIds, err) {
         if(modelIds.indexOf(DebugToolsModel.modelId) >=0 ) return;
-        this._router.publishEvent('halted', {modelIds: modelIds, err: err});
+        this._router.publishEvent('routerHalted', {modelIds: modelIds, err: err});
     }
     registerMonitor(devToolsDiagnosticMonitor) {
 
diff --git a/src/model/dataPoint.js b/src/model/dataPoint.js
@@ -0,0 +1,27 @@
+import DataPointType from './dataPointType';
+let dataPointId = 1;
+
+export default class DataPoint {
+    constructor(publishedTime, data, modelId, pointType) {
+        this._pointId = dataPointId++;
+        this._data = data;
+        this._publishedTime = publishedTime;
+        this._modelId = modelId;
+        this._pointType = pointType;
+    }
+    get pointId() {
+        return this._pointId;
+    }
+    get data() {
+        return this._data;
+    }
+    get publishedTime() {
+        return this._publishedTime;
+    }
+    get modelId() {
+        return this._modelId;
+    }
+    get pointType() {
+        return this._pointType;
+    }
+}
diff --git a/src/model/dataPointType.js b/src/model/dataPointType.js
@@ -0,0 +1,4 @@
+export default class DataPointType {
+    static get eventPublished() { return 'eventPublished'; };
+    static get routerHalted() { return 'routerHalted'; };
+}
diff --git a/src/model/devToolsModel.js b/src/model/devToolsModel.js
@@ -3,23 +3,28 @@ import _ from 'lodash';
 import moment from 'moment';
 import UpdateType from './updateType';
 import RegisteredModel from './registeredModel';
+import DataPoint from './dataPoint';
 import { unregisterDevTools } from '../devtoolsHooks';
+import DataPointType from './dataPointType';
 
 export default class DevToolsModel extends esp.model.DisposableBase {
     constructor(router) {
         super();
         this._router = router;
         this._registeredModels = {};
-        this._eventsByNumber = {};
-        this._lastEvent = null;
-        this._selectedEvent = null;
-        this._updateType = UpdateType.none;
-        this._eventCounter = 0;
+        this._dataPointsById = {};
+        this._dataPoints = [];
+        this._newDataPoints = [];
+        this._dataPointsIdsToRemove = [];
+        this._selectedDataPoint = null;
+        this._updateType = [];
+        this._processedDataPointCount = 0;
         this._timerSubscription = null;
         this._now = moment();
         this._shouldAutoScroll = true;
         this._shouldCaptureEvents = true;
         this._shouldLogToConsole = false;
+        this._eventBufferSize = 200;
     }
     static get modelId() {
         return 'esp-debugTools';
@@ -30,27 +35,31 @@ export default class DevToolsModel extends esp.model.DisposableBase {
     get registeredModels() {
         return _.values(this._registeredModels);
     }
-    get lastEvent() {
-        return this._lastEvent;
+    get newDataPoints() {
+        return this._newDataPoints;
     }
-    get selectedEvent() {
-        return this._selectedEvent;
+    get selectedDataPoint() {
+        return this._selectedDataPoint;
     }
     get now() {
         return this._now;
     }
     get shouldAutoScroll() {
         return this._shouldAutoScroll;
     }
-    get totalEventCount() {
-        return this._eventCounter;
+    get dataPointsIdsToRemove() {
+        return this._dataPointsIdsToRemove;
+    }
+    get processedDataPointCount() {
+        return this._processedDataPointCount;
     }
     observeEvents() {
         this.addDisposable(this._router.observeEventsOn(this));
     }
     preProcess() {
-        this._updateType = UpdateType.none;
-        this._lastEvent = null;
+        this._updateType = [];
+        this._newDataPoints = [];
+        this._dataPointsIdsToRemove = [];
     }
     @esp.observeEvent('modelAdded', esp.ObservationStage.preview)
     @esp.observeEvent('modelRemoved', esp.ObservationStage.preview)
@@ -66,30 +75,44 @@ export default class DevToolsModel extends esp.model.DisposableBase {
     }
     @esp.observeEvent('modelAdded')
     _onModelAdded(event) {
-        this._updateType = UpdateType.modelsChanged;
+        this._updateType.push(UpdateType.modelsChanged);
         this._addModel(event.modelId);
     }
     @esp.observeEvent('modelRemoved')
     _onModelRemoved(event) {
-        this._updateType = UpdateType.modelsChanged;
+        this._updateType.push(UpdateType.modelsChanged);
         delete this._registeredModels[event.modelId];
     }
     @esp.observeEvent('eventPublished')
     _onEventPublished(event) {
-        this._updateType = UpdateType.eventsChanged;
+        this._updateType.push(UpdateType.eventsChanged);
         let registeredModel = this._registeredModels[event.modelId];
         if (!registeredModel) {
-            registeredModel = this._addModel(event.modelId);
+            this._addModel(event.modelId);
         }
-        this._eventCounter++;
-        this._lastEvent = registeredModel.eventPublished(this._eventCounter, event.modelId, event.eventType);
-        this._eventsByNumber[this._eventCounter] = this._lastEvent;
+        var dataPoint = new DataPoint(moment(), event.eventType, event.modelId, DataPointType.eventPublished);
+        this._addDataPoint(dataPoint);
         if(this._shouldLogToConsole) {
             console.log(`[ESP-Event] ModelId:[${event.modelId}] EventType:[${event.eventType}]`, event.event);
         }
     }
+    @esp.observeEvent('routerHalted')
+    _onRouterHalted(event) {
+        for (var i = 0; i < event.modelIds.length; i++) {
+            var modelId = event.modelIds[i];
+            let registeredModel = this._registeredModels[modelId];
+            if(registeredModel) {
+                var dataPoint = new DataPoint(moment(), event.err, modelId, DataPointType.routerHalted);
+                registeredModel.haltingError = event.err;
+                registeredModel.isHalted = true;
+                this._addDataPoint(dataPoint);
+            }
+        }
+        this._updateType.push(UpdateType.modelsChanged);
+        this._updateType.push(UpdateType.eventsChanged);
+    }
     _addModel(modelId) {
-        this._updateType = UpdateType.modelsChanged;
+        this._updateType.push(UpdateType.modelsChanged);
         let registeredModel = this._registeredModels[modelId];
         if(registeredModel) {
             throw new Error(`model with id ${modelId} already registered`);
@@ -98,10 +121,25 @@ export default class DevToolsModel extends esp.model.DisposableBase {
         this._registeredModels[modelId] = registeredModel;
         return registeredModel;
     }
-    @esp.observeEvent('eventSelected')
-    _onEventSelected(event) {
+    _addDataPoint(dataPoint) {
+        this._dataPointsById[dataPoint.pointId] = dataPoint;
+        this._dataPoints.push(dataPoint);
+        this._newDataPoints.push(dataPoint);
+        this._processedDataPointCount++;
+        if(this._processedDataPointCount > this._eventBufferSize) {
+            let numberToRemove = this._dataPoints.length - this._eventBufferSize;
+            let removedItems = this._dataPoints.splice(0, numberToRemove);
+            for (let i = 0; i < removedItems.length; i++) {
+                let dataPointToRemove = removedItems[i];
+                this._dataPointsIdsToRemove.push(dataPointToRemove.pointId);
+                delete this._dataPointsById[dataPointToRemove.pointId];
+            }
+        }
+    }
+    @esp.observeEvent('pointSelected')
+    _onPointSelected(event) {
         this._shouldAutoScroll = false;
-        this._selectedEvent = this._eventsByNumber[event.eventNumber];
+        this._selectedDataPoint = this._dataPointsById[event.pointId];
     }
     @esp.observeEvent('disableAutoScroll')
     _onDisableAutoScroll(event) {
@@ -135,13 +173,13 @@ export default class DevToolsModel extends esp.model.DisposableBase {
         // start a timer so we can keep moving the chart forward
         this._timerSubscription = setInterval(() => {
             this._router.runAction(() => {
-                this._updateType = UpdateType.timeChanged;
+                this._updateType.push(UpdateType.timeChanged);
                 this._now = moment();
             });
         }, 1000);
     }
     _reset() {
-        this._updateType = UpdateType.reset;
+        this._updateType.push(UpdateType.reset);
         this._registeredModels = {};
     }
     _stopTimer() {
diff --git a/src/model/eventRecord.js b/src/model/eventRecord.js
diff --git a/src/model/registeredModel.js b/src/model/registeredModel.js
@@ -1,20 +1,33 @@
 import moment from 'moment';
-import EventRecord from './eventRecord';
+import DataPoint from './dataPoint';
 
 export default class RegisteredModel {
     constructor(modelId) {
         this._modelId = modelId;
-        this._events = [];
+        this._isHalted = false;
+        this._haltingError = null;
     }
     get modelId() {
         return this._modelId;
     }
-    get events() {
-        return this._events;
+    get isHalted() {
+        return this._isHalted;
     }
-    eventPublished(eventNumber, modelId, eventType) {
-        var eventRecord = new EventRecord(eventNumber, moment(), eventType, modelId);
-        this._events.push(eventRecord);
-        return eventRecord;
+    set isHalted(isHalted) {
+        this._isHalted = isHalted;
     }
+    get haltingError() {
+        return this._haltingError;
+    }
+    set haltingError(err) {
+        this._haltingError = err;
+    }
+    //createEventPublishedDataPoint(eventNumber, modelId, eventType) {
+    //    var dataPoint = new DataPoint(eventNumber, moment(), eventType, modelId);
+    //    this._events.push(dataPoint);
+    //    return eventRecord;
+    //}
+    //halted(eventNumber, modelId, eventType) {
+    //
+    //}
 }
diff --git a/src/views/devToolsView.js b/src/views/devToolsView.js
@@ -8,6 +8,7 @@ import 'vis/dist/vis.css';
 import './devToolsView.less'
 import UpdateType from '../model/updateType';
 import template from './devToolsView.template.html';
+import DataPointType from '../model/dataPointType';
 
 export default class DevToolsView extends esp.model.DisposableBase {
 
@@ -31,26 +32,41 @@ export default class DevToolsView extends esp.model.DisposableBase {
         this.addDisposable(
             this._router.getModelObservable()
                 .observe(model => {
-                    if (model.updateType === UpdateType.modelsChanged) {
-                        for (var i = 0; i < model.registeredModels.length; i++) {
-                            var registeredModel = model.registeredModels[i];
+                    if (model.updateType.indexOf(UpdateType.modelsChanged) >= 0) {
+                        for (let i = 0; i < model.registeredModels.length; i++) {
+                            let registeredModel = model.registeredModels[i];
+                            let groupStyle = registeredModel.isHalted
+                                ? 'background:red'
+                                : '';
                             this._timelineGroups.update({
                                 id: registeredModel.modelId,
-                                content: registeredModel.modelId
+                                content: registeredModel.modelId,
+                                style:groupStyle
                             });
                         }
-                    } else if (model.updateType === UpdateType.eventsChanged) {
-                        this._timelineData.add({
-                            id: model.lastEvent.eventNumber,
-                            group: model.lastEvent.modelId,
-                            title: model.lastEvent.eventType,
-                            start: model.lastEvent.publishedTime
-                        });
-                    } else if (model.updateType === UpdateType.reset) {
+                    }
+                    if (model.updateType.indexOf(UpdateType.eventsChanged) >= 0) {
+                        for (var i = 0; i < model.newDataPoints.length; i++) {
+                            var dataPoint = model.newDataPoints[i];
+                            let pointStyle = dataPoint.pointType == DataPointType.routerHalted
+                                ? 'background:red'
+                                : '';
+                            this._timelineData.add({
+                                id: dataPoint.pointId,
+                                group: dataPoint.modelId,
+                                title: dataPoint.data,
+                                start: dataPoint.publishedTime,
+                                style: pointStyle
+                            });
+                        }
+                        if(model.dataPointsIdsToRemove.length > 0) {
+                            this._timelineData.remove(model.dataPointsIdsToRemove);
+                        }
+                    }
+                    if (model.updateType.indexOf(UpdateType.reset) >= 0) {
                         this._timelineGroups.clear();
                         this._timelineData.clear();
                     }
-
                     if (this._timeline) {
                         this._timeline.setOptions({max: moment().add(2, 'm')})
                         if (model.shouldAutoScroll) {
@@ -59,11 +75,10 @@ export default class DevToolsView extends esp.model.DisposableBase {
                         if (this._autoscrollCheckbox.prop('checked') !== model.shouldAutoScroll) {
                             this._autoscrollCheckbox.prop('checked', model.shouldAutoScroll);
                         }
-
-                        if (this._eventDetailsDescriptionP && model.selectedEvent) {
-                            this._eventDetailsDescriptionP.html(JSON.stringify(model.selectedEvent));
+                        if (this._eventDetailsDescriptionP && model.selectedDataPoint) {
+                            this._eventDetailsDescriptionP.html(JSON.stringify(model.selectedDataPoint));
                         }
-                        this._footer.html(`Total events: ${model.totalEventCount}`);
+                        this._footer.html(`Total events: ${model.processedDataPointCount}`);
                     }
                 })
         );
@@ -143,8 +158,8 @@ export default class DevToolsView extends esp.model.DisposableBase {
         timeline.on('select', properties => {
             let pointId = properties.items[0];
             this._router.publishEvent(
-                'eventSelected', {
-                    eventNumber: pointId
+                'pointSelected', {
+                    pointId: pointId
                 }
             );
         });
diff --git a/src/views/devToolsView.less b/src/views/devToolsView.less

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,7 @@ export default class AnalyticsMonitor {`
`50`	`50`	`}`
`51`	`51`	`halted(modelIds, err) {`
`52`	`52`	`if(modelIds.indexOf(DebugToolsModel.modelId) >=0 ) return;`
`53`		`- this._router.publishEvent('halted', {modelIds: modelIds, err: err});`
	`53`	`+ this._router.publishEvent('routerHalted', {modelIds: modelIds, err: err});`
`54`	`54`	`}`
`55`	`55`	`registerMonitor(devToolsDiagnosticMonitor) {`
`56`	`56`