From ecea5c3b2408dc88b2508dd5ef80454b0573624a Mon Sep 17 00:00:00 2001
From: Leigh B Stoller <stoller@flux.utah.edu>
Date: Mon, 31 Mar 2014 08:36:00 -0600
Subject: [PATCH] Lots of UI changes.

---
 www/aptui/js/status.js       | 111 ++++++++++++++++++++++++++++-------
 www/aptui/manage_profile.php |   5 +-
 www/aptui/status.php         |  29 +++++----
 3 files changed, 114 insertions(+), 31 deletions(-)

diff --git a/www/aptui/js/status.js b/www/aptui/js/status.js
index 9e83ee6ef..dce1d6b8a 100644
--- a/www/aptui/js/status.js
+++ b/www/aptui/js/status.js
@@ -1,10 +1,11 @@
 window.APT_OPTIONS.config();
 
-require(['jquery', 'js/quickvm_sup',
+require(['jquery', 'js/quickvm_sup', 
 	 'tablesorter', 'tablesorterwidgets', 'bootstrap'],
 function ($, sup)
 {
     'use strict';
+    var CurrentTopo = null;
 
     function initialize()
     {
@@ -62,6 +63,7 @@ function ($, sup)
 		// This is considered the home page, for now.
 		window.location.replace('instantiate.php');
 	    }
+	    sup.ShowModal("#waitwait");
 
 	    var $xmlthing = sup.CallMethod("terminate", null,
 					   window.APT_OPTIONS.uuid, null);
@@ -118,6 +120,7 @@ function ($, sup)
 		$("#terminate_button").prop("disabled", false);
 		$("#extend_button").prop("disabled", false);
 		ShowTopo(uuid);
+		StartResizeWatchdog()
 	    }
 	    else if (status == 'failed') {
 		bgtype = "bg-danger";
@@ -134,9 +137,11 @@ function ($, sup)
 	    }
 	    else if (status == 'terminating' || status == 'terminated') {
 		status_html = "<font color=red>" + status + "</font>";
+		bgtype = "bg-danger";
+		statustext = "Your experiment has been terminated!";
 		$("#terminate_button").prop("disabled", true);
 		$("#extend_button").prop("disabled", true);
-		StartCountdownClock.stop = 0;
+		StartCountdownClock.stop = 1;
 	    }
 	    $("#statusmessage").html(statustext);
 	    $("#statusmessage-container")
@@ -153,7 +158,7 @@ function ($, sup)
     //
     // Install a window resize handler to redraw the topomap.
     //
-    function StartResizeWatchdog(uuid)
+    function StartResizeWatchdog()
     {
 	var resizeTimer;
 
@@ -165,7 +170,7 @@ function ($, sup)
 	    // Must clear the div for the D3 library.
 	    $("#showtopo_statuspage").html("<div></div>");
 	    $("#showtopo_statuspage").removeClass("invisible");
-	    ShowTopo(uuid);
+	    ReDrawTopoMap();
 	}
 
 	//
@@ -208,6 +213,9 @@ function ($, sup)
 
 	// variables for time units
 	var days, hours, minutes, seconds;
+
+	// text color.
+	var color = "";
     
 	// update the tag with id "countdown" every 1 second
 	var updater = setInterval(function () {
@@ -244,7 +252,7 @@ function ($, sup)
 		clearInterval(updater);
 		return;
 	    }
- 
+
 	    // do some time calculations
 	    days = parseInt(seconds_left / 86400);
 	    seconds_left = seconds_left % 86400;
@@ -265,9 +273,40 @@ function ($, sup)
 		seconds = "0" + seconds;
 
 	    var countdown =
-		days + ":" + hours + ":" + minutes + ":" + seconds;  
+		days + ":" + hours + ":" + minutes + ":" + seconds;
+	    var newcolor   = "";
+	    var statusbg   = "";
+	    var statustext = "Your experiment is ready";
 
 	    $("#quickvm_countdown").html(countdown);
+
+	    seconds_left = (target_date - current_date) / 1000;
+	    if (seconds_left < 3600) {
+		newcolor   = "text-danger";
+		statusbg   = "bg-danger";
+		statustext = "Extend your experiment before it expires!";
+	    }	    
+	    else if (seconds_left < 2 * 3600) {
+		newcolor   = "text-warning";
+		statusbg   = "bg-warning";
+		statustext = "Your experiment is going to expire soon!";
+	    }
+	    else {
+		newcolor = "";
+		statusbg = "hidden";
+	    }
+	    if (newcolor != color) {
+		$("#quickvm_countdown")
+		    .removeClass("text-warning text-danger")
+		    .addClass(newcolor);
+
+		$("#statusmessage").html(statustext);
+		$("#statusmessage-container")
+		    .removeClass('bg-success bg-danger hidden')
+		    .addClass(statusbg);
+
+		color = newcolor;
+	    }
 	}, 1000);
     }
 
@@ -284,16 +323,20 @@ function ($, sup)
 	    return;
 	}
 	var callback = function(json) {
+	    sup.HideModal("#waitwait");
+	    
 	    console.info(json.value);
+	    var message;
 	
 	    if (json.code) {
 		if (json.code < 0) {
-		    alert("Could not extend experiment. " +
-			  "Please try again later");
+		    message = "Could not extend experiment. " +
+			"Please try again later";
 		}
 		else {
-		    alert("Could not extend experiment: " + json.value);
+		    message = "Could not extend experiment: " + json.value;
 		}
+		sup.SpitOops("oops", message);
 		return;
 	    }
 	    $("#quickvm_expires").html(json.value);
@@ -301,8 +344,9 @@ function ($, sup)
 	    // Reset the countdown clock.
 	    StartCountdownClock.reset = json.value;
 	}
