From cd819e0b269186042276a934a6becd36a88a99c8 Mon Sep 17 00:00:00 2001 From: hkernbach Date: Tue, 25 Apr 2017 19:27:30 +0200 Subject: [PATCH] node info view --- .../APP/frontend/js/routers/router.js | 44 +++++-- .../frontend/js/templates/nodeInfoView.ejs | 27 +++++ .../APP/frontend/js/templates/nodesView.ejs | 38 +++--- .../APP/frontend/js/views/nodeInfoView.js | 108 ++++++++++++++++++ .../APP/frontend/js/views/nodeView.js | 8 ++ .../APP/frontend/js/views/nodesView.js | 15 ++- .../aardvark/APP/frontend/scss/_nodes.scss | 3 +- 7 files changed, 214 insertions(+), 29 deletions(-) create mode 100644 js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodeInfoView.ejs create mode 100644 js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeInfoView.js diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js b/js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js index 92b3fcd1f0..ae643647c6 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js +++ b/js/apps/system/_admin/aardvark/APP/frontend/js/routers/router.js @@ -39,6 +39,7 @@ 'nodes': 'nodes', 'shards': 'shards', 'node/:name': 'node', + 'nodeInfo/:id': 'nodeInfo', 'logs': 'logger', 'helpus': 'helpUs', 'graph/:name': 'graph', @@ -327,16 +328,40 @@ return; } - if (!this.nodeView) { - this.nodeView = new window.NodeView({ - coordname: name, - coordinators: this.coordinatorCollection, - dbServers: this.dbServers - }); + if (this.nodeView) { + this.nodeView.remove(); } + this.nodeView = new window.NodeView({ + coordname: name, + coordinators: this.coordinatorCollection, + dbServers: this.dbServers + }); this.nodeView.render(); }, + nodeInfo: function (id, initialized) { + this.checkUser(); + if (!initialized || this.isCluster === undefined) { + this.waitForInit(this.nodeInfo.bind(this), id); + return; + } + if (this.isCluster === false) { + this.routes[''] = 'dashboard'; + this.navigate('#dashboard', {trigger: true}); + return; + } + + if (this.nodeInfoView) { + this.nodeInfoView.remove(); + } + this.nodeInfoView = new window.NodeInfoView({ + nodeId: id, + coordinators: this.coordinatorCollection, + dbServers: this.dbServers[0] + }); + this.nodeInfoView.render(); + }, + shards: function (initialized) { this.checkUser(); if (!initialized || this.isCluster === undefined) { @@ -367,10 +392,11 @@ this.navigate('#dashboard', {trigger: true}); return; } - if (!this.nodesView) { - this.nodesView = new window.NodesView({ - }); + if (this.nodesView) { + this.nodesView.remove(); } + this.nodesView = new window.NodesView({ + }); this.nodesView.render(); }, diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodeInfoView.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodeInfoView.ejs new file mode 100644 index 0000000000..2889431ccc --- /dev/null +++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodeInfoView.ejs @@ -0,0 +1,27 @@ + diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodesView.ejs b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodesView.ejs index ed1ba839fa..6ed7b1fda7 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodesView.ejs +++ b/js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodesView.ejs @@ -47,10 +47,10 @@
Name
-
Endpoint
-
Heartbeat
-
Status
-
+
Endpoint
+
Since
+
Info
+
Status
@@ -67,16 +67,17 @@ <% } %> -
<%= node.Endpoint %>
+
<%= node.Endpoint %>
<% var formatted = (node.LastHeartbeatAcked).substr(11, 18).slice(0, -1); %> -
<%= formatted %>
-
<%= node.LastHeartbeatStatus %>
+
<%= formatted %>
+ +
<% if(node.Status === 'GOOD') { %> -
+
<% } else { %> -
+
<% } %> @@ -128,10 +129,10 @@
Name
-
Endpoint
-
Heartbeat
-
Status
-
+
Endpoint
+
Since
+
Info
+
Status
<% } %> @@ -143,16 +144,17 @@
<%= node.ShortName %>
-
<%= node.Endpoint %>
+
<%= node.Endpoint %>
<% var formatted = (node.LastHeartbeatAcked).substr(11, 18).slice(0, -1); %> -
<%= formatted %>
-
<%= node.LastHeartbeatStatus %>
+
<%= formatted %>
+ +
<% if(node.Status === 'GOOD') { %> -
+
<% } else { %> -
+
<% } %>
diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeInfoView.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeInfoView.js new file mode 100644 index 0000000000..39bbff0939 --- /dev/null +++ b/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeInfoView.js @@ -0,0 +1,108 @@ +/* jshint browser: true */ +/* jshint unused: false */ +/* global arangoHelper, $, Backbone, templateEngine, window */ +(function () { + 'use strict'; + + window.NodeInfoView = Backbone.View.extend({ + el: '#content', + + template: templateEngine.createTemplate('nodeInfoView.ejs'), + + initialize: function (options) { + if (window.App.isCluster) { + this.nodeId = options.nodeId; + this.dbServers = options.dbServers; + this.coordinators = options.coordinators; + } + }, + + remove: function () { + this.$el.empty().off(); /* off to unbind the events */ + this.stopListening(); + this.unbind(); + delete this.el; + return this; + }, + + render: function () { + this.$el.html(this.template.render({entries: []})); + + var callback = function () { + this.continueRender(); + this.breadcrumb(arangoHelper.getCoordinatorShortName(this.nodeId)); + $(window).trigger('resize'); + }.bind(this); + + if (!this.initCoordDone) { + this.waitForCoordinators(); + } + + if (!this.initDBDone) { + this.waitForDBServers(callback); + } else { + this.nodeId = window.location.hash.split('/')[1]; + this.coordinator = this.coordinators.findWhere({name: this.coordname}); + callback(); + } + }, + + continueRender: function () { + var model; + if (this.coordinator) { + model = this.coordinator.toJSON(); + } else { + model = this.dbServer.toJSON(); + } + + var renderObj = {}; + renderObj.Name = model.name; + renderObj.Address = model.address; + renderObj.Status = model.status; + renderObj.Protocol = model.protocol; + renderObj.Role = model.role; + this.$el.html(this.template.render({entries: renderObj})); + }, + + breadcrumb: function (name) { + $('#subNavigationBar .breadcrumb').html('Node: ' + name); + }, + + waitForCoordinators: function (callback) { + var self = this; + + window.setTimeout(function () { + if (self.coordinators.length === 0) { + self.waitForCoordinators(callback); + } else { + self.coordinator = self.coordinators.findWhere({name: self.nodeId}); + self.initCoordDone = true; + if (callback) { + callback(); + } + } + }, 200); + }, + + waitForDBServers: function (callback) { + var self = this; + + window.setTimeout(function () { + if (self.dbServers.length === 0) { + self.waitForDBServers(callback); + } else { + self.initDBDone = true; + + self.dbServers.each(function (model) { + if (model.get('id') === self.nodeId) { + self.dbServer = model; + } + }); + + callback(); + } + }, 200); + } + + }); +}()); diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeView.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeView.js index 5f81d42c10..cf48f40205 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeView.js +++ b/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeView.js @@ -30,6 +30,14 @@ } }, + remove: function () { + this.$el.empty().off(); /* off to unbind the events */ + this.stopListening(); + this.unbind(); + delete this.el; + return this; + }, + breadcrumb: function (name) { $('#subNavigationBar .breadcrumb').html('Node: ' + name); }, diff --git a/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodesView.js b/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodesView.js index 6d4e23ea3c..be281a3be0 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodesView.js +++ b/js/apps/system/_admin/aardvark/APP/frontend/js/views/nodesView.js @@ -22,6 +22,14 @@ 'keyup #plannedDBs': 'checkKey' }, + remove: function () { + this.$el.empty().off(); /* off to unbind the events */ + this.stopListening(); + this.unbind(); + delete this.el; + return this; + }, + checkKey: function (e) { if (e.keyCode === 13) { var self = this; @@ -121,11 +129,16 @@ }, navigateToNode: function (elem) { + var name = $(elem.currentTarget).attr('node').slice(0, -5); + + if ($(elem.target).hasClass('fa-info-circle')) { + window.App.navigate('#nodeInfo/' + encodeURIComponent(name), {trigger: true}); + return; + } if ($(elem.currentTarget).hasClass('noHover')) { return; } - var name = $(elem.currentTarget).attr('node').slice(0, -5); window.App.navigate('#node/' + encodeURIComponent(name), {trigger: true}); }, diff --git a/js/apps/system/_admin/aardvark/APP/frontend/scss/_nodes.scss b/js/apps/system/_admin/aardvark/APP/frontend/scss/_nodes.scss index 937445bbc3..cafed0ad68 100644 --- a/js/apps/system/_admin/aardvark/APP/frontend/scss/_nodes.scss +++ b/js/apps/system/_admin/aardvark/APP/frontend/scss/_nodes.scss @@ -33,8 +33,9 @@ .pure-table-body { .fa-check-circle, + .fa-info-circle, .fa-exclamation-circle { - font-size: 15pt; + font-size: 13pt; } }