UI changes on agent_detail view

Alexis Koralewski
1 parent 31a7d215
Showing 1 changed file with 49 additions and 20 deletions Show diff stats
src/core/pyros_django/dashboard/templates/dashboard/agent_detail.html
@@ -28,13 +28,20 @@
         color : red;
     }
     .table{
-       width:auto;
+       //max-width:90vw;
+       table-layout: fixed;
     }
     th{
         max-width: 15vw;
         vertical-align:top;
         text-align: center;
     }
+    td{
+        overflow:hidden;
+    }
+    #td_result{
+        max-width:20vw;
+    }
     .theader{
         text-align: center;
         min-width:7vw;
@@ -55,7 +62,7 @@
     }
 </style>
 <div>
-    <h1> {{ agent_name }} </h1><br>
+    <h1 id="agent_title"> {{ agent_name }} </h1><br>
     {% if managed_by %}
             <p> This agent is managed by <a href="{% url 'agent_detail' managed_by %}">{{ managed_by }} </a></p>
     {% endif %}
@@ -180,10 +187,10 @@
                     <th class="theader align-top">Sender</th>
                     <th class="theader align-top">Recipient</th>
                     <th class="theader align-top">Status </th>
-                    <th class="theader align-top">Deposit<br> (UTC)</th>
-                    <th class="theader align-top">Read<br> (UTC)</th>
                     <th class="theader align-top small-cln">Validity<br> (s)</th>
                     <th class="theader align-top small-cln">Timeout<br> (s)</th>
+                    <th class="theader align-top">Deposit<br> (UTC)</th>
+                    <th class="theader align-top">Read<br> (UTC)</th>
                     <th class="theader align-top">Exec start <br>(UTC)</th>
                     <th class="theader align-top">Exec end <br>(UTC)</th>
                     <th class="theader align-top small-cln">Exec time <br>(s)</th>
@@ -199,15 +206,15 @@
                     <td v-if="command.sender.includes('@') || command.sender == 'System'">[[ command.sender]]</td>
                     <td v-else> <a v-bind:href="`/dashboard/agent_detail/${command.sender}`">[[ command.sender]]</a></td>
                     <td> <a v-bind:href="`/dashboard/agent_detail/${command.recipient}`">[[ command.recipient ]]</a></td>
-                    <td v-bind:class="['CMD_EXECUTED','CMD_PENDING','CMD_RUNNING'].includes(command.state) ? '' : 'red'"> [[ command.state ]] </td>
-                    <td> [[ command.s_deposit_time]] </td>
-                    <td> [[ command.r_read_time]]</td>
+                    <td v-bind:class="['CMD_EXECUTED','CMD_PENDING','CMD_RUNNING'].includes(command.state) ? '' : 'red'"> <b>[[ command.state ]]</b> </td>
                     <td> [[ command.validity_duration]] </td>
                     <td> [[ command.exec_timeout]] </td>
+                    <td> [[ command.s_deposit_time]] </td>
+                    <td> [[ command.r_read_time]]</td>
                     <td> [[ command.r_start_time]]</td>
                     <td> [[ command.r_end_time]]</td>
                     <td> [[ command.exec_time]]</td>
-                    <td> [[ command.result ]] </td>
+                    <td id="td_result"> [[ command.result ]] </td>
                 </tr>
             </tbody>
         </table>
@@ -317,9 +324,12 @@
             $("#additional_fields").empty();
-            $.get('{% url 'agent_detail' agent_name %}', {'cmd':cmd},function(data){
-                if (data != null && typeof data != "String"){
-                    for(var arg of data){
+            $.get('{% url 'agent_detail' agent_name %}', {'cmd':cmd},function(data,cmd){
+                let cmd_name = $("#cmd_name").find(":selected").val();
+                let cmd_with_choices = data.cmd_with_choices;
+                let cmd_with_args = data.specific_cmd_with_args;
+                if (cmd_with_args != null && typeof cmd_with_args != "String"){
+                    for(var arg of cmd_with_args){
                         var arg_name = arg[0];
                         if (arg_name == "<"){
                             return null;
@@ -341,12 +351,23 @@
                         else{
                             $("#send_cmd_btn").show()
                             $("<label></label>").text(arg_name).appendTo("#additional_fields");
+                            if (cmd_with_choices.includes(cmd_name)){
+                                var sel = $("<select>").attr("name", arg_name).appendTo("#additional_fields");
+                                console.log(arg[1][0])
+                                var values = arg[1][0].split(",")
+                                $(values).each(function(){
+                                    console.log(this)
+                                    sel.append($("<option>").attr("value",this).text(this));
+                                });
+                            }
+                            else{
-                            $("<input type='text' value='' />")
-                            .attr("id", arg_name)
-                            .attr("name", arg_name)
-                            .attr("type",arg_type)
-                            .appendTo("#additional_fields");
+                                $("<input type='text' value='' />")
+                                .attr("id", arg_name)
+                                .attr("name", arg_name)
+                                .attr("type",arg_type)
+                                .appendTo("#additional_fields");
+                            }
                         }
                     }
                 }
@@ -369,7 +390,8 @@
         var cmdform_exiting = $("#cmdform_exiting")
         if (status == "EXITING"){
             if (cmdform.is(":visible")){
-                cmdform_exiting.show();
+                //cmdform_exiting.show();
+                $("#cmdform_title").hide();
                 cmdform.hide();
             }
         }
@@ -384,7 +406,6 @@
                         $("#cmd_unimplemented_message").hide()
                         let agent_general_commands = data.agent_general_commands;
                         let specific_cmd_with_args = data.specific_cmd_with_args;
-                        $("#cmdform_running").empty();
                         var select = $("<select>").attr('name','cmd_name').attr('id','cmd_name').appendTo("#cmdform_running");
                         for (cmd of agent_general_commands){
                             select.append($("<option>").attr('value',cmd).text(cmd));
@@ -397,8 +418,9 @@
                         //$("#cmdform_running").append("</select>");
                 });
             }
-            if (cmdform_exiting.is(":visible")){
-                cmdform_exiting.hide();
+            if ($("#cmdform_title").is(":visible")){
+                //cmdform_exiting.hide();
+                $("#cmdform_title").show();
                 cmdform.show();
             }
         }
@@ -458,6 +480,13 @@
         fetch("/api/agent_survey/{{agent_name}}?format=json").then(response => response.json()).then(function(data){
             app2.agent = data;
+            if (data.status == "EXITING"){
+                $("#agent_title").text(data.name + " is not available").css("color","red")
+            }
+            else{
+                $("#agent_title").text(data.name + " is available").css("color","green")
+            }
+
             if (previous_status != data.status){
                 display_form_cmd(data.status);
                 previous_status = data.status;