applications/luci-app-cshark/luasrc/view/cshark.htm

   1 <%#
   2 LuCI - Lua Configuration Interface
   3
   4 Copyright (C) 2014, QA Cafe, Inc.
   5
   6 Licensed under the Apache License, Version 2.0 (the "License");
   7 you may not use this file except in compliance with the License.
   8 You may obtain a copy of the License at
   9
  10         http://www.apache.org/licenses/LICENSE-2.0
  11
  12 $Id$
  13
  14 -%>
  15
  16 <fieldset class="cbi-section">
  17         <legend><%:Start network capture%></legend>
  18         <div class="cbi-section-node">
  19                 <table class="cbi-section-table">
  20                         <tr>
  21                                 <th><%:Interface%></th>
  22                                 <th colspan='2'><%:seconds, packets, bytes%></th>
  23                                 <th><%:Filter%></th>
  24                                 <th><%:Actions%></th>
  25                         </tr>
  26                         <tr>
  27                                 <td>
  28                                         <select title="<%:Interface%>" style="width:auto" id="s_interfaces">
  29                                         <%
  30                                                 local nixio = require "nixio"
  31                                                 for k, v in ipairs(nixio.getifaddrs()) do
  32                                                         if v.family == "packet" then
  33                                                         %>
  34                                                                 <option value="<%=v.name%>"><%=v.name%> </option>
  35                                                         <%
  36                                                         end
  37                                                 end
  38                                         %>
  39                                                 <option value="any"><%:any%></option>
  40                                         </select>
  41                                 </td>
  42                                 <td colspan='2'>
  43                                         <input id="tx_value" type="text" value="0" />
  44                                         <select title="<%:timeout, bytes, seconds%>" id="s_value_type" style="width:auto">
  45                                                 <option value="T"><%:seconds%></option>
  46                                                 <option value="P"><%:packets%></option>
  47                                                 <option value="S"><%:bytes%></option>
  48                                         </select>
  49                                 </td>
  50                                 <td>
  51                                         <input style="margin: 5px 0" type="text" title="<%:Filter%>" placeholder="filter" id="i_filter" />
  52                                 </td>
  53                                 <td>
  54                                         <input type="button" id="bt_action" data-action="start" value="<%:Start capture%>" class="cbi-button" />
  55                                 </td>
  56                         </tr>
  57                 </table>
  58         </div>
  59 </fieldset>
  60
  61 <fieldset class="cbi-section">
  62         <span id="cshark-rc-output"></span>
  63 </fieldset>
  64
  65 <hr/>
  66
  67 <fieldset class="cbi-section">
  68         <legend><%:Capture links%></legend>
  69         <div class="cbi-section-node">
  70                 <table id="t_link_list" class="cbi-section-table">
  71                         <tr class="cbi-section-table-titles">
  72                                 <th class="cbi-section-table-cell"><%:Capture URL%></th>
  73                                 <th class="cbi-section-table-cell"><%:Capture time%></th>
  74                         </tr>
  75                 </table>
  76         </div>
  77 </fieldset>
  78
  79 <fieldset class="cbi-section">
  80   <a href="https://support.cloudshark.org/openwrt/openwrt-cloudshark.html" target="_blank">Visit support.cloudshark.org for help.</a>
  81 </fieldset>
  82
  83 <hr/>
  84
  85 <script type="text/javascript">//<![CDATA[
  86
  87         var capture_running = 0;
  88         var pid_file = 0;
  89         var bt_action = document.getElementById('bt_action');
  90         var a_clear_links = document.getElementById('a_clear_links');
  91         var output = document.getElementById('cshark-rc-output');
  92         var loader = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" /> ';
  93         var msg = { 'start' : '<%:Waiting for capture to complete...%>', 'stop' : '<%:Waiting for upload to complete...%>' };
  94         var status_msg = msg['start'];
  95
  96         function get_date(timestamp)
  97         {
  98                 function pad_str(str)
  99                 {
 100                         return (str < 10) ? "0" + str : str;
 101                 }
 102
 103                 var current_date = new Date(timestamp * 1000);
 104                 return current_date.getFullYear() + "-" +
 105                                 pad_str(current_date.getMonth() + 1) + "-" +
 106                                 pad_str(current_date.getDate()) + " " +
 107                                 pad_str(current_date.getHours()) + ":" +
 108                                 pad_str(current_date.getMinutes()) + ":" +
 109                                 pad_str(current_date.getSeconds());
 110         }
 111
 112         bt_action.onclick = function()
 113         {
 114                 var action = this.getAttribute("data-action");
 115                 var csxhr = new XHR();
 116
 117                 if (action == "stop")
 118                 {
 119                         update_status(action);
 120
 121                         bt_action.disabled = true;
 122
 123                         csxhr.get('<%=luci.dispatcher.build_url("admin", "network")%>/cshark_iface_dump_stop', null,
 124                         function(x)
 125                         {
 126                                 if (!x || x.responseText.trim() != "0")
 127                                 {
 128                                         update_status("failed", "Invalid response on stop.");
 129                                 }
 130                         });
 131
 132                 }
 133                 else if (action == "start")
 134                 {
 135
 136                         var s_interfaces = document.getElementById('s_interfaces');
 137                         var s_value_type = document.getElementById('s_value_type');
 138                         var i_filter = document.getElementById('i_filter');
 139
 140                         var if_n = s_interfaces.selectedIndex;
 141                         var t_n = s_value_type.selectedIndex;
 142                         var ifname = s_interfaces.options[if_n].value.trim();
 143                         var filter_val = i_filter.value.trim();
 144                         var tx_val = document.getElementById('tx_value').value.trim();
 145                         var type_val = s_value_type.options[t_n].value.trim();
 146
 147                         if (type_val != 'P' && type_val != 'T' && type_val != 'S') type_val = 'T';
 148
 149                         if (!ifname || !type_val) return;
 150
 151                         if (isNaN(tx_val)) return alert("<%:value for [seconds, packets, bytes] must be Integer%>");
 152
 153                         update_status(action);
 154
 155                         csxhr.get('<%=luci.dispatcher.build_url("admin", "network")%>/cshark_iface_dump_start/' + ifname + '/' + tx_val + '/' + type_val + '/'+ filter_val, null,
 156                         function(x)
 157                         {
 158                                 if (!x)
 159                                         update_status("failed", "Invalid response on start.");
 160                                 else
 161                                         update_status("running");
 162                         });
 163                 }
 164         }
 165
 166         function update_status(status, message)
 167         {
 168                 switch (status)
 169                 {
 170                         case 'start':
 171                         case 'stop':
 172                                 status_msg = msg[status];
 173                                 output.innerHTML = loader + status_msg;
 174                         break
 175
 176                         case 'running':
 177                                 if (capture_running) break;;
 178
 179                                 output.innerHTML = loader + status_msg;
 180
 181                                 bt_action.value = '<%:Stop capture%>';
 182                                 bt_action.setAttribute('data-action', 'stop');
 183                                 capture_running = 1;
 184                         break;
 185
 186                         case 'completed':
 187                         case 'failed':
 188                                 if (!capture_running) break;
 189
 190                                 if (status == "completed")
 191                                 {
 192                                         link_list_update();
 193                                 }
 194
 195                                 output.innerHTML = "<pre>" + message + "</pre>";
 196                                 bt_action.value = '<%:Start capture%>';
 197                                 bt_action.setAttribute('data-action', 'start');
 198                                 bt_action.disabled = false;
 199                                 capture_running = 0;
 200                         break;
 201                 }
 202         }
 203
 204
 205         function check_status()
 206         {
 207
 208                 XHR.poll(3, '<%=luci.dispatcher.build_url("admin", "network")%>/cshark_check_status', null,
 209                 function(x, data)
 210                 {
 211                         if (!x)
 212                         {
 213                                 if (capture_running)
 214                                         update_status("failed", "Invalid response when fetching status.");
 215
 216                                 return;
 217                         }
 218                         console.log(data)
 219
 220                         update_status( (data.status == 1) && "running" || "completed", data.msg);
 221                 })
 222         }
 223
 224         function link_list_clear()
 225         {
 226                 var csxhr_del = new XHR();
 227                 csxhr_del.get('<%=luci.dispatcher.build_url("admin", "network")%>/cshark_link_list_clear', null,
 228                 function(x)
 229                 {
 230                         if (!x)
 231                                 return false;
 232
 233                         link_list_update();
 234                 });
 235         }
 236
 237
 238         function link_list_update()
 239         {
 240                 var t_link = document.getElementById("t_link_list");
 241                 if (!t_link) return;
 242
 243                 var row_count = t_link.rows.length;
 244                 while(--row_count) t_link.deleteRow(row_count);
 245
 246                 var cell = t_link.insertRow(-1).insertCell(0);
 247                 cell.colSpan = 2;
 248                 cell.innerHTML = loader;
 249
 250                 var csxhr_link = new XHR();
 251                 csxhr_link.get('<%=luci.dispatcher.build_url("admin", "network")%>/cshark_link_list_get', null,
 252                 function(x, entries)
 253                 {
 254                         var row = t_link.deleteRow(1);
 255
 256                         if (!x) return;
 257
 258                         if (!entries || !entries.length)
 259                         {
 260                                 var cell = t_link.insertRow(-1).insertCell(0);
 261                                 cell.colSpan = 2;
 262                                 cell.innerHTML = '<em><br />There are no captures available yet.</em>';
 263
 264                                 return;
 265                         }
 266
 267                         for (var i = 0, len = entries.length; i < len ; i++)
 268                         {
 269                                 var entry = entries[i][0];
 270                                 if (!entry) continue;
 271
 272                                 var data = entry.split(",");
 273                                 var url = data[0];
 274                                 var timestamp = data[1];
 275
 276                                 var row = t_link.insertRow(-1);
 277                                 row.insertCell(0).innerHTML = '<a href="'+url+'" target="_blank">'+url+'</a>';
 278                                 row.insertCell(1).innerHTML = get_date(timestamp);
 279                         }
 280
 281                         var cell = t_link.insertRow(-1).insertCell(0);
 282                         cell.colSpan = 2;
 283                         cell.style.textAlign="center";
 284                         cell.innerHTML = '<input type="button" onclick="link_list_clear()" class="cbi-button" value ="<%:Clear list%>" />';
 285                 })
 286         }
 287
 288         check_status();
 289         link_list_update();
 290 //]]></script>