diff options
Diffstat (limited to 'testing-scheduler/ui/src/components/workflow_graph/wfresult.vue')
| -rw-r--r-- | testing-scheduler/ui/src/components/workflow_graph/wfresult.vue | 236 |
1 files changed, 0 insertions, 236 deletions
diff --git a/testing-scheduler/ui/src/components/workflow_graph/wfresult.vue b/testing-scheduler/ui/src/components/workflow_graph/wfresult.vue deleted file mode 100644 index ace6076d..00000000 --- a/testing-scheduler/ui/src/components/workflow_graph/wfresult.vue +++ /dev/null @@ -1,236 +0,0 @@ -<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>
\ No newline at end of file |