applications/luci-app-nlbwmon/luasrc/view/nlbw/display.htm

   1 <%#
   2  Copyright 2017-2018 Jo-Philipp Wich <jo@mein.io>
   3  Licensed to the public under the Apache License 2.0.
   4 -%>
   5
   6 <%+header%>
   7
   8 <link rel="stylesheet" href="<%=resource%>/view/nlbw.css" />
   9
  10 <script type="text/javascript" src="<%=resource%>/nlbw.chart.min.js"></script>
  11 <script type="text/javascript" src="<%=resource%>/view/nlbw.js"></script>
  12
  13 <h2 name="content"><%:Netlink Bandwidth Monitor%></h2>
  14
  15 <p>
  16         <%:Select accounting period:%>
  17         <select id="nlbw.period" style="display:none"></select>
  18 </p>
  19
  20 <hr />
  21
  22 <div>
  23         <div class="cbi-section" data-tab="traffic" data-tab-title="<%:Traffic Distribution%>">
  24                 <div class="head">
  25                         <div class="pie">
  26                                 <label><%:Traffic / Host%></label>
  27                                 <canvas id="traf-pie" width="200" height="200"></canvas>
  28                         </div>
  29
  30                         <div class="pie">
  31                                 <label><%:Connections / Host%></label>
  32                                 <canvas id="conn-pie" width="200" height="200"></canvas>
  33                         </div>
  34
  35                         <div class="kpi">
  36                                 <ul>
  37                                         <li><%_<big id="host-total">0</big> hosts%></li>
  38                                         <li><%_<big id="rx-total">0</big> download%></li>
  39                                         <li><%_<big id="tx-total">0</big> upload%></li>
  40                                         <li><%_<big id="conn-total">0</big> connections%></li>
  41                                 </ul>
  42                         </div>
  43                 </div>
  44                 <div class="table" id="host-data">
  45                         <div class="tr table-titles">
  46                                 <div class="th left hostname"><%:Host%></div>
  47                                 <div class="th right"><%:MAC%></div>
  48                                 <div class="th right"><%:Connections%></div>
  49                                 <div class="th right"><%:Download (Bytes)%></div>
  50                                 <div class="th right"><%:Download (Packets)%></div>
  51                                 <div class="th right"><%:Upload (Bytes)%></div>
  52                                 <div class="th right"><%:Upload (Packets)%></div>
  53                         </div>
  54                         <div class="tr placeholder">
  55                                 <div class="td">
  56                                         <em class="spinning"><%:Collecting data...%></em>
  57                                 </div>
  58                         </div>
  59                 </div>
  60         </div>
  61
  62         <div class="cbi-section" data-tab="layer7" data-tab-title="<%:Application Protocols%>">
  63                 <div class="head">
  64                         <div class="pie">
  65                                 <label><%:Download / Application%></label>
  66                                 <canvas id="layer7-rx-pie" width="200" height="200"></canvas>
  67                         </div>
  68
  69                         <div class="pie">
  70                                 <label><%:Upload / Application%></label>
  71                                 <canvas id="layer7-tx-pie" width="200" height="200"></canvas>
  72                         </div>
  73
  74                         <div class="kpi">
  75                                 <ul>
  76                                         <li><%_<big id="layer7-total">0</big> different application protocols%></li>
  77                                         <li><%_<big id="layer7-most-rx">0</big> cause the most download%></li>
  78                                         <li><%_<big id="layer7-most-tx">0</big> cause the most upload%></li>
  79                                         <li><%_<big id="layer7-most-conn">0</big> cause the most connections%></li>
  80                                 </ul>
  81                         </div>
  82                 </div>
  83                 <div class="table" id="layer7-data">
  84                         <div class="tr table-titles">
  85                                 <div class="th left"><%:Application%></div>
  86                                 <div class="th right"><%:Connections%></div>
  87                                 <div class="th right"><%:Download (Bytes)%></div>
  88                                 <div class="th right"><%:Download (Packets)%></div>
  89                                 <div class="th right"><%:Upload (Bytes)%></div>
  90                                 <div class="th right"><%:Upload (Packets)%></div>
  91                         </div>
  92                         <div class="tr placeholder">
  93                                 <div class="td">
  94                                         <em class="spinning"><%:Collecting data...%></em>
  95                                 </div>
  96                         </div>
  97                 </div>
  98         </div>
  99
 100         <div class="cbi-section" data-tab="ipv6" data-tab-title="<%:IPv6%>">
 101                 <div class="head">
 102                         <div class="pie">
 103                                 <label><%:IPv4 vs. IPv6%></label>
 104                                 <canvas id="ipv6-share-pie" width="200" height="200"></canvas>
 105                         </div>
 106
 107                         <div class="pie">
 108                                 <label><%:Dualstack enabled hosts%></label>
 109                                 <canvas id="ipv6-hosts-pie" width="200" height="200"></canvas>
 110                         </div>
 111
 112                         <div class="kpi">
 113                                 <ul>
 114                                         <li><%_<big id="ipv6-hosts">0%</big> IPv6 support rate among hosts%></li>
 115                                         <li><%_<big id="ipv6-share">0%</big> of the total traffic is IPv6%></li>
 116                                         <li><%_<big id="ipv6-rx">0B</big> total IPv6 download%></li>
 117                                         <li><%_<big id="ipv6-tx">0B</big> total IPv6 upload%></li>
 118                                 </ul>
 119                         </div>
 120                 </div>
 121                 <div class="table" id="ipv6-data">
 122                         <div class="tr table-titles">
 123                                 <div class="th left"><%:Host%></div>
 124                                 <div class="th right"><%:MAC%></div>
 125                                 <div class="th double right hide-xs"><%:Family%></div>
 126                                 <div class="th double right"><%:Download (Bytes)%></div>
 127                                 <div class="th double right"><%:Download (Packets)%></div>
 128                                 <div class="th double right"><%:Upload (Bytes)%></div>
 129                                 <div class="th double right"><%:Upload (Packets)%></div>
 130                         </div>
 131                         <div class="tr placeholder">
 132                                 <div class="td">
 133                                         <em class="spinning"><%:Collecting data...%></em>
 134                                 </div>
 135                         </div>
 136                 </div>
 137         </div>
 138
 139         <div class="cbi-section" data-tab="export" data-tab-title="<%:Export%>">
 140                 <ul>
 141                         <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=mac&#38;order_by=-rx,-tx"><%:CSV, grouped by MAC%></a></li>
 142                         <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=ip&#38;order_by=-rx,-tx"><%:CSV, grouped by IP%></a></li>
 143                         <li><a href="<%=url('admin/nlbw/data')%>?type=csv&#38;group_by=layer7&#38;order_by=-rx,-tx"><%:CSV, grouped by protocol%></a></li>
 144                         <li><a href="<%=url('admin/nlbw/data')%>?type=json"><%:JSON dump%></a></li>
 145                 </ul>
 146         </div>
 147 </div>
 148
 149 <script type="text/javascript">//<![CDATA[
 150         var hostInfo = <%=luci.util.serialize_json(luci.sys.net.host_hints())%>;
 151
 152         XHR.get(L.url('admin/nlbw/list'), null, function(xhr, res) {
 153
 154                 if (res !== null && typeof(res) === 'object' && res.length > 0) {
 155                         trafficPeriods = res;
 156                         renderPeriods();
 157                 }
 158
 159                 xhr.open('GET', 'https://raw.githubusercontent.com/jow-/oui-database/master/oui.json', true);
 160                 xhr.onreadystatechange = function() {
 161                         if (xhr.readyState === 4) {
 162                                 try { res = JSON.parse(xhr.responseText); }
 163                                 catch(e) { res = null; }
 164
 165                                 if (res !== null && typeof(res) === 'object' && (res.length % 3) === 0)
 166                                         ouiData = res;
 167
 168                                 fetchData('');
 169                         }
 170                 };
 171                 xhr.send(null);
 172         });
 173
 174         document.addEventListener('tooltip-open', function(ev) {
 175                 renderHostDetail.call(ev.detail.target, ev.target);
 176         });
 177
 178         if ('ontouchstart' in window) {
 179                 document.addEventListener('touchstart', function(ev) {
 180                         var tooltip = document.querySelector('.cbi-tooltip');
 181                         if (tooltip === ev.target || tooltip.contains(ev.target))
 182                                 return;
 183
 184                         L.hideTooltip(ev);
 185                 });
 186         }
 187 //]]></script>
 188
 189 <%+footer%>