Merge "add testsuite and testcase list pages in frontend of testing-scheduler"

1 files changed, 236 insertions, 0 deletions

diff --git a/testing-scheduler/ui/src/components/workflow_graph/wfresult.vue b/testing-scheduler/ui/src/components/workflow_graph/wfresult.vue
new file mode 100644
index 00000000..ace6076d
--- /dev/null
+++ b/testing-scheduler/ui/src/components/workflow_graph/wfresult.vue
@@ -0,0 +1,236 @@
+<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