dashbaord增加Jsite服务器详情页
This commit is contained in:
parent
ad2929e2fa
commit
71b62d9bdf
238
dashboard/src2/components/JsiteServerOverview.vue
Normal file
238
dashboard/src2/components/JsiteServerOverview.vue
Normal file
@ -0,0 +1,238 @@
|
|||||||
|
<template>
|
||||||
|
<div
|
||||||
|
v-if="$jsiteServer?.pg"
|
||||||
|
class="grid grid-cols-1 items-start gap-5 lg:grid-cols-2"
|
||||||
|
>
|
||||||
|
<!-- 左侧区块：基本信息 -->
|
||||||
|
<div class="col-span-1 space-y-5">
|
||||||
|
<!-- 服务器状态卡片 -->
|
||||||
|
<div class="rounded-md border">
|
||||||
|
<div class="h-12 border-b px-5 py-4">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900">服务器状态</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="flex h-full flex-col sm:flex-row sm:items-center sm:justify-between">
|
||||||
|
<div class="mb-4 sm:mb-0">
|
||||||
|
<div class="flex items-center">
|
||||||
|
<span class="text-base font-medium text-gray-900">
|
||||||
|
{{ getStatusText($jsiteServer.pg.status) }}
|
||||||
|
</span>
|
||||||
|
<Badge
|
||||||
|
:label="getStatusText($jsiteServer.pg.status)"
|
||||||
|
:variant="getStatusVariant($jsiteServer.pg.status)"
|
||||||
|
class="ml-2"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-if="$jsiteServer.pg.end_date" class="mt-2 inline-flex items-center rounded-full bg-amber-50 px-4 py-2 text-sm font-medium text-amber-800">
|
||||||
|
<i-lucide-clock class="mr-1.5 h-4 w-4 text-amber-500" />
|
||||||
|
到期时间：{{ $format.date($jsiteServer.pg.end_date) }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex gap-2">
|
||||||
|
<Button
|
||||||
|
v-if="$jsiteServer.pg.status === 'Running'"
|
||||||
|
@click="rebootServer"
|
||||||
|
:loading="$jsiteServer.reboot.loading"
|
||||||
|
class="px-5 !bg-orange-500 !hover:bg-orange-600 !text-white"
|
||||||
|
>
|
||||||
|
重启
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
@click="renameServer"
|
||||||
|
class="bg-gray-100 text-gray-700 hover:bg-gray-200"
|
||||||
|
>
|
||||||
|
重命名
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 服务器信息 -->
|
||||||
|
<div class="rounded-md border">
|
||||||
|
<div class="h-12 border-b px-5 py-4">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900">服务器信息</h2>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<div
|
||||||
|
v-for="info in serverInformation"
|
||||||
|
:key="info.label"
|
||||||
|
class="flex items-center px-5 py-3 last:pb-5 even:bg-gray-50/70"
|
||||||
|
>
|
||||||
|
<div class="w-1/3 text-base text-gray-600">{{ info.label }}</div>
|
||||||
|
<div
|
||||||
|
class="flex w-2/3 items-center space-x-2 text-base text-gray-900"
|
||||||
|
>
|
||||||
|
<div v-if="info.prefix">
|
||||||
|
<component :is="info.prefix" />
|
||||||
|
</div>
|
||||||
|
<span>
|
||||||
|
{{ info.value }}
|
||||||
|
</span>
|
||||||
|
<div v-if="info.suffix">
|
||||||
|
<component :is="info.suffix" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 右侧区块：配置信息 -->
|
||||||
|
<div class="col-span-1 space-y-5">
|
||||||
|
<!-- 服务器配置 -->
|
||||||
|
<div class="rounded-md border">
|
||||||
|
<div class="h-12 border-b px-5 py-4">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900">服务器配置</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="grid grid-cols-2 gap-4">
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-blue-600">{{ $jsiteServer.pg.cpu || '未知' }}</div>
|
||||||
|
<div class="text-sm text-gray-600">CPU核心</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-green-600">{{ $jsiteServer.pg.memory || '未知' }}GB</div>
|
||||||
|
<div class="text-sm text-gray-600">内存</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-purple-600">{{ $jsiteServer.pg.disk_size || '未知' }}GB</div>
|
||||||
|
<div class="text-sm text-gray-600">磁盘</div>
|
||||||
|
</div>
|
||||||
|
<div class="text-center">
|
||||||
|
<div class="text-2xl font-bold text-orange-600">{{ $jsiteServer.pg.bandwidth || '未知' }}Mbps</div>
|
||||||
|
<div class="text-sm text-gray-600">带宽</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- SSH连接信息 -->
|
||||||
|
<div class="rounded-md border">
|
||||||
|
<div class="h-12 border-b px-5 py-4">
|
||||||
|
<h2 class="text-lg font-medium text-gray-900">SSH连接</h2>
|
||||||
|
</div>
|
||||||
|
<div class="p-5">
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-600">公网IP:</span>
|
||||||
|
<span class="font-mono text-gray-900">{{ $jsiteServer.pg.public_ip || '未分配' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-600">SSH端口:</span>
|
||||||
|
<span class="font-mono text-gray-900">{{ $jsiteServer.pg.ssh_port || '22' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-600">SSH用户:</span>
|
||||||
|
<span class="font-mono text-gray-900">{{ $jsiteServer.pg.ssh_user || 'root' }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<span class="text-gray-600">密钥对:</span>
|
||||||
|
<span class="font-mono text-gray-900">{{ $jsiteServer.pg.key_pair_name || '未设置' }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { getCachedDocumentResource, Badge, Tooltip } from 'jingrow-ui';
|
||||||
|
import { h, defineAsyncComponent } from 'vue';
|
||||||
|
import { toast } from 'vue-sonner';
|
||||||
|
import InfoIcon from '~icons/lucide/info';
|
||||||
|
import { getToastErrorMessage } from '../utils/toast';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'JsiteServerOverview',
|
||||||
|
props: ['server'],
|
||||||
|
components: {
|
||||||
|
Badge,
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getStatusText(status) {
|
||||||
|
const statusMap = {
|
||||||
|
'Pending': '待处理',
|
||||||
|
'Starting': '启动中',
|
||||||
|
'Running': '运行中',
|
||||||
|
'Stopping': '停止中',
|
||||||
|
'Stopped': '已停止',
|
||||||
|
'Resetting': '重置中',
|
||||||
|
'Upgrading': '升级中',
|
||||||
|
'Disabled': '已禁用'
|
||||||
|
};
|
||||||
|
return statusMap[status] || status;
|
||||||
|
},
|
||||||
|
getStatusVariant(status) {
|
||||||
|
const variantMap = {
|
||||||
|
'Pending': 'warning',
|
||||||
|
'Starting': 'warning',
|
||||||
|
'Running': 'success',
|
||||||
|
'Stopping': 'warning',
|
||||||
|
'Stopped': 'danger',
|
||||||
|
'Resetting': 'warning',
|
||||||
|
'Upgrading': 'warning',
|
||||||
|
'Disabled': 'danger'
|
||||||
|
};
|
||||||
|
return variantMap[status] || 'default';
|
||||||
|
},
|
||||||
|
rebootServer() {
|
||||||
|
toast.promise(
|
||||||
|
this.$jsiteServer.reboot.submit(),
|
||||||
|
{
|
||||||
|
loading: '正在重启服务器...',
|
||||||
|
success: '服务器重启命令已发送',
|
||||||
|
error: (e) => getToastErrorMessage(e),
|
||||||
|
},
|
||||||
|
);
|
||||||
|
},
|
||||||
|
renameServer() {
|
||||||
|
// 这里可以实现重命名功能
|
||||||
|
toast.info('重命名功能待实现');
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
serverInformation() {
|
||||||
|
return [
|
||||||
|
{
|
||||||
|
label: '服务器名称',
|
||||||
|
value: this.$jsiteServer.pg?.title || this.$jsiteServer.pg?.name,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '实例ID',
|
||||||
|
value: this.$jsiteServer.pg?.instance_id || '未分配',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '订单ID',
|
||||||
|
value: this.$jsiteServer.pg?.order_id || '未分配',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '区域',
|
||||||
|
value: this.$jsiteServer.pg?.region || '未知',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '系统',
|
||||||
|
value: this.$jsiteServer.pg?.system || '未知',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '套餐ID',
|
||||||
|
value: this.$jsiteServer.pg?.planid || '未知',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '镜像ID',
|
||||||
|
value: this.$jsiteServer.pg?.image_id || '未知',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: '购买时长',
|
||||||
|
value: this.$jsiteServer.pg?.period ? `${this.$jsiteServer.pg.period}个月` : '未知',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
},
|
||||||
|
$jsiteServer() {
|
||||||
|
return getCachedDocumentResource('Jsite Server', this.server);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@ -197,7 +197,11 @@ export default {
|
|||||||
{
|
{
|
||||||
label: '概览',
|
label: '概览',
|
||||||
route: '',
|
route: '',
|
||||||
type: 'fields'
|
type: 'Component',
|
||||||
|
component: defineAsyncComponent(() => import('../components/JsiteServerOverview.vue')),
|
||||||
|
props: jsiteServer => {
|
||||||
|
return { server: jsiteServer.pg?.name };
|
||||||
|
}
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
fields: [
|
fields: [
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user