<html lang="en">
<head>
<title>NetData - Real-time performance monitoring, done right!</title>
+ <meta name="application-name" content="netdata">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="utf-8">
and that you have chown it to be owned by netdata:netdata
-->
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
- <script type="text/javascript" src="dashboard.js?v38"></script>
+ <script type="text/javascript" src="dashboard.js?v41"></script>
<script>
// --- OPTIONS FOR THE CHARTS --
// destroy charts not shown (lowers memory on the browsers)
- // set this to 'yes' to destroy, 'false' to hide the charts
- NETDATA.options.current.destroy_on_hide = false;
+ // set this to 'true' to destroy, 'false' to hide the charts
+ NETDATA.options.current.destroy_on_hide = true;
// set this to false, to always show all dimensions
NETDATA.options.current.eliminate_zero_dimensions = true;
// set this to false, to lower the pressure on the browser
- NETDATA.options.current.concurrent_refreshes = true;
+ NETDATA.options.current.concurrent_refreshes = false;
// if you need to support slow mobile phones, set this to false
NETDATA.options.current.parallel_refresher = true;
.mygauge {
position: relative;
display: block;
- width: 20vw;
- height: 12vw;
+ width: 18vw;
+ height: 11vw;
}
.mygauge-button {
</div>
<div class="mygauge-button">
<br/> <br/>
- <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//london.my-netdata.io/default.html'" style="font-size: 1.5vw;">Enter London!</button>
- <div style="font-size: 1vw;">
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//london.my-netdata.io/default.html'" style="font-size: 1.0vw;">Enter London!</button>
+ <div style="font-size: 0.8vw;">
Donated by DigitalOcean.com
</div>
</div>
</div>
<div class="mygauge-button">
<br/> <br/>
- <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//atlanta.my-netdata.io/default.html'" style="font-size: 1.5vw;">Enter Atlanta!</button>
- <div style="font-size: 1vw;">
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//atlanta.my-netdata.io/default.html'" style="font-size: 1.0vw;">Enter Atlanta!</button>
+ <div style="font-size: 0.8vw;">
Donated by CDN77.com
</div>
</div>
<div class="mygauge-combo">
<div class="mygauge">
<div data-netdata="netdata.requests"
- data-host="//athens.my-netdata.io"
- data-title="EU - Greece"
+ data-host="//sanfrancisco.netdata.rocks"
+ data-title="US - California"
data-chart-library="gauge"
data-width="100%"
data-after="-300"
</div>
<div class="mygauge-button">
<br/> <br/>
- <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//athens.my-netdata.io/default.html'" style="font-size: 1.5vw;">Come to Greece!</button>
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//sanfrancisco.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter California!</button>
<div style="font-size: 0.8vw;">
-
+ Donated by DigitalOcean.com
+ </div>
+ </div>
+ </div>
+ <div class="mygauge-combo">
+ <div class="mygauge">
+ <div data-netdata="netdata.requests"
+ data-host="//toronto.netdata.rocks"
+ data-title="Canada"
+ data-chart-library="gauge"
+ data-width="100%"
+ data-after="-300"
+ data-points="300"
+ data-colors="#885588"
+ ></div>
+ </div>
+ <div class="mygauge-button">
+ <br/> <br/>
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//toronto.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Canada!</button>
+ <div style="font-size: 0.8vw;">
+ Donated by DigitalOcean.com
+ </div>
+ </div>
+ </div>
+ <br/> <br/>
+ <div class="mygauge-combo">
+ <div class="mygauge">
+ <div data-netdata="netdata.requests"
+ data-host="//frankfurt.netdata.rocks"
+ data-title="EU - Germany"
+ data-chart-library="easypiechart"
+ data-width="75%"
+ data-after="-300"
+ data-points="300"
+ data-colors="#AAAA55"
+ ></div>
+ </div>
+ <div class="mygauge-button">
+ <br/> <br/>
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//frankfurt.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Germany!</button>
+ <div style="font-size: 0.8vw;">
+ Donated by DigitalOcean.com
+ </div>
+ </div>
+ </div>
+ <div class="mygauge-combo">
+ <div class="mygauge">
+ <div data-netdata="netdata.requests"
+ data-host="//newyork.netdata.rocks"
+ data-title="US - New York"
+ data-chart-library="easypiechart"
+ data-width="75%"
+ data-after="-300"
+ data-points="300"
+ data-colors="#BB5533"
+ ></div>
+ </div>
+ <div class="mygauge-button">
+ <br/> <br/>
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//newyork.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter New York!</button>
+ <div style="font-size: 0.8vw;">
+ Donated by DigitalOcean.com
+ </div>
+ </div>
+ </div>
+ <div class="mygauge-combo">
+ <div class="mygauge">
+ <div data-netdata="netdata.requests"
+ data-host="//singapore.netdata.rocks"
+ data-title="Signapore"
+ data-chart-library="easypiechart"
+ data-width="75%"
+ data-after="-300"
+ data-points="300"
+ data-colors="#5588BB"
+ ></div>
+ </div>
+ <div class="mygauge-button">
+ <br/> <br/>
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//singapore.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter Singapore!</button>
+ <div style="font-size: 0.8vw;">
+ Donated by DigitalOcean.com
+ </div>
+ </div>
+ </div>
+ <div class="mygauge-combo">
+ <div class="mygauge">
+ <div data-netdata="netdata.requests"
+ data-host="//bangalore.netdata.rocks"
+ data-title="India"
+ data-chart-library="easypiechart"
+ data-width="75%"
+ data-after="-300"
+ data-points="300"
+ data-colors="#BB55BB"
+ ></div>
+ </div>
+ <div class="mygauge-button">
+ <br/> <br/>
+ <button type="button" class="btn btn-default" data-toggle="button" aria-pressed="false" autocomplete="off" onclick="window.location='//bangalore.netdata.rocks/default.html'" style="font-size: 1.0vw;">Enter India!</button>
+ <div style="font-size: 0.8vw;">
+ Donated by DigitalOcean.com
</div>
</div>
</div>
this page is a custom <b>netdata</b> dashboard
</div>
<div class="mycontent">
- charts are coming from 3 servers, in parallel
+ charts are coming from 8 servers, in parallel
<br/>
the servers are not aware of this multi-server dashboard,
<br/>
- each server is not aware of the other 2 servers,
+ each server is not aware of the other servers,
<br/>
but on this dashboard <b>they are one</b>!
</div>
</div>
<div class="mytitle">
- our <code>ngnix</code> performance
+ our <code>nginx</code> performance
</div>
<div class="mycontent">
(we proxy netdata through nginx, on the demo sites)
<div class="mysparkline">
<div class="mysparkline-overchart-label">
- <b>EU - Greece</b> web requests/s
+ <b>US - California</b> web requests/s
</div>
<div class="mysparkline-overchart-value" id="nginx.requests.netdata3" >
</div>
<div data-netdata="nginx.requests"
data-dimensions="requests"
- data-host="//athens.my-netdata.io"
+ data-host="//sanfrancisco.netdata.rocks"
data-chart-library="dygraph"
data-dygraph-theme="sparkline"
data-dygraph-type="area"
data-show-value-of-requests-at="nginx.requests.netdata3"
></div>
</div>
+
+ <div class="mysparkline">
+ <div class="mysparkline-overchart-label">
+ <b>Canada</b> web requests/s
+ </div>
+ <div class="mysparkline-overchart-value" id="nginx.requests.netdata4" >
+ </div>
+ <div data-netdata="nginx.requests"
+ data-dimensions="requests"
+ data-host="//toronto.netdata.rocks"
+ data-chart-library="dygraph"
+ data-dygraph-theme="sparkline"
+ data-dygraph-type="area"
+ data-width="100%"
+ data-height="100%"
+ data-after="-300"
+ data-colors="#885588"
+ data-show-value-of-requests-at="nginx.requests.netdata4"
+ ></div>
+ </div>
</div>
<div role="tabpanel" class="tab-pane" id="nginx_connections">
<div class="mysparkline">
<div class="mysparkline-overchart-label">
- <b>EU - Greece</b> active connections
+ <b>US - California</b> active connections
</div>
<div class="mysparkline-overchart-value" id="nginx.connections.netdata3" >
</div>
<div data-netdata="nginx.connections"
data-dimensions="active"
- data-host="//athens.my-netdata.io"
+ data-host="//sanfrancisco.netdata.rocks"
data-chart-library="dygraph"
data-dygraph-theme="sparkline"
data-dygraph-type="area"
data-show-value-of-active-at="nginx.connections.netdata3"
></div>
</div>
+
+ <div class="mysparkline">
+ <div class="mysparkline-overchart-label">
+ <b>Canada</b> active connections
+ </div>
+ <div class="mysparkline-overchart-value" id="nginx.connections.netdata4" >
+ </div>
+ <div data-netdata="nginx.connections"
+ data-dimensions="active"
+ data-host="//toronto.netdata.rocks"
+ data-chart-library="dygraph"
+ data-dygraph-theme="sparkline"
+ data-dygraph-type="area"
+ data-width="100%"
+ data-height="100%"
+ data-after="-300"
+ data-colors="#885588"
+ data-show-value-of-active-at="nginx.connections.netdata4"
+ ></div>
+ </div>
</div>
</div>
<div class="myfullchart">
<div data-netdata="tc.world_out"
- data-host="//athens.my-netdata.io"
+ data-host="//sanfrancisco.netdata.rocks"
+ data-chart-library="dygraph"
+ data-title="US - California, traffic we send per service"
+ data-width="100%"
+ data-height="100%"
+ data-after="-300"
+ ></div>
+ </div>
+
+ <div class="myfullchart">
+ <div data-netdata="tc.world_out"
+ data-host="//toronto.netdata.rocks"
data-chart-library="dygraph"
- data-title="EU - Greece, traffic we send per service"
+ data-title="Canada, traffic we send per service"
data-width="100%"
data-height="100%"
data-after="-300"
></div>
</div>
</div>
+
<div role="tabpanel" class="tab-pane" id="inbound">
<div class="myfullchart">
<div data-netdata="tc.world_in"
<div class="myfullchart">
<div data-netdata="tc.world_in"
- data-host="//athens.my-netdata.io"
+ data-host="//sanfrancisco.netdata.rocks"
+ data-chart-library="dygraph"
+ data-title="US - California, traffic we receive per service"
+ data-width="100%"
+ data-height="100%"
+ data-after="-300"
+ ></div>
+ </div>
+
+ <div class="myfullchart">
+ <div data-netdata="tc.world_in"
+ data-host="//toronto.netdata.rocks"
data-chart-library="dygraph"
- data-title="EU - Greece, traffic we receive per service"
+ data-title="Canada, traffic we receive per service"
data-width="100%"
data-height="100%"
data-after="-300"
<div class="mysparkline">
<div class="mysparkline-overchart-label">
- <b>EU - Greece</b>, TCP SYN packets/s received
+ <b>US - California</b>, TCP SYN packets/s received
</div>
<div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata3" >
</div>
<div data-netdata="netfilter.synproxy_syn_received"
data-dimensions="received"
- data-host="//athens.my-netdata.io"
+ data-host="//sanfrancisco.netdata.rocks"
data-chart-library="dygraph"
data-dygraph-theme="sparkline"
data-dygraph-type="area"
data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata3"
></div>
</div>
+
+ <div class="mysparkline">
+ <div class="mysparkline-overchart-label">
+ <b>Canada</b>, TCP SYN packets/s received
+ </div>
+ <div class="mysparkline-overchart-value" id="netfilter.synproxy_syn_received.netdata4" >
+ </div>
+ <div data-netdata="netfilter.synproxy_syn_received"
+ data-dimensions="received"
+ data-host="//toronto.netdata.rocks"
+ data-chart-library="dygraph"
+ data-dygraph-theme="sparkline"
+ data-dygraph-type="area"
+ data-width="100%"
+ data-height="100%"
+ data-after="-300"
+ data-colors="#885588"
+ data-show-value-of-received-at="netfilter.synproxy_syn_received.netdata4"
+ ></div>
+ </div>
</div>
<div style="width: 100%; text-align: right; font-size: 1vw;">
<i class="fa fa-comment" aria-hidden="true"></i> <i>did you notice the decimal numbers?
data-width="100%"
data-height="100%"
data-after="-300"
+ data-dygraph-valuerange="[0, 100]"
></div>
</div>
data-width="100%"
data-height="100%"
data-after="-300"
+ data-dygraph-valuerange="[0, 100]"
+ ></div>
+ </div>
+
+ <div class="myfullchart">
+ <div data-netdata="system.cpu"
+ data-host="//sanfrancisco.netdata.rocks"
+ data-chart-library="dygraph"
+ data-title="US - California, CPU Usage"
+ data-width="100%"
+ data-height="100%"
+ data-after="-300"
+ data-dygraph-valuerange="[0, 100]"
></div>
</div>
<div class="myfullchart">
<div data-netdata="system.cpu"
- data-host="//athens.my-netdata.io"
+ data-host="//toronto.netdata.rocks"
data-chart-library="dygraph"
- data-title="EU - Greece, CPU Usage"
+ data-title="Canada, CPU Usage"
data-width="100%"
data-height="100%"
data-after="-300"
+ data-dygraph-valuerange="[0, 100]"
></div>
</div>
</div>
<div class="mysparkline">
<div class="mysparkline-overchart-label">
- <b>EU - Greece</b>, CPU % of a single core
+ <b>US - California</b>, CPU % of a single core
</div>
<div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
</div>
<div data-netdata="users.cpu"
data-dimensions="netdata"
- data-host="//athens.my-netdata.io"
+ data-host="//sanfrancisco.netdata.rocks"
data-chart-library="dygraph"
data-dygraph-theme="sparkline"
data-dygraph-type="area"
></div>
</div>
+ <div class="mysparkline">
+ <div class="mysparkline-overchart-label">
+ <b>Toronto</b>, CPU % of a single core
+ </div>
+ <div class="mysparkline-overchart-value" id="users.cpu.netdata4" >
+ </div>
+ <div data-netdata="users.cpu"
+ data-dimensions="netdata"
+ data-host="//toronto.netdata.rocks"
+ data-chart-library="dygraph"
+ data-dygraph-theme="sparkline"
+ data-dygraph-type="area"
+ data-width="100%"
+ data-height="100%"
+ data-after="-300"
+ data-colors="#885588"
+ data-show-value-of-netdata-at="users.cpu.netdata4"
+ ></div>
+ </div>
+
<div style="width: 100%; text-align: right; font-size: 1vw;">
<i class="fa fa-comment" aria-hidden="true"></i> <i>this utilization is about the whole netdata process tree and the percentage is of <b>a single core</b>!
<br/>including <b>BASH</b> plugins (it monitors <code>mysql</code> on the demo sites), <b>node.js</b> plugins (it monitors <code>bind9</code> on the demo sites), etc.
<div class="mysparkline">
<div class="mysparkline-overchart-label">
- <b>EU - Greece</b>, API average response time in milliseconds
+ <b>US - California</b>, API average response time in milliseconds
</div>
<div class="mysparkline-overchart-value" id="netdata.response_time3" >
</div>
<div data-netdata="netdata.response_time"
- data-host="//athens.my-netdata.io"
+ data-host="//sanfrancisco.netdata.rocks"
data-chart-library="dygraph"
data-dygraph-theme="sparkline"
data-dygraph-type="area"
></div>
</div>
+ <div class="mysparkline">
+ <div class="mysparkline-overchart-label">
+ <b>Canada</b>, API average response time in milliseconds
+ </div>
+ <div class="mysparkline-overchart-value" id="netdata.response_time4" >
+ </div>
+ <div data-netdata="netdata.response_time"
+ data-host="//toronto.netdata.rocks"
+ data-chart-library="dygraph"
+ data-dygraph-theme="sparkline"
+ data-dygraph-type="area"
+ data-width="100%"
+ data-height="100%"
+ data-after="-300"
+ data-colors="#885588"
+ data-show-value-of-response_time-at="netdata.response_time4"
+ ></div>
+ </div>
+
<div style="width: 100%; text-align: right; font-size: 1vw;">
<i class="fa fa-comment" aria-hidden="true"></i> <i>netdata is really <b>fast</b> (the values are milliseconds!)
<br/>