98 lines
2.2 KiB
Vue
98 lines
2.2 KiB
Vue
<template>
|
|
<Section
|
|
v-if="creationJob"
|
|
title="Your server is being setup ..."
|
|
description="Please wait while we set up your server for use"
|
|
>
|
|
<SectionCard>
|
|
<div
|
|
v-for="step in creationJob.steps"
|
|
class="flex items-center px-6 py-2 text-base"
|
|
:key="step.name"
|
|
>
|
|
<div class="h-4 w-4 text-gray-800">
|
|
<Spinner
|
|
class="h-3 w-3 text-gray-500"
|
|
v-if="step.status === 'Running'"
|
|
/>
|
|
<FeatherIcon
|
|
v-else
|
|
class="h-4 w-4"
|
|
:class="{ spin: step.status === 'Running' }"
|
|
:name="iconMap[step.status]"
|
|
/>
|
|
</div>
|
|
<span class="ml-2">{{ step.step_name }}</span>
|
|
</div>
|
|
</SectionCard>
|
|
</Section>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ServerInstall',
|
|
props: ['server'],
|
|
data() {
|
|
return {
|
|
iconMap: {
|
|
Running: 'loader',
|
|
Success: 'check',
|
|
Pending: 'minus'
|
|
},
|
|
creationJob: null
|
|
};
|
|
},
|
|
mounted() {
|
|
this.$socket.on('jcloud_job_update', this.onJcloudJobUpdate);
|
|
this.fetchJob();
|
|
},
|
|
unmounted() {
|
|
this.$socket.emit('pg_unsubscribe', 'Jcloud Job', this.creationJob.name);
|
|
this.$socket.off('jcloud_job_update', this.onJcloudJobUpdate);
|
|
},
|
|
methods: {
|
|
onJcloudJobUpdate(data) {
|
|
if (
|
|
data.server === this.server.name &&
|
|
data.job_type === 'Create Server'
|
|
) {
|
|
this.creationJob = data;
|
|
if (
|
|
data.status === 'Success' &&
|
|
this.$route.path.startsWith(`/servers/${this.server.name}`)
|
|
) {
|
|
this.creationJob = null;
|
|
this.$router.replace(`/servers/${this.server.name}/overview`);
|
|
}
|
|
}
|
|
},
|
|
async fetchJob() {
|
|
let jobs = await this.$call('jcloud.api.server.jcloud_jobs', {
|
|
name: this.server.name
|
|
});
|
|
jobs.forEach(job => {
|
|
if (job.job_type === 'Create Server') {
|
|
this.creationJob = job;
|
|
this.$socket.emit('pg_subscribe', 'Jcloud Job', job.name);
|
|
}
|
|
});
|
|
if (this.creationJob?.status === 'Success') {
|
|
this.$router.replace(`/servers/${this.server.name}/overview`);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.spin {
|
|
animation: spin 4s linear infinite;
|
|
}
|
|
|
|
@keyframes spin {
|
|
100% {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
</style>
|