web/old/index.html

   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>