instancehandler/template/instance_list.html

<!--
Copyright 2019 EveryUP srl

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an  BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

{% extends "base.html" %}
{% load get %}
{% load staticfiles %}



{% block head_block %}
    {{ block.super }}
    <!-- Codemirror core CSS -->
    <link rel="stylesheet" href="/static/node_modules/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="/static/node_modules/codemirror/addon/fold/foldgutter.css" />
    <link rel="stylesheet" href="/static/node_modules/codemirror/theme/neat.css">
    <link rel="stylesheet" href="/static/node_modules/codemirror/addon/dialog/dialog.css">
    <link rel="stylesheet" href="/static/node_modules/codemirror/addon/display/fullscreen.css">
    <link rel="stylesheet" href="/static/node_modules/select2/dist/css/select2.min.css">
    <link rel="stylesheet" href="/static/css/lwuitable.css">
    <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
{% endblock %}
{% block title_header_big %}
    {{ block.super }}
{% endblock %}
{% block left_sidebar %}
    {% include 'osm/osm_project_left_sidebar.html' %}
{% endblock %}


{% block breadcrumb_body %}
    {{ block.super }}
    <li><a href="{% url 'instances:list'  type=type %}">{{ type|upper }} Instances</a></li>
{% endblock %}

{% block content_body %}
    {{ block.super }}
    {% include 'modal/instance_create.html' %}
    {% csrf_token %}
    <div class="row">
        <div class="col-md-12">

            {% if type == 'ns' %}
                {% include 'instance_list_ns.html' %}
            {% elif type == 'vnf' %}
                {% include 'instance_list_vnf.html' %}
            {% elif type == 'pdu' %}
                {% include 'instance_list_pdu.html' %}
            {% elif type == 'nsi' %}
                {% include 'instance_list_nsi.html' %}
            {% endif %}

        </div>

    </div>
    {% include 'modal/instance_create.html' %}
    {% include 'modal/instance_create_pdu.html' %}
    {% include 'modal/instance_create_nsi.html' %}
    {% include 'modal/instance_show.html' %}
    {% include 'modal/instance_new_action.html' %}
{% endblock %}

