Commit 35507d32 authored by Leigh B Stoller's avatar Leigh B Stoller
Browse files

Add a type summary box to the left of the inuse table. Add per column

search boxes and an expand button, at Mike's request.  Click on the little
chevron on the right side of each panel header.
parent ca2b4e6b
......@@ -52,15 +52,30 @@ function Do_GetStatus()
}
pclose($fp);
$inuse = json_decode($string);
if (gettype($inuse) == "object") {
$inuse = $inuse->details;
}
#
# We want to convert slice_urns to local instances so that we
# convert the uid/pids to local names and provide links to the
# instances.
#
$instances = array();
$instances = array();
$typecounts = array();
foreach ($inuse as $details) {
$type = $details->type;
if (!array_key_exists($type, $typecounts)) {
$typecounts[$type] = array("inuse" => 0, "free" => 0);
}
if ($details->pid != "") {
$typecounts[$type]["inuse"] += 1;
}
else {
$typecounts[$type]["free"] += 1;
}
if (property_exists($details, "slice_uuid") &&
$details->slice_uuid != "") {
......@@ -75,10 +90,12 @@ function Do_GetStatus()
$details->pid = $instance->pid();
$details->instance_uuid = $instance->uuid();
$details->instance_name = $instance->name();
$details->uid = $instance->creator();
}
}
}
$dashboard["inuse"] = $inuse;
$dashboard["totals"] = $typecounts;
$dashboard["inuse"] = $inuse;
SPITAJAX_RESPONSE($dashboard);
}
......
......@@ -180,8 +180,8 @@ caption {
.tablesorter-green .tablesorter-filter {
width: 98%;
height: auto;
margin: 4px;
padding: 4px;
margin: 1px;
padding: 1px;
background-color: #fff;
border: 1px solid #bbb;
color: #333;
......
......@@ -67,6 +67,17 @@ function (_, sup, moment, mainString)
});
$('#' + name + '-tbody').html(html);
InitTable(name);
// These are the totals.
html = "";
_.each(json.value.totals, function(value, type) {
html = html + "<tr>" +
"<td>" + type + "</td>" +
"<td>" + value.inuse + "</td>" +
"<td>" + value.free + "</td>" + "</tr>";
});
$('#counts-' + name + '-tbody').html(html);
}
var xmlthing = sup.CallServerMethod(null, "cluster-status",
"GetStatus",
......@@ -80,11 +91,13 @@ function (_, sup, moment, mainString)
var tablename = "#inuse-table-" + name;
var searchname = "#inuse-search-" + name;
var countname = "#inuse-count-" + name;
var clickname = "#inuse-click-" + name;
var panelname = "#inuse-panel-" + name;
var table = $(tablename)
.tablesorter({
theme : 'green',
widgets: ["filter", "resizable"],
widgets: ["filter"],
widgetOptions: {
// include child row content while filtering, if true
......@@ -98,8 +111,8 @@ function (_, sup, moment, mainString)
// Set this option to false for case sensitive search
filter_ignoreCase : true,
// Only one search box.
filter_columnFilters : false,
}
filter_columnFilters : true,
}
});
table.bind('filterEnd', function(e, filter) {
......@@ -111,7 +124,24 @@ function (_, sup, moment, mainString)
// Allows using filter_liveSearch or delayed search &
// pressing escape to cancel the search
$.tablesorter.filter.bindSearch(table, $(searchname));
$.tablesorter.filter.bindSearch(table, $('#inuse-search-all'));
$(tablename).removeClass("hidden");
/*
* This is the expand/collapse button for an individual table.
*/
$('#inuse-collapse-button-' + name).click(function () {
if ($(panelname).data("status") == "minimized") {
$(panelname).removeClass("inuse-panel");
$('#counts-panel-' + name).removeClass("counts-panel");
$(panelname).data("status", "maximized");
}
else {
$(panelname).addClass("inuse-panel");
$('#counts-panel-' + name).addClass("counts-panel");
$(panelname).data("status", "minimized");
}
})
}
$(document).ready(initialize);
......
<style>
table {
font-size: 14px;
}
.panel {
font-size: 80%;
}
.panel-body-dashboard {
padding: 2px;
}
......@@ -26,32 +21,72 @@ table {
padding: 5px;
}
.inuse-panel {
height:300px;
height:350px;
overflow-y:scroll;
}
.counts-panel {
max-height:385px;
overflow-y:scroll;
}
</style>
<div class='row' style="margin-bottom: 5px">
<div class='col-sm-8 col-sm-offset-3'>
<input class='form-control search'
type='search' data-column='all'
id='inuse-search-all' placeholder='Global Search'>
</div>
</div>
<% _.each(amlist, function(urn, name) { %>
<div class='row'>
<div class='col-sm-8 col-sm-offset-2'>
<div class='panel panel-default' id='inuse-panel'>
<div class='col-sm-3'>
<div class='panel panel-default'>
<div class="panel-heading">
<h5><center>InUse <%- name %></center></h5>
<h5><center>Totals <%- name %></center></h5>
</div>
<div class='panel-body panel-body-dashboard'>
<div class="counts-panel" id='counts-panel-<%- name %>'>
<table class='tablesorter-green'>
<thead>
<tr>
<th>Type</th>
<th>Inuse</th>
<th>Free</th>
</tr>
</thead>
<tbody id='counts-<%- name %>-tbody'>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class='col-sm-8'>
<div class='panel panel-default'>
<div class="panel-heading" id='inuse-click-<%- name %>'>
<h5>
<center>InUse <%- name %>
<span id="inuse-collapse-button-<%- name %>"
class="glyphicon glyphicon-chevron-right pull-right"></span>
</center>
</h5>
</div>
<div class='panel-body panel-body-dashboard'>
<div class="row">
<div class='col-sm-6'>
<input class='form-control search'
type='search' data-column='all'
id='inuse-search-<%- name %>' placeholder='Search'>
id='inuse-search-<%- name %>'
placeholder='Search <%- name %>'>
</div>
<div class='col-sm-5'>
<span id='inuse-count-<%- name %>'>0</span>
<span> matched rows</span>
</div>
</div>
<div class="inuse-panel">
<table class="tablesorter hidden"
id='inuse-table-<%- name %>'>
<div class="inuse-panel" id='inuse-panel-<%- name %>'
data-status="minimized">
<table class="tablesorter hidden" id='inuse-table-<%- name %>'>
<thead>
<tr>
<th>Node</th>
......
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