PYROS-IRAP / pyros

Commit 9b3ce1a9cd8aba5c8a8672e4403060f63eff6f6a

Authored by Alexis Koralewski
1 parent 31a7d215
Exists in dev

UI changes on agent_detail view

Showing 1 changed file with 49 additions and 20 deletions   Show diff stats
Inline Side-by-side
src/core/pyros_django/dashboard/templates/dashboard/agent_detail.html
  Diff comments   View file @9b3ce1a
... ... @@ -28,13 +28,20 @@
28 28 color : red;
29 29 }
30 30 .table{
31   - width:auto;
  31 + //max-width:90vw;
  32 + table-layout: fixed;
32 33 }
33 34 th{
34 35 max-width: 15vw;
35 36 vertical-align:top;
36 37 text-align: center;
37 38 }
  39 + td{
  40 + overflow:hidden;
  41 + }
  42 + #td_result{
  43 + max-width:20vw;
  44 + }
38 45 .theader{
39 46 text-align: center;
40 47 min-width:7vw;
... ... @@ -55,7 +62,7 @@
55 62 }
56 63 </style>
57 64 <div>
58   - <h1> {{ agent_name }} </h1><br>
  65 + <h1 id="agent_title"> {{ agent_name }} </h1><br>
59 66 {% if managed_by %}
60 67 <p> This agent is managed by <a href="{% url 'agent_detail' managed_by %}">{{ managed_by }} </a></p>
61 68 {% endif %}
... ... @@ -180,10 +187,10 @@
180 187 <th class="theader align-top">Sender</th>
181 188 <th class="theader align-top">Recipient</th>
182 189 <th class="theader align-top">Status </th>
183   - <th class="theader align-top">Deposit<br> (UTC)</th>
184   - <th class="theader align-top">Read<br> (UTC)</th>
185 190 <th class="theader align-top small-cln">Validity<br> (s)</th>
186 191 <th class="theader align-top small-cln">Timeout<br> (s)</th>
  192 + <th class="theader align-top">Deposit<br> (UTC)</th>
  193 + <th class="theader align-top">Read<br> (UTC)</th>
187 194 <th class="theader align-top">Exec start <br>(UTC)</th>
188 195 <th class="theader align-top">Exec end <br>(UTC)</th>
189 196 <th class="theader align-top small-cln">Exec time <br>(s)</th>
... ... @@ -199,15 +206,15 @@
199 206 <td v-if="command.sender.includes('@') || command.sender == 'System'">[[ command.sender]]</td>
200 207 <td v-else> <a v-bind:href="`/dashboard/agent_detail/${command.sender}`">[[ command.sender]]</a></td>
201 208 <td> <a v-bind:href="`/dashboard/agent_detail/${command.recipient}`">[[ command.recipient ]]</a></td>
202   - <td v-bind:class="['CMD_EXECUTED','CMD_PENDING','CMD_RUNNING'].includes(command.state) ? '' : 'red'"> [[ command.state ]] </td>
203   - <td> [[ command.s_deposit_time]] </td>
204   - <td> [[ command.r_read_time]]</td>
  209 + <td v-bind:class="['CMD_EXECUTED','CMD_PENDING','CMD_RUNNING'].includes(command.state) ? '' : 'red'"> <b>[[ command.state ]]</b> </td>
205 210 <td> [[ command.validity_duration]] </td>
206 211 <td> [[ command.exec_timeout]] </td>
  212 + <td> [[ command.s_deposit_time]] </td>
  213 + <td> [[ command.r_read_time]]</td>
207 214 <td> [[ command.r_start_time]]</td>
208 215 <td> [[ command.r_end_time]]</td>
209 216 <td> [[ command.exec_time]]</td>
210   - <td> [[ command.result ]] </td>
  217 + <td id="td_result"> [[ command.result ]] </td>
