76 lines
1.6 KiB
Vue

<template>
<div>
<n-card title="Sites">
<template #header-extra>
<sites-table-add @reload="readSites()" />
</template>
<n-data-table
:columns="columns"
:data="data"
:row-key="(row: any) => row.id"
/>
</n-card>
</div>
</template>
<script setup lang="ts">
import { NCard, NDataTable, NTag } from "naive-ui"
import { h, ref } from "vue"
import SitesTableExpand from "@/components/data/sites-table-expand.vue"
import SitesTableAction from "@/components/data/sites-table-action.vue"
import SitesTableAdd from "@/components/data/sites-table-add.vue"
const columns: any[] = [
{
type: "expand",
renderExpand(row: any) {
return h(SitesTableExpand, { ...row, class: "pl-[38px]" })
}
},
{
title: "ID",
key: "id",
render(row: any) {
return h(NTag, { type: "info", bordered: false, size: "small" }, row?.id)
}
},
{
title: "Rules",
key: "rules",
render(row: any) {
return row?.rules?.length ?? 0
}
},
{
title: "Upstreams",
key: "upstreams",
render(row: any) {
return row?.upstreams?.length ?? 0
}
},
{
title: "Processes",
key: "processes",
render(row: any) {
return row?.processes?.length ?? 0
}
},
{
title: "Actions",
key: "actions",
render(row: any) {
return h(SitesTableAction, { ...row, onReload: () => readSites() })
}
}
]
const data = ref<any[]>([])
async function readSites() {
const resp = await fetch("/cgi/sites")
data.value = await resp.json()
}
readSites()
</script>