aboutsummaryrefslogtreecommitdiffstats
path: root/web/js
diff options
context:
space:
mode:
Diffstat (limited to 'web/js')
-rw-r--r--web/js/nms-oplog.js317
-rw-r--r--web/js/nms-types.js7
-rw-r--r--web/js/nms-ui-boxes.js123
-rw-r--r--web/js/nms.js6
4 files changed, 336 insertions, 117 deletions
diff --git a/web/js/nms-oplog.js b/web/js/nms-oplog.js
index cea75ca..eb0fd28 100644
--- a/web/js/nms-oplog.js
+++ b/web/js/nms-oplog.js
@@ -1,26 +1,80 @@
"use strict";
+/*
+ * Please note: I've started moving this to a new and better way of doing
+ * things and it is by no means a finished move. This means that this file is a
+ * mess of two different styles at the time of this writing. Fix incomming.
+ */
var nmsOplog = nmsOplog || {
table: {}
}
-
-nmsOplog.init = function() {
- nmsData.addHandler("oplog", "nmsOplogHandler", nmsOplog.updateComments);
+nmsOplog.init = function() {
+ nms.oplog = new nmsOplog2()
}
-
-nmsOplog._reset = function() {
- document.getElementById('logbox-id').value = "";
- document.getElementById('logbox').value = "";
- document.getElementById('searchbox').value = "";
- document.getElementById('searchbox').oninput();
+nmsOplog.getSwitchLogs = function(sw) {
+ var logs = [];
+ if (nmsData.oplog == undefined || nmsData['oplog']['oplog'] == undefined)
+ return [];
+ for (var v in nmsData['oplog']['oplog']) {
+ var log = nmsData['oplog']['oplog'][v];
+ if (log['systems'] != "" && log['systems'] != undefined) {
+ if (nmsSearch.searchTest(log['systems'],sw)) {
+ logs.push(log);
+ }
+ }
+ }
+ return logs;
}
-nmsOplog.getUser = function(force) {
- if (force == undefined)
- force = false;
- var user = nms.user;
- if (user == undefined || force) {
- user = prompt("Who are you? Short nick for the record.");
+// New-style-work-in-progress follows
+class nmsOplog2 {
+ constructor() {
+ this.logger = new nmsOplogInput()
+ this.logger.attach("navbar")
+ this.logger.show()
+ this.mini = new nmsLogTable()
+ this.full = new nmsLogTable("full", "large",0,0);
+ this.mini.attach("oplog-parent-mini")
+ this.full.attach("oplog-parent")
+ this.mini.show()
+ this.full.show()
+ nmsData.addHandler("oplog", "nmsOplogHandler", this.updateComments,this);
+ }
+ updateComments(x) {
+ x.mini.update()
+ x.full.update()
+ }
+}
+class nmsOplogInput extends nmsBox {
+ constructor() {
+ super("div",{html:{class: "navbar-form", classList:["navbar-form","navbar-right","gondul-is-private"]}})
+ var systemParent = new nmsBox("div",{html:{class:"form-group",classList:["form-group"]}});
+ this._systems = new nmsBox("input", {html:{class:"form-control",classList:["form-control"],type:"text",size:"8",placeholder:"System(s)"}});
+ this._systems.searchbox = document.getElementById("searchbox")
+ this._systems.html.oninput = function(e) {
+ this.nmsBox.searchbox.value = this.value;
+ this.nmsBox.searchbox.oninput();
+ }
+ systemParent.add(this._systems)
+ this.add(systemParent)
+ var entryParent = new nmsBox("div",{html:{class:"form-group",classList:["form-group"]}});
+ this._entry = new nmsBox("input", {html:{class:"form-control",classList:["form-control"],type:"text",size:"30",placeholder:"Log entry"}});
+ entryParent.add(this._entry)
+ this.add(entryParent)
+ var button = new nmsBox("button",{html:{classList:["btn","btn-default"],type:"button"}});
+ button.html.textContent = "Log";
+ button.container = this;
+ button.html.onclick = function(element) {
+ this.nmsBox.container.commit(element)
+ }
+ this.add(button);
+ }
+ /* Should be moved to nms.user probably */
+ get user() {
+ if (nms.user) {
+ return nms.user;
+ }
+ var user = prompt("Who are you? Short nick for the record.");
if (user == null || user == undefined || user == "") {
console.log("empty prompt");
alert("No cake for you.");
@@ -28,103 +82,170 @@ nmsOplog.getUser = function(force) {
}
nms.user = user;
saveSettings();
+ return nms.user;
}
- return nms.user;
-}
-
-nmsOplog.commit = function() {
- var s = document.getElementById('logbox-id').value;
- var d = document.getElementById('logbox').value;
- var user = nmsOplog.getUser();
- if (user == undefined) {
- nmsOplog._reset();
- return;
+ _empty(input) {
+ if (input == undefined || input == null || input == "") {
+ return "";
+ }
+ return input;
}
- if (d == undefined || d == null || d == "") {
- return;
+ get entry() {
+ return this._empty(this._entry.html.value)
}
-
- var myData = {"user": user, "systems": s, "log": d};
- myData = JSON.stringify(myData);
- $.ajax({
- type: "POST",
- url: "/api/write/oplog",
- dataType: "text",
- data:myData,
- success: function (data, textStatus, jqXHR) {
- nmsData.invalidate("oplog");
- }
- });
- nmsOplog._reset();
-}
-
-nmsOplog.updateComments = function() {
- nmsOplog._updateComments(10,"-mini","time",100);
- nmsOplog._updateComments(0,"","timestamp");
-}
-
-nmsOplog.getSwitchLogs = function(sw) {
- var logs = [];
- if (nmsData.oplog == undefined || nmsData['oplog']['oplog'] == undefined)
- return [];
- for (var v in nmsData['oplog']['oplog']) {
- var log = nmsData['oplog']['oplog'][v];
- if (log['systems'] != "" && log['systems'] != undefined) {
- if (nmsSearch.searchTest(log['systems'],sw)) {
- logs.push(log);
- }
+ get systems() {
+ return this._empty(this._systems.html.value)
+ }
+ commit(element) {
+ if (!this.user) {
+ console.log("need a user...")
+ return false;
+ }
+ if (this.entry == "") {
+ return false;
}
+ var myData = {"user": this.user, "systems": this.systems, "log": this.entry};
+ myData = JSON.stringify(myData);
+ $.ajax({
+ type: "POST",
+ url: "/api/write/oplog",
+ dataType: "text",
+ data:myData,
+ success: function (data, textStatus, jqXHR) {
+ nmsData.invalidate("oplog");
+ }
+ });
+ this.blank()
+ }
+ blank() {
+ this._entry.html.value = "";
+ this._systems.html.value = "";
+ this._systems.searchbox.value = "";
+ this._systems.searchbox.oninput()
}
- return logs;
}
+
/*
* This can be re-written now that it uses nmsBox... That rewrite was just a short
* test of nmsBox...
*/
-nmsOplog._updateComments = function(limit,prefix,timefield,cutoff) {
- var table = new nmsTable([]);
- var i = 0;
- for (var v in nmsData['oplog']['oplog']) {
- if (cutoff && nmsData.oplog.oplog[v]['username'] == "system") {
- continue;
+class nmsLogTable extends nmsTable {
+ constructor(mode = "small", timestyle = "small", cutoff = 100, limit = 10) {
+ super([]);
+ this.mode = mode;
+ this.timestyle = timestyle;
+ this.cutoff = cutoff;
+ this.limit = limit;
+ this.entries = {}
+ this.first = true;
+ }
+ /* This is a horrible implementation. BUT THAT'S WHAT YOU GET
+ */
+ syncToTable() {
+ var i = 1;
+ var pastCut = false;
+ var indexes = [];
+ for (var idx in this.entries) {
+ indexes.push(parseInt(idx))
+ }
+ // Testint to see what browsers I can break with exciting new
+ // syntax
+ indexes.sort((x,y) => y-x)
+ for (var idx in indexes) {
+ var entry = this.entries[indexes[idx]];
+ if (!pastCut) {
+ if (entry == undefined) {
+ console.log("wtf, empty?")
+ console.log(entry)
+ } else {
+ entry.build(this.cutoff,this.timestyle)
+ if(!this.includes(entry)) {
+ // FIXME: This is dumb. It assumes we only get one update.
+ if (this.first) {
+ this.add(entry)
+ } else {
+ this.insert(entry)
+ }
+ }
+ }
+ } else {
+ if(this.includes(entry)) {
+ this.remove(entry)
+ }
+ }
+ if(this.limit > 0 && ++i > this.limit) {
+ pastCut = true;
+ }
}
- var col1;
- var date = new Date(nmsData.oplog.oplog[v]['timestamp'].replace(" ","T").replace("+00",""));
- if (timefield == "time") {
- col1 = date.toTimeString().replace(/:\d\d .*$/,"");
+ this.first=false;
+ }
+ update() {
+ var candidates = nmsData['oplog']['oplog'];
+ for (var i in candidates) {
+ var candidate = candidates[i];
+ if (this.entries[candidate.id] != undefined) {
+ continue;
+ } else {
+ this.entries[candidate.id] = new nmsOplogEntry(candidate);
+ }
+ }
+ this.syncToTable();
+ }
+}
+
+class nmsOplogEntry extends nmsBox {
+ build(cutoff,timestyle) {
+ if (this.built) {
+ return true;
+ }
+ var td1 = new nmsBox("td")
+ var td2 = new nmsBox("td")
+ if(timestyle == "small") {
+ td1.add(new nmsString(this.shortTime()))
} else {
- var month = date.getMonth() + 1;
- var day = date.getDate();
- var tmp = (date.getYear() + 1900) + "-" + (month < 10 ? "0": "") + month + "-" + (day < 10 ? "0" : "") + day + " " + date.toTimeString().replace(/:\d\d .*$/,"");
- col1 = tmp;
- }
- var data = nmsData['oplog']['oplog'][v]['log'];
- var col2 = new nmsBox("p");
- if (cutoff && data.length > cutoff) {
- col2.html.title = data;
- data = data.slice(0,cutoff);
- data = data + "(...)";
- }
- col2.html.textContent = nmsData['oplog']['oplog'][v]['systems'] + " [" + nmsData['oplog']['oplog'][v]['username'] + "] " + data;
- col2.html.hiddenthing = v;
+ td1.add(new nmsString(this.longTime()))
+ }
+ var col2 = new nmsString(this.systems + " [" + this.username + "] " + this.getData(cutoff));
+ if (this.title != null) {
+ col2.html.title = this.title;
+ }
+ col2.searchbox = document.getElementById("searchbox")
+ col2.entry = this;
col2.html.onclick = function(e) {
var x = document.getElementById("searchbox");
var v = e.path[0].hiddenthing;
- x.value = nmsData['oplog']['oplog'][v]['systems'];
- x.oninput();
- }
- table.add([col1,col2]);
- if (++i == limit)
- break;
- }
- try {
- var old = document.getElementById("oplog-table" + prefix);
- old.parentElement.removeChild(old);
- } catch(e) {}
- var par = document.getElementById("oplog-parent" + prefix);
- table.html.id = "oplog-table" + prefix;
- par.appendChild(table.html);
- nmsOplog.table["x" + prefix] = table;
-};
+ this.nmsBox.searchbox.value = this.nmsBox.entry.systems;
+ this.nmsBox.searchbox.oninput()
+ }
+ this.add(td1)
+ td2.add(col2)
+ this.add(td2)
+ this.built = true;
+ }
+ constructor(entry) {
+ super("tr")
+ this.td1 = null;
+ this.td2 = null;
+ this.time = new Date(entry.timestamp.replace(" ","T"))
+ this.id = entry.id;
+ this.data = entry.log;
+ this.title = null;
+ this.systems = entry.systems;
+ this.username = entry.username;
+ }
+ longTime() {
+ return this.time.toISOString();
+ }
+ shortTime() {
+ return this.time.toTimeString().replace(/:\d\d .*$/,"");
+ }
+ getData(cutoff = 0) {
+ if (cutoff && this.data.length > cutoff) {
+ this.title = this.data;
+ return this.data.slice(0,cutoff) + "(...)";
+ }
+ return this.data;
+ }
+}
diff --git a/web/js/nms-types.js b/web/js/nms-types.js
index 254c00b..c077505 100644
--- a/web/js/nms-types.js
+++ b/web/js/nms-types.js
@@ -35,6 +35,13 @@ class nmsType {
validate(input) {
return true;
}
+ toString() {
+ if (this._value == null || this._value == undefined) {
+ return ""
+ } else {
+ return this._value.toString();
+ }
+ }
get value() {
return this._value;
}
diff --git a/web/js/nms-ui-boxes.js b/web/js/nms-ui-boxes.js
index ac4445e..385d601 100644
--- a/web/js/nms-ui-boxes.js
+++ b/web/js/nms-ui-boxes.js
@@ -61,16 +61,93 @@ class nmsBox {
}
add(box) {
this._boxes.push(box);
- this.html.appendChild(box.html);
+ box.attach(this.html)
+ box.show()
}
- close() {
- for (var x in this._boxes) {
- this._boxes[x].close();
+ insert(box) {
+ this._boxes.unshift(box)
+ box.attach(this.html)
+ box.show(true,-1)
+ }
+
+ /* This is provided so as to allow attaching to non-nmsBox-objects.
+ * E.g.: attach the root to a HTML element directly.
+ * If you just use foo = document.getElement...,
+ * foo.appendChild(box.html), then .hide() will work fine,
+ * but there's no way to do .show() afterwards.
+ *
+ * Be aware:
+ * - we want to AVOID the child knowing too much about the parent
+ * - HTML elements can only ever be part of a single parent
+ * element. This means that it is safe to attach(root1), .show(),
+ * atach(root2), show() ... The DOM object wil be removed from root1.
+ * - Due to the above, we should probably actually adress that, since
+ * there are valid reasons for showing the same nmsBox twice (e.g.:
+ * showing a list of tons of stuff, and also a "top 5")
+ */
+ attach(root) {
+ if (!(root instanceof HTMLElement)) {
+ root = document.getElementById(root)
+ }
+ console.assert(root instanceof HTMLElement)
+ this._root = root;
+ }
+ show(show = true,where=1) {
+ if (!show) {
+ this.hide()
+ return
+ }
+ if (this._root instanceof HTMLElement) {
+ if (where>0) {
+ this._root.appendChild(this.html);
+ } else {
+ this._root.insertBefore(this.html,this._root.firstElementChild)
+ }
+ }
+ }
+ _remove(source,box) {
+ source.html.removeChild(box.html)
+ if (box._root == source) {
+ box._root = undefined;
+ }
+ var x = source._boxes.indexOf(box)
+ delete source._boxes[x]
+ }
+ _includes(source,box) {
+ if (source._boxes.indexOf(box) >= 0) {
+ return true;
+ } else {
+ return false;
}
- if (this.html.parentElement != null) {
+ }
+ /*
+ * This redirect is to make it easier for subclasses that
+ * override add() to make it eaiser to add logical
+ * childs, e.g. adding to a table really adds to ._tbody,
+ * not the true top-element of the table.
+ */
+ remove(box) {
+ this._remove(this,box)
+ }
+ includes(box) {
+ return this._includes(this,box);
+ }
+ hide() {
+ if (this.html.parentElement instanceof HTMLElement) {
this.html.parentElement.removeChild(this.html);
}
}
+ destroy() {
+ this.hide()
+ for (var i in this._boxes) {
+ var x = this._boxes[i];
+ x.hide()
+ x.destroy()
+ delete this._boxes[i]
+ }
+ delete this.html;
+ delete this;
+ }
update() {
for (var x in this._boxes) {
this._boxes[x].update();
@@ -112,13 +189,15 @@ class nmsTable extends nmsBox {
this.add(content[v]);
}
}
- /* Can take either a single nmsBox-object that will be added as-is,
- * or an array of items that will be added as individual cells
- */
- add(content) {
+ remove(box) {
+ this._remove(this._tbody,box)
+ }
+ includes(box) {
+ return this._tbody.includes(box)
+ }
+ _makeBox(content) {
if (content instanceof nmsBox) {
- this._tbody.add(content)
- return;
+ return content;
}
var tr;
var td1;
@@ -138,7 +217,16 @@ class nmsTable extends nmsBox {
}
tr.add(td);
}
- this._tbody.add(tr);
+ return tr;
+ }
+ /* Can take either a single nmsBox-object that will be added as-is,
+ * or an array of items that will be added as individual cells
+ */
+ add(content) {
+ this._tbody.add(this._makeBox(content));
+ }
+ insert(box) {
+ this._tbody.insert(this._makeBox(box));
}
}
@@ -160,8 +248,15 @@ class nmsPanel extends nmsBox{
this._topBox.add(this.nav);
this._topBox.add(this._body);
super.add(this._topBox);
- this._root = document.getElementById("metaContainer");
- this._root.appendChild(this.html);
+ }
+ attach(root = document.getElementById("metaContainer")) {
+ super.attach(root)
+ }
+ show() {
+ if (!this._root) {
+ this.attach()
+ }
+ super.show()
}
/* Mainly just to make the constructor more readable. */
makeHeading(title) {
diff --git a/web/js/nms.js b/web/js/nms.js
index 7eb3dfd..c85e8fb 100644
--- a/web/js/nms.js
+++ b/web/js/nms.js
@@ -49,7 +49,6 @@ var nms = {
get user() { return this._user; },
set user(u) {
this._user = u;
- document.getElementById('logbook-name').textContent = u;
saveSettings();
},
/*
@@ -403,8 +402,6 @@ function initNMS() {
nmsData.registerSource("smanagement","/api/read/switches-management");
nmsData.registerSource("oplog", "/api/read/oplog");
nmsData.registerSource("networks","/api/read/networks");
- // setInterval(nmsUpdateNavbarGraph, 30000);
- // nmsUpdateNavbarGraph();
nmsOplog.init();
}
@@ -454,8 +451,7 @@ function setMenu()
function setOplog()
{
- var nav = document.getElementById("oplog-parent-mini");
- nav.style.display = nms.oplogShowing ? '' : 'none';
+ //nmsOplog.table["x-mini"].show(nms.oplogShowing)
}
function toggleMenu()
generated by cgit v1.2.3 (git 2.25.1) at 2025-10-27 09:00:59 +0000