211 218 </tr>
212 219 </tbody>
213 220 </table>
... ... @@ -317,9 +324,12 @@
317 324  
318 325  
319 326 $("#additional_fields").empty();
320   - $.get('{% url 'agent_detail' agent_name %}', {'cmd':cmd},function(data){
321   - if (data != null && typeof data != "String"){
322   - for(var arg of data){
  327 + $.get('{% url 'agent_detail' agent_name %}', {'cmd':cmd},function(data,cmd){
  328 + let cmd_name = $("#cmd_name").find(":selected").val();
  329 + let cmd_with_choices = data.cmd_with_choices;
  330 + let cmd_with_args = data.specific_cmd_with_args;
  331 + if (cmd_with_args != null && typeof cmd_with_args != "String"){
  332 + for(var arg of cmd_with_args){
323 333 var arg_name = arg[0];
324 334 if (arg_name == "<"){
325 335 return null;
... ... @@ -341,12 +351,23 @@
341 351 else{
342 352 $("#send_cmd_btn").show()
343 353 $("<label></label>").text(arg_name).appendTo("#additional_fields");
  354 + if (cmd_with_choices.includes(cmd_name)){
  355 + var sel = $("<select>").attr("name", arg_name).appendTo("#additional_fields");
  356 + console.log(arg[1][0])
  357 + var values = arg[1][0].split(",")
  358 + $(values).each(function(){
  359 + console.log(this)
  360 + sel.append($("<option>").attr("value",this).text(this));
  361 + });
  362 + }
  363 + else{
344 364  
345   - $("<input type='text' value='' />")
346   - .attr("id", arg_name)
347   - .attr("name", arg_name)
348   - .attr("type",arg_type)
349   - .appendTo("#additional_fields");
  365 + $("<input type='text' value='' />")
  366 + .attr("id", arg_name)
  367 + .attr("name", arg_name)
  368 + .attr("type",arg_type)
  369 + .appendTo("#additional_fields");
  370 + }
350 371 }
351 372 }
352 373 }
... ... @@ -369,7 +390,8 @@
369 390 var cmdform_exiting = $("#cmdform_exiting")
370 391 if (status == "EXITING"){
371 392 if (cmdform.is(":visible")){
372   - cmdform_exiting.show();
  393 + //cmdform_exiting.show();
  394 + $("#cmdform_title").hide();
373 395 cmdform.hide();
374 396 }
375 397 }
... ... @@ -384,7 +406,6 @@
384 406 $("#cmd_unimplemented_message").hide()
385 407 let agent_general_commands = data.agent_general_commands;
386 408 let specific_cmd_with_args = data.specific_cmd_with_args;
387   - $("#cmdform_running").empty();
388 409 var select = $("<select>").attr('name','cmd_name').attr('id','cmd_name').appendTo("#cmdform_running");
389 410 for (cmd of agent_general_commands){
390 411 select.append($("<option>").attr('value',cmd).text(cmd));
... ... @@ -397,8 +418,9 @@
397 418 //$("#cmdform_running").append("</select>");
398 419 });
399 420 }
400   - if (cmdform_exiting.is(":visible")){
401   - cmdform_exiting.hide();
  421 + if ($("#cmdform_title").is(":visible")){
  422 + //cmdform_exiting.hide();
  423 + $("#cmdform_title").show();
402 424 cmdform.show();
403 425 }
404 426 }
... ... @@ -458,6 +480,13 @@
458 480  
459 481 fetch("/api/agent_survey/{{agent_name}}?format=json").then(response => response.json()).then(function(data){
460 482 app2.agent = data;
  483 + if (data.status == "EXITING"){
  484 + $("#agent_title").text(data.name + " is not available").css("color","red")
  485 + }
  486 + else{
  487 + $("#agent_title").text(data.name + " is available").css("color","green")
  488 + }
  489 +
461 490 if (previous_status != data.status){
462 491 display_form_cmd(data.status);
463 492 previous_status = data.status;
... ...