Commit 9d0467b1 authored by Leigh B Stoller's avatar Leigh B Stoller Committed by Gary Wong
Browse files

Convert to bootstrap V3.0, remove all UIKIT code.

parent c84848db
/* For the footer */
html, body, #bodycontainer { height: 100%; }
body > #bodycontainer { height: auto; min-height: 100%; }
#bodycontent { padding-bottom: 2.5em; }
/* Sticky footer styles
-------------------------------------------------- */
html,
body {
height: 100%;
/* The html and body elements cannot have any padding or margin. */
}
#footer {
clear: both;
position: relative;
z-index: 10;
height: 2.5em;
margin-top: -2.5em;
/* Wrapper for page content to push down footer */
#wrap {
min-height: 100%;
height: auto !important;
height: 100%;
/* Negative indent footer by its height */
margin: 0 auto -2.5em;
/* Pad bottom by footer height */
padding: 0 0 2.5em;
}
#footer div {
font-size: 1.0em;
color: #ddd;
padding: 0.5em;
/* Set the fixed height of the footer here */
#footer {
clear: both;
font-size: 1.0em;
height: 2.5em;
padding: 0.5em;
color: #ddd;
background-color: #ff6600;
}
#footer #elabpower {
height: 1.0em;
}
/* Extra wide modal /*/
.uk-modal-dialog-wide {
/* So that containers have some top room */
.container {
margin-top: 15px; !important;
}
.modal-dialog {
width: 800px;
/* 3 */
}
.panel-body {
background-color: #f5f5f5;
}
margin-left: -200px;
/* 4 */
/* Helper */
.align-center {
display: block;
margin-left: auto;
margin-right: auto;
}
/* Styles for svg diagrams */
......
......@@ -25,7 +25,7 @@ chdir("..");
include("defs.php3");
include_once("osinfo_defs.php");
include_once("geni_defs.php");
chdir("apt");
chdir("aptb");
include("quickvm_sup.php");
#
......@@ -100,48 +100,46 @@ function SPITFORM($username, $email, $sshkey, $imageid, $newuser, $errors)
echo "<center><h2>$internal_error</h2></center><br>\n";
}
echo "<form id='quickvm_form' class='uk-form uk-form-stacked'
echo "<div class='row'>
<div class='col-lg-6 col-md-offset-3
col-md-6 col-md-offset-3
col-sm-8 col-md-offset-2
col-xs-10 col-md-offset-1'>\n";
echo "<form id='quickvm_form' role='form'
method='post' action='quickvm.php'>\n";
echo "<div class='uk-panel uk-panel-box uk-panel-header
uk-container-center uk-margin-bottom uk-width-1-3'>
<h3 class='uk-panel-title'><i class='uk-icon-laptop'></i>
Create an Experiment</h3>
<div class='uk-form-row'>
<div class='uk-form-controls'>
echo "<div class='panel panel-default'>
<div class='panel-heading'>
<h3 class='panel-title'>
Create an Experiment</h3></div>
<div class='panel-body'>
<div class='form-group'>
<input name='username' id='username'
value='$username_value'
class='uk-width-100'
class='form-control'
placeholder='$username_default' autofocus type='text'>
</div>
<label class='uk-form-label uk-text-small'
style='color: red'
<label style='color: red'
for='username'>$username_error</label>
</div>
<div class='uk-form-row'>
<div class='uk-form-controls'>
<input name='email' id='email'
<div class='form-group'>
<input name='email' id='email' type='text'
value='$email_value'
class='uk-width-100'
class='form-control'
placeholder='$email_default' type='text' />
</div>
<label class='uk-form-label uk-text-small'
<label
style='color: red'
for='email'>$email_error</label>
</div>
<div class='uk-form-row'>
<div class='uk-form-controls'>
<div class='form-group'>
<textarea id='sshkey' name='sshkey'
placeholder='$sshkey_default'
class='uk-width-100'
class='form-control'
rows=5 cols=45>$sshkey_value</textarea>
</div>
<label class='uk-form-label uk-text-small'
<label
style='color: red'
for='sshkey'>$sshkey_error</label>
</div>
<div class='uk-form-row'>
<div class='uk-form-controls'>
<select class='uk-align-left' name='imageid'>
<div class='form-group'>
<select class='pull-left' name='imageid'>
<option value=''>Select Profile</option>\n";
while (list ($id, $title) = each ($imageid_array)) {
$selected = "";
......@@ -152,41 +150,43 @@ function SPITFORM($username, $email, $sshkey, $imageid, $newuser, $errors)
echo "<option $selected value='$id'>$title </option>\n";
}
echo " </select>
</div>
<label class='uk-form-label uk-text-small'
<label
style='color: red'
for='imageid'>$imageid_error</label>
</div>
<div class='uk-form-row'>
<button class='uk-button uk-button-primary uk-button-mini
uk-align-left'
<button class='btn btn-primary pull-right'
type='submit' name='create'>Create!
</button>
<br>
<button class='btn btn-primary btn-xs pull-left'
type='button' name='reset'
onclick='formReset(); return false;'>
Reset Form</button>
<button class='uk-button uk-button-primary uk-align-right'
type='submit' name='create'>Create!
<i class='uk-icon-chevron-sign-right'></i></button>
</div>
</div>
</div>
</div>
</div>\n";
echo "<!-- This is the modal -->
<div id='working' class='uk-modal'>
<div class='uk-modal-dialog'>
<a class='uk-modal-close uk-close'></a>
<div class='uk-panel uk-panel-box'>
<h3 class='uk-panel-title'><span class='uk-text-warning'>
<i class='uk-icon-warning-sign'></i> Important</a></h3>
<div id='working' class='modal fade'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<h3>Important</h3>
</div>
<div class='modal-body'>
<p>Check your email for a verification code, and
enter it here:</p>
<input name='verify'
class='uk-form-width-medium'
placeholder='Verification code'
autofocus type='text' />
<button class='uk-button uk-button-primary'
<button class='btn btn-primary'
type='submit' name='create'>
Create<i class='uk-icon-check-sign'>
</i></button>
</div>
Create</button>
</div>
</div>
</div>
</div>\n";
......
......@@ -25,7 +25,7 @@ chdir("..");
include("defs.php3");
include_once("osinfo_defs.php");
include_once("geni_defs.php");
chdir("apt");
chdir("aptb");
include("quickvm_sup.php");
$ajax_request = 0;
......@@ -43,12 +43,11 @@ if (!isset($uuid)) {
exit();
}
SPITHEADER(1);
echo "<div class='tm-section tm-section-color-white'>
<div class='uk-container uk-container-center uk-text-center'>
<p class='uk-text-large'>
What experiment would you like to look at?
</p>
</div></div>\n";
echo "<div class='align-center'>
<p class='lead text-center'>
What experiment would you like to look at?
</p>
</div>\n";
SPITFOOTER();
return;
}
......@@ -63,12 +62,11 @@ if (!$quickvm) {
exit();
}
SPITHEADER(1);
echo "<div class='tm-section tm-section-color-white'>
<div class='uk-container uk-container-center uk-text-center'>
<p class='uk-text-large'>
Experiment does not exist. Redirecting to the front page.
</p>
</div></div>\n";
echo "<div class='align-center'>
<p class='lead text-center'>
Experiment does not exist. Redirecting to the front page.
</p>
</div>\n";
SPITFOOTER();
flush();
sleep(3);
......@@ -82,12 +80,11 @@ if (!$creator) {
exit();
}
SPITHEADER(1);
echo "<div class='tm-section tm-section-color-white'>
<div class='uk-container uk-container-center uk-text-center'>
<p class='uk-text-large'>
echo "<div class='align-center'>
<p class='lead text-center'>
Hmm, there seems to be a problem.
</p>
</div></div>\n";
</p>
</div>\n";
SPITFOOTER();
TBERROR("No creator for quickvm $uuid", 0);
return;
......@@ -99,12 +96,11 @@ if (!$slice) {
exit();
}
SPITHEADER(1);
echo "<div class='tm-section tm-section-color-white'>
<div class='uk-container uk-container-center uk-text-center'>
<p class='uk-text-large'>
echo "<div class='align-center'>
<p class='lead text-center'>
Hmm, there seems to be a problem.
</p>
</div></div>\n";
</p>
</div>\n";
SPITFOOTER();
TBERROR("No slice for quickvm $uuid", 0);
return;
......@@ -204,16 +200,21 @@ elseif ($quickvm_status == "provisioned") {
$spinwidth = "66";
}
echo "<div class='uk-panel uk-panel-box uk-panel-header
uk-container-center uk-margin-bottom uk-width-2-3'>\n";
echo "<table class='uk-table uk-table-condensed' $style>\n";
echo "<div class='row'>
<div class='col-lg-6 col-lg-offset-3
col-md-8 col-md-offset-2
col-sm-8 col-sm-offset-2
col-xs-10 col-xs-offset-1'>\n";
echo "<div class='panel panel-default'>\n";
echo "<div class='panel-body'>\n";
echo "<table class='table table-condensed' $style>\n";
if ($spin) {
echo "<tr>\n";
echo "<td colspan=2 class='uk-width-5-5' $style>\n";
echo "<td colspan=2 $style>\n";
echo "<div id='quickvm_spinner'>\n";
echo " <div id='quickvm_progress'
class='uk-progress uk-progress-striped uk-active'>\n";
echo " <div class='uk-progress-bar'
class='progress progress-striped active'>\n";
echo " <div class='progress-bar' role='progressbar'
id='quickvm_progress_bar'
style='width: ${spinwidth}%;'></div>\n";
echo " </div>\n";
......@@ -243,96 +244,118 @@ echo "<td class='uk-width-4-5' $style>
<span id='quickvm_countdown'></span></td>\n";
echo "</tr>\n";
echo "</table>\n";
echo "<div class='uk-float-right'>\n";
echo " <button class='uk-button uk-button-primary'
echo "<div class='pull-right'>\n";
echo " <button class='btn btn-primary'
id='register_button' type=button
onclick=\"ShowModal('#register_modal'); return false;\">
Register</button>\n";
echo " <button class='uk-button uk-button-success' $disabled
echo " <button class='btn btn-success' $disabled
id='extend_button' type=button
onclick=\"ShowModal('#extend_modal'); return false;\">
Extend</button>\n";
echo " <button class='uk-button uk-button-danger' $disabled
echo " <button class='btn btn-danger' $disabled
id='terminate_button' type=button
onclick=\"ShowModal('#terminate_modal'); return false;\">
Terminate</button>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
#
# The topo diagram goes inside this div, when it becomes available.
#
echo "<div id='showtopo_container' class='uk-panel uk-panel-box
uk-container-center uk-width-2-3 uk-hidden'>\n";
echo "<div class='row'>
<div class='col-lg-6 col-lg-offset-3
col-md-8 col-md-offset-2
col-sm-8 col-sm-offset-2
col-xs-10 col-xs-offset-1'>\n";
echo "<div class='panel panel-default invisible' id='showtopo_container'>\n";
echo "<div class='panel-body'>\n";
echo "<div id='showtopo_div'></div>\n";
SpitToolTip("Click on a node to SSH to that node.<br>".
SpitToolTip("Click on a node to SSH to that node.\n".
"Click and drag on a node to move things around.");
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
echo "</div>\n";
#
# A modal to tell people how to register
#
echo "<!-- This is a modal -->
<div id='register_modal' class='uk-modal'>
<div class='uk-modal-dialog'>
<a href='' class='uk-modal-close uk-close'></a>
<div id='register_modal' class='modal fade'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<h3>Register for an account</h3>
</div>
<div class='modal-body'>
<p>If you want to design your own experiments, have more then
one active experiment at a time, or extend the life of an
experiment longer, you should register for a full account.
Click on the link below to take you to the registration page.
</p><br>
<button class='uk-button uk-button-primary uk-align-center'
<button class='btn btn-primary align-center'
onclick=\"RegisterAccount('$creator_uid',
'$creator_email'); return false;\"
type='submit' name='register'>Register</button>
</div>
</div>
</div>
</div>\n";
#
# A modal to tell people how to extend their experiment
#
echo "<!-- This is a modal -->
<div id='extend_modal' class='uk-modal'>
<div class='uk-modal-dialog uk-modal-dialog-wide'>
<a href='' class='uk-modal-close uk-close'></a>
<div class='uk-grid uk-grid-divider' data-uk-grid-match>
<div class='uk-width-1-2'>
<div id='extend_modal' class='modal fade'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-body'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<div class='row'>
<div class='col-lg-7 col-md-7'
style='padding-right:20px; border-right: 1px solid #ccc;'>
If you want to extend this experiment so that it does
not self-terminate at the time shown, just tell us why
and we will extend it for another 24 hours.
Watch for an email message that says its been done.
<form id='extend_request_form'>
<div class='uk-form-controls'>
<form id='extend_request_form' role='form'>
<div class='row'>
<div class='col-lg-10 col-md-6'>
<textarea id='why_extend' name='why_extend'
class='form-control'
placeholder='Tell us a good story please.'
class='uk-width-100 uk-align-center'
class='align-center'
rows=5></textarea>
</div></div>
<br>
<button class='uk-button uk-button-primary uk-button-small
uk-align-center'
<button class='btn btn-primary btn-sm align-center'
onclick=\"RequestExtension('$uuid'); return false;\"
type='submit' name='request'>Request Extension</button>
</div>
</form>
</div>
<div class='uk-width-1-2'>
<div class='col-lg-5 col-md-5'>
To extend your experiment for more then another 24 hours,
you need an extension code. If you do not have a code then
you need not worry about it.
<form id='extend_form'>
<div class='uk-form-controls'>
<form id='extend_form' role='form'>
<input id='extend_code' name='extend_code'
class='uk-form-width-small uk-align-center'
class='align-center'
placeholder='Extension code' autofocus type='text' />
<br>
<button class='uk-button uk-button-primary uk-button-small
uk-align-center'
<button class='btn btn-primary btn-sm align-center'
onclick=\"Extend('$uuid'); return false;\"
type='submit' name='extend'>Extend</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>\n";
......@@ -341,14 +364,19 @@ echo "<!-- This is a modal -->
# A modal to verify termination.
#
echo "<!-- This is a modal -->
<div id='terminate_modal' class='uk-modal'>
<div class='uk-modal-dialog'>
<a href='' class='uk-modal-close uk-close'></a>
<p>Are you sure you want to terminate this experiment?
Click on the button below if you are really sure.</p><br>
<button class='uk-button uk-button-primary uk-align-center'
onclick=\"Terminate('$uuid', 'quickvm.php'); return false;\"
type='submit' name='terminate'>Terminate</button>
<div id='terminate_modal' class='modal fade'>
<div class='modal-dialog'>
<div class='modal-content'>
<div class='modal-body'>
<button type='button' class='close' data-dismiss='modal'
aria-hidden='true'>&times;</button>
<p>Are you sure you want to terminate this experiment?
Click on the button below if you are really sure.</p><br>
<button class='btn btn-primary align-center'
onclick=\"Terminate('$uuid', 'quickvm.php'); return false;\"
type='submit' name='terminate'>Terminate</button>
</div>
</div>
</div>
</div>\n";
......@@ -367,6 +395,7 @@ echo "</div>\n";
$location = uniqid("loc");
$auth_object = GateOneAuthObject($creator_uid);
echo "<script src='d3.v3.js'></script>\n";
echo "<SCRIPT LANGUAGE=JavaScript>
InitQuickVM('$uuid', '$location', '$auth_object');
StartCountdownClock('$slice_expires');
......
function ShowModal(which)
{
modal = new $.UIkit.modal.Modal(which);
modal.show();
console.log('Showing modal ' + which);
$( which ).modal('show');
}
function HideModal(which)
{
$( which ).hide();
console.log('Hide modal ' + which);
$( which ).modal('hide');
}
function CallMethod(method, callback, uuid, arg)
......@@ -71,9 +70,9 @@ function StatusWatchCallBack(uuid, json)
else if (status == 'ready') {
status_html = "<font color=green>ready</font>";
if ($("#quickvm_progress").length) {
$("#quickvm_progress").removeClass("uk-progress-striped");
$("#quickvm_progress").removeClass("uk-active");
$("#quickvm_progress").addClass("uk-progress-success");
$("#quickvm_progress").removeClass("progress-striped");
$("#quickvm_progress").removeClass("active");
$("#quickvm_progress").addClass("progress-bar-success");
$("#quickvm_progress_bar").width("100%");
}
$("#terminate_button").prop("disabled", false);
......@@ -84,9 +83,9 @@ function StatusWatchCallBack(uuid, json)
else if (status == 'failed') {
status_html = "<font color=red>failed</font>";
if ($("#quickvm_progress").length) {
$("#quickvm_progress").removeClass("uk-progress-striped");
$("#quickvm_progress").removeClass("uk-active");
$("#quickvm_progress").addClass("uk-progress-danger");
$("#quickvm_progress").removeClass("progress-striped");
$("#quickvm_progress").removeClass("active");
$("#quickvm_progress").addClass("progress-bar-danger");
$("#quickvm_progress_bar").width("100%");
}
}
......@@ -111,7 +110,7 @@ function Terminate(uuid, url)
}
$("#terminate_button").prop("disabled", true);
$("#extend_button").prop("disabled", true);
$('#terminate_modal').hide();
HideModal('#terminate_modal');
var $xmlthing = CallMethod("terminate", null, uuid, null);
$xmlthing.done(callback);
......@@ -142,8 +141,10 @@ function ShowTopoNew(uuid)
var topo = ConvertManifestToJSON(xml);
console.log(topo);
$("#showtopo_container").removeClass("uk-hidden");
maketopmap("#showtopo_div", 700, 400, topo);
$("#showtopo_container").removeClass("invisible");
maketopmap("#showtopo_div",
$("#showtopo_div").width() - 30,
300, topo);
}
console.log(uuid);
......@@ -199,7 +200,7 @@ function RequestExtension(uuid)
StartCountdownClock.reset = json.value;
}
var $xmlthing = CallMethod("request_extension", null, uuid, reason);
$('#extend_modal').hide();
HideModal('#extend_modal');
$xmlthing.done(callback);
}
......@@ -214,7 +215,7 @@ function Extend(uuid)
console.log(json.value);
}
var $xmlthing = CallMethod("extend", null, uuid, code);
$('#extend_modal').hide();
HideModal('#extend_modal');
$xmlthing.done(callback);
}
......@@ -223,7 +224,7 @@ function Extend(uuid)
//
function RegisterAccount(uid, email)
{
$('#register_modal').hide();
HideModal('#register_modal');
var url = "../newproject.php3?uid=" + uid + "&email=" + email + "";
var win = window.open(url, '_blank');
win.focus();
......@@ -234,6 +235,11 @@ var gateone_location = null;
function InitQuickVM(uuid, location, auth_object)
{
// This activates the popover subsystem.
$('[data-toggle="popover"]').popover({
trigger: 'hover',
'placement': 'top'
});
gateone_authobject = auth_object;
gateone_location = location;
GetStatus(uuid);
......@@ -391,14 +397,15 @@ function maketopmap(divname, width, height, json)
function dragmove(d, i) {
d.px += d3.event.dx;
d.py += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
d.x += d3.event.dx;
d.y += d3.event.dy;
// this is the key to make it work together with updating
// both px,py,x,y on d !
tick();
}
function dragend(d, i) {
console.log(d);
// of course set the node to fixed so the force doesn't
// include the node in its auto positioning stuff
d.fixed = true;
......@@ -415,12 +422,12 @@ function maketopmap(divname, width, height, json)
var node = nodea.append("svg:rect")
.attr("class", "nodebox")
.attr("x", "-8px")
.attr("y", "-8px")
.attr("x", "-10px")