Merge pull request #179 from buggregator/issue/#156-events-counters

Issue/#156 events counters

pages/settings.vue

@@ -5,11 +5,13 @@ import { computed } from "vue";
 import { useHead } from "#app";
 import { PageHeader } from "~/src/widgets/ui";
 import { useSettingsStore, THEME_MODES } from "~/src/shared/stores/settings";
-import { IconSvg } from "~/src/shared/ui";
+import { BadgeNumber, IconSvg } from "~/src/shared/ui";
 
 const settingsStore = useSettingsStore();
-const { changeTheme, changeNavbar } = settingsStore;
-const { themeType, isFixedHeader } = storeToRefs(settingsStore);
+const { changeTheme, changeNavbar, changeEventCountsVisibility } =
+  settingsStore;
+const { themeType, isFixedHeader, isVisibleEventCounts } =
+  storeToRefs(settingsStore);
 
 useHead({
   title: "Settings | Buggregator",
@@ -77,6 +79,42 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
             :class="{ 'settings-page__control-icon--active': isFixedHeader }"
           />
         </div>
+
+        <div class="settings-page__title">
+          Events Counts: {{ isVisibleEventCounts ? "On" : "Off" }}
+        </div>
+
+        <div class="settings-page__control">
+          <div
+            class="settings-page__control-icon"
+            :class="{
+              'settings-page__control-icon--active': !isVisibleEventCounts,
+            }"
+          >
+            <IconSvg name="inspector" />
+          </div>
+
+          <button
+            class="settings-page__control-button"
+            :class="{
+              'settings-page__control-button--active': isVisibleEventCounts,
+            }"
+            @click="changeEventCountsVisibility"
+          >
+            <span class="settings-page__control-button-in" />
+          </button>
+
+          <div
+            class="settings-page__control-icon"
+            :class="{
+              'settings-page__control-icon--active': isVisibleEventCounts,
+            }"
+          >
+            <BadgeNumber class="settings-page__control-icon-badge" :number="15">
+              <IconSvg name="inspector" />
+            </BadgeNumber>
+          </div>
+        </div>
       </section>
     </div>
   </main>
@@ -98,11 +136,11 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
 }
 
 .settings-page__content {
-  @apply p-4 grid grid-cols-2 gap-4 mr-auto;
+  @apply p-4 grid grid-cols-2 gap-4 mr-auto min-w-[50%];
 }
 
 .settings-page__title {
-  @apply text-xl font-bold flex items-center;
+  @apply text-xl font-bold flex items-center flex-shrink-0;
 }
 
 .settings-page__control {
@@ -113,6 +151,12 @@ const isDarkMode = computed(() => themeType.value === THEME_MODES.DARK);
   @apply opacity-10 w-8;
 }
 
+.settings-page__control-icon-badge {
+  :deep(.badge-number__badge) {
+    @apply scale-150;
+  }
+}
+
 .settings-page__control-icon--active {
   @apply opacity-100;
 }

src/shared/constants/index.ts

@@ -1 +1 @@
-export * from "./pages";
+export * from './pages'

src/shared/constants/pages.ts

@@ -1,13 +1,6 @@
-import { EVENT_TYPES } from "../types";
+import {EVENT_TYPES} from "../types";
 
 export const PAGE_TYPES = {
-  VAR_DUMP: EVENT_TYPES.VAR_DUMP,
-  SMTP: EVENT_TYPES.SMTP,
-  SENTRY: EVENT_TYPES.SENTRY,
-  PROFILER: EVENT_TYPES.PROFILER,
-  MONOLOG: EVENT_TYPES.MONOLOG,
-  INSPECTOR: EVENT_TYPES.INSPECTOR,
-  HTTP_DUMP: EVENT_TYPES.HTTP_DUMP,
-  RAY_DUMP: EVENT_TYPES.RAY_DUMP,
+  ...EVENT_TYPES,
   ALL_EVENTS: "all-events",
 }

src/shared/lib/use-events/use-events-api.ts

