From 399ec2f328f56c1f81c454ecedfb6b99eaf93c42 Mon Sep 17 00:00:00 2001
From: LeoQi <QibinZheng2014@tongji.edu.cn>
Date: Thu, 20 Sep 2018 09:38:01 +0800
Subject: fix testsuite name bugs and improve some ui details

JIRA: BOTTLENECK-247

fix the bug where the testsuite name contains Chinese characters.
add license header automatically when a testcase created.
ui improvements:
workflow panel only turns up when a testcase executes.
add grafana pages in the webpage 'Test Result'.
add the highlight effect on the navigation item.

Change-Id: If0ddf82fd4630128f2c4dd7fdde30f037e5bfba7
Signed-off-by: LeoQi <QibinZheng2014@tongji.edu.cn>
---
 test-scheduler/ui/src/App.vue                      | 34 ++++++++++++++++++----
 test-scheduler/ui/src/Global.vue                   |  5 +++-
 test-scheduler/ui/src/assets/css/mystyle.css       |  3 ++
 test-scheduler/ui/src/components/test_result.vue   | 21 +++++++++++++
 test-scheduler/ui/src/components/testcase.vue      | 12 +++++---
 .../ui/src/components/testcase_content.vue         | 11 +++++--
 test-scheduler/ui/src/components/testsuite.vue     | 12 +++++---
 test-scheduler/ui/src/router/index.js              | 10 ++++---
 8 files changed, 87 insertions(+), 21 deletions(-)
 create mode 100644 test-scheduler/ui/src/components/test_result.vue

(limited to 'test-scheduler/ui/src')

diff --git a/test-scheduler/ui/src/App.vue b/test-scheduler/ui/src/App.vue
index c432a12d..0b77aa63 100644
--- a/test-scheduler/ui/src/App.vue
+++ b/test-scheduler/ui/src/App.vue
@@ -3,10 +3,10 @@
     <div class="row border-bottom blue-bg my-page-header">
         <p id="title">OPNFV Bottlenecks Portal</p>
         <ul id="intr_table" class="nav navbar-nav">
-          <li><router-link to="/">Test Suites</router-link></li>
-          <li><router-link to="/result">Test Results</router-link></li>
-          <li><router-link to="/report">Reports</router-link></li>
-          <li><router-link to="/environment">Environments</router-link></li>
+          <li v-bind:class="{'router-link-active': cur_route == '/'}"><router-link to="/">Test Suites</router-link></li>
+          <li v-bind:class="{'router-link-active': cur_route == 'result'}"><router-link to="/result">Test Results</router-link></li>
+          <li v-bind:class="{'router-link-active': cur_route == 'report'}"><router-link to="/report">Reports</router-link></li>
+          <li v-bind:class="{'router-link-active': cur_route == 'environment'}"><router-link to="/environment">Environments</router-link></li>
         </ul>
     </div>
     <router-view/>
@@ -14,6 +14,30 @@
 </template>
 <script>
 export default {
-  name: 'App'
+  name: 'App',
+  data: function() {
+    return {
+      cur_route: ''
+    }
+  },
+  watch: {
+    '$route': function() {
+      this.highlightLink();
+    }
+  },
+  mounted: function() {
+    this.highlightLink();
+  },
+  methods: {
+    highlightLink: function() {
+      var name = this.$route.name;
+      if(name == 'result' || name == 'report' || name == 'environment') {
+        this.cur_route = name;
+      } else {
+        this.cur_route = '/';
+      }
+    }
+  }
 }
 </script>
+
diff --git a/test-scheduler/ui/src/Global.vue b/test-scheduler/ui/src/Global.vue
index 71defaac..f9dfed72 100644
--- a/test-scheduler/ui/src/Global.vue
+++ b/test-scheduler/ui/src/Global.vue
@@ -2,9 +2,12 @@
 const SERVER_ADDR = '/parser/'
 const WF_GRAPH_ADDR = '/wf-graph/'
 const WF_SERVER_ADDR = '/wf-server/'
