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