<%# Copyright 2017 Jo-Philipp Wich Licensed to the public under the Apache License 2.0. -%> <% css = [[ #chartjs-tooltip { opacity: 0; position: absolute; background: rgba(0, 0, 0, .7); color: white; padding: 3px; border-radius: 3px; -webkit-transition: all .1s ease; transition: all .1s ease; pointer-events: none; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); z-index: 200; } #chartjs-tooltip.above { -webkit-transform: translate(-50%, -100%); transform: translate(-50%, -100%); } #chartjs-tooltip.above:before { border: solid; border-color: #111 transparent; border-color: rgba(0, 0, 0, .8) transparent; border-width: 8px 8px 0 8px; bottom: 1em; content: ""; display: block; left: 50%; top: 100%; position: absolute; z-index: 99; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); } table { border: 1px solid #999; border-collapse: collapse; margin: 0 0 2px !important; } th, td, table table td { border: 1px solid #999; text-align: right; padding: 1px 3px !important; white-space: nowrap; } tbody td { border-bottom-color: #ccc; } tbody td[rowspan] { border-bottom-color: #999; } tbody tr:last-child td { border-bottom-color: #999; } .pie { width: 200px; display: inline-block; margin: 20px; } .pie label { font-weight: bold; font-size: 14px; display: block; margin-bottom: 10px; text-align: center; } .kpi { display: inline-block; margin: 80px 20px 20px; vertical-align: top; } .kpi ul { list-style: none; } .kpi li { margin: 10px; display: none; } .kpi big { font-weight: bold; } #detail-bubble { position: absolute; opacity: 0; visibility: hidden; } #detail-bubble.in { opacity: 1; visibility: visible; transition: opacity 0.5s; } #detail-bubble > div { border: 1px solid #ccc; border-radius: 2px; padding: 5px; background: #fcfcfc; } #detail-bubble .head { text-align: center; white-space: nowrap; position: relative; } #detail-bubble .head .dismiss { top: 0; right: 0; width: 20px; line-height: 20px; text-align: center; text-decoration: none; font-weight: bold; color: #000; position: absolute; font-size: 20px; } #detail-bubble .pie { width: 100px; margin: 5px; } #detail-bubble .kpi { margin: 40px 5px 5px; font-size: smaller; text-align: left; } #detail-bubble .kpi ul { margin: 0; } #bubble-arrow { border: 1px solid #ccc; border-width: 1px 0 0 1px; background: #fcfcfc; width: 15px; height: 15px; position: absolute; left: 0; top: -8px; transform: rotate(45deg); margin: 0 0 0 -8px; } tr.active > td { border-bottom: 2px solid red; } tr.active > td.active { border: 2px solid red; border-bottom: none; } td.detail { border: 2px solid red; border-top: none; opacity: 0; transition: opacity 0.5s; } td.detail.in { opacity: 1; } th.hostname, td.hostname { text-align: left; } ]] -%> <%+header%>

<%:Netlink Bandwidth Monitor%>

Download

Upload

<%_Hostname: example.org%>
<%_Vendor: Example Corp.%>

<%:Select accounting period:%>

<%:Traffic / Host%>

<%:Connections / Host%>

<%_0 hosts%>
<%_0 download%>
<%_0 upload%>
<%_0 connections%>

<%:Host%>	<%:MAC%>	<%:Connections%>	<%:Download (Bytes / Packets)%>		<%:Upload (Bytes / Packets)%>

<%:Download / Application%>

<%:Upload / Application%>

<%_0 different application protocols%>
<%_0 cause the most download%>
<%_0 cause the most upload%>
<%_0 cause the most connections%>

<%:Application%>	<%:Connections%>	<%:Download (Bytes / Packets)%>		<%:Upload (Bytes / Packets)%>

<%:IPv4 vs. IPv6%>

<%:Dualstack enabled hosts%>

<%_0% IPv6 support rate among hosts%>
<%_0% of the total traffic is IPv6%>
<%_0B total IPv6 download%>
<%_0B total IPv6 upload%>

<%:Host%>	<%:MAC%>	<%:Family%>	<%:Download (Bytes / Packets)%>		<%:Upload (Bytes / Packets)%>

<%+footer%>