Skip to content

Commit 925c9ea

Browse files
vishesh92vishesh92
committed
Update UI to use new APIs
1 parent 0d5949d commit 925c9ea

4 files changed

Lines changed: 87 additions & 63 deletions

File tree

‎ui/public/locales/en.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2780,7 +2780,8 @@
27802780
"label.vmlimit": "Instance limits",
27812781
"label.vmname": "Instance name",
27822782
"label.vms": "Instances",
2783-
"label.vmscheduleactions": "Actions",
2783+
"label.scheduleactions": "Actions",
2784+
27842785
"label.vmstate": "Instance state",
27852786
"label.vmtotal": "Total of Instances",
27862787
"label.vmware": "VMware",
@@ -3536,7 +3537,7 @@
35363537
"message.error.remove.nic": "There was an error",
35373538
"message.error.remove.secondary.ipaddress": "There was an error removing the secondary IP Address",
35383539
"message.error.remove.tungsten.routing.policy": "Removing Tungsten-Fabric Routing Policy from Network failed",
3539-
"message.error.remove.vm.schedule": "Removing Instance Schedule failed",
3540+
"message.error.remove.resource.schedule": "Removing Schedule for the resource failed",
35403541
"message.error.required.input": "Please enter input",
35413542
"message.error.reset.config": "Unable to reset config to default value",
35423543
"message.error.retrieve.kubeconfig": "Unable to retrieve Kubernetes Cluster config",
@@ -3931,7 +3932,7 @@
39313932
"message.success.config.backup.schedule": "Successfully configured Instance backup schedule",
39323933
"message.success.config.health.monitor": "Successfully Configure Health Monitor",
39333934
"message.success.config.sticky.policy": "Successfully configured sticky policy",
3934-
"message.success.config.vm.schedule": "Successfully configured Instance schedule",
3935+
"message.success.config.resource.schedule": "Successfully configured schedule for the resource",
39353936
"message.success.copy.clipboard": "Successfully copied to clipboard",
39363937
"message.success.create.account": "Successfully created Account",
39373938
"message.success.create.asnrange": "Successfully created AS Range",

‎ui/src/components/view/ListView.vue‎

