config: fix contextual navigation and rendering

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

Author: rohityadavcloud

ui/src/components/view/InfoCard.vue

@@ -308,8 +308,10 @@
 
       <div class="account-center-tags" v-if="$route.meta.related">
         <span v-for="item in $route.meta.related" :key="item.path">
-          <router-link :to="{ path: '/' + item.name + '?' + item.param + '=' + (item.param === 'account' ? resource.name + '&domainid=' + resource.domainid : resource.id) }">
-            <a-button style="margin-right: 10px">
+          <router-link
+            v-if="$router.resolve('/' + item.name).route.name !== '404'"
+            :to="{ path: '/' + item.name + '?' + item.param + '=' + (item.param === 'account' ? resource.name + '&domainid=' + resource.domainid : resource.id) }">
+            <a-button style="margin-right: 10px" :icon="$router.resolve('/' + item.name).route.meta.icon" >
               View {{ $t(item.title) }}
             </a-button>
           </router-link>

ui/src/components/view/ListView.vue

@@ -33,13 +33,29 @@
       </span>
     </template>
 
-    <a slot="name" slot-scope="text, record" href="javascript:;" style="display: inline-flex">
+    <a slot="name" slot-scope="text, record" href="javascript:;">
+      <div>
       <span v-if="$route.path.startsWith('/project')" style="margin-right: 5px">
         <a-button type="dashed" size="small" shape="circle" icon="login" @click="changeProject(record)" />
       </span>
       <console :resource="record" size="small" />
       <router-link :to="{ path: $route.path + '/' + record.id }" v-if="record.id">{{ text }}</router-link>
       <router-link :to="{ path: $route.path + '/' + record.name }" v-else>{{ text }}</router-link>
+      </div>
+      <div v-if="$route.meta.related" style="padding-top: 5px">
+        <span v-for="item in $route.meta.related" :key="item.path">
+          <router-link
+            v-if="$router.resolve('/' + item.name).route.name !== '404'"
+            :to="{ path: '/' + item.name + '?' + item.param + '=' + (item.param === 'account' ? record.name + '&domainid=' + record.domainid : record.id) }">
+            <a-tooltip placement="bottom">
+              <template slot="title">
+                View {{ $t(item.title) }}
+              </template>
+              <a-button size="small" shape="round" :icon="$router.resolve('/' + item.name).route.meta.icon" />
+            </a-tooltip>
+          </router-link>
+        </span>
+      </div>
     </a>
     <a slot="displayname" slot-scope="text, record" href="javascript:;">
       <router-link :to="{ path: $route.path + '/' + record.id }">{{ text }}</router-link>

ui/src/components/widgets/Breadcrumb.vue

@@ -18,13 +18,6 @@
 <template>
   <a-breadcrumb class="breadcrumb">
     <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-      <a
-        v-if="item.meta.docHelp"
-        style="margin-right: 5px"
-        :href="docBase + '/' + item.meta.docHelp"
-        target="_blank">
-        <a-icon type="question-circle-o"></a-icon>
-      </a>
       <router-link
         v-if="item && item.name"
         :to="{ path: item.path === '' ? '/' : item.path }"
@@ -40,18 +33,15 @@
       </span>
       <a-tooltip v-if="index === (breadList.length - 1)" placement="bottom">
         <template slot="title">
-          {{ "Refresh" }}
+          {{ "Open Documentation" }}
         </template>
-        <a-button
-          shape="circle"
-          style="margin-left: 8px"
-          @click="$emit('refresh')" >
-          <a-icon
-            type="reload"
-            style="margin-left: 0px"
-            @click="$emit('refresh')"
-          />
-        </a-button>
+        <a
+          v-if="item.meta.docHelp"
+          style="margin-right: 5px"
+          :href="docBase + '/' + $route.meta.docHelp"
+          target="_blank">
+          <a-icon type="question-circle-o"></a-icon>
+        </a>
       </a-tooltip>
     </a-breadcrumb-item>
   </a-breadcrumb>