+const GRAFANA_PORT = 3000
+const GRAFANA_ADDR = 'http://' + window.location.hostname + ':' + GRAFANA_PORT + '/?orgId=1'
 export default {
     SERVER_ADDR,
     WF_GRAPH_ADDR,
-    WF_SERVER_ADDR
+    WF_SERVER_ADDR,
+    GRAFANA_ADDR
 }
 </script>
diff --git a/test-scheduler/ui/src/assets/css/mystyle.css b/test-scheduler/ui/src/assets/css/mystyle.css
index 72692469..942605b7 100644
--- a/test-scheduler/ui/src/assets/css/mystyle.css
+++ b/test-scheduler/ui/src/assets/css/mystyle.css
@@ -32,6 +32,9 @@ header{
 #intr_table li a:active{
     background-color: #1c84c6;
 }
+#intr_table li.router-link-active a {
+    font-weight: bold;
+}
 .title-section {
     margin-bottom: 10px;
 }
diff --git a/test-scheduler/ui/src/components/test_result.vue b/test-scheduler/ui/src/components/test_result.vue
new file mode 100644
index 00000000..37bbc4da
--- /dev/null
+++ b/test-scheduler/ui/src/components/test_result.vue
@@ -0,0 +1,21 @@
+<template>
+    <div>
+        <iframe style='min-height: 700px;' height='100%' width='100%'
+        v-bind:src='frameSrc'>
+        </iframe>
+    </div>
+</template>
+
+<script>
+
+export default {
+    data: function() {
+        return {
+            frameSrc: this.global.GRAFANA_ADDR
+        }
+    }
+}
+</script>
+
+<style scoped>
+</style>
diff --git a/test-scheduler/ui/src/components/testcase.vue b/test-scheduler/ui/src/components/testcase.vue
index 9c8ef85e..875089ef 100644
--- a/test-scheduler/ui/src/components/testcase.vue
+++ b/test-scheduler/ui/src/components/testcase.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper wrapper-content animated fadeIn">
     <div class="row" style="margin-bottom: 20px;">
-      <div class="col-md-8">
+      <div class="col-md-12">
         <ol class="breadcrumb" style="padding-left: 20px; font-size: 17px;">
           <li>
             <router-link to="/" >root</router-link>
@@ -13,7 +13,7 @@
       </div>
     </div>
     <div id="page-content" style="" class="row">
-        <div class="col-lg-8">
+        <div class="col-lg-12">
             <div class="ibox">
                 <div class="ibox-title">
                     <h5 style="font-size:26px;margin-top: -3px;">Test Case</h5>
@@ -55,7 +55,7 @@
         </div>
     </div>
     <hr />
-    <div class="row">
+    <div class="row" v-show="runYet">
       <div class="col-lg-12">
           <div class="ibox">
               <div class="ibox-title">
