PYROS-IRAP / pyros

Commit 4cff9e5e3286c04c955a7202adf3c66fd0645a0a

Authored by Alexis Koralewski
1 parent d612e536
Exists in dev

Fix agent_detail view with websockets

Showing 2 changed files with 156 additions and 13 deletions   Show diff stats
Inline Side-by-side
src/core/pyros_django/dashboard/templates/dashboard/agent_detail.html
  Diff comments   View file @4cff9e5
... ... @@ -95,14 +95,16 @@
95 95  
96 96 {% csrf_token %}
97 97 <div id="cmdform_running">
98   - <select name="cmd_name" id="cmd_name">
99   - {% for command in agent_general_commands %}
100   - <option value="{{command}}">{{command}}</option>
101   - {% endfor %}
102   - {% for specific_cmd in specific_cmd_with_args %}
103   - <option value="{{specific_cmd}}">{{specific_cmd}}</option>
104   - {% endfor %}
105   - </select>
  98 + <select name="cmd_name" id="cmd_name">
  99 + {% comment %}
  100 + {% for command in agent_general_commands %}
  101 + <option value="{{command}}">{{command}}</option>
  102 + {% endfor %}
  103 + {% endcomment %}
  104 + {% for specific_cmd in specific_cmd_with_args %}
  105 + <option value="{{specific_cmd}}">{{specific_cmd}}</option>
  106 + {% endfor %}
  107 + </select>
106 108 </div>
107 109 <input type="hidden" name="agent_name" value="{{agent_name}}"/>
108 110 {% comment %} {{ specific_cmd_with_args }}
... ... @@ -202,7 +204,7 @@
202 204  
203 205 <!-- COMMANDS TABLE -->
204 206  
205   - <br><h2> Commands <span style="color:green;">received</span> & <span style="color:blue;">sent</span> </h2><br>
  207 + <br><h2> Commands <span style="background-color:lightgreen;">received</span> & <span style="background-color:lightblue;">sent</span> </h2><br>
206 208  
207 209 <div id="overflowtable">
208 210 <table
... ... @@ -334,6 +336,10 @@
334 336 <a class="btn btn-info" href={% url 'agents_state' %}> Go back to agents state </a>
335 337 {% csrf_token %}
336 338 <script>
  339 + var agent_name="{{agent_name}}"
  340 +</script>
  341 +<script id="helper" src="{% static "/js/agent_detail/websocket_agent_detail.js" %}" data-agent-name="{{agent_name}}"></script>
  342 +<script>
