jcloud/dashboard/src2/components/site/SiteChangeServerDialog.vue

<template>
	<Dialog
		v-model="show"
		@close="resetValues"
		:options="{
			title: '将站点移动到另一台服务器',
			actions: [
				{
					label: '将服务器添加到发布组',
					loading: $resources.addServerToReleaseGroup.loading,
					disabled: $resources.isServerAddedInGroup.data || !targetServer.value,
					onClick: () => $resources.addServerToReleaseGroup.submit()
				},
				{
					label: '更改服务器',
					loading: $resources.changeServer.loading,
					variant: 'solid',
					disabled:
						!$resources.changeServerOptions?.data?.length ||
						!targetServer.value ||
						!$resources.isServerAddedInGroup.data,
					onClick: () => {
						$resources.changeServer.submit({
							name: site,
							server: targetServer.value,
							scheduled_datetime: datetimeInIST,
							skip_failing_patches: skipFailingPatches
						});
					}
				}
			]
		}"
	>
		<template #body-content>
			<LoadingIndicator
				class="mx-auto h-4 w-4"
				v-if="$resources.changeServerOptions.loading"
			/>
			<FormControl
				v-else-if="$resources.changeServerOptions.data.length > 0"
				label="选择服务器"
				variant="outline"
				type="autocomplete"
				:options="$resources.changeServerOptions.data"
				v-model="targetServer"
			/>
			<div v-if="$resources.isServerAddedInGroup.data" class="mt-4 space-y-4">
				<DateTimeControl v-model="targetDateTime" label="计划时间" />
				<FormControl
					label="跳过失败的补丁"
					type="checkbox"
					v-model="skipFailingPatches"
				/>
			</div>
			<p v-if="message && !errorMessage" class="mt-4 text-sm text-gray-700">
				{{ message }}
			</p>
			<ErrorMessage class="mt-4" :message="errorMessage" />
		</template>
	</Dialog>
</template>

<script>
import { getCachedDocumentResource } from 'jingrow-ui';
import DateTimeControl from '../DateTimeControl.vue';
import { toast } from 'vue-sonner';

export default {
	props: ['site'],
	components: { DateTimeControl },
	data() {
		return {
			show: true,
			targetServer: {
				label: '',
				value: ''
			},
			targetDateTime: null,
			skipFailingPatches: false
		};
	},
	watch: {
		targetServer(targetServer) {
			this.$resources.isServerAddedInGroup.fetch({
				name: this.site,
				server: targetServer.value
			});
		}
	},
	computed: {
		$site() {
			return getCachedDocumentResource('Site', this.site);
		},
		message() {
			if (this.$resources.changeServerOptions.data.length === 0) {
				return '您的团队没有可用的服务器来移动站点。请先创建服务器。';
			} else if (
				this.targetServer.value &&
				!this.$resources.isServerAddedInGroup.data
			) {
				return "所选服务器尚未添加到发布组。请先将服务器添加到发布组。";
			} else if (
				this.targetServer.value &&
				this.$resources.isServerAddedInGroup.data
			) {
				return '所选服务器已添加到发布组。您现在可以将站点迁移到该服务器。';
			} else return '';
		},
		errorMessage() {
			return (
				this.$resources.addServerToReleaseGroup.error ||
				this.$resources.isServerAddedInGroup.error ||
				this.$resources.changeServerOptions.error ||
				this.$resources.changeServer.error
			);
		},
		datetimeInIST() {
			if (!this.targetDateTime) return null;
			const datetimeInIST = this.$dayjs(this.targetDateTime).format(
				'YYYY-MM-DDTHH:mm'
			);

			return datetimeInIST;
		}
	},
	resources: {
		changeServerOptions() {
			return {
				url: 'jcloud.api.site.change_server_options',
				params: {
					name: this.site
				},
				initialData: [],
				auto: true,
				transform(d) {
					return d.map(s => ({
						label: s.title || s.name,
						description: s.name,
						value: s.name
					}));
				}
			};
		},
		isServerAddedInGroup() {
			return {
				url: 'jcloud.api.site.is_server_added_in_group',
				initialData: false
			};
		},
		changeServer() {
			return {
url: 'jcloud.api.site.change_server',
				onSuccess() {
					toast.success('站点已计划迁移到另一台服务器。');
					this.show = false;
				}
			};
		},
		addServerToReleaseGroup() {
			return {
				url: 'jcloud.api.site.add_server_to_release_group',
				params: {
					name: this.site,
					group_name: this.$site.pg?.group,
					server: this.targetServer.value
				},
				onSuccess(data) {
					toast.success(
						`服务器 ${this.targetServer.value} 已添加到发布组。请等待部署完成。`
					);

					this.$router.push({
						name: 'Release Group Job',
						params: {
							name: this.$site.pg?.group,
							id: data
						}
					});

					this.show = false;
				}
			};
		}
	},
	methods: {
		resetValues() {
			this.targetServer = {
				label: '',
				value: ''
			};
			this.targetDateTime = null;
			this.$resources.isServerAddedInGroup.reset();
		}
	}
};
</script>