<%# 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:nth-last-child(4) { width: 10%; } tbody td:nth-last-child(3) { width: 10%; } tbody td:nth-last-child(2) { width: 10%; } tbody td:nth-last-child(1) { width: 10%; } tbody td[rowspan] { border-bottom-color: #999; } tbody tr:last-child td { border-bottom-color: #999; } .kpi { display: inline-block; 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 .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%>

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

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

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

<%_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)%>

<%_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%>