instancehandler/template/instance_operations_list.html

   1 {% extends "base.html" %}
   2 {% load get %}
   3 {% load date_tag %}
   4 {% load staticfiles %}
   5
   6
   7
   8 {% block head_block %}
   9     {{ block.super }}
  10     <!-- Codemirror core CSS -->
  11     <link rel="stylesheet" href="/static/bower_components/codemirror/lib/codemirror.css">
  12     <link rel="stylesheet" href="/static/bower_components/codemirror/addon/fold/foldgutter.css" />
  13     <link rel="stylesheet" href="/static/bower_components/codemirror/theme/neat.css">
  14     <link rel="stylesheet" href="/static/bower_components/codemirror/addon/dialog/dialog.css">
  15     <link rel="stylesheet" href="/static/bower_components/codemirror/addon/display/fullscreen.css">
  16     <link rel="stylesheet" href="/static/bower_components/select2/dist/css/select2.min.css">
  17         <link rel="stylesheet" href="/static/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
  18
  19 {% endblock %}
  20 {% block title_header_big %}
  21     {{ block.super }}
  22 {% endblock %}
  23 {% block left_sidebar %}
  24     {% include 'osm/osm_project_left_sidebar.html' %}
  25 {% endblock %}
  26
  27
  28 {% block breadcrumb_body %}
  29     {{ block.super }}
  30     <li><a href="{% url 'instances:list'  type=type %}">Instances</a></li>
  31     <li><a href="#">Operations</a></li>
  32 {% endblock %}
  33
  34 {% block content_body %}
  35     {{ block.super }}
  36     {% include 'modal/instance_create.html' %}
  37     {% csrf_token %}
  38     <div class="row">
  39         <div class="col-md-12">
  40
  41             <div class="box">
  42                 <div class="box-header with-border">
  43                     <h3 class="box-title">Active operations</h3>
  44
  45                 </div>
  46                 <div class="box-body">
  47                     <table id="operations_table" class="table table-bordered table-striped">
  48                         <thead>
  49                         <tr>
  50                             <th>Id</th>
  51                             <th>Type</th>
  52                             <th>Operation State</th>
  53                             <th>Start Time</th>
  54                             <th>Status Entered Time</th>
  55                             <th>Actions</th>
  56                         </tr>
  57                         </thead>
  58                         <tbody>
  59
  60                         </tbody>
  61                     </table>
  62                 </div>
  63             </div>
  64         </div>
  65
  66     </div>
  67     {% include 'modal/operation_show.html' %}
  68 {% endblock %}
  69
  70 {% block resource_block %}
  71     {{ block.super }}
  72     <!-- Utility JS -->
  73     <script src="/static/bower_components/select2/dist/js/select2.js"></script>
  74     <script src="/static/bower_components/codemirror/lib/codemirror.js"></script>
  75     <script src="/static/bower_components/codemirror/addon/fold/foldcode.js"></script>
  76     <script src="/static/bower_components/codemirror/addon/fold/foldgutter.js"></script>
  77     <script src="/static/bower_components/codemirror/addon/fold/brace-fold.js"></script>
  78     <script src="/static/bower_components/codemirror/mode/javascript/javascript.js"></script>
  79     <script src="/static/bower_components/codemirror/addon/search/searchcursor.js"></script>
  80     <script src="/static/bower_components/codemirror/addon/search/search.js"></script>
  81     <script src="/static/bower_components/codemirror/addon/dialog/dialog.js"></script>
  82     <script src="/static/bower_components/codemirror/addon/display/autorefresh.js"></script>
  83     <script src="/static/bower_components/codemirror/addon/edit/matchbrackets.js"></script>
  84     <script src="/static/bower_components/codemirror/addon/edit/closebrackets.js"></script>
  85     <script src="/static/bower_components/codemirror/addon/display/fullscreen.js"></script>
  86     <script src="/static/bower_components/codemirror/keymap/sublime.js"></script>
  87     <script src="/static/bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
  88     <script src="/static/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
  89     <script src="/static/src/instancehandler/instance_operations_list.js"></script>
  90
  91     <script>
  92     var instance_type = '{{ type }}';
  93     var instance_id = '{{ instance_id }}';
  94     $(document).ready(function () {
  95             var table = $('#operations_table').DataTable({
  96                 responsive: true,
  97                 "ajax": {
  98                     "url": "/instances/" + instance_type + "/" +instance_id + "/operation",
  99                     "dataSrc": function (json) {
 100                         return json['operations'];
 101                     },
 102                     statusCode: {
 103                         401: function(){
 104                             console.log("no auth");
 105                             moveToLogin(window.location.pathname);
 106                         }
 107                     },
 108                     "error": function(hxr, error, thrown){
 109                         console.log(error);
 110                     }
 111
 112                 },
 113                 "columns": [
 114                     {
 115                     "render": function (data, type, row) {
 116                         return row["_id"];
 117                     },
 118                     "targets": 0
 119                 },
 120                 {
 121                     "render": function (data, type, row) {
 122                         return row['lcmOperationType'];
 123                     },
 124                     "targets": 1
 125                 },
 126                 {
 127                     "render": function (data, type, row) {
 128
 129                         if(row["operationState"] === 'FAILED')
 130                            return '<span class="label label-danger">'+ row["operationState"] +'</span>';
 131                         else if(row["operationState"] === 'PROCESSING')
 132                            return '<span class="label label-warning">'+ row["operationState"] +'</span>';
 133                         else if(row["operationState"] === 'COMPLETED')
 134                            return '<span class="label label-success">'+ row["operationState"] +'</span>';
 135                         else
 136                          return row["operationState"];
 137                     },
 138                     "targets": 2
 139                 },
 140                 {
 141                     "render": function (data, type, row) {
 142                         return row["startTime"];
 143                     },
 144                     "targets": 3
 145                 },
 146                 {
 147                     "render": function (data, type, row) {
 148                         return row["statusEnteredTime"];
 149                     },
 150                     "targets": 4
 151                 },
 152                 {
 153                     "render": function (data, type, row) {
 154                         return '<div class="btn-group">\n' +
 155                             '     <button type="button" class="btn btn-default"\n' +
 156                             '             onclick="javascript:showOperationDetails(\''+row["nsInstanceId"]+'\', \''+row["_id"]+'\')"\n' +
 157                             '             data-toggle="tooltip" data-placement="top" data-container="body" title="Show Info">\n' +
 158                             '         <i class="fa fa-info"></i>\n' +
 159                             '     </button>\n' +
 160                             ' </div>';
 161                     },
 162                     "targets": 5
 163                 }
 164                 ]
 165             });
 166
 167
 168             setInterval(function () {
 169                 table.ajax.reload();
 170             }, 10000);
 171         });
 172
 173     </script>
 174
 175 {% endblock %}
 176
 177 {% block footer %}
 178     {% include "footer.html" %}
 179 {% endblock %}