1 files changed, 29 insertions, 5 deletions
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>
+