component refactoring

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

ui/src/components/CloudMonkey/Resource.vue

@@ -1,26 +1,6 @@
 <template>
   <div>
-    <a-breadcrumb class="breadcrumb" v-if="device !== 'desktop'" style="margin-left: -16px; margin-right: -16px; margin-top: -16px">
-      <a-card :bordered="true">
-        <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-          <router-link
-            v-if="item.name"
-            :to="{ path: item.path === '' ? '/' : item.path }"
-          >
-            <a-icon v-if="index == 0" :type="item.meta.icon" />
-            {{ $t(item.meta.title) }}
-          </router-link>
-          <span v-else-if="$route.params.id">
-            {{ $route.params.id }}
-            <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
-              <a-icon type="copy" style="margin-left: 0px"/>
-            </a-button>
-          </span>
-          <span v-else>{{ $t(tem.meta.title) }}</span>
-        </a-breadcrumb-item>
-      </a-card>
-    </a-breadcrumb>
-
+    <breadcrumb v-if="device !== 'desktop'" style="margin-left: -16px; margin-right: -16px; margin-top: -16px" />
     <a-row>
       <a-col :span="17">
         <a-tooltip placement="bottom" v-for="(action, actionIndex) in actions" :key="actionIndex" v-if="(!dataView && (action.listView || action.groupAction && selectedRowKeys.length > 0)) || (dataView && action.dataView)">
@@ -103,72 +83,88 @@
       </a-col>
     </a-row>
 
-    <a-modal
-      :title="currentAction.label"
-      :visible="showAction"
-      :closable="true"
-      style="top: 20px;"
-      @ok="handleSubmit"
-      @cancel="closeAction"
-      :confirmLoading="currentAction.loading"
-      centered
-    >
-      <a-spin :spinning="currentAction.loading">
-        <a-form
-          :form="form"
-          @submit="handleSubmit"
-          layout="vertical" >
-          <a-form-item
-            v-for="(field, fieldIndex) in currentAction.params"
-            :key="fieldIndex"
-            :label="field.name"
-            :v-bind="field.name"
-            v-if="field.name !== 'id'"
-          >
+    <div v-show="showAction">
+      <keep-alive v-if="currentAction.component">
+        <a-modal
+          :title="currentAction.label"
+          :visible="showAction"
+          :closable="true"
+          style="top: 20px;"
+          @ok="handleSubmit"
+          @cancel="closeAction"
+          :confirmLoading="currentAction.loading"
+          centered
+        >
+          <component :is="currentAction.component"/></component>
+        </a-modal>
+      </keep-alive>
 
-            <span v-if="field.type==='boolean'">
-              <a-switch
-                v-decorator="[field.name, {
-                  rules: [{ required: field.required, message: 'Please provide input' }]
-                }]"
-                :placeholder="field.description"
-              />
-            </span>
-            <span v-else-if="field.type==='uuid' || field.name==='account'">
-              <a-select
-                :loading="field.loading"
-                v-decorator="[field.name, {
-                  rules: [{ required: field.required, message: 'Please select option' }]
-                }]"
-                :placeholder="field.description"
+      <a-modal
+        :title="currentAction.label"
+        :visible="showAction"
+        :closable="true"
+        style="top: 20px;"
+        @ok="handleSubmit"
+        @cancel="closeAction"
+        :confirmLoading="currentAction.loading"
+        centered
+      >
+        <a-spin :spinning="currentAction.loading">
+          <a-form
+            :form="form"
+            @submit="handleSubmit"
+            layout="vertical" >
+            <a-form-item
+              v-for="(field, fieldIndex) in currentAction.params"
+              :key="fieldIndex"
+              :label="$t(field.name)"
+              :v-bind="field.name"
+              v-if="field.name !== 'id'"
+            >
 
-              >
-                <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
-                  {{ opt.name }}
-                </a-select-option>
-              </a-select>
-            </span>
-            <span v-else-if="field.type==='long'">
-              <a-input-number
-                v-decorator="[field.name, {
-                  rules: [{ required: field.required, message: 'Please enter a number' }]
-                }]"
-                :placeholder="field.description"
-              />
-            </span>
-            <span v-else>
-              <a-input
-                v-decorator="[field.name, {
-                  rules: [{ required: field.required, message: 'Please enter input' }]
-                }]"
-                :placeholder="field.description"
-              />
-            </span>
-          </a-form-item>
+              <span v-if="field.type==='boolean'">
+                <a-switch
+                  v-decorator="[field.name, {
+                    rules: [{ required: field.required, message: 'Please provide input' }]
+                  }]"
+                  :placeholder="field.description"
+                />
+              </span>
+              <span v-else-if="field.type==='uuid' || field.name==='account'">
+                <a-select
+                  :loading="field.loading"
+                  v-decorator="[field.name, {
+                    rules: [{ required: field.required, message: 'Please select option' }]
+                  }]"
+                  :placeholder="field.description"
 
