tools/infra-dashboard/index.php

   1 <!DOCTYPE html>
   2 <html>
   3     <head>
   4         <meta http-equiv="content-type" content="text/html; charset=utf-8" />
   5         <title>OPNFV Pharos Dashboard | OPNFV</title>
   6         <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" type="text/css" />
   7         <link rel="stylesheet" href="./css/dataTables.bootstrap.min.css" type="text/css" />
   8         <script src="//code.jquery.com/jquery-1.10.2.js"></script>
   9         <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  10         <script src="http://www.itsyndicate.ca/gssi/jquery/jquery.crypt.js"></script>
  11         <script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script>
  12         <script src="https://cdn.datatables.net/1.10.11/js/dataTables.bootstrap.min.js"></script>
  13         <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
  14
  15         <link rel="stylesheet" href="./css/template.css" type="text/css" />
  16         <link rel="stylesheet" href="./css/theme.css" type="text/css" />
  17         <link rel="stylesheet" href="./css/opnfv.css" type="text/css" />
  18
  19         <link href='./css/fullcalendar.css' rel='stylesheet' />
  20         <link href='./css/fullcalendar.print.css' rel='stylesheet' media='print' />
  21         <script src='./js/moment.min.js'></script>
  22         <script src='./js/fullcalendar.js'></script>
  23
  24
  25         <style>
  26             fieldset { padding:0; border:0; margin-top:15px; }
  27             input.text { margin-bottom:2px; width:90%; padding: .2em; font-size:14px; }
  28             input { display:block; font-size:14px; }
  29             label {font-size:14px;}
  30             .ui-dialog .ui-state-error { padding: .3em; }
  31             .validateTips { border: 1px solid transparent; padding: 0.3em; }
  32             .booked_day span {
  33                 color: red !important; /* should only apply to may 6 and 8 */
  34             }
  35         </style>
  36
  37         <script type="text/javascript">
  38             $(document).ready(function() {
  39
  40                 function getParameterByName(name, url) {
  41                     if (!url) url = window.location.href;
  42                     name = name.replace(/[\[\]]/g, "\\$&");
  43                     var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
  44                         results = regex.exec(url);
  45                     if (!results) return null;
  46                     if (!results[2]) return '';
  47                     return decodeURIComponent(results[2].replace(/\+/g, " "));
  48                 }
  49
  50                 function selectTab(name) {
  51                     $("#container").empty();
  52                     var imgName = './media/ajax-loader.gif';
  53                     document.getElementById('container')
  54                         .innerHTML = '<img style="position: relative;left: 50%;" src="' + imgName + '" />';
  55                     if (name == "devpods") {
  56                         $( "#btn_cipods" ).addClass( "noselected" );
  57                         $( "#btn_devpods" ).removeClass( "noselected" );
  58                         $( "#btn_slaves" ).addClass( "noselected" );
  59                         var key = Math.random();
  60                         $("#container").load("pages/dev_pods.php?key="+key);
  61                         $('#hd_page').attr('value', "devpods");
  62                     }
  63                     else if (name == "slaves") {
  64                         $( "#btn_cipods" ).addClass( "noselected" );
  65                         $( "#btn_devpods" ).addClass( "noselected" );
  66                         $( "#btn_slaves" ).removeClass( "noselected" );
  67                         $("#container").load("pages/slaves.php");
  68                         $('#hd_page').attr('value', "slaves");
  69                     }
  70                     else {
  71                         $( "#btn_cipods" ).removeClass( "noselected" );
  72                         $( "#btn_devpods" ).addClass( "noselected" );
  73                         $( "#btn_slaves" ).addClass( "noselected" );
  74                         $("#container").load("pages/ci_pods.php");
  75                         $('#hd_page').attr('value', "cipods");
  76                     }
  77                 }
  78
  79
  80                 var page = getParameterByName('page');
  81                 if      (page == "devpods")  selectTab("devpods");
  82                 else if (page == "slaves")  selectTab("slaves");
  83                 else                         selectTab("cipods");
  84
  85
  86                 $( "#btn_cipods" ).click(function() {
  87                     selectTab("cipods");
  88                 });
  89                 $( "#btn_devpods" ).click(function() {
  90                     selectTab("devpods");
  91                 });
  92                 $( "#btn_slaves" ).click(function() {
  93                     selectTab("slaves");
  94                 });
  95             } );
  96
  97
  98
  99             $(function() {
 100                 var dialog, form,
 101                 login_email = $( "#login_email" ),
 102                 login_password = $( "#login_password" ),
 103                 allFields = $( [] ).add( login_email ).add( login_password ),
 104                 emailRegex = /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
 105
 106                 function checkLength( o, n, min, max ) {
 107                   if ( o.val().length > max || o.val().length < min ) {
 108                     o.addClass( "ui-state-error" );
 109                     return false;
 110                   } else {
 111                     return true;
 112                   }
 113                 }
 114
 115                 function checkRegexp( o, regexp, n ) {
 116                   if ( !( regexp.test( o.val() ) ) ) {
 117                     o.addClass( "ui-state-error" );
 118                     return false;
 119                   } else {
 120                     return true;
 121                   }
 122                 }
 123
 124
 125                 function login() {
 126                     var valid = true;
 127                     email = $( "#login_email" );
 128                     password = $( "#login_password" );
 129                     allFields.removeClass( "ui-state-error" );
 130
 131                     valid = valid && checkLength( email, "email", 6, 80 );
 132                     valid = valid && checkLength( password, "password", 5, 16 );
 133
 134                     valid = valid && checkRegexp( email, emailRegex, "eg. ui@jquery.com" );
 135                     valid = valid && checkRegexp( password, /^([0-9a-zA-Z])+$/, "Password field only allow : a-z 0-9" );
 136
 137
 138                     if ( valid ) {
 139                         var email =  $('#login_email').val();
 140                         var password = $('#login_password').val();
 141                         var passwordMD5 = $().crypt({
 142                             method: "md5",
 143                             source: password
 144                         });
 145                         $.ajax({
 146                             type: 'POST',
 147                             url: "utils/login.php",
 148                             data: {action: 'login', email: email, password: passwordMD5},
 149                             success: function(data){
 150                                 //alert(data);
 151                                 json = JSON.parse(data);
 152                                 if (json.result == 1) {
 153                                     alert("Wrong password.")
 154                                 } else if (json.result == 2){
 155                                     alert("User not registered.")
 156                                 } else {
 157                                     var page =  $('#hd_page').val();
 158                                     location.href = location.protocol + '//' + location.host + location.pathname + "?page=" + page;
 159                                 }
 160                             },
 161                             error: function(data){
 162                                 alert(data)
 163                             }
 164                         });
 165
 166                     }
 167                 }
 168
 169                 dialog_login = $( "#dialog-login" ).dialog({
 170                     autoOpen: false,
 171                     height: 225,
 172                     width: 400,
 173                     modal: true,
 174                     resizable:false,
 175                     buttons: {
 176                         "Login": login,
 177                         Cancel: function() {
 178                             dialog_login.dialog( "close" );
 179                         }
 180                     },
 181                     close: function() {
 182                         form[ 0 ].reset();
 183                         allFields.removeClass( "ui-state-error" );
 184                     }
 185                 });
 186
 187                 form = dialog_login.find( "form" ).on( "submit", function( event ) {
 188                     event.preventDefault();
 189                     login();
 190                 });
 191
 192
 193                 $( "#login_text" ).on( "click", function() {
 194                     dialog_login.dialog( "open" );
 195                 });
 196
 197                 $( "#logout" ).on( "click", function() {
 198                     $.ajax({
 199                         type: 'POST',
 200                         url: "utils/login.php",
 201                         data: {action: 'logout'},
 202                         success: function(data){
 203                             var page =  $('#hd_page').val();
 204                             location.href = location.protocol + '//' + location.host + location.pathname + "?page=" + page;
 205                         },
 206                         error: function(data){
 207                             alert(data)
 208                         }
 209                     });
 210                 });
 211             });
 212         </script>
 213     </head>
 214
 215
 216     <body>
 217
 218         <?php
 219             session_start();
 220         ?>
 221
 222         <div class="collaborative-projects">
 223             <div class="gray-diagonal">
 224                 <div class="container">
 225                     <a id="collaborative-projects-logo" href="http://collabprojects.linuxfoundation.org">Linux Foundation Collaborative Projects</a>
 226                 </div>
 227             </div>
 228         </div>
 229
 230
 231         <div id="menu">
 232             <nav class="navbar navbar-default" role="navigation">
 233                 <div class="container">
 234                     <div class="navbar-header">
 235                         <a class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
 236                             <span class="sr-only">Toggle navigation</span>
 237                         </a>
 238                         <a class="navbar-brand" href="https://www.opnfv.org/" title="OPNFV">
 239                             <img src="https://www.opnfv.org/sites/all/themes/opnfv/logo.png" alt="OPNFV" />
 240                         </a>
 241                     </div>
 242                     <div class="collapse navbar-collapse">
 243                         <div id="menu-container">
 244                             <div id="menu-second" class="hidden-xs">
 245                                 <ul class="nav navbar-nav pull-right">
 246
 247                                     <li class="item-112">
 248                                         <a target="_blank" href="https://www.opnfv.org/" >About Us</a>
 249                                     </li>
 250                                     <li class="item-113 deeper dropdown">
 251                                         <a target="_blank" href="#" class="dropdown-toggle" data-toggle="dropdown">Dodumentation
 252                                             <span class="toggle-arrow"></span>
 253                                         </a>
 254                                         <ul class="dropdown-menu" role="menu">
 255                                             <li class="item-121">
 256                                                 <a target="_blank" href="http://artifacts.opnfv.org/pharos/docs/" >Pharos</a>
 257                                             </li>
 258                                             <li class="item-122">
 259                                                 <a target="_blank" href="" >Releng</a>
 260                                             </li>
 261                                         </ul>
 262                                     </li>
 263                                     <li class="item-218">
 264                                         <a target="_blank" href="https://wiki.opnfv.org/" >OPNFV Wiki</a>
 265                                     </li>
 266                                     <li class="item-114">
 267                                         <a target="_blank" href="" >Contact</a>
 268                                     </li>
 269                                     <li class="item-112">
 270                                         <?php
 271
 272                                             if (isset($_SESSION['user_id'])) {
 273                                                 echo '<a style="cursor: pointer;" id="logout">Logout</a>';
 274                                             }
 275                                             else {
 276                                                 echo '<a style="cursor: pointer;" id="login_text">Login</a>';
 277                                             }
 278                                         ?>
 279
 280                                     </li>
 281                                 </ul>
 282                             </div>
 283                         </div>
 284                     </div>
 285                 </div>
 286             </nav>
 287         </div>
 288
 289
 290         <div id="hs-component">
 291             <div class="container">
 292                 <div id="wrap" class="sidebar-wrapper">
 293                     <div id="comp-menu" class="col-lg-12 col-md-12 col-sm-12 col-xs-12 hidden-xs">
 294                         <?php
 295                             if (isset($_SESSION['user_id'])) {
 296                                 echo '<div style="float:right;text-align:right;top:0;margin-right:18px">';
 297                                 echo 'current user: '.$_SESSION['user_name'];
 298                                 echo '</div>';
 299                             }
 300                         ?>
 301                         <h2 class="demo-name">Pharos Infrastructure</h2>
 302
 303                         <div class="btn-group theme">
 304                             <a id="btn_cipods" class="btn btn-theme noselected">CI PODs</a>
 305                             <a id="btn_devpods" class="btn btn-theme noselected">DEVELOPMENT PODs</a>
 306                             <a id="btn_slaves" class="btn btn-theme noselected">JENKINS SLAVES</a>
 307                         </div>
 308
 309                         <div style="min-width: 310px; height: 2px; margin: 0 auto; background-color: #007E88"></div>
 310                         <div style="min-width: 310px; height: 20px; margin: 0 auto; background-color: #ffffff"></div>
 311                     </div>
 312
 313                     <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
 314                 </div>
 315             </div>
 316         </div>
 317
 318
 319
 320         <div id="dialog-login" title="Login">
 321             <form>
 322                 <table>
 323                     <tr>
 324                         <td><label for="login_email">Email</label></td>
 325                         <td><input type="text" label="Email" name="login_email" id="login_email" value="" size="30" class="text ui-widget-content ui-corner-all"/></td>
 326                     </tr>
 327                         <td><label for="login_password">Password</label></td>
 328                         <td><input type="password" name="login_password" id="login_password" size="30" value="" class="text ui-widget-content ui-corner-all"/></td>
 329                     <tr>
 330                     </tr>
 331                 </table>
 332                 <input type="submit" tabindex="-1" style="position:absolute; top:-100px"/>
 333             </form>
 334         </div>
 335
 336
 337         <div id="footer" style="float:bottom">
 338             <div class="container">
 339                 <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
 340                     <div id="zt-footer-copy">
 341                         Maintained by jose.lausuch@ericsson.com.
 342                     </div>
 343                 </div>
 344             <div class="socials"></div>
 345         </div>
 346
 347         <?php
 348             echo '<input type="hidden" id="hd_user_id" value="'.$_SESSION['user_id'].'"/>';
 349             echo '<input type="hidden" id="hd_user_email" value="'.$_SESSION['user_email'].'"/>';
 350             echo '<input type="hidden" id="hd_user_name" value="'.$_SESSION['user_name'].'"/>';
 351         ?>
 352         <input type="hidden" id="hd_page" value="cipods"/>
 353
 354     </body>
 355 </html>