Commit e91cdb6c authored by Keith Downie's avatar Keith Downie Committed by Leigh B Stoller

Updated mockup for status dropdown

parent fedb9868
......@@ -352,15 +352,16 @@ left: -999em;
position: relative;
}
.cluster_picker_status .picker_stats {
.cluster_picker_status .tooltip_div {
position: absolute;
right: 10px;
top: 4px;
top: 3px;
}
.cluster_picker_status .dropdown-toggle .picker_stats {
position: absolute;
right: 35px;
top: 8px;
top: 6px;
z-index: 2;
}
......@@ -372,6 +373,67 @@ left: -999em;
color: #FF6600;
}
.cluster_picker_status .circle {
display: block;
border-radius: 50%;
border: 5px solid;
width: 20px;
height: 20px;
position: relative;
}
.cluster_picker_status .resource_healthy .circle {
background-color: #449d44;
}
.cluster_picker_status .resource_unhealthy .circle {
background-color: #ec971f;
}
.cluster_picker_status .resource_down .circle {
background-color: #c9302c;
}
.cluster_picker_status .status_healthy .circle {
border-color: #398439;
}
.cluster_picker_status .status_unhealthy .circle {
border-color: #d58512;
}
.cluster_picker_status .status_down .circle {
border-color: #ac2925;
background-color: #c9302c;
}
.cluster_picker_status .resource_healthy .tooltip.right .tooltip-inner, .cluster_picker_status .status_healthy .tooltip.left .tooltip-inner {
background-color: #398439;
}
.cluster_picker_status .resource_healthy .tooltip.right .tooltip-arrow, .cluster_picker_status .status_healthy .tooltip.left .tooltip-arrow {
border-right-color: #398439;
border-left-color: #398439;
}
.cluster_picker_status .resource_unhealthy .tooltip.right .tooltip-inner, .cluster_picker_status .status_unhealthy .tooltip.left .tooltip-inner {
background-color: #d58512;
}
.cluster_picker_status .resource_unhealthy .tooltip.right .tooltip-arrow, .cluster_picker_status .status_unhealthy .tooltip.left .tooltip-arrow {
border-right-color: #d58512;
border-left-color: #d58512;
}
.cluster_picker_status .resource_down .tooltip.right .tooltip-inner, .cluster_picker_status .status_down .tooltip.left .tooltip-inner {
background-color: #ac2925;
}
.cluster_picker_status .resource_down .tooltip.right .tooltip-arrow, .cluster_picker_status .status_down .tooltip.left .tooltip-arrow {
border-right-color: #ac2925;
border-left-color: #ac2925;
}
.cluster_picker_status .selected {
background-color: #f5f5f5;
}
......
......@@ -39,7 +39,7 @@ function (_, Constraints, sup, ppstart, JacksEditor, wt, aboutaptString, aboutcl
$('#instantiate_submit').prop('disabled', true);
$.get(contextUrl).then(contextReady, contextFail);
var jqxhr = $.getJSON('https://clnode063.clemson.cloudlab.us:8081/index.html?names=urn&callback=?')
var jqxhr = $.getJSON('https://clnode095.clemson.cloudlab.us:8081/index.html?names=urn&callback=?')
.done(function(data) {
monitor = data;
// Check if third tab is already active.
......@@ -362,6 +362,19 @@ function (_, Constraints, sup, ppstart, JacksEditor, wt, aboutaptString, aboutcl
return;
}
console.log(monitor);
// HARDCODED FOR MOCKUP, REMOVE
monitor["urn:publicid:IDN+utahddc.geniracks.net+authority+cm"] = {health:0,status:"FAILURE"};
monitor["urn:publicid:IDN+emulab.net+authority+cm"].rawPCsAvailable = 14;
monitor["urn:publicid:IDN+clemson.cloudlab.us+authority+cm"].health = 49;
monitor["urn:publicid:IDN+wisc.cloudlab.us+authority+cm"].rawPCsAvailable = 20;
$('#finalize_options .cluster-group').each(function() {
var which = $(this).parent().parent().attr('class');
......@@ -382,10 +395,12 @@ function (_, Constraints, sup, ppstart, JacksEditor, wt, aboutaptString, aboutcl
// Calculate testbed rating and set up tooltips.
var rating = wt.CalculateRating(data);
target.parent().attr('data-rating', rating[0]);
target.parent().attr('data-health', rating[0]).attr('data-rating', rating[1]);
var classes = wt.AssignStatusClass(rating[0], rating[1]);
target.addClass(classes[0]).addClass(classes[1]);
var stats = wt.StatsLineHTML(wt.AssignGlyph(rating[0]), rating[1]);
target.append(stats);
target.append(wt.StatsLineHTML(classes, rating[2]));
}
});
......@@ -679,7 +694,7 @@ function (_, Constraints, sup, ppstart, JacksEditor, wt, aboutaptString, aboutcl
" <div class='form-group cluster-group'>" +
" <label class='col-sm-4 control-label' " +
" style='text-align: right;'>"+
" Site " + siteid + " Cluster:</a>" +
" " + siteid + " Cluster:</a>" +
" </label> " +
" <div class='col-sm-6'>" +
" <select name=\"formfields[sites][" + siteid + "]\"" +
......
......@@ -32,7 +32,7 @@ function(_) {
function StatusClickEvent(html, that) {
html.find('.dropdown-toggle .value').html($(that).attr('value'));
if ($(that).children('.picker_stats').length) {
if ($(that).find('.picker_stats').length) {
if (!html.find('.dropdown-toggle > .picker_stats').length) {
html.find('.dropdown-toggle').append('<div class="picker_stats"></div>');
}
......@@ -40,7 +40,7 @@ function(_) {
html.find('.dropdown-toggle > .picker_stats').html('');
}
html.find('.dropdown-toggle > .picker_stats').append($(that).children('.picker_stats').html());
html.find('.dropdown-toggle > .picker_stats').append($(that).find('.picker_stats').html());
}
html.find('.selected').removeClass('selected');
......@@ -48,33 +48,31 @@ function(_) {
}
function CalculateRating(data, type) {
var health = 0;
var rating = 0;
var tooltip = '';
var tooltip = [];
if (data.status == 'SUCCESS') {
if (data.health) {
rating = data.health;
tooltip += '<div>Testbed is '
if (rating >= 75) {
tooltip += 'healthy';
}
else if (rating >= 50) {
tooltip += 'moderately healthy';
health = data.health;
tooltip[0] = '<div>Testbed is '
if (health >= 50) {
tooltip[0] += 'healthy';
}
else {
tooltip += 'unhealthy';
tooltip[0] += 'unhealthy';
}
tooltip += '</div>';
tooltip[0] += '</div>';
}
else {
rating = 100;
tooltip += '<div>Testbed is up</div>'
health = 100;
tooltip[0] = '<div>Testbed is up</div>'
}
}
else {
tooltip += '<div>Testbed is down</div>'
return [rating, tooltip];
tooltip[0] = '<div>Testbed is down</div>'
return [health, rating, tooltip];
}
var available, max, label;
......@@ -91,36 +89,53 @@ function(_) {
if (!isNaN(available) && !isNaN(max)) {
var ratio = available/max;
rating = rating * ratio;
tooltip += '<div>'+available+'/'+max+' ('+Math.round(ratio*100)+'%) '+label+' available</div>';
rating = available;
tooltip[1] = '<div>'+available+'/'+max+' ('+Math.round(ratio*100)+'%) '+label+' available</div>';
}
return [rating, tooltip];
return [health, rating, tooltip];
}
function AssignGlyph(rating) {
if (rating >= 50) {
return ['text-success', 'glyphicon-plus'];
function AssignStatusClass(health, rating) {
var result = [];
if (health >= 50) {
result[0] = 'status_healthy';
}
else if (health > 0) {
result[0] = 'status_unhealthy';
}
else {
result[0] = 'status_down';
}
if (rating > 20) {
result[1] = 'resource_healthy';
}
else if (rating > 0) {
return ['text-warning', 'glyphicon-minus'];
else if (rating > 10) {
result[1] = 'resource_unhealthy';
}
else {
return ['text-danger', 'glyphicon-remove'];
result[1] = 'resource_down';
}
return result;
}
function StatsLineHTML(glyph, title) {
return '<div class="picker_stats" data-toggle="tooltip" data-placement="right" data-html="true" title="'+title+'">'
+'<span class="picker_status '+glyph[0]+'"><span class="glyphicon '+glyph[1]+'"></span></span>'
+'</div>';
function StatsLineHTML(classes, title) {
var title1 = '';
if (title[1]) {
title1 = ' data-toggle="tooltip" data-placement="right" data-html="true" title="'+title[1]+'"';
}
return '<div class="tooltip_div"'+title1+'><div class="picker_stats" data-toggle="tooltip" data-placement="left" data-html="true" title="'+title[0]+'">'
+'<span class="picker_status '+classes[0]+' '+classes[1]+'"><span class="circle"></span></span>'
+'</div></div>';
}
return {
ClusterStatusHTML: ClusterStatusHTML,
StatusClickEvent: StatusClickEvent,
CalculateRating: CalculateRating,
AssignGlyph: AssignGlyph,
AssignStatusClass: AssignStatusClass,
StatsLineHTML
};
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment