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
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
14 <div id="workflow-graph">
\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
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
37 props: ['workflowId', 'wfloading', 'wfJson'],
\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
52 return !this.wfloading;
\r
56 workflowId: function(val){
\r
57 console.log("############## workflowId changed! " + val);
\r
60 wfJson: function(val){
\r
61 this.fillWfContent(val);
\r
64 mounted: function(){
\r
65 window.clearInterval(this.timer);
\r
67 destroyed: function(){
\r
68 window.clearInterval(this.timer);
\r
71 graphLoad: function(){
\r
72 console.log("load function activate");
\r
74 this.initialPaintWFGraph();
\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
83 if(self.frameLoadedFlag || self.responseTimeCounter > self.RESPONSE_TIME_LIMIT) {
\r
84 self.repaintWFGraph();
\r
85 self.responseTimeCounter = 0;
\r
88 self.responseTimeCounter += self.intervalTime;
\r
89 }, self.intervalTime);
\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
100 initialPaintWFGraph: function() {
\r
101 console.log("start to initial paint");
\r
102 this.setIframeSrc();
\r
103 var iframe = document.getElementById("testFrame");
\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
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
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
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
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
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
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
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
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
185 if(completeText == "COMPLETED") {
\r
186 this.completeWF(5);
\r
190 console.log("execute in new < old");
\r
193 repaintWFGraph: function() {
\r
194 this.setIframeSrc();
\r
195 var iframe = document.getElementById("testFrame");
\r
197 if (iframe.attachEvent) {
\r
198 iframe.attachEvent("onload", function(){
\r
199 window.setTimeout(function(){
\r
200 self.frameLoadedFlag = true;
\r
205 iframe.onload = function(){
\r
206 window.setTimeout(function(){
\r
207 self.frameLoadedFlag = true;
\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
218 window.setTimeout(function() {
\r
219 self.$emit("wfComplete", true);
\r
222 fillWfContent: function(wfContent) {
\r
223 var contentDiv = document.getElementById("workflow-content");
\r
224 contentDiv.innerHTML = wfContent;
\r
231 text-align: center;
\r
233 #workflow-graph > div{
\r
234 display: inline-block;
\r