Lines changed: 5 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1037,21 +1037,11 @@
10371037
/>
10381038
<slot></slot>
10391039
</template>
1040-
<template v-if="column.key === 'vmScheduleActions'">
1041-
<tooltip-button
1042-
:tooltip="$t('label.edit')"
1043-
:disabled="!('updateVMSchedule' in $store.getters.apis)"
1044-
icon="edit-outlined"
1045-
@onClick="updateVMSchedule(record)"
1046-
/>
1047-
<tooltip-button
1048-
:tooltip="$t('label.remove')"
1049-
:disabled="!('deleteVMSchedule' in $store.getters.apis)"
1050-
icon="delete-outlined"
1051-
:danger="true"
1052-
type="primary"
1053-
@onClick="removeVMSchedule(record)"
1054-
/>
1040+
<template v-if="column.key === 'scheduleActions'">
1041+
<slot
1042+
name="scheduleActions"
1043+
:record="record"
1044+
></slot>
10551045
</template>
10561046
<template v-if="column.key === 'vgpuActions'">
10571047
<slot name="actionButtons" :record="record" :actions="actions"></slot>
@@ -1397,12 +1387,6 @@ export default {
13971387
editTariffValue (record) {
13981388
this.$emit('edit-tariff-action', true, record)
13991389
},
1400-
updateVMSchedule (record) {
1401-
this.$emit('update-vm-schedule', record)
1402-
},
1403-
removeVMSchedule (record) {
1404-
this.$emit('remove-vm-schedule', record)
1405-
},
14061390
ipV6Address (text, record) {
14071391
if (!record || !record.nic || record.nic.length === 0) {
14081392
return ''

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -87,9 +87,14 @@
8787
:routerlinks="(record) => { return { name: '/securitygroups/' + record.id } }"
8888
:showSearch="false"/>
8989
</a-tab-pane>
90-
<a-tab-pane :tab="$t('label.schedules')" key="schedules" v-if="'listVMSchedule' in $store.getters.apis">
91-
<InstanceSchedules
92-
:virtualmachine="vm"
90+
<a-tab-pane
91+
:tab="$t('label.schedules')"
92+
key="schedules"
93+
v-if="'listResourceSchedule' in $store.getters.apis"
94+
>
95+
<ResourceSchedules
96+
:resource="vm"
97+
resourceType="VirtualMachine"
9398
:loading="loading"/>
9499
</a-tab-pane>
95100
<a-tab-pane :tab="$t('label.settings')" key="settings">
@@ -145,7 +150,7 @@ import EventsTab from '@/components/view/EventsTab'
145150
import DetailSettings from '@/components/view/DetailSettings'
146151
import CreateVolume from '@/views/storage/CreateVolume'
147152
import NicsTab from '@/views/network/NicsTab'
148-
import InstanceSchedules from '@/views/compute/InstanceSchedules.vue'
153+
import ResourceSchedules from '@/views/compute/ResourceSchedules.vue'
149154
import ListResourceTable from '@/components/view/ListResourceTable'
150155
import TooltipButton from '@/components/widgets/TooltipButton'
151156
import ResourceIcon from '@/components/view/ResourceIcon'
@@ -165,7 +170,7 @@ export default {
165170
CreateVolume,
166171
NicsTab,
167172
GPUTab,
168-
InstanceSchedules,
173+
ResourceSchedules,
169174
ListResourceTable,
170175
SecurityGroupSelection,
171176
TooltipButton,

ui/src/views/compute/InstanceSchedules.vue renamed to ui/src/views/compute/ResourceSchedules.vue

Lines changed: 68 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
style="width: 100%; margin-bottom: 10px"
2323
@click="showAddModal"
2424
:loading="loading"
25-
:disabled="!('createVMSchedule' in $store.getters.apis)"
25+
:disabled="!('createResourceSchedule' in $store.getters.apis)"
2626
>
2727
<template #icon><plus-outlined /></template> {{ $t('label.schedule.add') }}
2828
</a-button>
@@ -34,10 +34,25 @@
3434
:selectedColumns="selectedColumnKeys"
3535
ref="listview"
3636
@update-selected-columns="updateSelectedColumns"
37-
@update-vm-schedule="updateVMSchedule"
38-
@remove-vm-schedule="removeVMSchedule"
3937
@refresh="this.fetchData"
40-
/>
38+
>
39+
<template #scheduleActions="{ record }">
40+
<tooltip-button
41+
:tooltip="$t('label.edit')"
42+
:disabled="!('updateResourceSchedule' in $store.getters.apis)"
43+
icon="edit-outlined"
44+
@onClick="updateSchedule(record)"
45+
/>
46+
<tooltip-button
47+
:tooltip="$t('label.remove')"
48+
:disabled="!('deleteResourceSchedule' in $store.getters.apis)"
49+
icon="delete-outlined"
50+
:danger="true"
51+
type="primary"
52+
@onClick="removeSchedule(record)"
53+
/>
54+
</template>
55+
</list-view>
4156
<a-pagination
4257
class="row-element"
4358
style="margin-top: 10px"
@@ -256,6 +271,7 @@ import { reactive, ref, toRaw } from 'vue'
256271
import { getAPI, postAPI } from '@/api'
257272
import ListView from '@/components/view/ListView'
258273
import Status from '@/components/widgets/Status'
274+
import TooltipButton from '@/components/widgets/TooltipButton'
259275
import TooltipLabel from '@/components/widgets/TooltipLabel'
260276
import { mixinForm } from '@/utils/mixin'
261277
import { timeZone } from '@/utils/timezone'
@@ -269,39 +285,46 @@ dayjs.extend(utc)
269285
dayjs.extend(timezone)
270286
271287
export default {
272-
name: 'InstanceSchedules',
288+
name: 'ResourceSchedules',
273289
mixins: [mixinForm],
274290
components: {
275291
Status,
276292
ListView,
293+
TooltipButton,
277294
TooltipLabel
278295
},
279296
props: {
280-
virtualmachine: {
297+
resource: {
281298
type: Object,
282299
required: true
283300
},
301+
resourceType: {
302+
type: String,
303+
required: true
304+
},
284305
loading: {
285306
type: Boolean,
286-
required: true
307+
default: false
287308
}
288309
},
289310
data () {
290311
this.fetchTimeZone = debounce(this.fetchTimeZone, 800)
291312
return {
292313
tabLoading: false,
293-
columnKeys: ['action', 'enabled', 'description', 'schedule', 'timezone', 'startdate', 'enddate', 'created', 'vmScheduleActions'],
314+
columnKeys: ['action', 'enabled', 'description', 'schedule', 'timezone', 'startdate', 'enddate', 'created', 'scheduleActions'],
294315
selectedColumnKeys: [],
295316
columns: [],
296317
schedules: [],
297318
timeZoneMap: [],
298-
actions: [
299-
{ value: 'START', label: 'label.start' },
300-
{ value: 'STOP', label: 'label.stop' },
301-
{ value: 'REBOOT', label: 'label.reboot' },
302-
{ value: 'FORCE_STOP', label: 'label.force.stop' },
303-
{ value: 'FORCE_REBOOT', label: 'label.force.reboot' }
304-
],
319+
resourceActionsMap: {
320+
VirtualMachine: [
321+
{ value: 'START', label: 'label.start' },
322+
{ value: 'STOP', label: 'label.stop' },
323+
{ value: 'REBOOT', label: 'label.reboot' },
324+
{ value: 'FORCE_STOP', label: 'label.force.stop' },
325+
{ value: 'FORCE_REBOOT', label: 'label.force.reboot' }
326+
]
327+
},
305328
periods: [
306329
{ id: 'year', value: ['month', 'day', 'dayOfWeek', 'hour', 'minute'] },
307330
{ id: 'month', value: ['day', 'dayOfWeek', 'hour', 'minute'] },
@@ -319,7 +342,7 @@ export default {
319342
}
320343
},
321344
beforeCreate () {
322-
this.apiParams = this.$getApiParams('createVMSchedule')
345+
this.apiParams = this.$getApiParams('createResourceSchedule')
323346
},
324347
computed: {
325348
pageSizeOptions () {
@@ -330,6 +353,9 @@ export default {
330353
return [...new Set(sizes)].sort(function (a, b) {
331354
return a - b
332355
}).map(String)
356+
},
357+
actions () {
358+
return this.resourceActionsMap[this.resourceType] || []
333359
}
334360
},
335361
created () {
@@ -341,7 +367,8 @@ export default {
341367
this.fetchTimeZone()
342368
},
343369
watch: {
344-
virtualmachine: {
370+
resource: {
371+
deep: true,
345372
handler () {
346373
this.fetchSchedules()
347374
}
@@ -351,7 +378,7 @@ export default {
351378
initForm () {
352379
this.formRef = ref()
353380
this.form = reactive({
354-
action: 'START',
381+
action: this.actions.length > 0 ? this.actions[0].value : null,
355382
schedule: '* * * * *',
356383
description: '',
357384
timezone: 'UTC',
@@ -368,14 +395,15 @@ export default {
368395
endDate: [{ required: false, message: `${this.$t('message.error.select')}` }]
369396
})
370397
},
371-
createVMSchedule (schedule) {
398+
createSchedule (schedule) {
372399
this.resetForm()
373400
this.showAddModal()
374401
},
375-
removeVMSchedule (schedule) {
376-
postAPI('deleteVMSchedule', {
402+
removeSchedule (schedule) {
403+
postAPI('deleteResourceSchedule', {
377404
id: schedule.id,
378-
virtualmachineid: this.virtualmachine.id
405+
resourceid: this.resource.id,
406+
resourcetype: this.resourceType
379407
}).then(() => {
380408
if (this.totalCount - 1 === this.pageSize * (this.page - 1)) {
381409
this.page = this.page - 1 > 0 ? this.page - 1 : 1
@@ -384,16 +412,16 @@ export default {
384412
this.$message.success(message)
385413
}).catch(error => {
386414
console.error(error)
387-
this.$message.error(this.$t('message.error.remove.vm.schedule'))
415+
this.$message.error(this.$t('message.error.remove.resource.schedule'))
388416
this.$notification.error({
389417
message: this.$t('label.error'),
390-
description: this.$t('message.error.remove.vm.schedule')
418+
description: this.$t('message.error.remove.resource.schedule')
391419
})
392420
}).finally(() => {
393421
this.fetchData()
394422
})
395423
},
396-
updateVMSchedule (schedule) {
424+
updateSchedule (schedule) {
397425
this.resetForm()
398426
this.isEdit = true
399427
Object.assign(this.form, schedule)
@@ -416,23 +444,24 @@ export default {
416444
schedule: values.schedule,
417445
timezone: values.timezone,
418446
action: values.action,
419-
virtualmachineid: this.virtualmachine.id,
447+
resourceid: this.resource.id,
448+
resourcetype: this.resourceType,
420449
enabled: values.enabled,
421450
startdate: (values.startDate) ? values.startDate.format(this.pattern) : null,
422451
enddate: (values.endDate) ? values.endDate.format(this.pattern) : null
423452
}
424453
let command = null
425454
if (this.form.id === null || this.form.id === undefined) {
426-
command = 'createVMSchedule'
455+
command = 'createResourceSchedule'
427456
} else {
428457
params.id = this.form.id
429-
command = 'updateVMSchedule'
458+
command = 'updateResourceSchedule'
430459
}
431460
432461
postAPI(command, params).then(response => {
433462
this.$notification.success({
434463
message: this.$t('label.schedule'),
435-
description: this.$t('message.success.config.vm.schedule')
464+
description: this.$t('message.success.config.resource.schedule')
436465
})
437466
this.isSubmitted = false
438467
this.fetchData()
@@ -475,20 +504,25 @@ export default {
475504
},
476505
fetchSchedules () {
477506
this.schedules = []
478-
if (!this.virtualmachine.id) {
507+
if (!this.resource.id) {
479508
return
480509
}
481510
const params = {
482511
page: this.page,
483512
pagesize: this.pageSize,
484-
virtualmachineid: this.virtualmachine.id,
513+
resourceid: this.resource.id,
514+
resourcetype: this.resourceType,
485515
listall: true
486516
}
487517
this.tabLoading = true
488-
getAPI('listVMSchedule', params).then(json => {
518+
getAPI('listResourceSchedule', params).then(json => {
489519
this.schedules = []
490-
this.totalCount = json?.listvmscheduleresponse?.count || 0
491-
this.schedules = json?.listvmscheduleresponse?.vmschedule || []
520+
this.totalCount = json?.listresourcescheduleresponse?.count || 0
521+
this.schedules = json?.listresourcescheduleresponse?.resourceschedule || []
522+
}).catch(error => {
523+
console.error(error)
524+
this.$notifyError(error)
525+
}).finally(() => {
492526
this.tabLoading = false
493527
})
494528
},

0 commit comments

Comments
 (0)