Skip to content

Commit 08dc1bb

Browse files
vishesh92vishesh92
authored
UI: cleanup arrangement of instance schedule modal dialog (#8620)
* polish modal for instance schedule * fixup
1 parent e545259 commit 08dc1bb

File tree

2 files changed

+162
-86
lines changed

2 files changed

+162
-86
lines changed

‎ui/public/locales/en.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -579,6 +579,7 @@
579579
"label.creating.iprange": "Creating IP ranges",
580580
"label.credit": "Credit",
581581
"label.cron": "Cron expression",
582+
"label.cron.mode": "Cron mode",
582583
"label.crosszones": "Cross zones",
583584
"label.currency": "Currency",
584585
"label.current": "Current",

‎ui/src/views/compute/InstanceSchedules.vue‎

Lines changed: 161 additions & 86 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,9 @@
2222
style="width: 100%; margin-bottom: 10px"
2323
@click="showAddModal"
2424
:loading="loading"
25-
:disabled="!('createVMSchedule' in $store.getters.apis)">
26-
<template #icon><plus-outlined/></template> {{ $t('label.schedule.add') }}
25+
:disabled="!('createVMSchedule' in $store.getters.apis)"
26+
>
27+
<template #icon><plus-outlined /></template> {{ $t('label.schedule.add') }}
2728
</a-button>
2829
<list-view
2930
:loading="tabLoading"
@@ -35,20 +36,22 @@
3536
@update-selected-columns="updateSelectedColumns"
3637
@update-vm-schedule="updateVMSchedule"
3738
@remove-vm-schedule="removeVMSchedule"
38-
@refresh="this.fetchData"/>
39+
@refresh="this.fetchData"
40+
/>
3941
<a-pagination
4042
class="row-element"
4143
style="margin-top: 10px"
4244
size="small"
4345
:current="page"
4446
:pageSize="pageSize"
4547
:total="totalCount"
46-
:showTotal="total => `${$t('label.showing')} ${Math.min(total, 1+((page-1)*pageSize))}-${Math.min(page*pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
48+
:showTotal="total => `${$t('label.showing')} ${Math.min(total, 1 + ((page - 1) * pageSize))}-${Math.min(page * pageSize, total)} ${$t('label.of')} ${total} ${$t('label.items')}`"
4749
:pageSizeOptions="pageSizeOptions"
4850
@change="changePage"
4951
@showSizeChange="changePage"
5052
showSizeChanger
51-
showQuickJumper>
53+
showQuickJumper
54+
>
5255
<template #buildOptionText="props">
5356
<span>{{ props.value }} / {{ $t('label.page') }}</span>
5457
</template>
@@ -60,66 +63,68 @@
6063
:title="$t('label.schedule')"
6164
:maskClosable="false"
6265
:closable="true"
63-
:footer="null"
64-
@cancel="closeModal">
66+
@cancel="closeModal"
67+
@ok="submitForm"
68+
>
6569
<a-form
6670
layout="vertical"
6771
:ref="formRef"
6872
:model="form"
6973
:rules="rules"
7074
@finish="submitForm"
71-
v-ctrl-enter="submitForm">
72-
<a-form-item name="description" ref="description">
75+
v-ctrl-enter="submitForm"
76+
>
77+
<a-form-item
78+
name="description"
79+
ref="description"
80+
:wrapperCol="{ span: 24 }"
81+
>
7382
<template #label>
74-
<tooltip-label :title="$t('label.description')" :tooltip="apiParams.description.description"/>
83+
<tooltip-label
84+
:title="$t('label.description')"
85+
:tooltip="apiParams.description.description"
86+
/>
7587
</template>
7688
<a-input
7789
v-model:value="form.description"
78-
v-focus="true" />
90+
v-focus="true"
91+
/>
7992
</a-form-item>
80-
<a-form-item name="action" ref="action">
93+
<a-form-item
94+
name="action"
95+
ref="action"
96+
:wrapperCol="{ span: 24 }"
97+
>
8198
<template #label>
82-
<tooltip-label :title="$t('label.action')" :tooltip="apiParams.action.description"/>
99+
<tooltip-label
100+
:title="$t('label.action')"
101+
:tooltip="apiParams.action.description"
102+
/>
83103
</template>
84104
<a-radio-group
85105
v-model:value="form.action"
86106
button-style="solid"
87-
:disabled="isEdit">
88-
<a-radio-button v-for="action in actions" :key="action.id" :value="action.value">
107+
:disabled="isEdit"
108+
>
109+
<a-radio-button
110+
v-for="action in actions"
111+
:key="action.id"
112+
:value="action.value"
113+
>
89114
{{ $t(action.label) }}
90115
</a-radio-button>
91116
</a-radio-group>
92117
</a-form-item>
93-
<a-form-item name="schedule" ref="schedule">
118+
<a-form-item
119+
name="timezone"
120+
ref="timezone"
121+
:wrapperCol="{ span: 24 }"
122+
>
94123
<template #label>
95-
<tooltip-label :title="$t('label.schedule')" :tooltip="apiParams.schedule.description"/>
96-
</template>
97-
<label>{{ $t('label.advanced.mode') }}</label>
98-
<a-switch
99-
v-model:checked="form.useCronFormat"
100-
>
101-
</a-switch>
102-
<br/>
103-
<span v-if="!form.useCronFormat">
104-
<cron-ant
105-
v-model="form.schedule"
106-
:periods="periods"
107-
:button-props="{ type: 'primary', size: 'small', disabled: form.useCronFormat }"
108-
@error="error=$event"/>
109-
</span>
110-
<span v-if="form.useCronFormat">
111-
<label>{{ generateHumanReadableSchedule(form.schedule) }}</label>
112-
<br/>
113-
</span>
114-
<a-input
115-
:addonBefore="$t('label.cron')"
116-
v-model:value="form.schedule"
117-
:disabled="!form.useCronFormat"
118-
v-focus="true" />
119-
</a-form-item>
120-
<a-form-item name="timezone" ref="timezone">
121-
<template #label>
122-
<tooltip-label :title="$t('label.timezone')" :tooltip="apiParams.timezone.description"/>
124+
<tooltip-label
125+
:title="$t('label.timezone')"
126+
:tooltip="apiParams.timezone.description"
127+
/>
123128
</template>
124129
<a-select
125130
showSearch
@@ -128,54 +133,119 @@
128133
:filterOption="(input, option) => {
129134
return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0
130135
}"
131-
:loading="fetching">
132-
<a-select-option v-for="opt in timeZoneMap" :key="opt.id" :label="opt.name || opt.description">
136+
:loading="fetching"
137+
>
138+
<a-select-option
139+
v-for="opt in timeZoneMap"
140+
:key="opt.id"
141+
:label="opt.name || opt.description"
142+
>
133143
{{ opt.name || opt.description }}
134144
</a-select-option>
135145
</a-select>
136146
</a-form-item>
137-
<a-form-item name="startDate" ref="startDate">
138-
<template #label>
139-
<tooltip-label :title="$t('label.start.date.and.time')" :tooltip="apiParams.startdate.description"/>
140-
</template>
141-
<a-date-picker
142-
v-model:value="form.startDate"
143-
show-time
144-
:locale="this.$i18n.locale"
145-
:placeholder="$t('message.select.start.date.and.time')"/>
146-
</a-form-item>
147-
<a-form-item name="endDate" ref="endDate">
147+
<a-row justify="space-between">
148+
<a-col>
149+
<a-form-item
150+
name="startDate"
151+
ref="startDate"
152+
>
153+
<template #label>
154+
<tooltip-label
155+
:title="$t('label.start.date.and.time')"
156+
:tooltip="apiParams.startdate.description"
157+
/>
158+
</template>
159+
<a-date-picker
160+
v-model:value="form.startDate"
161+
show-time
162+
:locale="this.$i18n.locale"
163+
:placeholder="$t('message.select.start.date.and.time')"
164+
/>
165+
</a-form-item>
166+
</a-col>
167+
<a-col>
168+
<a-form-item
169+
name="endDate"
170+
ref="endDate"
171+
>
172+
<template #label>
173+
<tooltip-label
174+
:title="$t('label.end.date.and.time')"
175+
:tooltip="apiParams.enddate.description"
176+
/>
177+
</template>
178+
<a-date-picker
179+
v-model:value="form.endDate"
180+
show-time
181+
:locale="this.$i18n.locale"
182+
:placeholder="$t('message.select.end.date.and.time')"
183+
/>
184+
</a-form-item>
185+
</a-col>
186+
</a-row>
187+
<a-form-item
188+
name="schedule"
189+
ref="schedule"
190+
:wrapperCol="{ span: 24 }"
191+
>
148192
<template #label>
149-
<tooltip-label :title="$t('label.end.date.and.time')" :tooltip="apiParams.enddate.description"/>
193+
<tooltip-label
194+
:title="$t('label.schedule')"
195+
:tooltip="apiParams.schedule.description"
196+
/>
150197
</template>
151-
<a-date-picker
152-
v-model:value="form.endDate"
153-
show-time
154-
:locale="this.$i18n.locale"
155-
:placeholder="$t('message.select.end.date.and.time')"/>
198+
<a-row
199+
style="margin-bottom: 15px; text-align: center;"
200+
justify="space-around"
201+
align="middle"
202+
>
203+
<cron-ant
204+
v-if="!form.useCronFormat"
205+
v-model="form.schedule"
206+
:periods="periods"
207+
:button-props="{ type: 'primary', size: 'small', disabled: form.useCronFormat }"
208+
@error="error = $event"
209+
/>
210+
<label
211+
v-if="form.useCronFormat">
212+
{{ generateHumanReadableSchedule(form.schedule) }}
213+
</label>
214+
</a-row>
215+
<a-row
216+
justify="space-between"
217+
align="middle"
218+
>
219+
<a-col>
220+
<label>{{ $t('label.cron.mode') }}</label>
221+
</a-col>
222+
<a-col>
223+
<a-switch v-model:checked="form.useCronFormat">
224+
</a-switch>
225+
</a-col>
226+
<a-col :span="12">
227+
<a-input
228+
:addonBefore="$t('label.cron')"
229+
v-model:value="form.schedule"
230+
:disabled="!form.useCronFormat"
231+
v-focus="true"
232+
/>
233+
</a-col>
234+
</a-row>
156235
</a-form-item>
157-
<a-form-item name="enabled" ref="enabled">
236+
<a-form-item
237+
name="enabled"
238+
ref="enabled"
239+
:wrapperCol="{ span: 24}"
240+
>
158241
<template #label>
159-
<tooltip-label :title="$t('label.enabled')" :tooltip="apiParams.enabled.description"/>
242+
<tooltip-label
243+
:title="$t('label.enabled')"
244+
:tooltip="apiParams.enabled.description"
245+
/>
160246
</template>
161-
<a-switch
162-
v-model:checked="form.enabled">
163-
</a-switch>
247+
<a-switch v-model:checked="form.enabled" />
164248
</a-form-item>
165-
<div :span="24" class="action-button">
166-
<a-button
167-
:loading="loading"
168-
@click="closeModal">
169-
{{ $t('label.cancel') }}
170-
</a-button>
171-
<a-button
172-
:loading="loading"
173-
ref="submit"
174-
type="primary"
175-
htmlType="submit">
176-
{{ $t('label.ok') }}
177-
</a-button>
178-
</div>
179249
</a-form>
180250
</a-modal>
181251
</template>
@@ -191,7 +261,12 @@ import { mixinForm } from '@/utils/mixin'
191261
import { timeZone } from '@/utils/timezone'
192262
import debounce from 'lodash/debounce'
193263
import cronstrue from 'cronstrue/i18n'
194-
import moment from 'moment-timezone'
264+
import dayjs from 'dayjs'
265+
import utc from 'dayjs/plugin/utc'
266+
import timezone from 'dayjs/plugin/timezone'
267+
268+
dayjs.extend(utc)
269+
dayjs.extend(timezone)
195270
196271
export default {
197272
name: 'InstanceSchedules',
@@ -323,8 +398,8 @@ export default {
323398
this.isEdit = true
324399
Object.assign(this.form, schedule)
325400
// Some weird issue when we directly pass in the moment with tz object
326-
this.form.startDate = moment(moment(schedule.startdate).tz(schedule.timezone).format(this.pattern))
327-
this.form.endDate = schedule.enddate ? moment(moment(schedule.enddate).tz(schedule.timezone).format(this.pattern)) : ''
401+
this.form.startDate = dayjs(schedule.startdate).tz(schedule.timezone)
402+
this.form.endDate = schedule.enddate ? dayjs(dayjs(schedule.enddate).tz(schedule.timezone)) : null
328403
this.showAddModal()
329404
},
330405
showAddModal () {
@@ -431,7 +506,7 @@ export default {
431506
this.updateColumns()
432507
},
433508
generateHumanReadableSchedule (schedule) {
434-
return cronstrue.toString(schedule, { locale: this.$i18n.locale, throwExceptionOnParseError: false })
509+
return cronstrue.toString(schedule, { locale: this.$i18n.locale, throwExceptionOnParseError: false, verbose: true })
435510
},
436511
updateColumns () {
437512
this.columns = []

0 commit comments

Comments
 (0)