{% block resource_block %}
    {{ block.super }}
    <!-- Utility JS -->
    <script src="/static/node_modules/select2/dist/js/select2.js"></script>
    <script src="/static/node_modules/codemirror/lib/codemirror.js"></script>
    <script src="/static/node_modules/codemirror/addon/fold/foldcode.js"></script>
    <script src="/static/node_modules/codemirror/addon/fold/foldgutter.js"></script>
    <script src="/static/node_modules/codemirror/addon/fold/brace-fold.js"></script>
    <script src="/static/node_modules/codemirror/mode/javascript/javascript.js"></script>
    <script src="/static/node_modules/codemirror/addon/search/searchcursor.js"></script>
    <script src="/static/node_modules/codemirror/addon/search/search.js"></script>
    <script src="/static/node_modules/codemirror/addon/dialog/dialog.js"></script>
    <script src="/static/node_modules/codemirror/addon/display/autorefresh.js"></script>
    <script src="/static/node_modules/codemirror/addon/edit/matchbrackets.js"></script>
    <script src="/static/node_modules/codemirror/addon/edit/closebrackets.js"></script>
    <script src="/static/node_modules/codemirror/addon/display/fullscreen.js"></script>
    <script src="/static/node_modules/codemirror/keymap/sublime.js"></script>
    <script src="/static/src/instancehandler/instance_list.js"></script>
    <script src="/static/src/instancehandler/instance_create.js"></script>
    <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

    <script>
        var table;
        var instance_type = '{{ type }}';
        var row_builder = {
            'ns': [
                {
                    "render": function (data, type, row) {
                        return row["short-name"];
                    },
                    "targets": 0
                },
                {
                    "render": function (data, type, row) {
                        return row["_id"];
                    },
                    "targets": 1
                },
                {
                    "render": function (data, type, row) {
                        return row["nsd-name-ref"];
                    },
                    "targets": 2
                },
                {
                 //   "width": "5%",
                    "render": function (data, type, row) {
                        if(row["operational-status"] === 'failed')
                           return '<span class="label label-danger">'+ row["operational-status"] +'</span>';
                        if(row["operational-status"] === 'init')
                           return '<span class="label label-warning">'+ row["operational-status"] +'</span>';
                        if(row["operational-status"] === 'running')
                           return '<span class="label label-success">'+ row["operational-status"] +'</span>';
                        return  ''+row["operational-status"]+'';
                    },
                    "targets": 3
                },
                {
                //    "width": "5%",
                    "render": function (data, type, row) {
                         if(row["config-status"] === 'failed')
                           return '<span class="label label-danger">'+ row["config-status"] +'</span>';
                        if(row["config-status"] === 'init')
                           return '<span class="label label-warning">'+ row["config-status"] +'</span>';
                        if(row["config-status"] === 'running')
                           return '<span class="label label-success">'+ row["config-status"] +'</span>';
                        if(row["config-status"] === 'configured')
                           return '<span class="label label-success">'+ row["config-status"] +'</span>';
                        return  ''+row["operational-status"]+'';
                    },
                    "targets": 4
                },
                {
                   // "className": "ellipsis",
                    "render": function (data, type, row) {
                        return row["detailed-status"];
                    },
                    "targets": 5
                },{
                     "width": "20%",
                    "render": function (data, type, row) {
                          var template = '<div class="btn-group">' +
                            ' <button type="button" class="btn btn-default"' +
                            '         onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
                            '     <i class="fa fa-info"></i>';
                            if (row["operational-status"] === "running") {
                                template += ' <button type="button" class="btn btn-default"' +
                                '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
                                '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
                                '     <i class="fa fa-sitemap"></i>' +
                                ' </button>';
                            }else{
                                template += ' <button type="button" disabled class="btn btn-default"' +
                                '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
                                '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
                                '     <i class="fa fa-sitemap"></i>' +
                                ' </button>';
                            }
                            template += ' <button type="button" class="btn btn-default"' +
                            '         onclick="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')"' +
                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i' +
                            '         class="far fa-trash-alt"></i></button>' +
                            ' <button type="button" class="btn btn-default dropdown-toggle"' +
                            '         data-toggle="dropdown" aria-expanded="false">Actions' +
                            '     <span class="fa fa-caret-down"></span></button>' +
                            ' <ul class="dropdown-menu">' +
                            '     <li><a href="#"' +
                            '            onclick="javascript:performAction(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">' +
                            '         <i class="fa fa-magic"></i> Exec NS Primitive</a></li>' +
                            '     <li>' +
                            '         <a href="/instances/ns/' +row["_id"] +'/operation">' +
                            '             <i class="fa fa-list"></i> History of operations</a></li>' +
                            '     <li class="divider"></li>' +
                            '     <li>' +
                            '         <a href="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\', true)">' +
                            '             <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>' +
                            ' </ul>' +
                            '</div>';
                          return template;
                    },
                    "targets": 5,
                    "orderable": false
                },

            ],
            'vnf': [ 
                {
                    "render": function (data, type, row) {
                        return row["_id"];
                    },
                    "targets": 0
                },
                {
                    "render": function (data, type, row) {
                        return '<a href="javascript:openDescriptorView(\'vnfd\', \'' + row["vnfd-id"]+'\')"> ' + row["vnfd-ref"] +' </a>';
                    },
                    "targets": 1
                },
                {
                    "render": function (data, type, row) {
                        return row["member-vnf-index-ref"];
                    },
                    "targets": 2
                },
                {
                    "render": function (data, type, row) {
                        return row["nsr-id-ref"];
                    },
                    "targets": 3
                },
                {
                    "render": function (data, type, row) {
                        return moment.unix(row['created-time']).format('YYYY-MM-DD hh:mm:ss a');
                    },
                    "targets": 4
                }, 
                {
                    "render": function (data, type, row) {
                        return '<div class="btn-group">' +
                            '     <button type="button" class="btn btn-default"' +
                            '             onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
                            '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
                            '         <i class="fa fa-info"></i>' +
                            '     </button>' +
                            ' </div>';
                    },
                    "targets": 5,
                    "orderable": false
                },
            ],
            'pdu': [
            {
                    "render": function (data, type, row) {
                        return row["_id"];
                    },
                    "targets": 0
                },
                {
                    "render": function (data, type, row) {
                        return row["name"];
                    },
                    "targets": 1
                },
                {
                    "render": function (data, type, row) {
                        return row["type"];
                    },
                    "targets": 2
                },
                {
                    "render": function (data, type, row) {
                        return row['_admin']['usageState'];
                    },
                    "targets": 3
                },
                {
                    "render": function (data, type, row) {
                        return moment.unix(row['_admin']['created']).format('YYYY-MM-DD hh:mm:ss a');
                    },
                    "targets": 4
                }, 
                {
                    "render": function (data, type, row) {
                        return '<div class="btn-group">' +
                            '     <button type="button" class="btn btn-default"' +
                            '             onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
                            '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
                            '         <i class="fa fa-info"></i>' +
                            '     </button>' +
                            '<button type="button" class="btn btn-default"' +
                            '         onclick="javascript:deletePDU(\''+ row["name"] +'\', \''+row["_id"]+'\')"' +
                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i' +
                            '         class="far fa-trash-alt"></i></button>'+
                            ' </div>';
                    },
                    "targets": 5,
                    "orderable": false
                }
            ],
            'nsi': [
                {
                    "render": function (data, type, row) {
                        return row["name"];
                    },
                    "targets": 0
                },
                {
                    "render": function (data, type, row) {
                        return row["_id"];
                    },
                    "targets": 1
                },
                {
                    "render": function (data, type, row) {
                        return row["nst-ref"];
                    },
                    "targets": 2
                },
                {
                 //   "width": "5%",
                    "render": function (data, type, row) {
                        if(row["operational-status"] === 'failed')
                           return '<span class="label label-danger">'+ row["operational-status"] +'</span>';
                        if(row["operational-status"] === 'init')
                           return '<span class="label label-warning">'+ row["operational-status"] +'</span>';
                        if(row["operational-status"] === 'running')
                           return '<span class="label label-success">'+ row["operational-status"] +'</span>';
                        return  ''+row["operational-status"]+'';
                    },
                    "targets": 3
                },
                {
                //    "width": "5%",
                    "render": function (data, type, row) {
                         if(row["config-status"] === 'failed')
                           return '<span class="label label-danger">'+ row["config-status"] +'</span>';
                        if(row["config-status"] === 'init')
                           return '<span class="label label-warning">'+ row["config-status"] +'</span>';
                        if(row["config-status"] === 'running')
                           return '<span class="label label-success">'+ row["config-status"] +'</span>';
                        if(row["config-status"] === 'configured')
                           return '<span class="label label-success">'+ row["config-status"] +'</span>';
                        return  ''+row["operational-status"]+'';
                    },
                    "targets": 4
                },
                {
                   // "className": "ellipsis",
                    "render": function (data, type, row) {
                        return row["detailed-status"];
                    },
                    "targets": 5
                },{
                     "width": "20%",
                    "render": function (data, type, row) {
                          var template = '<div class="btn-group">' +
                            ' <button type="button" class="btn btn-default"' +
                            '         onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"' +
                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">' +
                            '     <i class="fa fa-info"></i>';
                            /* if (row["operational-status"] === "running") {
                                template += ' <button type="button" class="btn btn-default"' +
                                '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
                                '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
                                '     <i class="fa fa-sitemap"></i>' +
                                ' </button>';
                            }else{
                                template += ' <button type="button" disabled class="btn btn-default"' +
                                '         onclick="javascript:showTopology(\'' + instance_type + '\', \'' + row["_id"] + '\')"' +
                                '         data-toggle="tooltip" data-placement="top" data-container="body" title="Show Graph">' +
                                '     <i class="fa fa-sitemap"></i>' +
                                ' </button>';
                            } */
                            template += ' <button type="button" class="btn btn-default"' +
                            '         onclick="javascript:deleteNsi(\''+ row["name"] +'\', \''+row["_id"]+'\')"' +
                            '         data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i' +
                            '         class="far fa-trash-alt"></i></button>' +
                            ' <button type="button" class="btn btn-default dropdown-toggle"' +
                            '         data-toggle="dropdown" aria-expanded="false">Actions' +
                            '     <span class="fa fa-caret-down"></span></button>' +
                            ' <ul class="dropdown-menu">' +
                            '     <li>' +
                            '         <a href="/instances/nsi/' +row["_id"] +'/operation">' +
                            '             <i class="fa fa-list"></i> History of operations</a></li>' +
                            '     <li class="divider"></li>' +

                            '     <li>' +
                            '         <a href="javascript:deleteNsi(\''+ row["name"] +'\', \''+row["_id"]+'\', true)">' +
                            '             <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>' +
                            ' </ul>' +
                            '</div>';
                          return template;
                    },
                    "targets": 5,
                    "orderable": false
                },

            ]
        };
        $(document).ready(function () {
            table = $('#instances_table').DataTable({
                responsive: true,
                "ajax": {
                    "url": "/instances/" + instance_type + "/list/",
                    "dataSrc": function (json) {
                        return json.instances;
                    },
                    statusCode: {
                        401: function(){
                            console.log("no auth");
                            moveToLogin(window.location.pathname);
                        }
                    },
                    "error": function(hxr, error, thrown){
                        console.log(error);
                    }

                },
                "columns": row_builder[instance_type]
            });


            setInterval(function () {
                table.ajax.reload();
            }, 10000);


        });

    </script>

{% endblock %}

{% block footer %}
    {% include "footer.html" %}
{% endblock %}