155 lines
3.7 KiB
Vue
155 lines
3.7 KiB
Vue
<template>
|
|
<Dialog
|
|
:options="{
|
|
title: 'Change Region',
|
|
actions: [
|
|
{
|
|
label: 'Change Region',
|
|
loading: $resources.changeRegion.loading,
|
|
variant: 'solid',
|
|
disabled: !selectedRegion,
|
|
onClick: () =>
|
|
$resources.changeRegion.submit({
|
|
name: site?.name,
|
|
cluster: selectedRegion?.value,
|
|
scheduled_datetime: datetimeInIST,
|
|
skip_failing_patches: skipFailingPatches
|
|
})
|
|
}
|
|
]
|
|
}"
|
|
v-model="show"
|
|
@close="resetValues"
|
|
>
|
|
<template #body-content>
|
|
<LoadingIndicator
|
|
class="mx-auto h-4 w-4"
|
|
v-if="$resources.changeRegionOptions.loading"
|
|
/>
|
|
<div v-else class="space-y-4">
|
|
<FormControl
|
|
variant="outline"
|
|
type="autocomplete"
|
|
label="Choose Region"
|
|
v-model="selectedRegion"
|
|
:options="
|
|
$resources.changeRegionOptions.data.regions.map(r => ({
|
|
label: r.title || r.name,
|
|
value: r.name,
|
|
image: r.image
|
|
}))
|
|
"
|
|
>
|
|
<template #prefix>
|
|
<img :src="selectedRegion?.image" class="mr-2 h-4" />
|
|
</template>
|
|
<template #item-prefix="{ active, selected, option }">
|
|
<img v-if="option?.image" :src="option.image" class="mr-2 h-4" />
|
|
</template>
|
|
</FormControl>
|
|
<div
|
|
class="space-y-4"
|
|
v-if="
|
|
$resources.changeRegionOptions.data?.regions?.length > 0 &&
|
|
selectedRegion
|
|
"
|
|
>
|
|
<DateTimeControl v-model="targetDateTime" label="Schedule Time" />
|
|
<FormControl
|
|
label="Skip failing patches if any"
|
|
type="checkbox"
|
|
v-model="skipFailingPatches"
|
|
/>
|
|
</div>
|
|
<p v-else class="mt-4 text-sm text-gray-600">
|
|
If the region you're looking for isn't available, please add from the
|
|
Bench dashboard.
|
|
</p>
|
|
</div>
|
|
<ErrorMessage class="mt-3" :message="$resources.changeRegion.error" />
|
|
</template>
|
|
</Dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { notify } from '@/utils/toast';
|
|
import DateTimeControl from '@/components/DateTimeControl.vue';
|
|
|
|
export default {
|
|
name: 'SiteChangeRegionDialog',
|
|
props: ['site', 'modelValue'],
|
|
emits: ['update:modelValue'],
|
|
components: {
|
|
DateTimeControl
|
|
},
|
|
data() {
|
|
return {
|
|
targetDateTime: null,
|
|
selectedRegion: null,
|
|
skipFailingPatches: false
|
|
};
|
|
},
|
|
computed: {
|
|
show: {
|
|
get() {
|
|
return this.modelValue;
|
|
},
|
|
set(value) {
|
|
this.$emit('update:modelValue', value);
|
|
}
|
|
},
|
|
datetimeInIST() {
|
|
if (!this.targetDateTime) return null;
|
|
const datetimeInIST = this.$dayjs(this.targetDateTime)
|
|
.tz('Asia/Kolkata')
|
|
.format('YYYY-MM-DDTHH:mm');
|
|
|
|
return datetimeInIST;
|
|
}
|
|
},
|
|
resources: {
|
|
changeRegionOptions() {
|
|
return {
|
|
url: 'jcloud.api.site.change_region_options',
|
|
params: {
|
|
name: this.site?.name
|
|
},
|
|
auto: true
|
|
};
|
|
},
|
|
changeRegion() {
|
|
return {
|
|
url: 'jcloud.api.site.change_region',
|
|
validate() {
|
|
if (
|
|
this.$resources.changeRegionOptions.data.current_region ===
|
|
this.selectedRegion
|
|
)
|
|
return 'Site is already in this region';
|
|
},
|
|
onSuccess() {
|
|
const regionName =
|
|
this.$resources.changeRegionOptions.data.regions.find(
|
|
region => region.name === this.selectedRegion
|
|
)?.title || this.selectedRegion;
|
|
|
|
notify({
|
|
title: 'Scheduled Region Change',
|
|
message: `Site <b>${this.site?.host_name}</b> scheduled to be moved to <b>${regionName}</b>`,
|
|
color: 'green',
|
|
icon: 'check'
|
|
});
|
|
this.$emit('update:modelValue', false);
|
|
}
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
resetValues() {
|
|
this.selectedRegion = null;
|
|
this.targetDateTime = null;
|
|
}
|
|
}
|
|
};
|
|
</script>
|