add events-list pages

buggregator · Sep 8, 2024 · f40e4bf · f40e4bf
1 parent 3b7652b
commit f40e4bf
Show file tree

Hide file tree

Showing 29 changed files with 288 additions and 129 deletions.
diff --git a/pages/http-dump/index.vue b/pages/http-dump/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui'
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui'
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
 <template>
   <NuxtLayout>
     <template #header>
-      <PageHeader :type="PAGE_TYPES.HTTP_DUMP" title="Http-dump" />
+      <PageHeader :type="PAGE_TYPES.HttpDump" title="Http-dump" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.HTTP_DUMP" title="Http-dump" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.HttpDump" title="Http-dump" />
   </NuxtLayout>
 </template>
diff --git a/pages/index.vue b/pages/index.vue
@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui' // eslint-disable-line @conarti/feature-sliced/public-api
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui' // eslint-disable-line @conarti/feature-sliced/public-api
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
@@ -9,6 +9,6 @@ import { PAGE_TYPES } from '@/shared/constants'
       <PageHeader :type="PAGE_TYPES.ALL_EVENTS" title="" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.ALL_EVENTS" title="" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.ALL_EVENTS" title="" />
   </NuxtLayout>
 </template>
diff --git a/pages/inspector/index.vue b/pages/inspector/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui'
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui'
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
 <template>
   <NuxtLayout>
     <template #header>
-      <PageHeader :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+      <PageHeader :type="PAGE_TYPES.Inspector" title="Inspector" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.INSPECTOR" title="Inspector" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.Inspector" title="Inspector" />
   </NuxtLayout>
 </template>
diff --git a/pages/monolog/index.vue b/pages/monolog/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui'
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui'
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
 <template>
   <NuxtLayout>
     <template #header>
-      <PageHeader :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+      <PageHeader :type="PAGE_TYPES.Monolog" title="Monolog" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.Monolog" title="Monolog" />
   </NuxtLayout>
 </template>
diff --git a/pages/profiler/index.vue b/pages/profiler/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui'
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui'
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
 <template>
   <NuxtLayout>
     <template #header>
-      <PageHeader :type="PAGE_TYPES.PROFILER" title="Profiler" />
+      <PageHeader :type="PAGE_TYPES.Profiler" title="Profiler" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.PROFILER" title="Profiler" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.Profiler" title="Profiler" />
   </NuxtLayout>
 </template>
diff --git a/pages/ray/index.vue b/pages/ray/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui'
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui'
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
 <template>
   <NuxtLayout>
     <template #header>
-      <PageHeader :type="PAGE_TYPES.RAY_DUMP" title="Ray Dumps" />
+      <PageHeader :type="PAGE_TYPES.RayDump" title="Ray Dumps" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.RAY_DUMP" title="Ray Dumps" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.RayDump" title="Ray Dumps" />
   </NuxtLayout>
 </template>
diff --git a/pages/sentry/index.vue b/pages/sentry/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui'
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui'
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
 <template>
   <NuxtLayout>
     <template #header>
-      <PageHeader :type="PAGE_TYPES.SENTRY" title="Sentry" />
+      <PageHeader :type="PAGE_TYPES.Sentry" title="Sentry" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.SENTRY" title="Sentry" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.Sentry" title="Sentry" />
   </NuxtLayout>
 </template>
diff --git a/pages/smtp/index.vue b/pages/smtp/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui'
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui'
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
 <template>
   <NuxtLayout>
     <template #header>
-      <PageHeader :type="PAGE_TYPES.SMTP" title="Smtp" />
+      <PageHeader :type="PAGE_TYPES.Smtp" title="Smtp" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.SMTP" title="Smtp" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.Smtp" title="Smtp" />
   </NuxtLayout>
 </template>
diff --git a/pages/var-dump/index.vue b/pages/var-dump/index.vue
@@ -1,14 +1,14 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent } from '@/widgets/ui'
+import { PageHeader, LayoutPreviewEvents } from '@/widgets/ui'
 import { PAGE_TYPES } from '@/shared/constants'
 </script>
 
 <template>
   <NuxtLayout>
     <template #header>
