@cryptotaxi247 / netdata-1 / commits / 4b20cd626

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 - &nbsp;<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>&nbsp;&nbsp; " + 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> &nbsp; <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 -}