ui/src/config/router.js

@@ -74,6 +74,7 @@ export function generateRouterMap (section) {
               name: child.name,
               keepAlive: true,
               icon: child.icon,
+              docHelp: child.docHelp,
               hidden: child.hidden,
               permission: child.permission,
               resourceType: child.resourceType,
@@ -190,21 +191,21 @@ export const asyncRouterMap = [
         children: [
           {
             path: '/exception/403',
-            name: 'Exception403',
+            name: '403',
             hidden: true,
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/403'),
             meta: { title: '403' }
           },
           {
             path: '/exception/404',
-            name: 'Exception404',
+            name: '404',
             hidden: true,
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404'),
             meta: { title: '404' }
           },
           {
             path: '/exception/500',
-            name: 'Exception500',
+            name: '500',
             hidden: true,
             component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/500'),
             meta: { title: '500' }

ui/src/config/section/network.js

@@ -32,6 +32,10 @@ export default {
         name: 'publicip',
         title: 'IP Addresses',
         param: 'associatednetworkid'
+      }, {
+        name: 'router',
+        title: 'Routers',
+        param: 'networkid'
       }, {
         name: 'vm',
         title: 'Instances',

ui/src/views/AutogenView.vue

@@ -19,53 +19,34 @@
   <div>
     <a-card class="mobile-breadcrumb">
       <a-row>
-        <a-col :span="24" style="display: inline-flex">
-          <breadcrumb style="margin-right: 10px; width: 100%" @refresh="fetchData()" />
-          <span
-            v-for="(action, actionIndex) in actions"
-            :key="actionIndex">
-            <a-tooltip
-              placement="bottom"
-              v-if="action.api in $store.getters.apis &&
-                ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) ||
-                (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))">
+        <a-col :span="14">
+          <breadcrumb style="padding-top: 6px" />
+        </a-col>
+        <a-col :span="10">
+          <span style="float: right">
+            <a-tooltip placement="bottom">
               <template slot="title">
-                {{ $t(action.label) }}
+                {{ "Refresh" }}
               </template>
               <a-button
-                :icon="action.icon"
-                :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
+                :loading="loading"
                 shape="circle"
+                type="dashed"
+                icon="reload"
                 style="margin-right: 5px"
-                @click="execAction(action)"
-              >
-              </a-button>
+                @click="fetchData()" />
             </a-tooltip>
-          </span>
-
-          <a-input-search
-            style="width: 100%; padding-left: 5px"
-            size="default"
-            placeholder="Search"
-            v-model="searchQuery"
-            v-if="!dataView"
-            @search="onSearch"
-          >
-          </a-input-search>
-        </a-col>
-        <a-col :span="24" v-if="false">
-          <span
-            v-for="(action, actionIndex) in actions"
-            :key="actionIndex">
             <a-tooltip
-              placement="bottom"
-              v-if="action.api in $store.getters.apis &&
-                ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) ||
-                (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))">
+              v-for="(action, actionIndex) in actions"
+              :key="actionIndex"
+              placement="bottom">
               <template slot="title">
                 {{ $t(action.label) }}
               </template>
               <a-button
+                v-if="action.api in $store.getters.apis &&
+                  ((!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) ||
+                  (dataView && action.dataView && ('show' in action ? action.show(resource) : true)))"
                 :icon="action.icon"
                 :type="action.icon === 'delete' ? 'danger' : (action.icon === 'plus' ? 'primary' : 'default')"
                 shape="circle"
@@ -74,6 +55,12 @@
               >
               </a-button>
             </a-tooltip>
+            <a-input-search
+              style="width: unset"
+              placeholder="Search"
+              v-model="searchQuery"
+              v-if="!dataView"
+              @search="onSearch" />
           </span>
         </a-col>
       </a-row>