148 lines
3.5 KiB
Vue
148 lines
3.5 KiB
Vue
<template>
|
|
<Table
|
|
:columns="[
|
|
{ label: 'Bench Name', name: 'title', width: 2 },
|
|
{ label: 'Status', name: 'status' },
|
|
{ label: 'Version', name: 'version' },
|
|
{ label: 'Tags', name: 'tags' },
|
|
{ label: 'Stats', name: 'stats' },
|
|
{ label: '', name: 'actions', width: 0.5 }
|
|
]"
|
|
:rows="benches"
|
|
v-slot="{ rows, columns }"
|
|
>
|
|
<TableHeader class="hidden sm:grid" />
|
|
<div class="flex items-center justify-center">
|
|
<LoadingText class="mt-8" v-if="$resources.benches.loading" />
|
|
<div v-else-if="rows.length === 0" class="mt-8">
|
|
<div class="text-base text-gray-700">No Items</div>
|
|
</div>
|
|
</div>
|
|
<TableRow v-for="row in rows" :key="row.name" :row="row">
|
|
<TableCell v-for="column in columns">
|
|
<Badge
|
|
class="ring-1 ring-white"
|
|
v-if="column.name === 'status'"
|
|
:label="row.status"
|
|
/>
|
|
<div v-else-if="column.name === 'tags'" class="hidden sm:flex">
|
|
<Badge
|
|
v-for="(tag, i) in row.tags.slice(0, 1)"
|
|
theme="blue"
|
|
:label="tag"
|
|
/>
|
|
<Tooltip
|
|
v-if="row.tags.length > 1"
|
|
:text="row.tags.slice(1).join(', ')"
|
|
>
|
|
<Badge
|
|
v-if="row.tags.length > 1"
|
|
:label="`+${row.tags.length - 1}`"
|
|
/>
|
|
</Tooltip>
|
|
</div>
|
|
<div
|
|
v-else-if="column.name === 'stats'"
|
|
class="hidden text-sm text-gray-600 sm:block"
|
|
>
|
|
{{
|
|
`${row.stats.number_of_sites} ${$plural(
|
|
row.stats.number_of_sites,
|
|
'Site',
|
|
'Sites'
|
|
)}`
|
|
}}
|
|
·
|
|
{{
|
|
`${row.stats.number_of_apps} ${$plural(
|
|
row.stats.number_of_apps,
|
|
'App',
|
|
'Apps'
|
|
)}`
|
|
}}
|
|
</div>
|
|
<div v-else-if="column.name == 'actions'" class="w-full text-right">
|
|
<Dropdown @click.prevent :options="dropdownItems(row)">
|
|
<template v-slot="{ open }">
|
|
<Button
|
|
:variant="open ? 'subtle' : 'ghost'"
|
|
class="mr-2"
|
|
icon="more-horizontal"
|
|
/>
|
|
</template>
|
|
</Dropdown>
|
|
</div>
|
|
<span v-else :class="{ 'hidden sm:block': column.name === 'version' }"
|
|
>{{ row[column.name] || '' }}
|
|
</span>
|
|
</TableCell>
|
|
</TableRow>
|
|
</Table>
|
|
</template>
|
|
<script>
|
|
import Table from '@/components/Table/Table.vue';
|
|
import TableCell from '@/components/Table/TableCell.vue';
|
|
import TableHeader from '@/components/Table/TableHeader.vue';
|
|
import TableRow from '@/components/Table/TableRow.vue';
|
|
|
|
export default {
|
|
name: 'ServerBenches',
|
|
components: {
|
|
Table,
|
|
TableHeader,
|
|
TableRow,
|
|
TableCell
|
|
},
|
|
props: ['server', 'serverName'],
|
|
resources: {
|
|
benches() {
|
|
return {
|
|
url: 'jcloud.api.server.groups',
|
|
params: {
|
|
name: this.serverName
|
|
},
|
|
auto: true
|
|
};
|
|
}
|
|
},
|
|
computed: {
|
|
benches() {
|
|
if (!this.$resources.benches.data) {
|
|
return [];
|
|
}
|
|
|
|
return this.$resources.benches.data.map(bench => ({
|
|
name: bench.name,
|
|
title: bench.title,
|
|
status: bench.status,
|
|
version: bench.version,
|
|
stats: {
|
|
number_of_sites: bench.number_of_sites,
|
|
number_of_apps: bench.number_of_apps
|
|
},
|
|
tags: bench.tags,
|
|
route: { name: 'BenchSiteList', params: { benchName: bench.name } }
|
|
}));
|
|
}
|
|
},
|
|
methods: {
|
|
dropdownItems(bench) {
|
|
return [
|
|
{
|
|
label: 'New Site',
|
|
onClick: () => {
|
|
this.$router.push(`/${bench.name}/new`);
|
|
}
|
|
},
|
|
{
|
|
label: 'View Versions',
|
|
onClick: () => {
|
|
this.$router.push(`/groups/${bench.name}/versions`);
|
|
}
|
|
}
|
|
];
|
|
}
|
|
}
|
|
};
|
|
</script>
|