Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

addtional info inside dashboard view

This commit is contained in:
hkernbach 2017-05-09 20:26:43 +02:00
parent 7f92f80e59
commit 841dc1ed95
7 changed files with 297 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
js/apps/system/_admin/aardvark/APP/frontend/js/templates/dashboardView.ejs
View File

@ -93,23 +93,28 @@
<div id="requests">
<div class="contentDiv">
<div class="dashboard-row pure-u">
<% largeChart("requestsChart", "Requests per Second") %>
<div class="dashboard-row pure-u cluster-values" id="node-info" style="width: 100%; margin-top: 0;">
</div>
<% tendency("Request Types", "asyncRequests", false); %>
<% tendency("Number of Client Connections", "clientConnections", false); %>
<% if (hideStatistics !== true) { %>
<div class="dashboard-row pure-u">
<% largeChart("requestsChart", "Requests per Second") %>
<% tendency("Request Types", "asyncRequests", false); %>
<% tendency("Number of Client Connections", "clientConnections", false); %>
</div>
<div class="dashboard-row pure-u small-label-padding">
<% largeChart("dataTransferChart", "Transfer Size per Second") %>
<% smallChart("dataTransferDistribution", "Transfer Size per Second (distribution)", false) %>
</div>
<div class="dashboard-row pure-u small-label-padding">
<% largeChart("totalTimeChart", "Average Request Time (seconds)") %>
<% smallChart("totalTimeDistribution", "Average Request Time (distribution)", false) %>
</div>
</div>
<div class="dashboard-row pure-u small-label-padding">
<% largeChart("dataTransferChart", "Transfer Size per Second") %>
<% smallChart("dataTransferDistribution", "Transfer Size per Second (distribution)", false) %>
</div>
<div class="dashboard-row pure-u small-label-padding">
<% largeChart("totalTimeChart", "Average Request Time (seconds)") %>
<% smallChart("totalTimeDistribution", "Average Request Time (distribution)", false) %>
</div>
</div>
<% } %>
</div>
<div id="system" class="tendency-box-sizing" style="display: none";>

44
js/apps/system/_admin/aardvark/APP/frontend/js/templates/nodesView.ejs
View File

@ -46,11 +46,10 @@
<div class="pure-g cluster-nodes-title pure-table pure-table-header pure-title" style="clear: both">
<div class="pure-table-row">
<div class="pure-u-9-24 left">Name</div>
<div class="pure-u-9-24 left">Endpoint</div>
<div class="pure-u-2-24 mid hide-small">Since</div>
<div class="pure-u-2-24 mid">Info</div>
<div class="pure-u-2-24 mid">Status</div>
<div class="pure-u-10-24 left">Name</div>
<div class="pure-u-10-24 left">Endpoint</div>
<div class="pure-u-3-24 mid hide-small">Since</div>
<div class="pure-u-1-24 mid"></div>
</div>
</div>
@ -60,24 +59,22 @@
<div class="pure-table-row <%= disabled %>" node="<%= id %>">
<div class="pure-u-9-24 left">
<div class="pure-u-10-24 left">
<%= node.ShortName %>
<i class="fa fa-bar-chart"></i>
<% if(node.Status === 'FAILED') { %>
<i class="fa fa-trash-o"></i>
<% } %>
</div>
<div class="pure-u-9-24 left"><%= node.Endpoint %></div>
<div class="pure-u-10-24 left"><%= node.Endpoint %></div>
<% var formatted = (node.LastHeartbeatAcked).substr(11, 18).slice(0, -1); %>
<div class="pure-u-2-24 hide-small mid"><%= formatted %></div>
<div class="pure-u-3-24 hide-small mid"><%= formatted %></div>
<div class="pure-u-2-24 mid"><i class="fa fa-info-circle"></i></div>
<% if(node.Status === 'GOOD') { %>
<div class="pure-u-2-24 mid state"><i class="fa fa-check-circle tippy" title="<%= node.LastHeartbeatStatus %>"></i></div>
<div class="pure-u-1-24 mid state"><i class="fa fa-check-circle tippy" title="<%= node.LastHeartbeatStatus %>"></i></div>
<% } else { %>
<div class="pure-u-2-24 mid state"><i class="fa fa-exclamation-circle"></i></div>
<div class="pure-u-1-24 mid state"><i class="fa fa-exclamation-circle"></i></div>
<% } %>
</div>
@ -90,7 +87,7 @@
<% if (Object.keys(dbs).length > 0) { %>
<% var disabled = ''; %>
<% disabled = " disabled"; %>
<% disabled = " dbserver"; %>
<div class="pure-u-1-1 pure-u-md-1-1 pure-u-lg-1-1 pure-u-xl-1-2">
<div class="sectionHeader pure-g">
<div class="pure-u-1-5">
@ -128,11 +125,10 @@
<div class="pure-g cluster-nodes-title pure-table pure-table-header pure-title">
<div class="pure-table-row">
<div class="pure-u-9-24 left">Name</div>
<div class="pure-u-9-24 left">Endpoint</div>
<div class="pure-u-2-24 mid hide-small">Since</div>
<div class="pure-u-2-24 mid">Info</div>
<div class="pure-u-2-24 mid">Status</div>
<div class="pure-u-10-24 left">Name</div>
<div class="pure-u-10-24 left">Endpoint</div>
<div class="pure-u-3-24 mid hide-small">Since</div>
<div class="pure-u-1-24 mid"></div>
</div>
</div>
<% } %>
@ -143,18 +139,16 @@
<div class="pure-table-row <%= disabled %>" node="<%= id %>">
<div class="pure-u-9-24 left"><%= node.ShortName %></div>
<div class="pure-u-9-24 left"><%= node.Endpoint %></div>
<div class="pure-u-10-24 left"><%= node.ShortName %></div>
<div class="pure-u-10-24 left"><%= node.Endpoint %></div>
<% var formatted = (node.LastHeartbeatAcked).substr(11, 18).slice(0, -1); %>
<div class="pure-u-2-24 mid hide-small"><%= formatted %></div>
<div class="pure-u-2-24 mid"><i class="fa fa-info-circle"></i></div>
<div class="pure-u-3-24 mid hide-small"><%= formatted %></div>
<% if(node.Status === 'GOOD') { %>
<div class="pure-u-2-24 mid state"><i class="fa fa-check-circle tippy" title="<%= node.LastHeartbeatStatus %>"></i></div>
<div class="pure-u-1-24 mid state"><i class="fa fa-check-circle tippy" title="<%= node.LastHeartbeatStatus %>"></i></div>
<% } else { %>
<div class="pure-u-2-24 mid state"><i class="fa fa-exclamation-circle"></i></div>
<div class="pure-u-1-24 mid state"><i class="fa fa-exclamation-circle"></i></div>
<% } %>
</div>

