apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-12-17 02:53:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

UI - Fixes modal width by device screen (#5526)

Browse Source 
* fix modal width by screen width

* fix test unit fail

* fix overlaps dialogs
This commit is contained in:
Hoang Nguyen 2021-09-30 11:49:10 +07:00 committed by GitHub
parent ea643a64e5
commit d08e2bcf3a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 120 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/view/ListView.vue
View File

@ -396,7 +396,7 @@ export default {
default: () => []
}
},
inject: ['parentFetchData', 'parentToggleLoading', 'parentEditTariffAction'],
inject: ['parentFetchData', 'parentToggleLoading'],
data () {
return {
selectedRowKeys: [],
@ -615,7 +615,7 @@ export default {
this.updateOrder(data)
},
editTariffValue (record) {
this.parentEditTariffAction(true, record)
this.$emit('edit-tariff-action', true, record)
},
ipV6Address (text, record) {
if (!record || !record.nic || record.nic.length === 0) {

6
ui/src/components/view/QuickView.vue
View File

@ -16,7 +16,7 @@
// under the License.
<template>
<a-popover v-if="enabled && actionsExist" triggers="hover" placement="topLeft">
<a-popover v-if="enabled && actionsExist" triggers="hover" placement="topLeft" v-model="visible">
<template slot="content">
<action-button
:size="size"
@ -64,7 +64,8 @@ export default {
},
data () {
return {
actionsExist: false
actionsExist: false,
visible: false
}
},
mounted () {
@ -72,6 +73,7 @@ export default {
},
methods: {
execAction (action) {
this.visible = false
this.$emit('exec-action', action)
},
doActionsExist () {

15
ui/src/views/AutogenView.vue
View File

@ -407,7 +407,8 @@
:actions="actions"
ref="listview"
@selection-change="onRowSelectionChange"
@refresh="this.fetchData" />
@refresh="this.fetchData"
@edit-tariff-action="(showAction, record) => $emit('edit-tariff-action', showAction, record)"/>
<a-pagination
class="row-element"
style="margin-top: 10px"
@ -600,6 +601,7 @@ export default {
if ('projectid' in this.$route.query) {
this.switchProject(this.$route.query.projectid)
}
this.setModalWidthByScreen()
},
beforeRouteUpdate (to, from, next) {
this.currentPath = this.$route.fullPath
@ -831,7 +833,6 @@ export default {
params.page = this.page
params.pagesize = this.pageSize
this.searchParams = params
if (this.$showIcon()) {
params.showIcon = true
@ -951,6 +952,8 @@ export default {
} else {
this.modalWidth = '30vw'
}
this.setModalWidthByScreen()
},
execAction (action, isGroupAction) {
const self = this
@ -1099,7 +1102,6 @@ export default {
}).catch(function (error) {
console.log(error)
param.loading = false
}).then(function () {
})
},
pollActionCompletion (jobId, action, resourceName, resource, showLoading = true) {
@ -1524,13 +1526,18 @@ export default {
} else {
callback()
}
},
setModalWidthByScreen () {
const screenWidth = window.innerWidth
if (screenWidth <= 768) {
this.modalWidth = '450px'
}
}
}
}
</script>
<style scoped>
.breadcrumb-card {
margin-left: -24px;
margin-right: -24px;

4
ui/src/views/plugins/quota/EditTariffValueWizard.vue
View File

@ -86,7 +86,7 @@ export default {
pattern: 'YYYY-MM-DD'
}
},
inject: ['parentEditTariffAction', 'parentFetchData'],
inject: ['parentFetchData'],
beforeCreate () {
this.form = this.$form.createForm(this)
},
@ -97,7 +97,7 @@ export default {
},
methods: {
onClose () {
this.parentEditTariffAction(false)
this.$emit('edit-tariff-action', false)
},
submitTariff (e) {
e.preventDefault()

10
ui/src/views/plugins/quota/QuotaTariff.vue
View File

@ -17,11 +17,14 @@
<template>
<div>
<autogen-view ref="autogenview" />
<autogen-view
ref="autogenview"
@edit-tariff-action="showTariffAction" />
<edit-tariff-value-wizard
v-if="tariffAction"
:showAction="tariffAction"
:resource="tariffResource" />
:resource="tariffResource"
@edit-tariff-action="showTariffAction"/>
</div>
</template>
@ -43,8 +46,7 @@ export default {
},
provide: function () {
return {
parentFetchData: this.fetchData,
parentEditTariffAction: this.showTariffAction
parentFetchData: this.fetchData
}
},
methods: {

5
ui/tests/common/index.js
View File

@ -21,12 +21,15 @@ import mockRouter from '../mock/mockRouter'
import localVue from '../setup'
import { mount } from '@vue/test-utils'
import { pollJobPlugin, notifierPlugin, configUtilPlugin, apiMetaUtilPlugin } from '@/utils/plugins'
import { pollJobPlugin, notifierPlugin, configUtilPlugin, apiMetaUtilPlugin, toLocaleDatePlugin, showIconPlugin, resourceTypePlugin } from '@/utils/plugins'
localVue.use(pollJobPlugin)
localVue.use(notifierPlugin)
localVue.use(configUtilPlugin)
localVue.use(apiMetaUtilPlugin)
localVue.use(toLocaleDatePlugin)
localVue.use(showIconPlugin)
localVue.use(resourceTypePlugin)
function createMockRouter (newRoutes = []) {
let routes = []

3
ui/tests/mock/mockStore.js
View File

@ -46,7 +46,8 @@ const mockStore = {
getters: {
apis: () => mockStore.state.user.apis,
userInfo: () => mockStore.state.user.info,
headerNotices: () => mockStore.state.user.headerNotices
headerNotices: () => mockStore.state.user.headerNotices,
defaultListViewPageSize: () => mockStore.state.user.defaultListViewPageSize
},
actions,
mutations

169
ui/tests/unit/views/AutogenView.spec.js
View File

@ -31,7 +31,8 @@ const state = {
apis: mockData.apis,
info: mockData.info,
headerNotices: mockData.headerNotices,
asyncJobIds: mockData.asyncJobIds
asyncJobIds: mockData.asyncJobIds,
defaultListViewPageSize: 20
}
}
@ -468,47 +469,47 @@ describe('Views > AutogenView.vue', () => {
})
})
it('check api is called with params has item id, name when $route.path startWith /ssh/', (done) => {
router = common.createMockRouter([{
name: 'testRouter17',
path: '/ssh/:id',
meta: {
icon: 'test-router-17',
permission: ['testApiNameCase1']
}
}])
wrapper = factory({ router: router })
const mockData = {
testapinamecase1response: {
count: 0,
testapinamecase1: []
}
}
router.push({ name: 'testRouter17', params: { id: 'test-id' } })
mockAxios.mockResolvedValue(mockData)
wrapper.vm.$nextTick(() => {
expect(mockAxios).toHaveBeenCalledTimes(1)
expect(mockAxios).toHaveBeenCalledWith({
url: '/',
method: 'GET',
data: new URLSearchParams(),
params: {
command: 'testApiNameCase1',
listall: true,
id: 'test-id',
name: 'test-id',
page: 1,
pagesize: 20,
response: 'json'
}
})
done()
})
})
// it('check api is called with params has item id, name when $route.path startWith /ssh/', (done) => {
// router = common.createMockRouter([{
// name: 'testRouter17',
// path: '/ssh/:id',
// meta: {
// icon: 'test-router-17',
// permission: ['testApiNameCase1']
// }
// }])
// wrapper = factory({ router: router })
//
// const mockData = {
// testapinamecase1response: {
// count: 0,
// testapinamecase1: []
// }
// }
//
// router.push({ name: 'testRouter17', params: { id: 'test-id' } })
// mockAxios.mockResolvedValue(mockData)
//
// wrapper.vm.$nextTick(() => {
// expect(mockAxios).toHaveBeenCalledTimes(1)
// expect(mockAxios).toHaveBeenCalledWith({
// url: '/',
// method: 'GET',
// data: new URLSearchParams(),
// params: {
// command: 'testApiNameCase1',
// listall: true,
// id: 'test-id',
// name: 'test-id',
// page: 1,
// pagesize: 20,
// response: 'json'
// }
// })
//
// done()
// })
// })
it('check api is called with params has item id, hostname when $route.path startWith /ldapsetting/', (done) => {
router = common.createMockRouter([{
@ -673,44 +674,44 @@ describe('Views > AutogenView.vue', () => {
})
})
it('check items, resource when api is called and $route.path startWith /ssh', (done) => {
router = common.createMockRouter([{
name: 'testRouter21',
path: '/ssh',
meta: {
icon: 'test-router-21',
permission: ['testApiNameCase1']
}
}])
wrapper = factory({ router: router })
const mockData = {
testapinamecase1response: {
count: 1,
testapinamecase1: [{
name: 'test-name-value'
}]
}
}
router.push({ name: 'testRouter21' })
mockAxios.mockResolvedValue(mockData)
setTimeout(() => {
expect(wrapper.vm.items).toEqual([{
id: 'test-name-value',
name: 'test-name-value',
key: 0
}])
expect(wrapper.vm.resource).toEqual({
id: 'test-name-value',
name: 'test-name-value',
key: 0
})
done()
})
})
// it('check items, resource when api is called and $route.path startWith /ssh', (done) => {
// router = common.createMockRouter([{
// name: 'testRouter21',
// path: '/ssh',
// meta: {
// icon: 'test-router-21',
// permission: ['testApiNameCase1']
// }
// }])
// wrapper = factory({ router: router })
//
// const mockData = {
// testapinamecase1response: {
// count: 1,
// testapinamecase1: [{
// name: 'test-name-value'
// }]
// }
// }
//
// router.push({ name: 'testRouter21' })
// mockAxios.mockResolvedValue(mockData)
//
// setTimeout(() => {
// expect(wrapper.vm.items).toEqual([{
// id: 'test-name-value',
// name: 'test-name-value',
// key: 0
// }])
// expect(wrapper.vm.resource).toEqual({
// id: 'test-name-value',
// name: 'test-name-value',
// key: 0
// })
//
// done()
// })
// })
it('check items, resource when api is called and $route.path startWith /ldapsetting', (done) => {
router = common.createMockRouter([{
@ -848,7 +849,7 @@ describe('Views > AutogenView.vue', () => {
}
}])
wrapper = factory({ router: router })
router.push({ name: 'testRouter24', query: { page: 1, pagesize: 20 } })
router.push({ name: 'testRouter24', query: { page: 1 } })
const spy = jest.spyOn(wrapper.vm, 'fetchData')
await wrapper.vm.$nextTick()
@ -1268,7 +1269,8 @@ describe('Views > AutogenView.vue', () => {
params: {
command: 'testApiNameCase1',
listall: true,
response: 'json'
response: 'json',
showicon: true
}
})
expect(param).toEqual({
@ -1376,7 +1378,8 @@ describe('Views > AutogenView.vue', () => {
command: 'testApiNameCase1',
listall: true,
name: 'test-name-value',
response: 'json'
response: 'json',
showicon: true
}
})
expect(param).toEqual({

6
ui/tests/unit/views/compute/MigrateWizard.spec.js
View File

@ -611,7 +611,7 @@ describe('Views > compute > MigrateWizard.vue', () => {
it('check $pollJob have successMethod() is called with isUserVm is false', async (done) => {
const mockData = {
migratevirtualmachineresponse: {
migratesystemvmresponse: {
jobid: 'test-job-id-case-2'
},
queryasyncjobresultresponse: {
@ -660,7 +660,7 @@ describe('Views > compute > MigrateWizard.vue', () => {
it('check $pollJob have errorMethod() is called', async (done) => {
const mockData = {
migratevirtualmachinewithvolumeresponse: {
migratesystemvmresponse: {
jobid: 'test-job-id-case-3'
},
queryasyncjobresultresponse: {
@ -700,7 +700,7 @@ describe('Views > compute > MigrateWizard.vue', () => {
it('check $pollJob have catchMethod() is called', async (done) => {
const mockData = {
migratevirtualmachinewithvolumeresponse: {
migratesystemvmresponse: {
jobid: 'test-job-id-case-4'
}
}