90 lines
2.2 KiB
Vue
90 lines
2.2 KiB
Vue
<template>
|
|
<Card title="Server Info" subtitle="General information about your server">
|
|
<div class="divide-y">
|
|
<div class="flex items-center py-3">
|
|
<Avatar
|
|
v-if="info.owner"
|
|
:image="info.owner.user_image"
|
|
:label="info.owner.first_name"
|
|
/>
|
|
<div class="ml-3 flex flex-1 items-center justify-between">
|
|
<div>
|
|
<div class="text-base text-gray-600">Owned By</div>
|
|
<div class="text-base font-medium text-gray-900">
|
|
{{ info.owner.first_name }}
|
|
{{ info.owner.last_name }}
|
|
</div>
|
|
</div>
|
|
<div class="text-right">
|
|
<div class="text-base text-gray-600">Created On</div>
|
|
<div class="text-base font-medium text-gray-900">
|
|
{{ formatDate(info.created_on, 'DATE_FULL') }}
|
|
</div>
|
|
</div>
|
|
<div v-if="info.last_deployed" class="text-right">
|
|
<div class="text-base text-gray-600">Last Deployed</div>
|
|
|
|
<div class="text-base font-medium text-gray-900">
|
|
{{
|
|
$date(info.last_deployed).toLocaleString({
|
|
month: 'long',
|
|
day: 'numeric'
|
|
})
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<ListItem
|
|
v-if="server.status !== 'Pending'"
|
|
title="Drop Server"
|
|
description="Once you drop server your server, there is no going back"
|
|
>
|
|
<template v-slot:actions>
|
|
<ServerDrop :server="server" v-slot="{ showDialog }">
|
|
<Tooltip
|
|
:text="
|
|
!permissions.drop
|
|
? `You don't have enough permissions to perform this action`
|
|
: 'Drop Site'
|
|
"
|
|
>
|
|
<Button
|
|
theme="red"
|
|
@click="showDialog"
|
|
:disabled="!permissions.drop"
|
|
>
|
|
<span class="text-red-600">Drop Server</span>
|
|
</Button>
|
|
</Tooltip>
|
|
</ServerDrop>
|
|
</template>
|
|
</ListItem>
|
|
</div>
|
|
</Card>
|
|
</template>
|
|
<script>
|
|
import ServerDrop from './ServerDrop.vue';
|
|
export default {
|
|
name: 'ServerOverviewInfo',
|
|
props: ['server', 'info'],
|
|
components: { ServerDrop },
|
|
data() {
|
|
return {
|
|
loading: false
|
|
};
|
|
},
|
|
computed: {
|
|
permissions() {
|
|
return {
|
|
drop: this.$account.hasPermission(
|
|
this.server.name,
|
|
'jcloud.api.server.archive'
|
|
)
|
|
};
|
|
}
|
|
}
|
|
};
|
|
</script>
|