You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@cloudstack.apache.org by ro...@apache.org on 2020/06/17 09:24:21 UTC
[cloudstack-primate] branch master updated: iam: new view component
for Tree Domain (#324)
This is an automated email from the ASF dual-hosted git repository.
rohit pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/cloudstack-primate.git
The following commit(s) were added to refs/heads/master by this push:
new b487d2c iam: new view component for Tree Domain (#324)
b487d2c is described below
commit b487d2ca283f0564c3b7425b6af6727b60447f08
Author: Hoang Nguyen <ho...@unitech.vn>
AuthorDate: Wed Jun 17 16:24:13 2020 +0700
iam: new view component for Tree Domain (#324)
Restructuring the Tree Domain avoids unnecessary dependencies in AutogenView
---
src/components/view/TreeView.vue | 4 +
src/config/router.js | 3 +-
src/config/section/domain.js | 3 +-
src/locales/en.json | 1 +
src/views/AutogenView.vue | 98 ++---------
src/views/iam/DomainActionForm.vue | 290 ++++++++++++++++++++++++++++++++
src/views/iam/DomainView.vue | 329 +++++++++++++++++++++++++++++++++++++
7 files changed, 645 insertions(+), 83 deletions(-)
diff --git a/src/components/view/TreeView.vue b/src/components/view/TreeView.vue
index f3e838e..9621754 100644
--- a/src/components/view/TreeView.vue
+++ b/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) {
diff --git a/src/config/router.js b/src/config/router.js
index dcd9f3a..672764e 100644
--- a/src/config/router.js
+++ b/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,
diff --git a/src/config/section/domain.js b/src/config/section/domain.js
index 72a17de..86f005a 100644
--- a/src/config/section/domain.js
+++ b/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: {
diff --git a/src/locales/en.json b/src/locales/en.json
index 688836c..7d7c04e 100644
--- a/src/locales/en.json
+++ b/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",
diff --git a/src/views/AutogenView.vue b/src/views/AutogenView.vue
index 452d70b..ab5bd9c 100644
--- a/src/views/AutogenView.vue
+++ b/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
},
diff --git a/src/views/iam/DomainActionForm.vue b/src/views/iam/DomainActionForm.vue
new file mode 100644
index 0000000..a9f3a5c
--- /dev/null
+++ b/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>
diff --git a/src/views/iam/DomainView.vue b/src/views/iam/DomainView.vue
new file mode 100644
index 0000000..eaa9f3c
--- /dev/null
+++ b/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>