337 343 function get_last_log(){
338 344  
339 345 $.post('{% url 'retrieve_log_content' %}',{"agent_name":'{{agent_name}}',csrfmiddlewaretoken: '{{ csrf_token }}'},function(data){
... ... @@ -452,9 +458,11 @@
452 458 let specific_cmd_with_args = data.specific_cmd_with_args;
453 459 var select = $("<select>").attr('name','cmd_name').attr('id','cmd_name').appendTo("#cmdform_running");
454 460 let cmd_description = "";
  461 + /*
455 462 for (cmd of agent_general_commands){
456 463 select.append($("<option>").attr('value',cmd).title(cmd_description).text(cmd));
457 464 }
  465 + */
458 466 for (cmd in specific_cmd_with_args){
459 467 select.append($("<option>").attr('value',cmd).title(cmd_description).attr(cmd));
460 468 }
... ... @@ -475,9 +483,9 @@
475 483 $("#cmd_name").change(function(){
476 484 get_parameters_of_selected_cmd();
477 485 });
478   -
479   - function update_agents_status(){
480   - $('.agent_status').each(function(index){
  486 +{% comment %}
  487 +function update_agents_status(){
  488 + $('.agent_status').each(function(index){
481 489 let agent_name = document.getElementsByClassName("agent_status")[index].parentElement.children[0].textContent;
482 490 agent_name = agent_name.trim();
483 491 let agent_status = $(this);
... ... @@ -593,7 +601,7 @@
593 601 else{
594 602 $("#agent_title").text(data.name + " (ON)").css("color","green")
595 603 }
596   -
  604 +
597 605 if (previous_status != data.status){
598 606 display_form_cmd(data.status);
599 607 previous_status = data.status;
... ... @@ -635,6 +643,7 @@
635 643 $("cmdform").hide();
636 644 $("cmdform_exiting").hide();
637 645 });
  646 + {% endcomment %}
638 647 $(document).ready(function() {
639 648 $("#btnscroll_to_logs").click(function() {
640 649  
... ...
src/core/pyros_django/misc/static/js/agent_detail/websocket_agent_detail.js 0 → 100644
  Diff comments   View file @4cff9e5
... ... @@ -0,0 +1,134 @@
  1 +
  2 +function update_agents_status(){
  3 + $('.agent_status').each(function(index){
  4 + let agent_name = document.getElementsByClassName("agent_status")[index].parentElement.children[0].textContent;
  5 + agent_name = agent_name.trim();
  6 + let agent_status = $(this);
  7 + let agent_mode = $(this).prev();
  8 +
  9 + if (agent_status != null){
  10 +
  11 + var ws = new WebSocket(`ws://${window.location.host}/ws/agent_survey/${agent_name}/`)
  12 + ws.onmessage = function (e) {
  13 + allData = JSON.parse(e.data);
  14 + data = allData.data;
  15 + agent_status.text(data.status);
  16 + agent_mode.text(data.mode);
  17 + if (main_agent_status == "EXITING"){
  18 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#startbtn").disabled = true;
  19 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#stopbtn").disabled = true;
  20 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#restartbtn").disabled = true;
  21 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#restarthardbtn").disabled = true;
  22 + }
  23 + else{
  24 + if (data.status == "EXITING"){
  25 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#startbtn").disabled = false;
  26 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#stopbtn").disabled = true;
  27 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#restartbtn").disabled = true;
  28 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#restarthardbtn").disabled = true;
  29 + }
  30 + else{
  31 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#startbtn").disabled = true;
  32 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#stopbtn").disabled = false;
  33 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#restartbtn").disabled = false;
  34 + document.getElementsByClassName("agent_status")[index].parentElement.children[3].querySelector("#restarthardbtn").disabled = false;
  35 + }
  36 +
  37 + }
  38 + }
  39 + }
  40 + });
  41 +}
  42 +
  43 +function websocket_agentcmd(){
  44 + var agent_name = document.getElementById("helper").getAttribute("data-agent-name");
  45 + var ws = new WebSocket(`ws://${window.location.host}/ws/agent_cmd/`+agent_name+"/");
  46 + last_id = null;
  47 + ws.onmessage = function (e) {
  48 + allData = JSON.parse(e.data);
  49 + if (allData.action === "list") {
  50 + app.commands = allData.data;
  51 + }
  52 + /*
  53 + // OLD (tried to optimize)
  54 + else if (allData.action == "create") {
  55 + console.log("last id");
  56 + console.log(last_id)
  57 + console.log("current id");
  58 + console.log(allData.data.id)
  59 + app.commands.unshift(allData.data);
  60 + last_id = allData.data.id
  61 + }
  62 + else if (allData.action == "update"){
  63 + if (last_id == allData.data.id){
  64 + console.log("last id");
  65 + console.log(last_id)
  66 + console.log("current id");
  67 + console.log(allData.data.id)
  68 + app.commands.shift();
  69 + app.commands.unshift(allData.data);
  70 + last_id = allData.data.id
  71 + }
  72 + }
  73 + */
  74 + app.$forceUpdate();
  75 + };
  76 + ws.onerror = function(error) {
  77 + let now = new Date();
  78 + let msg = now.toLocaleString() + ':' + now.getMilliseconds() + ' – WebSocket error: ' + error;
  79 + console.error(msg);
  80 + }
  81 +}
  82 +var previous_status = "none";
  83 +function websocket_agentsurvey(){
  84 + var agent_name = document.getElementById("helper").getAttribute("data-agent-name");
  85 + var ws = new WebSocket(`ws://${window.location.host}/ws/agent_survey/`+agent_name+"/");
  86 + last_id = null;
  87 + ws.onmessage = function (e) {
  88 + allData = JSON.parse(e.data);
  89 + app2.agent = allData.data;
  90 + data = allData.data
  91 + main_agent_status = data.status
  92 + if (data.status == "EXITING"){
  93 + $("#agent_title").text(agent_name + " (OFF)").css("color","red")
  94 + }
  95 + else{
  96 + $("#agent_title").text(agent_name + " (ON)").css("color","green")
  97 + }
  98 +
  99 + if (previous_status != data.status){
  100 + display_form_cmd(data.status);
  101 + previous_status = data.status;
  102 + }
  103 +
  104 + app2.$forceUpdate();
  105 + };
  106 + ws.onerror = function(error) {
  107 + let now = new Date();
  108 + let msg = now.toLocaleString() + ':' + now.getMilliseconds() + ' – WebSocket error: ' + error;
  109 + console.error(msg);
  110 + }
  111 +}
  112 +var app = new Vue({
  113 + delimiters:["[[","]]"],
  114 + el: '#cmdtable',
  115 + data: {
  116 + commands: [],
  117 + is_sender: false,
  118 + }
  119 +});
  120 +var app2 = new Vue({
  121 + delimiters:["[[","]]"],
  122 + el: '#agent_info',
  123 + data: {
  124 + agent: []
  125 + }
  126 +});
  127 +$(document).ready(function() {
  128 +
  129 + websocket_agentcmd();
  130 + websocket_agentsurvey();
  131 + update_agents_status();
  132 + $("cmdform").hide();
  133 + $("cmdform_exiting").hide();
  134 +});
0 135 \ No newline at end of file
... ...