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

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