@@ -6,7 +6,7 @@ import { useApiTransport } from '../use-api-transport'
 
 
 export type TUseEventsApi = {
-  items: Ref<ServerEvent<unknown>[]>;
+  items: Ref<ServerEvent<unknown>[]>
   getItem: (id: EventId) => Promise<ServerEvent<unknown> | null>
   getUrl: (id: EventId) => string
   getAll: () => void

src/shared/lib/use-events/use-events.ts

@@ -1,8 +1,14 @@
 import { storeToRefs } from "pinia";
 import type { Ref } from "vue";
 import type { RayContentLock } from "~/src/entities/ray/types";
-import { type TCachedEventsEmptyMap, type TEventsGroup , useCachedIdsStore, useLockedIdsStore } from "../../stores";
-import type { ServerEvent, NormalizedEvent, EventId } from '../../types';
+import {
+  type TCachedEventsEmptyMap,
+  type TEventsGroup,
+  useCachedIdsStore,
+  useEventStore,
+  useLockedIdsStore
+} from "../../stores";
+import type {ServerEvent, NormalizedEvent, EventId, EventType} from '../../types';
 import { useApiTransport } from "../use-api-transport";
 import { normalizeUnknownEvent } from "./normalize-unknown-event";
 import { type TUseEventsApi, useEventsApi } from "./use-events-api";
@@ -11,6 +17,7 @@ import { type TUseEventsApi, useEventsApi } from "./use-events-api";
 type TUseEvents = () => {
   normalizeUnknownEvent: (event: ServerEvent<unknown>) => NormalizedEvent<unknown>
   events: TUseEventsApi
+  getItemsCount: Ref<(type?: EventType) => number>
   cachedEvents: {
     idsByType: Ref<TCachedEventsEmptyMap>;
     stopUpdatesByType: (type: TEventsGroup) => void
@@ -30,6 +37,11 @@ type TUseEvents = () => {
 export const useEvents: TUseEvents = () => {
   const cachedIdsStore = useCachedIdsStore();
   const lockedIdsStore = useLockedIdsStore();
+  const eventsStore = useEventStore();
+
+  const {
+    getCounts
+  } = storeToRefs(eventsStore)
 
   const {
     rayContinueExecution,
@@ -47,6 +59,7 @@ export const useEvents: TUseEvents = () => {
   return {
     normalizeUnknownEvent,
     events: useEventsApi(),
+    getItemsCount: getCounts,
     cachedEvents: {
       idsByType: cachedIds as unknown as Ref<TCachedEventsEmptyMap>,
       stopUpdatesByType: cachedIdsStore.setByType,

src/shared/stores/cached-ids.ts

@@ -15,6 +15,7 @@ const initialCachedIds: TCachedEventsEmptyMap = {
   [PAGE_TYPES.RAY_DUMP]: [] as EventId[],
   [PAGE_TYPES.VAR_DUMP]: [] as EventId[],
   [PAGE_TYPES.HTTP_DUMP]: [] as EventId[],
+  [PAGE_TYPES.MONOLOG]: [] as EventId[],
   [PAGE_TYPES.ALL_EVENTS]: [] as EventId[],
 };
 

src/shared/stores/events.ts

@@ -1,5 +1,6 @@
 import { defineStore } from "pinia";
 import type { EventId, EventType, ServerEvent } from '../types';
+import {EVENT_TYPES} from "../types";
 import { useLockedIdsStore } from "./locked-ids";
 
 const MAX_EVENTS_COUNT = 500;
@@ -8,6 +9,23 @@ export const useEventStore = defineStore("useEventStore", {
   state: () => ({
     events: [] as ServerEvent<unknown>[],
   }),
+  getters: {
+    getCounts: ({events}) => (eventType: EVENT_TYPES | undefined): number => {
+      const counts = {
+        [EVENT_TYPES.VAR_DUMP]: events.filter(({type}) => type === EVENT_TYPES.VAR_DUMP).length,
+        [EVENT_TYPES.SMTP]: events.filter(({type}) => type === EVENT_TYPES.SMTP).length,
+        [EVENT_TYPES.SENTRY]: events.filter(({type}) => type === EVENT_TYPES.SENTRY).length,
+        [EVENT_TYPES.PROFILER]: events.filter(({type}) => type === EVENT_TYPES.PROFILER).length,
+        [EVENT_TYPES.MONOLOG]: events.filter(({type}) => type === EVENT_TYPES.MONOLOG).length,
+        [EVENT_TYPES.INSPECTOR]: events.filter(({type}) => type === EVENT_TYPES.INSPECTOR).length,
+        [EVENT_TYPES.HTTP_DUMP]: events.filter(({type}) => type === EVENT_TYPES.HTTP_DUMP).length,
+        [EVENT_TYPES.RAY_DUMP]: events.filter(({type}) => type === EVENT_TYPES.RAY_DUMP).length
+      }
+
+      return eventType && counts[eventType] != null ? counts[eventType] : events.length;
+    }
+
+  },
   actions: {
     initialize(events: ServerEvent<unknown>[]): void {
       this.events = events.slice(0, MAX_EVENTS_COUNT);

src/shared/stores/settings.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import { LOCAL_STORAGE_KEYS } from "../types";
+import {type EventId, LOCAL_STORAGE_KEYS} from "../types";
 
 export const THEME_MODES = {
   LIGHT: "light",
@@ -26,30 +26,33 @@ const checkThemeActive = () => {
 };
 
 const checkHeaderFixed = () => {
-  if (process.client) {
-    const storedValue: string = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) || "true";
-
+  if (!process.client) {
+    return  false;
+  }
 
-    const isFixed: boolean = storedValue === "true"
+  const storedValue: string = window?.localStorage.getItem(LOCAL_STORAGE_KEYS.NAVBAR) || "true";
 
-    if (isFixed) {
-      document?.documentElement?.classList?.add("navbar-fixed");
-    } else {
-      document?.documentElement?.classList?.remove("navbar-fixed");
-    }
+  const isFixed: boolean = storedValue === "true"
 
-    return isFixed;
+  if (isFixed) {
+    document?.documentElement?.classList?.add("navbar-fixed");
+  } else {
+    document?.documentElement?.classList?.remove("navbar-fixed");
   }
 
-  return {
-    themeType: false,
-  };
+  return isFixed;
 }
+const checkIfEventsCountVisible = (): boolean => {
+  const storageValue = localStorage?.getItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS) || "true";
+
+  return storageValue === "true";
+};
 
 export const useSettingsStore = defineStore("settingsStore", {
   state: () => ({
     themeType: checkThemeActive(),
     isFixedHeader: checkHeaderFixed(),
+    isVisibleEventCounts: checkIfEventsCountVisible(),
   }),
   actions: {
     changeTheme() {
@@ -75,6 +78,11 @@ export const useSettingsStore = defineStore("settingsStore", {
       } else {
         document?.documentElement?.classList?.remove("navbar-fixed");
       }
+    },
+    changeEventCountsVisibility() {
+      this.isVisibleEventCounts = !this.isVisibleEventCounts;
+
+      localStorage?.setItem(LOCAL_STORAGE_KEYS.EVENT_COUNTS, String(this.isVisibleEventCounts));
     }
   },
 });

src/shared/types/local-storage.ts

@@ -4,4 +4,5 @@ export enum LOCAL_STORAGE_KEYS {
   LOCKED_EVENTS = "locked_events",
   THEME = "theme",
   NAVBAR = "navbar",
+  EVENT_COUNTS = "event_counts",
 }

src/shared/ui/badge-number/badge-number.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import BadgeNumber from './badge-number.vue';
+
+export default {
+  title: "Shared/BadgeNumber",
+  component: BadgeNumber,
+  render: (args) => ({
+    setup() {
+      return {
+        args,
+      };
+    },
+    components: { BadgeNumber },
+    template: `
+      <BadgeNumber v-bind="args">
+        <button style="width: 100px">
+          Button
+        </button>
+      </BadgeNumber>
+    `,
+  })
+} as Meta<typeof BadgeNumber>;
+
+
+export const Default: StoryObj<typeof BadgeNumber> = {
+  args: {
+    number: 1,
+    isVisible: true,
+  }
+};
+
+
+export const Maximum: StoryObj<typeof BadgeNumber> = {
+  args: {
+    number: 10000,
+    isVisible: true,
+  }
+};

src/shared/ui/badge-number/badge-number.vue

@@ -0,0 +1,42 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+
+type Props = {
+  number: number;
+  isVisible?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  isVisible: true,
+});
+
+const normalizedNumber = computed(() =>
+  props.number > 99 ? "*" : props.number
+);
+const isVisibleBadge = computed(() => props.number > 0 && props.isVisible);
+</script>
+
+<template>
+  <div class="badge-number">
+    <slot></slot>
+
+    <div v-if="isVisibleBadge" class="badge-number__badge">
+      {{ normalizedNumber }}
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.badge-number {
+  @apply relative flex;
+}
+
+.badge-number__badge {
+  @apply bg-red-700 dark:bg-red-800 text-white shadow-lg ring-1 dark:ring-gray-800 ring-gray-300;
+  @apply flex justify-center items-center;
+  @apply absolute rounded-full font-thin leading-none;
+  @apply sm:-right-2 sm:-top-2 -right-1 -top-1 sm:w-4 sm:h-4 w-3 h-3 sm:text-[10px] text-[8px];
+}
+</style>

src/shared/ui/badge-number/index.ts

@@ -0,0 +1 @@
+export { default as BadgeNumber } from "./badge-number.vue";

src/shared/ui/index.ts

@@ -6,4 +6,6 @@ export * from './value-dump';
 export * from './code-snippet';
 export * from './stat-board';
 export * from './file-attachment';
+export * from './pause-button';
+export * from './badge-number';