120 lines
2.7 KiB
Vue
120 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<div v-if="server">
|
|
<div>
|
|
<header
|
|
class="sticky top-0 z-10 flex items-center justify-between border-b bg-white px-5 py-2.5"
|
|
>
|
|
<Breadcrumbs
|
|
:items="[
|
|
{ label: 'Security', route: { name: 'Security' } },
|
|
{
|
|
label: server?.title,
|
|
route: {
|
|
name: 'SecurityOverview',
|
|
params: { serverName: server?.name }
|
|
}
|
|
}
|
|
]"
|
|
>
|
|
</Breadcrumbs>
|
|
</header>
|
|
<div
|
|
class="flex flex-col space-y-3 px-5 py-3 md:flex-row md:items-baseline md:justify-between md:space-y-0"
|
|
>
|
|
<div class="mt-2 flex items-center">
|
|
<h1 class="text-2xl font-bold">{{ server.title }}</h1>
|
|
<Badge class="ml-4" :label="server.status" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-5 pt-1">
|
|
<Tabs :tabs="tabs">
|
|
<router-view v-slot="{ Component, route }">
|
|
<component v-if="server" :is="Component" :server="server"></component>
|
|
</router-view>
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Tabs from '@/components/Tabs.vue';
|
|
|
|
export default {
|
|
name: 'Security',
|
|
pageMeta() {
|
|
return {
|
|
title: `Security - ${this.serverName} - 今果 Jingrow`
|
|
};
|
|
},
|
|
props: ['serverName'],
|
|
components: {
|
|
Tabs
|
|
},
|
|
resources: {
|
|
server() {
|
|
return {
|
|
url: 'jcloud.api.server.get',
|
|
params: {
|
|
name: this.serverName
|
|
},
|
|
auto: true,
|
|
onSuccess() {
|
|
this.routeToGeneral();
|
|
},
|
|
onError: this.$routeTo404PageIfNotFound
|
|
};
|
|
}
|
|
},
|
|
methods: {
|
|
routeToGeneral() {
|
|
if (this.$route.matched.length === 1) {
|
|
let path = this.$route.fullPath;
|
|
this.$router.replace(`${path}/overview`);
|
|
}
|
|
}
|
|
},
|
|
computed: {
|
|
server() {
|
|
return this.$resources.server.data;
|
|
},
|
|
|
|
tabs() {
|
|
let tabRoute = subRoute => `/security/${this.serverName}/${subRoute}`;
|
|
let tabs = [
|
|
{ label: 'Overview', route: 'overview' },
|
|
{ label: 'Security Updates', route: 'security_update' },
|
|
{ label: 'Firewall Configuration', route: 'firewall' },
|
|
{ label: 'SSH Session Log', route: 'ssh_session_logs' },
|
|
{ label: 'Nginx Overview', route: 'nginx_overview' }
|
|
];
|
|
|
|
let tabsByStatus = {
|
|
Active: [
|
|
'Overview',
|
|
'Security Updates',
|
|
'Firewall Configuration',
|
|
'SSH Session Log',
|
|
'Nginx Overview'
|
|
]
|
|
};
|
|
if (this.server) {
|
|
let tabsToShow = tabsByStatus[this.server.status];
|
|
if (tabsToShow?.length) {
|
|
tabs = tabs.filter(tab => tabsToShow.includes(tab.label));
|
|
}
|
|
return tabs.map(tab => {
|
|
return {
|
|
...tab,
|
|
route: tabRoute(tab.route)
|
|
};
|
|
});
|
|
}
|
|
return [];
|
|
}
|
|
}
|
|
};
|
|
</script>
|