@@ -126,7 +126,8 @@ export default {
       selected: [],
       curRunningId: 0,
       runTestcases: [],
-      wfComplete: false
+      wfComplete: false,
+      runYet: false
     }
   },
   created: function() {
@@ -243,6 +244,9 @@ export default {
     runMultiTestcase: function() {
       var self = this;
       var msgTitle = "RUN -- TESTCASES";
+      if(!self.runYet) {
+        self.runYet = true;
+      }
       self.runTestcases = [];
       if(self.selected.length == 0) {
         showMessage("warning", msgTitle, "please select one!");
diff --git a/test-scheduler/ui/src/components/testcase_content.vue b/test-scheduler/ui/src/components/testcase_content.vue
index 49169cee..a9ea78e7 100644
--- a/test-scheduler/ui/src/components/testcase_content.vue
+++ b/test-scheduler/ui/src/components/testcase_content.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper wrapper-content animated fadeIn">
     <div class="row" style="margin-bottom: 20px;">
-      <div class="col-md-8">
+      <div class="col-md-12">
         <ol class="breadcrumb" style="padding-left: 20px; font-size: 17px;">
           <li>
             <router-link to="/" >root</router-link>
@@ -57,7 +57,7 @@
       </div>
     </div>
     <hr />
-    <div class="row">
+    <div class="row" v-show="runYet">
       <div class="col-lg-12">
           <div class="ibox">
               <div class="ibox-title">
@@ -98,7 +98,9 @@ export default {
           workflowId: '',
           wfloading: false,
           wfJson: '',
-          saveSignal: false
+          wfComplete: false,
+          saveSignal: false,
+          runYet: false,
       }
     },
     created: function() {
@@ -121,6 +123,9 @@ export default {
       runTestcase: function(){
         var self = this;
         var msgTitle = "RUN -- TESTCASE";
+        if(!self.runYet) {
+          self.runYet = true;
+        }
         $.ajax({
             url: this.global.SERVER_ADDR + "execute/testcase",
             method: "POST",
diff --git a/test-scheduler/ui/src/components/testsuite.vue b/test-scheduler/ui/src/components/testsuite.vue
index 5bdcbcc1..c6bb5a70 100644
--- a/test-scheduler/ui/src/components/testsuite.vue
+++ b/test-scheduler/ui/src/components/testsuite.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="wrapper wrapper-content animated fadeIn">
     <div class="row" style="margin-bottom: 20px;">
-      <div class="col-md-8">
+      <div class="col-md-12">
         <ol class="breadcrumb" style="padding-left: 20px; font-size: 17px;">
           <li>
             <router-link to="/" >root</router-link>
@@ -10,7 +10,7 @@
       </div>
     </div>
     <div id="page-content" class="row">
-      <div class="col-lg-8">
+      <div class="col-lg-12">
         <div class="ibox">
             <div class="ibox-title">
                 <h5 style="font-size:26px;margin-top: -3px;">Test Suite</h5>
@@ -52,7 +52,7 @@
       </div>
     </div>
     <hr />
-    <div class="row">
+    <div class="row" v-show="runYet">
       <div class="col-lg-12">
           <div class="ibox">
               <div class="ibox-title">
@@ -126,7 +126,8 @@ export default {
         caseName: ""
       },
       curRunningId: 0,
-      wfComplete: false
+      wfComplete: false,
+      runYet: false
     }
   },
   created: function() {
@@ -239,6 +240,9 @@ export default {
     runTestsuites: function() {
       var self = this;
       var msgTitle = "RUN -- TESTSUITE";
+      if(!self.runYet) {
+        self.runYet = true;
+      }
       if(self.selected.length == 0) {
         showMessage("warning", msgTitle, "please select one!");
         return;
diff --git a/test-scheduler/ui/src/router/index.js b/test-scheduler/ui/src/router/index.js
index 8cc3da13..7617eddf 100644
--- a/test-scheduler/ui/src/router/index.js
+++ b/test-scheduler/ui/src/router/index.js
@@ -3,11 +3,10 @@ import Router from 'vue-router'
 import testsuite from '@/components/testsuite'
 import testcase from '@/components/testcase'
 import testcase_content from '@/components/testcase_content'
+import test_result from '@/components/test_result'
 import environment from '@/components/environment'
 Vue.use(Router)
-const Result = {
-  template: "<div>please visit <a target='blank' href='http://lab205.jios.org:30002/dashboard/db/cluster?orgId=1'>grafana page.</a></div>"
-}
+
 const Report = {
   template: "<div></div>"
 }
@@ -30,14 +29,17 @@ export default new Router({
     },
     {
       path: '/result',
-      component: Result
+      name: 'result',
+      component: test_result
     },
     {
       path: '/report',
+      name: 'report',
       component: Report
     },
     {
       path: '/environment',
+      name: 'environment',
       component: environment
     }
   ]
-- 
cgit 1.2.3-korg