src/templates/booking/booking_detail.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3
   4 {% block extrahead %}
   5     {{block.super}}
   6     <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=yaml"></script>
   7 <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script>
   8 {% endblock %}
   9
  10 {% block content %}
  11 <div class="container-fluid">
  12     <div class="row">
  13     <div class="col-lg-6">
  14         <div class="panel panel-default">
  15             <div class="panel-heading clearfix">
  16                 <h4 style="display: inline;">Overview</h4>
  17                <a data-toggle="collapse" data-target="#panel_overview" class="btn pull-right" style="line-height: 1;" >Expand</a>
  18             </div>
  19             <div class="panel-body" id="panel_overview">
  20                 <table class="table">
  21                     <tr>
  22                         <td>Purpose</td>
  23                         <td>{{ booking.purpose }}</td>
  24                     </tr>
  25                     <tr>
  26                         <td>Project</td>
  27                         <td>{{ booking.project }}</td>
  28                     </tr>
  29                     <tr>
  30                         <td>Start Time</td>
  31                         <td>{{ booking.start }}</td>
  32                     </tr>
  33                     <tr>
  34                         <td>End Time</td>
  35                         <td>{{ booking.end }}</td>
  36                     </tr>
  37                     <tr>
  38                         <td>Pod Definition</td>
  39                         <td>{{ booking.resource.template }}</td>
  40                     </tr>
  41                     <tr>
  42                         <td>Pod Configuration</td>
  43                         <td>{{ booking.config_bundle }}</td>
  44                     </tr>
  45                     <tr>
  46                         <td>Lab Deployed At</td>
  47                         <td>{{ booking.lab }}</td>
  48                     </tr>
  49                 </table>
  50             </div>
  51         </div>
  52     <div class="row">
  53
  54         <div class="col-lg-6">
  55
  56             <div class="panel panel-default">
  57             <div class="panel-heading clearfix">
  58                 <h4 style="display: inline;">Pod</h4>
  59
  60                <a data-toggle="collapse" data-target="#pod_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
  61             </div>
  62             <div class="panel-body pod_panel" id="pod_panel">
  63                 <table class="table">
  64                 {% for host in booking.resource.hosts.all %}
  65                 <tr>
  66                     <td><h4>{{host.template.resource.name}}</h4></td>
  67                     <td>
  68                         <table class="table">
  69                             <tr>
  70                                 <td>Hostname:</td>
  71                                 <td>{{host.template.resource.name}}</td>
  72                             </tr>
  73                             <tr>
  74                                 <td>Profile:</td>
  75                                 <td>{{host.name}}</td>
  76                             </tr>
  77                             <tr>
  78                                 <td>Role:</td>
  79                                 <td>{{host.config.opnfvRole}}</td>
  80                             </tr>
  81                             <tr>
  82                                 <td>Image:</td>
  83                                 <td>{{host.config.image}}</td>
  84                             </tr>
  85                             <tr>
  86                                 <td>RAM:</td>
  87                                 <td>{{host.profile.ramprofile.first.amount}}G,
  88                                     {{host.profile.ramprofile.first.channels}} channels</td>
  89                             </tr>
  90                             <tr>
  91                                 <td>CPU:</td>
  92                                 <td>
  93                                     <table class="table">
  94                                         <tr>
  95                                             <td>Arch:</td>
  96                                             <td>{{host.profile.cpuprofile.first.architecture}}</td>
  97                                         </tr>
  98                                         <tr>
  99                                             <td>Cores:</td>
 100                                             <td>{{host.profile.cpuprofile.first.cores}}</td>
 101                                         </tr>
 102                                         <tr>
 103                                             <td>Sockets:</td>
 104                                             <td>{{host.profile.cpuprofile.first.cpus}}</td>
 105                                         </tr>
 106                                     </table>
 107                                 </td>
 108                             </tr>
 109                             <tr>
 110                                 <td>DISK:</td>
 111                                 <td>
 112                                     <table class="table">
 113                                         <tr>
 114                                             <td>Size:</td>
 115                                             <td>{{host.profile.diskprofile.first.size}}GiB</td>
 116                                         </tr>
 117                                         <tr>
 118                                             <td>Type:</td>
 119                                             <td>{{host.profile.diskprofile.first.media_type}}</td>
 120                                         </tr>
 121                                         <tr>
 122                                             <td>Mount Point:</td>
 123                                             <td>{{host.profile.diskprofile.first.name}}</td>
 124                                         </tr>
 125                                     </table>
 126                                 </td>
 127                             </tr>
 128                             <tr>
 129                                 <td>Interfaces:</td>
 130                                 <td>
 131                                     <style>
 132                                         .borderless td {
 133                                             border: none !important;
 134                                         }
 135                                     </style>
 136                                     <table class="table">
 137                                     {% for intprof in host.profile.interfaceprofile.all %}
 138                                     <tr>
 139                                         <td>
 140                                         <table class="table borderless">
 141                                             <tr>
 142                                                 <td>Name:</td>
 143                                                 <td>{{intprof.name}}</td>
 144                                             </tr>
 145                                             <tr>
 146                                                 <td>Speed:</td>
 147                                                 <td>{{intprof.speed}}</td>
 148                                             </tr>
 149                                         </table>
 150                                         </td>
 151                                     </tr>
 152                                     {% endfor %}
 153                                     </table>
 154                                 </td>
 155                             </tr>
 156
 157
 158                         </table>
 159
 160                     </td>
 161                 {% endfor %}
 162                 </tr>
 163                 </table>
 164             </div>
 165         </div>
 166       </div>
 167         <div class="col-lg-6">
 168
 169         <div class="panel panel-default">
 170             <div class="panel-heading clearfix">
 171                 <h4 style="display: inline;">PDF</h4>
 172             <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
 173             </div>
 174
 175             <div class="panel-body" id="pdf_panel" style="padding: 0px;">
 176                 <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 0px; border: none;">
 177
 178                     {{pdf}}
 179
 180
 181                 </pre>
 182             </div>
 183         </div>
 184         </div>
 185         </div>
 186     </div>
 187
 188
 189
 190     <div class="col-lg-6">
 191         <div class="panel panel-default">
 192             <div class="panel-heading clearfix">
 193                 <h4 style="display: inline;">Deployment Progress</h4>
 194                 <p style="display: inline; margin-left: 10px;">  These are the different tasks that have to be completed before your deployment is ready</p>
 195                <a data-toggle="collapse" data-target="#panel_tasks" class="btn pull-right" style="line-height: 1;" >Expand</a>
 196             </div>
 197
 198             <div class="panel-body" id="panel_tasks">
 199                 <table class="table">
 200                     <style>
 201                         .progress {
 202                             display: inline-block;
 203                             border: 3px solid #f3f3f3;
 204                             border-radius: 50%;
 205                             border-top: 3px solid #12aebb;
 206                             width: 20px;
 207                             height: 20px;
 208                             -webkit-animation: spin 2s linear infinite; /* Safari */
 209                             animation: spin 2s linear infinite;
 210                           }
 211
 212                           @keyframes spin {
 213                               0% {transform: rotate(0deg);}
 214                               100% {transform: rotate(360deg);}
 215                           }
 216
 217                           .new {
 218                               display: inline-block;
 219                               width: 20px;
 220                               height: 20px;
 221                               background: #f3f3f3;
 222                               border-radius: 50%;
 223                               animation: fadeInOut 1s infinite alternate;
 224
 225
 226                           }
 227                           @keyframes fadeInOut {
 228                               from { opacity: 0;}
 229                           }
 230                           .done {
 231                               display: inline-block;
 232                               width: 20px;
 233                               height: 20px;
 234                               background: #40B976;
 235                               border-radius: 50%;
 236                           }
 237                         </style>
 238                     <tr>
 239                         <th></th>
 240                         <th>Status</th>
 241                         <th>Lab Response</th>
 242                         <th>Type</th>
 243                     </tr>
 244                     {% for task in booking.job.get_tasklist %}
 245                     <tr>
 246                         <td>
 247                             {% if task.status < 100 %}
 248                                 <div class="new"></div>
 249                             {% elif task.status < 200 %}
 250                                 <div class="progress"></div>
 251                             {% else %}
 252                                 <div class="done"></div>
 253                             {% endif %}
 254                             </td>
 255
 256
 257                         <td>
 258                             {% if task.status < 100 %}
 259                                 PENDING
 260                             {% elif task.status < 200 %}
 261                                 IN PROGRESS
 262                             {% else %}
 263                                 DONE
 264                             {% endif %}
 265                         </td>
 266                         <td>
 267
 268                             {% if task.message %}
 269                             {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
 270                             Message from Lab: <pre>--secret--</pre>
 271                             {% else %}
 272                             Message from Lab: <pre>{{ task.message }}</pre>
 273                             {% endif %}
 274                             {% else %}
 275                             No response provided (yet)
 276                             {% endif %}
 277                         </td>
 278                         <td>
 279                             {{ task.type_str }}
 280
 281                         </td>
 282                     </tr>
 283                     {% endfor %}
 284                 </table>
 285             </div>
 286         </div>
 287
 288     </div>
 289     </div>
 290 </div>
 291
 292
 293 {% endblock content %}