apache/cloudstack
1
0
Fork 0
mirror of https://github.com/apache/cloudstack.git synced 2025-12-17 11:04:00 +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: () => [] default: () => []
} }
}, },
inject: ['parentFetchData', 'parentToggleLoading', 'parentEditTariffAction'], inject: ['parentFetchData', 'parentToggleLoading'],
data () { data () {
return { return {
selectedRowKeys: [], selectedRowKeys: [],
@ -615,7 +615,7 @@ export default {
this.updateOrder(data) this.updateOrder(data)
}, },
editTariffValue (record) { editTariffValue (record) {
this.parentEditTariffAction(true, record) this.$emit('edit-tariff-action', true, record)
}, },
ipV6Address (text, record) { ipV6Address (text, record) {
if (!record || !record.nic || record.nic.length === 0) { if (!record || !record.nic || record.nic.length === 0) {

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

@ -16,7 +16,7 @@
// under the License. // under the License.
<template> <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"> <template slot="content">
<action-button <action-button
:size="size" :size="size"
@ -64,7 +64,8 @@ export default {
}, },
data () { data () {
return { return {
actionsExist: false actionsExist: false,
visible: false
} }
}, },
mounted () { mounted () {
@ -72,6 +73,7 @@ export default {
}, },
methods: { methods: {
execAction (action) { execAction (action) {
this.visible = false
this.$emit('exec-action', action) this.$emit('exec-action', action)
}, },
doActionsExist () { doActionsExist () {

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

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

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

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

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

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

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

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

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

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

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

@ -31,7 +31,8 @@ const state = {
apis: mockData.apis, apis: mockData.apis,
info: mockData.info, info: mockData.info,
headerNotices: mockData.headerNotices, 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) => { // it('check api is called with params has item id, name when $route.path startWith /ssh/', (done) => {
router = common.createMockRouter([{ // router = common.createMockRouter([{
name: 'testRouter17', // name: 'testRouter17',
path: '/ssh/:id', // path: '/ssh/:id',
meta: { // meta: {
icon: 'test-router-17', // icon: 'test-router-17',
permission: ['testApiNameCase1'] // permission: ['testApiNameCase1']
} // }
}]) // }])
wrapper = factory({ router: router }) // wrapper = factory({ router: router })
//
const mockData = { // const mockData = {
testapinamecase1response: { // testapinamecase1response: {
count: 0, // count: 0,
testapinamecase1: [] // testapinamecase1: []
} // }
} // }
//
router.push({ name: 'testRouter17', params: { id: 'test-id' } }) // router.push({ name: 'testRouter17', params: { id: 'test-id' } })
mockAxios.mockResolvedValue(mockData) // mockAxios.mockResolvedValue(mockData)
//
wrapper.vm.$nextTick(() => { // wrapper.vm.$nextTick(() => {
expect(mockAxios).toHaveBeenCalledTimes(1) // expect(mockAxios).toHaveBeenCalledTimes(1)
expect(mockAxios).toHaveBeenCalledWith({ // expect(mockAxios).toHaveBeenCalledWith({
url: '/', // url: '/',
method: 'GET', // method: 'GET',
data: new URLSearchParams(), // data: new URLSearchParams(),
params: { // params: {
command: 'testApiNameCase1', // command: 'testApiNameCase1',
listall: true, // listall: true,
id: 'test-id', // id: 'test-id',
name: 'test-id', // name: 'test-id',
page: 1, // page: 1,
pagesize: 20, // pagesize: 20,
response: 'json' // response: 'json'
} // }
}) // })
//
done() // done()
}) // })
}) // })
it('check api is called with params has item id, hostname when $route.path startWith /ldapsetting/', (done) => { it('check api is called with params has item id, hostname when $route.path startWith /ldapsetting/', (done) => {
router = common.createMockRouter([{ 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) => { // it('check items, resource when api is called and $route.path startWith /ssh', (done) => {
router = common.createMockRouter([{ // router = common.createMockRouter([{
name: 'testRouter21', // name: 'testRouter21',
path: '/ssh', // path: '/ssh',
meta: { // meta: {
icon: 'test-router-21', // icon: 'test-router-21',
permission: ['testApiNameCase1'] // permission: ['testApiNameCase1']
} // }
}]) // }])
wrapper = factory({ router: router }) // wrapper = factory({ router: router })
//
const mockData = { // const mockData = {
testapinamecase1response: { // testapinamecase1response: {
count: 1, // count: 1,
testapinamecase1: [{ // testapinamecase1: [{
name: 'test-name-value' // name: 'test-name-value'
}] // }]
} // }
} // }
//
router.push({ name: 'testRouter21' }) // router.push({ name: 'testRouter21' })
mockAxios.mockResolvedValue(mockData) // mockAxios.mockResolvedValue(mockData)
//
setTimeout(() => { // setTimeout(() => {
expect(wrapper.vm.items).toEqual([{ // expect(wrapper.vm.items).toEqual([{
id: 'test-name-value', // id: 'test-name-value',
name: 'test-name-value', // name: 'test-name-value',
key: 0 // key: 0
}]) // }])
expect(wrapper.vm.resource).toEqual({ // expect(wrapper.vm.resource).toEqual({
id: 'test-name-value', // id: 'test-name-value',
name: 'test-name-value', // name: 'test-name-value',
key: 0 // key: 0
}) // })
//
done() // done()
}) // })
}) // })
it('check items, resource when api is called and $route.path startWith /ldapsetting', (done) => { it('check items, resource when api is called and $route.path startWith /ldapsetting', (done) => {
router = common.createMockRouter([{ router = common.createMockRouter([{
@ -848,7 +849,7 @@ describe('Views > AutogenView.vue', () => {
} }
}]) }])
wrapper = factory({ router: router }) 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') const spy = jest.spyOn(wrapper.vm, 'fetchData')
await wrapper.vm.$nextTick() await wrapper.vm.$nextTick()
@ -1268,7 +1269,8 @@ describe('Views > AutogenView.vue', () => {
params: { params: {
command: 'testApiNameCase1', command: 'testApiNameCase1',
listall: true, listall: true,
response: 'json' response: 'json',
showicon: true
} }
}) })
expect(param).toEqual({ expect(param).toEqual({
@ -1376,7 +1378,8 @@ describe('Views > AutogenView.vue', () => {
command: 'testApiNameCase1', command: 'testApiNameCase1',
listall: true, listall: true,
name: 'test-name-value', name: 'test-name-value',
response: 'json' response: 'json',
showicon: true
} }
}) })
expect(param).toEqual({ 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) => { it('check $pollJob have successMethod() is called with isUserVm is false', async (done) => {
const mockData = { const mockData = {
migratevirtualmachineresponse: { migratesystemvmresponse: {
jobid: 'test-job-id-case-2' jobid: 'test-job-id-case-2'
}, },
queryasyncjobresultresponse: { queryasyncjobresultresponse: {
@ -660,7 +660,7 @@ describe('Views > compute > MigrateWizard.vue', () => {
it('check $pollJob have errorMethod() is called', async (done) => { it('check $pollJob have errorMethod() is called', async (done) => {
const mockData = { const mockData = {
migratevirtualmachinewithvolumeresponse: { migratesystemvmresponse: {
jobid: 'test-job-id-case-3' jobid: 'test-job-id-case-3'
}, },
queryasyncjobresultresponse: { queryasyncjobresultresponse: {
@ -700,7 +700,7 @@ describe('Views > compute > MigrateWizard.vue', () => {
it('check $pollJob have catchMethod() is called', async (done) => { it('check $pollJob have catchMethod() is called', async (done) => {
const mockData = { const mockData = {
migratevirtualmachinewithvolumeresponse: { migratesystemvmresponse: {
jobid: 'test-job-id-case-4' jobid: 'test-job-id-case-4'
} }
} }