wimhandler/template/wim_list.html

   1 {% extends "base.html" %}
   2 {% load get %}
   3 {% load staticfiles %}
   4
   5
   6 {% block head_block %}
   7     {{ block.super }}
   8     <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
   9 {% endblock %}
  10 {% block title_header_big %}
  11     {{ block.super }}
  12 {% endblock %}
  13 {% block left_sidebar %}
  14
  15    {% include 'osm/osm_project_left_sidebar.html' %}
  16
  17 {% endblock %}
  18
  19
  20 {% block breadcrumb_body %}
  21     {{ block.super }}
  22     <li><a href="{% url "wims:list"   %}">VIMS</a></li>
  23 {% endblock %}
  24
  25 {% block content_body %}
  26     {{ block.super }}
  27     {% include 'modal/wim_details.html' %}
  28     {% include 'modal/wim_create.html' %}
  29     {% csrf_token %}
  30     <div class="row">
  31         <div class="col-md-12">
  32
  33             <div class="box">
  34                 <div class="box-header with-border">
  35                     <h3 class="box-title">Registered WIM</h3>
  36                     <div class="box-tools">
  37                         <button type="button" class="btn btn-default" data-container="body"
  38                             data-toggle="tooltip" data-placement="top" title="New PDU"
  39                             onclick="javascript:openModalCreateWIM()">
  40                         <i class="fa fa-plus"></i> <span> New WIM</span>
  41                         </button>
  42                     </div>
  43                 </div>
  44                 <div class="box-body">
  45                     <table id="wims_table" class="table table-bordered table-striped">
  46                         <thead>
  47                         <tr>
  48                             <th>Name</th>
  49                             <th>Identifier</th>
  50                             <th>Type</th>
  51                             <th>Operational State</th>
  52                             <th>Description</th>
  53                             <th>Actions</th>
  54                         </tr>
  55                         </thead>
  56                         <tbody>
  57
  58                         </tbody>
  59                     </table>
  60                 </div>
  61             </div>
  62         </div>
  63
  64     </div>
  65 {% endblock %}
  66
  67 {% block resource_block %}
  68     {{ block.super }}
  69     <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
  70     <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  71     <script>
  72     $(document).ready( function () {
  73         var table = $('#wims_table').DataTable({
  74             responsive: true,
  75             "ajax": {
  76                 "url": "/wims/list/",
  77                 "dataSrc": function (json) {
  78                     return json['datacenters'];
  79                 },
  80                 statusCode: {
  81                     401: function () {
  82                         console.log("no auth");
  83                         moveToLogin(window.location.pathname);
  84                     }
  85                 },
  86                 "error": function (hxr, error, thrown) {
  87                     console.log(hxr)
  88                     console.log(thrown)
  89                     console.log(error);
  90                 }
  91
  92             },
  93             "columns": [
  94                 {
  95                     "render": function (data, type, row) {
  96                         return row["name"];
  97                     },
  98                     "targets": 0
  99                 },
 100                 {
 101                     "render": function (data, type, row) {
 102                         return row['_id'];
 103                     },
 104                     "targets": 1
 105                 },
 106                 {
 107                     "render": function (data, type, row) {
 108                         return row["wim_type"];
 109                     },
 110                     "targets": 2
 111                 },
 112                 {
 113                     "render": function (data, type, row) {
 114                         return row["_admin"]['operationalState'];
 115                     },
 116                     "targets": 3
 117                 },
 118                 {
 119                     "render": function (data, type, row) {
 120                         return row['description'] || '';
 121                     },
 122                     "targets": 4
 123                 },
 124                 {
 125                     "render": function (data, type, row) {
 126                         return '<div class="btn-group"><button type="button" class="btn btn-default" ' +
 127                             'onclick="javascript:showWIM( \''+row['_id'] + '\', \''+row['name'] +'\')" data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
 128                         '<i class="fa fa-info"></i>' +
 129                         '</button> ' +
 130                         '<button type="button" class="btn btn-default"' +
 131                         'onclick="javascript:deleteWim(\''+row['_id']+'\', \''+ row["name"] +'\')" data-toggle="tooltip" data-placement="top" data-container="body" title="Delete">' +
 132                         '<i class="far fa-trash-alt" ></i></button></div>';
 133                     },
 134                     "targets": 5,
 135                     "orderable": false
 136                 }
 137             ]
 138         });
 139
 140         setInterval(function () {
 141                 table.ajax.reload();
 142             }, 10000);
 143     });
 144
 145         function openModalCreateWIM(){
 146             $('#modal_new_wim').modal('show');
 147         }
 148         function deleteWim(wim_id, wim_name) {
 149             var url = "/wims/"+wim_id+"/delete";
 150             bootbox.confirm("Are you sure want to delete " + wim_name + "?", function (result) {
 151                 if (result) {
 152                     var dialog = bootbox.dialog({
 153                         message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
 154                         closeButton: true
 155                     });
 156                     $.ajax({
 157                         url: url,
 158                         type: 'GET',
 159                         dataType: "json",
 160                         contentType: "application/json;charset=utf-8",
 161                         success: function (result) {
 162                             if (result['error'] == true) {
 163                                 dialog.modal('hide');
 164                                 bootbox.alert("An error occurred.");
 165                             }
 166                             else {
 167                                 dialog.modal('hide');
 168                                 location.reload();
 169                             }
 170                         },
 171                         error: function (error) {
 172                             dialog.modal('hide');
 173                             bootbox.alert("An error occurred.");
 174                         }
 175                     });
 176                 }
 177             })
 178         }
 179
 180         function showWIM(wim_uuid) {
 181             var dialog = bootbox.dialog({
 182                 message: '<div class="text-center"><i class="fa fa-spin fa-spinner"></i> Loading...</div>',
 183                 closeButton: true
 184             });
 185
 186             $.ajax({
 187                 url: '/wims/' + wim_uuid ,
 188                 type: 'GET',
 189                 dataType: "json",
 190                 contentType: "application/json;charset=utf-8",
 191                 success: function (result) {
 192                     //$('#modal_show_vim_body').empty();
 193                     var wim = result.wim;
 194
 195                     if (wim) {
 196                         $('#modal_show_wim_body').find('span').text('-');
 197                         for (var k in wim) {
 198                             $('#' + k).text(wim[k])
 199                         }
 200                         if (wim['_admin']) {
 201                             for (var i in wim['_admin']) {
 202                                 if (i === 'modified' || i === 'created') {
 203                                     //$('#' + i).text(new Date(wim['_admin'][i]* 1000).toUTCString());
 204                                     $('#' + i).text(moment(wim['_admin'][i] * 1000).format('DD/MM/YY hh:mm:ss'));
 205                                 }
 206                                 else if (i === 'deployed') {
 207                                     $('#' + i).text(JSON.stringify(wim['_admin'][i]))
 208                                 }
 209                                 else
 210                                     $('#' + i).text(wim['_admin'][i])
 211                             }
 212                         }
 213                         dialog.modal('hide');
 214                         $('#modal_show_wim').modal('show');
 215                     }
 216                     else {
 217                         dialog.modal('hide');
 218                         bootbox.alert("An error occurred while retrieving the WIM info.");
 219                     }
 220
 221                 },
 222                 error: function (result) {
 223                     dialog.modal('hide');
 224                     bootbox.alert("An error occurred while retrieving the WIM info.");
 225                 }
 226             });
 227
 228         }
 229     </script>
 230
 231 {% endblock %}