+<!--
+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 date_tag %}
{% block head_block %}
{{ block.super }}
<!-- Codemirror core CSS -->
- <link rel="stylesheet" href="/static/bower_components/codemirror/lib/codemirror.css">
- <link rel="stylesheet" href="/static/bower_components/codemirror/addon/fold/foldgutter.css" />
- <link rel="stylesheet" href="/static/bower_components/codemirror/theme/neat.css">
- <link rel="stylesheet" href="/static/bower_components/codemirror/addon/dialog/dialog.css">
- <link rel="stylesheet" href="/static/bower_components/codemirror/addon/display/fullscreen.css">
- <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.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/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
+
{% endblock %}
{% block title_header_big %}
{{ block.super }}
{% block breadcrumb_body %}
{{ block.super }}
- <li><a href="{% url 'projects:instances:list' project_id=project_id type=type %}">Instances</a></li>
+ <li><a href="{% url 'instances:list' type=type %}">Instances</a></li>
+ <li><a href="#">History of Operations</a></li>
{% endblock %}
{% block content_body %}
<div class="box">
<div class="box-header with-border">
- <h3 class="box-title">Active operations</h3>
+ <h3 class="box-title">History of operations</h3>
</div>
<div class="box-body">
- <table id="instances_table" class="table table-bordered table-striped">
+ <table id="operations_table" class="table table-bordered table-striped">
<thead>
<tr>
<th>Id</th>
</tr>
</thead>
<tbody>
- {% for i in operations %}
- <tr>
-
- <td>{{ i|get:"_id" }}</td>
- <td>{{ i|get:"lcmOperationType" }}</td>
-
- {% if i|get:"operationState" == 'FAILED' %}
- <td><span class="label label-danger">{{ i|get:"operationState" }}</span> </td>
- {% elif i|get:"operationState" == 'PROCESSING' %}
- <td><span class="label label-warning">{{ i|get:"operationState" }}</span> </td>
- {% elif i|get:"operationState" == 'COMPLETED' %}
- <td><span class="label label-success">{{ i|get:"operationState" }}</span> </td>
- {% else %}
- <td>{{ i|get:"operationState" }}</td>
- {% endif %}
- <td >{{ i.startTime|get_date }}</td>
- <td >{{ i.statusEnteredTime|get_date }}</td>
- <td>
- <div class="btn-group">
- <button type="button" class="btn btn-default"
- onclick="javascript:showOperationDetails('{% url 'projects:instances:ns_operation' op_id=i|get:'_id' instance_id=i|get:'nsInstanceId' project_id=project_id type=type %}')"
- data-toggle="tooltip" data-placement="top" data-container="body" title="More Info"><i
- class="fa fa-info"></i>
- </button>
-
-
- </div>
-
- </td>
-
-
- </tr>
- {% endfor %}
</tbody>
</table>
</div>
{% block resource_block %}
{{ block.super }}
<!-- Utility JS -->
- <script src="/static/bower_components/select2/dist/js/select2.js"></script>
- <script src="/static/bower_components/codemirror/lib/codemirror.js"></script>
- <script src="/static/bower_components/codemirror/addon/fold/foldcode.js"></script>
- <script src="/static/bower_components/codemirror/addon/fold/foldgutter.js"></script>
- <script src="/static/bower_components/codemirror/addon/fold/brace-fold.js"></script>
- <script src="/static/bower_components/codemirror/mode/javascript/javascript.js"></script>
- <script src="/static/bower_components/codemirror/addon/search/searchcursor.js"></script>
- <script src="/static/bower_components/codemirror/addon/search/search.js"></script>
- <script src="/static/bower_components/codemirror/addon/dialog/dialog.js"></script>
- <script src="/static/bower_components/codemirror/addon/display/autorefresh.js"></script>
- <script src="/static/bower_components/codemirror/addon/edit/matchbrackets.js"></script>
- <script src="/static/bower_components/codemirror/addon/edit/closebrackets.js"></script>
- <script src="/static/bower_components/codemirror/addon/display/fullscreen.js"></script>
- <script src="/static/bower_components/codemirror/keymap/sublime.js"></script>
+ <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/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 src="/static/src/instancehandler/instance_operations_list.js"></script>
+ <script>
+ var instance_type = '{{ type }}';
+ var instance_id = '{{ instance_id }}';
+ $(document).ready(function () {
+ var table = $('#operations_table').DataTable({
+ responsive: true,
+ "ajax": {
+ "url": "/instances/" + instance_type + "/" +instance_id + "/operation",
+ "dataSrc": function (json) {
+ return json['operations'];
+ },
+ statusCode: {
+ 401: function(){
+ console.log("no auth");
+ moveToLogin(window.location.pathname);
+ }
+ },
+ "error": function(hxr, error, thrown){
+ console.log(error);
+ }
+
+ },
+ "columns": [
+ {
+ "render": function (data, type, row) {
+ return row["_id"];
+ },
+ "targets": 0
+ },
+ {
+ "render": function (data, type, row) {
+ return row['lcmOperationType'];
+ },
+ "targets": 1
+ },
+ {
+ "render": function (data, type, row) {
+
+ if(row["operationState"] === 'FAILED')
+ return '<span class="label label-danger">'+ row["operationState"] +'</span>';
+ else if(row["operationState"] === 'PROCESSING')
+ return '<span class="label label-warning">'+ row["operationState"] +'</span>';
+ else if(row["operationState"] === 'COMPLETED')
+ return '<span class="label label-success">'+ row["operationState"] +'</span>';
+ else
+ return row["operationState"];
+ },
+ "targets": 2
+ },
+ {
+ "render": function (data, type, row) {
+ return moment.unix(row['startTime']).format('YYYY-MM-DD hh:mm:ss a')
+ },
+ "targets": 3
+ },
+ {
+ "render": function (data, type, row) {
+ return moment.unix(row['statusEnteredTime']).format('YYYY-MM-DD hh:mm:ss a')
+ },
+ "targets": 4
+ },
+ {
+ "render": function (data, type, row) {
+ return '<div class="btn-group">\n' +
+ ' <button type="button" class="btn btn-default"\n' +
+ ' onclick="javascript:showOperationDetails(\''+instance_type+'\', \''+instance_id+'\', \''+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' +
+ ' </div>';
+ },
+ "targets": 5,
+ "orderable": false
+ }
+ ],
+ "order": [[ 3, "asc" ]]
+ });
+
+
+ setInterval(function () {
+ table.ajax.reload();
+ }, 10000);
+ });
+
+ </script>
+
{% endblock %}
{% block footer %}