netslicehandler/template/nst_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 {% block head_block %}
  23 {{ block.super }}
  24 <link rel="stylesheet" href="/static/node_modules/codemirror/lib/codemirror.css">
  25 <link rel="stylesheet" href="/static/node_modules/codemirror/addon/fold/foldgutter.css" />
  26 <link rel="stylesheet" href="/static/node_modules/codemirror/theme/neat.css">
  27 <link rel="stylesheet" href="/static/node_modules/codemirror/addon/dialog/dialog.css">
  28 <link rel="stylesheet" href="/static/node_modules/codemirror/addon/display/fullscreen.css">
  29 <link rel="stylesheet" href="/static/node_modules/select2/dist/css/select2.min.css">
  30 <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
  31 {% endblock %}
  32 {% block title_header_big %}
  33 {{ block.super }}
  34 Network Slices Templates
  35 {% endblock %}
  36 {% block left_sidebar %}
  37
  38 {% include 'osm/osm_project_left_sidebar.html' %}
  39
  40 {% endblock %}
  41
  42
  43 {% block breadcrumb_body %}
  44 {{ block.super }}
  45 <li><a href="{% url "netslices:list_templates" %}">NetSlice Templates</a></li>
  46 {% endblock %}
  47
  48 {% block content_body %}
  49 {{ block.super }}
  50 {% include 'modal/nst_details.html' %}
  51 {% include 'modal/instance_create_nsi.html' %}
  52 {% csrf_token %}
  53 <div class="row">
  54     <div class="col-md-12">
  55
  56         <div class="box">
  57             <div class="box-header with-border">
  58                 <h3 class="box-title"></h3>
  59                 <div class="box-tools"></div>
  60             </div>
  61             <div class="box-body">
  62                 <table id="templates_table" class="table table-bordered table-striped dataTable" role="grid">
  63                     <thead>
  64                         <tr role="row">
  65                             <th>Name</th>
  66                             <th>Identifier</th>
  67                             <th>Usage State</th>
  68                             <th>Actions</th>
  69                         </tr>
  70                     </thead>
  71                     <tbody>
  72
  73                     </tbody>
  74
  75                 </table>
  76             </div>
  77         </div>
  78     </div>
  79 </div>
  80 <div class="row">
  81     <div class="col-sm-12">
  82         <div class="box box-solid">
  83             <div class="box-body">
  84
  85                 <div class="upload-drop-zone" id="drop-zone">
  86                     <i class="fa fa-upload"></i> Just drag and drop files here
  87                 </div>
  88             </div>
  89         </div>
  90     </div>
  91 </div>
  92
  93 {% endblock %}
  94
  95 {% block resource_block %}
  96 {{ block.super }}
  97 <script src="/static/node_modules/select2/dist/js/select2.js"></script>
  98 <script src="/static/node_modules/codemirror/lib/codemirror.js"></script>
  99 <script src="/static/node_modules/codemirror/addon/fold/foldcode.js"></script>
 100 <script src="/static/node_modules/codemirror/addon/fold/foldgutter.js"></script>
 101 <script src="/static/node_modules/codemirror/addon/fold/brace-fold.js"></script>
 102 <script src="/static/node_modules/codemirror/mode/javascript/javascript.js"></script>
 103 <script src="/static/node_modules/codemirror/addon/search/searchcursor.js"></script>
 104 <script src="/static/node_modules/codemirror/addon/search/search.js"></script>
 105 <script src="/static/node_modules/codemirror/addon/dialog/dialog.js"></script>
 106 <script src="/static/node_modules/codemirror/addon/display/autorefresh.js"></script>
 107 <script src="/static/node_modules/codemirror/addon/edit/matchbrackets.js"></script>
 108 <script src="/static/node_modules/codemirror/addon/edit/closebrackets.js"></script>
 109 <script src="/static/node_modules/codemirror/addon/display/fullscreen.js"></script>
 110 <script src="/static/node_modules/codemirror/keymap/sublime.js"></script>
 111 <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
 112 <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
 113 <script src="/static/src/drop_zone.js"></script>
 114 <script src="/static/src/netslicehandler/onboard_template.js"></script>
 115 <script src="/static/src/netslicehandler/templates_list.js"></script>
 116 <script src="/static/src/instancehandler/instance_create.js"></script>
 117 <script>
 118     var csrf_token = '{{csrf_token}}';
 119     var table;
 120
 121     var editorJSON;
 122
 123
 124
 125     $(document).ready(function () {
 126         table = $('#templates_table').DataTable({
 127             responsive: true,
 128             "ajax": {
 129                 "url": "netslices/templates/list",
 130                 "dataSrc": function (json) {
 131                     return json['templates'];
 132                 },
 133                 statusCode: {
 134                     401: function () {
 135                         console.log("no auth");
 136                         moveToLogin(window.location.pathname);
 137                     }
 138                 },
 139                 "error": function (hxr, error, thrown) {
 140                     console.log(hxr)
 141                     console.log(thrown)
 142                     console.log(error);
 143                 }
 144
 145             },
 146             "columns": [
 147                 {
 148                     "render": function (data, type, row) {
 149                         return row['name'] || '';
 150                     },
 151                     "targets": 0
 152                 },
 153                 {
 154                     "render": function (data, type, row) {
 155                         return row['_id'];
 156                     },
 157                     "targets": 1
 158                 },
 159                 {
 160                     "render": function (data, type, row) {
 161                         return row['_admin']['usageState'];
 162                     },
 163                     "targets": 2
 164                 },
 165                 {
 166                     "render": function (data, type, row) {
 167                         return '<div class="btn-group">' +
 168                             '   <button type="button" class="btn btn-default" data-container="body"\n' +
 169                             '   data-toggle="tooltip" data-placement="top" title="Instantiate NS"\n' +
 170                             '   onclick="javascript:openModalCreateNSI({\'template_name\':\''+row["name"]+'\', \'template_id\':\''+row["_id"]+'\', \'project_id\':\'{{ project_id }}\',\'vim_list_url\': \'{% url "vims:list"  %}\', \'nst_list_url\': \'{% url "netslices:list_templates" %}\'})">\n' +
 171                             '   <i class="fa fa-paper-plane"></i></button>\n'+
 172                             '     <button type="button" class="btn btn-default"' +
 173                             '             onclick="javascript:showNstDetails(\'' + row["_id"] + '\')"' +
 174                             '             data-toggle="tooltip" data-placement="top" data-container="body" title="Open">' +
 175                             '         <i class="fa fa-info"></i>' +
 176                             '     </button>' +
 177                             '     <button type="button" class="btn btn-default"' +
 178                             '             onclick="window.location.href=\'/netslices/templates/'+row["_id"]+'/edit\'"' +
 179                             '             data-toggle="tooltip" data-placement="top" data-container="body" title="Edit">' +
 180                             '         <i class="fa fa-edit"></i>' +
 181                             '     </button>' +
 182                             '<button type="button" class="btn btn-default"' +
 183                             '         onclick="javascript:deleteTemplate(\'' + row["name"] + '\', \'' + row["_id"] + '\')"' +
 184                             '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i' +
 185                             '         class="far fa-trash-alt"></i></button>' +
 186                             ' </div>';
 187                     },
 188                     "targets": 3,
 189                     "orderable": false
 190                 }
 191             ]
 192         });
 193
 194         setInterval(function () {
 195             refreshTable();
 196         }, 10000);
 197
 198         var json_editor_settings = {
 199             mode: "javascript",
 200             showCursorWhenSelecting: true,
 201             autofocus: true,
 202             lineNumbers: true,
 203             lineWrapping: true,
 204             foldGutter: true,
 205             gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
 206             autoCloseBrackets: true,
 207             matchBrackets: true,
 208             extraKeys: {
 209                 "F11": function (cm) {
 210                     cm.setOption("fullScreen", !cm.getOption("fullScreen"));
 211                 },
 212                 "Esc": function (cm) {
 213                     if (cm.getOption("fullScreen")) cm.setOption("fullScreen", false);
 214                 },
 215                 "Ctrl-Q": function (cm) {
 216                     cm.foldCode(cm.getCursor());
 217                 }
 218             },
 219             theme: "neat",
 220             keyMap: "sublime"
 221         };
 222         var myJsonTextArea = document.getElementById("nst_view_json");
 223         editorJSON = CodeMirror(function (elt) {
 224             myJsonTextArea.parentNode.replaceChild(elt, myJsonTextArea);
 225         }, json_editor_settings);
 226     });
 227
 228     function refreshTable() {
 229         table.ajax.reload();
 230     }
 231 </script>
 232
 233 {% endblock %}