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