-        </a-form>
-      </a-spin>
-    </a-modal>
+                >
+                  <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
+                    {{ opt.name }}
+                  </a-select-option>
+                </a-select>
+              </span>
+              <span v-else-if="field.type==='long'">
+                <a-input-number
+                  v-decorator="[field.name, {
+                    rules: [{ required: field.required, message: 'Please enter a number' }]
+                  }]"
+                  :placeholder="field.description"
+                />
+              </span>
+              <span v-else>
+                <a-input
+                  v-decorator="[field.name, {
+                    rules: [{ required: field.required, message: 'Please enter input' }]
+                  }]"
+                  :placeholder="field.description"
+                />
+              </span>
+            </a-form-item>
+          </a-form>
+        </a-spin>
+      </a-modal>
+    </div>
 
     <div v-if="dataView">
       <instance-view :vm="resource" v-if="routeName == 'vm'" />
@@ -185,6 +181,7 @@
         :loading="loading"
         v-show="!tableView" />
     </div>
+
   </div>
 </template>
 
@@ -192,10 +189,10 @@
 import { api } from '@/api'
 import { mixinDevice } from '@/utils/mixin.js'
 import store from '@/store'
+import Breadcrumb from '@/components/widgets/Breadcrumb'
 import CardView from '@/components/widgets/CardView'
 import ChartCard from '@/components/chart/ChartCard'
 import DataView from '@/components/widgets/DataView'
-import FormView from '@/components/widgets/FormView'
 import InstanceView from '@/components/widgets/InstanceView'
 import ListView from '@/components/widgets/ListView'
 import Status from '@/components/widgets/Status'
