mirror of
https://github.com/Litlyx/litlyx
synced 2025-12-15 17:38:36 +01:00
101 lines
2.8 KiB
Vue
101 lines
2.8 KiB
Vue
<script setup lang="ts">
|
|
import type { MetricsCounts } from '~/server/api/metrics/[project_id]/counts';
|
|
|
|
|
|
definePageMeta({ layout: 'dashboard' });
|
|
|
|
const activeProject = useActiveProject();
|
|
|
|
const metricsInfo = ref<number>(0);
|
|
|
|
const columns = [
|
|
{ key: 'name', label: 'Name', sortable: true },
|
|
{ key: 'metadata', label: 'Metadata' },
|
|
{ key: 'created_at', label: 'Creation', sortable: true }
|
|
]
|
|
|
|
const sort = ref<any>({
|
|
column: 'created_at',
|
|
direction: 'desc'
|
|
})
|
|
|
|
const selectedColumns = ref([...columns]);
|
|
|
|
const page = ref<number>(1);
|
|
const itemsPerPage = 50;
|
|
const totalItems = computed(() => metricsInfo.value);
|
|
|
|
|
|
const { data: tableData, pending: loadingData } = await useLazyFetch<any[]>(() =>
|
|
`/api/metrics/${activeProject.value?._id}/query?type=1&orderBy=${sort.value.column}&order=${sort.value.direction}&page=${page.value}&limit=${itemsPerPage}`, {
|
|
...signHeaders(),
|
|
})
|
|
|
|
onMounted(async () => {
|
|
const counts = await $fetch<MetricsCounts>(`/api/metrics/${activeProject.value?._id}/counts`, signHeaders());
|
|
metricsInfo.value = counts.eventsCount;
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
|
|
|
|
|
|
|
<div class="w-full h-dvh flex flex-col">
|
|
|
|
|
|
<div class="flex justify-end px-12 py-3">
|
|
<div
|
|
class="bg-[#57c78fc0] hover:bg-[#57c78fab] cursor-pointer text-text poppins font-semibold px-8 py-2 rounded-lg">
|
|
Download CSV
|
|
</div>
|
|
</div>
|
|
|
|
<UTable v-if="tableData" class="utable px-8" :ui="{
|
|
wrapper: 'overflow-auto w-full h-full',
|
|
thead: 'sticky top-0 bg-menu',
|
|
td: {
|
|
color: 'text-[#ffffffb3]',
|
|
base: 'border-r border-l border-gray-300/20'
|
|
},
|
|
th: { color: 'text-text-sub' },
|
|
tbody: 'divide-y divide-gray-300/20',
|
|
divide: '',
|
|
}" v-model:sort="sort" :columns="selectedColumns" :rows="tableData" :loading="loadingData" sort-mode="manual">
|
|
|
|
<template #metadata-data="{ row }">
|
|
<div v-if="row.metadata" class="flex flex-col gap-1">
|
|
<div v-for="(value, key) in row.metadata">
|
|
<span class="font-bold">{{ key }}</span>: {{ value }}
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #created_at-data="{ row }">
|
|
<span> {{ new Date(row.created_at).toLocaleString() }} </span>
|
|
</template>
|
|
|
|
|
|
</UTable>
|
|
|
|
|
|
|
|
<div class="flex justify-end px-3 py-3 border-t border-gray-300/30 dark:border-gray-700">
|
|
<UPagination v-model="page" :page-count="itemsPerPage" :total="totalItems" />
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
.card {
|
|
@apply border text-2xl text-text bg-transparent border-gray-500 border-[1] w-fit px-8 h-[7rem] flex flex-col items-center justify-center gap-1 rounded-xl;
|
|
}
|
|
</style>
|