dashboard/src/templates/booking/booking_detail.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3 {% load bootstrap3 %}
   4
   5 {% block extrahead %}
   6     {{block.super}}
   7 <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
   8 {% endblock %}
   9
  10 {% block content %}
  11
  12 <style>
  13 #modal_warning {
  14     transition: max-height 0.5s ease-out;
  15     overflow: hidden;
  16 }
  17
  18 </style>
  19
  20 <div class="container-fluid">
  21     <div class="row">
  22         <div class="col-lg-4">
  23             <div class="panel panel-default">
  24                 <div class="panel-heading clearfix">
  25                     <h4 style="display: inline;">Overview</h4>
  26                     <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;">Expand</a>
  27                 </div>
  28                 <div class="panel-body" id="panel_overview">
  29                     <table class="table">
  30                         <tr>
  31                             <td>Purpose</td>
  32                             <td>{{ booking.purpose }}</td>
  33                         </tr>
  34                         <tr>
  35                             <td>Project</td>
  36                             <td>{{ booking.project }}</td>
  37                         </tr>
  38                         <tr>
  39                             <td>Start Time</td>
  40                             <td>{{ booking.start }}</td>
  41                         </tr>
  42                         <tr>
  43                             <td>End Time</td>
  44                             <td>{{ booking.end }}</td>
  45                         </tr>
  46                         <tr>
  47                             <td>Pod Definition</td>
  48                             <td>{{ booking.resource.template }}</td>
  49                         </tr>
  50                         <tr>
  51                             <td>Pod Configuration</td>
  52                             <td>{{ booking.config_bundle }}</td>
  53                         </tr>
  54                         <tr>
  55                             <td>Lab Deployed At</td>
  56                             <td>{{ booking.lab }}</td>
  57                         </tr>
  58                     </table>
  59                 </div>
  60             </div>
  61             <div class="row">
  62                 <div class="col-lg-12">
  63                     <div class="panel panel-default">
  64                         <div class="panel-heading clearfix">
  65                             <h4 style="display: inline;">Pod</h4>
  66                             <a data-toggle="collapse" data-target="#pod_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
  67                         </div>
  68                         <div class="panel-body pod_panel" id="pod_panel">
  69                             <table class="table">
  70                             {% for host in booking.resource.hosts.all %}
  71                             <tr>
  72                                 <td><h4>{{host.template.resource.name}}</h4></td>
  73                                 <td>
  74                                     <table class="table">
  75                                         <tr>
  76                                             <td>Hostname:</td>
  77                                             <td>{{host.template.resource.name}}</td>
  78                                         </tr>
  79                                         <tr>
  80                                             <td>Profile:</td>
  81                                             <td>{{host.name}}</td>
  82                                         </tr>
  83                                         <tr>
  84                                             <td>Role:</td>
  85                                             <td>{{host.config.opnfvRole}}</td>
  86                                         </tr>
  87                                         <tr>
  88                                             <td>Image:</td>
  89                                             <td id="host_image_{{host.id}}">
  90                                                 {{host.config.image}}
  91                                                 <button
  92                                                     style="margin-left:10px;"
  93                                                     class="btn btn-primary"
  94                                                     data-toggle="modal"
  95                                                     data-target="#imageModal"
  96                                                     onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});"
  97                                                 >Change/Reset</button></td>
  98                                         </tr>
  99                                         <tr>
 100                                             <td>RAM:</td>
 101                                             <td>{{host.profile.ramprofile.first.amount}}G,
 102                                                 {{host.profile.ramprofile.first.channels}} channels</td>
 103                                         </tr>
 104                                         <tr>
 105                                             <td>CPU:</td>
 106                                             <td>
 107                                                 <table class="table">
 108                                                     <tr>
 109                                                         <td>Arch:</td>
 110                                                         <td>{{host.profile.cpuprofile.first.architecture}}</td>
 111                                                     </tr>
 112                                                     <tr>
 113                                                         <td>Cores:</td>
 114                                                         <td>{{host.profile.cpuprofile.first.cores}}</td>
 115                                                     </tr>
 116                                                     <tr>
 117                                                         <td>Sockets:</td>
 118                                                         <td>{{host.profile.cpuprofile.first.cpus}}</td>
 119                                                     </tr>
 120                                                 </table>
 121                                             </td>
 122                                         </tr>
 123                                         <tr>
 124                                             <td>DISK:</td>
 125                                             <td>
 126                                                 <table class="table">
 127                                                     <tr>
 128                                                         <td>Size:</td>
 129                                                         <td>{{host.profile.diskprofile.first.size}}GiB</td>
 130                                                     </tr>
 131                                                     <tr>
 132                                                         <td>Type:</td>
 133                                                         <td>{{host.profile.diskprofile.first.media_type}}</td>
 134                                                     </tr>
 135                                                     <tr>
 136                                                         <td>Mount Point:</td>
 137                                                         <td>{{host.profile.diskprofile.first.name}}</td>
 138                                                     </tr>
 139                                                 </table>
 140                                             </td>
 141                                         </tr>
 142                                         <tr>
 143                                             <td>Interfaces:</td>
 144                                             <td>
 145                                                 <style>
 146                                                     .borderless td {
 147                                                         border: none !important;
 148                                                     }
 149                                                 </style>
 150                                                 <table class="table">
 151                                                 {% for intprof in host.profile.interfaceprofile.all %}
 152                                                 <tr>
 153                                                     <td>
 154                                                     <table class="table borderless">
 155                                                         <tr>
 156                                                             <td>Name:</td>
 157                                                             <td>{{intprof.name}}</td>
 158                                                         </tr>
 159                                                         <tr>
 160                                                             <td>Speed:</td>
 161                                                             <td>{{intprof.speed}}</td>
 162                                                         </tr>
 163                                                     </table>
 164                                                     </td>
 165                                                 </tr>
 166                                                 {% endfor %}
 167                                                 </table>
 168                                             </td>
 169                                         </tr>
 170                                     </table>
 171                                 </td>
 172                             {% endfor %}
 173                             </tr>
 174                             </table>
 175                         </div>
 176                     </div>
 177                 </div>
 178             </div>
 179         </div>
 180         <div class="col-lg-8">
 181             <div class="panel panel-default">
 182                 <div class="panel-heading clearfix">
 183                     <h4 style="display: inline;">Deployment Progress</h4>
 184                     <p style="display: inline; margin-left: 10px;">  These are the different tasks that have to be completed before your deployment is ready</p>
 185                    <a data-toggle="collapse" data-target="#panel_tasks" class="btn pull-right" style="line-height: 1;" >Expand</a>
 186                 </div>
 187                 <div class="panel-body" id="panel_tasks">
 188                     <table class="table">
 189                         <style>
 190                             .progress {
 191                                 display: inline-block;
 192                                 border: 3px solid #f3f3f3;
 193                                 border-radius: 50%;
 194                                 border-top: 3px solid #12aebb;
 195                                 width: 20px;
 196                                 height: 20px;
 197                                 -webkit-animation: spin 2s linear infinite; /* Safari */
 198                                 animation: spin 2s linear infinite;
 199                               }
 200
 201                               @keyframes spin {
 202                                   0% {transform: rotate(0deg);}
 203                                   100% {transform: rotate(360deg);}
 204                               }
 205
 206                               .new {
 207                                   display: inline-block;
 208                                   width: 20px;
 209                                   height: 20px;
 210                                   background: #f3f3f3;
 211                                   border-radius: 50%;
 212                                   animation: fadeInOut 1s infinite alternate;
 213
 214                               }
 215                               @keyframes fadeInOut {
 216                                   from { opacity: 0;}
 217                               }
 218                               .done {
 219                                   display: inline-block;
 220                                   width: 20px;
 221                                   height: 20px;
 222                                   background: #40B976;
 223                                   border-radius: 50%;
 224                               }
 225                             </style>
 226                         <tr>
 227                             <th></th>
 228                             <th>Status</th>
 229                             <th>Lab Response</th>
 230                             <th>Type</th>
 231                         </tr>
 232                         {% for task in booking.job.get_tasklist %}
 233                         <tr>
 234                             <td>
 235                                 {% if task.status < 100 %}
 236                                     <div class="new"></div>
 237                                 {% elif task.status < 200 %}
 238                                     <div class="progress"></div>
 239                                 {% else %}
 240                                     <div class="done"></div>
 241                                 {% endif %}
 242                             </td>
 243                             <td>
 244                                 {% if task.status < 100 %}
 245                                     PENDING
 246                                 {% elif task.status < 200 %}
 247                                     IN PROGRESS
 248                                 {% else %}
 249                                     DONE
 250                                 {% endif %}
 251                             </td>
 252                             <td>
 253                                 {% if task.message %}
 254                                 {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
 255                                 Message from Lab: <pre>--secret--</pre>
 256                                 {% else %}
 257                                 Message from Lab: <pre>{{ task.message }}</pre>
 258                                 {% endif %}
 259                                 {% else %}
 260                                 No response provided (yet)
 261                                 {% endif %}
 262                             </td>
 263                             <td>
 264                                 {{ task.type_str }}
 265                             </td>
 266                         </tr>
 267                         {% endfor %}
 268                     </table>
 269                 </div>
 270             </div>
 271             <div class="row">
 272                 <div class="col-lg-8">
 273                     <div class="panel panel-default">
 274                         <div class="panel-heading clearfix">
 275                             <h4 style="display: inline;">PDF</h4>
 276                             <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
 277                         </div>
 278                         <div class="panel-body" id="pdf_panel" style="padding: 0px;">
 279                             <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 15px; border: none;">
 280 {{pdf}}
 281                             </pre>
 282                         </div>
 283                     </div>
 284                 </div>
 285             </div>
 286         </div>
 287     </div>
 288 </div>
 289
 290
 291 <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 292     <div class="modal-dialog" style="width: 450px;" role="document">
 293         <div class="modal-content">
 294             <div class="modal-header">
 295                 <h4 class="modal-title" id="exampleModalLabel" style="display: inline; float: left;">Host Image</h4>
 296                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 297                     <span aria-hidden="true">&times;</span>
 298                 </button>
 299             </div>
 300             <div class="modal-body">
 301                 <form id="image_host_form">
 302                     {% csrf_token %}
 303                     <select class="form-control" style="width: 80%; margin-left: 10%" id="image_select" name="image_id">
 304                     </select>
 305                     <input id="host_id_input" type="hidden" name="host_id">
 306                     </input>
 307                 </form>
 308             </div>
 309             <div class="modal-footer">
 310                 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
 311                 <button type="button" class="btn btn-primary" onclick="document.getElementById('modal_warning').style['max-height'] = '500px';">Reset Host</button>
 312             </div>
 313             <div id="modal_warning" class="modal-footer" style="max-height:0px;" >
 314                 <div style="text-align:center; margin: 5px">
 315                     <h3>Are You Sure?</h3>
 316                     <p>This will wipe the disk and reimage the host</p>
 317                     <button class="btn" onclick="document.getElementById('modal_warning').style['max-height'] = '0px';">Nevermind</button>
 318                     <button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button>
 319                 </div>
 320         </div>
 321     </div>
 322 </div>
 323
 324 <script>
 325     var image_mapping = {{image_mapping|safe}};
 326     var current_host_id = 0;
 327     function set_image_dropdown(profile_name, host_id) {
 328         document.getElementById("host_id_input").value = host_id;
 329         current_host_id = host_id;
 330         var dropdown = document.getElementById("image_select");
 331         var length = dropdown.length;
 332         //clear dropdown
 333         for(i=length-1; i>=0; i--){
 334             dropdown.options.remove(i);
 335         }
 336         var images = image_mapping[profile_name];
 337         var image_length = images.length;
 338         for(i=0; i<image_length; i++){
 339             var opt = document.createElement("OPTION");
 340             opt.value = images[i].value;
 341             opt.appendChild(document.createTextNode(images[i].name));
 342             dropdown.options.add(opt);
 343         }
 344
 345         document.getElementById("modal_warning").style['max-height'] = '0px';
 346     }
 347
 348     function submit_image_form() {
 349         var ajaxForm = $("#image_host_form");
 350         var formData = ajaxForm.serialize();
 351         req = new XMLHttpRequest();
 352         req.open("POST", "/booking/modify/{{booking.id}}/image/", true);
 353         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 354         req.onerror = function() { alert("problem submitting form"); }
 355         req.onreadystatechange = function() {
 356             if(req.readyState === 4) {
 357                 node = document.getElementById("host_image_" + current_host_id);
 358                 text = document.createTextNode(req.responseText);
 359                 node.replaceChild(text, node.firstChild);
 360             }
 361         }
 362         req.send(formData);
 363     }
 364 </script>
 365 {% endblock content %}