moved logs to 'edit' modal, removed log button

static/diagram.js

@@ -272,7 +272,6 @@ var DiagramNode = /** @class */ (function (_super) {
         _this.resize(ctx);
         _this.deleteButton = new Button(0, 0, "Del", ctx, _diagram.deleteNodeCallback, _this);
         _this.editButton = new Button(0, 0, "Edit", ctx, _diagram.editNodeCallback, _this);
-        _this.logButton = new Button(0, 0, "Log", ctx, _diagram.logNodeCallback, _this);
         _this.input = new NodeIO(_this, true);
         _this.output = new NodeIO(_this, false);
         _this.results = results;
@@ -288,8 +287,7 @@ var DiagramNode = /** @class */ (function (_super) {
         if (this.hover) {
             this.deleteButton.update(ms);
             this.editButton.update(ms);
-            this.logButton.update(ms);
+            var onButtons = this.deleteButton.hover || this.editButton.hover;
-            var onButtons = this.deleteButton.hover || this.editButton.hover || this.logButton.hover;
             if (!this.dragging && ms.leftDown && !ms.draggingNode && !ms.draggingConnection && !onButtons) {
                 this.dragging = true;
                 ms.draggingNode = true;
@@ -300,7 +298,6 @@ var DiagramNode = /** @class */ (function (_super) {
         else {
             this.deleteButton.hover = false;
             this.editButton.hover = false;
-            this.logButton.hover = false;
         }
         if (!ms.leftDown) {
             this.dragging = false;
@@ -324,8 +321,9 @@ var DiagramNode = /** @class */ (function (_super) {
         var labelY = ms.offset.y + this.y + 3 * 2 + this.labelHeight;
         ctx.fillText(this.label, labelX, labelY);
         ctx.font = "15px Helvetica";
+        ctx.fillStyle = "#898989";
         var typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2;
-        var typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight;
+        var typeY = ms.offset.y + this.y + this.height - 3;
         ctx.fillText(this.type, typeX, typeY);
         var resultCount = "" + this.results.length;
         var resultCountSize = ctx.measureText(resultCount);
@@ -340,9 +338,6 @@ var DiagramNode = /** @class */ (function (_super) {
         this.editButton.x = ms.offset.x + this.x + this.width - this.editButton.width;
         this.editButton.y = ms.offset.y + this.y + this.height - this.editButton.height;
         this.editButton.draw(ctx, ms);
-        this.logButton.x = ms.offset.x + this.x + this.width / 2 - this.logButton.width / 2;
-        this.logButton.y = ms.offset.y + this.y + this.height - this.logButton.height;
-        this.logButton.draw(ctx, ms);
         this.input.draw(ctx, ms);
         this.output.draw(ctx, ms);
         if (this.logs.length > 0) {
@@ -448,10 +443,9 @@ var MouseState = /** @class */ (function () {
     return MouseState;
 }());
 var Diagrams = /** @class */ (function () {
-    function Diagrams(canvasId, editNodeCallback, deleteNodeCallback, logNodeCallback) {
+    function Diagrams(canvasId, editNodeCallback, deleteNodeCallback) {
         if (editNodeCallback === void 0) { editNodeCallback = function () { }; }
         if (deleteNodeCallback === void 0) { deleteNodeCallback = function () { }; }
-        if (logNodeCallback === void 0) { logNodeCallback = function () { }; }
         this.shouldTick = true;
         this.nodes = new Map();
         this.connections = new Array();
@@ -462,7 +456,6 @@ var Diagrams = /** @class */ (function () {
         this.newConnection = null;
         this.scale = 1.0;
         this.editNodeCallback = function () { };
-        this.logNodeCallback = function () { };
         this.deleteNodeCallback = function () { };
         this.canvas = document.getElementById(canvasId);
         if (this.canvas === null) {
@@ -475,7 +468,6 @@ var Diagrams = /** @class */ (function () {
         _diagram = this;
         this.ctx = ctx;
         this.editNodeCallback = editNodeCallback;
-        this.logNodeCallback = logNodeCallback;
         this.deleteNodeCallback = deleteNodeCallback;
         this.canvas.onmousemove = diagramOnMouseMove;
         this.canvas.onmousedown = diagramOnMouseDown;

static/diagram.ts

@@ -298,7 +298,6 @@ class DiagramNode extends CanvasObject {
 
     deleteButton: Button;
     editButton: Button;
-    logButton: Button;
 
     dragging: boolean = false;
     dragOrigin: Point = new Point();
@@ -332,7 +331,6 @@ class DiagramNode extends CanvasObject {
 
         this.deleteButton = new Button(0, 0, "Del", ctx, _diagram.deleteNodeCallback, this);
         this.editButton = new Button(0, 0, "Edit", ctx, _diagram.editNodeCallback, this);
-        this.logButton = new Button(0, 0, "Log", ctx, _diagram.logNodeCallback, this);
 
         this.input = new NodeIO(this, true);
         this.output = new NodeIO(this, false);
@@ -349,8 +347,7 @@ class DiagramNode extends CanvasObject {
         if (this.hover){
             this.deleteButton.update(ms);
             this.editButton.update(ms);
-            this.logButton.update(ms);
+            let onButtons = this.deleteButton.hover || this.editButton.hover;
-            let onButtons = this.deleteButton.hover || this.editButton.hover || this.logButton.hover;
             if (!this.dragging && ms.leftDown && !ms.draggingNode && !ms.draggingConnection && !onButtons){
                 this.dragging = true;
                 ms.draggingNode = true;
@@ -360,7 +357,6 @@ class DiagramNode extends CanvasObject {
         } else {
             this.deleteButton.hover = false;
             this.editButton.hover = false;
-            this.logButton.hover = false;
         }
 
         if (!ms.leftDown){
@@ -388,8 +384,9 @@ class DiagramNode extends CanvasObject {
         ctx.fillText(this.label, labelX, labelY);
         
         ctx.font = "15px Helvetica";
+        ctx.fillStyle = "#898989";
         let typeX = ms.offset.x + this.x + this.width / 2 - this.typeWidth / 2;
-        let typeY = ms.offset.y + this.y + 3 * 3 + this.typeHeight + this.labelHeight;
+        let typeY = ms.offset.y + this.y + this.height - 3;
         ctx.fillText(this.type, typeX, typeY);
 
         let resultCount = `${this.results.length}`
@@ -407,10 +404,6 @@ class DiagramNode extends CanvasObject {
         this.editButton.x = ms.offset.x + this.x + this.width - this.editButton.width;
         this.editButton.y = ms.offset.y + this.y + this.height - this.editButton.height;
         this.editButton.draw(ctx, ms);
-
-        this.logButton.x = ms.offset.x + this.x + this.width / 2 - this.logButton.width / 2;
-        this.logButton.y = ms.offset.y + this.y + this.height - this.logButton.height;
-        this.logButton.draw(ctx, ms);
         
         this.input.draw(ctx, ms);
         this.output.draw(ctx, ms);
@@ -543,14 +536,12 @@ class Diagrams {
     scale: number = 1.0;
 
     editNodeCallback: (node: DiagramNode) => void = function (){};
-    logNodeCallback: (node: DiagramNode) => void = function (){};
     deleteNodeCallback: (node: DiagramNode) => void = function (){};
 
     constructor(
             canvasId: string, 
             editNodeCallback: (node: DiagramNode) => void = function (){},
             deleteNodeCallback: (node: DiagramNode) => void = function (){},
-            logNodeCallback: (node: DiagramNode) => void = function (){},
         ){
         this.canvas = document.getElementById(canvasId) as HTMLCanvasElement;
         if (this.canvas === null){
@@ -563,7 +554,6 @@ class Diagrams {
         _diagram = this;
         this.ctx = ctx;
         this.editNodeCallback = editNodeCallback;
-        this.logNodeCallback = logNodeCallback;
         this.deleteNodeCallback = deleteNodeCallback;
 
         this.canvas.onmousemove = diagramOnMouseMove;

static/edit.js

@@ -692,7 +692,7 @@ function onSubmitNewFilter() {
     });
 }
 function editNode(node) {
-    var e_2, _a;
+    var e_2, _a, e_3, _b;
     var addFilterButton = document.getElementById("filterButton");
     addFilterButton.click();
     var name = node.label;
@@ -717,11 +717,39 @@ function editNode(node) {
     onTypeChange(node);
     var submitButton = document.getElementById("submitFilterButton");
     submitButton.innerHTML = "Save";
+    var logHeader = document.getElementById("logHeader");
+    if (node.logs.length > 0) {
+        logHeader.innerHTML = "Logs";
+    }
+    else {
+        logHeader.innerHTML = "";
+    }
+    var logBody = document.getElementById("logTableBody");
+    logBody.innerHTML = "";
+    try {
+        for (var _c = __values(node.logs), _d = _c.next(); !_d.done; _d = _c.next()) {
+            var log = _d.value;
+            var row = document.createElement("tr");
+            var cell = document.createElement("td");
+            var code = document.createElement("code");
+            code.innerHTML = log;
+            cell.appendChild(code);
+            row.appendChild(cell);
+            logBody.appendChild(row);
+        }
+    }
+    catch (e_2_1) { e_2 = { error: e_2_1 }; }
+    finally {
+        try {
+            if (_d && !_d.done && (_a = _c["return"])) _a.call(_c);
+        }
+        finally { if (e_2) throw e_2.error; }
+    }
     var filterModalFooter = document.getElementById("filterResultsDiv");
     filterModalFooter.innerHTML = "";
     try {
-        for (var _b = __values(node.results), _c = _b.next(); !_c.done; _c = _b.next()) {
+        for (var _e = __values(node.results), _f = _e.next(); !_f.done; _f = _e.next()) {
-            var result = _c.value;
+            var result = _f.value;
             var cardDiv = document.createElement("div");
             cardDiv.classList.add("card", "my-2");
             var cardBody = document.createElement("div");
@@ -741,43 +769,14 @@ function editNode(node) {
             filterModalFooter.appendChild(cardDiv);
         }
     }
-    catch (e_2_1) { e_2 = { error: e_2_1 }; }
-    finally {
-        try {
-            if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
-        }
-        finally { if (e_2) throw e_2.error; }
-    }
-    submitButton.onclick = function () { submitEditNode(node); };
-}
-function logNode(node) {
-    var e_3, _a;
-    var logButton = document.getElementById("logButton");
-    logButton.click();
-    var logTitle = document.getElementById("logModalLabel");
-    logTitle.innerHTML = node.label;
-    var logBody = document.getElementById("logTableBody");
-    logBody.innerHTML = "";
-    var logTable = document.getElementById("logTable");
-    try {
-        for (var _b = __values(node.logs), _c = _b.next(); !_c.done; _c = _b.next()) {
-            var log = _c.value;
-            var row = document.createElement("tr");
-            var cell = document.createElement("td");
-            var code = document.createElement("code");
-            code.innerHTML = log;
-            cell.appendChild(code);
-            row.appendChild(cell);
-            logBody.appendChild(row);
-        }
-    }
     catch (e_3_1) { e_3 = { error: e_3_1 }; }
     finally {
         try {
-            if (_c && !_c.done && (_a = _b["return"])) _a.call(_b);
+            if (_f && !_f.done && (_b = _e["return"])) _b.call(_e);
         }
         finally { if (e_3) throw e_3.error; }
     }
+    submitButton.onclick = function () { submitEditNode(node); };
 }
 function deleteNode(node) {
     _diagram.nodes["delete"](node.id);

static/edit.ts

@@ -724,6 +724,24 @@ function editNode(node: DiagramNode){
     let submitButton = document.getElementById("submitFilterButton") as HTMLButtonElement;
     submitButton.innerHTML = "Save";
 
+    let logHeader = document.getElementById("logHeader") as HTMLHeadElement;
+    if (node.logs.length > 0){
+        logHeader.innerHTML = "Logs";
+    } else {
+        logHeader.innerHTML = "";
+    }
+    let logBody = document.getElementById("logTableBody") as HTMLElement;
+    logBody.innerHTML = "";
+    for (let log of node.logs){
+        let row = document.createElement("tr");
+        let cell = document.createElement("td");
+        let code = document.createElement("code");
+        code.innerHTML = log;
+        cell.appendChild(code);
+        row.appendChild(cell);
+        logBody.appendChild(row);
+    }
+
     let filterModalFooter = document.getElementById("filterResultsDiv") as HTMLDivElement;
     filterModalFooter.innerHTML = "";
     for (let result of node.results){
@@ -747,26 +765,6 @@ function editNode(node: DiagramNode){
     submitButton.onclick = function() {submitEditNode(node);}
 }
 
-function logNode(node: DiagramNode){
-    let logButton = document.getElementById("logButton") as HTMLButtonElement;
-    logButton.click();
-
-    let logTitle = document.getElementById("logModalLabel") as HTMLHeadElement;
-    logTitle.innerHTML = node.label;
-    let logBody = document.getElementById("logTableBody") as HTMLElement;
-    logBody.innerHTML = "";
-    let logTable = document.getElementById("logTable") as HTMLTableElement;
-    for (let log of node.logs){
-        let row = document.createElement("tr");
-        let cell = document.createElement("td");
-        let code = document.createElement("code");
-        code.innerHTML = log;
-        cell.appendChild(code);
-        row.appendChild(cell);
-        logBody.appendChild(row);
-    }
-}
-
 function deleteNode(node: DiagramNode){
     _diagram.nodes.delete(node.id)
     for (let i = 0; i < _diagram.connections.length; i++){

templates/watch/edit.html

@@ -39,11 +39,6 @@
                 Import Watch
             </button>
         </td>
-        <td id="OpenLogTD" hidden> 
-            <button type="button" id="logButton" class="btn btn-primary btn-sm" data-bs-toggle="modal" data-bs-target="#LogModal">
-                Open Log
-            </button>
-        </td>
         <td> 
             <a href="/watch/view/{{ .Watch.ID }}" class="btn btn-outline-secondary btn-sm">
                 View Watch
@@ -106,6 +101,13 @@
                     <div >
                         <button class="btn btn-primary mt-4"  data-bs-dismiss="modal" id="submitFilterButton">Add Filter</button>
                     </div>
+                    <div class="h3 text-center text-danger" id="logHeader">Logs</div>
+                    <table class="table table-hover table-sm" id="logTable">
+                        <tbody id="logTableBody">
+
+                        </tbody>
+                    </table>
+                    <div class="h3 text-center">Outputs</div>
                     <div id="filterResultsDiv">
                     </div>
                 </div>
@@ -158,31 +160,6 @@
     </div>
 </div>
 
-<div class="modal fade" id="LogModal" tabindex="-1" aria-labelledby="logModalLabel" aria-hidden="true">
-    <div class="modal-dialog modal-lg">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h5 class="modal-title" id="logModalLabel">-</h5>
-                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
-            </div>
-            <div class="modal-body">
-                <div>
-                    <table class="table table-hover table-sm" id="logTable">
-                        <thead>
-                            <tr>
-                                <th scope="col">Message</th>
-                            </tr>
-                        </thead>
-                        <tbody id="logTableBody">
-
-                        </tbody>
-                    </table>
-                </div>
-            </div>
-        </div>
-    </div>
-</div>
-
 <div class="modal fade" id="ImportModal" tabindex="-1" aria-labelledby="ImportModalLabel" aria-hidden="true">
     <div class="modal-dialog modal-lg">
         <div class="modal-content">
@@ -211,7 +188,7 @@
 <script>
 var diagrams;
 function canvasInit() {
-    diagrams = new Diagrams("canvas", editNode, deleteNode, logNode);
+    diagrams = new Diagrams("canvas", editNode, deleteNode);
     {{ range .Filters }}
         diagrams.addNode(
             {{ .ID }},