dashboard/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                             <a data-toggle="collapse" data-target="#pod_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
  60                         </div>
  61                         <div class="panel-body pod_panel" id="pod_panel">
  62                             <table class="table">
  63                             {% for host in booking.resource.hosts.all %}
  64                             <tr>
  65                                 <td><h4>{{host.template.resource.name}}</h4></td>
  66                                 <td>
  67                                     <table class="table">
  68                                         <tr>
  69                                             <td>Hostname:</td>
  70                                             <td>{{host.template.resource.name}}</td>
  71                                         </tr>
  72                                         <tr>
  73                                             <td>Profile:</td>
  74                                             <td>{{host.name}}</td>
  75                                         </tr>
  76                                         <tr>
  77                                             <td>Role:</td>
  78                                             <td>{{host.config.opnfvRole}}</td>
  79                                         </tr>
  80                                         <tr>
  81                                             <td>Image:</td>
  82                                             <td>{{host.config.image}}</td>
  83                                         </tr>
  84                                         <tr>
  85                                             <td>RAM:</td>
  86                                             <td>{{host.profile.ramprofile.first.amount}}G,
  87                                                 {{host.profile.ramprofile.first.channels}} channels</td>
  88                                         </tr>
  89                                         <tr>
  90                                             <td>CPU:</td>
  91                                             <td>
  92                                                 <table class="table">
  93                                                     <tr>
  94                                                         <td>Arch:</td>
  95                                                         <td>{{host.profile.cpuprofile.first.architecture}}</td>
  96                                                     </tr>
  97                                                     <tr>
  98                                                         <td>Cores:</td>
  99                                                         <td>{{host.profile.cpuprofile.first.cores}}</td>
 100                                                     </tr>
 101                                                     <tr>
 102                                                         <td>Sockets:</td>
 103                                                         <td>{{host.profile.cpuprofile.first.cpus}}</td>
 104                                                     </tr>
 105                                                 </table>
 106                                             </td>
 107                                         </tr>
 108                                         <tr>
 109                                             <td>DISK:</td>
 110                                             <td>
 111                                                 <table class="table">
 112                                                     <tr>
 113                                                         <td>Size:</td>
 114                                                         <td>{{host.profile.diskprofile.first.size}}GiB</td>
 115                                                     </tr>
 116                                                     <tr>
 117                                                         <td>Type:</td>
 118                                                         <td>{{host.profile.diskprofile.first.media_type}}</td>
 119                                                     </tr>
 120                                                     <tr>
 121                                                         <td>Mount Point:</td>
 122                                                         <td>{{host.profile.diskprofile.first.name}}</td>
 123                                                     </tr>
 124                                                 </table>
 125                                             </td>
 126                                         </tr>
 127                                         <tr>
 128                                             <td>Interfaces:</td>
 129                                             <td>
 130                                                 <style>
 131                                                     .borderless td {
 132                                                         border: none !important;
 133                                                     }
 134                                                 </style>
 135                                                 <table class="table">
 136                                                 {% for intprof in host.profile.interfaceprofile.all %}
 137                                                 <tr>
 138                                                     <td>
 139                                                     <table class="table borderless">
 140                                                         <tr>
 141                                                             <td>Name:</td>
 142                                                             <td>{{intprof.name}}</td>
 143                                                         </tr>
 144                                                         <tr>
 145                                                             <td>Speed:</td>
 146                                                             <td>{{intprof.speed}}</td>
 147                                                         </tr>
 148                                                     </table>
 149                                                     </td>
 150                                                 </tr>
 151                                                 {% endfor %}
 152                                                 </table>
 153                                             </td>
 154                                         </tr>
 155
 156
 157                                     </table>
 158
 159                                 </td>
 160                             {% endfor %}
 161                             </tr>
 162                             </table>
 163                         </div>
 164                     </div>
 165                 </div>
 166                 <div class="col-lg-6">
 167
 168                     <div class="panel panel-default">
 169                         <div class="panel-heading clearfix">
 170                             <h4 style="display: inline;">PDF</h4>
 171                             <a data-toggle="collapse" data-target="#pdf_panel" class="btn pull-right" style="line-height: 1;" >Expand</a>
 172                         </div>
 173
 174                         <div class="panel-body" id="pdf_panel" style="padding: 0px;">
 175                             <pre class="prettyprint lang-yaml" style="margin: 0px; padding: 0px; border: none;">
 176 {{pdf}}
 177                             </pre>
 178                         </div>
 179                     </div>
 180                 </div>
 181             </div>
 182         </div>
 183         <div class="col-lg-6">
 184             <div class="panel panel-default">
 185                 <div class="panel-heading clearfix">
 186                     <h4 style="display: inline;">Deployment Progress</h4>
 187                     <p style="display: inline; margin-left: 10px;">  These are the different tasks that have to be completed before your deployment is ready</p>
 188                    <a data-toggle="collapse" data-target="#panel_tasks" class="btn pull-right" style="line-height: 1;" >Expand</a>
 189                 </div>
 190
 191                 <div class="panel-body" id="panel_tasks">
 192                     <table class="table">
 193                         <style>
 194                             .progress {
 195                                 display: inline-block;
 196                                 border: 3px solid #f3f3f3;
 197                                 border-radius: 50%;
 198                                 border-top: 3px solid #12aebb;
 199                                 width: 20px;
 200                                 height: 20px;
 201                                 -webkit-animation: spin 2s linear infinite; /* Safari */
 202                                 animation: spin 2s linear infinite;
 203                               }
 204
 205                               @keyframes spin {
 206                                   0% {transform: rotate(0deg);}
 207                                   100% {transform: rotate(360deg);}
 208                               }
 209
 210                               .new {
 211                                   display: inline-block;
 212                                   width: 20px;
 213                                   height: 20px;
 214                                   background: #f3f3f3;
 215                                   border-radius: 50%;
 216                                   animation: fadeInOut 1s infinite alternate;
 217
 218
 219                               }
 220                               @keyframes fadeInOut {
 221                                   from { opacity: 0;}
 222                               }
 223                               .done {
 224                                   display: inline-block;
 225                                   width: 20px;
 226                                   height: 20px;
 227                                   background: #40B976;
 228                                   border-radius: 50%;
 229                               }
 230                             </style>
 231                         <tr>
 232                             <th></th>
 233                             <th>Status</th>
 234                             <th>Lab Response</th>
 235                             <th>Type</th>
 236                         </tr>
 237                         {% for task in booking.job.get_tasklist %}
 238                         <tr>
 239                             <td>
 240                                 {% if task.status < 100 %}
 241                                     <div class="new"></div>
 242                                 {% elif task.status < 200 %}
 243                                     <div class="progress"></div>
 244                                 {% else %}
 245                                     <div class="done"></div>
 246                                 {% endif %}
 247                                 </td>
 248
 249
 250                             <td>
 251                                 {% if task.status < 100 %}
 252                                     PENDING
 253                                 {% elif task.status < 200 %}
 254                                     IN PROGRESS
 255                                 {% else %}
 256                                     DONE
 257                                 {% endif %}
 258                             </td>
 259                             <td>
 260
 261                                 {% if task.message %}
 262                                 {% if task.type_str == "Access Task" and user_id != task.config.user.id %}
 263                                 Message from Lab: <pre>--secret--</pre>
 264                                 {% else %}
 265                                 Message from Lab: <pre>{{ task.message }}</pre>
 266                                 {% endif %}
 267                                 {% else %}
 268                                 No response provided (yet)
 269                                 {% endif %}
 270                             </td>
 271                             <td>
 272                                 {{ task.type_str }}
 273
 274                             </td>
 275                         </tr>
 276                         {% endfor %}
 277                     </table>
 278                 </div>
 279             </div>
 280         </div>
 281     </div>
 282 </div>
 283
 284
 285 {% endblock content %}