instancehandler/template/instance_operations_list.html

   1 <!--
   2 Copyright 2019 EveryUP srl
   3
   4 Licensed under the Apache License, Version 2.0 (the "License");
   5 you may not use this file except in compliance with the License.
   6 You may obtain a copy of the License at
   7
   8     http://www.apache.org/licenses/LICENSE-2.0
   9
  10 Unless required by applicable law or agreed to in writing, software
  11 distributed under the License is distributed on an  BASIS,
  12 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 See the License for the specific language governing permissions and
  14 limitations under the License.
  15 -->
  16
  17 {% extends "base.html" %}
  18 {% load get %}
  19 {% load date_tag %}
  20 {% load staticfiles %}
  21
  22
  23
  24 {% block head_block %}
  25     {{ block.super }}
  26     <!-- Codemirror core CSS -->
  27     <link rel="stylesheet" href="/static/node_modules/codemirror/lib/codemirror.css">
  28     <link rel="stylesheet" href="/static/node_modules/codemirror/addon/fold/foldgutter.css" />
  29     <link rel="stylesheet" href="/static/node_modules/codemirror/theme/neat.css">
  30     <link rel="stylesheet" href="/static/node_modules/codemirror/addon/dialog/dialog.css">
  31     <link rel="stylesheet" href="/static/node_modules/codemirror/addon/display/fullscreen.css">
  32     <link rel="stylesheet" href="/static/node_modules/select2/dist/css/select2.min.css">
  33         <link rel="stylesheet" href="/static/node_modules/datatables.net-bs/css/dataTables.bootstrap.min.css">
  34
  35 {% endblock %}
  36 {% block title_header_big %}
  37     {{ block.super }}
  38 {% endblock %}
  39 {% block left_sidebar %}
  40     {% include 'osm/osm_project_left_sidebar.html' %}
  41 {% endblock %}
  42
  43
  44 {% block breadcrumb_body %}
  45     {{ block.super }}
  46     <li><a href="{% url 'instances:list'  type=type %}">Instances</a></li>
  47     <li><a href="#">History of Operations</a></li>
  48 {% endblock %}
  49
  50 {% block content_body %}
  51     {{ block.super }}
  52     {% include 'modal/instance_create.html' %}
  53     {% csrf_token %}
  54     <div class="row">
  55         <div class="col-md-12">
  56
  57             <div class="box">
  58                 <div class="box-header with-border">
  59                     <h3 class="box-title">History of operations</h3>
  60
  61                 </div>
  62                 <div class="box-body">
  63                     <table id="operations_table" class="table table-bordered table-striped">
  64                         <thead>
  65                         <tr>
  66                             <th>Id</th>
  67                             <th>Type</th>
  68                             <th>Operation State</th>
  69                             <th>Start Time</th>
  70                             <th>Status Entered Time</th>
  71                             <th>Actions</th>
  72                         </tr>
  73                         </thead>
  74                         <tbody>
  75
  76                         </tbody>
  77                     </table>
  78                 </div>
  79             </div>
  80         </div>
  81
  82     </div>
  83     {% include 'modal/operation_show.html' %}
  84 {% endblock %}
  85
  86 {% block resource_block %}
  87     {{ block.super }}
  88     <!-- Utility JS -->
  89     <script src="/static/node_modules/select2/dist/js/select2.js"></script>
  90     <script src="/static/node_modules/codemirror/lib/codemirror.js"></script>
  91     <script src="/static/node_modules/codemirror/addon/fold/foldcode.js"></script>
  92     <script src="/static/node_modules/codemirror/addon/fold/foldgutter.js"></script>
  93     <script src="/static/node_modules/codemirror/addon/fold/brace-fold.js"></script>
  94     <script src="/static/node_modules/codemirror/mode/javascript/javascript.js"></script>
  95     <script src="/static/node_modules/codemirror/addon/search/searchcursor.js"></script>
  96     <script src="/static/node_modules/codemirror/addon/search/search.js"></script>
  97     <script src="/static/node_modules/codemirror/addon/dialog/dialog.js"></script>
  98     <script src="/static/node_modules/codemirror/addon/display/autorefresh.js"></script>
  99     <script src="/static/node_modules/codemirror/addon/edit/matchbrackets.js"></script>
 100     <script src="/static/node_modules/codemirror/addon/edit/closebrackets.js"></script>
 101     <script src="/static/node_modules/codemirror/addon/display/fullscreen.js"></script>
 102     <script src="/static/node_modules/codemirror/keymap/sublime.js"></script>
 103     <script src="/static/node_modules/datatables.net/js/jquery.dataTables.min.js"></script>
 104     <script src="/static/node_modules/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
 105     <script src="/static/src/instancehandler/instance_operations_list.js"></script>
 106
 107     <script>
 108     var instance_type = '{{ type }}';
 109     var instance_id = '{{ instance_id }}';
 110     $(document).ready(function () {
 111             var table = $('#operations_table').DataTable({
 112                 responsive: true,
 113                 "ajax": {
 114                     "url": "/instances/" + instance_type + "/" +instance_id + "/operation",
 115                     "dataSrc": function (json) {
 116                         return json['operations'];
 117                     },
 118                     statusCode: {
 119                         401: function(){
 120                             console.log("no auth");
 121                             moveToLogin(window.location.pathname);
 122                         }
 123                     },
 124                     "error": function(hxr, error, thrown){
 125                         console.log(error);
 126                     }
 127
 128                 },
 129                 "columns": [
 130                     {
 131                     "render": function (data, type, row) {
 132                         return row["_id"];
 133                     },
 134                     "targets": 0
 135                 },
 136                 {
 137                     "render": function (data, type, row) {
 138                         return row['lcmOperationType'];
 139                     },
 140                     "targets": 1
 141                 },
 142                 {
 143                     "render": function (data, type, row) {
 144
 145                         if(row["operationState"] === 'FAILED')
 146                            return '<span class="label label-danger">'+ row["operationState"] +'</span>';
 147                         else if(row["operationState"] === 'PROCESSING')
 148                            return '<span class="label label-warning">'+ row["operationState"] +'</span>';
 149                         else if(row["operationState"] === 'COMPLETED')
 150                            return '<span class="label label-success">'+ row["operationState"] +'</span>';
 151                         else
 152                          return row["operationState"];
 153                     },
 154                     "targets": 2
 155                 },
 156                 {
 157                     "render": function (data, type, row) {
 158                         return moment.unix(row['startTime']).format('YYYY-MM-DD hh:mm:ss a')
 159                     },
 160                     "targets": 3
 161                 },
 162                 {
 163                     "render": function (data, type, row) {
 164                         return moment.unix(row['statusEnteredTime']).format('YYYY-MM-DD hh:mm:ss a')
 165                     },
 166                     "targets": 4
 167                 },
 168                 {
 169                     "render": function (data, type, row) {
 170                         return '<div class="btn-group">\n' +
 171                             '     <button type="button" class="btn btn-default"\n' +
 172                             '             onclick="javascript:showOperationDetails(\''+instance_type+'\', \''+instance_id+'\', \''+row["_id"]+'\')"\n' +
 173                             '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
 174                             '         <i class="fa fa-info"></i>\n' +
 175                             '     </button>\n' +
 176                             ' </div>';
 177                     },
 178                     "targets": 5,
 179                     "orderable": false
 180                 }
 181                 ],
 182                 "order": [[ 3, "asc" ]]
 183             });
 184
 185
 186             setInterval(function () {
 187                 table.ajax.reload();
 188             }, 10000);
 189         });
 190
 191     </script>
 192
 193 {% endblock %}
 194
 195 {% block footer %}
 196     {% include "footer.html" %}
 197 {% endblock %}