src/templates/base/booking/booking_detail.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3 {% load bootstrap4 %}
   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 <style>
  11 code {
  12     overflow: scroll;
  13 }
  14 </style>
  15
  16 {% block content %}
  17 <div class="row">
  18     <div class="col-12 col-lg-5">
  19         <div class="card mb-3">
  20             <div class="card-header d-flex">
  21                 <h4 class="d-inline">Overview</h4>
  22                 <button data-toggle="collapse" data-target="#panel_overview" class="btn btn-outline-secondary ml-auto">Expand</button>
  23             </div>
  24             <div class="collapse show" id="panel_overview">
  25                 <table class="table m-0">
  26                     <tr>
  27                         <td>Username</td>
  28                         <td>{{  posix_username  }}</td>
  29                     </tr>
  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>Lab Deployed At</td>
  52                         <td>{{ booking.lab }}</td>
  53                     </tr>
  54                 </table>
  55             </div>
  56         </div>
  57         <div class="card my-3">
  58             <div class="card-header d-flex">
  59                 <h4 class="d-inline">Pod</h4>
  60                 <button data-toggle="collapse" data-target="#pod_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
  61             </div>
  62             <div class="collapse show" id="pod_panel">
  63                 <div class="card-body">
  64                     <h4>{{host.bundle.template.copy_of.name}}</h4>
  65                     {% for host in booking.resource.get_resources %}
  66                         <h4>{{host.config.name}}</h4>
  67                         <div class="overflow-auto">
  68                             <table class="table m-0">
  69                                 <tr>
  70                                     <td>Hostname:</td>
  71                                     <td>{{host.config.name}}</td>
  72                                 </tr>
  73                                 <tr>
  74                                     <td>Machine:</td>
  75                                     <td>{{host.name}}</td>
  76                                 </tr>
  77                                 <tr>
  78                                     <td>Role:</td>
  79                                     <td>{{host.template.opnfvRole}}</td>
  80                                 </tr>
  81                                 <tr>
  82                                     <td>Is Headnode:</td>
  83                                     <td>{{host.config.is_head_node}}</td>
  84                                 <tr>
  85                                     <td>Image:</td>
  86                                     <td id="host_image_{{host.id}}">
  87                                         {{host.config.image}}
  88                                         <button
  89                                             class="btn btn-primary ml-4"
  90                                             data-toggle="modal"
  91                                             data-target="#imageModal"
  92                                             onclick="set_image_dropdown('{{host.profile.name}}', {{host.id}});"
  93                                         >Change/Reset</button></td>
  94                                 </tr>
  95                                 <tr>
  96                                     <td>RAM:</td>
  97                                     <td>{{host.profile.ramprofile.first.amount}}G,
  98                                         {{host.profile.ramprofile.first.channels}} channels</td>
  99                                 </tr>
 100                                 <tr>
 101                                     <td>CPU:</td>
 102                                     <td>
 103                                         <table class="table m-0">
 104                                             <tr>
 105                                                 <td>Arch:</td>
 106                                                 <td>{{host.profile.cpuprofile.first.architecture}}</td>
 107                                             </tr>
 108                                             <tr>
 109                                                 <td>Cores:</td>
 110                                                 <td>{{host.profile.cpuprofile.first.cores}}</td>
 111                                             </tr>
 112                                             <tr>
 113                                                 <td>Sockets:</td>
 114                                                 <td>{{host.profile.cpuprofile.first.cpus}}</td>
 115                                             </tr>
 116                                         </table>
 117                                     </td>
 118                                 </tr>
 119                                 <tr>
 120                                     <td>DISK:</td>
 121                                     <td>
 122                                         <table class="table m-0">
 123                                             <tr>
 124                                                 <td>Size:</td>
 125                                                 <td>{{host.profile.storageprofile.first.size}} GiB</td>
 126                                             </tr>
 127                                             <tr>
 128                                                 <td>Type:</td>
 129                                                 <td>{{host.profile.storageprofile.first.media_type}}</td>
 130                                             </tr>
 131                                             <tr>
 132                                                 <td>Mount Point:</td>
 133                                                 <td>{{host.profile.storageprofile.first.name}}</td>
 134                                             </tr>
 135                                         </table>
 136                                     </td>
 137                                 </tr>
 138                                 <tr>
 139                                     <td>Interfaces:</td>
 140                                     <td>
 141                                         <table class="table m-0">
 142                                         {% for intprof in host.profile.interfaceprofile.all %}
 143                                         <tr>
 144                                             <td>
 145                                             <table class="table table-sm table-borderless m-0">
 146                                                 <tr>
 147                                                     <td>Name:</td>
 148                                                     <td>{{intprof.name}}</td>
 149                                                 </tr>
 150                                                 <tr>
 151                                                     <td>Speed:</td>
 152                                                     <td>{{intprof.speed}}</td>
 153                                                 </tr>
 154                                             </table>
 155                                             </td>
 156                                         </tr>
 157                                         {% endfor %}
 158                                         </table>
 159                                     </td>
 160                                 </tr>
 161                             </table>
 162                         </div>
 163                     {% endfor %}
 164                 </div>
 165             </div>
 166         </div>
 167         <div class="card my-3">
 168             <div class="card-header d-flex">
 169                 <h4 class="d-inline">Diagnostic Information</h4>
 170                 <button data-toggle="collapse" data-target="#diagnostics_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
 171             </div>
 172             <div class="collapse" id="diagnostics_panel">
 173                 <div class="card-body">
 174                     <table class="table m-0">
 175                         <tr>
 176                             <th>Job ID: </th>
 177                             <td>{{booking.job.id}}</td>
 178                         </tr>
 179                         <tr>
 180                             <th>CI Files</th>
 181                         </tr>
 182                         {% for host in booking.resource.get_resources %}
 183                         <tr>
 184                             <td>
 185                                 <table class="table m-0">
 186                                     <tr>
 187                                         <th>Host:</th>
 188                                         <td>{{host.name}}</td>
 189                                     </tr>
 190                                     <tr>
 191                                         <th>Configs:</th>
 192                                     </tr>
 193                                     {% for ci_file in host.config.cloud_init_files.all %}
 194                                     <tr>
 195                                         <td>{{ci_file.id}}</td>
 196                                         <td>
 197                                             <div class="modal fade" id="ci_file_modal_{{ci_file.id}}" tabindex="-1" role="dialog" aria-hidden="true">
 198                                                 <div class="modal-dialog modal-xl" role="document">
 199                                                     <div class="modal-content">
 200                                                         <div class="modal-header">
 201                                                             <h4 class="modal-title d-inline float-left">Cloud Config Content</h4>
 202                                                             <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 203                                                                 <span aria-hidden="true">&times;</span>
 204                                                             </button>
 205                                                         </div>
 206                                                         <div class="card-body">
 207                                                             <pre class="prettyprint lang-yaml m-0 border-0 text-break pre-wrap">
 208 {{ci_file.text}}
 209                                                             </pre>
 210                                                         </div>
 211                                                     </div>
 212                                                 </div>
 213                                             </div>
 214                                             <button class="btn btn-primary" data-toggle="modal" data-target="#ci_file_modal_{{ci_file.id}}">Show File Content</button>
 215                                         </td>
 216                                     </tr>
 217                                     {% endfor %}
 218                                 </table>
 219                             </td>
 220                         </tr>
 221                         {% endfor %}
 222                     </table>
 223                 </div>
 224             </div>
 225         </div>
 226     </div>
 227     <div class="col">
 228         <div class="card mb-3">
 229             <div class="card-header d-flex">
 230                 <h4 class="d-inline">Deployment Progress</h4>
 231                 <p>These are the different tasks that have to be completed before your deployment is ready.
 232                 If this is taking a really long time, let us know <a href="mailto:{{contact_email}}">here!</a></p>
 233                 <button data-toggle="collapse" data-target="#panel_tasks" class="btn btn-outline-secondary ml-auto">Expand</button>
 234             </div>
 235             <div class="collapse show" id="panel_tasks">
 236                 <table class="table m-0">
 237                     <tr>
 238                         <th></th>
 239                         <th>Status</th>
 240                         <th>Lab Response</th>
 241                         <th>Type</th>
 242                     </tr>
 243                     {% for task in booking.job.get_tasklist %}
 244                     <tr>
 245                         <td>
 246                             {% if task.status < 100 %}
 247                                 <div class="rounded-circle bg-secondary square-20"></div>
 248                             {% elif task.status < 200 %}
 249                                 <div class="spinner-border text-primary square-20"></div>
 250                             {% else %}
 251                                 <div class="rounded-circle bg-success square-20"></div>
 252                             {% endif %}
 253                         </td>
 254                         <td>
 255                             {% if task.status < 100 %}
 256                                 PENDING
 257                             {% elif task.status < 200 %}
 258                                 IN PROGRESS
 259                             {% else %}
 260                                 DONE
 261                             {% endif %}
 262                         </td>
 263                         <td>
 264                             {% if task.message %}
 265                                 {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
 266                                     Message from Lab: <pre>--secret--</pre>
 267                                 {% else %}
 268                                     Message from Lab: <pre class="text-break pre-wrap">{{ task.message }}</pre>
 269                                 {% endif %}
 270                             {% else %}
 271                                 No response provided (yet)
 272                             {% endif %}
 273                         </td>
 274                         <td>
 275                             {{ task.type_str }}
 276                         </td>
 277                     </tr>
 278                     {% endfor %}
 279                 </table>
 280             </div>
 281         </div>
 282         <div class="card my-3">
 283             <div class="card-header d-flex">
 284                 <h4 class="d-inline">PDF</h4>
 285                 <button data-toggle="collapse" data-target="#pdf_panel" class="btn btn-outline-secondary ml-auto">Expand</button>
 286             </div>
 287             <div class="collapse show" id="pdf_panel">
 288                 <div class="card-body">
 289                     <pre class="prettyprint lang-yaml m-0 border-0 text-break pre-wrap">
 290 {{pdf}}
 291                     </pre>
 292                 </div>
 293             </div>
 294         </div>
 295     </div>
 296 </div>
 297
 298
 299 <div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
 300     <div class="modal-dialog" role="document">
 301         <div class="modal-content">
 302             <div class="modal-header">
 303                 <h4 class="modal-title d-inline float-left" id="exampleModalLabel">Host Image</h4>
 304                 <button type="button" class="close" data-dismiss="modal" aria-label="Close">
 305                     <span aria-hidden="true">&times;</span>
 306                 </button>
 307             </div>
 308             <div class="modal-body">
 309                 <form id="image_host_form">
 310                     {% csrf_token %}
 311                     <select class="form-control" id="image_select" name="image_id">
 312                     </select>
 313                     <input id="host_id_input" type="hidden" name="host_id">
 314                 </form>
 315             </div>
 316             <div class="modal-footer d-flex flex-column">
 317                 <div>
 318                     <button type="button" class="btn btn-outline-secondary" data-dismiss="modal">Close</button>
 319                     <button type="button" class="btn btn-danger" data-toggle="collapse" data-target="#modal_warning" aria-expanded="false">Reset Host</button>
 320                 </div>
 321                 <div class="border-top collapse mt-3 py-2 text-center w-100" id="modal_warning">
 322                     <h3>Are You Sure?</h3>
 323                     <p>This will wipe the disk and reimage the host</p>
 324                     <button class="btn btn-outline-secondary" data-dismiss="modal">Nevermind</button>
 325                     <button class="btn btn-danger" data-dismiss="modal" onclick="submit_image_form();">I'm Sure</button>
 326                 </div>
 327             </div>
 328         </div>
 329     </div>
 330 </div>
 331
 332 <script>
 333     var image_mapping = {{image_mapping|safe}};
 334     var current_host_id = 0;
 335     function set_image_dropdown(profile_name, host_id) {
 336         document.getElementById("host_id_input").value = host_id;
 337         current_host_id = host_id;
 338         var dropdown = document.getElementById("image_select");
 339         var length = dropdown.length;
 340         //clear dropdown
 341         for(i=length-1; i>=0; i--){
 342             dropdown.options.remove(i);
 343         }
 344         var images = image_mapping[profile_name];
 345         var image_length = images.length;
 346         for(i=0; i<image_length; i++){
 347             var opt = document.createElement("OPTION");
 348             opt.value = images[i].value;
 349             opt.appendChild(document.createTextNode(images[i].name));
 350             dropdown.options.add(opt);
 351         }
 352
 353         document.getElementById("modal_warning").classList.add("collapse");
 354     }
 355
 356     function submit_image_form() {
 357         var ajaxForm = $("#image_host_form");
 358         var formData = ajaxForm.serialize();
 359         req = new XMLHttpRequest();
 360         req.open("POST", "/booking/modify/{{booking.id}}/image/", true);
 361         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 362         req.onerror = function() { alert("problem submitting form"); }
 363         req.onreadystatechange = function() {
 364             if(req.readyState === 4) {
 365                 node = document.getElementById("host_image_" + current_host_id);
 366                 text = document.createTextNode(req.responseText);
 367                 node.replaceChild(text, node.firstChild);
 368             }
 369         }
 370         req.send(formData);
 371     }
 372 </script>
 373 {% endblock content %}