router: don't cache components

Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>

ui/src/components/view/InfoCard.vue

@@ -29,7 +29,7 @@
             </div>
             <slot name="name">
               <h4 class="name">
-                {{ resource.displayname || resource.name || resource.displaytext || resource.hostname || resource.username || resource.ipaddress }}
+                {{ resource.displayname || resource.displaytext || resource.name || resource.hostname || resource.username || resource.ipaddress }}
               </h4>
               <console style="margin-left: 10px" :resource="resource" size="default" v-if="resource.id" />
             </slot>

ui/src/config/router.js

@@ -37,7 +37,7 @@ export function generateRouterMap (section) {
     name: section.name,
     path: '/' + section.name,
     hidden: section.hidden,
-    meta: { title: section.title, keepAlive: true, icon: section.icon, docHelp: section.docHelp },
+    meta: { title: section.title, icon: section.icon, docHelp: section.docHelp },
     component: RouteView
   }
 
@@ -54,7 +54,6 @@ export function generateRouterMap (section) {
         meta: {
           title: child.title,
           name: child.name,
-          keepAlive: true,
           icon: child.icon,
           docHelp: child.docHelp,
           permission: child.permission,
@@ -76,7 +75,6 @@ export function generateRouterMap (section) {
             meta: {
               title: child.title,
               name: child.name,
-              keepAlive: true,
               icon: child.icon,
               docHelp: child.docHelp,
               permission: child.permission,
@@ -104,7 +102,6 @@ export function generateRouterMap (section) {
             meta: {
               title: child.title,
               name: child.name,
-              keepAlive: true,
               permission: [action.api]
             },
             component: action.component
@@ -122,7 +119,6 @@ export function generateRouterMap (section) {
       meta: {
         title: section.title,
         name: section.name,
-        keepAlive: true,
         icon: section.icon,
         docHelp: section.docHelp,
         hidden: section.hidden,
@@ -170,7 +166,6 @@ export const asyncRouterMap = [
         name: 'dashboard',
         meta: {
           title: 'Dashboard',
-          keepAlive: true,
           icon: 'dashboard',
           tabs: [
             {

ui/src/views/AutogenView.vue

@@ -325,19 +325,7 @@ export default {
   },
   watch: {
     '$route' (to, from) {
-      // The route config creates two groups of section components one for each
+      if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
-      // related paths. Once these two groups of components are mounted, on
-      // route changes this method is called twice causing multiple API calls.
-      // The following fixes this issue by using logical XOR to identify the
-      // current component against related `to` route and the path the component
-      // was in and only calls fetchData if `to` route and currentPath are of
-      // the same group of routes.
-
-      const related = ['/project', '/event', '/dashboard']
-      const toPath = related.map(o => to.fullPath.includes(o)).includes(true)
-      const inPath = related.map(o => this.currentPath.includes(o)).includes(true)
-      this.needToFetchData = ((toPath ^ inPath) === 0)
-      if (this.needToFetchData && to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
         this.searchQuery = ''
         this.page = 1
         this.itemCount = 0