Issue/#74 hide unused event types

.docker/Dockerfile

@@ -12,7 +12,9 @@ WORKDIR /app
 
 ARG APP_VERSION=1.0.0
 ENV NODE_OPTIONS=--openssl-legacy-provider
-ENV VITE_APP_MODE=production
+ENV FE_APP_MODE=production
+ENV FE_MAX_EVENTS_COUNT=500
+ENV FE_ACTIVE_EVENT_TYPES=http-dump,inspector,monolog,profiler,ray,sentry,smtp,var-dump
 
 RUN sed -i "s/\"version\": \".*\"/\"version\": \"${APP_VERSION}\"/" package.json
 

.env.sample

@@ -1,2 +1,4 @@
-VITE_EVENTS_REST_API=https://test.buggregator.dev
-VITE_EVENTS_WS_API=wss://test.buggregator.dev/connection/websocket
+FE_EVENTS_REST_API=https://test.buggregator.dev
+FE_EVENTS_WS_API=wss://test.buggregator.dev/connection/websocket
+FE_MAX_EVENTS_COUNT=500
+FE_ACTIVE_EVENT_TYPES=http-dump,inspector,monolog,profiler,ray,sentry,smtp,var-dump

nuxt.config.ts

@@ -54,5 +54,8 @@ export default defineNuxtConfig({
     public: {
       version: pkg.version,
     }
-  }
+  },
+  vite: {
+    envPrefix: 'FE_',
+  },
 });

src/shared/constants/pages.ts

