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

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