-      <PageHeader :type="PAGE_TYPES.VAR_DUMP" title="Var Dumps" />
+      <PageHeader :type="PAGE_TYPES.VarDump" title="Var Dumps" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.VAR_DUMP" title="Var Dumps" />
+    <LayoutPreviewEvents :type="PAGE_TYPES.VarDump" title="Var Dumps" />
   </NuxtLayout>
 </template>
diff --git a/src/app/router/middlewares.ts b/src/app/router/middlewares.ts
@@ -4,7 +4,7 @@ import {useProfileStore, useSettingsStore} from "@/shared/stores";
 import { type TRouterMiddleware} from "./types";
 
 
-export const auth: TRouterMiddleware = async ({ to, from, next }) => {
+export const auth: TRouterMiddleware = async ({ to, next }) => {
   const settingsStore  = useSettingsStore()
   const {isFetched, isAuthEnabled }  = storeToRefs(settingsStore)
 

diff --git a/src/app/router/routes.ts b/src/app/router/routes.ts
@@ -12,6 +12,70 @@ export const routes = [
       middleware: [auth]
     }
   },
+  {
+    path: '/http-dump',
+    name: RouteName.HttpDump,
+    component: HomePage,
+    meta: {
+      middleware: [auth]
+    }
+  },
+  {
+    path: '/inspector',
+    name: RouteName.Inspector,
+    component: HomePage,
+    meta: {
+      middleware: [auth]
+    }
+  },
+  {
+    path: '/monolog',
+    name: RouteName.Monolog,
+    component: HomePage,
+    meta: {
+      middleware: [auth]
+    }
+  },
+  {
+    path: '/profiler',
+    name: RouteName.Profiler,
+    component: HomePage,
+    meta: {
+      middleware: [auth]
+    }
+  },
+  {
+    path: '/ray',
+    name: RouteName.RayDump,
+    component: HomePage,
+    meta: {
+      middleware: [auth]
+    }
+  },
+  {
+    path: '/sentry',
+    name: RouteName.Sentry,
+    component: HomePage,
+    meta: {
+      middleware: [auth]
+    }
+  },
+  {
+    path: '/smtp',
+    name: RouteName.Smtp,
+    component: HomePage,
+    meta: {
+      middleware: [auth]
+    }
+  },
+  {
+    path: '/var-dump',
+    name: RouteName.VarDump,
+    component: HomePage,
+    meta: {
+      middleware: [auth]
+    }
+  },
   {
     path: '/settings',
     name: RouteName.Settings,

diff --git a/src/screens/home/ui/home-page/home-page.vue b/src/screens/home/ui/home-page/home-page.vue
@@ -1,6 +1,19 @@
 <script lang="ts" setup>
-import { PageHeader, PageContent, LayoutBase, LayoutSidebar } from '@/widgets/ui'
-import { PAGE_TYPES } from '@/shared/constants'
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
+import { PageHeader, LayoutPreviewEvents, LayoutBase, LayoutSidebar } from '@/widgets/ui'
+import { ALL_EVENT_TYPES, PAGE_TYPES, PAGES_SETTINGS } from '@/shared/constants'
+import type { PageEventTypes } from '@/shared/types'
+
+const route = useRoute()
+
+const routeName = computed(() => String(route.name) as PageEventTypes)
+
+const title = computed(() => (routeName.value ? PAGES_SETTINGS[routeName.value]?.title : ''))
+
+const type = computed(() =>
+  routeName.value ? PAGES_SETTINGS[routeName.value]?.eventType : ALL_EVENT_TYPES
+)
 </script>
 
 <template>
@@ -10,10 +23,10 @@ import { PAGE_TYPES } from '@/shared/constants'
     </template>
 
     <template #header>
-      <PageHeader :type="PAGE_TYPES.ALL_EVENTS" title="" />
+      <PageHeader :type="type" :title="title" />
     </template>
 
-    <PageContent :type="PAGE_TYPES.ALL_EVENTS" title="" />
+    <LayoutPreviewEvents :type="type" :title="title" />
   </LayoutBase>
 </template>
 

diff --git a/src/shared/constants/pages.ts b/src/shared/constants/pages.ts
@@ -1,7 +1,77 @@
-import {EVENT_TYPES} from "../types/events";
+import {RouteName} from "../types/app";
+import { EventTypes, } from "../types/events";
+import { type PageEventTypes } from "../types/pages";
+
+export const ALL_EVENT_TYPES = 'all-events' as const
 
 // TODO convert it to enum
 export const PAGE_TYPES = {
-  ...EVENT_TYPES,
-  ALL_EVENTS: "all-events",
+  ...EventTypes,
+  ALL_EVENT_TYPES,
+}
+
+export const PAGES_SETTINGS: { [key in PageEventTypes ]: { title: string, sidebarTitle: string, iconName: string, routeName: RouteName, eventType: EventTypes | typeof ALL_EVENT_TYPES }} = {
+  [ALL_EVENT_TYPES]: {
+    title: 'Home',
+    sidebarTitle: 'Home',
+    iconName: 'home',
+    routeName: RouteName.Home,
+    eventType: ALL_EVENT_TYPES,
+  },
+  [EventTypes.Sentry]: {
+    title: 'Sentry',
+    sidebarTitle: 'Sentry logs',
+    iconName: 'sentry',
+    routeName: RouteName.Sentry,
+    eventType: EventTypes.Sentry,
+  },
+  [EventTypes.Profiler]: {
+    title: 'Profiler',
+    sidebarTitle: 'Profiler',
+    iconName: 'profiler',
+    routeName: RouteName.Profiler,
+    eventType: EventTypes.Profiler,
+  },
+  [EventTypes.Smtp]: {
+    title: 'SMTP',
+    sidebarTitle: 'SMTP mails',
+    iconName: 'smtp',
+    routeName: RouteName.Smtp,
+    eventType: EventTypes.Smtp,
+  },
+  [EventTypes.HttpDump]: {
+    title: 'Http dumps',
+    sidebarTitle: 'Http dumps',
+    iconName: 'http-dump',
+    routeName: RouteName.HttpDump,
+    eventType: EventTypes.HttpDump,
+  },
+  [EventTypes.Inspector]: {
+    title: 'Inspector',
+    sidebarTitle: 'Inspector logs',
+    iconName: 'inspector',
+    routeName: RouteName.Inspector,
+    eventType: EventTypes.Inspector,
+  },
+  [EventTypes.VarDump]: {
+    title: 'Var dump',
+    sidebarTitle: 'Var dump logs',
+    iconName: 'var-dump',
+    routeName: RouteName.VarDump,
+    eventType: EventTypes.VarDump,
+  },
+  [EventTypes.Monolog]: {
+    title: 'Monolog',
+    sidebarTitle: 'Monolog logs',
+    iconName: 'monolog',
+    routeName: RouteName.Monolog,
+    eventType: EventTypes.Monolog,
+  },
+  [EventTypes.RayDump]: {
+    title: 'Ray dump',
+    sidebarTitle: 'Ray dump logs',
+    iconName: 'ray',
+    routeName: RouteName.RayDump,
+    eventType: EventTypes.RayDump,
+  }
 }
diff --git a/src/shared/lib/use-events/use-events.ts b/src/shared/lib/use-events/use-events.ts
@@ -5,7 +5,7 @@ import {
   type TEventsCachedIdsMap,
   useEventsStore,
 } from "../../stores";
-import type {ServerEvent, NormalizedEvent, EventId, EventType, TEventsGroup} from '../../types';
+import type {ServerEvent, NormalizedEvent, EventId, EventType, PageEventTypes} from '../../types';
 import { useApiTransport } from "../use-api-transport";
 import { normalizeUnknownEvent } from "./normalize-unknown-event";
 import { type TUseEventsApi, useEventsApi } from "./use-events-api";
@@ -17,8 +17,8 @@ type TUseEvents = () => {
   getItemsCount: Ref<(type?: EventType) => number>
   cachedEvents: {
     idsByType: Ref<TEventsCachedIdsMap>;
-    stopUpdatesByType: (type: TEventsGroup) => void
-    runUpdatesByType: (type: TEventsGroup) => void
+    stopUpdatesByType: (type: PageEventTypes) => void
+    runUpdatesByType: (type: PageEventTypes) => void
   },
   lockedIds: {
     items: Ref<EventId[]>