var NtnxDashboard;
NtnxDashboard = {
/**
*
* @param {*} config
*
* Initialise the application
*
*/
init: function ( config )
{
this.config = config;
this.setupGridster();
this.setUI();
this.bindEvents();
/* load the saved/default dashboard when the DOM is ready */
$( document).ready( function() {
NtnxDashboard.loadLayout();
});
},
/* init */
/**
*
* @param {*} cell
*
* Remove existing contents of a specified DOM element
*
*/
resetCell: function( cell )
{
$( '#' + cell ).html( '' );
},
/* resetCell */
/**
*
* @param {*} token
* @param {*} cvmAddress
* @param {*} username
* @param {*} password
* @param {*} entity
* @param {*} pageElement
* @param {*} elementTitle
*
* main function to build and send the entity list requests
* the previous version of this used a single function for each request
*
*/
pcListEntities: function( token, cvmAddress, username, password, entity, pageElement, elementTitle ) {
pcEntityInfo = $.ajax({
url: '/ajax/pc-list-entities',
type: 'POST',
dataType: 'json',
data: { _token: token, _cvmAddress: cvmAddress, _username: username, _password: password, _entity: entity, _pageElement: pageElement, _elementTitle: elementTitle },
});
pcEntityInfo.done( function(data) {
NtnxDashboard.resetCell( pageElement );
$( '#' + pageElement ).addClass( 'info_big' ).append( '
' + elementTitle + '
' + data.results.metadata.total_matches + '
');
switch( entity ) {
case 'project':
$( '#project_details' ).addClass( 'info_big' ).html( 'Project List
' );
$( data.results.entities ).each( function( index, item ) {
$( '#project_details' ).append( '' + item.status.name + '
' );
});
$( '#project_details' ).append( '' );
default:
break;
}
});
},
/* pcListEntities */
/**
*
* @param {*} token
*
* Remove the big graph DOM element from the page entirely
* Legacy function from previous version, but may be used again
*
*/
removeGraph: function( token ) {
var gridster = $( '.gridster ul' ).gridster().data( 'gridster' );
var element = $( '#bigGraph' );
gridster.remove_widget( element );
},
/* removeGraph */
/**
*
* @param {*} token
*
* Revert the altered grid layout to the default from when the lab app was built
*
*/
restoreDefaultLayout: function( token ) {
var gridster = $( '.gridster ul' ).gridster().data( 'gridster' );
gridster.remove_all_widgets();
/* AJAX call to get the default layout from the system's default dashboard */
request = $.ajax({
url: '/ajax/load-default',
type: 'POST',
dataType: 'json',
data: { _token: token },
});
request.done( function(data) {
serialization = Gridster.sort_by_row_and_col_asc( JSON.parse( data.layout ) );
$.each( serialization, function() {
gridster.add_widget('', this.size_x, this.size_y, this.col, this.row);
});
NtnxDashboard.resetCell( 'footerWidget' );
$( 'li#footerWidget' ).addClass( 'panel' ).append( '' );
$( '#status_new' ).html( 'Default layout restored. Don\'t forget to save!' ).removeClass().addClass( 'alert' ).addClass( 'alert-warning' ).slideDown( 300 );
});
request.fail(function ( jqXHR, textStatus, errorThrown )
{
$( '#status_new' ).removeClass().html( textStatus + ' - ' + errorThrown ).addClass( 'alert' ).addClass( 'alert-error' );
});
},
/* restoreDefaultLayout */
/**
*
* @param {*} token
*
* Save the user's layout changes to on-disk JSON file
*
*/
saveLayout: function( token ) {
/* get the gridster object */
var gridster = $( '.gridster ul' ).gridster().data( 'gridster' );
/* serialize the current layout */
var json = gridster.serialize();
/* convert the layout to json */
var serialized = JSON.stringify( json );
/* AJAX call to save the layout the app's configuration file */
request = $.ajax({
url: '/ajax/save-to-json',
type: 'POST',
dataType: 'json',
data: { _token: token, _serialized: serialized },
});
request.done( function(data) {
$( '#status_new' ).removeClass().html( 'Dashboard saved!' ).addClass( 'alert' ).addClass( 'alert-success' ).slideDown( 300 ).delay( 2000 ).slideUp( 300 );
});
request.fail(function ( jqXHR, textStatus, errorThrown )
{
$( '#status_new' ).removeClass().html( textStatus + ' - ' + errorThrown ).addClass( 'alert' ).addClass( 'alert-error' );
});
},
/* saveLayout */
/**
*
* Can't remember what this is for lol
* Just kidding - it's for some tests carried out during development
*
*/
s4: function()
{
return Math.floor((1 + Math.random()) * 0x10000).toString(16).substring(1);
},
/* s4 */
/**
*
* Load the existing/saved grid layout from dashboard.json
* This file holds the default layout if no changes have been made, or the layout setup by the user after saving
*
*/
loadLayout: function()
{
request = $.ajax({
url: '/ajax/load-layout',
type: 'POST',
dataType: 'json',
data: {},
});
var cvmAddress = $( '#cvmAddress' ).val();
var username = $( '#username' ).val();
var password = $( '#password' ).val();
request.done( function( data ) {
var gridster = $( '.gridster ul' ).gridster().data( 'gridster' );
var serialization = JSON.parse( data.layout );
serialization = Gridster.sort_by_row_and_col_asc(serialization);
$.each( serialization, function() {
gridster.add_widget('', this.size_x, this.size_y, this.col, this.row);
});
/* add the chart markup to the largest containers */
$( 'li#footerWidget' ).addClass( 'panel' ).append( '' );
NtnxDashboard.resetCell( 'bigGraph' );
$( '#bigGraph' ).addClass( 'info_hilite' ).append( 'Hey ...
Enter your Prism Central details above, then click the Go button ...
');
$( '#hints' ).addClass( 'info_hilite' ).append( 'Also ...
Drag & Drop
The Boxes
');
});
request.fail(function ( jqXHR, textStatus, errorThrown )
{
/* Display an error message */
alert( 'Unfortunately an error occurred while processing the request. Status: ' + textStatus + ', Error Thrown: ' + errorThrown );
});
},
/* loadLayout */
/**
*
* Setup the page's main grid
*
*/
setupGridster: function ()
{
$( function ()
{
var gridster = $( '.gridster ul' ).gridster( {
widget_margins: [ 10, 10 ],
widget_base_dimensions: [ 170, 170 ],
max_cols: 10,
autogrow_cols: true,
resize: {
enabled: true
},
draggable: {
stop: function( e, ui, $widget ) {
$( '#status_new' ).html( 'Your dashboard layout has changed. Don\'t forget to save!' ).removeClass().addClass( 'alert' ).addClass( 'alert-warning' ).slideDown( 300 );
}
},
serialize_params: function ($w, wgd) {
return {
/* add element ID to data*/
id: $w.attr('id'),
/* defaults */
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
}
}
} ).data( 'gridster' );
} );
},
/* setupGridster */
/**
*
* Apply tooltips to various elements and setup the delay on some animations
*
*/
setUI: function ()
{
$( 'div.alert-success' ).delay( 3000 ).slideUp( 1000 );
$( 'div.alert-info' ).delay( 3000 ).slideUp( 1000 );
$(function () {
$('[data-toggle="tooltip"]').tooltip()
})
},
/* setUI */
/**
*
* Bind events that will get triggered in response to various actions
* In particular, button clicks
*
*/
bindEvents: function()
{
var self = NtnxDashboard;
$( '#goButton' ).on( 'click', function ( e ) {
var cvmAddress = $( '#cvmAddress' ).val();
var username = $( '#username' ).val();
var password = $( '#password' ).val();
if( ( cvmAddress == '' ) || ( username == '' ) || ( password == '' ) )
{
NtnxDashboard.resetCell( 'bigGraph' );
$( '#bigGraph' ).addClass( 'info_error' ).append( 'Awww ...
Did you forget to enter something?
');
}
else
{
NtnxDashboard.resetCell( 'bigGraph' );
$( '#bigGraph' ).html( '' ).removeClass( 'info_hilite' ).removeClass( 'info_error' ).addClass( 'info_big' ).append( 'Ok ...
Gathering environment details ...
');
NtnxDashboard.resetCell( 'hints' );
$( '#hints' ).html( '' ).addClass( 'info_hilite' ).append( 'Also ...
Drag & Drop
The Boxes
');
NtnxDashboard.pcListEntities( $( '#csrf_token' ).val(), cvmAddress, username, password, 'cluster', 'registered_clusters', 'Registered Clusters' );
NtnxDashboard.pcListEntities( $( '#csrf_token' ).val(), cvmAddress, username, password, 'image', 'image_count', 'Images' );
NtnxDashboard.pcListEntities( $( '#csrf_token' ).val(), cvmAddress, username, password, 'vm', 'vm_count', 'VMs' );
NtnxDashboard.pcListEntities( $( '#csrf_token' ).val(), cvmAddress, username, password, 'host', 'host_count', 'Hosts & PC Nodes' );
NtnxDashboard.pcListEntities( $( '#csrf_token' ).val(), cvmAddress, username, password, 'project', 'project_count', 'Project Count' );
NtnxDashboard.pcListEntities( $( '#csrf_token' ).val(), cvmAddress, username, password, 'app', 'app_count', 'Calm Apps' );
NtnxDashboard.containerInfo( $( '#csrf_token' ).val(), cvmAddress, username, password, 'controllerIOPS', 'Controller IOPS' );
}
e.preventDefault();
});
$( '.saveLayout' ).on( 'click', function( e ) {
NtnxDashboard.saveLayout( $( '#csrf_token' ).val() );
e.preventDefault();
});
$( '.defaultLayout' ).on( 'click', function( e ) {
NtnxDashboard.restoreDefaultLayout( $( '#csrf_token' ).val() );
e.preventDefault();
});
$( '.removeGraph' ).on( 'click', function( e ) {
NtnxDashboard.removeGraph( $( '#csrf_token' ).val() );
e.preventDefault();
});
},
/* bindEvents */
containerInfo: function( token, cvmAddress, username, password ) {
/* AJAX call to get some container stats */
request = $.ajax({
url: '/ajax/container-info',
type: 'POST',
dataType: 'json',
data: { _token: token, _cvmAddress: cvmAddress, _username: username, _password: password },
});
request.done( function(data) {
var plot1 = $.jqplot ('controllerIOPS', data.stats, {
title: 'Controller Average I/O Latency',
animate: true,
axesDefaults: {
labelRenderer: $.jqplot.CanvasAxisLabelRenderer,
tickOptions: {
showMark: false,
show: true,
},
showTickMarks: false,
showTicks: false
},
seriesDefaults: {
rendererOptions: {
smooth: false
},
showMarker: false,
fill: true,
fillAndStroke: true,
color: '#b4d194',
fillColor: '#b4d194',
fillAlpha: '0.3',
// fillColor: '#bfde9e',
shadow: false,
shadowAlpha: 0.1,
},
axes: {
xaxis: {
min: 5,
max: 120,
tickOptions: {
showGridline: true,
}
},
yaxis: {
tickOptions: {
showGridline: false,
}
}
}
});
NtnxDashboard.resetCell( 'containers' );
$( '#containers' ).addClass( 'info_big' ).append( 'Container(s)
' + data.containerCount + '
');
});
},
/* containerInfo */
};
NtnxDashboard.init({
});