Remove the old obsolete web interface.
General cleanup as discussed in PR #3606. While this works, it's not really useful anymore, and it's essentially been deprecated for quite some time.
Austin S. Hemmelgarn committed
May 29, 2018 at 15:56 UTC
4b20cd6260c2acde5faea5d6c58a8c1167b74535
5 files changed
-2026
web/old/datasource.html
deleted
-56
@@ -1,56 +0,0 @@
1
-<html>
2
- <style>
3
- * {font-family:Arial}
4
- div {float: left; margin: 0 0 0 0; }
5
- </style>
6
- <head>
7
- <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
8
- <title>NetData Datasource Example</title>
9
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
10
- <script type="text/javascript">
11
-
12
- google.load('visualization', '1', {packages: ['charteditor']});
13
- // google.load('visualization', '1.0'); // Note: No need to specify chart libraries.
14
-
15
- google.setOnLoadCallback(drawVisualization);
16
-
17
- var wrapper;
18
- function drawVisualization() {
19
- wrapper = new google.visualization.ChartWrapper({
20
- containerId: 'graph_div',
21
- chartType: 'AreaChart',
22
- dataSourceUrl: 'http:/datasource/system.cpu/60/1/max', // it needs a protocol to work, even in relative URLs
23
- refreshInterval: 1,
24
- options: {
25
- isStacked: true,
26
- areaOpacity: 0.85,
27
- lineWidth: 1,
28
- title: 'CPU utilization',
29
- width: window.innerWidth - 50,
30
- height: window.innerHeight - 50,
31
- hAxis: {title: "Time of Day", viewWindowMode: 'maximized', format:'HH:mm:ss'},
32
- vAxis: {title: "percent", viewWindowMode: 'pretty', minValue: 0, maxValue: 100},
33
- focusTarget: 'category',
34
- annotation: {'1': {style: 'line'}},
35
- },
36
- });
37
- wrapper.draw();
38
- }
39
-
40
- function openEditor() {
41
- var editor = new google.visualization.ChartEditor();
42
- google.visualization.events.addListener(editor, 'ok', function() {
43
- wrapper = editor.getChartWrapper();
44
- wrapper.draw(document.getElementById('graph_div'));
45
- });
46
- editor.openDialog(wrapper);
47
- }
48
-
49
- </script>
50
- </head>
51
- <body>
52
- <input type='button' onclick='openEditor()' value='Open Editor'>
53
- <br/>
54
- <div><div id="graph_div"/></div>
55
- </body>
56
-</html>
web/old/index.html
deleted
-207
@@ -1,207 +0,0 @@
1
-<!DOCTYPE html>
2
-<html lang="en">
3
-<head>
4
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
- <meta charset="utf-8">
6
- <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7
- <meta name="viewport" content="width=device-width, initial-scale=1">
8
- <meta name="apple-mobile-web-app-capable" content="yes">
9
- <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
10
- <meta name="description" content="">
11
- <meta name="author" content="costa@tsaousis.gr">
12
-
13
- <title>NetData</title>
14
-
15
- <!-- Bootstrap CSS -->
16
- <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
17
- <link href="theme.css" rel="stylesheet">
18
-</head>
19
-
20
-<body role="document" data-spy="scroll" data-target="#main_menu_div">
21
- <nav id="mynav" class="navbar navbar-default navbar-fixed-top" role="navigation">
22
- <div class="container" style="width: 98%;">
23
- <div class="navbar-header">
24
- <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#main_menu_div">
25
- <span class="sr-only">Toggle navigation</span>
26
- <span class="icon-bar"></span>
27
- <span class="icon-bar"></span>
28
- <span class="icon-bar"></span>
29
- </button>
30
- <a class="navbar-brand" href="/" id="hostname_id">NetData</a>
31
- </div>
32
- <div class="navbar-header navbar-right">
33
- <ul class="nav navbar-nav">
34
- <li><a href="/">Looking for the new Dashboard?</a></li>
35
- </ul>
36
- </div>
37
- <form class="navbar-form navbar-right">
38
- <!-- <div class="form-group">
39
- <input type="text" class="form-control" placeholder="Search">
40
- </div> -->
41
- <button type="button" class="btn btn-primary global_play_button" onClick="buttonGlobalPlayPause('toggle');" data-play-text="<span class='glyphicon glyphicon-pause'></span> Pause" data-pause-text="<span class='glyphicon glyphicon-play'></span> Play" data-toggle="tooltip" data-placement="bottom" title=" click <span class='glyphicon glyphicon-play'></span> to have the graphs auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graphs.">
42
- <span class="glyphicon glyphicon-pause"></span> Pause
43
- </button>
44
- <div class="btn-group btn-group" data-toggle="buttons" role="group">
45
- <label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Show less detail to speed up the browser. Use this if your machine is old and slow.">
46
- <input type="radio" name="presentation" id="presentation_speedy" onChange="setPresentationSpeedy(0);">Speedy
47
- </label>
48
- <label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Balance graphs detail with browser speed. Use this on modern computers.">
49
- <input type="radio" name="presentation" id="presentation_normal" onChange="setPresentationNormal(0);">Normal
50
- </label>
51
- <label class="btn btn-default" data-toggle="tooltip" data-placement="bottom" title="Show all the detail there is. This may slow down your browser.">
52
- <input type="radio" name="presentation" id="presentation_detailed" onChange="setPresentationDetailed(0);">Detailed
53
- </label>
54
- </div>
55
- </form>
56
- <div class="collapse navbar-collapse" id="main_menu_div">
57
- <ul class="nav navbar-nav">
58
- <li><a href="#">preparing charts...</a></li>
59
- </ul>
60
- </div><!--/.nav-collapse -->
61
- </div>
62
- </nav>
63
-
64
- <div class="container graphs" id="maingraph_container" style="display: none;">
65
- <table>
66
- <tr><td>
67
- <div class="maingraph">
68
- <table>
69
- <tr><td>
70
- <div class="maingraph" id="maingraph"></div>
71
- <div id="maingraph_dashboard">
72
- <div class="maingraph" id="maingraph_hidden" style="display: none"></div>
73
- <div class="maingraph" id="maingraph_control"></div>
74
- </div>
75
- </td></tr>
76
- <tr><td align="center">
77
- <div class="btn-group">
78
- <form id="mainchartform">
79
- <div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title=" click <span class='glyphicon glyphicon-play'></span> to have the graph auto-refresh, or click <span class='glyphicon glyphicon-pause'></span> to pause the graph. When paused the graph can be zoomed and panned horizontally." >
80
- <button type="button" class="btn btn-primary mainchart_play_button" data-play-text="<span class='glyphicon glyphicon-pause'></span>" data-pause-text="<span class='glyphicon glyphicon-play'></span>" onClick="setMainChartPlay('toggle');">
81
- <span class="glyphicon glyphicon-pause"></span>
82
- </button>
83
- </div>
84
- <div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title="use the maximum ( <span class='glyphicon glyphicon-signal'></span> ) or the average ( <span class='glyphicon glyphicon-align-justify'></span> ) value of grouped points" >
85
- <button type="button" class="btn btn-primary mainchart_avg_button" data-max-text="<span class='glyphicon glyphicon-signal'></span>" data-average-text="<span class='glyphicon glyphicon-align-justify'></span>" onClick="setMainChartGroupMethod('toggle');">
86
- <span class="glyphicon glyphicon-signal"></span>
87
- </button>
88
- </div>
89
- <div class="btn-group btn-group" data-toggle="buttons" >
90
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="do not group points, show the raw data">
91
- <input type="radio" name="group" id="group1" onChange="setMainChartGroup(1);">1
92
- </label>
93
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group in half, show 1 every 2 points of data">
94
- <input type="radio" name="group" id="group2" onChange="setMainChartGroup(2);">2
95
- </label>
96
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 3 points of data">
97
- <input type="radio" name="group" id="group3" onChange="setMainChartGroup(3);">3
98
- </label>
99
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 4 points of data">
100
- <input type="radio" name="group" id="group4" onChange="setMainChartGroup(4);">4
101
- </label>
102
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 5 points of data">
103
- <input type="radio" name="group" id="group5" onChange="setMainChartGroup(5);">5
104
- </label>
105
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 10 points of data">
106
- <input type="radio" name="group" id="group10" onChange="setMainChartGroup(10);">10
107
- </label>
108
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 15 points of data">
109
- <input type="radio" name="group" id="group15" onChange="setMainChartGroup(15);">15
110
- </label>
111
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 20 points of data">
112
- <input type="radio" name="group" id="group20" onChange="setMainChartGroup(20);">20
113
- </label>
114
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 30 points of data">
115
- <input type="radio" name="group" id="group30" onChange="setMainChartGroup(30);">30
116
- </label>
117
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 45 points of data">
118
- <input type="radio" name="group" id="group45" onChange="setMainChartGroup(45);">45
119
- </label>
120
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 60 points of data">
121
- <input type="radio" name="group" id="group60" onChange="setMainChartGroup(60);">60
122
- </label>
123
- <label class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="group every 90 points of data">
124
- <input type="radio" name="group" id="group90" onChange="setMainChartGroup(90);">90
125
- </label>
126
- </div>
127
- <div class="btn-group btn-group" data-toggle="tooltip" data-placement="top" title="maximized ( <span class='glyphicon glyphicon-fullscreen'></span> ) or normal ( <span class='glyphicon glyphicon-resize-small'></span> ) view of the graph" >
128
- <button type="button" class="btn btn-primary mainchart_max_button" data-maximized-text="<span class='glyphicon glyphicon-resize-small'></span>" data-normal-text="<span class='glyphicon glyphicon-fullscreen'></span>" onClick="setMainChartMax('toggle');">
129
- <span class="glyphicon glyphicon-fullscreen"></span>
130
- </button>
131
- </div>
132
- </form>
133
- </div>
134
- </td></tr>
135
- </table>
136
- </div><!-- /.maingraph -->
137
- </td></tr>
138
- </table>
139
- </div>
140
-
141
- <div class="container graphs" id="thumbgraphs_container" style="display: none;">
142
- <div id="thumbgraphs">
143
- </div>
144
- </div>
145
-
146
- <div class="container graphs" id="groupgraphs_container" style="display: none;">
147
- <div class="allgraphs" id="groupgraphs">
148
- </div>
149
- </div>
150
-
151
- <div class="container" id="splash_container">
152
- <table width="100%">
153
- <tr><td id="splash" align="center" style="vertical-align: middle; height: 400px; overflow: auto;">
154
- <h2>
155
- Welcome to <b>NetData</b>!
156
- <br/><br/>
157
- <span class="glyphicon glyphicon-off"></span>
158
- <br/><br/>
159
- loading cosmos
160
- <br/><br/>
161
- <span class="label label-default">Please wait...</span>
162
- </h2>
163
- </td></tr>
164
- </table>
165
- </div>
166
-
167
- <div class="container graphs" id="footer_container">
168
- <p/>
169
- <hr/>
170
- <h4>NetData</h4>
171
- Realtime System Information over the web for all linux systems.
172
- <p/>
173
- Distributed under GPL v2.
174
- <p/>
175
- (c) 2015 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
176
- <p/>
177
- <div id="server_summary_id"></div>
178
- </div>
179
-
180
- <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
181
- <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
182
- <script type='text/javascript'>
183
- document.getElementById('splash').height = $(window).height();
184
- </script>
185
-
186
- <!-- Google AJAX API -->
187
- <script type="text/javascript" src="https://www.google.com/jsapi"></script>
188
-
189
- <!-- NetData -->
190
- <script type="text/javascript" src="netdata.js"></script>
191
- <script type="text/javascript" src="index.js"></script>
192
-
193
- <script type='text/javascript'>
194
- google.load('visualization', '1.1', {packages: ['controls']});
195
-
196
- $(document).ready(function(){
197
-
198
- $(document).on('click','.navbar-collapse.in',function(e) {
199
- if( $(e.target).is('a') ) {
200
- $(this).collapse('hide');
201
- }
202
- });
203
-
204
- $('body').scrollspy({ target: '#main_menu_div' })
205
- });
206
- </script>
207
-</html>
web/old/index.js
deleted
-1174
@@ -1,1174 +0,0 @@
1
-var page_is_visible = 1;
2
-
3
-var TARGET_THUMB_GRAPH_WIDTH = 500; // thumb charts width will range from 0.5 to 1.5 of that
4
-var MINIMUM_THUMB_GRAPH_WIDTH = 400; // thumb chart will generally try to be wider than that
5
-var TARGET_THUMB_GRAPH_HEIGHT = 160; // the height of the thumb charts
6
-var TARGET_GROUP_GRAPH_HEIGHT = 160;
7
-
8
-var THUMBS_MAX_TIME_TO_SHOW = 240; // how much time the thumb charts will present?
9
-var THUMBS_POINTS_DIVISOR = 3;
10
-var THUMBS_STACKED_POINTS_DIVISOR = 4;
11
-
12
-var GROUPS_MAX_TIME_TO_SHOW = 600; // how much time the group charts will present?
13
-var GROUPS_POINTS_DIVISOR = 2;
14
-var GROUPS_STACKED_POINTS_DIVISOR = 3;
15
-
16
-var MAINCHART_MIN_TIME_TO_SHOW = 1200; // how much time the main chart will present by default?
17
-var MAINCHART_POINTS_DIVISOR = 2; // how much detailed will the main chart be by default? 1 = finest, higher is faster
18
-var MAINCHART_STACKED_POINTS_DIVISOR = 3; // how much detailed will the main chart be by default? 1 = finest, higher is faster
19
-
20
-var MAINCHART_CONTROL_HEIGHT = 75; // how tall the control chart will be
21
-var MAINCHART_CONTROL_DIVISOR = 5; // how much detailed will the control chart be? 1 = finest, higher is faster
22
-var MAINCHART_INITIAL_SELECTOR= 20; // 1/20th of the width, this overrides MAINCHART_MIN_TIME_TO_SHOW
23
-
24
-var CHARTS_REFRESH_LOOP = 50; // delay between chart refreshes
25
-var CHARTS_REFRESH_IDLE = 500; // delay between chart refreshes when no chart was ready for refresh the last time
26
-var CHARTS_CHECK_NO_FOCUS = 500; // delay to check for visibility when the page has no focus
27
-var CHARTS_SCROLL_IDLE = 100; // delay to wait after a page scroll
28
-
29
-var ENABLE_CURVE = 1;
30
-
31
-var resize_request = false;
32
-
33
-function setPresentationNormal(ui) {
34
- THUMBS_POINTS_DIVISOR = 3;
35
- THUMBS_STACKED_POINTS_DIVISOR = Math.round(THUMBS_POINTS_DIVISOR * 1.5);
36
- GROUPS_POINTS_DIVISOR = 2;
37
- GROUPS_STACKED_POINTS_DIVISOR = Math.round(GROUPS_POINTS_DIVISOR * 1.5);
38
- MAINCHART_POINTS_DIVISOR = 2;
39
- MAINCHART_STACKED_POINTS_DIVISOR = Math.round(MAINCHART_POINTS_DIVISOR * 1.5);
40
- ENABLE_CURVE = 1;
41
- CHARTS_REFRESH_LOOP = 50;
42
- CHARTS_SCROLL_IDLE = 50;
43
- resize_request = true;
44
- if(ui) $('#presentation_normal').trigger('click');
45
- playGraphs();
46
-}
47
-function setPresentationSpeedy(ui) {
48
- THUMBS_POINTS_DIVISOR = 10;
49
- THUMBS_STACKED_POINTS_DIVISOR = Math.round(THUMBS_POINTS_DIVISOR * 1.5);
50
- GROUPS_POINTS_DIVISOR = 8;
51
- GROUPS_STACKED_POINTS_DIVISOR = Math.round(GROUPS_POINTS_DIVISOR * 1.5);
52
- MAINCHART_POINTS_DIVISOR = 5;
53
- MAINCHART_STACKED_POINTS_DIVISOR = Math.round(MAINCHART_POINTS_DIVISOR * 1.5);
54
- ENABLE_CURVE = 0;
55
- CHARTS_REFRESH_LOOP = 50;
56
- CHARTS_SCROLL_IDLE = 100;
57
- resize_request = true;
58
- if(ui) $('#presentation_speedy').trigger('click');
59
- playGraphs();
60
-}
61
-function setPresentationDetailed(ui) {
62
- THUMBS_POINTS_DIVISOR = 1;
63
- THUMBS_STACKED_POINTS_DIVISOR = 1;
64
- GROUPS_POINTS_DIVISOR = 1;
65
- GROUPS_STACKED_POINTS_DIVISOR = 1;
66
- MAINCHART_POINTS_DIVISOR = 1;
67
- MAINCHART_STACKED_POINTS_DIVISOR = 1;
68
- ENABLE_CURVE = 1;
69
- CHARTS_REFRESH_LOOP = 50;
70
- CHARTS_SCROLL_IDLE = 50;
71
- resize_request = true;
72
- if(ui) $('#presentation_detailed').trigger('click');
73
- playGraphs();
74
-}
75
-
76
-function isIE() {
77
- userAgent = navigator.userAgent;
78
- return userAgent.indexOf("MSIE ") > -1 || userAgent.indexOf("Trident/") > -1;
79
-}
80
-
81
-if(isIE()){
82
- // do stuff with ie-users
83
- CHARTS_REFRESH_LOOP=250;
84
- CHARTS_SCROLL_IDLE=500;
85
-}
86
-
87
-var MODE_THUMBS = 1;
88
-var MODE_MAIN = 2;
89
-var MODE_GROUP_THUMBS = 3;
90
-var mode; // one of the MODE_* values
91
-
92
-var allCharts = new Array();
93
-var mainchart;
94
-
95
-// html for the main menu
96
-var mainmenu = "";
97
-var categoriesmainmenu = "";
98
-var familiesmainmenu = "";
99
-var chartsmainmenu = "";
100
-
101
-
102
-// ------------------------------------------------------------------------
103
-// common HTML generation
104
-
105
-function thumbChartActions(i, c, nogroup) {
106
- var name = c.name;
107
- if(!nogroup) name = c.family;
108
-
109
- var refinfo = "the chart is drawing ";
110
- if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each).";
111
- else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
112
-
113
- var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"" + refinfo + "\">"
114
- + "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
115
- + "</div>"
116
- + "<div class=\"btn-group btn-group\"><button type=\"button\" class=\"btn btn-default disabled\"><small> " + name + "</small></button>";
117
-
118
- if(!nogroup) {
119
- var ingroup = 0;
120
- var ingroup_detail = 0;
121
-
122
- $.each(allCharts, function(i, d) {
123
- if(d.family == c.family) {
124
- ingroup++;
125
- if(d.isdetail) ingroup_detail++;
126
- }
127
- });
128
-
129
- var hidden = "";
130
- if(ingroup_detail) hidden = ", including " + ingroup_detail + " charts not shown now";
131
-
132
- html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"Show all " + ingroup + " charts in group '" + c.family + "'" + hidden + "\" class=\"btn btn-default\" onclick=\"initGroupGraphs('" + c.family +"');\"><span class=\"glyphicon glyphicon-th-large\"></span></button>";
133
- }
134
-
135
- html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>"
136
- + "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"set options for chart '" + c.name + "'\" class=\"btn btn-default disabled\" onclick=\"alert('Not implemented yet!');\"><span class=\"glyphicon glyphicon-cog\"></span></button>"
137
- + "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"top\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
138
- + "</div>";
139
-
140
- return html;
141
-}
142
-
143
-function groupChartActions(i, c) {
144
- var name = c.name;
145
-
146
- var refinfo = "the chart is drawing ";
147
- if(c.group == 1) refinfo += "every single point collected (" + c.update_every + "s each).";
148
- else refinfo += ((c.group_method == "average")?"the average":"the max") + " value for every " + (c.group * c.update_every) + " seconds of data";
149
-
150
- var html = "<div class=\"btn-group btn-group\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"" + refinfo + "\">"
151
- + "<button type=\"button\" class=\"btn btn-default\" onclick=\"javascript: return;\"><span class=\"glyphicon glyphicon-info-sign\"></span></button>"
152
- + "</div>";
153
-
154
- html += "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"show chart '" + c.name + "' in fullscreen\" class=\"btn btn-default\" onclick=\"initMainChartIndex(" + i +");\"><span class=\"glyphicon glyphicon-resize-full\"></span></button>"
155
- + "<button type=\"button\" data-toggle=\"tooltip\" data-placement=\"left\" title=\"ignore chart '" + c.name + "'\" class=\"btn btn-default\" onclick=\"disableChart(" + i + ");\"><span class=\"glyphicon glyphicon-trash\"></span></button>"
156
- + "</div>";
157
-
158
- return html;
159
-}
160
-
161
-function mylog(txt) {
162
- console.log(txt);
163
- $('#logline').html(txt);
164
-}
165
-
166
-function chartssort(a, b) {
167
- if(a.priority == b.priority) {
168
- if(a.name < b.name) return -1;
169
- }
170
- else if(a.priority < b.priority) return -1;
171
-
172
- return 1;
173
-}
174
-
175
-
176
-// ------------------------------------------------------------------------
177
-// MAINGRAPH = fullscreen view of 1 graph
178
-
179
-// copy the chart c to mainchart
180
-// switch to main graphs screen
181
-function initMainChart(c) {
182
- if(mainchart) cleanThisChart(mainchart);
183
-
184
- mainchart = $.extend(true, {}, c);
185
- mainchart.enabled = true;
186
- mainchart.refreshCount = 0;
187
- mainchart.last_updated = 0;
188
- mainchart.chartOptions.explorer = null;
189
- mainchart.chart = null;
190
-
191
- mainchart.before = 0;
192
- mainchart.after = 0;
193
-
194
- mainchart.chartOptions.width = screenWidth();
195
- mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT;
196
- if(mainchart.chartOptions.height < 300) mainchart.chartOptions.height = 300;
197
-
198
- mainchart.div = 'maingraph';
199
- mainchart.max_time_to_show = (mainchart.last_entry_t - mainchart.first_entry_t) / ( MAINCHART_INITIAL_SELECTOR * mainchart.update_every );
200
- if(mainchart.max_time_to_show < MAINCHART_MIN_TIME_TO_SHOW) mainchart.max_time_to_show = MAINCHART_MIN_TIME_TO_SHOW;
201
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0, ENABLE_CURVE);
202
-
203
- // copy it to the hidden chart
204
- mainchart.hiddenchart = $.extend(true, {}, mainchart);
205
- mainchart.hiddenchart.chartOptions.height = MAINCHART_CONTROL_HEIGHT;
206
- mainchart.hiddenchart.div = 'maingraph_control';
207
- mainchart.hiddenchart.non_zero = 0;
208
-
209
- // initialize the div
210
- showChartIsLoading(mainchart.div, mainchart.name, mainchart.chartOptions.width, mainchart.chartOptions.height);
211
- document.getElementById(mainchart.hiddenchart.div).innerHTML = "<table><tr><td align=\"center\" width=\"" + mainchart.hiddenchart.chartOptions.width + "\" height=\"" + mainchart.hiddenchart.chartOptions.height + "\" style=\"vertical-align:middle\"><h4><span class=\"label label-default\">Please wait...</span></h4></td></tr></table>";
212
- //showChartIsLoading(mainchart.hiddenchart.div, mainchart.hiddenchart.name, mainchart.hiddenchart.chartOptions.width, mainchart.hiddenchart.chartOptions.height);
213
-
214
- // set the radio buttons
215
- setMainChartGroupMethod(mainchart.group_method, 'no-refresh');
216
- setMainChartMax('normal');
217
-
218
- $('#group' + mainchart.group).trigger('click');
219
- setMainChartGroup(mainchart.group, 'no-refresh');
220
-
221
- switchToMainGraph();
222
-}
223
-
224
-function refreshHiddenChart(doNext) {
225
- if(refresh_mode == REFRESH_PAUSED && mainchart.hiddenchart.last_updated != 0) {
226
- if(typeof doNext == "function") doNext();
227
- return;
228
- }
229
-
230
- // is it too soon for a refresh?
231
- var now = Date.now();
232
- if((now - mainchart.hiddenchart.last_updated) < (mainchart.update_every * 10 * 1000) || (now - mainchart.hiddenchart.last_updated) < (mainchart.hiddenchart.group * mainchart.hiddenchart.update_every * 1000)) {
233
- if(typeof doNext == "function") doNext();
234
- return;
235
- }
236
-
237
- if(mainchart.dashboard && mainchart.hiddenchart.refreshCount > 50) {
238
- mainchart.dashboard.clear();
239
- mainchart.control_wrapper.clear();
240
- mainchart.hidden_wrapper.clear();
241
-
242
- mainchart.dashboard = null;
243
- mainchart.control_wrapper = null;
244
- mainchart.hidden_wrapper = null;
245
- mainchart.hiddenchart.last_updated = 0;
246
- }
247
-
248
- if(!mainchart.dashboard) {
249
- var controlopts = $.extend(true, {}, mainchart.chartOptions, {
250
- lineWidth: 1,
251
- height: mainchart.hiddenchart.chartOptions.height,
252
- chartArea: {'width': '98%'},
253
- hAxis: {'baselineColor': 'none', viewWindowMode: 'maximized', gridlines: { count: 0 } },
254
- vAxis: {'title': null, gridlines: { count: 0 } },
255
- });
256
-
257
- mainchart.dashboard = new google.visualization.Dashboard(document.getElementById('maingraph_dashboard'));
258
- mainchart.control_wrapper = new google.visualization.ControlWrapper({
259
- controlType: 'ChartRangeFilter',
260
- containerId: 'maingraph_control',
261
- options: {
262
- filterColumnIndex: 0,
263
- ui: {
264
- chartType: mainchart.chartType,
265
- chartOptions: controlopts,
266
- minRangeSize: (mainchart.max_time_to_show * 1000) / MAINCHART_POINTS_DIVISOR,
267
- }
268
- },
269
- });
270
- mainchart.hidden_wrapper = new google.visualization.ChartWrapper({
271
- chartType: mainchart.chartType,
272
- containerId: 'maingraph_hidden',
273
- options: {
274
- isStacked: mainchart.chartOptions.isStacked,
275
- width: mainchart.hiddenchart.chartOptions.width,
276
- height: mainchart.hiddenchart.chartOptions.height,
277
- //chartArea: {'height': '80%', 'width': '100%'},
278
- //hAxis: {'slantedText': false},
279
- //legend: {'position': 'none'}
280
- },
281
- });
282
-
283
- mainchart.hiddenchart.refreshCount = 0;
284
- }
285
-
286
- // load the data for the control and the hidden wrappers
287
- // calculate the group and points to show for the control chart
288
- calculateChartPointsToShow(mainchart.hiddenchart, MAINCHART_CONTROL_DIVISOR, 0, -1, ENABLE_CURVE);
289
-
290
- $.ajax({
291
- url: generateChartURL(mainchart.hiddenchart),
292
- dataType:"json",
293
- cache: false
294
- })
295
- .done(function(jsondata) {
296
- if(!jsondata || jsondata.length == 0) return;
297
-
298
- mainchart.control_data = new google.visualization.DataTable(jsondata);
299
-
300
- if(mainchart.hiddenchart.last_updated == 0) {
301
- google.visualization.events.addListener(mainchart.control_wrapper, 'ready', mainchartControlReadyEvent);
302
- mainchart.dashboard.bind(mainchart.control_wrapper, mainchart.hidden_wrapper);
303
- }
304
- if(refresh_mode != REFRESH_PAUSED) {
305
- // console.log('mainchart.points_to_show: ' + mainchart.points_to_show + ', mainchart.group: ' + mainchart.group + ', mainchart.update_every: ' + mainchart.update_every);
306
-
307
- var start = now - (mainchart.points_to_show * mainchart.group * mainchart.update_every * 1000);
308
- var end = now;
309
- var min = MAINCHART_MIN_TIME_TO_SHOW * 1000;
310
- if(end - start < min) start = end - min;
311
-
312
- mainchart.control_wrapper.setState({range: {
313
- start: new Date(start),
314
- end: new Date(end)
315
- },
316
- ui: {
317
- minRangeSize: min
318
- }});
319
- }
320
-
321
- mainchart.dashboard.draw(mainchart.control_data);
322
- mainchart.hiddenchart.last_updated = Date.now();
323
- mainchart.hiddenchart.refreshCount++;
324
- })
325
- .always(function() {
326
- if(typeof doNext == "function") doNext();
327
- });
328
-}
329
-
330
-function mainchartControlReadyEvent() {
331
- google.visualization.events.addListener(mainchart.control_wrapper, 'statechange', mainchartControlStateHandler);
332
- //mylog(mainchart);
333
-}
334
-
335
-function mainchartControlStateHandler() {
336
- // setMainChartPlay('pause');
337
-
338
- var state = mainchart.control_wrapper.getState();
339
- mainchart.after = Math.round(state.range.start.getTime() / 1000);
340
- mainchart.before = Math.round(state.range.end.getTime() / 1000);
341
-
342
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.before - mainchart.after, 0, ENABLE_CURVE);
343
- //mylog('group = ' + mainchart.group + ', points_to_show = ' + mainchart.points_to_show + ', dt = ' + (mainchart.before - mainchart.after));
344
-
345
- $('#group' + mainchart.group).trigger('click');
346
- mainchart.last_updated = 0;
347
-
348
- if(refresh_mode != REFRESH_PAUSED) pauseGraphs();
349
-}
350
-
351
-function initMainChartIndex(i) {
352
- if(mode == MODE_GROUP_THUMBS)
353
- initMainChart(groupCharts[i]);
354
-
355
- else if(mode == MODE_THUMBS)
356
- initMainChart(allCharts[i]);
357
-
358
- else
359
- initMainChart(allCharts[i]);
360
-}
361
-
362
-function initMainChartIndexOfMyCharts(i) {
363
- initMainChart(allCharts[i]);
364
-}
365
-
366
-var last_main_chart_max='normal';
367
-function setMainChartMax(m) {
368
- if(!mainchart) return;
369
-
370
- if(m == 'toggle') {
371
- if(last_main_chart_max == 'maximized') m = 'normal';
372
- else m = 'maximized';
373
- }
374
-
375
- if(m == "maximized") {
376
- mainchart.chartOptions.theme = 'maximized';
377
- //mainchart.chartOptions.axisTitlesPosition = 'in';
378
- //mainchart.chartOptions.legend = {position: 'none'};
379
- mainchart.chartOptions.hAxis.title = null;
380
- mainchart.chartOptions.hAxis.viewWindowMode = 'maximized';
381
- mainchart.chartOptions.vAxis.viewWindowMode = 'maximized';
382
- mainchart.chartOptions.chartArea = {'width': '98%', 'height': '100%'};
383
- }
384
- else {
385
- mainchart.chartOptions.hAxis.title = null;
386
- mainchart.chartOptions.theme = null;
387
- mainchart.chartOptions.hAxis.viewWindowMode = null;
388
- mainchart.chartOptions.vAxis.viewWindowMode = null;
389
- mainchart.chartOptions.chartArea = {'width': '80%', 'height': '90%'};
390
- }
391
- $('.mainchart_max_button').button(m);
392
- last_main_chart_max = m;
393
- mainchart.last_updated = 0;
394
-}
395
-
396
-function setMainChartGroup(g, norefresh) {
397
- if(!mainchart) return;
398
-
399
- mainchart.group = g;
400
-
401
- if(!mainchart.before && !mainchart.after)
402
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, mainchart.group, ENABLE_CURVE);
403
- else
404
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, 0, mainchart.group, ENABLE_CURVE);
405
-
406
- if(!norefresh) {
407
- mainchart.last_updated = 0;
408
- }
409
-}
410
-
411
-var last_main_chart_avg = null;
412
-function setMainChartGroupMethod(g, norefresh) {
413
- if(!mainchart) return;
414
-
415
- if(g == 'toggle') {
416
- if(last_main_chart_avg == 'max') g = 'average';
417
- else g = 'max';
418
- }
419
-
420
- mainchart.group_method = g;
421
-
422
- $('.mainchart_avg_button').button(g);
423
-
424
- if(!norefresh) {
425
- mainchart.last_updated = 0;
426
- }
427
-
428
- last_main_chart_avg = g;
429
-}
430
-
431
-function setMainChartPlay(p) {
432
- if(!mainchart) return;
433
-
434
- if(p == 'toggle') {
435
- if(refresh_mode != REFRESH_ALWAYS) p = 'play';
436
- else p = 'pause';
437
- }
438
-
439
- if(p == 'play') {
440
- //mainchart.chartOptions.explorer = null;
441
- mainchart.after = 0;
442
- mainchart.before = 0;
443
- calculateChartPointsToShow(mainchart, mainchart.chartOptions.isStacked?MAINCHART_STACKED_POINTS_DIVISOR:MAINCHART_POINTS_DIVISOR, mainchart.max_time_to_show, 0, ENABLE_CURVE);
444
- $('#group' + mainchart.group).trigger('click');
445
- mainchart.last_updated = 0;
446
- mainchart.hiddenchart.last_updated = 0;
447
- playGraphs();
448
- }
449
- else {
450
- //mainchart.chartOptions.explorer = {
451
- // 'axis': 'horizontal',
452
- // 'maxZoomOut': 1,
453
- //};
454
- //mainchart.last_updated = 0;
455
-
456
- //if(!renderChart(mainchart, pauseGraphs))
457
- pauseGraphs();
458
- }
459
-}
460
-
461
-function buttonGlobalPlayPause(p) {
462
- if(mode == MODE_MAIN) {
463
- setMainChartPlay(p);
464
- return;
465
- }
466
-
467
- if(p == 'toggle') {
468
- if(refresh_mode != REFRESH_ALWAYS) p = 'play';
469
- else p = 'pause';
470
- }
471
-
472
- if(p == 'play') playGraphs();
473
- else pauseGraphs();
474
-}
475
-
476
-
477
-// ------------------------------------------------------------------------
478
-// Chart resizing
479
-
480
-function screenWidth() {
481
- return (($(window).width() * 0.95) - 50);
482
-}
483
-
484
-// calculate the proper width for the thumb charts
485
-function thumbWidth() {
486
- var cwidth = screenWidth();
487
- var items = Math.round(cwidth / TARGET_THUMB_GRAPH_WIDTH);
488
- if(items < 1) items = 1;
489
-
490
- if(items > 1 && (cwidth / items) < MINIMUM_THUMB_GRAPH_WIDTH) items--;
491
-
492
- return Math.round(cwidth / items) - 1;
493
-}
494
-
495
-function groupChartSizes() {
496
- var s = { width: screenWidth(), height: TARGET_GROUP_GRAPH_HEIGHT };
497
-
498
- var count = 0;
499
- if(groupCharts) $.each(groupCharts, function(i, c) {
500
- if(c.enabled) count++;
501
- });
502
-
503
- if(count == 0) {
504
- s.width = TARGET_GROUP_GRAPH_HEIGHT;
505
- s.height = TARGET_GROUP_GRAPH_HEIGHT;
506
- }
507
- else {
508
- if(s.width < MINIMUM_THUMB_GRAPH_WIDTH) s.width = screenWidth();
509
- s.height = ($(window).height() - 130) / count - 10;
510
- }
511
-
512
- if(s.height < TARGET_GROUP_GRAPH_HEIGHT)
513
- s.height = TARGET_GROUP_GRAPH_HEIGHT;
514
-
515
- return s;
516
-}
517
-
518
-// resize all charts
519
-// if the thumb charts need resize in their width, reset them
520
-function resizeCharts() {
521
- var width = screenWidth();
522
-
523
- if(mainchart) {
524
- mainchart.chartOptions.width = width;
525
- mainchart.chartOptions.height = $(window).height() - 150 - MAINCHART_CONTROL_HEIGHT;
526
- mainchart.last_updated = 0;
527
-
528
- mainchart.hidden_wrapper.setOption('width', width);
529
- mainchart.control_wrapper.setOption('ui.chartOptions.width', width);
530
- mainchart.hiddenchart.chartOptions.width = width;
531
- mainchart.hiddenchart.last_updated = 0;
532
- }
533
-
534
- width = thumbWidth();
535
- $.each(allCharts, function(i, c) {
536
- if(c.enabled) {
537
- cleanThisChart(c);
538
- c.chartOptions.width = width;
539
- calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
540
- showChartIsLoading(c.div, c.name, c.chartOptions.width, c.chartOptions.height);
541
- document.getElementById(c.id + '_thumb_actions_div').innerHTML = thumbChartActions(i, c);
542
- c.last_updated = 0;
543
- }
544
- });
545
-
546
- if(groupCharts) $.each(groupCharts, function(i, c) {
547
- var sizes = groupChartSizes();
548
-
549
- if(c.enabled) {
550
- cleanThisChart(c);
551
- c.chartOptions.width = sizes.width;
552
- c.chartOptions.height = sizes.height;
553
- calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
554
- showChartIsLoading(c.div, c.name, c.chartOptions.width, c.chartOptions.height);
555
- document.getElementById(c.id + '_group_actions_div').innerHTML = groupChartActions(i, c);
556
- c.last_updated = 0;
557
- }
558
- });
559
-
560
- updateUI();
561
-}
562
-
563
-window.onresize = function(event) {
564
- resize_request = true;
565
-};
566
-
567
-
568
-// ------------------------------------------------------------------------
569
-// Core of the thread refreshing the charts
570
-
571
-var REFRESH_PAUSED = 0;
572
-var REFRESH_ALWAYS = 1;
573
-
574
-var refresh_mode = REFRESH_PAUSED;
575
-var last_refresh = 0;
576
-function playGraphs() {
577
- mylog('playGraphs()');
578
- if(refresh_mode == REFRESH_ALWAYS) return;
579
-
580
- //mylog('PlayGraphs()');
581
- refresh_mode = REFRESH_ALWAYS;
582
- $('.mainchart_play_button').button('play');
583
- $('.global_play_button').button('play');
584
-
585
- // check if the thread died due to a javascript error
586
- var now = Date.now();
587
- if((now - last_refresh) > 60000) {
588
- // it died or never started
589
- //mylog('It seems the refresh thread died. Restarting it.');
590
- renderChartCallback();
591
- }
592
-}
593
-
594
-function pauseGraphs() {
595
- mylog('pauseGraphs()');
596
- if(refresh_mode == REFRESH_PAUSED) return;
597
-
598
- refresh_mode = REFRESH_PAUSED;
599
- $('.mainchart_play_button').button('pause');
600
- $('.global_play_button').button('pause');
601
-}
602
-
603
-var interval = null;
604
-function checkRefreshThread() {
605
- if(interval == null) {
606
- interval = setInterval(checkRefreshThread, 2000);
607
- return;
608
- }
609
-
610
- var now = Date.now();
611
- if(now - last_refresh > 60000) {
612
- mylog('Refresh thread died. Restarting it.');
613
- renderChartCallback();
614
- }
615
-}
616
-
617
-// refresh the proper chart
618
-// this is an internal function.
619
-// never call it directly, or new javascript threads will be spawn
620
-var timeout = null;
621
-function renderChartCallback() {
622
- last_refresh = Date.now();
623
-
624
- if(!page_is_visible) {
625
- timeout = setTimeout(triggerRefresh, CHARTS_CHECK_NO_FOCUS);
626
- return;
627
- }
628
-
629
- if(resize_request) {
630
- mylog('renderChartCallback() resize_request is set');
631
- cleanupCharts();
632
- resizeCharts();
633
- resize_request = false;
634
- // refresh_mode = REFRESH_ALWAYS;
635
- }
636
-
637
- if(last_user_scroll) {
638
- var now = Date.now();
639
- if((now - last_user_scroll) >= CHARTS_SCROLL_IDLE) {
640
- last_user_scroll = 0;
641
- mylog('Scrolling: resuming refresh...');
642
- }
643
- else {
644
- mylog('Scrolling: pausing refresh for ' + (CHARTS_SCROLL_IDLE - (now - last_user_scroll)) + ' ms...');
645
- timeout = setTimeout(triggerRefresh, CHARTS_SCROLL_IDLE - (now - last_user_scroll));
646
- return;
647
- }
648
- }
649
-
650
- if(refresh_mode == REFRESH_PAUSED) {
651
- if(mode == MODE_MAIN && mainchart.last_updated == 0) {
652
- mainChartRefresh();
653
- return;
654
- }
655
-
656
- if(mode != MODE_MAIN) {
657
- timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE);
658
- return;
659
- }
660
- }
661
-
662
- if(mode == MODE_THUMBS) timeout = setTimeout(thumbChartsRefreshNext, CHARTS_REFRESH_LOOP);
663
- else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(groupChartsRefreshNext, CHARTS_REFRESH_LOOP);
664
- else if(mode == MODE_MAIN) timeout = setTimeout(mainChartRefresh, CHARTS_REFRESH_LOOP);
665
- else timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE);
666
-}
667
-
668
-// callback for refreshing the charts later
669
-// this is an internal function.
670
-// never call it directly, or new javascript threads will be spawn
671
-function triggerRefresh() {
672
- //mylog('triggerRefresh()');
673
-
674
- if(!page_is_visible || (refresh_mode == REFRESH_PAUSED && mode != MODE_MAIN)) {
675
- last_refresh = Date.now();
676
- timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE);
677
- return;
678
- }
679
-
680
- if(mode == MODE_THUMBS) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE);
681
- else if(mode == MODE_GROUP_THUMBS) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE);
682
- else if(mode == MODE_MAIN) timeout = setTimeout(renderChartCallback, CHARTS_REFRESH_IDLE);
683
- else timeout = setTimeout(triggerRefresh, CHARTS_REFRESH_IDLE);
684
-}
685
-
686
-// refresh the main chart
687
-// make sure we don't loose the refreshing thread
688
-function mainChartRefresh() {
689
- //mylog('mainChartRefresh()');
690
-
691
- if(mode != MODE_MAIN || !mainchart) {
692
- triggerRefresh();
693
- return;
694
- }
695
-
696
- if(refresh_mode == REFRESH_PAUSED && mainchart.last_updated != 0) {
697
- hiddenChartRefresh();
698
- return;
699
- }
700
-
701
- if(!renderChart(mainchart, hiddenChartRefresh))
702
- hiddenChartRefresh();
703
-}
704
-
705
-function hiddenChartRefresh() {
706
- refreshHiddenChart(triggerRefresh);
707
-}
708
-
709
-function roundRobinRenderChart(charts, startat) {
710
- var refreshed = false;
711
-
712
- // find a chart to refresh
713
- var all = charts.length;
714
- var cur = startat + 1;
715
- var count = 0;
716
-
717
- for(count = 0; count < all ; count++, cur++) {
718
- if(cur >= all) cur = 0;
719
-
720
- if(charts[cur].enabled) {
721
- refreshed = renderChart(charts[cur], renderChartCallback);
722
- if(refreshed) {
723
- mylog('Refreshed: ' + charts[cur].name);
724
- break;
725
- }
726
- }
727
- }
728
-
729
- if(!refreshed) triggerRefresh();
730
- return cur;
731
-}
732
-
733
-// refresh the thumb charts
734
-// make sure we don't loose the refreshing thread
735
-var last_thumb_updated = 0;
736
-function thumbChartsRefreshNext() {
737
- //mylog('thumbChartsRefreshNext()');
738
-
739
- if(allCharts.length == 0 || mode != MODE_THUMBS) {
740
- triggerRefresh();
741
- return;
742
- }
743
-
744
- last_thumb_updated = roundRobinRenderChart(allCharts, last_thumb_updated);
745
-}
746
-
747
-// refresh the group charts
748
-// make sure we don't loose the refreshing thread
749
-var last_group_updated = 0;
750
-function groupChartsRefreshNext() {
751
- //mylog('groupChartsRefreshNext()');
752
-
753
- if(!groupCharts || groupCharts.length == 0 || mode != MODE_GROUP_THUMBS) {
754
- //mylog('cannot refresh charts');
755
- triggerRefresh();
756
- return;
757
- }
758
-
759
- last_group_updated = roundRobinRenderChart(groupCharts, last_group_updated);
760
-}
761
-
762
-
763
-// ------------------------------------------------------------------------
764
-// switch the screen between views
765
-// these should be called only from initXXXX()
766
-
767
-function disableChart(i) {
768
- mylog('disableChart(' + i + ')');
769
-
770
- var chart = null;
771
-
772
- var count = 0;
773
- if(mode == MODE_GROUP_THUMBS && groupCharts) {
774
- $.each(groupCharts, function(i, c) {
775
- if(c.enabled) count++;
776
- });
777
-
778
- if(i < groupCharts.length) chart = groupCharts[i];
779
- }
780
- else if(mode == MODE_THUMBS) {
781
- $.each(allCharts, function(i, c) {
782
- if(c.enabled) count++;
783
- });
784
-
785
- if(i < allCharts.length) chart = allCharts[i];
786
- }
787
-
788
- if(!chart) return;
789
-
790
- if(count <= 1) {
791
- alert('Cannot close the last chart shown.');
792
- return;
793
- }
794
-
795
- if(chart) {
796
- mylog("request to disable chart " + chart.name);
797
- chart.disablethisplease = true;
798
- resize_request = true;
799
- }
800
- else
801
- mylog("no chart to disable");
802
-}
803
-
804
-function cleanThisChart(chart, emptydivs) {
805
- //mylog('cleanThisChart(' + chart.name + ', ' + emptydivs +')');
806
-
807
- if(chart.dashboard) {
808
- chart.dashboard.clear();
809
- chart.dashboard = null;
810
-
811
- if(chart.control_wrapper) {
812
- chart.control_wrapper.clear();
813
- chart.control_wrapper = null;
814
- }
815
-
816
- if(chart.hidden_wrapper) {
817
- chart.hidden_wrapper.clear();
818
- chart.hidden_wrapper = null;
819
- }
820
-
821
- chart.control_data = null;
822
- }
823
-
824
- if(chart.chart) chart.chart.clearChart();
825
- chart.chart = null;
826
-
827
- if(emptydivs) {
828
- var div = document.getElementById(chart.div);
829
- if(div) {
830
- div.style.display = 'none';
831
- div.innerHTML = "";
832
- }
833
-
834
- div = document.getElementById(chart.div + "_parent");
835
- if(div) {
836
- div.style.display = 'none';
837
- div.innerHTML = "";
838
- }
839
- }
840
-
841
- //mylog("chart " + chart.name + " cleaned with option " + emptydivs);
842
-}
843
-
844
-// cleanup the previously shown charts
845
-function cleanupCharts() {
846
- // mylog('cleanupCharts()');
847
-
848
- if(mode != MODE_MAIN && mainchart) {
849
- if(mainchart.chart) cleanThisChart(mainchart);
850
- mainchart = null;
851
- }
852
-
853
- if(mode != MODE_GROUP_THUMBS && groupCharts) {
854
- clearGroupGraphs();
855
- }
856
-
857
- // cleanup the disabled charts
858
- $.each(allCharts, function(i, c) {
859
- if(c.disablethisplease && c.enabled) {
860
- cleanThisChart(c, 'emptydivs');
861
- c.disablethisplease = false;
862
- c.enabled = false;
863
- resize_request = true;
864
- mylog("removed thumb chart " + c.name + " removed");
865
- }
866
- });
867
-
868
- if(groupCharts) $.each(groupCharts, function(i, c) {
869
- if(c.disablethisplease && c.enabled) {
870
- cleanThisChart(c, 'emptydivs');
871
- c.disablethisplease = false;
872
- c.enabled = false;
873
- resize_request = true;
874
- mylog("removed group chart " + c.name + " removed");
875
- }
876
- });
877
-
878
- // we never cleanup the main chart
879
-}
880
-
881
-function updateUI() {
882
- $('[data-toggle="tooltip"]').tooltip({'container': 'body', 'html': true});
883
-
884
- $('[data-spy="scroll"]').each(function () {
885
- var $spy = $(this).scrollspy('refresh')
886
- })
887
-}
888
-
889
-var thumbsScrollPosition = null;
890
-function switchToMainGraph() {
891
- //mylog('switchToMainGraph()');
892
-
893
- if(!mainchart) return;
894
-
895
- if(!groupCharts) thumbsScrollPosition = window.pageYOffset;
896
-
897
- document.getElementById('maingraph_container').style.display = 'block';
898
- document.getElementById('thumbgraphs_container').style.display = 'none';
899
- document.getElementById('groupgraphs_container').style.display = 'none';
900
- document.getElementById('splash_container').style.display = 'none';
901
-
902
- document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\"><span class=\"glyphicon glyphicon-circle-arrow-left\"></span> Back to Dashboard</a></li><li class=\"active\"><a href=\"#\">" + mainchart.name + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>" ;
903
-
904
- window.scrollTo(0, 0);
905
-
906
- mode = MODE_MAIN;
907
- playGraphs();
908
- updateUI();
909
-}
910
-
911
-function switchToThumbGraphs() {
912
- //mylog('switchToThumbGraphs()');
913
-
914
- document.getElementById('maingraph_container').style.display = 'none';
915
- document.getElementById('thumbgraphs_container').style.display = 'block';
916
- document.getElementById('groupgraphs_container').style.display = 'none';
917
- document.getElementById('splash_container').style.display = 'none';
918
-
919
- document.getElementById("main_menu_div").innerHTML = mainmenu;
920
-
921
- if(thumbsScrollPosition) window.scrollTo(0, thumbsScrollPosition);
922
-
923
- // switch mode
924
- mode = MODE_THUMBS;
925
- playGraphs();
926
- updateUI();
927
-}
928
-
929
-function switchToGroupGraphs() {
930
- //mylog('switchToGroupGraphs()');
931
-
932
- if(!groupCharts) return;
933
-
934
- if(!mainchart) thumbsScrollPosition = window.pageYOffset;
935
-
936
- document.getElementById('maingraph_container').style.display = 'none';
937
- document.getElementById('thumbgraphs_container').style.display = 'none';
938
- document.getElementById('groupgraphs_container').style.display = 'block';
939
- document.getElementById('splash_container').style.display = 'none';
940
-
941
- document.getElementById("main_menu_div").innerHTML = "<ul class=\"nav navbar-nav\"><li><a href=\"javascript:switchToThumbGraphs();\"><span class=\"glyphicon glyphicon-circle-arrow-left\"></span> Back to Dashboard</a></li><li class=\"active\"><a href=\"#\">" + groupCharts[0].family + "</a></li>" + familiesmainmenu + chartsmainmenu + "</ul>";
942
-
943
- window.scrollTo(0, 0);
944
-
945
- mode = MODE_GROUP_THUMBS;
946
- playGraphs();
947
- updateUI();
948
-}
949
-
950
-
951
-// ------------------------------------------------------------------------
952
-// Group Charts
953
-
954
-var groupCharts = null;
955
-function initGroupGraphs(group) {
956
- var count = 0;
957
-
958
- if(groupCharts) clearGroupGraphs();
959
- groupCharts = new Array();
960
-
961
- var groupbody = "";
962
- $.each(allCharts, function(i, c) {
963
- if(c.family == group) {
964
- groupCharts[count] = [];
965
- groupCharts[count] = $.extend(true, {}, c);
966
- groupCharts[count].div += "_group";
967
- groupCharts[count].enabled = true;
968
- groupCharts[count].chart = null;
969
- groupCharts[count].last_updated = 0;
970
- count++;
971
- }
972
- });
973
- groupCharts.sort(chartssort);
974
-
975
- var sizes = groupChartSizes();
976
-
977
- var groupbody = "";
978
- $.each(groupCharts, function(i, c) {
979
- c.chartOptions.width = sizes.width;
980
- c.chartOptions.height = sizes.height;
981
- c.chartOptions.chartArea.width = '85%';
982
- c.chartOptions.chartArea.height = '90%';
983
- c.chartOptions.hAxis.textPosition = 'in';
984
- c.chartOptions.hAxis.viewWindowMode = 'maximized';
985
- c.chartOptions.hAxis.textStyle = { "fontSize": 9 };
986
- c.chartOptions.vAxis.textStyle = { "fontSize": 9 };
987
- c.chartOptions.fontSize = 11;
988
- c.chartOptions.titlePosition = 'in';
989
- c.chartOptions.tooltip = { "textStyle": { "fontSize": 9 } };
990
- c.chartOptions.legend = { "textStyle": { "fontSize": 9 } };
991
-
992
- calculateChartPointsToShow(c, c.chartOptions.isStacked?GROUPS_STACKED_POINTS_DIVISOR:GROUPS_POINTS_DIVISOR, GROUPS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
993
-
994
- groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td width='" + sizes.width + "'><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div></td><td id=\"" + c.id + "_group_actions_div\" align=\"center\">" + groupChartActions(i, c) + "</td></tr><tr><td width='15'></td></tr></table></div>";
995
- //groupbody += "<div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div>";
996
- });
997
- groupbody += "";
998
-
999
- document.getElementById("groupgraphs").innerHTML = groupbody;
1000
- switchToGroupGraphs();
1001
-}
1002
-
1003
-function clearGroupGraphs() {
1004
- if(groupCharts && groupCharts.length) {
1005
- $.each(groupCharts, function(i, c) {
1006
- cleanThisChart(c, 'emptydivs');
1007
- });
1008
-
1009
- groupCharts = null;
1010
- }
1011
-
1012
- document.getElementById("groupgraphs").innerHTML = "";
1013
-}
1014
-
1015
-
1016
-// ------------------------------------------------------------------------
1017
-// Global entry point
1018
-// initialize the thumb charts
1019
-
1020
-var last_user_scroll = 0;
1021
-
1022
-// load the charts from the server
1023
-// generate html for the thumbgraphs to support them
1024
-function initCharts() {
1025
- setPresentationNormal(1);
1026
-
1027
- var width = thumbWidth();
1028
- var height = TARGET_THUMB_GRAPH_HEIGHT;
1029
-
1030
- window.onscroll = function (e) {
1031
- last_user_scroll = Date.now();
1032
- mylog('Scrolling: detected');
1033
- }
1034
-
1035
- loadCharts(null, function(all) {
1036
- allCharts = all.charts;
1037
-
1038
- if(allCharts == null || allCharts.length == 0) {
1039
- alert("Cannot load data from server.");
1040
- return;
1041
- }
1042
-
1043
- var thumbsContainer = document.getElementById("thumbgraphs");
1044
- if(!thumbsContainer) {
1045
- alert("Cannot find the thumbsContainer");
1046
- return;
1047
- }
1048
-
1049
- allCharts.sort(chartssort);
1050
-
1051
- document.getElementById('hostname_id').innerHTML = all.hostname;
1052
- document.title = all.hostname;
1053
-
1054
- // create an array for grouping all same-type graphs together
1055
- var dimensions = 0;
1056
- var categories = new Array();
1057
- var families = new Array();
1058
- var chartslist = new Array();
1059
- $.each(allCharts, function(i, c) {
1060
- var j;
1061
-
1062
- chartslist.push({name: c.name, type: c.type, id: i});
1063
-
1064
- dimensions += c.dimensions.length;
1065
- c.chartOptions.width = width;
1066
- c.chartOptions.height = height;
1067
-
1068
- // calculate how many point to show for each chart
1069
- //c.points_to_show = Math.round(c.entries / c.group) - 1;
1070
- // show max 10 mins of data
1071
- //if(c.points_to_show * c.group > THUMBS_MAX_TIME_TO_SHOW) c.points_to_show = THUMBS_MAX_TIME_TO_SHOW / c.group;
1072
- calculateChartPointsToShow(c, c.chartOptions.isStacked?THUMBS_STACKED_POINTS_DIVISOR:THUMBS_POINTS_DIVISOR, THUMBS_MAX_TIME_TO_SHOW, -1, ENABLE_CURVE);
1073
-
1074
- if(c.enabled) {
1075
- var h = "<div class=\"thumbgraph\" id=\"" + c.div + "_parent\"><table><tr><td><div class=\"thumbgraph\" id=\"" + c.div + "\">" + chartIsLoadingHTML(c.name, c.chartOptions.width, c.chartOptions.height) + "</div></td></tr><tr><td id=\"" + c.id + "_thumb_actions_div\" align=\"center\">"
1076
- + thumbChartActions(i, c)
1077
- + "</td></tr><tr><td height='15'></td></tr></table></div>";
1078
-
1079
- // find the categories object for this type
1080
- for(j = 0; j < categories.length ;j++) {
1081
- if(categories[j].name == c.type) {
1082
- categories[j].html += h;
1083
- categories[j].count++;
1084
- break;
1085
- }
1086
- }
1087
-
1088
- if(j == categories.length)
1089
- categories.push({name: c.type, title: c.category, description: '', priority: c.categoryPriority, count: 1, glyphicon: c.glyphicon, html: h});
1090
- }
1091
-
1092
- // find the families object for this type
1093
- for(j = 0; j < families.length ;j++) {
1094
- if(families[j].name == c.family) {
1095
- families[j].count++;
1096
- break;
1097
- }
1098
- }
1099
-
1100
- if(j == families.length)
1101
- families.push({name: c.family, count: 1});
1102
- });
1103
-
1104
- document.getElementById('server_summary_id').innerHTML = "<small>NetData server at <b>" + all.hostname + "</b> is maintaining <b>" + allCharts.length + "</b> charts, having <b>" + dimensions + "</b> dimensions (by default with <b>" + all.history + "</b> entries each), which are updated every <b>" + all.update_every + "s</b>, using a total of <b>" + (Math.round(all.memory * 10 / 1024 / 1024) / 10) + " MB</b> for the round robin database.</small>";
1105
-
1106
- $.each(categories, function(i, a) {
1107
- a.html = "<tr><td id=\"" + a.name + "\"><ol class=\"breadcrumb graphs\"><li class=\"active\"><span class=\"glyphicon " + a.glyphicon + "\"></span> <a id=\"" + a.name + "\" href=\"#" + a.name + "\"><b>" + a.title + "</b> " + a.description + " </a></li></ol></td></tr><tr><td><div class=\"thumbgraphs\">" + a.html + "</td></tr>";
1108
- });
1109
-
1110
- function categoriessort(a, b) {
1111
- if(a.priority < b.priority) return -1;
1112
- return 1;
1113
- }
1114
- categories.sort(categoriessort);
1115
-
1116
- function familiessort(a, b) {
1117
- if(a.name < b.name) return -1;
1118
- return 1;
1119
- }
1120
- families.sort(familiessort);
1121
-
1122
- function chartslistsort(a, b) {
1123
- if(a.name < b.name) return -1;
1124
- return 1;
1125
- }
1126
- chartslist.sort(chartslistsort);
1127
-
1128
- // combine all the htmls into one
1129
- var allcategories = "<table width=\"100%\">";
1130
- mainmenu = '<ul class="nav navbar-nav">';
1131
-
1132
- categoriesmainmenu = '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class=\"glyphicon glyphicon-fire\"></span> Dashboard Sections <b class="caret"></b></a><ul class="dropdown-menu">';
1133
- $.each(categories, function(i, a) {
1134
- allcategories += a.html;
1135
- categoriesmainmenu += "<li><a href=\"#" + a.name + "\">" + a.title + "</a></li>";
1136
- });
1137
- categoriesmainmenu += "</ul></li>";
1138
- allcategories += "</table>";
1139
-
1140
- familiesmainmenu = '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class=\"glyphicon glyphicon-th-large\"></span> Chart Families <b class="caret"></b></a><ul class="dropdown-menu">';
1141
- $.each(families, function(i, a) {
1142
- familiesmainmenu += "<li><a href=\"javascript:initGroupGraphs('" + a.name + "');\">" + a.name + " <span class=\"badge pull-right\">" + a.count + "</span></a></li>";
1143
- });
1144
- familiesmainmenu += "</ul></li>";
1145
-
1146
- chartsmainmenu = '<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class=\"glyphicon glyphicon-resize-full\"></span> All Charts <b class="caret"></b></a><ul class="dropdown-menu">';
1147
- $.each(chartslist, function(i, a) {
1148
- chartsmainmenu += "<li><a href=\"javascript:initMainChartIndexOfMyCharts('" + a.id + "');\">" + a.name + "</a></li>";
1149
- });
1150
- chartsmainmenu += "</ul></li>";
1151
-
1152
- mainmenu += categoriesmainmenu;
1153
- mainmenu += familiesmainmenu;
1154
- mainmenu += chartsmainmenu;
1155
- mainmenu += '<li role="presentation" class="disabled" style="display: none;"><a href="#" id="logline"></a></li></ul>';
1156
-
1157
- thumbsContainer.innerHTML = allcategories;
1158
- switchToThumbGraphs();
1159
- checkRefreshThread();
1160
- });
1161
-}
1162
-
1163
-$(window).blur(function() {
1164
- page_is_visible = 0;
1165
- mylog('Lost Focus!');
1166
-});
1167
-
1168
-$(window).focus(function() {
1169
- page_is_visible = 1;
1170
- mylog('Focus restored!');
1171
-});
1172
-
1173
-// Set a callback to run when the Google Visualization API is loaded.
1174
-google.setOnLoadCallback(initCharts);
web/old/netdata.js
deleted
-502
@@ -1,502 +0,0 @@
1
-// fix old IE bug with console
2
-if(!window.console){ window.console = {log: function(){} }; }
3
-
4
-// Load the Visualization API and the piechart package.
5
-google.load('visualization', '1.1', {'packages':['corechart']});
6
-//google.load('visualization', '1.1', {'packages':['controls']});
7
-
8
-function canChartBeRefreshed(chart) {
9
- // is it enabled?
10
- if(!chart.enabled) return false;
11
-
12
- // is there something selected on the chart?
13
- if(chart.chart && chart.chart.getSelection()[0]) return false;
14
-
15
- // is it too soon for a refresh?
16
- var now = Date.now();
17
- if((now - chart.last_updated) < (chart.group * chart.update_every * 1000)) return false;
18
-
19
- // is the chart in the visible area?
20
- //console.log(chart.div);
21
- if($('#' + chart.div).visible(true) == false) return false;
22
-
23
- // ok, do it
24
- return true;
25
-}
26
-
27
-function generateChartURL(chart) {
28
- // build the data URL
29
- var url = chart.url;
30
- url += chart.points_to_show?chart.points_to_show.toString():"all";
31
- url += "/";
32
- url += chart.group?chart.group.toString():"1";
33
- url += "/";
34
- url += chart.group_method?chart.group_method:"average";
35
- url += "/";
36
- url += chart.after?chart.after.toString():"0";
37
- url += "/";
38
- url += chart.before?chart.before.toString():"0";
39
- url += "/";
40
- url += chart.non_zero?"nonzero":"all";
41
- url += "/";
42
-
43
- return url;
44
-}
45
-
46
-function renderChart(chart, doNext) {
47
- if(canChartBeRefreshed(chart) == false) return false;
48
-
49
- $.ajax({
50
- url: generateChartURL(chart),
51
- dataType:"json",
52
- cache: false
53
- })
54
- .done(function(jsondata) {
55
- if(!jsondata || jsondata.length == 0) return;
56
- chart.jsondata = jsondata;
57
-
58
- // Create our data table out of JSON data loaded from server.
59
- chart.datatable = new google.visualization.DataTable(chart.jsondata);
60
- //console.log(chart.datatable);
61
-
62
- // cleanup once every 50 updates
63
- // we don't cleanup on every single, to avoid firefox flashing effect
64
- if(chart.chart && chart.refreshCount > 50) {
65
- chart.chart.clearChart();
66
- chart.chart = null;
67
- chart.refreshCount = 0;
68
- }
69
-
70
- // Instantiate and draw our chart, passing in some options.
71
- if(!chart.chart) {
72
- // console.log('Creating new chart for ' + chart.url);
73
- if(chart.chartType == "LineChart")
74
- chart.chart = new google.visualization.LineChart(document.getElementById(chart.div));
75
- else
76
- chart.chart = new google.visualization.AreaChart(document.getElementById(chart.div));
77
- }
78
-
79
- if(chart.chart) {
80
- chart.chart.draw(chart.datatable, chart.chartOptions);
81
- chart.refreshCount++;
82
- chart.last_updated = Date.now();
83
- }
84
- else console.log('Cannot create chart for ' + chart.url);
85
- })
86
- .fail(function() {
87
- // to avoid an infinite loop, let's assume it was refreshed
88
- if(chart.chart) chart.chart.clearChart();
89
- chart.chart = null;
90
- chart.refreshCount = 0;
91
- showChartIsLoading(chart.div, chart.name, chart.chartOptions.width, chart.chartOptions.height, "failed to refresh");
92
- chart.last_updated = Date.now();
93
- })
94
- .always(function() {
95
- if(typeof doNext == "function") doNext();
96
- });
97
-
98
- return true;
99
-}
100
-
101
-function chartIsLoadingHTML(name, width, height, message)
102
-{
103
- return "<table><tr><td align=\"center\" width=\"" + width + "\" height=\"" + height + "\" style=\"vertical-align:middle\"><h4><span class=\"glyphicon glyphicon-refresh\"></span><br/><br/>" + name + "<br/><br/><span class=\"label label-default\">" + (message?message:"loading chart...") + "</span></h4></td></tr></table>";
104
-}
105
-
106
-function showChartIsLoading(id, name, width, height, message) {
107
- document.getElementById(id).innerHTML = chartIsLoadingHTML(name, width, height, message);
108
-}
109
-
110
-// calculateChartPointsToShow
111
-// calculate the chart group and point to show properties.
112
-// This uses the chartOptions.width and the supplied divisor
113
-// to calculate the propers values so that the chart will
114
-// be visually correct (not too much or too less points shown).
115
-//
116
-// c = the chart
117
-// divisor = when calculating screen points, divide width with this
118
-// if all screen points are used the chart will be overcrowded
119
-// the default is 2
120
-// maxtime = the maxtime to show
121
-// the default is to render all the server data
122
-// group = the required grouping on points
123
-// if undefined or negative, any calculated value will be used
124
-// if zero, one of 1,2,5,10,15,20,30,45,60 will be used
125
-
126
-function calculateChartPointsToShow(c, divisor, maxtime, group, enable_curve) {
127
- // console.log('calculateChartPointsToShow( c = ' + c.id + ', divisor = ' + divisor + ', maxtime = ' + maxtime + ', group = ' + group + ' )');
128
-
129
- if(!divisor) divisor = 2;
130
-
131
- var before = c.before?c.before:Date.now() / 1000;
132
- var after = c.after?c.after:c.first_entry_t;
133
-
134
- var dt = before - after;
135
- if(dt > c.entries * c.update_every) dt = c.entries * c.update_every;
136
-
137
- // console.log('chart ' + c.id + ' internal duration is ' + dt + ' secs, requested maxtime is ' + maxtime + ' secs');
138
-
139
- if(!maxtime) maxtime = c.entries * c.update_every;
140
- dt = maxtime;
141
-
142
- var data_points = Math.round(dt / c.update_every);
143
- if(!data_points) data_points = 100;
144
-
145
- var screen_points = Math.round(c.chartOptions.width / divisor);
146
- if(!screen_points) screen_points = 100;
147
-
148
- // console.log('screen_points = ' + screen_points + ', data_points = ' + data_points + ', divisor = ' + divisor);
149
-
150
- if(group == undefined || group <= 0) {
151
- if(screen_points > data_points) {
152
- c.group = 1;
153
- c.points_to_show = data_points;
154
- // console.log("rendering at full detail (group = " + c.group + ", points_to_show = " + c.points_to_show + ')');
155
- }
156
- else {
157
- c.group = Math.round(data_points / screen_points);
158
-
159
- if(c.group > 60) c.group = 90;
160
- else if(c.group > 45) c.group = 60;
161
- else if(c.group > 30) c.group = 45;
162
- else if(c.group > 20) c.group = 30;
163
- else if(c.group > 15) c.group = 20;
164
- else if(c.group > 10) c.group = 15;
165
- else if(c.group > 5) c.group = 10;
166
- else if(c.group > 4) c.group = 5;
167
- else if(c.group > 3) c.group = 4;
168
- else if(c.group > 2) c.group = 3;
169
- else if(c.group > 1) c.group = 2;
170
- else c.group = 1;
171
-
172
- c.points_to_show = Math.round(data_points / c.group);
173
- // console.log("rendering adaptive (group = " + c.group + ", points_to_show = " + c.points_to_show + ')');
174
- }
175
- }
176
- else {
177
- c.group = group;
178
- c.points_to_show = Math.round(data_points / group);
179
- // console.log("rendering with supplied group (group = " + c.group + ", points_to_show = " + c.points_to_show + ')');
180
- }
181
-
182
- // console.log("final configuration (group = " + c.group + ", points_to_show = " + c.points_to_show + ')');
183
-
184
- // make sure the line width is not congesting the chart
185
- if(c.chartType == 'LineChart') {
186
- if(c.points_to_show > c.chartOptions.width / 3) {
187
- c.chartOptions.lineWidth = 1;
188
- }
189
-
190
- else {
191
- c.chartOptions.lineWidth = 2;
192
- }
193
- }
194
- else if(c.chartType == 'AreaChart') {
195
- if(c.points_to_show > c.chartOptions.width / 2)
196
- c.chartOptions.lineWidth = 0;
197
- else
198
- c.chartOptions.lineWidth = 1;
199
- }
200
-
201
- // do not render curves when we don't have at
202
- // least 2 twice the space per point
203
- if(!enable_curve || c.points_to_show > (c.chartOptions.width * c.chartOptions.lineWidth / 2) )
204
- c.chartOptions.curveType = 'none';
205
- else
206
- c.chartOptions.curveType = c.default_curveType;
207
-
208
- var hpoints = Math.round(maxtime / 30);
209
- if(hpoints > 10) hpoints = 10;
210
- c.chartOptions.hAxis.gridlines.count = hpoints;
211
-}
212
-
213
-
214
-// loadCharts()
215
-// fetches all the charts from the server
216
-// returns an array of objects, containing all the server metadata
217
-// (not the values of the graphs - just the info about the graphs)
218
-
219
-function loadCharts(base_url, doNext) {
220
- $.ajax({
221
- url: ((base_url)?base_url:'') + '/all.json',
222
- dataType: 'json',
223
- cache: false
224
- })
225
- .done(function(json) {
226
- $.each(json.charts, function(i, value) {
227
- json.charts[i].div = json.charts[i].name.replace(/\./g,"_");
228
- json.charts[i].div = json.charts[i].div.replace(/\-/g,"_");
229
- json.charts[i].div = json.charts[i].div + "_div";
230
-
231
- // make sure we have the proper values
232
- if(!json.charts[i].update_every) chart.update_every = 1;
233
- if(base_url) json.charts[i].url = base_url + json.charts[i].url;
234
-
235
- json.charts[i].last_updated = 0;
236
- json.charts[i].thumbnail = false;
237
- json.charts[i].refreshCount = 0;
238
- json.charts[i].group = 1;
239
- json.charts[i].points_to_show = 0; // all
240
- json.charts[i].group_method = "max";
241
-
242
- json.charts[i].chart = null;
243
- json.charts[i].jsondata = null;
244
- json.charts[i].datatable = null;
245
- json.charts[i].before = 0;
246
- json.charts[i].after = 0;
247
-
248
- // if it is detail, disable it by default
249
- if(json.charts[i].isdetail) json.charts[i].enabled = false;
250
-
251
- // set default chart options
252
- json.charts[i].chartOptions = {
253
- width: 400,
254
- height: 200,
255
- lineWidth: 1,
256
- title: json.charts[i].title,
257
- fontSize: 11,
258
- hAxis: {
259
- // title: "Time of Day",
260
- // format:'HH:mm:ss',
261
- viewWindowMode: 'maximized',
262
- slantedText: false,
263
- format:'HH:mm:ss',
264
- textStyle: {
265
- fontSize: 9
266
- },
267
- gridlines: {
268
- color: '#EEE'
269
- }
270
- },
271
- vAxis: {
272
- title: json.charts[i].units,
273
- viewWindowMode: 'pretty',
274
- minValue: -0.1,
275
- maxValue: 0.1,
276
- direction: 1,
277
- textStyle: {
278
- fontSize: 9
279
- },
280
- gridlines: {
281
- color: '#EEE'
282
- }
283
- },
284
- chartArea: {
285
- width: '65%',
286
- height: '80%'
287
- },
288
- focusTarget: 'category',
289
- annotation: {
290
- '1': {
291
- style: 'line'
292
- }
293
- },
294
- pointsVisible: 0,
295
- titlePosition: 'out',
296
- titleTextStyle: {
297
- fontSize: 11
298
- },
299
- tooltip: {
300
- isHtml: true,
301
- ignoreBounds: true,
302
- textStyle: {
303
- fontSize: 9
304
- }
305
- }
306
- };
307
-
308
- json.charts[i].default_curveType = 'none';
309
-
310
- // set the chart type
311
- switch(json.charts[i].chart_type) {
312
- case "area":
313
- json.charts[i].chartType = "AreaChart";
314
- json.charts[i].chartOptions.isStacked = false;
315
- json.charts[i].chartOptions.areaOpacity = 0.3;
316
-
317
- json.charts[i].chartOptions.vAxis.viewWindowMode = 'maximized';
318
- json.charts[i].non_zero = 0;
319
-
320
- json.charts[i].group = 3;
321
- break;
322
-
323
- case "stacked":
324
- json.charts[i].chartType = "AreaChart";
325
- json.charts[i].chartOptions.isStacked = true;
326
- json.charts[i].chartOptions.areaOpacity = 0.85;
327
- json.charts[i].chartOptions.lineWidth = 1;
328
- json.charts[i].group_method = "average";
329
- json.charts[i].non_zero = 1;
330
-
331
- json.charts[i].chartOptions.vAxis.viewWindowMode = 'maximized';
332
- json.charts[i].chartOptions.vAxis.minValue = null;
333
- json.charts[i].chartOptions.vAxis.maxValue = null;
334
-
335
- json.charts[i].group = 10;
336
- break;
337
-
338
- default:
339
- case "line":
340
- json.charts[i].chartType = "LineChart";
341
- json.charts[i].chartOptions.lineWidth = 2;
342
- json.charts[i].non_zero = 0;
343
-
344
- json.charts[i].default_curveType = 'function';
345
-
346
- json.charts[i].group = 3;
347
- break;
348
- }
349
-
350
- // the category name, and other options, per type
351
- switch(json.charts[i].type) {
352
- case "system":
353
- json.charts[i].category = "System";
354
- json.charts[i].categoryPriority = 10;
355
- json.charts[i].glyphicon = "glyphicon-dashboard";
356
-
357
- if(json.charts[i].id == "system.cpu" || json.charts[i].id == "system.ram") {
358
- json.charts[i].chartOptions.vAxis.minValue = 0;
359
- json.charts[i].chartOptions.vAxis.maxValue = 100;
360
- }
361
- else {
362
- json.charts[i].chartOptions.vAxis.minValue = -0.1;
363
- json.charts[i].chartOptions.vAxis.maxValue = 0.1;
364
- }
365
- break;
366
-
367
- case "net":
368
- json.charts[i].category = "Network";
369
- json.charts[i].categoryPriority = 20;
370
- json.charts[i].glyphicon = "glyphicon-transfer";
371
-
372
- // disable IFB and net.lo devices by default
373
- if((json.charts[i].id.substring(json.charts[i].id.length - 4, json.charts[i].id.length) == "-ifb")
374
- || json.charts[i].id == "net.lo")
375
- json.charts[i].enabled = false;
376
- break;
377
-
378
- case "tc":
379
- json.charts[i].category = "Quality of Service";
380
- json.charts[i].categoryPriority = 30;
381
- json.charts[i].glyphicon = "glyphicon-random";
382
- break;
383
-
384
- case "ipvs":
385
- json.charts[i].category = "IP Virtual Server";
386
- json.charts[i].categoryPriority = 40;
387
- json.charts[i].glyphicon = "glyphicon-sort";
388
- break;
389
-
390
- case "netfilter":
391
- json.charts[i].category = "Netfilter";
392
- json.charts[i].categoryPriority = 50;
393
- json.charts[i].glyphicon = "glyphicon-cloud";
394
- break;
395
-
396
- case "ipv4":
397
- json.charts[i].category = "IPv4";
398
- json.charts[i].categoryPriority = 60;
399
- json.charts[i].glyphicon = "glyphicon-globe";
400
- break;
401
-
402
- case "mem":
403
- json.charts[i].category = "Memory";
404
- json.charts[i].categoryPriority = 70;
405
- json.charts[i].glyphicon = "glyphicon-dashboard";
406
- break;
407
-
408
- case "cpu":
409
- json.charts[i].category = "CPU";
410
- json.charts[i].categoryPriority = 80;
411
- json.charts[i].glyphicon = "glyphicon-dashboard";
412
-
413
- if(json.charts[i].id.substring(0, 7) == "cpu.cpu") {
414
- json.charts[i].chartOptions.vAxis.minValue = 0;
415
- json.charts[i].chartOptions.vAxis.maxValue = 100;
416
- }
417
- break;
418
-
419
- case "disk":
420
- json.charts[i].category = "Disks";
421
- json.charts[i].categoryPriority = 90;
422
- json.charts[i].glyphicon = "glyphicon-hdd";
423
- break;
424
-
425
- case "nfsd":
426
- json.charts[i].category = "NFS Server";
427
- json.charts[i].categoryPriority = 100;
428
- json.charts[i].glyphicon = "glyphicon-hdd";
429
- break;
430
-
431
- case "nut":
432
- json.charts[i].category = "UPS";
433
- json.charts[i].categoryPriority = 110;
434
- json.charts[i].glyphicon = "glyphicon-dashboard";
435
- break;
436
-
437
- case "netdata":
438
- json.charts[i].category = "NetData";
439
- json.charts[i].categoryPriority = 3000;
440
- json.charts[i].glyphicon = "glyphicon-thumbs-up";
441
- break;
442
-
443
- case "apps":
444
- json.charts[i].category = "Apps";
445
- json.charts[i].categoryPriority = 4000;
446
- json.charts[i].glyphicon = "glyphicon-tasks";
447
- break;
448
-
449
- case "squid":
450
- json.charts[i].category = "Squid";
451
- json.charts[i].categoryPriority = 5000;
452
- json.charts[i].glyphicon = "glyphicon-link";
453
- break;
454
-
455
- case "example":
456
- json.charts[i].category = "Examples";
457
- json.charts[i].categoryPriority = 9000;
458
- json.charts[i].glyphicon = "glyphicon-search";
459
- break;
460
-
461
- default:
462
- json.charts[i].category = json.charts[i].type;
463
- json.charts[i].categoryPriority = 1000;
464
- json.charts[i].glyphicon = "glyphicon-search";
465
- break;
466
- }
467
- });
468
-
469
- if(typeof doNext == "function") doNext(json);
470
- })
471
- .fail(function() {
472
- if(typeof doNext == "function") doNext();
473
- });
474
-};
475
-
476
-// jquery visible plugin
477
-(function($){
478
-
479
- /**
480
- * Copyright 2012, Digital Fusion
481
- * Licensed under the MIT license.
482
- * http://teamdf.com/jquery-plugins/license/
483
- *
484
- * @author Sam Sehnert
485
- * @desc A small plugin that checks whether elements are within
486
- * the user visible viewport of a web browser.
487
- * only accounts for vertical position, not horizontal.
488
- */
489
- $.fn.visible = function(partial){
490
-
491
- var $t = $(this),
492
- $w = $(window),
493
- viewTop = $w.scrollTop(),
494
- viewBottom = viewTop + $w.height(),
495
- _top = $t.offset().top,
496
- _bottom = _top + $t.height(),
497
- compareTop = partial === true ? _bottom : _top,
498
- compareBottom = partial === true ? _top : _bottom;
499
-
500
- return ((compareBottom <= viewBottom) && (compareTop >= viewTop));
501
- };
502
-})(jQuery);
web/old/theme.css
deleted
-87
@@ -1,87 +0,0 @@
1
-/* http://stackoverflow.com/questions/17005500/bootstrap-css-responsive-left-with-a-white-space-on-the-right */
2
-
3
-html {
4
- width: auto !important;
5
- overflow-x: hidden !important;
6
-}
7
-
8
-body {
9
- width: auto !important;
10
- overflow-x: hidden !important;
11
- padding-top: 70px;
12
- padding-bottom: 30px;
13
-}
14
-
15
-.theme-dropdown .dropdown-menu {
16
- position: static;
17
- display: block;
18
- margin-bottom: 20px;
19
-}
20
-
21
-.theme-showcase > p > .btn {
22
- margin: 5px 0;
23
-}
24
-
25
-.thumbgraph {
26
- float: left;
27
-}
28
-
29
-.thumbgraphs {
30
- width: 100%;
31
-}
32
-
33
-.thumbtitle {
34
- float: none;
35
- width: 100%;
36
-}
37
-
38
-.thumbgroup {
39
- float: none;
40
- width: 100%;
41
-}
42
-
43
-.container.graphs {
44
- width: 98%;
45
-}
46
-
47
-.breadcrumb.graphs {
48
- margin-top: 10px;
49
- margin-bottom: 10px;
50
-}
51
-
52
-.dropdown-menu {
53
- max-height: 500px;
54
- overflow-y: auto;
55
- overflow-x: hidden;
56
-}
57
-
58
-.google-visualization-tooltip-action: hover {
59
- background-color: #eeeeee;
60
-}
61
-.google-visualization-tooltip {
62
- border: solid 1px #bdbdbd;
63
- border-radius: 2px;
64
- background-color: white;
65
- box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
66
- font-size: 9px;
67
- -moz-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
68
- -webkit-box-shadow: 0px 2px 2px 0px rgba(204, 204, 204, 0.6);
69
- position: absolute;
70
- line-height: 90% !important;
71
- margin: 0 0 0 0 !important;
72
- padding: 0.5em 0.1em 0.5em 0.1em !important;
73
- width: 180px !important;
74
- z-index: 1000 !important;
75
-}
76
-.google-visualization-tooltip-item-list {
77
- list-style-type: none;
78
- margin: 0 0 0 0 !important;
79
- padding: 0 0 0 0 !important;
80
-}
81
-.google-visualization-tooltip-item {
82
- margin: 0 0 0 0 !important;
83
-}
84
-.google-visualization-tooltip-item-list
85
-.google-visualization-tooltip-item:first-child {
86
- margin: 0 0 0 0 !important;
87
-}