config: dynamic doc links for views

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

ui/src/components/header/UserMenu.vue

@@ -39,7 +39,7 @@
           </router-link>
         </a-menu-item>
         <a-menu-item class="user-menu-item" key="3" disabled>
-          <a :href="helpUrl" target="_blank">
+          <a :href="docBase" target="_blank">
             <a-icon class="user-menu-item-icon" type="question-circle-o"></a-icon>
             <span class="user-menu-item-name">Help</span>
           </a>
@@ -70,7 +70,7 @@ export default {
   },
   data () {
     return {
-      helpUrl: config.helpUrl
+      docBase: config.docBase
     }
   },
   methods: {

ui/src/components/widgets/Breadcrumb.vue

@@ -18,6 +18,13 @@
 <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 }"
@@ -51,15 +58,15 @@
 </template>
 
 <script>
+import config from '@/config/settings'
 
 export default {
   name: 'Breadcrumb',
-  components: {
-  },
   data () {
     return {
       name: '',
-      breadList: []
+      breadList: [],
+      docBase: config.docBase
     }
   },
   created () {

ui/src/config/router.js

@@ -36,7 +36,7 @@ export function generateRouterMap (section) {
     name: section.name,
     path: '/' + section.name,
     hidden: section.hidden,
-    meta: { title: section.title, keepAlive: true, icon: section.icon },
+    meta: { title: section.title, keepAlive: true, icon: section.icon, docHelp: section.docHelp },
     component: RouteView
   }
 
@@ -54,6 +54,7 @@ export function generateRouterMap (section) {
           name: child.name,
           keepAlive: true,
           icon: child.icon,
+          docHelp: child.docHelp,
           permission: child.permission,
           resourceType: child.resourceType,
           params: child.params ? child.params : {},
@@ -117,6 +118,7 @@ export function generateRouterMap (section) {
         name: section.name,
         keepAlive: true,
         icon: section.icon,
+        docHelp: section.docHelp,
         permission: section.permission,
         resourceType: section.resourceType,
         params: section.params ? section.params : {},

ui/src/config/section/compute.js

@@ -24,6 +24,7 @@ export default {
       name: 'vm',
       title: 'Instances',
       icon: 'desktop',
+      docHelp: 'adminguide/virtual_machines.html',
       permission: ['listVirtualMachinesMetrics', 'listVirtualMachines'],
       resourceType: 'UserVm',
       columns: [
@@ -76,6 +77,7 @@ export default {
           api: 'startVirtualMachine',
           icon: 'caret-right',
           label: 'Start VM',
+          docHelp: 'adminguide/virtual_machines.html#stopping-and-starting-vms',
           dataView: true,
           groupAction: true,
           show: (record) => { return ['Stopped'].includes(record.state) },
@@ -85,6 +87,7 @@ export default {
           api: 'stopVirtualMachine',
           icon: 'stop',
           label: 'label.action.stop.instance',
+          docHelp: 'adminguide/virtual_machines.html#stopping-and-starting-vms',
           dataView: true,
           groupAction: true,
           args: ['id', 'forced'],
@@ -235,6 +238,7 @@ export default {
       name: 'vmgroup',
       title: 'Instance Groups',
       icon: 'gold',
+      docHelp: 'adminguide/virtual_machines.html#changing-the-vm-name-os-or-group',
       permission: ['listInstanceGroups'],
       columns: ['name', 'account', 'domain'],
       details: ['name', 'id', 'account', 'domain', 'created'],
@@ -271,6 +275,7 @@ export default {
       name: 'ssh',
       title: 'SSH Key Pairs',
       icon: 'key',
+      docHelp: 'adminguide/virtual_machines.html#using-ssh-keys-for-authentication',
       permission: ['listSSHKeyPairs'],
       columns: ['name', 'fingerprint', 'account', 'domain'],
       details: ['name', 'fingerprint', 'account', 'domain'],
@@ -307,6 +312,7 @@ export default {
       name: 'affinitygroup',
       title: 'Affinity Groups',
       icon: 'swap',
+      docHelp: 'adminguide/virtual_machines.html#affinity-groups',
       permission: ['listAffinityGroups'],
       columns: ['name', 'type', 'description', 'account', 'domain'],
       details: ['name', 'id', 'description', 'type', 'account', 'domain'],

ui/src/config/settings.js

@@ -27,7 +27,7 @@ export default {
   multiTab: false, // enable to have tab/route history stuff
   // CloudStack options
   apiBase: '/client/api',
-  helpUrl: 'http://docs.cloudstack.apache.org/en/latest/',
+  docBase: 'http://docs.cloudstack.apache.org/en/latest',
   appTitle: 'CloudStack',
   // vue-ls options
   storageOptions: {

ui/src/views/AutogenView.vue

@@ -96,7 +96,6 @@
       </keep-alive>
       <a-modal
         v-else
-        :title="$t(currentAction.label)"
         :visible="showAction"
         :closable="true"
         style="top: 20px;"
@@ -105,6 +104,16 @@
         :confirmLoading="currentAction.loading"
         centered
       >
+        <span slot="title">
+          {{ $t(currentAction.label) }}
+          <a
+            v-if="currentAction.docHelp || $route.meta.docHelp"
+            style="margin-left: 5px"
+            :href="docBase + '/' + (currentAction.docHelp || $route.meta.docHelp)"
+            target="_blank">
+            <a-icon type="question-circle-o"></a-icon>
+          </a>
+        </span>
         <a-spin :spinning="currentAction.loading">
           <a-form
             :form="form"
@@ -195,6 +204,7 @@
 <script>
 import { api } from '@/api'
 import { mixinDevice } from '@/utils/mixin.js'
+import config from '@/config/settings'
 import store from '@/store'
 
 import Breadcrumb from '@/components/widgets/Breadcrumb'
@@ -217,6 +227,7 @@ export default {
   data () {
     return {
       apiName: '',
+      docBase: config.docBase,
       loading: false,
       columns: [],
       items: [],