update security + chart events è anomaly service

This commit is contained in:
Emily
2024-09-24 16:48:23 +02:00
parent 5b7e93bcbb
commit f5edf187fd
18 changed files with 1417 additions and 75 deletions

View File

@@ -1,4 +1,6 @@
<script lang="ts" setup>
import EventsFunnelChart from '~/components/events/EventsFunnelChart.vue';
definePageMeta({ layout: 'dashboard' });
@@ -22,7 +24,8 @@ const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProje
<div class="flex gap-6 flex-col xl:flex-row h-full">
<CardTitled :key="refreshKey" class="p-4 flex-[4] w-full h-full" title="Events" sub="Events stacked bar chart.">
<CardTitled :key="refreshKey" class="p-4 flex-[4] w-full h-full" title="Events"
sub="Events stacked bar chart.">
<template #header>
<SelectButton @changeIndex="eventsStackedSelectIndex = $event"
:currentIndex="eventsStackedSelectIndex" :options="selectLabelsEvents">
@@ -41,6 +44,10 @@ const refreshKey = computed(() => `${snapshot.value._id.toString() + activeProje
</div>
<div class="flex">
<EventsFunnelChart :key="refreshKey" class="w-full"></EventsFunnelChart>
</div>
<div class="flex">
<EventsUserFlow :key="refreshKey"></EventsUserFlow>
</div>

View File

@@ -20,6 +20,10 @@ const limitsInfo = ref<{
percent: number
}>();
const justLogged = computed(() => {
return route.query.just_logged;
})
onMounted(async () => {
if (route.query.just_logged) return location.href = '/';
@@ -68,7 +72,8 @@ function goToUpgrade() {
<div class="dashboard w-full h-full overflow-y-auto pb-20 md:pt-4 lg:pt-0">
<div :key="'home-' + isLiveDemo()" v-if="projects && activeProject && (firstInteraction.data.value === true)">
<div :key="'home-' + isLiveDemo()"
v-if="projects && activeProject && (firstInteraction.data.value === true) && !justLogged">
<div class="w-full px-4 py-2 gap-2 flex flex-col">
<div v-if="limitsInfo && limitsInfo.limited"
@@ -188,13 +193,17 @@ function goToUpgrade() {
</div>
<FirstInteraction v-if="!justLogged" :refresh-interaction="firstInteraction.refresh"
:first-interaction="(firstInteraction.data.value || false)"></FirstInteraction>
<FirstInteraction :refresh-interaction="firstInteraction.refresh" :first-interaction="(firstInteraction.data.value || false)"></FirstInteraction>
<div class="text-text/85 mt-8 ml-8 poppis text-[1.2rem]" v-if="projects && projects.length == 0">
<div class="text-text/85 mt-8 ml-8 poppis text-[1.2rem]" v-if="projects && projects.length == 0 && !justLogged">
Create your first project...
</div>
<div v-if="justLogged" class="text-[2rem]">
The page will refresh soon
</div>
</div>
</template>

View File

@@ -1,5 +1,7 @@
<script setup lang="ts">
import type { } from '#ui/types/tabs'
definePageMeta({ layout: 'dashboard' });
const activeProjectId = useActiveProjectId();
@@ -25,6 +27,15 @@ function showAnomalyInfoAlert() {
)
}
const rows = computed(() => reportList.data.value || [])
const columns = [
{ key: 'scan', label: 'Scan date' },
{ key: 'type', label: 'Type' },
{ key: 'data', label: 'Data' },
];
</script>
@@ -41,35 +52,72 @@ function showAnomalyInfoAlert() {
</div>
</div>
<div class="pb-[10rem]">
<UTable :rows="rows" :columns="columns">
<div class="w-full h-full py-8 px-12">
<template #scan-data="{ row }">
<div class="text-lyx-text-dark">
{{ new Date(row.data.created_at).toLocaleString() }}
</div>
</template>
<template #type-data="{ row }">
<UBadge color="white" class="w-[4rem] flex justify-center">
{{ row.type }}
</UBadge>
</template>
<template #data-data="{ row }">
<div class="text-lyx-text-dark">
<div v-if="row.type === 'domain'">
{{ row.data.domain }}
</div>
<div v-if="row.type === 'visit'">
{{ row.data.visit }}
</div>
<div v-if="row.type === 'event'">
{{ row.data.event }}
</div>
</div>
</template>
<!-- <template #actions-data="{ row }">
<UDropdown :items="items(row)">
<UButton color="gray" variant="ghost" icon="i-heroicons-ellipsis-horizontal-20-solid" />
</UDropdown>
</template> -->
</UTable>
</div>
<!-- <div class="w-full py-8 px-12 pb-[10rem]">
<div v-if="reportList.data.value" class="flex flex-col gap-2">
<div v-for="entry of reportList.data.value">
<div v-if="entry.type === 'event'" class="flex gap-2">
<div v-for="entry of reportList.data.value" class="flex flex-col gap-4">
<div v-if="entry.type === 'event'" class="flex gap-2 flex-col lg:flex-row items-center lg:items-start">
<div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
<UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
<div class="text-lyx-text-dark">
Event date: {{ new Date(entry.data.eventDate).toLocaleString() }}
</div>
</div>
<div v-if="entry.type === 'visit'" class="flex gap-2">
<div v-if="entry.type === 'visit'" class="flex gap-2 flex-col lg:flex-row items-center lg:items-start">
<div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
<UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
<div class="text-lyx-text-dark">
Visit date: {{ new Date(entry.data.visitDate).toLocaleString() }}
</div>
</div>
<div v-if="entry.type === 'domain'" class="flex gap-2">
<div v-if="entry.type === 'domain'" class="flex gap-2 flex-col py-2 lg:flex-row items-center lg:items-start">
<div class="text-lyx-text-darker">{{ new Date(entry.data.created_at).toLocaleString() }}</div>
<UBadge class="w-[4rem] flex justify-center"> {{ entry.type }} </UBadge>
<div class="text-lyx-text-dark">
Domain found: {{ entry.data.domain }}
{{ entry.data.domain }}
</div>
</div>
</div>
</div>
</div>
</div> -->
</div>