[wip] NS instance topology view
Change-Id: I69dd246298d04860414bc0ad60ec3272426d0141
Signed-off-by: lombardofr <lombardo@everyup.it>
diff --git a/instancehandler/template/instance_list.html b/instancehandler/template/instance_list.html
index de47e62..97eac57 100644
--- a/instancehandler/template/instance_list.html
+++ b/instancehandler/template/instance_list.html
@@ -131,41 +131,54 @@
},
"targets": 5
},{
- // "width": "10%",
+ "width": "20%",
"render": function (data, type, row) {
- return '<div class="btn-group">\n' +
- ' <button type="button" class="btn btn-default"\n' +
- ' onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"\n' +
- ' data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
- ' <i class="fa fa-info"></i>\n' +
- ' </button>\n' +
- ' <button type="button" class="btn btn-default"\n' +
- ' onclick="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')"\n' +
- ' data-toggle="tooltip" data-placement="top" data-container="body" title="Delete"><i\n' +
- ' class="far fa-trash-alt"></i></button>\n' +
- ' <button type="button" class="btn btn-default dropdown-toggle"\n' +
- ' data-toggle="dropdown" aria-expanded="false">Actions\n' +
- ' <span class="fa fa-caret-down"></span></button>\n' +
- ' <ul class="dropdown-menu">\n' +
- ' <li><a href="#"\n' +
- ' onclick="javascript:performAction(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">\n' +
- ' <i class="fa fa-magic"></i> Exec NS Primitive</a></li>\n' +
- ' <li>\n' +
- ' <a href="/instances/ns/' +row["_id"] +'/operation">\n' +
- ' <i class="fa fa-list"></i> Active operations</a></li>\n' +
- ' <li class="divider"></li>\n' +
- ' <li><a href="#"\n' +
- ' onclick="javascript:newAlarmNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">\n' +
- ' <i class="far fa-bell"></i> New Alarm</a></li>\n' +
- ' <li><a href="#"\n' +
- ' onclick="javascript:exportMetricNs(\''+ row["short-name"] +'\', \''+row["_id"]+ '\')">\n' +
- ' <i class="far fa-chart-bar"></i> Export metric</a></li>\n' +
- ' <li class="divider"></li>\n' +
- ' <li>\n' +
- ' <a href="javascript:deleteNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\', true)">\n' +
- ' <i class="far fa-trash-alt" style="color:red" ></i> Force delete</a></li>\n' +
- ' </ul>\n' +
+ 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> Active operations</a></li>' +
+ ' <li class="divider"></li>' +
+ ' <li><a href="#"' +
+ ' onclick="javascript:newAlarmNs(\''+ row["short-name"] +'\', \''+row["_id"]+'\')">' +
+ ' <i class="far fa-bell"></i> New Alarm</a></li>' +
+ ' <li><a href="#"' +
+ ' onclick="javascript:exportMetricNs(\''+ row["short-name"] +'\', \''+row["_id"]+ '\')">' +
+ ' <i class="far fa-chart-bar"></i> Export metric</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
},
@@ -203,12 +216,12 @@
},
{
"render": function (data, type, row) {
- return '<div class="btn-group">\n' +
- ' <button type="button" class="btn btn-default"\n' +
- ' onclick="javascript:showInstanceDetails(\''+instance_type+'\', \''+row["_id"]+'\')"\n' +
- ' data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
- ' <i class="fa fa-info"></i>\n' +
- ' </button>\n' +
+ 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
diff --git a/instancehandler/template/instance_topology_view.html b/instancehandler/template/instance_topology_view.html
index fb67fbc..d1183f5 100644
--- a/instancehandler/template/instance_topology_view.html
+++ b/instancehandler/template/instance_topology_view.html
@@ -6,12 +6,11 @@
{% block head_block %}
{{ block.super }}
- <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.css">
- <link rel="stylesheet" href="/static/css/lwuitable.css">
- <!-- Topology3D core CSS -->
- <link rel="stylesheet" href="/static/topology3D/css/graph_editor_d3js.css">
- <link rel="stylesheet" href="/static/topology3D/css/d3-context-menu.css">
+<!-- TopologyComposer D3 -->
+ <link rel="stylesheet" href="/static/TopologyComposer/css/composer.css">
+ <link rel="stylesheet" href="/static/TopologyComposer/css/d3-context-menu.css">
+
{% endblock %}
{% block title_header_big %}
@@ -31,21 +30,25 @@
{% block content_body %}
{{ block.super }}
{% csrf_token %}
-
- <div class="row" >
- <div class="col-md-12">
- {% block topology_toolbar %}
- {{ block.super }}
- {% include 'topology_toolbar_instance.html' %}
- {% endblock %}
- <div id="graph_ed_container" style="width: 100%; height:100%; background-color: white; border: 2px #3c8dbc solid;">
+ <div class="container-fluid">
+ <div id="main" class="row">
+ <div id="graph_editor_container" class="col">
+ <div class="btn-group left-tool-bar-monitoring">
+ <button id="topology_force" type="button" class="btn btn btn-default" onclick="handleForce(this)"
+ data-toggle="button" aria-pressed="false" autocomplete="off"><i
+ class="fas fa-thumbtack"></i></button>
+ <button id="reset_filter" type="button" class="btn btn btn-default" onclick="resetFilters(this)"><i
+ class="fa fa-backward"></i></button>
+ </div>
+ <div id="legenda">
+ </div>
+ </div>
+ <div id="side">
</div>
</div>
</div>
-
-
{% endblock %}
{% block resource_block %}
@@ -53,20 +56,15 @@
<script>
var topology_data = {};//{{topology_data|safe }};
</script>
- <!-- Utility JS -->
- <script src="/static/bower_components/select2/dist/js/select2.js"></script>
-
<!-- d3.js -->
- <script src="https://d3js.org/d3.v4.js"></script>
-<!--
- <script src="/static/bower_components/d3/d3.js"></script>-->
+ <script src="/static/bower_components/d3/d3.js"></script>
- <!-- topology3D -->
- <script src="/static/topology3D/js/d3-context-menu.js"></script>
- <script src="/static/topology3D/js/event.js"></script>
- <script src="/static/topology3D/js/graph_editor.js"></script>
- <script src="/static/topology3D/js/graph_request.js"></script>
- <script src="/static/topology3D/js/model_graph_editor.js"></script>
+ <!-- TopologyComposer D3 -->
+ <script src="/static/TopologyComposer/js/event.js"></script>
+ <script src="/static/TopologyComposer/js/settings.js"></script>
+ <script src="/static/TopologyComposer/js/graph_editor.js"></script>
+ <script src="/static/TopologyComposer/js/model_graph_editor.js"></script>
+ <script src="/static/TopologyComposer/js/d3-context-menu.js"></script>
<script src="/static/src/osm_gui_properties.js"></script>