test-scheduler/ui/src/components/workflow_graph/wfresult.vue

   1 <template>
   2 <div style="min-height: 600px; overflow-x: auto; overflow-y: auto;">
   3     <div id="file-section1" class="col-md-4">
   4       <div id="workflow-content-div">
   5         <div class="dark-gray-bg" style="font-size: 17px; max-width: 500px; margin: 0 auto 10px;"> WORKFLOW.JSON CONTENT</div>
   6         <pre class="white-pink" id="workflow-content" style="height: 600px; background-color:#f5f5f5;"></pre>
   7       </div>
   8     </div>
   9     <div class="col-md-8" id="graph-show-section" style="">
  10       <div v-show="!wfloading" style="margin-top: 10px;">
  11           <div style="min-height: 30px; text-align: right;">
  12               <button v-show="workflowId != '' && !wfCompletedFlag" class="btn" v-on:click="completeWF(1)" title="mark the status 'complete' by hand.">mark it <strong>complete</strong></button>
  13           </div>
  14           <div id="workflow-graph">
  15           </div>
  16       </div>
  17       <div v-show="wfloading" class="spiner-example" id="loading">
  18         <div class="sk-spinner sk-spinner-three-bounce">
  19           <div class="sk-bounce1"></div>
  20           <div class="sk-bounce2"></div>
  21           <div class="sk-bounce3"></div>
  22         </div>
  23       </div>
  24           <div class="row">
  25           <div id="iframeContainer"></div>
  26           <div id="workflowId" style="display:none">
  27               <input name="workflowId" type="hidden" v-bind:value="workflowId" />
  28               <input name="function" type="hidden" value="graphLoad" />
  29               <button id="graphloadbtn" type="button" onclick="graphLoad()"></button>
  30           </div>
  31         </div>
  32     </div>
  33 </div>
  34 </template>
  35 <script>
  36 export default {
  37     props: ['workflowId', 'wfloading', 'wfJson'],
  38     name: 'wfresult',
  39     data: function() {
  40         return {
  41             frameLoadedFlag : false,
  42             initalPaintFlag : false,
  43             RESPONSE_TIME_LIMIT : 6000,
  44             responseTimeCounter : 0,
  45             wfCompletedFlag : false,
  46             intervalTime : 1000,
  47             timer: null
  48         }
  49     },
  50     computed: {
  51         wfget: function(){
  52             return !this.wfloading;
  53         }
  54     },
  55     watch: {
  56         workflowId: function(val){
  57             console.log("############## workflowId changed! " + val);
  58             this.graphLoad();
  59         },
  60         wfJson: function(val){
  61             this.fillWfContent(val);
  62         }
  63     },
  64     mounted: function(){
  65         window.clearInterval(this.timer);
  66     },
  67     destroyed: function(){
  68         window.clearInterval(this.timer);
  69     },
  70     methods: {
  71         graphLoad: function(){
  72             console.log("load function activate");
  73             this.reset();
  74             this.initialPaintWFGraph();
  75             var self = this;
  76               self.timer = window.setInterval(function() {
  77                 if(!self.initalPaintFlag) {
  78                   if(self.responseTimeCounter > self.RESPONSE_TIME_LIMIT) {
  79                     self.initialPaintWFGraph();
  80                     self.responseTimeCounter = 0;
  81                   }
  82                 } else {
  83                   if(self.frameLoadedFlag || self.responseTimeCounter > self.RESPONSE_TIME_LIMIT) {
  84                     self.repaintWFGraph();
  85                     self.responseTimeCounter = 0;
  86                   }
  87                 }
  88                 self.responseTimeCounter += self.intervalTime;
  89             }, self.intervalTime);
  90         },
  91         reset: function(){
  92             this.frameLoadedFlag = false;
  93               this.initalPaintFlag = false;
  94               this.RESPONSE_TIME_LIMIT = 6000;
  95               this.responseTimeCounter = 0;
  96               this.wfCompletedFlag = false;
  97               var graphDiv = document.getElementById("workflow-graph");
  98               graphDiv.innerHTML = '';
  99         },
 100         initialPaintWFGraph: function() {
 101             console.log("start to initial paint");
 102             this.setIframeSrc();
 103             var iframe = document.getElementById("testFrame");
 104             var self = this;
 105              if (iframe.attachEvent) {
 106                iframe.attachEvent("onload", function(){
 107                  window.setTimeout(function(){
 108                     self.frameLoadedFlag = true;
 109                     self.initialPaint();
 110                     console.log("finish to initial paint");
 111                  }, 1000);
 112                });
 113              } else {
 114                iframe.onload = function(){
 115                 window.setTimeout(function(){
 116                     self.frameLoadedFlag = true;
 117                     self.initialPaint();
 118                     console.log("finish to initial paint");
 119                  }, 1000);
 120                }
 121              }
 122         },
 123         setIframeSrc: function(){
 124          var iframeContainer = document.getElementById("iframeContainer");
 125          var iframeDiv = document.getElementById("testFrame");
 126          if(iframeDiv != undefined ) {
 127              iframeContainer.removeChild(iframeDiv);
 128          }
 129          var apiPrefix = this.global.WF_GRAPH_ADDR + "#/workflow/id/";
 130          var apiUrl = apiPrefix + this.workflowId;
 131          console.log("workflowId prop:" + this.workflowId);
 132          var iframeDiv = "<iframe id=\"testFrame\" width=\"0\" height=\"0\" style=\"border: none;\" src=\"" + apiUrl + "\"></iframe>";
 133          iframeContainer.innerHTML = iframeDiv;
 134          this.frameLoadedFlag = false;
 135         },
 136         initialPaint: function() {
 137           var iframe = document.getElementById("testFrame");
 138           var frameContent = iframe.contentWindow.document.getElementById("graph-ui-content");
 139           if(frameContent == null) return;
 140           this.frameLoadedFlag = true;
 141           var content = frameContent.cloneNode(true);
 142           content.id = "graph-ui-content-1";
 143           var graphDiv = document.getElementById("workflow-graph");
 144           graphDiv.appendChild(content);
 145           this.initalPaintFlag = true;
 146           this.wfloading = false;
 147           console.log("####################wfloading   false######################");
 148         },
 149         repaint: function() {
 150              var iframe = document.getElementById("testFrame");
 151              var frameContent = iframe.contentWindow.document.getElementById("graph-ui-content");
 152              if(frameContent == null) return;
 153              this.frameLoadedFlag = true;
 154              var newContent = frameContent.cloneNode(true);
 155              var newNodes = newContent.getElementsByClassName("node");
 156              var oldContent = document.getElementById("graph-ui-content-1");
 157              var oldNodes = oldContent.getElementsByClassName("node");
 158              var completeText = iframe.contentWindow.document.getElementsByClassName("ui-content")[0].getElementsByTagName("h4")[0].getElementsByTagName("span")[3].innerHTML;
 159              if(newNodes.length > oldNodes.length) {
 160               console.log("execute in new > old");
 161                 newContent.id = "graph-ui-content-1";
 162                 var graphDiv = document.getElementById("workflow-graph");
 163                 graphDiv.innerHTML = '';
 164                 graphDiv.appendChild(newContent);
 165              }
 166              else if(newNodes.length == oldNodes.length) {
 167                 console.log("execute in new = old");
 168                 for(var i = 0; i < newNodes.length; i++)
 169                 {
 170                   var newGraph = newNodes[i].children[0];
 171                   var newGraphStyle = newGraph.getAttribute("style");
 172                   var oldGraph = oldNodes[i].children[0];
 173                   var oldGraphStyle = oldGraph.getAttribute("style");
 174                   if(newGraphStyle != oldGraphStyle) {
 175                     oldGraph.setAttribute("style", newGraphStyle);
 176                   }
 177                   var newText = newNodes[i].getElementsByTagName("text")[0];
 178                   var newTextStyle = newText.getAttribute("style");
 179                   var oldText = oldNodes[i].getElementsByTagName("text")[0];
 180                   var oldTextStyle = oldText.getAttribute("style");
 181                   if(oldTextStyle != newTextStyle) {
 182                     oldText.setAttribute("style", newTextStyle);
 183                   }
 184                 }
 185                 if(completeText == "COMPLETED") {
 186                     this.completeWF(5);
 187                 }
 188              }
 189              else {
 190                   console.log("execute in new < old");
 191              }
 192         },
 193         repaintWFGraph: function() {
 194          this.setIframeSrc();
 195          var iframe = document.getElementById("testFrame");
 196          var self = this;
 197          if (iframe.attachEvent) {
 198            iframe.attachEvent("onload", function(){
 199              window.setTimeout(function(){
 200                 self.frameLoadedFlag = true;
 201                 self.repaint();
 202              }, 1000);
 203            });
 204          } else {
 205           iframe.onload = function(){
 206             window.setTimeout(function(){
 207                 self.frameLoadedFlag = true;
 208                 self.repaint();
 209              }, 1000);
 210           }
 211          }
 212         },
 213         completeWF: function(delay) {
 214             this.wfCompletedFlag = true;
 215             console.log("#####################################completed: clean the interval  " + this.timer);
 216             window.clearInterval(this.timer);
 217             var self = this;
 218             window.setTimeout(function() {
 219               self.$emit("wfComplete", true);
 220             }, delay*1000);
 221         },
 222         fillWfContent: function(wfContent) {
 223             var contentDiv = document.getElementById("workflow-content");
 224             contentDiv.innerHTML = wfContent;
 225         }
 226     }
 227 }
 228 </script>
 229 <style scoped>
 230 #workflow-graph {
 231     text-align: center;
 232 }
 233 #workflow-graph > div{
 234     display: inline-block;
 235 }
 236 </style>