adding better formatting for selected event

esp · Mar 3, 2016 · 1315548 · 1315548
1 parent 6c1a800
commit 1315548
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 55 deletions.
diff --git a/package.json b/package.json
@@ -5,17 +5,17 @@
   "main": "dist/esp-js-devtools.js",
   "scripts": {
     "start": "npm run build:dev",
-    "build:dev": "webpack --config webpack.dev.config.js",
+    "build": "webpack --config webpack.dev.config.js",
     "dev": "webpack --progress --watch --colors --hot --debug --display-chunks --config webpack.dev.config.js"
   },
   "author": "Dev Shop Limited",
   "license": "Apache 2",
   "repository": "https://github.com/esp/esp-js",
   "dependencies": {
     "babel-plugin-transform-runtime": "^6.4.3",
-    "esp-js": "^0.5.16",
+    "esp-js": "^0.7.0",
     "install": "^0.4.2",
-    "jquery": "^2.2.0",
+    "jquery": "^2.2.1",
     "jquery-ui": "^1.10.5",
     "lodash": "^4.2.1",
     "moment": "^2.11.2",

diff --git a/qq b/qq
diff --git a/src/model/analyticsMonitor.js b/src/model/analyticsMonitor.js
@@ -36,10 +36,10 @@ export default class AnalyticsMonitor {
         this._router.publishEvent(this._devToolsModelId,'eventPublished', {modelId: modelId, eventType: eventType, event:event});
     }
     broadcastEvent(eventType) {
-        this._router.publishEvent(this._devToolsModelId, 'broadcastEvent', {eventType: eventType});
+        // TODO this might cause some infinite loop issues, need to be careful when it's wired up
     }
     executingEvent(eventType) {
-        this._router.publishEvent(this._devToolsModelId, 'executingEvent', {eventType: eventType});
+       this._router.publishEvent(this._devToolsModelId, 'executingEvent', {eventType: eventType});
     }
     runAction(modelId) {
         if(modelId === DebugToolsModel.modelId) return;

diff --git a/src/model/dataPoint.js b/src/model/dataPoint.js
@@ -20,12 +20,13 @@ import DataPointType from './dataPointType';
 let dataPointId = 1;
 
 export default class DataPoint {
-    constructor(timeRecordedAt, modelId, eventType, error, pointType) {
+    constructor(timeRecordedAt, modelId, eventType, error, eventPayload, pointType) {
         this._pointId = dataPointId++;
         this._timeRecordedAt = timeRecordedAt;
         this._modelId = modelId;
         this._eventType = eventType;
         this._error = error;
+        this._eventPayload = eventPayload;
         this._pointType = pointType;
     }
     get pointId() {
@@ -43,6 +44,9 @@ export default class DataPoint {
     get error() {
         return this._error;
     }
+    get eventPayload() {
+        return this._eventPayload;
+    }
     get pointType() {
         return this._pointType;
     }

diff --git a/src/model/devToolsModel.js b/src/model/devToolsModel.js
@@ -24,7 +24,7 @@ import RegisteredModel from './registeredModel';
 import DataPoint from './dataPoint';
 import DataPointType from './dataPointType';
 
-export default class DevToolsModel extends esp.model.DisposableBase {
+export default class DevToolsModel extends esp.DisposableBase {
     constructor(router, options) {
         super();
         this._router = router;
@@ -39,9 +39,15 @@ export default class DevToolsModel extends esp.model.DisposableBase {
         this._timerSubscription = null;
         this._now = moment();
         this._shouldAutoScroll = true;
-        this._shouldCaptureEvents = true;
-        this._shouldLogToConsole = options.logEventsToConsole ? true : false;
-        this._dataPointBufferSize = 200;
+        this._shouldCaptureEvents = typeof options.shouldCaptureEvents === 'undefined'
+            ? true
+            : options.shouldCaptureEvents === true;
+        this._shouldLogToConsole = typeof options.logEventsToConsole === 'undefined'
+            ? false
+            : options.logEventsToConsole === true;
+        this._dataPointBufferSize = typeof options.dataPointBufferSize === 'undefined' || isNaN(options.dataPointBufferSize)
+            ? 500
+            : options.dataPointBufferSize;
     }
     static get modelId() {
         return 'esp-debugTools';
@@ -90,6 +96,8 @@ export default class DevToolsModel extends esp.model.DisposableBase {
     @esp.observeEvent('modelAdded', esp.ObservationStage.preview)
     @esp.observeEvent('modelRemoved', esp.ObservationStage.preview)
     @esp.observeEvent('eventPublished', esp.ObservationStage.preview)
+    @esp.observeEvent('runAction', esp.ObservationStage.preview)
+    @esp.observeEvent('executingEvent', esp.ObservationStage.preview)
     _previewEvents(event, context) {
         if(!this._shouldCaptureEvents || this.isDisposed) {
             context.cancel();
@@ -135,7 +143,7 @@ export default class DevToolsModel extends esp.model.DisposableBase {
             var modelId = event.modelIds[i];
             let registeredModel = this._registeredModels[modelId];
             if(registeredModel) {
-                var dataPoint = new DataPoint(moment(), modelId, null, event.err, DataPointType.routerHalted);
+                var dataPoint = new DataPoint(moment(), modelId, null, event.err, null, DataPointType.routerHalted);
                 registeredModel.haltingError = event.err;
                 registeredModel.isHalted = true;
                 this._addDataPoint(dataPoint);
@@ -200,13 +208,13 @@ export default class DevToolsModel extends esp.model.DisposableBase {
             clearInterval(this._timerSubscription);
         }
     }
-    _recordEvent(modelId, eventType, dataPointType:DataPointType, eventPayload) {
+    _recordEvent(modelId, eventType, dataPointType, eventPayload) {
         this._updateType.push(UpdateType.eventsChanged);
         let registeredModel = this._registeredModels[modelId];
         if (!registeredModel) {
             this._addModel(modelId);
         }
-        var dataPoint = new DataPoint(moment(), modelId, eventType, null, dataPointType);
+        var dataPoint = new DataPoint(moment(), modelId, eventType, null, eventPayload, dataPointType);
         this._addDataPoint(dataPoint);
         if(this._shouldLogToConsole && typeof eventPayload !== 'undefined') {
             console.log(`[ESP-Event] ModelId:[${modelId}] EventType:[${eventType}]`, eventPayload);

diff --git a/src/views/devToolsView.js b/src/views/devToolsView.js
@@ -29,7 +29,7 @@ import containerTempalte from './devToolsView.template.html';
 import pointSelectedTempalte from './pointSelected.template.html';
 import DataPointType from '../model/dataPointType';
 
-export default class DevToolsView extends esp.model.DisposableBase {
+export default class DevToolsView extends esp.DisposableBase {
 
     constructor(modelId, router) {
         super();
@@ -79,8 +79,8 @@ export default class DevToolsView extends esp.model.DisposableBase {
                             this._timelineData.add({
                                 id: dataPoint.pointId,
                                 group: dataPoint.modelId,
-                                title: dataPoint.data,
-                                start: dataPoint.publishedTime,
+                                title: dataPoint.eventType,
+                                start: dataPoint.timeRecordedAt,
                                 style: pointStyle
                             });
                         }
@@ -104,8 +104,16 @@ export default class DevToolsView extends esp.model.DisposableBase {
                             this._logEventsConsoleCheckbox.prop('checked', model.shouldLogToConsole);
                         }
                         if (this._eventDetailsDescriptionP && model.selectedDataPoint) {
-
-                            this._eventDetailsDescriptionP.html(JSON.stringify(model.selectedDataPoint));
+                            let pointSelectedContainer = $(pointSelectedTempalte);
+                            pointSelectedContainer.find('#timeRecordedAt').text(model.selectedDataPoint.timeRecordedAt);
+                            pointSelectedContainer.find('#modelId').text(model.selectedDataPoint.modelId);
+                            pointSelectedContainer.find('#eventType').text(model.selectedDataPoint.eventType);
+                            pointSelectedContainer.find('#error').text(model.selectedDataPoint.error || 'none');
+                            let eventString = model.selectedDataPoint.eventPayload
+                                ? JSON.stringify(model.selectedDataPoint.eventPayload)
+                                : 'N/A';
+                            pointSelectedContainer.find('#event').html(eventString);
+                            this._eventDetailsDescriptionP.html(pointSelectedContainer);
                         }
                         if(this._ringBufferSizeInput && !this._ringBufferSizeInput.is(":focus")) {
                             this._ringBufferSizeInput.val(model.dataPointBufferSize);

diff --git a/src/views/devToolsView.less b/src/views/devToolsView.less
@@ -39,16 +39,23 @@ div#esp-js-devtool-container {
   }
 
   .controls {
-    margin-left: 5px;
+    margin-left: 10px;
+    input {
+      margin-right: 10px;
+    }
     #ringBufferSize {
       width: 60px;
     }
   }
 
-  .eventDetails p {
+  .eventDetails div {
     display: block;
     padding: 10px;
     color: #5F5F5F;
+
+    .event-details-heading {
+      font-weight: bold;
+    }
   }
 
   input {

diff --git a/src/views/pointSelected.template.html b/src/views/pointSelected.template.html
@@ -1,6 +1,25 @@
-<div id='event-details'>
-    <div id="timeRecordedAt" class="event-details-time-recorded-at"></div>
-    <div id="modelId" class="event-details-model-Id"></div>
-    <div id="eventType" class="event-details-event-type"></div>
-    <div id="error" class="event-details-error"></div>
+<div class='event-details'>
+    <h3>Selected Event Details</h3>
+    <table>
+        <tr>
+            <td class="event-details-heading">Time</td>
+            <td><span id="timeRecordedAt"></span></td>
+        </tr>
+        <tr>
+            <td class="event-details-heading">ModelId</td>
+            <td><span id="modelId"></span></td>
+        </tr>
+        <tr>
+            <td class="event-details-heading">Event type</td>
+            <td><span id="eventType"></span></td>
+        </tr>
+        <tr>
+            <td class="event-details-heading">Error</td>
+            <td><span id="error"></span></td>
+        </tr>
+        <tr>
+            <td class="event-details-heading">Event</td>
+            <td><span id="event"></span></td>
+        </tr>
+    </table>
 </div>