-	var $xmlthing = sup.CallMethod("request_extension", null, uuid, reason);
 	sup.HideModal('#extend_modal');
+	sup.ShowModal("#waitwait");
+	var $xmlthing = sup.CallMethod("request_extension", null, uuid, reason);
 	$xmlthing.done(callback);
     }
 	
@@ -321,7 +365,7 @@ function ($, sup)
             var url   = jsonauth.baseurl + ':' + port + '/' + '#' +
 		encodeURIComponent(document.location.href) + ',' + session;
             console.info(url);
-            var iwidth  = $('#' + id).width();
+	    var iwidth = "100%";
             var iheight = 400;
 
             $('#' + id).html('<iframe id="' + id + '_iframe" ' +
@@ -457,11 +501,19 @@ function ($, sup)
 		    // Stick the text in
 		    $('#instructions_text').html(marked(text));
 		    // Make the div visible.
-		    $('#instructions_panel').removeClass("invisible");
+		    $('#instructions_panel').removeClass("hidden");
 		});
 	    });
 	    // Find all of the nodes, and put them into the list tab.
 	    // Clear current table.
+	    //
+	    // Special case for a topology of a single node; start the
+	    // ssh tab right away.
+	    //
+	    var nodecount = 0;
+	    var nodehostport = null;
+	    var nodename = null;
+	    
             $('#listview_table > tbody').html("");
 	    $(xml).find("node").each(function() {
 		var node   = $(this).attr("client_id");
@@ -484,8 +536,11 @@ function ($, sup)
 			"   <span class='glyphicon glyphicon-log-in'><span>" +
 			"  </button>";
 		    console.info(ssh);
-
-		    // Use this to attach handlers to things that do not exist.
+		    nodehostport = hostport;
+		    nodename = node;
+			
+		    // Use this to attach handlers to things that do not
+		    // exist in the dom yet.
 		    $('#listview_table').off('click', '#sshbutton_' + node);
 		    $('#listview_table').on('click',
 					    '#sshbutton_' + node, function () {
@@ -496,19 +551,35 @@ function ($, sup)
 		    '<tr><td>' + node + '</td><td>' + ssh + '</td><td>' +
 			href + '</td></tr>'
 		);
+		nodecount++;
 	    });
 
+	    // Stash this for resize watchdog redraw.
+	    CurrentTopo = topo;
+	    ReDrawTopoMap();
 	    $("#showtopo_container").removeClass("invisible");
-	    // Subtract -2 cause of the border. 
-	    sup.maketopmap("#showtopo_statuspage",
-			   $("#showtopo_statuspage").outerWidth() - 2,
-			   300, topo,
-			   // Callback for ssh.
-			   function(arg1, arg2) { NewSSHTab(arg1, arg2); });
+
+	    // And start up ssh for single node topologies.
+	    if (nodecount == 1 && nodehostport) {
+		NewSSHTab(nodehostport, nodename);
+	    }
 	}
 	var $xmlthing = sup.CallMethod("manifest", null, uuid, null);
 	$xmlthing.done(callback);
     }
 
+    function ReDrawTopoMap()
+    {
+	// Activate the "profile" tab or else the map has no size.
+	$('#quicktabs a[href="#profile"]').tab('show');
+	
+	// Subtract -2 cause of the border. 
+	sup.maketopmap("#showtopo_statuspage",
+		       $("#showtopo_statuspage").outerWidth() - 2,
+		       300, CurrentTopo,
+		       // Callback for ssh.
+		       function(arg1, arg2) { NewSSHTab(arg1, arg2); });
+    }
+
     $(document).ready(initialize);
 });
