--- /dev/null
+<template>\r
+<div style="min-height: 600px; overflow-x: auto; overflow-y: auto;">\r
+ <div id="file-section1" class="col-md-4">\r
+ <div id="workflow-content-div">\r
+ <div class="dark-gray-bg" style="font-size: 17px; max-width: 500px; margin: 0 auto 10px;"> WORKFLOW.JSON CONTENT</div>\r
+ <pre class="white-pink" id="workflow-content" style="height: 600px; background-color:#f5f5f5;"></pre>\r
+ </div>\r
+ </div>\r
+ <div class="col-md-8" id="graph-show-section" style="">\r
+ <div v-show="!wfloading" style="margin-top: 10px;">\r
+ <div style="min-height: 30px; text-align: right;">\r
+ <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
+ </div>\r
+ <div id="workflow-graph">\r
+ </div>\r
+ </div>\r
+ <div v-show="wfloading" class="spiner-example" id="loading">\r
+ <div class="sk-spinner sk-spinner-three-bounce">\r
+ <div class="sk-bounce1"></div>\r
+ <div class="sk-bounce2"></div>\r
+ <div class="sk-bounce3"></div>\r
+ </div>\r
+ </div>\r
+ <div class="row">\r
+ <div id="iframeContainer"></div>\r
+ <div id="workflowId" style="display:none">\r
+ <input name="workflowId" type="hidden" v-bind:value="workflowId" />\r
+ <input name="function" type="hidden" value="graphLoad" />\r
+ <button id="graphloadbtn" type="button" onclick="graphLoad()"></button>\r
+ </div>\r
+ </div>\r
+ </div>\r
+</div>\r
+</template>\r
+<script>\r
+export default {\r
+ props: ['workflowId', 'wfloading', 'wfJson'],\r
+ name: 'wfresult',\r
+ data: function() {\r
+ return {\r
+ frameLoadedFlag : false,\r
+ initalPaintFlag : false,\r
+ RESPONSE_TIME_LIMIT : 6000,\r
+ responseTimeCounter : 0,\r
+ wfCompletedFlag : false,\r
+ intervalTime : 1000,\r
+ timer: null\r
+ }\r
+ },\r
+ computed: {\r
+ wfget: function(){\r
+ return !this.wfloading;\r
+ }\r
+ },\r
+ watch: {\r
+ workflowId: function(val){\r
+ console.log("############## workflowId changed! " + val);\r
+ this.graphLoad();\r
+ },\r
+ wfJson: function(val){\r
+ this.fillWfContent(val);\r
+ }\r
+ },\r
+ mounted: function(){\r
+ window.clearInterval(this.timer);\r
+ },\r
+ destroyed: function(){\r
+ window.clearInterval(this.timer);\r
+ },\r
+ methods: {\r
+ graphLoad: function(){\r
+ console.log("load function activate");\r
+ this.reset();\r
+ this.initialPaintWFGraph();\r
+ var self = this;\r
+ self.timer = window.setInterval(function() {\r
+ if(!self.initalPaintFlag) {\r
+ if(self.responseTimeCounter > self.RESPONSE_TIME_LIMIT) {\r
+ self.initialPaintWFGraph();\r
+ self.responseTimeCounter = 0;\r
+ }\r
+ } else {\r
+ if(self.frameLoadedFlag || self.responseTimeCounter > self.RESPONSE_TIME_LIMIT) {\r
+ self.repaintWFGraph();\r
+ self.responseTimeCounter = 0;\r
+ }\r
+ }\r
+ self.responseTimeCounter += self.intervalTime;\r
+ }, self.intervalTime);\r
+ },\r
+ reset: function(){\r
+ this.frameLoadedFlag = false;\r
+ this.initalPaintFlag = false;\r
+ this.RESPONSE_TIME_LIMIT = 6000;\r
+ this.responseTimeCounter = 0;\r
+ this.wfCompletedFlag = false;\r
+ var graphDiv = document.getElementById("workflow-graph");\r
+ graphDiv.innerHTML = '';\r
+ },\r
+ initialPaintWFGraph: function() {\r
+ console.log("start to initial paint");\r
+ this.setIframeSrc();\r
+ var iframe = document.getElementById("testFrame");\r
+ var self = this;\r
+ if (iframe.attachEvent) {\r
+ iframe.attachEvent("onload", function(){\r
+ window.setTimeout(function(){\r
+ self.frameLoadedFlag = true;\r
+ self.initialPaint();\r
+ console.log("finish to initial paint");\r
+ }, 1000);\r
+ });\r
+ } else {\r
+ iframe.onload = function(){\r
+ window.setTimeout(function(){\r
+ self.frameLoadedFlag = true;\r
+ self.initialPaint();\r
+ console.log("finish to initial paint");\r
+ }, 1000);\r
+ }\r
+ }\r
+ },\r
+ setIframeSrc: function(){\r
+ var iframeContainer = document.getElementById("iframeContainer");\r
+ var iframeDiv = document.getElementById("testFrame");\r
+ if(iframeDiv != undefined ) {\r
+ iframeContainer.removeChild(iframeDiv);\r
+ }\r
+ var apiPrefix = this.global.WF_GRAPH_ADDR + "#/workflow/id/";\r
+ var apiUrl = apiPrefix + this.workflowId;\r
+ console.log("workflowId prop:" + this.workflowId);\r
+ var iframeDiv = "<iframe id=\"testFrame\" width=\"0\" height=\"0\" style=\"border: none;\" src=\"" + apiUrl + "\"></iframe>";\r
+ iframeContainer.innerHTML = iframeDiv;\r
+ this.frameLoadedFlag = false;\r
+ },\r
+ initialPaint: function() {\r
+ var iframe = document.getElementById("testFrame");\r
+ var frameContent = iframe.contentWindow.document.getElementById("graph-ui-content");\r
+ if(frameContent == null) return;\r
+ this.frameLoadedFlag = true;\r
+ var content = frameContent.cloneNode(true);\r
+ content.id = "graph-ui-content-1";\r
+ var graphDiv = document.getElementById("workflow-graph");\r
+ graphDiv.appendChild(content);\r
+ this.initalPaintFlag = true;\r
+ this.wfloading = false;\r
+ console.log("####################wfloading false######################");\r
+ },\r
+ repaint: function() {\r
+ var iframe = document.getElementById("testFrame");\r
+ var frameContent = iframe.contentWindow.document.getElementById("graph-ui-content");\r
+ if(frameContent == null) return;\r
+ this.frameLoadedFlag = true;\r
+ var newContent = frameContent.cloneNode(true);\r
+ var newNodes = newContent.getElementsByClassName("node");\r
+ var oldContent = document.getElementById("graph-ui-content-1");\r
+ var oldNodes = oldContent.getElementsByClassName("node");\r
+ var completeText = iframe.contentWindow.document.getElementsByClassName("ui-content")[0].getElementsByTagName("h4")[0].getElementsByTagName("span")[3].innerHTML;\r
+ if(newNodes.length > oldNodes.length) {\r
+ console.log("execute in new > old");\r
+ newContent.id = "graph-ui-content-1";\r
+ var graphDiv = document.getElementById("workflow-graph");\r
+ graphDiv.innerHTML = '';\r
+ graphDiv.appendChild(newContent);\r
+ }\r
+ else if(newNodes.length == oldNodes.length) {\r
+ console.log("execute in new = old");\r
+ for(var i = 0; i < newNodes.length; i++)\r
+ {\r
+ var newGraph = newNodes[i].children[0];\r
+ var newGraphStyle = newGraph.getAttribute("style");\r
+ var oldGraph = oldNodes[i].children[0];\r
+ var oldGraphStyle = oldGraph.getAttribute("style");\r
+ if(newGraphStyle != oldGraphStyle) {\r
+ oldGraph.setAttribute("style", newGraphStyle);\r
+ }\r
+ var newText = newNodes[i].getElementsByTagName("text")[0];\r
+ var newTextStyle = newText.getAttribute("style");\r
+ var oldText = oldNodes[i].getElementsByTagName("text")[0];\r
+ var oldTextStyle = oldText.getAttribute("style");\r
+ if(oldTextStyle != newTextStyle) {\r
+ oldText.setAttribute("style", newTextStyle);\r
+ }\r
+ }\r
+ if(completeText == "COMPLETED") {\r
+ this.completeWF(5);\r
+ }\r
+ }\r
+ else {\r
+ console.log("execute in new < old");\r
+ }\r
+ },\r
+ repaintWFGraph: function() {\r
+ this.setIframeSrc();\r
+ var iframe = document.getElementById("testFrame");\r
+ var self = this;\r
+ if (iframe.attachEvent) {\r
+ iframe.attachEvent("onload", function(){\r
+ window.setTimeout(function(){\r
+ self.frameLoadedFlag = true;\r
+ self.repaint();\r
+ }, 1000);\r
+ });\r
+ } else {\r
+ iframe.onload = function(){\r
+ window.setTimeout(function(){\r
+ self.frameLoadedFlag = true;\r
+ self.repaint();\r
+ }, 1000);\r
+ }\r
+ }\r
+ },\r
+ completeWF: function(delay) {\r
+ this.wfCompletedFlag = true;\r
+ console.log("#####################################completed: clean the interval " + this.timer);\r
+ window.clearInterval(this.timer);\r
+ var self = this;\r
+ window.setTimeout(function() {\r
+ self.$emit("wfComplete", true);\r
+ }, delay*1000);\r
+ },\r
+ fillWfContent: function(wfContent) {\r
+ var contentDiv = document.getElementById("workflow-content");\r
+ contentDiv.innerHTML = wfContent;\r
+ }\r
+ }\r
+}\r
+</script>\r
+<style scoped>\r
+#workflow-graph {\r
+ text-align: center;\r
+}\r
+#workflow-graph > div{\r
+ display: inline-block;\r
+}\r
+</style>
\ No newline at end of file
Code Review / bottlenecks.git / blobdiff