198 lines
9.1 KiB
Vue
198 lines
9.1 KiB
Vue
<template>
|
|
<Page>
|
|
<TopBar/>
|
|
|
|
<Content>
|
|
<Container>
|
|
<PageHeader>
|
|
<template #start>
|
|
<PageHeaderTitle>{{ __('Services') }}</PageHeaderTitle>
|
|
</template>
|
|
</PageHeader>
|
|
|
|
<PageBody>
|
|
<SettingsLayout>
|
|
<template #nav>
|
|
<Tabs />
|
|
</template>
|
|
<template #segments>
|
|
<SettingsSegment>
|
|
<template #title>{{ __('Servers') }}</template>
|
|
<template #content>
|
|
<div>
|
|
<Table caption="Server list overview">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>{{ __('Name') }}</TableHeader>
|
|
<TableHeader>{{ __('Usage') }}</TableHeader>
|
|
<TableHeader></TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow v-for="server in servers.data" :key="server.id">
|
|
<TableData>
|
|
{{ server.name }}
|
|
|
|
<p class="text-medium-emphasis">{{ server.ip }}</p>
|
|
|
|
<Button class="text-small text-primary" is="a" size="sm" target="_blank" :href="`https://ploi.io/panel/servers/${server.ploi_id}`">
|
|
{{ __('View in ploi.io') }}
|
|
</Button>
|
|
</TableData>
|
|
<TableData>{{ server.sites_count }}/{{ server.maximum_sites }}</TableData>
|
|
<TableData>
|
|
<inertia-link :href="route('admin.services.servers.edit', server.id)" class="text-primary font-medium">
|
|
{{ __('Edit') }}
|
|
</inertia-link>
|
|
</TableData>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
<pagination :links="servers"/>
|
|
</template>
|
|
</SettingsSegment>
|
|
|
|
<SettingsSegment>
|
|
<template #title>{{ __('Sites') }}</template>
|
|
<template #content>
|
|
<div>
|
|
<Table caption="Site list overview">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>{{ __('Name') }}</TableHeader>
|
|
<TableHeader>{{ __('Server') }}</TableHeader>
|
|
<TableHeader></TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow v-for="site in sites.data" :key="site.id">
|
|
<TableData>
|
|
{{ site.domain }}
|
|
</TableData>
|
|
<TableData>
|
|
{{ site.server ? site.server.name : '-' }}
|
|
</TableData>
|
|
<TableData>
|
|
<inertia-link :href="route('admin.services.sites.edit', site.id)" class="text-primary font-medium">
|
|
{{ __('Edit') }}
|
|
</inertia-link>
|
|
</TableData>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
<pagination :links="sites"/>
|
|
</template>
|
|
</SettingsSegment>
|
|
|
|
<SettingsSegment>
|
|
<template #title>{{ __('Providers') }}</template>
|
|
<template #content>
|
|
<div>
|
|
<Table caption="Provider list overview">
|
|
<TableHead>
|
|
<TableRow>
|
|
<TableHeader>{{ __('Name') }}</TableHeader>
|
|
<TableHeader>{{ __('Regions') }}</TableHeader>
|
|
<TableHeader>{{ __('Plans') }}</TableHeader>
|
|
</TableRow>
|
|
</TableHead>
|
|
<TableBody>
|
|
<TableRow v-for="provider in providers.data" :key="provider.id">
|
|
<TableData>{{ provider.name }}</TableData>
|
|
<TableData>{{ provider.regions_count }}</TableData>
|
|
<TableData>{{ provider.plans_count }}</TableData>
|
|
</TableRow>
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
|
|
<pagination :links="sites"/>
|
|
</template>
|
|
</SettingsSegment>
|
|
</template>
|
|
</SettingsLayout>
|
|
</PageBody>
|
|
</Container>
|
|
</Content>
|
|
</Page>
|
|
</template>
|
|
|
|
<script>
|
|
import TopBar from './../components/TopBar'
|
|
import Container from '@/components/Container'
|
|
import Content from '@/components/Content'
|
|
import Page from '@/components/Page'
|
|
import PageHeader from '@/components/PageHeader'
|
|
import PageHeaderTitle from '@/components/PageHeaderTitle'
|
|
import PageBody from '@/components/PageBody'
|
|
import Button from '@/components/Button'
|
|
import List from '@/components/List'
|
|
import ListItem from '@/components/ListItem'
|
|
import StatusBubble from '@/components/StatusBubble'
|
|
import NotificationBadge from '@/components/NotificationBadge'
|
|
import MainLayout from '@/Layouts/MainLayout'
|
|
import SettingsLayout from '@/components/layouts/SettingsLayout'
|
|
import SettingsSegment from '@/components/SettingsSegment'
|
|
import Pagination from '@/components/Pagination'
|
|
import {useNotification} from '@/hooks/notification'
|
|
import Tabs from './Tabs';
|
|
import Table from '@/components/Table'
|
|
import TableHead from '@/components/TableHead'
|
|
import TableHeader from '@/components/TableHeader'
|
|
import TableRow from '@/components/TableRow'
|
|
import TableBody from '@/components/TableBody'
|
|
import TableData from '@/components/TableData'
|
|
|
|
export default {
|
|
layout: MainLayout,
|
|
|
|
metaInfo() {
|
|
return {
|
|
title: `${this.__('Services')}`,
|
|
}
|
|
},
|
|
|
|
components: {
|
|
TopBar,
|
|
Container,
|
|
Content,
|
|
Page,
|
|
PageHeader,
|
|
PageHeaderTitle,
|
|
PageBody,
|
|
Button,
|
|
List,
|
|
ListItem,
|
|
StatusBubble,
|
|
NotificationBadge,
|
|
SettingsLayout,
|
|
SettingsSegment,
|
|
Pagination,
|
|
Tabs,
|
|
Table,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
TableBody,
|
|
TableData,
|
|
},
|
|
|
|
props: {
|
|
servers: Object,
|
|
sites: Object,
|
|
providers: Object,
|
|
},
|
|
|
|
mounted() {
|
|
},
|
|
|
|
methods: {
|
|
useNotification,
|
|
},
|
|
}
|
|
</script>
|