iam: new view component for Tree Domain (#324)

Restructuring the Tree Domain avoids unnecessary dependencies in AutogenView

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

ui/src/components/view/TreeView.vue

@@ -399,6 +399,8 @@ export default {
       params.page = 1
       params.pageSize = 1
 
+      this.detailLoading = true
+
       api(apiName, params).then(json => {
         const jsonResponse = this.getResponseJsonData(json)
 
@@ -418,6 +420,8 @@ export default {
 
         // emit change resource to parent
         this.$emit('change-resource', this.resource)
+      }).finally(() => {
+        this.detailLoading = false
       })
     },
     getResponseJsonData (json) {

ui/src/config/router.js

@@ -67,8 +67,7 @@ function generateRouterMap (section) {
           details: child.details,
           related: child.related,
           actions: child.actions,
-          treeView: child.treeView ? child.treeView : false,
-          tabs: child.treeView ? child.tabs : {}
+          tabs: child.tabs
         },
         component: component,
         hideChildrenInMenu: true,

ui/src/config/section/domain.js

@@ -23,6 +23,7 @@ export default {
   resourceType: 'Domain',
   columns: ['name', 'state', 'path', 'parentdomainname', 'level'],
   details: ['name', 'id', 'path', 'parentdomainname', 'level', 'networkdomain', 'iptotal', 'vmtotal', 'volumetotal', 'vmlimit', 'iplimit', 'volumelimit', 'snapshotlimit', 'templatelimit', 'vpclimit', 'cpulimit', 'memorylimit', 'networklimit', 'primarystoragelimit', 'secondarystoragelimit'],
+  component: () => import('@/views/iam/DomainView.vue'),
   related: [{
     name: 'account',
     title: 'label.accounts',
@@ -56,7 +57,7 @@ export default {
       icon: 'plus',
       label: 'label.add.domain',
       listView: true,
-      dataView: true,
+      dataView: false,
       args: ['parentdomainid', 'name', 'networkdomain', 'domainid'],
       mapping: {
         parentdomainid: {

ui/src/locales/en.json

@@ -633,6 +633,7 @@
 "label.delete.srx": "Delete SRX",
 "label.delete.sslcertificate": "Delete SSL Certificate",
 "label.delete.ucs.manager": "Delete UCS Manager",
+"label.delete.domain": "Delete Domain",
 "label.delete.volumes": "Data Volumes to be deleted",
 "label.delete.vpn.connection": "Delete VPN connection",
 "label.delete.vpn.customer.gateway": "Delete VPN Customer Gateway",

ui/src/views/AutogenView.vue

@@ -54,7 +54,7 @@
           :span="device === 'mobile' ? 24 : 12"
           :style="device === 'mobile' ? { float: 'right', 'margin-top': '12px', 'margin-bottom': '-6px', display: 'table' } : { float: 'right', display: 'table', 'margin-bottom': '-6px' }" >
           <action-button
-            :style="dataView || treeView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: 'inline-flex' }"
+            :style="dataView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: 'inline-flex' }"
             :loading="loading"
             :actions="actions"
             :selectedRowKeys="selectedRowKeys"
@@ -64,7 +64,7 @@
           <a-input-search
             style="width: 100%; display: table-cell"
             :placeholder="$t('label.search')"
-            v-if="!dataView && !treeView"
+            v-if="!dataView"
             v-model="searchQuery"
             allowClear
             @search="onSearch" />
@@ -265,7 +265,7 @@
       </a-modal>
     </div>
 
-    <div v-if="dataView && !treeView">
+    <div v-if="dataView">
       <resource-view
         :resource="resource"
         :loading="loading"
@@ -276,8 +276,7 @@
         :loading="loading"
         :columns="columns"
         :items="items"
-        @refresh="this.fetchData"
-        v-if="!treeView" />
+        @refresh="this.fetchData" />
       <a-pagination
         class="row-element"
         size="small"
@@ -289,16 +288,7 @@
         @change="changePage"
         @showSizeChange="changePageSize"
         showSizeChanger
-        showQuickJumper
-        v-if="!treeView" />
-      <tree-view
-        v-if="treeView"
-        :treeData="treeData"
-        :treeSelected="treeSelected"
-        :loading="loading"
-        :tabs="$route.meta.tabs"
-        @change-resource="changeResource"
-        :actionData="actionData"/>
+        showQuickJumper />
     </div>
   </div>
 </template>
@@ -315,7 +305,6 @@ import ChartCard from '@/components/widgets/ChartCard'
 import Status from '@/components/widgets/Status'
 import ListView from '@/components/view/ListView'
 import ResourceView from '@/components/view/ResourceView'
-import TreeView from '@/components/view/TreeView'
 import ActionButton from '@/components/view/ActionButton'
 
 export default {
@@ -325,7 +314,6 @@ export default {
     ChartCard,
     ResourceView,
     ListView,
-    TreeView,
     Status,
     ActionButton
   },
@@ -354,13 +342,9 @@ export default {
       currentAction: {},
       showAction: false,
       dataView: false,
-      treeView: false,
       selectedFilter: '',
       filters: [],
       actions: [],
-      treeData: [],
-      treeSelected: {},
-      actionData: [],
       formModel: {},
       confirmDirty: false
     }
@@ -415,21 +399,15 @@ export default {
       this.filters = this.$route.meta.filters || []
       this.columns = []
       this.columnKeys = []
-      this.treeData = []
-      this.treeSelected = {}
-
       if (Object.keys(this.$route.query).length > 0) {
         Object.assign(params, this.$route.query)
       } else if (this.$route.meta.params) {
         Object.assign(params, this.$route.meta.params)
       }
 
-      this.treeView = this.$route && this.$route.meta && this.$route.meta.treeView
-
       if (this.$route && this.$route.params && this.$route.params.id) {
         this.resource = {}
         this.dataView = true
-        this.treeView = false
       } else {
         this.dataView = false
       }
@@ -526,14 +504,8 @@ export default {
         }
       }
 
-      if (!this.treeView) {
-        params.page = this.page
-        params.pagesize = this.pageSize
-      } else {
-        const domainId = this.$store.getters.userInfo.domainid
-        params.id = domainId
-        delete params.treeView
-      }
+      params.page = this.page
+      params.pagesize = this.pageSize
 
       api(this.apiName, params).then(json => {
         var responseName
@@ -560,30 +532,22 @@ export default {
         if (['listTemplates', 'listIsos'].includes(this.apiName) && this.items.length > 1) {
           this.items = [...new Map(this.items.map(x => [x.id, x])).values()]
         }
-        if (this.treeView) {
-          this.treeData = this.generateTreeData(this.items)
-        } else {
-          for (let idx = 0; idx < this.items.length; idx++) {
-            this.items[idx].key = idx
-            for (const key in customRender) {
-              const func = customRender[key]
-              if (func && typeof func === 'function') {
-                this.items[idx][key] = func(this.items[idx])
-              }
-            }
-            if (this.$route.path.startsWith('/ssh')) {
-              this.items[idx].id = this.items[idx].name
-            } else if (this.$route.path.startsWith('/ldapsetting')) {
-              this.items[idx].id = this.items[idx].hostname
+        for (let idx = 0; idx < this.items.length; idx++) {
+          this.items[idx].key = idx
+          for (const key in customRender) {
+            const func = customRender[key]
+            if (func && typeof func === 'function') {
+              this.items[idx][key] = func(this.items[idx])
             }
           }
+          if (this.$route.path.startsWith('/ssh')) {
+            this.items[idx].id = this.items[idx].name
+          } else if (this.$route.path.startsWith('/ldapsetting')) {
+            this.items[idx].id = this.items[idx].hostname
+          }
         }
         if (this.items.length > 0) {
           this.resource = this.items[0]
-          this.treeSelected = this.treeView ? this.items[0] : {}
-        } else {
-          this.resource = {}
-          this.treeSelected = {}
         }
       }).catch(error => {
         this.$notifyError(error)
@@ -617,7 +581,6 @@ export default {
       const self = this
       this.form = this.$form.createForm(this)
       this.formModel = {}
-      this.actionData = []
       if (action.component && action.api && !action.popup) {
         this.$router.push({ name: action.api })
         return
@@ -854,14 +817,7 @@ export default {
               this.$router.go(-1)
             } else {
               if (!hasJobId) {
-                // set action data for reload tree-view
-                if (this.treeView) {
-                  this.actionData.push(json)
-                }
                 this.fetchData()
-              } else {
-                this.$set(this.resource, 'isDel', true)
-                this.actionData.push(this.resource)
               }
             }
           }).catch(error => {
@@ -896,24 +852,6 @@ export default {
         this.selectedRowKeys = []
       }, 1000)
     },
-    generateTreeData (treeData) {
-      const result = []
-      const rootItem = treeData
-
-      rootItem[0].title = rootItem[0].title ? rootItem[0].title : rootItem[0].name
-      rootItem[0].key = rootItem[0].id ? rootItem[0].id : 0
-
-      if (!rootItem[0].haschild) {
-        rootItem[0].isLeaf = true
-      }
-
-      result.push(rootItem[0])
-      return result
-    },
-    changeResource (resource) {
-      this.treeSelected = resource
-      this.resource = this.treeSelected
-    },
     toggleLoading () {
       this.loading = !this.loading
     },

ui/src/views/iam/DomainActionForm.vue

@@ -0,0 +1,290 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <a-modal
+      :visible="showAction"
+      :closable="true"
+      style="top: 20px;"
+      @ok="handleSubmit"
+      @cancel="parentCloseAction"
+      :confirmLoading="action.loading"
+      centered
+    >
+      <span slot="title">
+        {{ $t(action.label) }}
+      </span>
+      <a-spin :spinning="action.loading">
+        <a-form
+          :form="form"
+          @submit="handleSubmit"
+          layout="vertical" >
+          <a-form-item
+            v-for="(field, fieldIndex) in action.paramFields"
+            :key="fieldIndex"
+            :v-bind="field.name"
+            v-if="!(action.mapping && field.name in action.mapping && action.mapping[field.name].value)"
+          >
+            <span slot="label">
+              {{ $t('label.' + field.name) }}
+              <a-tooltip :title="field.description">
+                <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
+              </a-tooltip>
+            </span>
+
+            <span v-if="field.type==='boolean'">
+              <a-switch
+                v-decorator="[field.name, {
+                  rules: [{ required: field.required, message: `${$t('message.error.required.input')}` }]
+                }]"
+                :placeholder="field.description"
+              />
+            </span>
+            <span v-else-if="action.mapping && field.name in action.mapping && action.mapping[field.name].options">
+              <a-select
+                :loading="field.loading"
+                v-decorator="[field.name, {
+                  rules: [{ required: field.required, message: $t('message.error.select') }]
+                }]"
+                :placeholder="field.description"
+              >
+                <a-select-option v-for="(opt, optIndex) in action.mapping[field.name].options" :key="optIndex">
+                  {{ opt }}
+                </a-select-option>
+              </a-select>
+            </span>
+            <span
+              v-else-if="field.type==='uuid' || field.name==='account'">
+              <a-select
+                showSearch
+                optionFilterProp="children"
+                v-decorator="[field.name, {
+                  rules: [{ required: field.required, message: $t('message.error.select') }]
+                }]"
+                :loading="field.loading"
+                :placeholder="field.description"
+                :filterOption="(input, option) => {
+                  return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+                }"
+              >
+                <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
+                  {{ opt.name || opt.description || opt.traffictype || opt.publicip }}
+                </a-select-option>
+              </a-select>
+            </span>
+            <span v-else-if="field.type==='list'">
+              <a-select
+                :loading="field.loading"
+                mode="multiple"
+                v-decorator="[field.name, {
+                  rules: [{ required: field.required, message: $t('message.error.select') }]
+                }]"
+                :placeholder="field.description"
+              >
+                <a-select-option v-for="(opt, optIndex) in field.opts" :key="optIndex">
+                  {{ opt.name && opt.type ? opt.name + ' (' + opt.type + ')' : opt.name || opt.description }}
+                </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: `${$t('message.validate.number')}` }]
+                }]"
+                :placeholder="field.description"
+              />
+            </span>
+            <span v-else>
+              <a-input
+                v-decorator="[field.name, {
+                  rules: [{ required: field.required, message: $t('message.error.required.input') }]
+                }]"
+                :placeholder="field.description" />
+            </span>
+          </a-form-item>
+        </a-form>
+      </a-spin>
+    </a-modal>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+
+export default {
+  name: 'DomainActionForm',
+  props: {
+    action: {
+      type: Object,
+      required: true
+    },
+    showAction: {
+      type: Boolean,
+      default: false
+    },
+    resource: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  mounted () {
+    if (this.action.dataView && this.action.icon === 'edit') {
+      this.fillEditFormFieldValues()
+    }
+  },
+  inject: ['parentCloseAction', 'parentFetchData', 'parentUpdActionData'],
+  methods: {
+    pollActionCompletion (jobId, action) {
+      this.$pollJob({
+        jobId,
+        successMethod: result => {
+          this.parentFetchData()
+          if (action.response) {
+            const description = action.response(result.jobresult)
+            if (description) {
+              this.$notification.info({
+                message: this.$t(action.label),
+                description: (<span domPropsInnerHTML={description}></span>),
+                duration: 0
+              })
+            }
+          }
+        },
+        errorMethod: () => this.parentFetchData(),
+        loadingMessage: `${this.$t(action.label)} in progress for ${this.resource.name}`,
+        catchMessage: 'Error encountered while fetching async job result',
+        action
+      })
+    },
+    handleSubmit (e) {
+      e.preventDefault()
+      this.form.validateFields((err, values) => {
+        if (err) {
+          return
+        }
+        this.action.loading = true
+        const params = {}
+        if ('id' in this.resource && this.action.params.map(i => { return i.name }).includes('id')) {
+          params.id = this.resource.id
+        }
+        for (const key in values) {
+          const input = values[key]
+          for (const param of this.action.params) {
+            if (param.name === key) {
+              if (input === undefined) {
+                if (param.type === 'boolean') {
+                  params[key] = false
+                }
+                break
+              }
+              if (this.action.mapping && key in this.action.mapping && this.action.mapping[key].options) {
+                params[key] = this.action.mapping[key].options[input]
+              } else if (param.type === 'uuid') {
+                params[key] = param.opts[input].id
+              } else if (param.type === 'list') {
+                params[key] = input.map(e => { return param.opts[e].id }).reduce((str, name) => { return str + ',' + name })
+              } else if (param.name === 'account') {
+                params[key] = param.opts[input].name
+              } else {
+                params[key] = input
+              }
+              break
+            }
+          }
+        }
+
+        for (const key in this.action.defaultArgs) {
+          if (!params[key]) {
+            params[key] = this.action.defaultArgs[key]
+          }
+        }
+
+        if (this.action.mapping) {
+          for (const key in this.action.mapping) {
+            if (!this.action.mapping[key].value) {
+              continue
+            }
+            params[key] = this.action.mapping[key].value(this.resource, params)
+          }
+        }
+
+        let hasJobId = false
+        api(this.action.api, params).then(json => {
+          for (const obj in json) {
+            if (obj.includes('response')) {
+              for (const res in json[obj]) {
+                if (res === 'jobid') {
+                  this.$store.dispatch('AddAsyncJob', {
+                    title: this.$t(this.action.label),
+                    jobid: json[obj][res],
+                    description: this.resource.name,
+                    status: 'progress'
+                  })
+                  this.pollActionCompletion(json[obj][res], this.action)
+                  hasJobId = true
+                  break
+                }
+              }
+              break
+            }
+          }
+          if (!hasJobId) {
+            this.parentUpdActionData(json)
+            this.parentFetchData()
+          } else {
+            this.$set(this.resource, 'isDel', true)
+            this.parentUpdActionData(this.resource)
+          }
+        }).catch(error => {
+          this.$notification.error({
+            message: 'Request Failed',
+            description: (error.response && error.response.headers && error.response.headers['x-description']) || error.message
+          })
+        }).finally(f => {
+          this.action.loading = false
+          this.parentCloseAction()
+        })
+      })
+    },
+    fillEditFormFieldValues () {
+      const form = this.form
+      this.action.paramFields.map(field => {
+        let fieldName = null
+        if (field.type === 'uuid' ||
+          field.type === 'list' ||
+          field.name === 'account' ||
+          (this.action.mapping && field.name in this.action.mapping)) {
+          fieldName = field.name.replace('ids', 'name').replace('id', 'name')
+        } else {
+          fieldName = field.name
+        }
+        const fieldValue = this.resource[fieldName] ? this.resource[fieldName] : null
+        if (fieldValue) {
+          form.getFieldDecorator(field.name, { initialValue: fieldValue })
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

ui/src/views/iam/DomainView.vue

@@ -0,0 +1,329 @@
+// Licensed to the Apache Software Foundation (ASF) under one
+// or more contributor license agreements.  See the NOTICE file
+// distributed with this work for additional information
+// regarding copyright ownership.  The ASF licenses this file
+// to you under the Apache License, Version 2.0 (the
+// "License"); you may not use this file except in compliance
+// with the License.  You may obtain a copy of the License at
+//
+//   http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing,
+// software distributed under the License is distributed on an
+// "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+// KIND, either express or implied.  See the License for the
+// specific language governing permissions and limitations
+// under the License.
+
+<template>
+  <div>
+    <a-card class="breadcrumb-card">
+      <a-row>
+        <a-col :span="14" style="padding-left: 6px">
+          <breadcrumb :resource="resource">
+            <span slot="end">
+              <template slot="title">
+                {{ $t('label.refresh') }}
+              </template>
+              <a-button
+                style="margin-top: 4px"
+                :loading="loading"
+                shape="round"
+                size="small"
+                icon="reload"
+                @click="fetchData()">
+                {{ $t('label.refresh') }}
+              </a-button>
+            </span>
+          </breadcrumb>
+        </a-col>
+        <a-col :span="10">
+          <span style="float: right">
+            <action-button
+              :style="dataView ? { float: device === 'mobile' ? 'left' : 'right' } : { 'margin-right': '10px', display: 'inline-flex' }"
+              :loading="loading"
+              :actions="actions"
+              :selectedRowKeys="selectedRowKeys"
+              :dataView="dataView"
+              :resource="resource"
+              @exec-action="execAction"/>
+          </span>
+        </a-col>
+      </a-row>
+    </a-card>
+
+    <div class="row-element">
+      <resource-view
+        v-if="dataView"
+        :resource="resource"
+        :loading="loading"
+        :tabs="$route.meta.tabs" />
+      <tree-view
+        v-else
+        :treeData="treeData"
+        :treeSelected="treeSelected"
+        :loading="loading"
+        :tabs="$route.meta.tabs"
+        @change-resource="changeResource"
+        :actionData="actionData"/>
+    </div>
+
+    <div v-if="showAction">
+      <domain-action-form
+        :showAction="showAction"
+        :resource="resource"
+        :action="action"/>
+    </div>
+  </div>
+</template>
+
+<script>
+import { api } from '@/api'
+import store from '@/store'
+import { mixinDevice } from '@/utils/mixin.js'
+
+import Breadcrumb from '@/components/widgets/Breadcrumb'
+import ActionButton from '@/components/view/ActionButton'
+import TreeView from '@/components/view/TreeView'
+import DomainActionForm from '@/views/iam/DomainActionForm'
+import ResourceView from '@/components/view/ResourceView'
+
+export default {
+  name: 'DomainView',
+  components: {
+    Breadcrumb,
+    ActionButton,
+    TreeView,
+    DomainActionForm,
+    ResourceView
+  },
+  mixins: [mixinDevice],
+  data () {
+    return {
+      resource: {},
+      loading: false,
+      selectedRowKeys: [],
+      treeData: [],
+      actionData: [],
+      treeSelected: {},
+      showAction: false,
+      action: {},
+      dataView: false
+    }
+  },
+  computed: {
+    actions () {
+      let actions = []
+      if (this.$route && this.$route.meta) {
+        if (this.$route.meta.actions) {
+          actions = this.$route.meta.actions
+        }
+      }
+      return actions
+    }
+  },
+  beforeCreate () {
+    this.form = this.$form.createForm(this)
+  },
+  mounted () {
+    this.fetchData()
+  },
+  beforeRouteUpdate (to, from, next) {
+    next()
+  },
+  beforeRouteLeave (to, from, next) {
+    next()
+  },
+  watch: {
+    '$route' (to, from) {
+      if (to.fullPath !== from.fullPath && !to.fullPath.includes('action/')) {
+        this.fetchData()
+      }
+    },
+    '$i18n.locale' (to, from) {
+      if (to !== from) {
+        this.fetchData()
+      }
+    }
+  },
+  provide () {
+    return {
+      parentCloseAction: this.closeAction,
+      parentUpdActionData: this.updateActionData,
+      parentFetchData: this.fetchData
+    }
+  },
+  methods: {
+    fetchData () {
+      this.treeData = []
+      this.treeSelected = {}
+      const params = { listall: true }
+      if (this.$route && this.$route.params && this.$route.params.id) {
+        this.resource = {}
+        this.dataView = true
+        params.id = this.$route.params.id
+      } else {
+        this.dataView = false
+        params.id = this.$store.getters.userInfo.domainid
+      }
+
+      this.loading = true
+
+      api('listDomains', params).then(json => {
+        const domains = json.listdomainsresponse.domain || []
+        this.treeData = this.generateTreeData(domains)
+        this.resource = domains[0] || {}
+        this.treeSelected = domains[0] || {}
+      }).catch(error => {
+        this.$notification.error({
+          message: 'Request Failed',
+          description: error.response.headers['x-description'],
+          duration: 0
+        })
+
+        if ([401, 405].includes(error.response.status)) {
+          this.$router.push({ path: '/exception/403' })
+        }
+
+        if ([430, 431, 432].includes(error.response.status)) {
+          this.$router.push({ path: '/exception/404' })
+        }
+
+        if ([530, 531, 532, 533, 534, 535, 536, 537].includes(error.response.status)) {
+          this.$router.push({ path: '/exception/500' })
+        }
+      }).finally(f => {
+        this.loading = false
+      })
+    },
+    execAction (action) {
+      this.actionData = []
+      this.action = action
+      this.action.params = store.getters.apis[this.action.api].params
+      const paramFields = this.action.params
+      paramFields.sort(function (a, b) {
+        if (a.name === 'name' && b.name !== 'name') { return -1 }
+        if (a.name !== 'name' && b.name === 'name') { return -1 }
+        if (a.name === 'id') { return -1 }
+        if (a.name < b.name) { return -1 }
+        if (a.name > b.name) { return 1 }
+        return 0
+      })
+      this.action.paramFields = []
+      if (action.args && action.args.length > 0) {
+        this.action.paramFields = action.args.map(function (arg) {
+          return paramFields.filter(function (param) {
+            return param.name.toLowerCase() === arg.toLowerCase()
+          })[0]
+        })
+      }
+      this.showAction = true
+      for (const param of this.action.paramFields) {
+        if (param.type === 'list' && ['tags', 'hosttags'].includes(param.name)) {
+          param.type = 'string'
+        }
+        if (param.type === 'uuid' || param.type === 'list' || param.name === 'account' || (this.action.mapping && param.name in this.action.mapping)) {
+          this.listUuidOpts(param)
+        }
+      }
+      this.action.loading = false
+    },
+    listUuidOpts (param) {
+      if (this.action.mapping && param.name in this.action.mapping && !this.action.mapping[param.name].api) {
+        return
+      }
+      const paramName = param.name
+      const possibleName = 'list' + paramName.replace('ids', '').replace('id', '').toLowerCase() + 's'
+      let params = { listall: true }
+      let possibleApi
+      if (this.action.mapping && param.name in this.action.mapping && this.action.mapping[param.name].api) {
+        possibleApi = this.action.mapping[param.name].api
+        if (this.action.mapping[param.name].params) {
+          const customParams = this.action.mapping[param.name].params(this.resource)
+          if (customParams) {
+            params = { ...params, ...customParams }
+          }
+        }
+      } else if (paramName === 'id') {
+        possibleApi = this.apiName
+      } else {
+        for (const api in store.getters.apis) {
+          if (api.toLowerCase().startsWith(possibleName)) {
+            possibleApi = api
+            break
+          }
+        }
+      }
+      if (!possibleApi) {
+        return
+      }
+      param.loading = true
+      param.opts = []
+      api(possibleApi, params).then(json => {
+        param.loading = false
+        for (const obj in json) {
+          if (obj.includes('response')) {
+            for (const res in json[obj]) {
+              if (res === 'count') {
+                continue
+              }
+              param.opts = json[obj][res]
+              this.$forceUpdate()
+              break
+            }
+            break
+          }
+        }
+      }).catch(() => {
+        param.loading = false
+      })
+    },
+    generateTreeData (treeData) {
+      const result = []
+      const rootItem = treeData
+
+      rootItem[0].title = rootItem[0].title ? rootItem[0].title : rootItem[0].name
+      rootItem[0].key = rootItem[0].id ? rootItem[0].id : 0
+
+      if (!rootItem[0].haschild) {
+        rootItem[0].isLeaf = true
+      }
+
+      result.push(rootItem[0])
+      return result
+    },
+    changeResource (resource) {
+      this.treeSelected = resource
+      this.resource = this.treeSelected
+    },
+    closeAction () {
+      this.showAction = false
+    },
+    updateActionData (data) {
+      this.actionData.push(data)
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+  .breadcrumb-card {
+    margin-left: -24px;
+    margin-right: -24px;
+    margin-top: -16px;
+    margin-bottom: 12px;
+  }
+
+  .row-element {
+    margin-top: 10px;
+    margin-bottom: 10px;
+  }
+
+  .ant-breadcrumb {
+    vertical-align: text-bottom;
+  }
+
+  .ant-breadcrumb .anticon {
+    margin-left: 8px;
+  }
+</style>