@dualbox/editor 1.0.1 → 1.0.3

package/js/src/v/templates/debugNodeInfos.html

@@ -0,0 +1,336 @@
+@{ var utils = require('../Utils'); }
+@{ var moment = require('moment'); }
+
+@!(data)
+@{ var debug = data.node.getSnapshot(); }
+<div class="card-debug h100" id="debug-node">
+    <div style="padding-left: 10px; padding-top: 10px; padding-right: 10px;">
+        <h2 class="edit-dualbox-node-id">
+            <div class="dualbox-node-name">
+                <span class="text-truncate d-inline-block" style="width: 290px">@(data.node.graphId)</span>
+            </div>
+            <div class="dualbox-node-name-edit" style="display: none;">
+                <input type="text" class="form-control dualbox-node-name-input" style="display: inline-block;" value="@(data.node.graphId)" data-type="@(data.node.type)" autofocus/>
+                <button class="btn btn-primary btn-save-node-name-change" data-id="@(data.node.graphId)" data-type="@(data.node.type)" style="display: inline-block;">Save</button>
+            </div>
+        </h2>
+        <p><small class="edit-dualbox-node-package-name">@(data.node.getPackageName())</small></p>
+    </div>
+
+    <div class="edit-body">
+        <div class="card card-state">
+            <div class="card-header" id="debug-node-state" data-toggle="collapse" data-target="#debug-node-state-collapse" aria-expanded="true" aria-controls="debug-node-state-collapse">
+                <h5 class="mb-0 btn-link">State</h5>
+            </div>
+
+            <div id="debug-node-state-collapse" class="collapse show" aria-labelledby="debug-node-state" data-parent="#debug-node">
+                <div class="card-body" style="padding-left: 15px;">
+                    <table class="table-desc table-striped">
+                        <thead class="thead-dark">
+                            <th>Key</th>
+                            <th>Value</th>
+                        </thead>
+                        <tbody>
+                            <tr><td>status</td><td>@showStatus(debug.state.status)</td></tr>
+                            <tr><td>invalidateSent</td><td>@(debug.state.invalidateSent)</td></tr>
+                            <tr><td>readSent</td><td>@(debug.state.readSent)</td></tr>
+                            <tr><td>allowedToRestart</td><td>@(debug.state.allowedToRestart)</td></tr>
+                            <tr><td>evaluating</td><td>@(debug.state.evaluating)</td></tr>
+                            <tr><td>initialized</td><td>@(debug.state.initialized)</td></tr>
+                        </tbody>
+                    </table>
+                </div>
+            </div>
+        </div>
+
+
+        @if( data.node.hasInputs() ) {
+            <div class="card card-settings">
+                <div class="card-header" id="debug-node-inputs" data-toggle="collapse" data-target="#debug-node-inputs-collapse" aria-expanded="false" aria-controls="debug-node-inputs-collapse">
+                    <h5 class="mb-0 btn-link">Data <small><span class="badge badge-secondary">@(data.node.getInputsNames().length)</span></small></h5>
+                </div>
+                <div id="debug-node-inputs-collapse" class="collapse" aria-labelledby="debug-node-inputs" data-parent="#card-debug">
+                    <div class="card-body">
+                        <table class="table-desc table-striped">
+                            <thead class="thead-dark">
+                                <th>Input</th>
+                                <th>Valid</th>
+                                <th>Type</th>
+                                <th>Value</th>
+                                <th>Default</th>
+                            </thead>
+                            <tbody>
+                                @{var keys = data.node.getInputsNames() }
+                                @for(var i=0; i<keys.length; i++) {
+                                    @{ var key = keys[i]; }
+                                    @{ var inputData = debug.data[key]; }
+                                    @if( inputData.value ) {
+                                        @{ var val = data.m.getSnapshotValue(val); }
+                                    }
+                                    @if( inputData.default ) {
+                                        @{ var defaultValue = data.m.getSnapshotValue(inputData.default); }
+                                    }
+                                    <tr>
+                                        <td>
+                                            @(key)
+                                            @if( data.node.hasInputDesc(key) ) {
+                                                <button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="right" title="@(data.node.getInputDesc(key))" style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
+                                            }
+                                        </td>
+                                        <td>@(inputData.valid)</td>
+                                        <td>
+                                            @if( val ) {
+                                                @if( val.metadata && val.metadata.type ) {
+                                                    @(val.metadata.type)
+                                                }
+                                                else {
+                                                    @(typeof val)
+                                                }
+                                            }
+                                        </td>
+                                        <td>
+                                            @if( val ) {
+                                                @displayValue(val)
+                                            }
+                                        </td>
+                                        <td>
+                                            @if( defaultValue ) {
+                                                @displayValue(defaultValue)
+                                            }
+                                        </td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        }
+
+        @if( debug.cache ) {
+            <div class="card card-settings">
+                <div class="card-header" id="debug-node-cache" data-toggle="collapse" data-target="#debug-node-cache-collapse" aria-expanded="false" aria-controls="debug-node-cache-collapse">
+                    <h5 class="mb-0 btn-link">Cache</h5>
+                </div>
+                <div id="debug-node-cache-collapse" class="collapse" aria-labelledby="debug-node-cache" data-parent="#card-debug">
+                    <div class="card-body" style="padding-left: 15px;">
+                        <table class="table-desc table-striped">
+                            <thead class="thead-dark">
+                                <th>Output</th>
+                                <th>Value</th>
+                            </thead>
+                            <tbody>
+                                @{var keys = Object.keys(debug.cache) }
+                                @for(var i=0; i<keys.length; i++) {
+                                    @{ var key = keys[i]; }
+                                    @{ var outputData = data.m.getSnapshotValue(debug.cache[key]); }
+                                    <tr>
+                                        <td>@(key)</td>
+                                        <td>@displayValue(outputData)</td>
+                                    </tr>
+                                }
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        }
+
+        @if( debug.times ) {
+            @if( debug.times.emissions && (debug.times.emissions.lastRead || debug.times.emissions.lastInvalidate || debug.times.emissions.lastData ) ) {
+            <div class="card card-settings">
+                <div class="card-header" id="debug-node-events" data-toggle="collapse" data-target="#debug-node-events-collapse" aria-expanded="false" aria-controls="debug-node-events-collapse">
+                    <h5 class="mb-0 btn-link">Last events</h5>
+                </div>
+                <div id="debug-node-events-collapse" class="collapse" aria-labelledby="debug-node-events" data-parent="#card-debug">
+                    <div class="card-body" style="padding-left: 15px;">
+
+                        @if( debug.times.emissions.lastRead ) {
+                        <div class="mb-3">
+                            <p><b><u>Last read @displayNumber(debug.times.emissions.nbRead)</u> <span class="float-right">@displayTime(debug.times.emissions.lastRead.date)</span></b></p>
+                            <span>Missing: <b>@( debug.times.emissions.lastRead.data.join(', ') )</b></span><br/>
+                        </div>
+                        }
+
+                        @if( debug.times.emissions.lastInvalidate ) {
+                        <div class="mb-3">
+                            <p><b><u>Last Invalidate @displayNumber(debug.times.emissions.nbInvalidate)</u> <span class="float-right">@displayTime(debug.times.emissions.lastInvalidate.date)</span></b></p>
+                            <span>Invalidated keys: <b>@( debug.times.emissions.lastInvalidate.data.join(', ') )</b></span><br/>
+                        </div>
+                        }
+
+                        @if( debug.times.emissions.lastData ) {
+                        <div class="mb-3">
+                            <p><b><u>Last Data @displayNumber(debug.times.emissions.nbData)</u> <span class="float-right">@displayTime(debug.times.emissions.lastData.date)</span></b></p>
+                            <table class="table-desc table-striped">
+                                <thead class="thead-dark">
+                                    <th>Output</th>
+                                    <th>Value</th>
+                                </thead>
+                                <tbody>
+                                    @{var keys = Object.keys(debug.times.emissions.lastData.data) }
+                                    @for(var i=0; i<keys.length; i++) {
+                                        @{ var key = keys[i]; }
+                                        @{ var outputData = data.m.getSnapshotValue(debug.times.emissions.lastData.data[key]); }
+                                        <tr>
+                                            <td>@(key)</td>
+                                            <td>@displayValue(outputData)</td>
+                                        </tr>
+                                    }
+                                </tbody>
+                            </table>
+                        </div>
+                        }
+                    </div>
+                </div>
+            </div>
+            }
+
+            @if( debug.times.evaluations && (debug.times.evaluations.lastStart || debug.times.evaluations.lastEnd || debug.times.evaluations.lastCancel ) ) {
+            <div class="card card-settings">
+                <div class="card-header" id="debug-node-evaluations" data-toggle="collapse" data-target="#debug-node-evaluations-collapse" aria-expanded="false" aria-controls="debug-node-evaluations-collapse">
+                    <h5 class="mb-0 btn-link">Last evaluations</h5>
+                </div>
+                <div id="debug-node-evaluations-collapse" class="collapse" aria-labelledby="debug-node-evaluations" data-parent="#card-debug">
+                    <div class="card-body" style="padding-left: 15px;">
+
+                        @if( debug.times.evaluations.lastStart ) {
+                        <div class="mb-3">
+                            <p><b><u>Last start</u> <span class="float-right">@displayTime(debug.times.evaluations.lastStart.date)</span></b></p>
+                        </div>
+                        }
+
+                        @if( debug.times.evaluations.lastEnd ) {
+                        <div class="mb-3">
+                            <p><b><u>Last end</u> <span class="float-right">@displayTime(debug.times.evaluations.lastEnd.date)</span></b></p>
+                        </div>
+                        }
+
+                        @if( debug.times.evaluations.lastCancel ) {
+                        <div class="mb-3">
+                            <p><b><u>Last Cancel</u> <span class="float-right">@displayTime(debug.times.evaluations.lastCancel.date)</span></b></p>
+                            <span>reason: <b>@( debug.times.evaluations.lastCancel.reason )</b></span><br/>
+                        </div>
+                        }
+                    </div>
+                </div>
+            </div>
+            }
+        }
+
+
+        @if( debug.performances ) {
+            <div class="card card-performances">
+                <div class="card-header" id="debug-node-performances" data-toggle="collapse" data-target="#debug-node-performances-collapse" aria-expanded="false" aria-controls="debug-node-performances-collapse">
+                    <h5 class="mb-0 btn-link">Performances</h5>
+                </div>
+
+                <div id="debug-node-performances-collapse" class="collapse" aria-labelledby="debug-node-performances" data-parent="#debug-node">
+                    <div class="card-body" style="padding-left: 15px;">
+                        <table class="table-desc table-striped">
+                            <thead class="thead-dark">
+                                <th>Stat</th>
+                                <th>Value</th>
+                            </thead>
+                            <tbody>
+                                <tr><td>min</td><td>@(debug.performances.min && debug.performances.min.toFixed(0))ms</td></tr>
+                                <tr><td>max</td><td>@(debug.performances.max && debug.performances.max.toFixed(0))ms</td></tr>
+                                <tr><td>avg</td><td>@(debug.performances.avg && debug.performances.avg.toFixed(0))ms</td></tr>
+                                <tr><td>total</td><td>@(debug.performances.total && debug.performances.total.toFixed(0))ms</td></tr>
+                                <tr><td>Nb of runs</td><td>@(debug.performances.nbRuns)</td></tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+        }
+    </div>
+
+    <div class="modal debug-json-modal" tabindex="-1" role="dialog">
+        <div class="modal-dialog" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title">Value debugger</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <div class="json-editor" style="height: 400px;"></div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-primary btn-save">Save changes</button>
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+@function showStatus(s) {
+    @if( data.node.isSnapshotStatus(0) ) {
+        <span class="card-status-idle">IDLE</span>
+    }
+    @if( data.node.isSnapshotStatus(1) ) {
+        <span class="card-status-computing">COMPUTING</span>
+    }
+    @if( data.node.isSnapshotStatus(2) ) {
+        <span class="card-status-awaiting-data">WAITING</span>
+    }
+    @if( data.node.isSnapshotStatus(3) ) {
+        <span class="card-status-ready">READY</span>
+    }
+}
+
+@function short(s) {
+    @if( s.length > 20 ) {
+        @(s.slice(0,17) + "...")
+    }
+    else {
+        @(s)
+    }
+}
+
+@function displayValue(v) {
+    @if( v == null ) {
+        null
+    }
+    else if( v == undefined ) {
+        undefined
+    }
+    else if( typeof v == "number" || typeof v == "boolean" ) {
+        @(v)
+    }
+    else if( typeof(v) == "string" ) {
+        @if( v == "[[removed]]" ) {
+            @(v)  <button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="top" title="This data is too big to be snapshoted" style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
+        }
+        else if( v == "[[serialization failed]]" ) {
+            @(v)  <button type="button" class="btn btn-transparent" data-toggle="tooltip" data-placement="top" title="An error happened during serialization. Please report this as an issue." style="padding: 0;"><i class="text-info far fa-question-circle"></i></button>
+        }
+        else {
+            "@(v)"
+        }
+    }
+    else if( typeof(v) == "object" ) {
+        @if( Array.isArray(v) ) {
+            Array(...)
+            <button type="button" class="btn btn-primary btn-xs btn-displayValue" data-value="@(utils.htmlentities(JSON.stringify(v)))" style="font-weight: 900; width: 24px; padding-top: 6px; padding-bottom: 6px;">{ }</button>
+        }
+        else if( v.metadata && v.metadata.type ) {
+            @(v.metadata.type)(...)
+            <button type="button" class="btn btn-primary btn-xs btn-displayValue" data-value="@(utils.htmlentities(JSON.stringify(v)))" style="font-weight: 900; width: 24px; padding-top: 6px; padding-bottom: 6px;">{ }</button>
+        }
+        else {
+            ??
+        }
+    }
+}
+
+@function displayTime(d) {
+    @( moment(d).format('HH:mm:ss.SSS') )
+}
+
+@function displayNumber(n) {
+    @if( n ) {(@(n))}
+}

package/js/src/v/templates/debugNodeInfos.js

@@ -0,0 +1,31 @@
+const swal = require('sweetalert2');
+const _ = require('lodash');
+
+const JSONEditor = require('@dualbox/dualbox-lib-jsoneditor');
+
+var TemplateBinds = function(view, div, data) {
+    var node = data.node;
+    var pkg  = node.getPackage();
+    var editor = null;
+
+    div.ready(() => {
+        // bind the json editor
+        editor = new JSONEditor(div.find('.json-editor')[0], { modes: ['tree', 'code', 'text' ]});
+        editor.set({});
+
+        div.find('button[data-toggle="tooltip"]').tooltip();
+
+        div.find('.btn-displayValue').click(function(e) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            var modal = div.find('.debug-json-modal');
+            modal.modal('show');
+
+            var value = $(this).attr('data-value');
+            editor.set((value && JSON.parse(value)) || {});
+        });
+    });
+};
+
+module.exports = TemplateBinds;