@@ -1,4 +1,4 @@
-import { EVENT_TYPES } from "../types";
+import {EVENT_TYPES, type EventType} from "../types";
 
 export const PAGE_TYPES = {
   VAR_DUMP: EVENT_TYPES.VAR_DUMP,
@@ -11,3 +11,8 @@ export const PAGE_TYPES = {
   RAY_DUMP: EVENT_TYPES.RAY_DUMP,
   ALL_EVENTS: "all-events",
 }
+
+export const AVAILABLE_EVENTS_TYPES_LIST: EventType[] =
+  (import.meta.env.FE_ACTIVE_EVENT_TYPES || Object.values(EVENT_TYPES).join(','))
+    .split(',')
+    .filter(Boolean)

src/shared/lib/io/constants.ts

@@ -15,5 +15,5 @@ const guessRestApiConnection = (): string => {
   return `${API_PROTOCOL}://${API_HOST}`;
 }
 
-export const REST_API_URL = (import.meta.env.VITE_EVENTS_REST_API as string) || guessRestApiConnection()
-export const WS_URL = (import.meta.env.VITE_EVENTS_WS_API as string) || guessWsConnection()
+export const REST_API_URL = (import.meta.env.FE_EVENTS_REST_API as string) || guessRestApiConnection()
+export const WS_URL = (import.meta.env.FE_EVENTS_WS_API as string) || guessWsConnection()

src/shared/stores/events.ts

@@ -1,36 +1,42 @@
 import { defineStore } from "pinia";
-import type { EventId, EventType, ServerEvent } from '../types';
+import {AVAILABLE_EVENTS_TYPES_LIST} from "../constants";
+import { type EventId, type EventType, type ServerEvent} from '../types';
 import { useLockedIdsStore } from "./locked-ids";
 
-const MAX_EVENTS_COUNT = 500;
+const MAX_EVENTS_COUNT = import.meta.env.FE_MAX_EVENTS_COUNT || Infinity;
 
 export const useEventStore = defineStore("useEventStore", {
   state: () => ({
     events: [] as ServerEvent<unknown>[],
   }),
   actions: {
     initialize(events: ServerEvent<unknown>[]): void {
-      this.events = events.slice(0, MAX_EVENTS_COUNT);
+      this.events =
+        events
+          .filter((event) => AVAILABLE_EVENTS_TYPES_LIST.includes(event.type as EventType))
+          .slice(0, MAX_EVENTS_COUNT);
     },
     addList(events: ServerEvent<unknown>[]): void {
-      events.forEach((event) => {
-        const isExistedEvent: boolean = this.events.some((el): boolean => el.uuid === event.uuid);
-        if (!isExistedEvent) {
-          this.events.unshift(event)
+      events
+        .filter((event) => AVAILABLE_EVENTS_TYPES_LIST.includes(event.type as EventType))
+        .forEach((event) => {
+          const isExistedEvent: boolean = this.events.some((el): boolean => el.uuid === event.uuid);
+          if (!isExistedEvent) {
+            this.events.unshift(event)
 
-          if (this.events.length > MAX_EVENTS_COUNT) {
-            this.events.pop()
-          }
-        } else {
-          this.events = this.events.map((el) => {
-            if (el.uuid !== event.uuid) {
-              return el; // add new
+            if (this.events.length > MAX_EVENTS_COUNT) {
+              this.events.pop()
             }
+          } else {
+            this.events = this.events.map((el) => {
+              if (el.uuid !== event.uuid) {
+                return el; // add new
+              }
 
-            return event; // replace existed
-          });
-        }
-      });
+              return event; // replace existed
+            });
+          }
+        });
     },
     removeAll() {
       const { lockedIds } = useLockedIdsStore();

src/widgets/ui/layout-sidebar/constants.ts

@@ -0,0 +1,56 @@
+import {EVENT_TYPES} from "~/src/shared/types";
+
+export const SIDEBAR_EVENTS_ORDER = [
+  EVENT_TYPES.SENTRY,
+  EVENT_TYPES.PROFILER,
+  EVENT_TYPES.SMTP,
+  EVENT_TYPES.HTTP_DUMP,
+  EVENT_TYPES.INSPECTOR,
+  EVENT_TYPES.VAR_DUMP,
+  EVENT_TYPES.MONOLOG,
+  EVENT_TYPES.RAY_DUMP,
+]
+
+
+export const SIDEBAR_EVENTS_CONFIG_MAP = {
+  [EVENT_TYPES.SENTRY]: {
+    url: "/sentry",
+    title: "Sentry",
+    icon: "sentry",
+  },
+  [EVENT_TYPES.PROFILER]: {
+    url: "/profiler",
+    title: "Profiler",
+    icon: "profiler",
+  },
+  [EVENT_TYPES.SMTP]: {
+    url: "/smtp",
+    title: "SMTP",
+    icon: "smtp",
+  },
+  [EVENT_TYPES.HTTP_DUMP]: {
+    url: "/http-dump",
+    title: "Http dump",
+    icon: "http-dump",
+  },
+  [EVENT_TYPES.INSPECTOR]: {
+    url: "/inspector",
+    title: "Inspector",
+    icon: "inspector",
+  },
+  [EVENT_TYPES.VAR_DUMP]: {
+    url: "/var-dump",
+    title: "Var dump",
+    icon: "var-dump",
+  },
+  [EVENT_TYPES.MONOLOG]: {
+    url: "/monolog",
+    title: "Monolog",
+    icon: "monolog",
+  },
+  [EVENT_TYPES.RAY_DUMP]: {
+    url: "/ray",
+    title: "Ray",
+    icon: "ray",
+  }
+}

src/widgets/ui/layout-sidebar/layout-sidebar.vue

@@ -2,10 +2,12 @@
 import { storeToRefs } from "pinia";
 import { computed, ref } from "vue";
 import { useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { AVAILABLE_EVENTS_TYPES_LIST } from "~/src/shared/constants";
 import { useConnectionStore } from "~/src/shared/stores/connections";
 import { useProfileStore } from "~/src/shared/stores/profile";
 import type { Profile } from "~/src/shared/types";
 import { IconSvg } from "~/src/shared/ui";
+import { SIDEBAR_EVENTS_CONFIG_MAP, SIDEBAR_EVENTS_ORDER } from "./constants";
 
 type Props = {
   apiVersion: string;
@@ -59,6 +61,12 @@ const logout = () => {
 const path = computed(() => useRoute().path);
 
 const isAuthEnabled = computed(() => app?.$appSettings?.auth?.enabled);
+
+const sidebarEventsPages = computed(() =>
+  SIDEBAR_EVENTS_ORDER.filter((type) =>
+    AVAILABLE_EVENTS_TYPES_LIST.includes(type)
+  ).map((type) => SIDEBAR_EVENTS_CONFIG_MAP[type])
+);
 </script>
 
 <template>
@@ -77,75 +85,14 @@ const isAuthEnabled = computed(() => app?.$appSettings?.auth?.enabled);
       </NuxtLink>
 
       <NuxtLink
-        to="/sentry"
-        title="Sentry logs"
-        class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/sentry') }"
-      >
-        <IconSvg class="layout-sidebar__link-icon" name="sentry" />
-      </NuxtLink>
-
-      <NuxtLink
-        to="/profiler"
-        title="Profiler"
-        class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/profiler') }"
-      >
-        <IconSvg class="layout-sidebar__link-icon" name="profiler" />
-      </NuxtLink>
-
-      <NuxtLink
-        to="/smtp"
-        title="SMTP mails"
-        class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/smtp') }"
-      >
-        <IconSvg class="layout-sidebar__link-icon" name="smtp" />
-      </NuxtLink>
-
-      <NuxtLink
-        to="/http-dump"
-        title="Http dumps"
-        class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/http-dump') }"
-      >
-        <IconSvg class="layout-sidebar__link-icon" name="http-dump" />
-      </NuxtLink>
-
-      <NuxtLink
-        to="/inspector"
-        title="Inspector logs"
-        class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/inspector') }"
-      >
-        <IconSvg class="layout-sidebar__link-icon" name="inspector" />
-      </NuxtLink>
-
-      <NuxtLink
-        to="/var-dump"
-        title="Var Dump logs"
-        class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/var-dump') }"
-      >
-        <IconSvg class="layout-sidebar__link-icon" name="var-dump" />
-      </NuxtLink>
-
-      <NuxtLink
-        to="/monolog"
-        title="Monolog logs"
-        class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/monolog') }"
-      >
-        <IconSvg class="layout-sidebar__link-icon" name="monolog" />
-      </NuxtLink>
-
-      <NuxtLink
-        to="/ray"
-        title="Ray Dump logs"
+        v-for="type in sidebarEventsPages"
+        :key="type.url"
+        :to="type.url"
+        :title="type.title"
         class="layout-sidebar__link"
-        :class="{ 'router-link-active': path.includes('/ray') }"
+        :class="{ 'router-link-active': path.includes(type.url) }"
       >
-        <IconSvg class="layout-sidebar__link-icon" name="ray" />
+        <IconSvg class="layout-sidebar__link-icon" :name="type.icon" />
       </NuxtLink>
 
       <NuxtLink to="/settings" title="Settings" class="layout-sidebar__link">