diff --git a/www/aptui/manage_profile.php b/www/aptui/manage_profile.php
index 682b41c1d..d3a6de117 100644
--- a/www/aptui/manage_profile.php
+++ b/www/aptui/manage_profile.php
@@ -481,7 +481,7 @@ if (! isset($create)) {
 	    "You do not appear to be a member of any projects in which ".
 	    "you have permission to create new profiles";
     }
-    if ($action == "edit" || $action == "delete") {
+    if ($action == "edit" || $action == "delete" || "snapshot") {
 	if (!isset($idx)) {
 	    $errors["error"] = "No profile specified for edit/delete!";
 	}
@@ -499,6 +499,9 @@ if (! isset($create)) {
 		header("Location: $APTBASE/myprofiles.php");
 		return;
 	    }
+	    else if ($action == "snapshot") {
+		$defaults["profile_rspec"]       = $profile->rspec();
+	    }
 	    else {
 		$defaults["profile_uuid"]        = $profile->uuid();
 		$defaults["profile_pid"]         = $profile->pid();
diff --git a/www/aptui/status.php b/www/aptui/status.php
index 7a102bb0a..8e1ca5836 100644
--- a/www/aptui/status.php
+++ b/www/aptui/status.php
@@ -147,7 +147,8 @@ if (isset($ajax_request)) {
 	}
         # Only extend for 24 hours. More later.
 	$expires_time = strtotime($slice->expires());
-	if ($expires_time > time() + (3600 * 36)) {
+	if ($expires_time > time() + (3600 * 24)) {
+	    sleep(2);
 	    SPITAJAX_ERROR(1, "You still have lots of time left!");
 	    return;
 	}
@@ -169,9 +170,13 @@ if (isset($ajax_request)) {
 		   "A request to extend your APT experiment was made and ".
 		   "granted.\n".
 		   "Your reason was:\n\n". $ajax_argument . "\n\n".
-		   "Your experiment will now expire at $new_expires\n",
+		   "Your experiment will now expire at $new_expires.\n\n".
+		   "You can request another extension tomorrow.\n",
 		   "CC: $TBMAIL_OPS");
 	}
+	elseif ($retval > 0) {
+	    SPITAJAX_ERROR(1, $suexec_output);
+	}
 	else {
 	    SPITAJAX_ERROR(-1, "Internal Error. Please try again later");
 	}
@@ -223,11 +228,11 @@ elseif ($instance_status == "provisioned") {
 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-sm-10 col-sm-offset-1
                   col-xs-12 col-xs-offset-0'>\n";
 echo "<div class='panel panel-default'>\n";
 echo "<div class='panel-body'>\n";
-echo "<table class='table table-condensed' $style>\n";
+echo "<table class='table table-condensed nospaceafter' $style>\n";
 echo "<tr>\n";
 echo "<td id='statusmessage-container' colspan=2 $style class='$bgtype'>\n";
 echo "<h4 id='statusmessage'>$statustext</h4>\n";
@@ -253,9 +258,10 @@ echo "<td class='uk-width-4-5' $style>$slice_urn</td>\n";
 echo "</tr>\n";
 echo "<tr>\n";
 echo "<td class='uk-width-1-5' $style>State:</td>\n";
-echo "<td id='quickvm_status'
-          class='uk-width-4-5' $style>
-          <font $color>$instance_status</font>\n";
+echo "<td class='uk-width-4-5' $style>
+        <span id='quickvm_status'>
+         <font $color>$instance_status</font>
+        </span>\n";
 echo "</td>\n";
 echo "</tr>\n";
 echo "<tr>\n";
@@ -270,11 +276,11 @@ echo "<td class='uk-width-4-5' $style>
 echo "</tr>\n";
 echo "</table>\n";
 echo "<div class='pull-right'>\n";
-echo "  <button class='btn btn-success' $disabled
+echo "  <button class='btn btn-xs btn-success' $disabled
            id='extend_button' type=button
 	   data-toggle='modal' data-target='#extend_modal'>
            Extend</button>\n";
-echo "  <button class='btn btn-danger' $disabled
+echo "  <button class='btn btn-xs btn-danger' $disabled
            id='terminate_button' type=button
 	   data-toggle='modal' data-target='#terminate_modal'>
            Terminate</button>\n";
@@ -289,7 +295,7 @@ echo "</div>\n";
 # will actually fill in the div though, since it is markdown and that
 # is more easily done on the client side for now.
 #
-echo "<div class='row invisible' id='instructions_panel'>
+echo "<div class='row hidden' id='instructions_panel'>
       <div class='col-lg-6  col-lg-offset-3
                   col-md-8  col-md-offset-2
                   col-sm-8  col-sm-offset-2
@@ -468,5 +474,8 @@ echo "<!-- This is a modal -->
         </div>
       </div>\n";
 
+SpitWaitModal("waitwait");
+SpitOopsModal("oops");
+
 SPITFOOTER();
 ?>
-- 
GitLab