src/templates/workflow/viewport-base.html

   1 {% extends "base.html" %}
   2 {% load staticfiles %}
   3
   4 {% load bootstrap4 %}
   5
   6 {% block content %}
   7
   8 <!-- Pagination -->
   9 <div class="row mt-3">
  10     <div class="col">
  11         <nav>
  12             <ul class="pagination d-flex flex-row" id="topPagination">
  13                 <li class="page-item flex-shrink-1 page-control">
  14                     <a class="page-link" href="#" id="gob" onclick="go('prev')">
  15                         <i class="fas fa-backward"></i> Back
  16                     </a>
  17                 </li>
  18                 <li class="page-item flex-grow-1 active">
  19                     <a class="page-link disabled" href="#">
  20                         Select <i class="far fa-check-square"></i>
  21                     </a>
  22                 </li>
  23                 <li class="page-item flex-grow-1">
  24                     <a class="page-link disabled" href="#">
  25                         Configure <i class="far fa-square"></i>
  26                     </a>
  27                 </li>
  28                 <li class="page-item flex-grow-1">
  29                     <a class="page-link disabled" href="#">
  30                         Information <i class="far fa-square"></i>
  31                     </a>
  32                 </li>
  33                 <li class="page-item flex-grow-1">
  34                     <a class="page-link disabled" href="#">
  35                         OPNFV <i class="far fa-square"></i>
  36                     </a>
  37                 </li>
  38                 <li class="page-item flex-grow-1">
  39                     <a class="page-link disabled" href="#">
  40                         Confirm <i class="far fa-square"></i>
  41                     </a>
  42                 </li>
  43                 <li class="page-item flex-shrink-1 page-control">
  44                     <a class="page-link text-right" href="#" id="gof" onclick="go('next')">
  45                         Next <i class="fas fa-forward"></i>
  46                     </a>
  47                 </li>
  48             </ul>
  49         </nav>
  50     </div>
  51 </div>
  52 <!-- Top header -->
  53 <div class="row px-4">
  54     <div class="col">
  55         <div id="iframe_header" class="row view-header">
  56             <div class="col-lg-12">
  57                 <h1 class="d-inline-block" id="view_title"></h1>
  58                 <span class="description text-muted" id="view_desc"></span>
  59                 <p id="view_message"></p>
  60             </div>
  61             <script>
  62                 function update_description(title, desc) {
  63                     document.getElementById("view_title").innerText = title;
  64                     document.getElementById("view_desc").innerText = desc;
  65                 }
  66
  67                 function update_message(message, stepstatus) {
  68                     document.getElementById("view_message").innerText = message;
  69                     document.getElementById("view_message").className = "step_message";
  70                     document.getElementById("view_message").classList.add("message_" + stepstatus);
  71                 }
  72             </script>
  73         </div>
  74     </div>
  75     <div class="col-auto align-self-center d-flex">
  76         <button id="cancel_btn" class="btn btn-danger ml-auto" onclick="cancel_wf()">Cancel</button>
  77     </div>
  78 </div>
  79 <div class="row d-flex flex-column flex-grow-1">
  80     <div class="container-fluid d-flex flex-column h-100">
  81         <div class="row d-flex flex-grow-1 p-4">
  82             <div class="col-12 d-flex border flex-grow-1 px-0">
  83                 <iframe src="/wf/workflow" class="w-100 h-100" scrolling="yes" id="viewport-iframe"
  84                     frameBorder="0"></iframe>
  85             </div>
  86         </div>
  87     </div>
  88 </div>
  89 {% csrf_token %}
  90
  91 <script type="text/javascript">
  92     update_context();
  93     var step = 0;
  94     var page_count = 0;
  95     var context_data = false;
  96
  97     function go(to) {
  98         step_on_leave();
  99         request_leave(to);
 100     }
 101
 102     function request_leave(to) {
 103         $.ajax({
 104             type: "GET",
 105             url: "/wf/manager/",
 106             beforeSend: function (request) {
 107                 request.setRequestHeader("X-CSRFToken",
 108                     $('input[name="csrfmiddlewaretoken"]').val());
 109             },
 110             success: function (data) {
 111                 confirm_permission(to, data);
 112                 update_page(data);
 113             }
 114         });
 115     }
 116
 117     function confirm_permission(to, data) {
 118         if (errors_exist(data)) {
 119             if (to != "prev") {
 120                 return;
 121             }
 122         }
 123
 124         var problem = function () {
 125             alert("There was a problem");
 126         }
 127         //makes an asynch request
 128         req = new XMLHttpRequest();
 129         url = "/wf/workflow/?step=" + to;
 130         req.open("GET", url, true);
 131         req.onload = function (e) {
 132             if (req.readyState === 4) {
 133                 if (req.status < 300) {
 134                     document.getElementById("viewport-iframe").srcdoc = this.responseText;
 135                 } else {
 136                     problem();
 137                 }
 138             } else {
 139                 problem();
 140             }
 141         }
 142         req.onerror = problem;
 143         req.send();
 144     }
 145
 146     function step_on_leave() {
 147         document.getElementById("viewport-iframe").contentWindow.step_on_leave();
 148     }
 149
 150     function errors_exist(data) {
 151         var stat = data['steps'][data['active']]['valid'];
 152         if (stat >= 100 && stat < 200) {
 153             return true;
 154         } else {
 155             return false;
 156         }
 157     }
 158
 159     function update_context() {
 160         $.ajax({
 161             type: "GET",
 162             url: "/wf/manager/",
 163             beforeSend: function (request) {
 164                 request.setRequestHeader("X-CSRFToken",
 165                     $('input[name="csrfmiddlewaretoken"]').val());
 166             },
 167             success: function (data) {
 168                 update_page(data);
 169             }
 170         });
 171     }
 172
 173     function update_page(data) {
 174         context_data = data;
 175         update_breadcrumbs(data);
 176         if (data["workflow_count"] == 1) {
 177             document.getElementById("cancel_btn").innerText = "Exit Workflow";
 178         } else {
 179             document.getElementById("cancel_btn").innerText = "Return to Parent";
 180         }
 181     }
 182
 183     function update_breadcrumbs(meta_json) {
 184         step = meta_json['active'];
 185         page_count = meta_json['steps'].length;
 186         if (step == 0) {
 187             var btn = document.getElementById("gob");
 188             btn.classList.add("invisible");
 189             btn.disabled = true;
 190         } else {
 191             var btn = document.getElementById("gob");
 192             btn.classList.remove("invisible");
 193             btn.disabled = false;
 194         }
 195         if (step == page_count - 1) {
 196             var btn = document.getElementById("gof");
 197             btn.classList.add("invisible");
 198             btn.disabled = true;
 199         } else {
 200             var btn = document.getElementById("gof");
 201             btn.classList.remove("invisible");
 202             btn.disabled = false;
 203         }
 204         //remove all children of breadcrumbs so we can redraw
 205         $("#topPagination").children().not(".page-control").remove();
 206         draw_steps(meta_json);
 207     }
 208
 209     function draw_steps(meta_json) {
 210         for (var i = 0; i < meta_json["steps"].length; i++) {
 211             meta_json["steps"][i]["index"] = i;
 212             var step_btn = create_step(meta_json["steps"][i], i == meta_json["active"]);
 213             $("#topPagination li:last-child").before(step_btn);
 214         }
 215     }
 216
 217     function create_step(step_json, active) {
 218         var step_dom = document.createElement("li");
 219         // First create the dom object depending on active or not
 220         if (active) {
 221             step_dom.className = "topcrumb active";
 222         } else {
 223             step_dom.className = "topcrumb";
 224         }
 225         $(step_dom).html(`<span class="d-flex align-items-center justify-content-center text-capitalize w-100">${step_json['title']}</span>`)
 226         var code = step_json['valid'];
 227         stat = "";
 228         msg = "";
 229         if (code < 100) {
 230             $(step_dom).children().first().append("<i class='ml-2 far fa-square'></i>")
 231             stat = "";
 232             msg = "";
 233         } else if (code < 200) {
 234             $(step_dom).children().first().append("<i class='ml-2 fas fa-minus-square'></i>")
 235             stat = "invalid";
 236             msg = step_json['message'];
 237         } else if (code < 300) {
 238             $(step_dom).children().first().append("<i class='ml-2 far fa-check-square'></i>")
 239             stat = "valid";
 240             msg = step_json['message'];
 241         }
 242         if (step_json['enabled'] == false) {
 243             step_dom.classList.add("disabled");
 244         }
 245         if (active) {
 246             update_message(msg, stat);
 247         }
 248
 249         var step_number = step_json['index'];
 250         return step_dom;
 251     }
 252
 253     function cancel_wf() {
 254         var form = $("#workflow_pop_form");
 255         var formData = form.serialize();
 256         var req = new XMLHttpRequest();
 257         req.open("POST", "/wf/workflow/finish/", false);
 258         req.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
 259         req.onerror = function () {
 260             alert("problem occurred while trying to cancel current workflow");
 261         }
 262         req.onreadystatechange = function () {
 263             if (req.readyState === 4) {
 264                 refresh_iframe();
 265             }
 266         };
 267         req.send(formData);
 268     }
 269
 270     function refresh_iframe() {
 271         req = new XMLHttpRequest();
 272         url = "/wf/workflow/";
 273         req.open("GET", url, true);
 274         req.onload = function (e) {
 275             var doc = document.getElementById("viewport-iframe").contentWindow.document;
 276             doc.open();
 277             doc.write(this.responseText);
 278             doc.close();
 279         }
 280         req.send();
 281     }
 282
 283     function write_iframe(contents) {
 284         document.getElementById("viewport-iframe").contentWindow.document.innerHTML = contents;
 285     }
 286
 287     function redirect_root() {
 288         window.location.replace('/wf/');
 289     }
 290
 291     function add_wf(type) {
 292         add_wf_internal(type, false);
 293     }
 294
 295     function add_edit_wf(type, target) {
 296         add_wf_internal(type, target);
 297     }
 298
 299     function add_wf_internal(type, itemid) {
 300         data = {
 301             "add": type
 302         };
 303         if (itemid) {
 304             data['target'] = itemid;
 305         }
 306         $.ajax({
 307             type: "POST",
 308             url: "/wf/manager/",
 309             data: data,
 310             beforeSend: function (request) {
 311                 request.setRequestHeader("X-CSRFToken",
 312                     $('input[name="csrfmiddlewaretoken"]').val()
 313                 );
 314             },
 315             success: refresh_wf_iframe()
 316         });
 317     }
 318
 319     function refresh_wf_iframe() {
 320         window.location = window.location;
 321     }
 322 </script>
 323 <div class="d-none" id="workflow_pop_form_div">
 324     <form id="workflow_pop_form" action="/wf/workflow/finish/" method="post">
 325         {% csrf_token %}
 326     </form>
 327 </div>
 328 {% endblock content %}