jcloud/dashboard/src2/pages/CreateSiteForMarketplaceApp.vue

<template>
	<div class="top-0 z-10 shrink-0">
		<Header>
			<FBreadcrumbs
				:items="[
					{
						label: '安装应用',
						route: { name: 'InstallApp', params: { app: app } }
					}
				]"
			/>
		</Header>

		<div class="m-12 mx-auto max-w-2xl px-5">
			<div v-if="$resources.app.loading" class="py-4 text-base text-gray-600">
				加载中...
			</div>
			<div v-else class="space-y-6">
				<div class="mb-12 flex">
					<img
						:src="appDoc.image"
						class="h-12 w-12 rounded-lg border"
						:alt="appDoc.name"
					/>
					<div class="my-1 ml-4 flex flex-col justify-between">
						<h1 class="text-lg font-semibold">{{ appDoc.title }}</h1>
						<p class="text-sm text-gray-600">{{ appDoc.description }}</p>
					</div>
				</div>

				<div
					v-if="failure"
					class="flex items-center space-x-2 rounded border border-gray-200 bg-gray-100 p-4 text-base text-gray-700"
				>
					<i-lucide-alert-circle class="inline-block h-5 w-5" />
					<p>
						应用安装失败。
						<router-link class="underline" :to="failureRoute">
							{{
								$resources.siteGroupDeploy.pg?.status === 'Bench Deploy Failed'
									? '查看部署'
									: '查看任务'
							}}
						</router-link>
						。
					</p>
				</div>
				<div class="divide-y rounded-lg bg-gray-50 px-4">
					<div
						v-for="step in steps"
						:key="step.id"
						class="flex items-center border-gray-200 px-1 py-3"
					>
						<div class="flex items-center space-x-4">
							<LoadingIndicator
								class="h-4 w-4 text-gray-900"
								v-if="step.icon() === 'loading'"
							/>
							<FeatherIcon
								v-else
								:name="step.icon()"
								class="h-5 w-5 rounded-full p-0.5 text-white"
								:stroke-width="3"
								:class="{
									'bg-green-500': step.icon() === 'check',
									'bg-red-500': step.icon() === 'x',
									'bg-gray-500': step.icon() === 'clock'
								}"
							/>
							<div class="flex flex-col space-y-1">
								<h5 class="text-base">{{ step.title }}</h5>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { Breadcrumbs } from 'jingrow-ui';
import Header from '../components/Header.vue';

export default {
	props: {
		app: {
			type: String,
			required: true
		}
	},
	pageMeta() {
		return {
			title: `安装 ${this.appDoc.title} - 今果 Jingrow`
		};
	},
	components: {
		FBreadcrumbs: Breadcrumbs,
		Header
	},
	data() {
		return {
			siteGroupDeployName: this.$route.query.siteGroupDeployName
		};
	},
	mounted() {
		this.$socket.emit(
			'pg_subscribe',
			'Site Group Deploy',
			this.siteGroupDeployName
		);

		this.$socket.on('pg_update', () => {
			this.$resources.siteGroupDeploy.reload();
		});
	},
	resources: {
		app() {
			return {
				url: 'jcloud.api.marketplace.get',
				params: {
					app: this.app
				},
				auto: true
			};
		},
		siteGroupDeploy() {
			return {
				type: 'document',
				pagetype: 'Site Group Deploy',
				name: this.siteGroupDeployName,
				onSuccess: pg => {
					if (pg.status === 'Site Created') {
						setTimeout(() => {
							this.$router.push({
								name: 'Site Detail Overview',
								params: { name: pg.site }
							});
						}, 1000);
					}
				}
			};
		}
	},
	computed: {
		failure() {
			return ['Site Creation Failed', 'Bench Deploy Failed'].includes(
				this.$resources.siteGroupDeploy.pg?.status
			);
		},
failureRoute() {
			if (this.$resources.siteGroupDeploy.pg?.status === 'Bench Deploy Failed')
				return {
					name: '发布组详情部署',
					params: {
						name: this.$resources.siteGroupDeploy.pg.release_group
					}
				};
			else if (
				this.$resources.siteGroupDeploy.pg?.status === 'Site Creation Failed'
			)
				return {
					name: '站点任务',
					params: { name: this.$resources.siteGroupDeploy.pg.site }
				};
		},
		steps() {
			const statusPosition = status => {
				if (!status) return -1;

				return [
					'Pending',
					'Deploying Bench',
					'Bench Deployed',
					'Bench Deploy Failed',
					'Creating Site',
					'Site Created',
					'Site Creation Failed'
				].indexOf(status);
			};
			const status = this.$resources.siteGroupDeploy?.pg?.status;

			return [
				{
					id: 0,
					title: '初始化中',
					description: '正在初始化设置',
					status: 'Pending',
					icon: () => {
						if (statusPosition(status) === 0) {
							return 'loading';
						} else if (statusPosition(status) > 0) {
							return 'check';
						}
					},
					message: '这应该需要几分钟'
				},
				{
					id: 1,
					title:
						statusPosition(status) <= 1 ? '部署 Bench 中' : 'Bench 已部署',
					description: '正在服务器上部署 bench',
					status: 'Deploying Bench',
					icon: () => {
						if (status === 'Bench Deploy Failed') {
							return 'x';
						} else if (statusPosition(status) === 1) {
							return 'loading';
						} else if (statusPosition(status) > 1) {
							return 'check';
						} else {
							return 'clock';
						}
					},
					message: '这应该需要几分钟'
				},
				{
					id: 2,
					title: statusPosition(status) <= 4 ? '创建站点中' : '站点已创建',
					description: '正在服务器上创建站点',
					status: 'Creating Site',
					icon: () => {
						if (status === 'Site Creation Failed') {
							return 'x';
						} else if (statusPosition(status) === 4) {
							return 'loading';
						} else if (statusPosition(status) > 4) {
							return 'check';
						} else {
							return 'clock';
						}
					},
					message: '这应该需要几分钟'
				}
			];
		},
		appDoc() {
			return this.$resources.app.data || {};
		}
	}
};
</script>