added sharing info on all pages; added average response time at demosites.html
Costa Tsaousis (ktsaou) committed
May 21, 2016 at 22:28 UTC
085d02cf6f37bf11d29db57852b2b02e18d6a5d2
7 files changed
+196
-66
web/dashboard.html
+9
-1
@@ -10,6 +10,14 @@
10
<meta name="apple-mobile-web-app-capable" content="yes">
11
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
<meta name="author" content="costa@tsaousis.gr">
13
+
14
+ <meta property="og:locale" content="en_US" />
15
+ <meta property="og:image" content="images/seo-performance-512.png"/>
16
+ <meta property="og:url" content="http://my-netdata.io/"/>
17
+ <meta property="og:type" content="website"/>
18
+ <meta property="og:site_name" content="netdata"/>
19
+ <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
20
+ <meta property="og:description" content="netdata is an embeddable real-time performance monitoring solution, for Linux systems, micro services, applications, APIs, SNMP devices. Stunning dashboards, blazzingly fast and extremely interactive." />
21
</head>
22
<body>
23
@@ -646,4 +654,4 @@ So, to avoid flashing the charts, we destroy and re-create the charts on each up
654
<!-- <script> netdataServer = "http://box:19999"; </script> -->
655
656
<!-- load the dashboard manager - it will do the rest -->
649
- <script type="text/javascript" src="dashboard.js?v37"></script>
657
+ <script type="text/javascript" src="dashboard.js?v38"></script>
web/dashboard.js
+9
-4
@@ -2149,11 +2149,11 @@
2149
// mark all dimensions as invalid
2150
this.dimensions_visibility.invalidateAll();
2151
2152
- var genLabel = function(state, parent, name, count) {
2152
+ var genLabel = function(state, parent, dim, name, count) {
2153
var color = state._chartDimensionColor(name);
2154
2155
var user_element = null;
2156
- var user_id = self.data('show-value-of-' + name + '-at') || null;
2156
+ var user_id = self.data('show-value-of-' + dim + '-at') || null;
2157
if(user_id !== null) {
2158
user_element = document.getElementById(user_id) || null;
2159
if(user_element === null)
@@ -2458,14 +2458,14 @@
2458
this.log('labels from data: "' + this.element_legend_childs.series.labels_key + '"');
2459
2460
for(var i = 0, len = this.data.dimension_names.length; i < len ;i++) {
2461
- genLabel(this, content, this.data.dimension_names[i], i);
2461
+ genLabel(this, content, this.data.dimension_ids[i], this.data.dimension_names[i], i);
2462
}
2463
}
2464
else {
2465
var tmp = new Array();
2466
for(var dim in this.chart.dimensions) {
2467
tmp.push(this.chart.dimensions[dim].name);
2468
- genLabel(this, content, this.chart.dimensions[dim].name, i);
2468
+ genLabel(this, content, dim, this.chart.dimensions[dim].name, i);
2469
}
2470
this.element_legend_childs.series.labels_key = tmp.toString();
2471
if(this.debug === true)
@@ -3787,6 +3787,10 @@
3787
showLabelsOnHighlight: self.data('dygraph-showlabelsonhighlight') || true,
3788
hideOverlayOnMouseOut: self.data('dygraph-hideoverlayonmouseout') || true,
3789
3790
+ includeZero: self.data('dygraph-includezero') || false,
3791
+ xRangePad: self.data('dygraph-xrangepad') || 0,
3792
+ yRangePad: self.data('dygraph-yrangepad') || 1,
3793
+
3794
ylabel: state.units,
3795
yLabelWidth: self.data('dygraph-ylabelwidth') || 12,
3796
@@ -4204,6 +4208,7 @@
4208
state.dygraph_options.labelsDivStyles.width = '120px';
4209
state.dygraph_options.labelsSeparateLines = true;
4210
state.dygraph_options.rightGap = 0;
4211
+ state.dygraph_options.yRangePad = 1;
4212
}
4213
4214
if(smooth === true) {
web/demo.html
+9
-1
@@ -11,7 +11,15 @@
11
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
<meta name="author" content="costa@tsaousis.gr">
13
14
- <script type="text/javascript" src="dashboard.js?v37"></script>
14
+ <meta property="og:locale" content="en_US" />
15
+ <meta property="og:image" content="images/seo-performance-512.png"/>
16
+ <meta property="og:url" content="http://my-netdata.io/"/>
17
+ <meta property="og:type" content="website"/>
18
+ <meta property="og:site_name" content="netdata"/>
19
+ <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
20
+ <meta property="og:description" content="netdata is an embeddable real-time performance monitoring solution, for Linux systems, micro services, applications, APIs, SNMP devices. Stunning dashboards, blazzingly fast and extremely interactive." />
21
+
22
+ <script type="text/javascript" src="dashboard.js?v38"></script>
23
</head>
24
<body>
25
web/demo2.html
+9
-1
@@ -11,8 +11,16 @@
11
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
<meta name="author" content="costa@tsaousis.gr">
13
14
+ <meta property="og:locale" content="en_US" />
15
+ <meta property="og:image" content="images/seo-performance-512.png"/>
16
+ <meta property="og:url" content="http://my-netdata.io/"/>
17
+ <meta property="og:type" content="website"/>
18
+ <meta property="og:site_name" content="netdata"/>
19
+ <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
20
+ <meta property="og:description" content="netdata is an embeddable real-time performance monitoring solution, for Linux systems, micro services, applications, APIs, SNMP devices. Stunning dashboards, blazzingly fast and extremely interactive." />
21
+
22
<script>var netdataTheme = 'slate';</script>
15
- <script type="text/javascript" src="dashboard.js?v37"></script>
23
+ <script type="text/javascript" src="dashboard.js?v38"></script>
24
</head>
25
<body>
26
web/demosites.html
+143
-58
@@ -10,6 +10,14 @@
10
<meta name="apple-mobile-web-app-capable" content="yes">
11
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
13
+ <meta property="og:locale" content="en_US" />
14
+ <meta property="og:image" content="images/seo-performance-512.png"/>
15
+ <meta property="og:url" content="http://my-netdata.io/"/>
16
+ <meta property="og:type" content="website"/>
17
+ <meta property="og:site_name" content="netdata"/>
18
+ <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
19
+ <meta property="og:description" content="netdata is an embeddable real-time performance monitoring solution, for Linux systems, micro services, applications, APIs, SNMP devices. Stunning dashboards, blazzingly fast and extremely interactive." />
20
+
21
<script>
22
// --- OPTIONS FOR THE DASHBOARD --
23
@@ -42,7 +50,7 @@
50
and that you have chown it to be owned by netdata:netdata
51
-->
52
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
45
- <script type="text/javascript" src="dashboard.js?v37"></script>
53
+ <script type="text/javascript" src="dashboard.js?v38"></script>
54
55
<script>
56
// --- OPTIONS FOR THE CHARTS --
@@ -618,81 +626,158 @@ body {
626
</div>
627
628
<div class="mytitle">
621
- CPU Usage of the netdata user
629
+ Netdata performance
630
</div>
631
<div class="mycontent">
632
netdata monitors <b>users</b>, <b>user groups</b>, <b>applications (process trees)</b>
633
<br/>
626
- and <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.)
634
+ <b>containers</b> (<code>lxc</code>, <code>docker</code>, etc.) and SNMP devices.
635
</div>
636
629
- <div style="padding-top: 4vw; width: 100%; text-align: center; font-size: 1.5vw;">
637
+ <!-- Nav tabs -->
638
+ <ul class="nav nav-tabs" role="tablist" style="padding-top: 1vw;">
639
+ <li role="presentation" class="active"><a href="#netdata_cpu" aria-controls="netdata_cpu" role="tab" data-toggle="tab">CPU</a></li>
640
+ <li role="presentation"><a href="#netdata_avgtime" aria-controls="netdata_avgtime" role="tab" data-toggle="tab">Average Response Time</a></li>
641
+ </ul>
642
631
- <div class="mysparkline">
632
- <div class="mysparkline-overchart-label">
633
- <b>EU - London</b>, CPU % of a single core
643
+ <!-- Tab panes -->
644
+ <div class="tab-content">
645
+ <div role="tabpanel" class="tab-pane active" id="netdata_cpu">
646
+ <div class="mysparkline">
647
+ <div class="mysparkline-overchart-label">
648
+ <b>EU - London</b>, CPU % of a single core
649
+ </div>
650
+ <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
651
+ </div>
652
+ <div data-netdata="users.cpu"
653
+ data-dimensions="netdata"
654
+ data-host="//london.my-netdata.io"
655
+ data-chart-library="dygraph"
656
+ data-dygraph-theme="sparkline"
657
+ data-dygraph-type="area"
658
+ data-width="100%"
659
+ data-height="100%"
660
+ data-after="-300"
661
+ data-colors="#558855"
662
+ data-show-value-of-netdata-at="users.cpu.netdata1"
663
+ ></div>
664
</div>
635
- <div class="mysparkline-overchart-value" id="users.cpu.netdata1" >
665
+
666
+ <div class="mysparkline">
667
+ <div class="mysparkline-overchart-label">
668
+ <b>US - Atlanta</b>, CPU % of a single core
669
+ </div>
670
+ <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
671
+ </div>
672
+ <div data-netdata="users.cpu"
673
+ data-dimensions="netdata"
674
+ data-host="//atlanta.my-netdata.io"
675
+ data-chart-library="dygraph"
676
+ data-dygraph-theme="sparkline"
677
+ data-dygraph-type="area"
678
+ data-width="100%"
679
+ data-height="100%"
680
+ data-after="-300"
681
+ data-colors="#885555"
682
+ data-show-value-of-netdata-at="users.cpu.netdata2"
683
+ ></div>
684
</div>
637
- <div data-netdata="users.cpu"
638
- data-dimensions="netdata"
639
- data-host="//london.my-netdata.io"
640
- data-chart-library="dygraph"
641
- data-dygraph-theme="sparkline"
642
- data-dygraph-type="area"
643
- data-width="100%"
644
- data-height="100%"
645
- data-after="-300"
646
- data-colors="#558855"
647
- data-show-value-of-netdata-at="users.cpu.netdata1"
648
- ></div>
649
- </div>
685
651
- <div class="mysparkline">
652
- <div class="mysparkline-overchart-label">
653
- <b>US - Atlanta</b>, CPU % of a single core
686
+ <div class="mysparkline">
687
+ <div class="mysparkline-overchart-label">
688
+ <b>EU - Greece</b>, CPU % of a single core
689
+ </div>
690
+ <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
691
+ </div>
692
+ <div data-netdata="users.cpu"
693
+ data-dimensions="netdata"
694
+ data-host="//athens.my-netdata.io"
695
+ data-chart-library="dygraph"
696
+ data-dygraph-theme="sparkline"
697
+ data-dygraph-type="area"
698
+ data-width="100%"
699
+ data-height="100%"
700
+ data-after="-300"
701
+ data-colors="#555588"
702
+ data-show-value-of-netdata-at="users.cpu.netdata3"
703
+ ></div>
704
</div>
655
- <div class="mysparkline-overchart-value" id="users.cpu.netdata2" >
705
+
706
+ <div style="width: 100%; text-align: right; font-size: 1vw;">
707
+ <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>!
708
+ <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.
709
+ <br/>and including the chart refreshes for the dashboards of all viewers.</i>
710
</div>
657
- <div data-netdata="users.cpu"
658
- data-dimensions="netdata"
659
- data-host="//atlanta.my-netdata.io"
660
- data-chart-library="dygraph"
661
- data-dygraph-theme="sparkline"
662
- data-dygraph-type="area"
663
- data-width="100%"
664
- data-height="100%"
665
- data-after="-300"
666
- data-colors="#885555"
667
- data-show-value-of-netdata-at="users.cpu.netdata2"
668
- ></div>
711
</div>
712
671
- <div class="mysparkline">
672
- <div class="mysparkline-overchart-label">
673
- <b>EU - Greece</b>, CPU % of a single core
713
+ <div role="tabpanel" class="tab-pane" id="netdata_avgtime">
714
+ <div class="mysparkline">
715
+ <div class="mysparkline-overchart-label">
716
+ <b>EU - London</b>, API average response time in milliseconds
717
+ </div>
718
+ <div class="mysparkline-overchart-value" id="netdata.response_time1" >
719
+ </div>
720
+ <div data-netdata="netdata.response_time"
721
+ data-host="//london.my-netdata.io"
722
+ data-chart-library="dygraph"
723
+ data-dygraph-theme="sparkline"
724
+ data-dygraph-type="area"
725
+ data-width="100%"
726
+ data-height="100%"
727
+ data-after="-300"
728
+ data-colors="#558855"
729
+ data-show-value-of-response_time-at="netdata.response_time1"
730
+ ></div>
731
+ </div>
732
+
733
+ <div class="mysparkline">
734
+ <div class="mysparkline-overchart-label">
735
+ <b>US - Atlanta</b>, API average response time in milliseconds
736
+ </div>
737
+ <div class="mysparkline-overchart-value" id="netdata.response_time2" >
738
+ </div>
739
+ <div data-netdata="netdata.response_time"
740
+ data-host="//atlanta.my-netdata.io"
741
+ data-chart-library="dygraph"
742
+ data-dygraph-theme="sparkline"
743
+ data-dygraph-type="area"
744
+ data-width="100%"
745
+ data-height="100%"
746
+ data-after="-300"
747
+ data-colors="#885555"
748
+ data-show-value-of-response_time-at="netdata.response_time2"
749
+ ></div>
750
</div>
675
- <div class="mysparkline-overchart-value" id="users.cpu.netdata3" >
751
+
752
+ <div class="mysparkline">
753
+ <div class="mysparkline-overchart-label">
754
+ <b>EU - Greece</b>, API average response time in milliseconds
755
+ </div>
756
+ <div class="mysparkline-overchart-value" id="netdata.response_time3" >
757
+ </div>
758
+ <div data-netdata="netdata.response_time"
759
+ data-host="//athens.my-netdata.io"
760
+ data-chart-library="dygraph"
761
+ data-dygraph-theme="sparkline"
762
+ data-dygraph-type="area"
763
+ data-width="100%"
764
+ data-height="100%"
765
+ data-after="-300"
766
+ data-colors="#555588"
767
+ data-show-value-of-response_time-at="netdata.response_time3"
768
+ ></div>
769
+ </div>
770
+
771
+ <div style="width: 100%; text-align: right; font-size: 1vw;">
772
+ <i class="fa fa-comment" aria-hidden="true"></i> <i>netdata is really <b>fast</b> (the values are milliseconds!)
773
+ <br/>
774
+ These values include everything, from the reception of the first byte to the dispatch of the last, including gzip compression.
775
+ <br/>
776
+ Values above 2-3ms are usually chart refreshes of charts with several dimensions, charts with very long durations (zoomed out), or file transfers.
777
+ </i>
778
</div>
677
- <div data-netdata="users.cpu"
678
- data-dimensions="netdata"
679
- data-host="//athens.my-netdata.io"
680
- data-chart-library="dygraph"
681
- data-dygraph-theme="sparkline"
682
- data-dygraph-type="area"
683
- data-width="100%"
684
- data-height="100%"
685
- data-after="-300"
686
- data-colors="#555588"
687
- data-show-value-of-netdata-at="users.cpu.netdata3"
688
- ></div>
779
</div>
780
</div>
691
- <div style="width: 100%; text-align: right; font-size: 1vw;">
692
- <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>!
693
- <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.
694
- <br/>and including the chart refreshes for the dashboards of all viewers.</i>
695
- </div>
781
782
<div style="padding-top: 6vw; width: 100%; text-align: center; font-size: 2vw;">
783
want to know more?
web/index.html
+8
@@ -26,6 +26,14 @@
26
<link rel="icon" type="image/png" sizes="24x24" href="images/seo-performance-24.png">
27
<link rel="icon" type="image/png" sizes="16x16" href="images/seo-performance-16.png">
28
29
+ <meta property="og:locale" content="en_US" />
30
+ <meta property="og:image" content="images/seo-performance-512.png"/>
31
+ <meta property="og:url" content="http://my-netdata.io/"/>
32
+ <meta property="og:type" content="website"/>
33
+ <meta property="og:site_name" content="netdata"/>
34
+ <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
35
+ <meta property="og:description" content="netdata is an embeddable real-time performance monitoring solution, for Linux systems, micro services, applications, APIs, SNMP devices. Stunning dashboards, blazzingly fast and extremely interactive." />
36
+
37
<style>
38
39
/* prevent body from hiding under the navbar */
web/tv.html
+9
-1
@@ -10,6 +10,14 @@
10
<meta name="apple-mobile-web-app-capable" content="yes">
11
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
12
13
+ <meta property="og:locale" content="en_US" />
14
+ <meta property="og:image" content="images/seo-performance-512.png"/>
15
+ <meta property="og:url" content="http://my-netdata.io/"/>
16
+ <meta property="og:type" content="website"/>
17
+ <meta property="og:site_name" content="netdata"/>
18
+ <meta property="og:title" content="netdata - real-time performance monitoring, done right!"/>
19
+ <meta property="og:description" content="netdata is an embeddable real-time performance monitoring solution, for Linux systems, micro services, applications, APIs, SNMP devices. Stunning dashboards, blazzingly fast and extremely interactive." />
20
+
21
<script>
22
// this section has to appear before loading dashboard.js
23
@@ -40,7 +48,7 @@
48
and that you have chown it to be owned by netdata:netdata
49
-->
50
<!-- <script type="text/javascript" src="http://my.server:19999/dashboard.js"></script> -->
43
- <script type="text/javascript" src="dashboard.js?v37"></script>
51
+ <script type="text/javascript" src="dashboard.js?v38"></script>
52
53
<script>
54
// Set options for TV operation