instancehandler/template/instance_list.html

   1 <!--
   2 Copyright 2019 EveryUP srl
   3
   4 Licensed under the Apache License, Version 2.0 (the "License");
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an  BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15 -->
  16
  17 {% extends "base.html" %}
  18 {% load get %}
  19 {% load staticfiles %}
  20
  21
  22
  23 {% block head_block %}
  24     {{ block.super }}
  25     <!-- Codemirror core CSS -->
  26     <link rel="stylesheet" href="/static/node_modules/codemirror/lib/codemirror.css">
  27     <link rel="stylesheet" href="/static/node_modules/codemirror/addon/fold/foldgutter.css" />
  28     <link rel="stylesheet" href="/static/node_modules/codemirror/theme/neat.css">
  29     <link rel="stylesheet" href="/static/node_modules/codemirror/addon/dialog/dialog.css">
  30     <link rel="stylesheet" href="/static/node_modules/codemirror/addon/display/fullscreen.css">
  31     <link rel="stylesheet" href="/static/node_modules/select2/dist/css/select2.min.css">
  32     <link rel="stylesheet" href="/static/css/lwuitable.css">
  33     <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
  34 {% endblock %}
  35 {% block title_header_big %}
  36     {{ block.super }}
  37 {% endblock %}
  38 {% block left_sidebar %}
  39     {% include 'osm/osm_project_left_sidebar.html' %}
  40 {% endblock %}
  41
  42
  43 {% block breadcrumb_body %}
  44     {{ block.super }}
  45     <li><a href="{% url 'instances:list'  type=type %}">{{ type|upper }} Instances</a></li>
  46 {% endblock %}
  47
  48 {% block content_body %}
  49     {{ block.super }}
  50     {% include 'modal/instance_create.html' %}
  51     {% csrf_token %}
  52     <div class="row">
  53         <div class="col-md-12">
  54
  55             {% if type == 'ns' %}
  56                 {% include 'instance_list_ns.html' %}
  57             {% elif type == 'vnf' %}
  58                 {% include 'instance_list_vnf.html' %}
  59             {% elif type == 'pdu' %}
  60                 {% include 'instance_list_pdu.html' %}
  61             {% elif type == 'nsi' %}
  62                 {% include 'instance_list_nsi.html' %}
  63             {% endif %}
  64
  65         </div>
  66
  67     </div>
  68     {% include 'modal/instance_create.html' %}
  69     {% include 'modal/instance_create_pdu.html' %}
  70     {% include 'modal/instance_create_nsi.html' %}
  71     {% include 'modal/instance_show.html' %}
  72     {% include 'modal/instance_new_action.html' %}
  73 {% endblock %}
  74
  75 {% block resource_block %}
  76     {{ block.super }}
  77     <!-- Utility JS -->
  78     <script src="/static/node_modules/select2/dist/js/select2.js"></script>
  79     <script src="/static/node_modules/codemirror/lib/codemirror.js"></script>
  80     <script src="/static/node_modules/codemirror/addon/fold/foldcode.js"></script>
  81     <script src="/static/node_modules/codemirror/addon/fold/foldgutter.js"></script>
  82     <script src="/static/node_modules/codemirror/addon/fold/brace-fold.js"></script>
  83     <script src="/static/node_modules/codemirror/mode/javascript/javascript.js"></script>
  84     <script src="/static/node_modules/codemirror/addon/search/searchcursor.js"></script>
  85     <script src="/static/node_modules/codemirror/addon/search/search.js"></script>
  86     <script src="/static/node_modules/codemirror/addon/dialog/dialog.js"></script>
  87     <script src="/static/node_modules/codemirror/addon/display/autorefresh.js"></script>
  88     <script src="/static/node_modules/codemirror/addon/edit/matchbrackets.js"></script>
  89     <script src="/static/node_modules/codemirror/addon/edit/closebrackets.js"></script>
  90     <script src="/static/node_modules/codemirror/addon/display/fullscreen.js"></script>
  91     <script src="/static/node_modules/codemirror/keymap/sublime.js"></script>
  92     <script src="/static/src/instancehandler/instance_list.js"></script>
  93     <script src="/static/src/instancehandler/instance_create.js"></script>
  94     <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
  95     <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  96
  97     <script>
  98         var table;
  99         var instance_type = '{{ type }}';
 100         var row_builder = {
 101             'ns': [
 102                 {
 103                     "render": function (data, type, row) {
 104                         return row["short-name"];
 105                     },
 106                     "targets": 0
 107                 },
 108                 {
 109                     "render": function (data, type, row) {
 110                         return row["_id"];
 111                     },
 112                     "targets": 1
 113                 },
 114                 {
 115                     "render": function (data, type, row) {
 116                         return row["nsd-name-ref"];
 117                     },
 118                     "targets": 2
 119                 },
 120                 {
 121                  //   "width": "5%",
 122                     "render": function (data, type, row) {
 123                         if(row["operational-status"] === 'failed')
 124                            return '<span class="label label-danger">'+ row["operational-status"] +'</span>';
 125                         if(row["operational-status"] === 'init')
 126                            return '<span class="label label-warning">'+ row["operational-status"] +'</span>';
 127                         if(row["operational-status"] === 'running')
 128                            return '<span class="label label-success">'+ row["operational-status"] +'</span>';
 129                         return  ''+row["operational-status"]+'';
 130                     },
 131                     "targets": 3
 132                 },
 133                 {
 134                 //    "width": "5%",
 135                     "render": function (data, type, row) {
 136                          if(row["config-status"] === 'failed')
 137                            return '<span class="label label-danger">'+ row["config-status"] +'</span>';
 138                         if(row["config-status"] === 'init')
 139                            return '<span class="label label-warning">'+ row["config-status"] +'</span>';
 140                         if(row["config-status"] === 'running')
 141                            return '<span class="label label-success">'+ row["config-status"] +'</span>';
 142                         if(row["config-status"] === 'configured')
 143                            return '<span class="label label-success">'+ row["config-status"] +'</span>';
 144                         return  ''+row["operational-status"]+'';
 145                     },
 146                     "targets": 4
 147                 },
 148                 {
 149                    // "className": "ellipsis",
 150                     "render": function (data, type, row) {
 151                         return row["detailed-status"];
 152                     },
 153                     "targets": 5
 154                 },{
 155                      "width": "20%",
 156                     "render": function (data, type, row) {
 157                           var template = '<div class="btn-group">' +
 158                             ' <button type="button" class="btn btn-default"' +
 159                             '         onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
 160                             '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
 161                             '     <i class="fa fa-info"></i>';
 162                             if (row["operational-status"] === "running") {
 163                                 template += ' <button type="button" class="btn btn-default"' +
 164                                 '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
 165                                 '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
 166                                 '     <i class="fa fa-sitemap"></i>' +
 167                                 ' </button>';
 168                             }else{
 169                                 template += ' <button type="button" disabled class="btn btn-default"' +
 170                                 '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
 171                                 '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
 172                                 '     <i class="fa fa-sitemap"></i>' +
 173                                 ' </button>';
 174                             }
 175                             template += ' <button type="button" class="btn btn-default"' +
 176                             '         onclick="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')"' +
 177                             '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i' +
 178                             '         class="far fa-trash-alt"></i></button>' +
 179                             ' <button type="button" class="btn btn-default dropdown-toggle"' +
 180                             '         data-toggle="dropdown" aria-expanded="false">Actions' +
 181                             '     <span class="fa fa-caret-down"></span></button>' +
 182                             ' <ul class="dropdown-menu">' +
 183                             '     <li><a href="#"' +
 184                             '            onclick="javascript:performAction(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">' +
 185                             '         <i class="fa fa-magic"></i> Exec NS Primitive</a></li>' +
 186                             '     <li>' +
 187                             '         <a href="/instances/ns/' +row["_id"] +'/operation">' +
 188                             '             <i class="fa fa-list"></i> History of operations</a></li>' +
 189                             '     <li class="divider"></li>' +
 190                             '     <li>' +
 191                             '         <a href="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\', true)">' +
 192                             '             <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>' +
 193                             ' </ul>' +
 194                             '</div>';
 195                           return template;
 196                     },
 197                     "targets": 5,
 198                     "orderable": false
 199                 },
 200
 201             ],
 202             'vnf': [
 203                 {
 204                     "render": function (data, type, row) {
 205                         return row["_id"];
 206                     },
 207                     "targets": 0
 208                 },
 209                 {
 210                     "render": function (data, type, row) {
 211                         return '<a href="javascript:openDescriptorView(\'vnfd\', \'' + row["vnfd-id"]+'\')"> ' + row["vnfd-ref"] +' </a>';
 212                     },
 213                     "targets": 1
 214                 },
 215                 {
 216                     "render": function (data, type, row) {
 217                         return row["member-vnf-index-ref"];
 218                     },
 219                     "targets": 2
 220                 },
 221                 {
 222                     "render": function (data, type, row) {
 223                         return row["nsr-id-ref"];
 224                     },
 225                     "targets": 3
 226                 },
 227                 {
 228                     "render": function (data, type, row) {
 229                         return moment.unix(row['created-time']).format('YYYY-MM-DD hh:mm:ss a');
 230                     },
 231                     "targets": 4
 232                 },
 233                 {
 234                     "render": function (data, type, row) {
 235                         return '<div class="btn-group">' +
 236                             '     <button type="button" class="btn btn-default"' +
 237                             '             onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
 238                             '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
 239                             '         <i class="fa fa-info"></i>' +
 240                             '     </button>' +
 241                             ' </div>';
 242                     },
 243                     "targets": 5,
 244                     "orderable": false
 245                 },
 246             ],
 247             'pdu': [
 248             {
 249                     "render": function (data, type, row) {
 250                         return row["_id"];
 251                     },
 252                     "targets": 0
 253                 },
 254                 {
 255                     "render": function (data, type, row) {
 256                         return row["name"];
 257                     },
 258                     "targets": 1
 259                 },
 260                 {
 261                     "render": function (data, type, row) {
 262                         return row["type"];
 263                     },
 264                     "targets": 2
 265                 },
 266                 {
 267                     "render": function (data, type, row) {
 268                         return row['_admin']['usageState'];
 269                     },
 270                     "targets": 3
 271                 },
 272                 {
 273                     "render": function (data, type, row) {
 274                         return moment.unix(row['_admin']['created']).format('YYYY-MM-DD hh:mm:ss a');
 275                     },
 276                     "targets": 4
 277                 },
 278                 {
 279                     "render": function (data, type, row) {
 280                         return '<div class="btn-group">' +
 281                             '     <button type="button" class="btn btn-default"' +
 282                             '             onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
 283                             '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
 284                             '         <i class="fa fa-info"></i>' +
 285                             '     </button>' +
 286                             '<button type="button" class="btn btn-default"' +
 287                             '         onclick="javascript:deletePDU(\''+ row["name"] +'\', \''+row["_id"]+'\')"' +
 288                             '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i' +
 289                             '         class="far fa-trash-alt"></i></button>'+
 290                             ' </div>';
 291                     },
 292                     "targets": 5,
 293                     "orderable": false
 294                 }
 295             ],
 296             'nsi': [
 297                 {
 298                     "render": function (data, type, row) {
 299                         return row["name"];
 300                     },
 301                     "targets": 0
 302                 },
 303                 {
 304                     "render": function (data, type, row) {
 305                         return row["_id"];
 306                     },
 307                     "targets": 1
 308                 },
 309                 {
 310                     "render": function (data, type, row) {
 311                         return row["nst-ref"];
 312                     },
 313                     "targets": 2
 314                 },
 315                 {
 316                  //   "width": "5%",
 317                     "render": function (data, type, row) {
 318                         if(row["operational-status"] === 'failed')
 319                            return '<span class="label label-danger">'+ row["operational-status"] +'</span>';
 320                         if(row["operational-status"] === 'init')
 321                            return '<span class="label label-warning">'+ row["operational-status"] +'</span>';
 322                         if(row["operational-status"] === 'running')
 323                            return '<span class="label label-success">'+ row["operational-status"] +'</span>';
 324                         return  ''+row["operational-status"]+'';
 325                     },
 326                     "targets": 3
 327                 },
 328                 {
 329                 //    "width": "5%",
 330                     "render": function (data, type, row) {
 331                          if(row["config-status"] === 'failed')
 332                            return '<span class="label label-danger">'+ row["config-status"] +'</span>';
 333                         if(row["config-status"] === 'init')
 334                            return '<span class="label label-warning">'+ row["config-status"] +'</span>';
 335                         if(row["config-status"] === 'running')
 336                            return '<span class="label label-success">'+ row["config-status"] +'</span>';
 337                         if(row["config-status"] === 'configured')
 338                            return '<span class="label label-success">'+ row["config-status"] +'</span>';
 339                         return  ''+row["operational-status"]+'';
 340                     },
 341                     "targets": 4
 342                 },
 343                 {
 344                    // "className": "ellipsis",
 345                     "render": function (data, type, row) {
 346                         return row["detailed-status"];
 347                     },
 348                     "targets": 5
 349                 },{
 350                      "width": "20%",
 351                     "render": function (data, type, row) {
 352                           var template = '<div class="btn-group">' +
 353                             ' <button type="button" class="btn btn-default"' +
 354                             '         onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
 355                             '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
 356                             '     <i class="fa fa-info"></i>';
 357                             /* if (row["operational-status"] === "running") {
 358                                 template += ' <button type="button" class="btn btn-default"' +
 359                                 '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
 360                                 '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
 361                                 '     <i class="fa fa-sitemap"></i>' +
 362                                 ' </button>';
 363                             }else{
 364                                 template += ' <button type="button" disabled class="btn btn-default"' +
 365                                 '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
 366                                 '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
 367                                 '     <i class="fa fa-sitemap"></i>' +
 368                                 ' </button>';
 369                             } */
 370                             template += ' <button type="button" class="btn btn-default"' +
 371                             '         onclick="javascript:deleteNsi(\''+ row["name"] +'\', \''+row["_id"]+'\')"' +
 372                             '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i' +
 373                             '         class="far fa-trash-alt"></i></button>' +
 374                             ' <button type="button" class="btn btn-default dropdown-toggle"' +
 375                             '         data-toggle="dropdown" aria-expanded="false">Actions' +
 376                             '     <span class="fa fa-caret-down"></span></button>' +
 377                             ' <ul class="dropdown-menu">' +
 378                             '     <li>' +
 379                             '         <a href="/instances/nsi/' +row["_id"] +'/operation">' +
 380                             '             <i class="fa fa-list"></i> History of operations</a></li>' +
 381                             '     <li class="divider"></li>' +
 382
 383                             '     <li>' +
 384                             '         <a href="javascript:deleteNsi(\''+ row["name"] +'\', \''+row["_id"]+'\', true)">' +
 385                             '             <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>' +
 386                             ' </ul>' +
 387                             '</div>';
 388                           return template;
 389                     },
 390                     "targets": 5,
 391                     "orderable": false
 392                 },
 393
 394             ]
 395         };
 396         $(document).ready(function () {
 397             table = $('#instances_table').DataTable({
 398                 responsive: true,
 399                 "ajax": {
 400                     "url": "/instances/" + instance_type + "/list/",
 401                     "dataSrc": function (json) {
 402                         return json.instances;
 403                     },
 404                     statusCode: {
 405                         401: function(){
 406                             console.log("no auth");
 407                             moveToLogin(window.location.pathname);
 408                         }
 409                     },
 410                     "error": function(hxr, error, thrown){
 411                         console.log(error);
 412                     }
 413
 414                 },
 415                 "columns": row_builder[instance_type]
 416             });
 417
 418
 419             setInterval(function () {
 420                 table.ajax.reload();
 421             }, 10000);
 422
 423
 424         });
 425
 426     </script>
 427
 428 {% endblock %}
 429
 430 {% block footer %}
 431     {% include "footer.html" %}
 432 {% endblock %}