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" src="<%=resource%>/cbi.js"></script>
  86 <script type="text/javascript">//<![CDATA[
  87
  88         var capture_running = 0;
  89         var pid_file = 0;
  90         var bt_action = document.getElementById('bt_action');
  91         var a_clear_links = document.getElementById('a_clear_links');
  92         var output = document.getElementById('cshark-rc-output');
  93         var loader = '<img src="<%=resource%>/icons/loading.gif" alt="<%:Loading%>" width="16" height="16" style="vertical-align:middle" /> ';
  94         var msg = { 'start' : '<%:Waiting for capture to complete...%>', 'stop' : '<%:Waiting for upload to complete...%>' };
  95         var status_msg = msg['start'];
  96
  97         function get_date(timestamp)
  98         {
  99                 function pad_str(str)
 100                 {
 101                         return (str < 10) ? "0" + str : str;
 102                 }
 103
 104                 var current_date = new Date(timestamp * 1000);
 105                 return current_date.getFullYear() + "-" +
 106                                 pad_str(current_date.getMonth() + 1) + "-" +
 107                                 pad_str(current_date.getDate()) + " " +
 108                                 pad_str(current_date.getHours()) + ":" +
 109                                 pad_str(current_date.getMinutes()) + ":" +
 110                                 pad_str(current_date.getSeconds());
 111         }
 112
 113         bt_action.onclick = function()
 114         {
 115                 var action = this.getAttribute("data-action");
 116                 var csxhr = new XHR();
 117
 118                 if (action == "stop")
 119                 {
 120                         update_status(action);
 121
 122                         bt_action.disabled = true;
 123
 124                         csxhr.get('<%=luci.dispatcher.build_url("admin", "network")%>/cshark_iface_dump_stop', null,
 125                         function(x)
 126                         {
 127                                 if (!x || x.responseText.trim() != "0")
 128                                 {
 129                                         update_status("failed", "Invalid response on stop.");
 130                                 }
 131                         });
 132
 133                 }
 134                 else if (action == "start")
 135                 {
 136
 137                         var s_interfaces = document.getElementById('s_interfaces');
 138                         var s_value_type = document.getElementById('s_value_type');
 139                         var i_filter = document.getElementById('i_filter');
 140
 141                         var if_n = s_interfaces.selectedIndex;
 142                         var t_n = s_value_type.selectedIndex;
 143                         var ifname = s_interfaces.options[if_n].value.trim();
 144                         var filter_val = i_filter.value.trim();
 145                         var tx_val = document.getElementById('tx_value').value.trim();
 146                         var type_val = s_value_type.options[t_n].value.trim();
 147
 148                         if (type_val != 'P' && type_val != 'T' && type_val != 'S') type_val = 'T';
 149
 150                         if (!ifname || !type_val) return;
 151
 152                         if (isNaN(tx_val)) return alert("<%:value for [seconds, packets, bytes] must be Integer%>");
 153
 154                         update_status(action);
 155
 156                         csxhr.get('<%=luci.dispatcher.build_url("admin", "network")%>/cshark_iface_dump_start/' + ifname + '/' + tx_val + '/' + type_val + '/'+ filter_val, null,
 157                         function(x)
 158                         {
 159                                 if (!x)
 160                                         update_status("failed", "Invalid response on start.");
 161                                 else
 162                                         update_status("running");
 163                         });
 164                 }
 165         }
 166
 167         function update_status(status, message)
 168         {
 169                 switch (status)
 170                 {
 171                         case 'start':
 172                         case 'stop':
 173                                 status_msg = msg[status];
 174                                 output.innerHTML = loader + status_msg;
 175                         break
 176
 177                         case 'running':
 178                                 if (capture_running) break;;
 179
 180                                 output.innerHTML = loader + status_msg;
 181
 182                                 bt_action.value = '<%:Stop capture%>';
 183                                 bt_action.setAttribute('data-action', 'stop');
 184                                 capture_running = 1;
 185                         break;
 186
 187                         case 'completed':
 188                         case 'failed':
 189                                 if (!capture_running) break;
 190
 191                                 if (status == "completed")
 192                                 {
 193                                         link_list_update();
 194                                 }
 195
 196                                 output.innerHTML = "<pre>" + message + "</pre>";
 197                                 bt_action.value = '<%:Start capture%>';
 198                                 bt_action.setAttribute('data-action', 'start');
 199                                 bt_action.disabled = false;
 200                                 capture_running = 0;
 201                         break;
 202                 }
 203         }
 204
 205
 206         function check_status()
 207         {
 208
 209                 XHR.poll(3, '<%=luci.dispatcher.build_url("admin", "network")%>/cshark_check_status', null,
 210                 function(x, data)
 211                 {
 212                         if (!x)
 213                         {
 214                                 if (capture_running)
 215                                         update_status("failed", "Invalid response when fetching status.");
 216
 217                                 return;
 218                         }
 219                         console.log(data)
 220
 221                         update_status( (data.status == 1) && "running" || "completed", data.msg);
 222                 })
 223         }
 224
 225         function link_list_clear()
 226         {
 227                 var csxhr_del = new XHR();
 228                 csxhr_del.get('<%=luci.dispatcher.build_url("admin", "network")%>/cshark_link_list_clear', null,
 229                 function(x)
 230                 {
 231                         if (!x)
 232                                 return false;
 233
 234                         link_list_update();
 235                 });
 236         }
 237
 238
 239         function link_list_update()
 240         {
 241                 var t_link = document.getElementById("t_link_list");
 242                 if (!t_link) return;
 243
 244                 var row_count = t_link.rows.length;
 245                 while(--row_count) t_link.deleteRow(row_count);
 246
 247                 var cell = t_link.insertRow(-1).insertCell(0);
 248                 cell.colSpan = 2;
 249                 cell.innerHTML = loader;
 250
 251                 var csxhr_link = new XHR();
 252                 csxhr_link.get('<%=luci.dispatcher.build_url("admin", "network")%>/cshark_link_list_get', null,
 253                 function(x, entries)
 254                 {
 255                         var row = t_link.deleteRow(1);
 256
 257                         if (!x) return;
 258
 259                         if (!entries || !entries.length)
 260                         {
 261                                 var cell = t_link.insertRow(-1).insertCell(0);
 262                                 cell.colSpan = 2;
 263                                 cell.innerHTML = '<em><br />There are no captures available yet.</em>';
 264
 265                                 return;
 266                         }
 267
 268                         for (var i = 0, len = entries.length; i < len ; i++)
 269                         {
 270                                 var entry = entries[i][0];
 271                                 if (!entry) continue;
 272
 273                                 var data = entry.split(",");
 274                                 var url = data[0];
 275                                 var timestamp = data[1];
 276
 277                                 var row = t_link.insertRow(-1);
 278                                 row.insertCell(0).innerHTML = '<a href="'+url+'" target="_blank">'+url+'</a>';
 279                                 row.insertCell(1).innerHTML = get_date(timestamp);
 280                         }
 281
 282                         var cell = t_link.insertRow(-1).insertCell(0);
 283                         cell.colSpan = 2;
 284                         cell.style.textAlign="center";
 285                         cell.innerHTML = '<input type="button" onclick="link_list_clear()" class="cbi-button" value ="<%:Clear list%>" />';
 286                 })
 287         }
 288
 289         check_status();
 290         link_list_update();
 291 //]]></script>