Add Terminate and Replace buttons underneath VM details

phantomweb/static/css/phantom_domain.css

@@ -16,6 +16,10 @@
     display: none;
 }
 
+#phantom_details_button_div {
+    display: none;
+}
+
 #phantom_domain_loading_image {
     display: none;
 }

phantomweb/static/js/phantom_domain.js

@@ -94,6 +94,30 @@ $(document).ready(function() {
         return false;
     });
 
+    $("#details_button_replace_vm").click(function() {
+        var instance_id = get_selected_instance_id();
+        var instance = get_instance(instance_id);
+        if (instance === null) {
+          return;
+        }
+        console.log(instance_id);
+        console.log(instance);
+        phantom_domain_instance_replace_click(instance.instance_id, instance.cloud);
+
+        return false;
+    });
+
+    $("#details_button_terminate_vm").click(function() {
+        var instance_id = get_selected_instance_id();
+        var instance = get_instance(instance_id);
+        if (instance === null) {
+          return;
+        }
+        phantom_domain_instance_terminate_click(instance.instance_id, instance.cloud);
+
+        return false;
+    });
+
 });
 
 
@@ -508,6 +532,7 @@ function phantom_domain_select_domain(domain, load_details) {
 function phantom_domain_deselect_domain() {
     $("#phantom_domain_main_combined_pane_inner").show();
     $("#phantom_domain_instance_details").empty();
+    $("#phantom_details_button_div").hide();
     $("#details_table_body").empty();
     $("#instance_table_body").empty();
     $("#phantom_domain_main_combined_pane_inner").hide();
@@ -588,6 +613,11 @@ function human_lifecycle_state(state) {
     }
 }
 
+function get_selected_instance_id() {
+    var instance_id = $("#details_table tr.info td.instance_id").text();
+    return instance_id;
+}
+
 function get_instance(instance_id) {
 
     var instance = null;
@@ -626,6 +656,8 @@ function show_instance_details(instance_id) {
       return;
     }
 
+    $("#phantom_details_button_div").show();
+
     g_selected_instance = instance_id;
 
     var data = make_row("Instance ID", instance.instance_id) +
@@ -777,7 +809,7 @@ function phantom_domain_instance_terminate_click(instanceid, cloudname) {
 
     var obj = $("#phantom_domain_instance_context_menu");
     var msg = "Do you want to kill the VM instance ".concat(instanceid).concat("?");
-    var answer = confirm (msg);
+    var answer = confirm(msg);
 
     if (!answer) {
         return;
@@ -803,7 +835,7 @@ function phantom_domain_instance_replace_click(instanceid, cloudname) {
 
     var obj = $("#phantom_domain_instance_context_menu");
     var msg = "Do you want to kill and replace the VM instance ".concat(instanceid).concat("?");
-    var answer = confirm (msg);
+    var answer = confirm(msg);
 
     if (!answer) {
         return;

phantomweb/templates/phantom_domain.html

@@ -178,6 +178,15 @@ <h5 class="phantom_area_header magic-underline">Configuration for <span id="phan
           <tbody id="instance_table_body">
           </tbody>
         </table>
+
+        <div id="phantom_details_button_div" class="control-group pull-right">
+          <input type="button" id="details_button_replace_vm" class="btn btn-mini" value="Replace"/>
+          <input type="button" id="details_button_terminate_vm" class="btn btn-mini btn-danger" value="Terminate"/>
+        </div>
+        <div style="clear: both"></div>
+        <!-- Hack that I don't understand, but is standard practice? Makes parent div inherit height of
+             contained elements
+         -->
       </div>
     </div>
   </div>