portal-resmgr/src/main/webapp/resmgr-nfv/datacenter.html

   1 <!--\r
   2     Copyright 2016-2017, Huawei Technologies Co., Ltd.\r
   3 \r
   4     Licensed under the Apache License, Version 2.0 (the "License");\r
   5     you may not use this file except in compliance with the License.\r
   6     You may obtain a copy of the License at\r
   7 \r
   8             http://www.apache.org/licenses/LICENSE-2.0\r
   9 \r
  10     Unless required by applicable law or agreed to in writing, software\r
  11     distributed under the License is distributed on an "AS IS" BASIS,\r
  12     WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r
  13     See the License for the specific language governing permissions and\r
  14     limitations under the License.\r
  15 -->\r
  16 <!DOCTYPE html>\r
  17 <html>\r
  18 <head>\r
  19     <head lang="en">\r
  20         <meta charset="UTF-8">\r
  21         <title></title>\r
  22         <link href="css/bootstrap.min.css" rel="stylesheet"/>\r
  23         <link href="css/VMMain.css" rel="stylesheet"/>\r
  24         <link href="css/bootstrap-table.min.css" rel="stylesheet"/>\r
  25 \r
  26         <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>\r
  27         <script type="text/javascript" src="js/bootstrap.min.js"></script>\r
  28         <script type="text/javascript" src="js/bootstrap-table.min.js"></script>\r
  29         <script type="text/javascript" src="js/bootbox.min.js"></script>\r
  30         <script type="text/javascript" src="js/jquery.validate.min.js"></script>\r
  31         \r
  32                 <script type="text/javascript" src="js/gconf.js"></script>\r
  33         <script type="text/javascript" src="js/datacenter.js"></script>\r
  34 \r
  35         <style type="text/css">\r
  36         </style>\r
  37         <script type="text/javascript">\r
  38             $(document).ready(function () {\r
  39                 /* var jsondata = [{\r
  40                  "id": "123",\r
  41                  "name": "China",\r
  42                  "status": "active",\r
  43                  "country": "China",\r
  44                  "location": "Xi'an",\r
  45                  "serviceName": "Cloud serviceName",\r
  46                  "cpu": "23/106",\r
  47                  "memory": "18000/1922222222",\r
  48                  "hardDisk":"2188/39999999"\r
  49                  }];\r
  50 \r
  51                  $('#Datacenter_table').bootstrapTable({\r
  52                  //Assigning example data to table\r
  53                  data: jsondata\r
  54                  }); */\r
  55 \r
  56                 loadDatacenterData();\r
  57                 loadNetWorkData();\r
  58                 loadPortData();\r
  59                 loadHostData();\r
  60                 fillCountryData();\r
  61                 fillVimNameData();\r
  62             });\r
  63 \r
  64             function operateFormatter(value, row, index) {\r
  65                 return ['<img class="DatacenterDeleteImg" src="images/delete.png" href="javascript:void(0)" style="cursor: pointer" name="title" title="Delete" />']\r
  66                         .join('');\r
  67 \r
  68             }\r
  69             window.operateEvents = {\r
  70                 'click .DatacenterDeleteImg': function (e, value, row, index) {\r
  71                     deleteDatacenter(row.id);\r
  72                     console.log(value, row, index);\r
  73                 }\r
  74             };\r
  75 \r
  76 \r
  77         </script>\r
  78     </head>\r
  79 <body id="open_base_site_cotentBody" class="cotentBody ng-scope">\r
  80 \r
  81 <ul class="nav nav-tabs" id="dcTab">\r
  82     <li class="active"><a href="#compute">Compute</a></li>\r
  83     <li><a href="#network">Network</a></li>\r
  84     <li><a href="#port">Port</a></li>\r
  85     <li><a href="#host">Host</a></li>\r
  86 </ul>\r
  87 \r
  88 <script>\r
  89     $(function () {\r
  90         $('#dcTab a:first').tab('show');//show init tab \r
  91 \r
  92         $('#dcTab a').click(function (e) {\r
  93             e.preventDefault();//prevent the  link\r
  94             $(this).tab('show');//show content\r
  95         })\r
  96     })\r
  97 </script>\r
  98 <div class="tab-content">\r
  99 \r
 100     <div id="host" class="tab-pane">\r
 101         <!--  host table area -->\r
 102         <hr>\r
 103         <div class="row-fluid" data-name="table_zone">\r
 104             <div id='host_table_div'>\r
 105                 <div>\r
 106                     <div class="top">\r
 107                         <table id="host_table" data-pagination="true" data-page-size="5"\r
 108                                data-pagination-first-text="First"\r
 109                                data-pagination-pre-text="Previous"\r
 110                                data-pagination-next-text="Next" data-pagination-last-text="Last">\r
 111                             <thead>\r
 112                             <tr class="active">\r
 113                                 <th data-field="id" data-sortable="true">Id</th>\r
 114                                 <th data-field="name" data-sortable="true">Name</th>\r
 115                                 <th data-field="cpu" data-sortable="true">Cpu</th>\r
 116                                 <th data-field="memory" data-sortable="true">Memory</th>\r
 117                                 <th data-field="disk" data-sortable="true">HardDisk</th>\r
 118                             </tr>\r
 119                             </thead>\r
 120                         </table>\r
 121                     </div>\r
 122                 </div>\r
 123             </div>\r
 124         </div>\r
 125     </div>\r
 126 \r
 127     <div id="port" class="tab-pane">\r
 128         <hr>\r
 129         <!--  port table area -->\r
 130         <div class="row-fluid" data-name="table_zone">\r
 131             <div id='port_table_div'>\r
 132                 <div>\r
 133                     <div class="top">\r
 134                         <table id="port_table" data-pagination="true" data-page-size="5"\r
 135                                data-pagination-first-text="First"\r
 136                                data-pagination-pre-text="Previous"\r
 137                                data-pagination-next-text="Next" data-pagination-last-text="Last">\r
 138                             <thead>\r
 139                             <tr class="active">\r
 140                                 <th data-field="id" data-sortable="true">Id</th>\r
 141                                 <th data-field="name" data-sortable="true">Name</th>\r
 142                                 <th data-field="networkId" data-sortable="true">NetworkID</th>\r
 143                                 <th data-field="status" data-sortable="true">Status</th>\r
 144                             </tr>\r
 145                             </thead>\r
 146                         </table>\r
 147                     </div>\r
 148                 </div>\r
 149             </div>\r
 150         </div>\r
 151     </div>\r
 152 \r
 153     <div id="network" class="tab-pane">\r
 154         <hr>\r
 155         <!--  network table area -->\r
 156         <div class="row-fluid" data-name="table_zone">\r
 157             <div id='network_table_div'>\r
 158                 <div>\r
 159                     <div class="top">\r
 160                         <table id="network_table" data-pagination="true" data-page-size="5"\r
 161                                data-pagination-first-text="First"\r
 162                                data-pagination-pre-text="Previous"\r
 163                                data-pagination-next-text="Next" data-pagination-last-text="Last">\r
 164                             <thead>\r
 165                             <tr class="active">\r
 166                                 <th data-field="id" data-sortable="true">Id</th>\r
 167                                 <th data-field="name" data-sortable="true">Name</th>\r
 168                                 <th data-field="id" data-sortable="true">NetworkID</th>\r
 169                                 <th data-field="provider:segmentation_id" data-sortable="true">VLanID</th>\r
 170                                 <th data-field="provider:physical_network" data-sortable="true">physicalNet</th>\r
 171                                 <th data-field="provider:network_type" data-sortable="true">type</th>\r
 172                                 <th data-field="vimName" data-sortable="true">ServiceName</th>\r
 173                                 <th data-field="status" data-sortable="true">status</th>\r
 174                             </tr>\r
 175                             </thead>\r
 176                         </table>\r
 177                     </div>\r
 178                 </div>\r
 179             </div>\r
 180         </div>\r
 181     </div>\r
 182     <div id="compute" class="tab-pane active">\r
 183         <div class="container-fluid ms-controller">\r
 184             <!-- button area -->\r
 185             <div class="uploadBtn">\r
 186                 <div id="open_base_tpL_userHeader" class="userHeader">\r
 187                     <div id="open_base_tpL_buttonGroup"\r
 188                          class="openoButton_buttonGroupClass">\r
 189                         <div\r
 190                                 class="openo openo-widget-button openoButton_buttonClass_parent ng-isolate-scope openoButton_buttonClass defaultbutton openoButton_button_default"\r
 191                                 tabindex="0" id="false" text="res.brApp_ui_res_btn_create"\r
 192                                 icon-url="./images/add.png" cls="defaultbutton" click="clickAdd"\r
 193                                 style="display: inline-block; padding-left: 0px; padding-right: 0px;">\r
 194                             <div\r
 195                                     class="openoButton_buttonInnerClass openo-corner-all openoButton_Image"\r
 196                                     id="false_button">\r
 197                                                                 <span class="openo-widget-button-image openoButton_buttonLeftImg"\r
 198                                       style="background-image: url(images/add.png);"></span><span\r
 199                                     class="openoButton_buttonCenterText openoButton_buttonCenterTextFont">Create Datacenter</span><span\r
 200                                     class="openo-widget-button-image openoButton_buttonImgDefault"></span>\r
 201                             </div>\r
 202                         </div>\r
 203 \r
 204 \r
 205                         <div\r
 206                                 class="openo openo-widget-button openoButton_buttonClass_parent ng-isolate-scope openoButton_buttonClass undefined openoButton_button_default"\r
 207                                 tabindex="0" id="meEdit" text="res.brApp_ui_res_btn_edit"\r
 208                                 display="false" style="display: none;">\r
 209                             <div class="openoButton_buttonInnerClass openo-corner-all"\r
 210                                  id="meEdit_button">\r
 211                                                                 <span\r
 212                                         class="openo-widget-button-image openoButton_buttonImgDefault"></span><span\r
 213                                     class="openoButton_buttonCenterText openoButton_buttonCenterTextFont">Edit</span><span\r
 214                                     class="openo-widget-button-image openoButton_buttonImgDefault"></span>\r
 215                             </div>\r
 216                         </div>\r
 217 \r
 218                     </div>\r
 219                 </div>\r
 220             </div>\r
 221             <!--  compute table area -->\r
 222             <div class="row-fluid" data-name="table_zone">\r
 223                 <div id='ict_virtualApplication_table_div'>\r
 224                     <div>\r
 225                         <div class="top">\r
 226                             <table id="Datacenter_table" data-pagination="true" data-page-size="5"\r
 227                                    data-pagination-first-text="First"\r
 228                                    data-pagination-pre-text="Previous"\r
 229                                    data-pagination-next-text="Next" data-pagination-last-text="Last">\r
 230                                 <thead>\r
 231                                 <tr class="active">\r
 232                                     <th data-field="id" data-sortable="true">Id</th>\r
 233                                     <th data-field="name" data-sortable="true">Name</th>\r
 234                                     <th data-field="status" data-sortable="true">Status</th>\r
 235                                     <th data-field="country" data-sortable="true">Country</th>\r
 236                                     <th data-field="location" data-sortable="true">Location</th>\r
 237                                     <th data-field="vimName" data-sortable="true">ServiceName</th>\r
 238                                     <th data-field="cpu" data-sortable="true">Cpu(Cores)</th>\r
 239                                     <th data-field="memory" data-sortable="true">Memory(MB)</th>\r
 240                                     <th data-field="hardDisk" data-sortable="true">HardDisk(GB)</th>\r
 241                                     <th align="center" data-formatter="operateFormatter"\r
 242                                         data-events="operateEvents">Action\r
 243                                     </th>\r
 244                                 </tr>\r
 245                                 </thead>\r
 246                             </table>\r
 247                         </div>\r
 248                     </div>\r
 249                 </div>\r
 250             </div>\r
 251             <!-- modal dialog area -->\r
 252             <div id="vmAppDialog" class="modal fade" tabindex="-1" role="dialog"\r
 253                  aria-labelledby="myModalLabel" aria-hidden="false">\r
 254                 <div class="modal-dialog">\r
 255                     <div class="modal-content">\r
 256                         <div class="content">\r
 257                             <div class="modal-header">\r
 258                                 <button type="button" class="close" data-dismiss="modal"\r
 259                                         aria-hidden="true">×\r
 260                                 </button>\r
 261                                 <h4 class="modal-title" id="myModalLabel">\r
 262                                     <span>Create Datacenter</span>\r
 263                                 </h4>\r
 264                             </div>\r
 265                             <form class="form-horizontal" role="form" id="vmAppForm">\r
 266                                 <div id="wizard">\r
 267                                     <div class="modal-body">\r
 268                                         <ul class="nav nav-pills nav-justified vmapp-margin">\r
 269                                         </ul>\r
 270                                         <div class="tab-content">\r
 271                                             <div class="tab-pane active" id="basicTab">\r
 272                                                 <div class="form-group" style="display:none;">\r
 273                                                     <label class="col-sm-3 control-label"> <span>Id</span>\r
 274                                                     </label>\r
 275                                                     <div class="col-sm-7">\r
 276                                                         <input type="text" id="id" name="id"\r
 277                                                                class="form-control" placeholder="id"/>\r
 278                                                     </div>\r
 279                                                 </div>\r
 280                                                 <div class="form-group">\r
 281                                                     <label class="col-sm-3 control-label"> <span>Name</span>\r
 282                                                         <span class="required">*</span>\r
 283                                                     </label>\r
 284                                                     <div class="col-sm-7">\r
 285                                                         <input type="text" id="name" name="name"\r
 286                                                                class="form-control" placeholder="Name"/>\r
 287                                                     </div>\r
 288                                                 </div>\r
 289                                                 <div class="form-group">\r
 290                                                     <label class="col-sm-3 control-label"> <span>Country</span>\r
 291                                                         <span class="required">*</span>\r
 292                                                     </label>\r
 293                                                     <div class="col-sm-7">\r
 294                                                         <select class="form-control"\r
 295                                                                 style="padding-top: 0px;padding-bottom: 0px;"\r
 296                                                                 id="country" name="country">\r
 297                                                             <option value="">--select--</option>\r
 298                                                         </select>\r
 299                                                     </div>\r
 300                                                 </div>\r
 301                                                 <div class="form-group">\r
 302                                                     <label class="col-sm-3 control-label"> <span>Location</span>\r
 303                                                         <span class="required">*</span>\r
 304                                                     </label>\r
 305                                                     <div class="col-sm-7">\r
 306                                                         <select class="form-control"\r
 307                                                                 style="padding-top: 0px;padding-bottom: 0px;"\r
 308                                                                 id="location" name="location">\r
 309                                                             <option value="">--select--</option>\r
 310                                                         </select>\r
 311                                                     </div>\r
 312                                                 </div>\r
 313                                                 <div class="form-group">\r
 314                                                     <label class="col-sm-3 control-label"> <span>ServiceName</span>\r
 315                                                         <span class="required">*</span>\r
 316                                                     </label>\r
 317                                                     <div class="col-sm-7">\r
 318                                                         <select class="form-control"\r
 319                                                                 style="padding-top: 0px;padding-bottom: 0px;"\r
 320                                                                 id="vimName" name="vimName">\r
 321                                                             <option value="">--select--</option>\r
 322                                                         </select>\r
 323                                                     </div>\r
 324                                                 </div>\r
 325 \r
 326                                                 <div class="form-group">\r
 327                                                     <label class="col-sm-3 control-label">\r
 328                                                         <span>Avaliable Res:</span>\r
 329                                                         CPU(Cores):<br>\r
 330                                                         Memory:<br>\r
 331                                                         HardDisk:\r
 332                                                     </label>\r
 333                                                     <div class="col-sm-7">\r
 334 \r
 335                                                     </div>\r
 336                                                 </div>\r
 337                                             </div>\r
 338 \r
 339 \r
 340                                         </div>\r
 341                                     </div>\r
 342                                     <div class="modal-footer">\r
 343                                         <button type="button" class="btn SDBtn" data-dismiss="modal"\r
 344                                                 aria-hidden="true" id="createDatacenter">\r
 345                                             <span id="nfv-virtualApplication-iui-text-cancelBtn">OK</span>\r
 346                                         </button>\r
 347                                         <button type="button" class="btn button-previous SDBtn">\r
 348                                             <span id="nfv-virtualApplication-iui-text-previousBtn">Cancel</span>\r
 349                                         </button>\r
 350 \r
 351                                     </div>\r
 352                                 </div>\r
 353                             </form>\r
 354                         </div>\r
 355                     </div>\r
 356                 </div>\r
 357             </div>\r
 358         </div>\r
 359     </div>\r
 360 </div>\r
 361 </body>\r
 362 </html>