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

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