Merge pull request #161 from buggregator/improve/event-groups

Improve/event groups

pages/http-dumps/[id].vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 import { HttpDumpPage } from "~/src/screens/http-dump";
 import { useFetch, useRoute, useRouter, useHead, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
+import { PageEventHeader } from "~/src/widgets/ui";
 import { useHttpDump } from "~/src/entities/http-dump";
 import type { HttpDump } from "~/src/entities/http-dump/types";
 import { useEvents } from "~/src/shared/lib/use-events";
@@ -32,12 +32,6 @@ const event = computed(() =>
     : null
 );
 
-const onDelete = () => {
-  events.removeById(eventId);
-
-  router.push("/");
-};
-
 const getEvent = async () => {
   await useFetch(events.getUrl(eventId), {
     headers: { "X-Auth-Token": $authToken.token || "" },
@@ -62,15 +56,7 @@ onMounted(getEvent);
 
 <template>
   <main class="http-dumps-event">
-    <PageHeader
-      class="http-dumps-event__head"
-      button-title="Delete event"
-      @delete="onDelete"
-    >
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/
-      <NuxtLink to="/http-dumps">Http dumps</NuxtLink>&nbsp;/
-      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
-    </PageHeader>
+    <PageEventHeader title="Http dumps" :event-id="eventId" />
 
     <div v-if="isLoading && !event" class="http-dumps-event__loading">
       <div></div>

pages/inspector/[id].vue

@@ -2,7 +2,7 @@
 import { onMounted, computed, ref } from "vue";
 import { InspectorPage } from "~/src/screens/inspector";
 import { useFetch, useHead, useRoute, useRouter, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
+import { PageEventHeader } from "~/src/widgets/ui";
 import { useInspector } from "~/src/entities/inspector";
 import type { Inspector } from "~/src/entities/inspector/types";
 import { useEvents } from "~/src/shared/lib/use-events";
@@ -32,12 +32,6 @@ const event = computed(() =>
     : null
 );
 
-const onDelete = () => {
-  events.removeById(eventId);
-
-  router.push("/");
-};
-
 const getEvent = async () => {
   isLoading.value = true;
 
@@ -61,15 +55,7 @@ onMounted(getEvent);
 
 <template>
   <main class="inspector-event">
-    <PageHeader
-      class="inspector-event__head"
-      button-title="Delete event"
-      @delete="onDelete"
-    >
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink to="/inspector">Inspector</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
-    </PageHeader>
+    <PageEventHeader title="Inspector" :event-id="eventId" />
 
     <div v-if="isLoading && !event" class="inspector-event__loading">
       <div></div>

pages/monolog/[id].vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { MonologPage } from "~/src/screens/monolog";
+import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageEventHeader } from "~/src/widgets/ui";
+import { useMonolog } from "~/src/entities/monolog";
+import type { Monolog } from "~/src/entities/monolog/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+
+const { normalizeMonologEvent } = useMonolog();
+
+const { params } = useRoute();
+const { $authToken } = useNuxtApp();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Monolog > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<ServerEvent<Monolog> | null>(null);
+
+const event = computed(() =>
+  serverEvent.value ? normalizeMonologEvent(serverEvent.value) : null
+);
+
+const getEvent = async () => {
+  isLoading.value = true;
+
+  await useFetch(events.getUrl(eventId), {
+    headers: { "X-Auth-Token": $authToken.token || "" },
+    onResponse({ response: { _data } }) {
+      serverEvent.value = _data;
+      isLoading.value = false;
+    },
+    onResponseError() {
+      router.push("/404");
+    },
+    onRequestError() {
+      router.push("/404");
+    },
+  });
+};
+
+onMounted(getEvent);
+</script>
+
+<template>
+  <main class="monolog">
+    <PageEventHeader title="Monolog" :event-id="eventId" />
+
+    <div v-if="isLoading && !event" class="monolog__loading">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div v-if="event" class="monolog__body">
+      <MonologPage :event="event" />
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.monolog {
+  @include layout;
+}
+
+.monolog__loading {
+  @include loading;
+  @include layout-body;
+}
+
+.monolog__body {
+  @include layout-body;
+}
+</style>

pages/monolog/index.vue

@@ -0,0 +1,8 @@
+<script lang="ts" setup>
+import { PageLayout } from "~/src/widgets/ui/page-layout";
+import { PAGE_TYPES } from "~/src/shared/constants";
+</script>
+
+<template>
+  <PageLayout :type="PAGE_TYPES.MONOLOG" title="Monolog" />
+</template>

pages/profiler/[id].vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 import { ProfilerPage } from "~/src/screens/profiler";
 import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
+import { PageEventHeader } from "~/src/widgets/ui";
 import { useProfiler } from "~/src/entities/profiler";
 import type { Profiler } from "~/src/entities/profiler/types";
 import { useEvents } from "~/src/shared/lib/use-events";
@@ -31,13 +31,6 @@ const event = computed(() =>
       )
     : null
 );
-
-const onDelete = () => {
-  events.removeById(eventId);
-
-  router.push("/");
-};
-
 const getEvent = async () => {
   isLoading.value = true;
 
@@ -61,15 +54,7 @@ onMounted(getEvent);
 
 <template>
   <main class="profiler-event">
-    <PageHeader
-      class="profiler-event__head"
-      button-title="Delete event"
-      @delete="onDelete"
-    >
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink to="/profiler">Profiler</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
-    </PageHeader>
+    <PageEventHeader title="Profiler" :event-id="eventId" />
 
     <div v-if="isLoading && !event" class="profiler-event__loading">
       <div></div>

pages/ray/[id].vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 import { RayPage } from "~/src/screens/ray";
 import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
+import { PageEventHeader } from "~/src/widgets/ui";
 import { useRay } from "~/src/entities/ray";
 import type { RayDump } from "~/src/entities/ray/types";
 import { useEvents } from "~/src/shared/lib/use-events";
@@ -28,12 +28,6 @@ const event = computed(() =>
   serverEvent.value ? normalizeRayEvent(serverEvent.value) : null
 );
 
-const onDelete = () => {
-  events.removeById(eventId);
-
-  router.push("/");
-};
-
 const getEvent = async () => {
   isLoading.value = true;
 
@@ -57,15 +51,7 @@ onMounted(getEvent);
 
 <template>
   <main class="ray-dump">
-    <PageHeader
-      class="ray-dump__head"
-      button-title="Delete event"
-      @delete="onDelete"
-    >
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink to="/ray">Ray Dump</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
-    </PageHeader>
+    <PageEventHeader title="Ray Dump" :event-id="eventId" />
 
     <div v-if="isLoading && !event" class="ray-dump__loading">
       <div></div>

pages/sentry/[id].vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 import { SentryPage } from "~/src/screens/sentry";
 import { useRoute, useRouter, useFetch, useHead, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
+import { PageEventHeader } from "~/src/widgets/ui";
 import { useSentry } from "~/src/entities/sentry";
 import type { Sentry } from "~/src/entities/sentry/types";
 import { useEvents } from "~/src/shared/lib/use-events";
@@ -29,12 +29,6 @@ const event = computed(() =>
     : null
 );
 
-const onDelete = () => {
-  events.removeById(eventId);
-
-  router.push("/");
-};
-
 const getEvent = async () => {
   isLoading.value = true;
 
@@ -58,15 +52,7 @@ onMounted(getEvent);
 
 <template>
   <main class="sentry-event">
-    <PageHeader
-      class="sentry-event__head"
-      button-title="Delete event"
-      @delete="onDelete"
-    >
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink to="/sentry">Sentry</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
-    </PageHeader>
+    <PageEventHeader title="Sentry" :event-id="eventId" />
 
     <div v-if="isLoading && !event" class="sentry-event__loading">
       <div></div>

pages/smtp/[id].vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 import { SmtpPage } from "~/src/screens/smtp";
 import { useRoute, useRouter, useFetch, useHead, useNuxtApp } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
+import { PageEventHeader } from "~/src/widgets/ui";
 import { useSmtp } from "~/src/entities/smtp";
 import type { SMTP } from "~/src/entities/smtp/types";
 import { htmlEncode } from "~/src/shared/lib/helpers";
@@ -38,12 +38,6 @@ const html = computed(
   () => `<iframe srcdoc="${htmlEncode(serverEvent.value.payload.html)}"/>`
 );
 
-const onDelete = () => {
-  events.removeById(eventId);
-
-  router.push("/");
-};
-
 const getEvent = async () => {
   isLoading.value = true;
 
@@ -71,15 +65,7 @@ onMounted(getEvent);
 
 <template>
   <main class="smtp-event">
-    <PageHeader
-      class="smtp-event__head"
-      button-title="Delete event"
-      @delete="onDelete"
-    >
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink to="/smtp">Smtp</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
-    </PageHeader>
+    <PageEventHeader title="Smtp" :event-id="eventId" />
 
     <div v-if="isLoading && !event" class="smtp-event__loading">
       <div></div>

pages/var-dump/[id].vue

@@ -2,7 +2,7 @@
 import { computed, onMounted, ref } from "vue";
 import { VarDumpPage } from "~/src/screens/var-dump";
 import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
-import { PageHeader } from "~/src/widgets/ui";
+import { PageEventHeader } from "~/src/widgets/ui";
 import { useVarDump } from "~/src/entities/var-dump";
 import type { VarDump } from "~/src/entities/var-dump/types";
 import { useEvents } from "~/src/shared/lib/use-events";
@@ -28,12 +28,6 @@ const event = computed(() =>
   serverEvent.value ? normalizeVarDumpEvent(serverEvent.value) : null
 );
 
-const onDelete = () => {
-  events.removeById(eventId);
-
-  router.push("/");
-};
-
 const getEvent = async () => {
   isLoading.value = true;
 
@@ -57,15 +51,7 @@ onMounted(getEvent);
 
 <template>
   <main class="var-dump">
-    <PageHeader
-      class="var-dump__head"
-      button-title="Delete event"
-      @delete="onDelete"
-    >
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink to="/var-dump">Var Dump</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
-    </PageHeader>
+    <PageEventHeader title="Var Dump" :event-id="eventId" />
 
     <div v-if="isLoading && !event" class="var-dump__loading">
       <div></div>

src/entities/monolog/types.ts

@@ -12,6 +12,6 @@ export interface Monolog {
   level_name: string,
   channel: string,
   datetime: string,
-  extra: object,
+  extra: Record<string, unknown> | [],
 }
 

src/screens/monolog/index.ts

@@ -0,0 +1 @@
+export * from './ui'

src/screens/monolog/ui/index.ts

@@ -0,0 +1 @@
+export * from './monolog-page'

src/screens/monolog/ui/monolog-page/index.ts

@@ -0,0 +1 @@
+export { default as MonologPage } from './monolog-page.vue';

src/screens/monolog/ui/monolog-page/monolog-page.stories.ts

@@ -0,0 +1,18 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import { useMonolog } from "~/src/entities/monolog";
+import { monologMock } from '~/src/entities/monolog/mocks';
+import Monolog from './monolog-page.vue';
+
+const { normalizeMonologEvent } = useMonolog();
+
+export default {
+  title: "Screens/Monolog/MonologPage",
+  component: Monolog
+} as Meta<typeof Monolog>;
+
+
+export const Default: StoryObj<typeof Monolog> = {
+  args: {
+    event: normalizeMonologEvent(monologMock),
+  }
+}