package/js/src/v/templates/editMainSettings.css

@@ -0,0 +1,67 @@
+.card-settings .card-body {
+    font-size: 12px;
+    padding-left: 5px;
+    padding-right: 5px;
+}
+
+.fa {
+    pointer-events: none;
+}
+
+.table-desc {
+    width: 100%;
+}
+
+.table-desc thead td {
+    margin-right: 6px;
+}
+
+.table-desc tbody td {
+    margin-right: 6px;
+    padding-top: 8px;
+    padding-bottom: 8px;
+    height: 40px;
+}
+
+.application-description {
+    margin-top: 20px;
+    text-align: left;
+    font-size: 12px;
+}
+
+.card-header[data-toggle="collapse"] {
+    cursor: pointer;
+}
+
+.card-header[data-toggle="collapse"] h5 {
+    user-select: none;
+}
+
+.card-header[data-toggle="collapse"]:hover .btn-link {
+    text-decoration: none;
+}
+
+.text-value, .number-value, .boolean-value {
+    max-width: 140px;
+}
+
+.event-if, .event-data {
+    max-width: 80px;
+}
+
+.select-event-target, .select-event-name, .event-if, .event-data {
+    font-size: 12px;
+}
+
+.edit-body {
+    overflow-y: auto;
+    overflow-x: hidden;
+    max-height: calc(100% - 80px);
+}
+
+/* remove bs4 transition on collapsing */
+.edit-main-panel .collapsing {
+    -webkit-transition: none!important;
+    transition: none!important;
+    display: none!important;
+}