4 <meta http-equiv="Content-Type" content="text/html; 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">
13 <title>NetData</title>
15 <!-- Bootstrap CSS -->
16 <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
17 <link href="/file/theme.css" rel="stylesheet">
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>
30 <a class="navbar-brand" href="/" id="hostname_id">NetData</a>
32 <div class="collapse navbar-collapse" id="main_menu_div">
33 <ul class="nav navbar-nav">
34 <li><a href="#">preparing charts...</a></li>
36 </div><!--/.nav-collapse -->
40 <div class="container graphs" id="maingraph_container" style="display: none;">
43 <div class="maingraph">
46 <div class="maingraph" id="maingraph"></div>
47 <div id="maingraph_dashboard">
48 <div class="maingraph" id="maingraph_hidden" style="display: none"></div>
49 <div class="maingraph" id="maingraph_control"></div>
52 <tr><td align="center">
53 <div class="btn-group">
54 <form id="mainchartform">
55 <div class="btn-group btn-group" data-toggle="tooltip" 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." >
56 <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');">
57 <span class="glyphicon glyphicon-pause"></span>
60 <div class="btn-group btn-group" data-toggle="tooltip" title="use the maximum ( <span class='glyphicon glyphicon-signal'></span> ) or the average ( <span class='glyphicon glyphicon-align-justify'></span> ) value of grouped points" >
61 <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');">
62 <span class="glyphicon glyphicon-signal"></span>
65 <div class="btn-group btn-group" data-toggle="buttons" >
66 <label class="btn btn-primary" data-toggle="tooltip" title="do not group points, show the raw data">
67 <input type="radio" name="group" id="group1" onChange="setMainChartGroup(1);">1
70 <label class="btn btn-primary" data-toggle="tooltip" title="group in half, show 1 every 2 points of data">
71 <input type="radio" name="group" id="group2" onChange="setMainChartGroup(2);">2
74 <label class="btn btn-primary" data-toggle="tooltip" title="group every 5 points of data">
75 <input type="radio" name="group" id="group5" onChange="setMainChartGroup(5);">5
77 <label class="btn btn-primary" data-toggle="tooltip" title="group every 10 points of data">
78 <input type="radio" name="group" id="group10" onChange="setMainChartGroup(10);">10
80 <label class="btn btn-primary" data-toggle="tooltip" title="group every 15 points of data">
81 <input type="radio" name="group" id="group15" onChange="setMainChartGroup(15);">15
83 <label class="btn btn-primary" data-toggle="tooltip" title="group every 20 points of data">
84 <input type="radio" name="group" id="group20" onChange="setMainChartGroup(20);">20
86 <label class="btn btn-primary" data-toggle="tooltip" title="group every 30 points of data">
87 <input type="radio" name="group" id="group30" onChange="setMainChartGroup(30);">30
89 <label class="btn btn-primary" data-toggle="tooltip" title="group every 45 points of data">
90 <input type="radio" name="group" id="group45" onChange="setMainChartGroup(45);">45
92 <label class="btn btn-primary" data-toggle="tooltip" title="group every 60 points of data">
93 <input type="radio" name="group" id="group60" onChange="setMainChartGroup(60);">60
96 <div class="btn-group btn-group" data-toggle="tooltip" title="maximized ( <span class='glyphicon glyphicon-fullscreen'></span> ) or normal ( <span class='glyphicon glyphicon-resize-small'></span> ) view of the graph" >
97 <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');">
98 <span class="glyphicon glyphicon-fullscreen"></span>
105 </div><!-- /.maingraph -->
110 <div class="container graphs" id="thumbgraphs_container" style="display: none;">
111 <div id="thumbgraphs">
115 <div class="container graphs" id="groupgraphs_container" style="display: none;">
116 <div class="allgraphs" id="groupgraphs">
120 <div class="container" id="splash_container">
122 <tr><td id="splash" align="center" style="vertical-align: middle; height: 400px; overflow: auto;">
124 Welcome to <b>NetData</b>!
126 <span class="glyphicon glyphicon-off"></span>
130 <span class="label label-default">Please wait...</span>
136 <div class="container graphs" id="footer_container">
140 Realtime System Information over the web for all linux systems.
142 Distributed under GPL v2.
144 (c) 2015 Costa Tsaousis <a href="mailto:costa@tsaousis.gr">costa@tsaousis.gr</a>
146 <div id="server_summary_id"></div>
149 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
150 <script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
151 <script type='text/javascript'>
152 document.getElementById('splash').height = $(window).height();
155 <!-- Google AJAX API -->
156 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
159 <script type="text/javascript" src="/file/netdata.js"></script>
160 <script type="text/javascript" src="/file/index.js"></script>
162 <script type='text/javascript'>
163 google.load('visualization', '1.1', {packages: ['controls']});
165 $(document).ready(function(){
167 $(document).on('click','.navbar-collapse.in',function(e) {
168 if( $(e.target).is('a') ) {
169 $(this).collapse('hide');
173 $('body').scrollspy({ target: '#main_menu_div' })