Commit 638b7a9a authored by Leigh B Stoller's avatar Leigh B Stoller

Switch the status topo diagram to begin as a tab, with the

topo in one tab, and a list view in the other tab.
parent d5fda4c8
......@@ -130,7 +130,8 @@ function ShowTopo(uuid)
console.info(json.value);
// Deal with the instructions.
// Suck the instructions out of the tour and put them into
// the Usage area.
$(xml).find("rspec_tour").each(function() {
$(this).find("instructions").each(function() {
var marked = require('marked');
......@@ -143,7 +144,44 @@ function ShowTopo(uuid)
$('#instructions_panel').removeClass("invisible");
});
});
// Find all of the nodes, and put them into the list tab.
// Clear current table.
$('#listview_table > tbody').html("");
$(xml).find("node").each(function() {
var node = $(this).attr("client_id");
var login = $(this).find("login");
var href = "n/a";
var ssh = "n/a";
if (login.length) {
var user = login.attr("username");
var host = login.attr("hostname");
var port = login.attr("port");
var url = "ssh://" + user + "@" + host + ":" + port + "/";
href = "<a href='" + url + "'>" + url + "</a>";
console.info(url);
var hostport = host + ":" + port;
ssh = "<button class='btn btn-primary btn-xs' " +
" id='" + "sshbutton_" + node + "' " +
" type='button'>" +
" <span class='glyphicon glyphicon-log-in'><span>" +
" </button>";
console.info(ssh);
// Use this to attach handlers to things that do not exist.
$('#listview_table').off('click', '#sshbutton_' + node);
$('#listview_table').on('click',
'#sshbutton_' + node, function () {
NewSSHTab(hostport, node);
});
}
$('#listview_table > tbody:last').append(
'<tr><td>' + node + '</td><td>' + ssh + '</td><td>' +
href + '</td></tr>'
);
});
$("#showtopo_container").removeClass("invisible");
// Subtract -2 cause of the border.
maketopmap("#showtopo_statuspage",
......@@ -312,7 +350,6 @@ function InitQuickVM(uuid, slice_expires)
console.info("Unload function called");
$('#quicktabs_content div').each(function () {
console.info(this);
var $this = $(this);
// Skip the main profile tab
if ($this.attr("id") == "profile") {
......@@ -330,7 +367,6 @@ function InitQuickVM(uuid, slice_expires)
$(window).bind("pagehide", function() {
console.info("Pagehide function called");
});
StartResizeWatchdog(uuid);
StartCountdownClock(slice_expires);
GetStatus(uuid);
myuuid = uuid;
......@@ -403,27 +439,6 @@ function NewSSHTab(hostport, client_id)
var host = pair[0];
var port = pair[1];
//
// On first ssh, we convert the topo div into a tabs array,
// and place each ssh session as a new tab. The original svg
// DOM is saved and then moved into the new fragment.
//
if (! $("#quicktabs").length) {
// SVG DOM fragment.
var svg = $('#showtopo_statuspage>svg');
var html =
"<ul id='quicktabs' class='nav nav-tabs'>\n" +
" <li><a href='#profile' data-toggle='tab'>Profile</a></li>\n" +
"</ul>\n" +
"<div id='quicktabs_content' class='tab-content'>\n" +
" <div class='tab-pane' id='profile'>\n" +
" <div id='showtopo_statuspage'></div>\n" +
" </div>\n" +
"</div>\n";
$('#quicktabs_div').html(html);
$('#showtopo_statuspage').append(svg);
}
//
// Need to create the tab before we can create the topo, since
// we need to know the dimensions of the tab.
......
window.APT_OPTIONS.config();
require(['jquery', 'js/quickvm_sup',
// jQuery modules
'bootstrap'],
'tablesorter', 'tablesorterwidgets', 'bootstrap'],
function ($, sup)
{
'use strict';
......
......@@ -309,11 +309,40 @@ echo "<div class='row'>
echo "<div class='panel panel-default invisible' id='showtopo_container'>\n";
echo "<div class='panel-body'>\n";
echo "<div id='quicktabs_div'>\n";
echo "<div id='showtopo_statuspage'></div>\n";
echo "<small>Click on a node to SSH to that node. ".
"Click and drag to move things around.</small>\n";
echo "</div>\n"; # showtopo
echo " <ul id='quicktabs' class='nav nav-tabs'>
<li class='active'>
<a href='#profile' data-toggle='tab'>Map</a>
</li>
<li>
<a href='#listview' data-toggle='tab'>List</a>
</li>
</ul>
<div id='quicktabs_content' class='tab-content'>
<div class='tab-pane active' id='profile'>
<div id='showtopo_statuspage'></div>
<small>Click on a node to SSH to that node.
Click and drag to move things around.</small>
</div>
<div class='tab-pane' id='listview'>
<div id='showtopo_listview'>
<table class='table table-striped table-hover table-condensed'
id='listview_table'>
<thead>
<tr>
<th>Node ID</th>
<th>SSH</th>
<th>SSH URL <small>(if you provided your own key)</small>
</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>\n";
echo "</div>\n"; # quicktabs
echo "</div>\n"; # body
echo "</div>\n"; # container
echo "</div>\n"; # cols
echo "</div>\n"; # row
......
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