@@ -203,10 +200,10 @@ import Status from '@/components/widgets/Status'
 export default {
   name: 'Resource',
   components: {
+    Breadcrumb,
     CardView,
     ChartCard,
     DataView,
-    FormView,
     InstanceView,
     ListView,
     Status
@@ -225,7 +222,6 @@ export default {
       showAction: false,
       dataView: false,
       actions: [],
-      breadList: [],
       tableView: true
     }
   },
@@ -253,15 +249,7 @@ export default {
     this.form = this.$form.createForm(this)
   },
   methods: {
-    getBreadcrumb () {
-      this.breadList = []
-      this.name = this.$route.name
-      this.$route.matched.forEach((item) => {
-        this.breadList.push(item)
-      })
-    },
     fetchData (search = '') {
-      this.getBreadcrumb()
       this.routeName = this.$route.name
       if (!this.routeName) {
         this.routeName = this.$route.matched[this.$route.matched.length - 1].parent.name

ui/src/components/page/GlobalHeader.vue

@@ -73,7 +73,6 @@
 import UserMenu from '../tools/UserMenu'
 import SMenu from '../menu/'
 import Logo from '../tools/Logo'
-import Breadcrumb from '@/components/tools/Breadcrumb'
 
 import { mixin } from '@/utils/mixin.js'
 
@@ -82,8 +81,7 @@ export default {
   components: {
     SMenu,
     Logo,
-    UserMenu,
-    Breadcrumb
+    UserMenu
   },
   mixins: [mixin],
   props: {

ui/src/components/page/PageHeader.vue

@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import Breadcrumb from '@/components/tools/Breadcrumb'
+import Breadcrumb from '@/components/widgets/Breadcrumb'
 
 export default {
   name: 'PageHeader',

ui/src/components/tools/Breadcrumb.vue

@@ -1,51 +0,0 @@
-<template>
-  <a-breadcrumb class="breadcrumb">
-    <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
-      <router-link v-if="item.name != name" :to="{ path: item.path }">
-        {{ this.$t(item.meta.title) }}
-      </router-link>
-      <span v-else>{{ this.$t(item.meta.title) }}</span>
-    </a-breadcrumb-item>
-  </a-breadcrumb>
-</template>
-
-<script>
-export default {
-  data () {
-    return {
-      name: '',
-      breadList: []
-    }
-  },
-  created () {
-    this.getBreadcrumb()
-  },
-  methods: {
-    getBreadcrumb () {
-      console.log('this.$route.matched', this.$route.matched)
-
-      this.breadList = []
-      this.breadList.push({ name: 'index', path: '/dashboard/', meta: { title: '首页' } })
-
-      this.name = this.$route.name
-      this.$route.matched.forEach((item) => {
-        // item.meta.name === 'dashboard' ? item.path = '/dashboard' : this.$route.path === item.path
-        this.breadList.push(item)
-      })
-    }
-  },
-  watch: {
-    $route () {
-      this.getBreadcrumb()
-    }
-  }
-}
-</script>
-
-<style lang="less" scoped>
-  .breadcrumb {
-    .mobile & {
-      display: none;
-    }
-  }
-</style>

ui/src/components/widgets/Breadcrumb.vue

@@ -0,0 +1,65 @@
+<template>
+  <a-breadcrumb class="breadcrumb">
+    <a-card :bordered="true">
+      <a-breadcrumb-item v-for="(item, index) in breadList" :key="index">
+        <router-link
+          v-if="item.name"
+          :to="{ path: item.path === '' ? '/' : item.path }"
+        >
+          <a-icon v-if="index == 0" :type="item.meta.icon" />
+          {{ $t(item.meta.title) }}
+        </router-link>
+        <span v-else-if="$route.params.id">
+          {{ $route.params.id }}
+          <a-button shape="circle" type="dashed" size="small" v-clipboard:copy="$route.params.id">
+            <a-icon type="copy" style="margin-left: 0px"/>
+          </a-button>
+        </span>
+        <span v-else>{{ $t(item.meta.title) }}</span>
+      </a-breadcrumb-item>
+    </a-card>
+  </a-breadcrumb>
+</template>
+
+<script>
+
+export default {
+  name: 'Breadcrumb',
+  components: {
+  },
+  data () {
+    return {
+      name: '',
+      breadList: []
+    }
+  },
+  created () {
+    this.getBreadcrumb()
+  },
+  watch: {
+    $route () {
+      this.getBreadcrumb()
+    }
+  },
+  methods: {
+    getBreadcrumb () {
+      this.breadList = []
+      this.name = this.$route.name
+      this.$route.matched.forEach((item) => {
+        this.breadList.push(item)
+      })
+    }
+  }
+}
+</script>
+
+<style>
+.ant-breadcrumb {
+  vertical-align: text-bottom;
+  margin-bottom: 8px;
+}
+
+.ant-breadcrumb .anticon {
+  margin-left: 8px;
+}
+</style>

ui/src/components/widgets/FormView.vue

@@ -1,12 +1,12 @@
 <template>
   <a-modal
     :title="currentAction.label"
+    :visible="showForm"
     :closable="true"
-    :visible="showAction"
+    :confirmLoading="currentAction.loading"
     style="top: 20px;"
     @ok="handleSubmit"
     @cancel="close"
-    :confirmLoading="currentAction.loading"
     centered
   >
     <a-spin :spinning="currentAction.loading">
@@ -17,11 +17,10 @@
         <a-form-item
           v-for="(field, fieldIndex) in currentAction.params"
           :key="fieldIndex"
-          :label="field.name"
+          :label="$t(field.name)"
           :v-bind="field.name"
           v-if="field.name !== 'id'"
         >
-
           <span v-if="field.type==='boolean'">
             <a-switch
               v-decorator="[field.name, {
@@ -80,21 +79,23 @@ export default {
       type: Object,
       required: true
     },
-    showAction: {
+    showForm: {
       type: Boolean,
       default: false
     },
     handleSubmit: {
       type: Function,
       default: () => {}
-    },
-    close: {
-      type: Function,
-      default: () => {}
     }
   },
   beforeCreate () {
     this.form = this.$form.createForm(this)
+  },
+  methods: {
+    close () {
+      this.currentAction.loading = false
+      this.showForm = false
+    }
   }
 }
 </script>

ui/src/components/widgets/ListView.vue

@@ -1,6 +1,6 @@
 <template>
   <a-table
-    :size="columns.length > 12 ? 'small' : 'medium'"
+    size="small"
     :loading="loading"
     :columns="columns"
     :dataSource="items"

ui/src/config/router.js

@@ -26,7 +26,7 @@ export function generateRouterMap (section) {
     map.meta.permission = section.children[0].permission
     map.children = []
     for (const child of section.children) {
-      map.children.push({
+      var route = {
         name: child.name,
         path: '/' + child.name,
         meta: {
@@ -54,7 +54,8 @@ export function generateRouterMap (section) {
             component: child.viewComponent ? child.viewComponent : child.component
           }
         ]
-      })
+      }
+      map.children.push(route)
     }
   } else {
     map.hideChildrenInMenu = true

ui/src/config/section/infra.js

@@ -10,7 +10,16 @@ export default {
       icon: 'global',
       permission: [ 'listZones', 'listZonesMetrics' ],
       component: () => import('@/components/CloudMonkey/Resource.vue'),
-      columns: [ 'name', 'allocationstate', 'networktype', 'guestcidraddress' ]
+      columns: [ 'name', 'allocationstate', 'networktype', 'guestcidraddress' ],
+      actions: [
+        {
+          api: 'createZone',
+          icon: 'plus',
+          label: 'Add Zone',
+          listView: true,
+          component: () => import('@/views/infra/ZoneWizard.vue')
+        }
+      ]
     },
     {
       name: 'pod',

ui/src/views/infra/Zone.vue

@@ -1,23 +0,0 @@
-<template>
-  <div>
-
-  </div>
-</template>
-
-<script>
-
-export default {
-  name: '',
-  components: {
-  },
-  data () {
-    return {
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style scoped>
-</style>

ui/src/views/infra/ZoneWizard.vue

@@ -0,0 +1,27 @@
+<template>
+  <div>
+    <a-steps direction="vertical" :current="1">
+      <a-step title="Finished" description="This is a description." />
+      <a-step title="In Progress" description="This is a description." />
+      <a-step title="Waiting" description="This is a description." />
+    </a-steps>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'ZoneWizard',
+  components: {
+  },
+  data () {
+    return {
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+</style>