270
js/apps/system/_admin/aardvark/APP/frontend/js/views/dashboardView.js
View File

@ -1,6 +1,6 @@
/* jshint browser: true */
/* jshint unused: false */
/* global Backbone, $, window, arangoHelper, nv, d3, prettyBytes */
/* global Backbone, $, window, arangoHelper, moment, nv, d3, prettyBytes */
/* global document, console, frontendConfig, Dygraph, _,templateEngine */
(function () {
@ -603,6 +603,131 @@
}
},
renderStatisticBox: function (name, value, title) {
// box already rendered, just update value
if ($('#node-info #nodeattribute-' + name).length) {
$('#node-info #nodeattribute-' + name).html(value);
} else {
var elem = '';
elem += '<div class="pure-u-1-2 pure-u-md-1-4" style="background-color: #fff">';
elem += '<div class="valueWrapper">';
if (title) {
elem += '<div id="nodeattribute-' + name + '" class="value tippy" title="' + value + '">' + value + '</div>';
} else {
elem += '<div id="nodeattribute-' + name + '" class="value">' + value + '</div>';
}
elem += '<div class="graphLabel">' + name + '</div>';
elem += '</div>';
elem += '</div>';
$('#node-info').append(elem);
}
},
getNodeInfo: function () {
var self = this;
if (frontendConfig.isCluster) {
// Cluster node
if (this.serverInfo.isDBServer) {
this.renderStatisticBox('Role', 'DBServer');
} else {
this.renderStatisticBox('Role', 'Coordinator');
}
this.renderStatisticBox('Host', this.serverInfo.raw, this.serverInfo.raw);
if (this.serverInfo.endpoint) {
this.renderStatisticBox('Protocol', this.serverInfo.endpoint.substr(0, this.serverInfo.endpoint.indexOf('/') - 1));
} else {
this.renderStatisticBox('Protocol', 'Error');
}
this.renderStatisticBox('ID', this.serverInfo.target, this.serverInfo.target);
// get node version + license
$.ajax({
type: 'GET',
cache: false,
url: arangoHelper.databaseUrl('/_admin/clusterNodeVersion?ServerID=' + this.serverInfo.target),
contentType: 'application/json',
processData: false,
success: function (data) {
self.renderStatisticBox('Version', frontendConfig.version.version);
self.renderStatisticBox('License', frontendConfig.version.license);
},
error: function (data) {
self.renderStatisticBox('Version', 'Error');
self.renderStatisticBox('License', 'Error');
}
});
// get server engine
$.ajax({
type: 'GET',
cache: false,
url: arangoHelper.databaseUrl('/_admin/clusterNodeEngine?ServerID=' + this.serverInfo.target),
contentType: 'application/json',
processData: false,
success: function (data) {
self.renderStatisticBox('Engine', data.name);
},
error: function (data) {
self.renderStatisticBox('Engine', 'Error');
}
});
// get server statistics
$.ajax({
type: 'GET',
cache: false,
url: arangoHelper.databaseUrl('/_admin/clusterNodeStats?ServerID=' + this.serverInfo.target),
contentType: 'application/json',
processData: false,
success: function (data) {
self.renderStatisticBox('Uptime', moment.duration(data.server.uptime, 'seconds').humanize());
},
error: function (data) {
self.renderStatisticBox('Uptime', 'Error');
}
});
} else {
// Standalone
// version + license
this.renderStatisticBox('Version', frontendConfig.version.version);
this.renderStatisticBox('License', frontendConfig.version.license);
// engine status
$.ajax({
type: 'GET',
cache: false,
url: arangoHelper.databaseUrl('/_api/engine'),
contentType: 'application/json',
processData: false,
success: function (data) {
self.renderStatisticBox('Engine', data.name);
},
error: function () {
self.renderStatisticBox('Engine', 'Error');
}
});
// uptime status
$.ajax({
type: 'GET',
cache: false,
url: arangoHelper.databaseUrl('/_admin/statistics'),
contentType: 'application/json',
processData: false,
success: function (data) {
self.renderStatisticBox('Uptime', moment.duration(data.server.uptime, 'seconds').humanize());
},
error: function () {
self.renderStatisticBox('Uptime', 'Error');
}
});
}
arangoHelper.createTooltips();
},
getStatistics: function (callback, modalView) {
var self = this;
self.checkState();
@ -991,78 +1116,95 @@
template: templateEngine.createTemplate('dashboardView.ejs'),
render: function (modalView) {
this.delegateEvents(this.events);
var callback = function (enabled, modalView) {
if (!modalView) {
$(this.el).html(this.template.render());
}
if (!enabled || frontendConfig.db !== '_system') {
$(this.el).html('');
if (this.server) {
$(this.el).append(
'<div style="color: red">Server statistics (' + this.server + ') are disabled.</div>'
);
} else {
$(this.el).append(
'<div style="color: red">Server statistics are disabled.</div>'
);
if (this.serverInfo === undefined) {
this.serverInfo = {
isDBServer: false
};
}
if (this.serverInfo.isDBServer !== true) {
this.delegateEvents(this.events);
var callback = function (enabled, modalView) {
if (!modalView) {
$(this.el).html(this.template.render({
hideStatistics: false
}));
this.getNodeInfo();
}
if (!enabled || frontendConfig.db !== '_system') {
$(this.el).html('');
if (this.server) {
$(this.el).append(
'<div style="color: red">Server statistics (' + this.server + ') are disabled.</div>'
);
} else {
$(this.el).append(
'<div style="color: red">Server statistics are disabled.</div>'
);
}
return;
}
this.prepareDygraphs();
if (this.isUpdating) {
this.prepareD3Charts();
this.prepareResidentSize();
this.updateTendencies();
$(window).trigger('resize');
}
this.startUpdating();
$(window).resize();
}.bind(this);
var errorFunction = function () {
$(this.el).html('');
$('.contentDiv').remove();
$('.headerBar').remove();
$('.dashboard-headerbar').remove();
$('.dashboard-row').remove();
$(this.el).append(
'<div style="color: red">You do not have permission to view this page.</div>'
);
$(this.el).append(
'<div style="color: red">You can switch to \'_system\' to see the dashboard.</div>'
);
}.bind(this);
if (frontendConfig.db !== '_system') {
errorFunction();
return;
}
this.prepareDygraphs();
if (this.isUpdating) {
this.prepareD3Charts();
this.prepareResidentSize();
this.updateTendencies();
$(window).trigger('resize');
}
this.startUpdating();
$(window).resize();
}.bind(this);
var errorFunction = function () {
$(this.el).html('');
$('.contentDiv').remove();
$('.headerBar').remove();
$('.dashboard-headerbar').remove();
$('.dashboard-row').remove();
$(this.el).append(
'<div style="color: red">You do not have permission to view this page.</div>'
);
$(this.el).append(
'<div style="color: red">You can switch to \'_system\' to see the dashboard.</div>'
);
}.bind(this);
if (frontendConfig.db !== '_system') {
errorFunction();
return;
}
var callback2 = function (error, authorized) {
if (!error) {
if (!authorized) {
errorFunction();
} else {
this.getStatistics(callback, modalView);
var callback2 = function (error, authorized) {
if (!error) {
if (!authorized) {
errorFunction();
} else {
this.getStatistics(callback, modalView);
}
}
}
}.bind(this);
}.bind(this);
if (window.App.currentDB.get('name') === undefined) {
window.setTimeout(function () {
if (window.App.currentDB.get('name') !== '_system') {
errorFunction();
return;
}
if (window.App.currentDB.get('name') === undefined) {
window.setTimeout(function () {
if (window.App.currentDB.get('name') !== '_system') {
errorFunction();
return;
}
// check if user has _system permission
this.options.database.hasSystemAccess(callback2);
}.bind(this), 300);
} else {
// check if user has _system permission
this.options.database.hasSystemAccess(callback2);
}.bind(this), 300);
}
} else {
// check if user has _system permission
this.options.database.hasSystemAccess(callback2);
$(this.el).html(this.template.render({
hideStatistics: true
}));
// hide menu entries
$('.subMenuEntry').remove();
this.getNodeInfo();
}
}
});

3
js/apps/system/_admin/aardvark/APP/frontend/js/views/footerView.js
View File

@ -1,6 +1,6 @@
/* jshint browser: true */
/* jshint unused: false */
/* global _, Backbone, document, templateEngine, $, arangoHelper, window */
/* global _, Backbone, frontendConfig, document, templateEngine, $, arangoHelper, window */
(function () {
'use strict';
@ -180,6 +180,7 @@
processData: false,
async: true,
success: function (data) {
frontendConfig.version = data;
self.showServerStatus(true);
if (self.isOffline === true) {
self.isOffline = false;

51
js/apps/system/_admin/aardvark/APP/frontend/js/views/nodeView.js
View File

@ -67,20 +67,42 @@
continueRender: function () {
var self = this;
var dashboard;
this.dashboards[this.coordinator.get('name')] = new window.DashboardView({
dygraphConfig: window.dygraphConfig,
database: window.App.arangoDatabase,
serverToShow: {
raw: this.coordinator.get('address'),
isDBServer: false,
endpoint: this.coordinator.get('protocol') + '://' + this.coordinator.get('address'),
target: this.coordinator.get('name')
}
});
this.dashboards[this.coordinator.get('name')].render();
if (this.coordinator) {
dashboard = this.coordinator.get('name');
// coordinator
this.dashboards[this.coordinator.get('name')] = new window.DashboardView({
dygraphConfig: window.dygraphConfig,
database: window.App.arangoDatabase,
serverToShow: {
raw: this.coordinator.get('address'),
isDBServer: false,
endpoint: this.coordinator.get('protocol') + '://' + this.coordinator.get('address'),
target: this.coordinator.get('name')
}
});
} else {
// db server
var attributes = this.dbServer.toJSON();
dashboard = attributes.name;
this.dashboards[attributes.name] = new window.DashboardView({
dygraphConfig: null,
database: window.App.arangoDatabase,
serverToShow: {
raw: attributes.address,
isDBServer: true,
endpoint: attributes.endpoint,
id: attributes.id,
name: attributes.name,
status: attributes.status,
target: attributes.id
}
});
}
this.dashboards[dashboard].render();
window.setTimeout(function () {
self.dashboards[self.coordinator.get('name')].resize();
self.dashboards[dashboard].resize();
}, 500);
},
@ -111,8 +133,9 @@
self.dbServer = self.dbServers[0];
self.dbServer.each(function (model) {
if (model.get('name') === 'DBServer001') {
self.dbServer = model;
var id = model.get('id');
if (id === window.location.hash.split('/')[1]) {
self.dbServer = self.dbServer.findWhere({id: id});
}
});

13
js/apps/system/_admin/aardvark/APP/frontend/js/views/nodesView.js
View File

@ -12,7 +12,7 @@
events: {
'click #nodesContent .coords-nodes .pure-table-row': 'navigateToNode',
'click #nodesContent .dbs-nodes .pure-table-row': 'navigateToInfo',
'click #nodesContent .dbs-nodes .pure-table-row': 'navigateToNode',
'click #nodesContent .coords-nodes .pure-table-row .fa-trash-o': 'deleteNode',
'click #addCoord': 'addCoord',
'click #removeCoord': 'removeCoord',
@ -129,20 +129,9 @@
return false;
},
navigateToInfo: 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});
}
},
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;
}

12
js/apps/system/_admin/aardvark/APP/frontend/scss/_newDashboard.scss
View File

@ -463,6 +463,18 @@
margin-left: 2px;
margin-right: 0;
.valueWrapper {
.value {
font-size: 18pt !important;
font-weight: 100;
overflow: hidden;
padding-left: 10px;
padding-right: 10px;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.fa-arrows-alt {
display: none;
}