298 lines
7.3 KiB
Vue
298 lines
7.3 KiB
Vue
<template>
|
|
<div class="sticky top-0 z-10 shrink-0">
|
|
<Header>
|
|
<Breadcrumbs
|
|
:items="
|
|
server
|
|
? [
|
|
{
|
|
label: '服务器',
|
|
route: '/servers'
|
|
},
|
|
{
|
|
label: server,
|
|
route: `/servers/${server}`
|
|
},
|
|
{
|
|
label: '新建站点分组',
|
|
route: '/groups/new'
|
|
}
|
|
]
|
|
: [
|
|
{ label: '站点分组', route: '/groups' },
|
|
{ label: '新建站点分组', route: '/groups/new' }
|
|
]
|
|
"
|
|
/>
|
|
</Header>
|
|
</div>
|
|
|
|
<div
|
|
v-if="!$team.pg?.is_desk_user && !$session.hasBenchCreationAccess"
|
|
class="mx-auto mt-60 w-fit rounded border border-dashed px-12 py-8 text-center text-gray-600"
|
|
>
|
|
<i-lucide-alert-triangle class="mx-auto mb-4 h-6 w-6 text-red-600" />
|
|
<ErrorMessage message="您没有权限创建新的站点分组" />
|
|
</div>
|
|
|
|
<div v-else class="mx-auto max-w-2xl px-5">
|
|
<div v-if="options" class="space-y-12 pb-[50vh] pt-12">
|
|
<div>
|
|
<div class="flex items-center justify-between">
|
|
<h2 class="text-sm font-medium leading-6 text-gray-900">
|
|
选择 Jingrow 版本
|
|
</h2>
|
|
</div>
|
|
<div class="mt-2">
|
|
<div class="grid grid-cols-2 gap-3 sm:grid-cols-3">
|
|
<button
|
|
v-for="version in options.versions"
|
|
:key="version.name"
|
|
:class="[
|
|
benchVersion === version.name
|
|
? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
|
|
: 'bg-white text-gray-900 hover:bg-gray-50',
|
|
'flex cursor-pointer items-center justify-between rounded border border-gray-400 p-3 text-sm focus:outline-none'
|
|
]"
|
|
@click="benchVersion = version.name"
|
|
>
|
|
<span class="font-medium">{{ version.name }} </span>
|
|
<span class="ml-1 text-gray-600">
|
|
{{ version.status }}
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex flex-col"
|
|
v-if="options?.clusters.length && benchVersion && !server"
|
|
>
|
|
<h2 class="text-sm font-medium leading-6 text-gray-900">
|
|
选择区域
|
|
</h2>
|
|
<div class="mt-2 w-full space-y-2">
|
|
<div class="grid grid-cols-2 gap-3">
|
|
<button
|
|
v-for="c in options?.clusters"
|
|
:key="c.name"
|
|
@click="benchRegion = c.name"
|
|
:class="[
|
|
benchRegion === c.name
|
|
? 'border-gray-900 ring-1 ring-gray-900 hover:bg-gray-100'
|
|
: 'border-gray-400 bg-white text-gray-900 ring-gray-200 hover:bg-gray-50',
|
|
'flex w-full items-center rounded border p-3 text-left text-base text-gray-900'
|
|
]"
|
|
>
|
|
<div class="flex w-full items-center justify-between">
|
|
<div class="flex w-full items-center space-x-2">
|
|
<img :src="c.image" class="h-5 w-5" />
|
|
<span class="text-sm font-medium">
|
|
{{ c.title }}
|
|
</span>
|
|
</div>
|
|
<Badge v-if="c.beta" :label="c.beta ? '测试版' : ''" />
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="benchVersion && (benchRegion || server)" class="flex flex-col">
|
|
<h2 class="text-sm font-medium leading-6 text-gray-900">
|
|
输入站点分组标题
|
|
</h2>
|
|
<div class="mt-2">
|
|
<FormControl v-model="benchTitle" type="text" />
|
|
</div>
|
|
</div>
|
|
<Summary
|
|
v-if="benchVersion && (benchRegion || server) && benchTitle"
|
|
:options="summaryOptions"
|
|
/>
|
|
<div
|
|
class="flex flex-col space-y-4"
|
|
v-if="benchVersion && (benchRegion || server) && benchTitle"
|
|
>
|
|
<FormControl
|
|
type="checkbox"
|
|
v-model="agreedToRegionConsent"
|
|
:label="`我同意我所选地区的法律适用于我和Jingrow。`"
|
|
/>
|
|
<ErrorMessage class="my-2" :message="$resources.createBench.error" />
|
|
<Button
|
|
variant="solid"
|
|
:disabled="!agreedToRegionConsent"
|
|
@click="
|
|
$resources.createBench.submit({
|
|
bench: {
|
|
title: benchTitle,
|
|
version: benchVersion,
|
|
cluster: benchRegion,
|
|
saas_app: null,
|
|
apps: getAppsToInstall(),
|
|
server: server || null
|
|
}
|
|
})
|
|
"
|
|
:loading="$resources.createBench.loading"
|
|
>
|
|
创建Bench组
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
import Summary from '../components/Summary.vue';
|
|
import Header from '../components/Header.vue';
|
|
import { DashboardError } from '../utils/error';
|
|
import { h } from 'vue';
|
|
import { Badge } from 'jingrow-ui';
|
|
import ObjectList from '../components/ObjectList.vue';
|
|
|
|
export default {
|
|
name: 'NewReleaseGroup',
|
|
components: {
|
|
Summary,
|
|
Header,
|
|
ObjectList
|
|
},
|
|
props: ['server'],
|
|
data() {
|
|
return {
|
|
benchTitle: '',
|
|
benchVersion: '',
|
|
benchRegion: '',
|
|
agreedToRegionConsent: false
|
|
};
|
|
},
|
|
resources: {
|
|
preInstalledApps() {
|
|
return {
|
|
url: 'jcloud.api.bench.get_default_apps',
|
|
initialData: {},
|
|
auto: true
|
|
};
|
|
},
|
|
options() {
|
|
return {
|
|
url: 'jcloud.api.bench.options',
|
|
initialData: {
|
|
versions: [],
|
|
clusters: []
|
|
},
|
|
auto: true
|
|
};
|
|
},
|
|
createBench() {
|
|
return {
|
|
url: 'jcloud.api.bench.new',
|
|
validate() {
|
|
if (!this.benchTitle) {
|
|
throw new DashboardError('Bench组标题不能为空');
|
|
}
|
|
if (!this.benchVersion) {
|
|
throw new DashboardError('请选择一个版本来创建bench');
|
|
}
|
|
if (!this.agreedToRegionConsent) {
|
|
throw new DashboardError(
|
|
'请同意上述声明以创建bench'
|
|
);
|
|
}
|
|
},
|
|
onSuccess(groupName) {
|
|
this.$router.push({
|
|
name: 'Release Group Detail Apps',
|
|
params: { name: groupName }
|
|
});
|
|
}
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
getAppsToInstall() {
|
|
let apps = [
|
|
this.options.versions
|
|
.find(v => v.name === this.benchVersion)
|
|
.apps.find(app => app.name === 'jingrow')
|
|
].map(app => {
|
|
return {
|
|
name: app.name,
|
|
source: app.source.name
|
|
};
|
|
});
|
|
|
|
// 添加默认应用
|
|
apps.push(
|
|
...this.preInstalledApps[this.benchVersion].map(app => {
|
|
return {
|
|
name: app.app,
|
|
source: app.source
|
|
};
|
|
})
|
|
);
|
|
return apps;
|
|
}
|
|
},
|
|
computed: {
|
|
options() {
|
|
return this.$resources.options.data;
|
|
},
|
|
preInstalledApps() {
|
|
return this.$resources.preInstalledApps.data;
|
|
},
|
|
preInstalledAppsList() {
|
|
return {
|
|
data: () => this.preInstalledApps,
|
|
columns: [
|
|
{
|
|
label: '默认应用',
|
|
fieldname: 'app_title',
|
|
type: 'Component',
|
|
component: ({ row }) => {
|
|
return h(
|
|
'a',
|
|
{
|
|
class: 'flex items-center text-sm',
|
|
href: `${row.route}`,
|
|
target: '_blank'
|
|
},
|
|
[h('span', { class: 'ml-2' }, row.app_title)]
|
|
);
|
|
}
|
|
}
|
|
]
|
|
};
|
|
},
|
|
summaryOptions() {
|
|
return [
|
|
{
|
|
label: 'Jingrow框架版本',
|
|
value: this.benchVersion
|
|
},
|
|
{
|
|
label: '预装应用',
|
|
value: this.preInstalledApps[this.benchVersion]
|
|
.map(app => app.title)
|
|
.join(', '),
|
|
condition: () => this.preInstalledApps[this.benchVersion].length
|
|
},
|
|
{
|
|
label: '地区',
|
|
value: this.benchRegion,
|
|
condition: () => !this.server
|
|
},
|
|
{
|
|
label: '服务器',
|
|
value: this.server,
|
|
condition: () => this.server
|
|
},
|
|
{
|
|
label: '标题',
|
|
value: this.benchTitle
|
|
}
|
|
];
|
|
}
|
|
}
|
|
};
|
|
</script> |