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