packagehandler/template/package_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 "project_descriptors.html" %}
  18 {% load staticfiles %}
  19
  20
  21 {% block head_block %}
  22         {{ block.super }}
  23 <link rel="stylesheet" href="/static/node_modules/select2/dist/css/select2.min.css">
  24 {% endblock %}
  25
  26 {% block title_header_big %}
  27     {{ block.super }}
  28   {% if package_type  %}
  29      {{ package_type|upper }}
  30   {% else%}
  31     Undefined
  32   {% endif %} Packages
  33 {% endblock %}
  34
  35 {% block left_sidebar %}
  36     {% include 'osm/osm_project_left_sidebar.html' %}
  37 {% endblock %}
  38
  39 {% block breadcrumb_body %}
  40         {{ block.super }}
  41     <li><a href="{% url 'projects:open_project' %}">{{project_name}}</a></li>
  42     <li><a> {% if package_type  %}
  43      {{ package_type }}
  44   {% else%}
  45     Undefined
  46   {% endif %} Packages</a></li>
  47
  48 {% endblock %}
  49
  50 {% block content_body %}
  51         {{ block.super }}
  52 {% include 'osm/modal/files_list.html' %}
  53 {% include 'modal/instance_create.html' %}
  54 {% include 'modal/choose_package_name.html' %}
  55 <div class="row">
  56     {% if package_type == 'ns' %}
  57         {% include "package_list_ns.html" %}
  58     {% elif package_type == 'vnf' %}
  59         {% include "package_list_vnf.html" %}
  60     {% endif %}
  61
  62 </div>
  63 {% endblock %}
  64
  65
  66 {% block resource_block %}
  67         {{ block.super }}
  68      <script src="/static/node_modules/select2/dist/js/select2.js"></script>
  69     <script src="/static/src/instancehandler/instance_create.js"></script>
  70     <script src="/static/src/packagehandler/packages_list.js"></script>
  71     <script src="/static/src/drop_zone.js"></script>
  72     <script src="/static/src/packagehandler/onboard_package.js"></script>
  73
  74     <script>
  75     var csrf_token = '{{csrf_token}}';
  76     var descr_list_url = '{% url "packages:list_packages"   package_type=package_type%}';
  77     var new_desc_url = '{% url "packages:onboard_package"   package_type=package_type%}'
  78     var vim_list_url = '{% url "vims:list"  %}';
  79     var package_type = '{{ package_type | safe }}';
  80     var project_id = '{{ project_id }}';
  81     var table;
  82     var row_builder = {
  83         'ns': [
  84                 {
  85                     "render": function (data, type, row) {
  86                        return row['short-name'] || '';
  87                     },
  88                     "targets": 0
  89                 },
  90                 {
  91                     "render": function (data, type, row) {
  92                        return row['_id'];
  93                     },
  94                     "targets": 1
  95                 },
  96                 {
  97                     "render": function (data, type, row) {
  98                        return row['description'] || '';
  99                     },
 100                     "targets": 2
 101                 },
 102                 {
 103                     "render": function (data, type, row) {
 104                        return row['vendor'] || '';
 105                     },
 106                     "targets": 3
 107                 },
 108                 {
 109                     "render": function (data, type, row) {
 110                        return row['version'] || '';
 111                     },
 112                     "targets": 4
 113                 },
 114                 {
 115                     "render": function (data, type, row) {
 116                        var result = '<div class="btn-group">\n' ;
 117
 118                            result += '    <button type="button" class="btn btn-default" data-container="body"\n' +
 119                                'data-toggle="tooltip" data-placement="top" title="Instantiate NS"\n' +
 120                                'onclick="javascript:openModalCreateNS({ \'project_id\':\'' + project_id +'\', \'package_type\': \''+ package_type +'\', \'descriptor_name\':\''+row["name"]+'\', \'descriptor_id\':\''+row["_id"]+'\',\'vim_list_url\': \''+vim_list_url+'\',  \'nsd_list_url\': \''+descr_list_url+'\' })">\n' +
 121                                '<i class="fa fa-paper-plane"></i></button>\n';
 122                         result += '<button type="button" class="btn btn-default" data-container="body"\n' +
 123                            '        data-toggle="tooltip" data-placement="top" title="Edit"\n' +
 124                            '        onclick="javascript:openDescriptorView(\'nsd\', \''+row["_id"]+'\')">\n' +
 125                            '    <i class="fa fa-edit"></i></button>\n' +
 126                            '<button type="button" class="btn btn-default" data-container="body"\n' +
 127                            '        data-toggle="tooltip" data-placement="top" title="Show content"\n' +
 128                            '        onclick="javascript:openPackageContentList(\''+ package_type +'\', \''+row["_id"]+'\')">\n' +
 129                            '    <i class="fa fa-folder-open"></i></button>\n' +
 130                             '<button type="button" class="btn btn-default" data-container="body"\n' +
 131                            '        data-toggle="tooltip" data-placement="top" title="Clone"\n' +
 132                            '        onclick="javascript:clonePackage(\''+ package_type +'\', \''+row["_id"]+'\')">\n' +
 133                            '    <i class="fa fa-clone"></i></button>\n';
 134                            result += '<button type="button" class="btn btn-default" data-container="body"\n' +
 135                            '        data-toggle="tooltip" data-placement="top" title="Show Graph"\n' +
 136                            '  onclick="location.href=\'/projects/descriptors/composer?type=nsd&id='+row["_id"] +'\'"\n' +
 137                            '        ><i class="fa fa-sitemap fa-fw"></i></button>\n';
 138                         result +=
 139                            '<button type="button" class="btn btn-default" data-container="body"\n' +
 140                            '        data-toggle="tooltip" data-placement="top" title="Download package"\n' +
 141                            '        onclick="location.href=\'/packages/'+package_type+'/'+ row["_id"] +'/download\'">\n' +
 142                            '    <i class="fa fa-download fa-fw"></i></button>\n' +
 143                            '<button type="button" class="btn btn-default" data-container="body"\n' +
 144                            '        data-toggle="tooltip" data-placement="top" title="Delete"\n' +
 145                            '        onclick="javascript:deletePackage( \'' + package_type + '\', \''+row["_id"] + '\', \''+row["name"] + '\')">\n' +
 146                            '    <i class="far fa-trash-alt"></i></button>\n' +
 147                            '</div>';
 148
 149                                return result
 150                     },
 151                     "targets": 5,
 152                     "orderable": false
 153                 }],
 154         'vnf': [
 155                 {
 156                     "render": function (data, type, row) {
 157                        return row['short-name'] || '';
 158                     },
 159                     "targets": 0
 160                 },
 161                 {
 162                     "render": function (data, type, row) {
 163                        return row['_id'];
 164                     },
 165                     "targets": 1
 166                 },
 167                 {
 168                     "render": function (data, type, row) {
 169                        return row['_admin']['type'] || '';
 170                     },
 171                     "targets": 2,
 172                     "orderable": false
 173                 },
 174                 {
 175                     "render": function (data, type, row) {
 176                        return row['description'] || '';
 177                     },
 178                     "targets": 3
 179                 },
 180                 {
 181                     "render": function (data, type, row) {
 182                        return row['vendor'] || '';
 183                     },
 184                     "targets": 4
 185                 },
 186                 {
 187                     "render": function (data, type, row) {
 188                        return row['version'] || '';
 189                     },
 190                     "targets": 5
 191                 },
 192                 {
 193                     "render": function (data, type, row) {
 194                        var result = '<div class="btn-group">\n' ;
 195                         result += '<button type="button" class="btn btn-default" data-container="body"\n' +
 196                            '        data-toggle="tooltip" data-placement="top" title="Edit"\n' +
 197                            '        onclick="javascript:openDescriptorView(\'vnfd\', \''+row["_id"]+'\')">\n' +
 198                            '    <i class="fa fa-edit"></i></button>\n' +
 199                            '<button type="button" class="btn btn-default" data-container="body"\n' +
 200                            '        data-toggle="tooltip" data-placement="top" title="Show content"\n' +
 201                            '        onclick="javascript:openPackageContentList(\''+ package_type +'\', \''+row["_id"]+'\')">\n' +
 202                            '    <i class="fa fa-folder-open"></i></button>\n' +
 203                             '<button type="button" class="btn btn-default" data-container="body"\n' +
 204                            '        data-toggle="tooltip" data-placement="top" title="Clone"\n' +
 205                            '        onclick="javascript:clonePackage(\''+ package_type +'\', \''+row["_id"]+'\')">\n' +
 206                            '    <i class="fa fa-clone"></i></button>\n';
 207                            result += '<button type="button" class="btn btn-default" data-container="body"\n' +
 208                            '        data-toggle="tooltip" data-placement="top" title="Show Graph"\n' +
 209                            '  onclick="location.href=\'/projects/descriptors/composer?type=vnfd&id='+row["_id"] +'\'"\n' +
 210                            '        ><i class="fa fa-sitemap fa-fw"></i></button>\n';
 211                         result +=
 212                            '<button type="button" class="btn btn-default" data-container="body"\n' +
 213                            '        data-toggle="tooltip" data-placement="top" title="Download package"\n' +
 214                            '        onclick="location.href=\'/packages/'+package_type+'/'+ row["_id"] +'/download\'">\n' +
 215                            '    <i class="fa fa-download fa-fw"></i></button>\n' +
 216                            '<button type="button" class="btn btn-default" data-container="body"\n' +
 217                            '        data-toggle="tooltip" data-placement="top" title="Delete"\n' +
 218                            '        onclick="javascript:deletePackage( \'' + package_type + '\', \''+row["_id"] + '\', \''+row["name"] + '\')">\n' +
 219                            '    <i class="far fa-trash-alt"></i></button>\n' +
 220                            '</div>';
 221
 222                                return result
 223                     },
 224                     "targets": 6,
 225                     "orderable": false
 226                 }
 227             ]
 228     };
 229     function refreshTable() {
 230         var type_vnf = $('#type_vnf').val()
 231         var url = (type_vnf && type_vnf !== '') ? ("/packages/" +package_type+"/list?type="+type_vnf) : ("/packages/" +package_type+"/list")
 232         table.ajax.url(url);
 233         table.ajax.reload();
 234     }
 235
 236     $(document).ready( function () {
 237         table = $('#descriptors_table').DataTable({
 238             responsive: true,
 239             "ajax": {
 240                 "url": "/packages/" +package_type+"/list",
 241                 "dataSrc": function (json) {
 242                     return json['descriptors'];
 243                 },
 244                 statusCode: {
 245                     401: function () {
 246                         console.log("no auth");
 247                         moveToLogin(window.location.pathname);
 248                     }
 249                 },
 250                 "error": function (hxr, error, thrown) {
 251
 252                 }
 253
 254             },
 255             "columns": row_builder[package_type]
 256
 257         });
 258
 259         setInterval(refreshTable, 10000);
 260
 261
 262         $("#formCreatePackage").submit(function (event) {
 263                 event.preventDefault(); //prevent default action
 264                 var post_url = $(this).attr("action"); //get form action url
 265                 var request_method = $(this).attr("method");
 266                 var form_data = new FormData(this); //Encode form elements for submission
 267
 268                 $.ajax({
 269                     url: post_url,
 270                     type: request_method,
 271                     data: form_data,
 272                     headers: {
 273                         "Accept": 'application/json'
 274                     },
 275                     contentType: false,
 276                     processData: false
 277                 }).done(function (response, textStatus, jqXHR) {
 278                     var map = {
 279                         ns: 'nsd',
 280                         vnf: 'vnfd'
 281                     };
 282                     location.href='/projects/descriptors/composer?type=' + map[response['data']['type']]+'&id=' + response['data']['id'];
 283                 }).fail(function (result) {
 284                     var data = result.responseJSON;
 285                     var title = "Error " + (data.code ? data.code : 'unknown');
 286                     var message = data.detail ? data.detail : 'No detail available.';
 287                     bootbox.alert({
 288                         title: title,
 289                         message: message
 290                     });
 291                 });
 292             });
 293     });
 294
 295     $(document).on('change', '#type_vnf', function(){
 296         refreshTable();
 297     });
 298     </script>
 299
 300
 301 {% endblock %}
 302
 303 {% block footer %}
 304     {% include "footer.html"  %}
 305 {% endblock %}