From d04e10a85cf5e2a601d5306c298c3eeddac5b0e6 Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Fri, 7 Jun 2024 19:55:35 +0400
Subject: [PATCH 1/5] update event colors

---
 src/shared/ui/preview-card/preview-card-header.vue | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/shared/ui/preview-card/preview-card-header.vue b/src/shared/ui/preview-card/preview-card-header.vue
index 7f33c7b..ddf27d3 100644
--- a/src/shared/ui/preview-card/preview-card-header.vue
+++ b/src/shared/ui/preview-card/preview-card-header.vue
@@ -180,9 +180,10 @@ $eventTypeColorsMap: (
   "smtp" "orange",
   "sentry" "pink",
   "profiler" "purple",
-  "monolog" "gray",
-  "inspector" "gray",
-  "ray" "gray",
+  "ray" "cyan",
+  "inspector" "yellow",
+  "http-dump" "lime",
+  "monolog" "zinc",
   "unknown" "gray"
 );
 
@@ -206,9 +207,10 @@ $eventTypeColorsMap: (
    'Smtp' 'bg-orange-50 dark:bg-orange-700 text-orange-800 dark:text-orange-50 dark:border-orange-600' 'bg-orange-100 dark:bg-orange-500',
    'Sentry' 'bg-pink-50 dark:bg-pink-700 text-pink-800 dark:text-pink-50 dark:border-pink-600' 'bg-pink-100 dark:bg-pink-500',
    'profiler' 'bg-purple-50 dark:bg-purple-700 text-purple-800 dark:text-purple-50 dark:border-purple-600' 'bg-purple-100 dark:bg-purple-500',
-   'monolog' 'bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-50 dark:border-gray-600' 'bg-gray-100 dark:bg-gray-500',
-   'inspector' 'bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-50 dark:border-gray-600' 'bg-gray-100 dark:bg-gray-500',
-   'ray' 'bg-gray-50 dark:bg-gray-700 text-gray-800 dark:text-gray-50 dark:border-gray-600' 'bg-gray-100 dark:bg-gray-500' */
+   'ray' 'bg-cyan-50 dark:bg-cyan-700 text-cyan-800 dark:text-cyan-50 dark:border-cyan-600' 'bg-cyan-100 dark:bg-cyan-500',
+   'inspector' 'bg-yellow-50 dark:bg-yellow-700 text-yellow-800 dark:text-yellow-50 dark:border-yellow-600' 'bg-yellow-100 dark:bg-yellow-500',
+   'monolog' 'bg-zinc-50 dark:bg-zinc-700 text-zinc-800 dark:text-zinc-50 dark:border-zinc-600' 'bg-zinc-100 dark:bg-zinc-500'
+   'http-dump' 'bg-lime-50 dark:bg-lime-700 text-lime-800 dark:text-lime-50 dark:border-lime-600' 'bg-lime-100 dark:bg-lime-500' */
 
   @each $map in $eventTypeColorsMap {
     $name: nth($map, 1);

From f00910f383ebedb283cfefdd3f013c6c9d721c2f Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Fri, 7 Jun 2024 20:20:34 +0400
Subject: [PATCH 2/5] create monolog event page

---
 pages/monolog/[id].vue                        | 101 +++++++++++++++
 pages/monolog/index.vue                       |   8 ++
 src/entities/monolog/types.ts                 |   2 +-
 src/screens/monolog/index.ts                  |   1 +
 src/screens/monolog/ui/index.ts               |   1 +
 src/screens/monolog/ui/monolog-page/index.ts  |   1 +
 .../ui/monolog-page/monolog-page.stories.ts   |  18 +++
 .../monolog/ui/monolog-page/monolog-page.vue  | 119 ++++++++++++++++++
 src/shared/ui/code-snippet/code-snippet.vue   |   2 +-
 .../icon-svg/icon-svg-originals/monolog.svg   |  13 ++
 src/shared/ui/icon-svg/icon-svg.vue           |  41 ++++++
 11 files changed, 305 insertions(+), 2 deletions(-)
 create mode 100644 pages/monolog/[id].vue
 create mode 100644 pages/monolog/index.vue
 create mode 100644 src/screens/monolog/index.ts
 create mode 100644 src/screens/monolog/ui/index.ts
 create mode 100644 src/screens/monolog/ui/monolog-page/index.ts
 create mode 100644 src/screens/monolog/ui/monolog-page/monolog-page.stories.ts
 create mode 100644 src/screens/monolog/ui/monolog-page/monolog-page.vue
 create mode 100644 src/shared/ui/icon-svg/icon-svg-originals/monolog.svg

diff --git a/pages/monolog/[id].vue b/pages/monolog/[id].vue
new file mode 100644
index 0000000..48f651e
--- /dev/null
+++ b/pages/monolog/[id].vue
@@ -0,0 +1,101 @@
+<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 { PageHeader } 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 onDelete = () => {
+  events.removeById(eventId);
+
+  router.push("/");
+};
+
+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">
+    <PageHeader
+      class="monolog__head"
+      button-title="Delete event"
+      @delete="onDelete"
+    >
+      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink to="/monolog">Monolog</NuxtLink>&nbsp;/&nbsp;
+      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
+    </PageHeader>
+
+    <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__head {
+  @include layout-head;
+}
+
+.monolog__loading {
+  @include loading;
+  @include layout-body;
+}
+
+.monolog__body {
+  @include layout-body;
+}
+</style>
diff --git a/pages/monolog/index.vue b/pages/monolog/index.vue
new file mode 100644
index 0000000..9f32473
--- /dev/null
+++ b/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>
diff --git a/src/entities/monolog/types.ts b/src/entities/monolog/types.ts
index c9c4337..cf034da 100644
--- a/src/entities/monolog/types.ts
+++ b/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> | [],
 }
 
diff --git a/src/screens/monolog/index.ts b/src/screens/monolog/index.ts
new file mode 100644
index 0000000..ed58495
--- /dev/null
+++ b/src/screens/monolog/index.ts
@@ -0,0 +1 @@
+export * from './ui'
diff --git a/src/screens/monolog/ui/index.ts b/src/screens/monolog/ui/index.ts
new file mode 100644
index 0000000..2879ff5
--- /dev/null
+++ b/src/screens/monolog/ui/index.ts
@@ -0,0 +1 @@
+export * from './monolog-page'
diff --git a/src/screens/monolog/ui/monolog-page/index.ts b/src/screens/monolog/ui/monolog-page/index.ts
new file mode 100644
index 0000000..a27558c
--- /dev/null
+++ b/src/screens/monolog/ui/monolog-page/index.ts
@@ -0,0 +1 @@
+export { default as MonologPage } from './monolog-page.vue';
diff --git a/src/screens/monolog/ui/monolog-page/monolog-page.stories.ts b/src/screens/monolog/ui/monolog-page/monolog-page.stories.ts
new file mode 100644
index 0000000..88bbffb
--- /dev/null
+++ b/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),
+  }
+}
diff --git a/src/screens/monolog/ui/monolog-page/monolog-page.vue b/src/screens/monolog/ui/monolog-page/monolog-page.vue
new file mode 100644
index 0000000..3d2090a
--- /dev/null
+++ b/src/screens/monolog/ui/monolog-page/monolog-page.vue
@@ -0,0 +1,119 @@
+<script lang="ts" setup>
+import moment from "moment/moment";
+import { computed } from "vue";
+import type { Monolog } from "~/src/entities/monolog/types";
+import type { NormalizedEvent } from "~/src/shared/types";
+import { CodeSnippet, TableBase, TableBaseRow } from "~/src/shared/ui";
+
+type Props = {
+  event: NormalizedEvent<Monolog>;
+};
+
+const props = defineProps<Props>();
+
+const date = computed(() =>
+  moment(props.event.date).format("DD.MM.YYYY HH:mm:ss")
+);
+</script>
+
+<template>
+  <div ref="main" class="monolog">
+    <main class="monolog__in">
+      <header class="monolog__header">
+        <h2 class="monolog__header-title">
+          Channel: {{ event.payload.channel }}
+        </h2>
+        <div class="monolog__header-meta">
+          <span class="monolog__header-date">{{ date }}</span>
+        </div>
+      </header>
+
+      <CodeSnippet class="monolog__body" :code="event.payload.message" />
+
+      <CodeSnippet
+        v-if="event.payload.context"
+        class="monolog__body"
+        language="json"
+        :code="event.payload.context"
+      />
+
+      <template v-if="event.payload.extra && event.payload.extra.length">
+        <CodeSnippet
+          v-for="(field, key) in event.payload.extra"
+          :key="key"
+          class="monolog__body"
+          :code="{ [key]: String(field) }"
+        />
+      </template>
+
+      <section v-if="event.payload.context.source" class="monolog__body">
+        <h3 class="monolog__body-text">Source</h3>
+        <TableBase class="monolog__body-table">
+          <TableBaseRow
+            v-for="(value, name) in event.payload.context.source"
+            :key="name"
+            :title="String(name)"
+          >
+            {{ value }}
+          </TableBaseRow>
+        </TableBase>
+      </section>
+
+      <section v-if="event.payload.context.request" class="monolog__body">
+        <h3 class="monolog__body-text">Request</h3>
+        <TableBase class="monolog__body-table">
+          <template
+            v-for="(value, name) in event.payload.context.request"
+            :key="name"
+          >
+            <TableBaseRow v-if="name && value" :title="String(name)">
+              {{ value }}
+            </TableBaseRow>
+          </template>
+        </TableBase>
+      </section>
+    </main>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.monolog {
+  @apply relative;
+}
+
+.monolog__in {
+  @apply flex flex-col h-full flex-grow py-5 px-4 md:px-6 lg:px-8;
+}
+
+.monolog__header {
+  @apply flex flex-col md:flex-row justify-between items-center;
+}
+
+.monolog__header-meta {
+  @apply flex flex-col md:flex-row items-center gap-x-5;
+}
+
+.monolog__header-title {
+  @apply text-sm sm:text-base md:text-lg lg:text-2xl;
+}
+
+.monolog__header-date {
+  @include text-muted;
+  @apply text-sm font-semibold;
+}
+
+.monolog__body {
+  @apply py-5;
+}
+
+.monolog__body-text {
+  @include text-muted;
+  @apply font-bold uppercase text-sm mb-5;
+}
+
+.monolog__body-table {
+  @apply mt-3;
+}
+</style>
diff --git a/src/shared/ui/code-snippet/code-snippet.vue b/src/shared/ui/code-snippet/code-snippet.vue
index 9346539..fdb27cd 100644
--- a/src/shared/ui/code-snippet/code-snippet.vue
+++ b/src/shared/ui/code-snippet/code-snippet.vue
@@ -7,7 +7,7 @@ import { IconSvg } from "../icon-svg";
 const CodeHighlight = highlightPlugin.component;
 
 type Props = {
-  code?: string;
+  code?: string | Record<string, unknown> | Array<unknown> | null;
   language?: string;
 };
 
diff --git a/src/shared/ui/icon-svg/icon-svg-originals/monolog.svg b/src/shared/ui/icon-svg/icon-svg-originals/monolog.svg
new file mode 100644
index 0000000..b96ea23
--- /dev/null
+++ b/src/shared/ui/icon-svg/icon-svg-originals/monolog.svg
@@ -0,0 +1,13 @@
+<svg width="162px" height="149px" viewBox="0 0 162 149" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="var_dump" transform="translate(5.000000, 5.000000)">
+            <g id="Group">
+                <path d="M123.25,3.54545455 C137.198959,3.54545455 148.5,14.884546 148.5,28.8636364 L148.5,110.136364 C148.5,124.115454 137.198959,135.454545 123.25,135.454545 L28.75,135.454545 C14.8010408,135.454545 3.5,124.115454 3.5,110.136364 L3.5,28.8636364 C3.5,14.884546 14.8010408,3.54545455 28.75,3.54545455 L123.25,3.54545455 Z M28.75,0 C12.8755827,0 0,12.9189349 0,28.8636364 L0,110.136364 C0,126.081065 12.8755827,139 28.75,139 L123.25,139 C139.124417,139 152,126.081065 152,110.136364 L152,28.8636364 C152,21.2049896 148.968246,13.861044 143.573383,8.4480163 C138.181747,3.03822678 130.871433,0 123.25,0 L28.75,0 Z" id="Shape" stroke-opacity="0.99" stroke="#000000" stroke-width="10"></path>
+                <text id="LOG" fill="#000000" font-family="ArialRoundedMTBold, Arial Rounded MT Bold" font-size="38" font-weight="normal">
+                    <tspan x="35" y="74">LOG</tspan>
+                </text>
+                <path d="M34,98.5792683 C34,94.6317073 36.8,92 41,92 L111,92 C114.865993,92 118,94.9456387 118,98.5792683 C118,102.212898 114.865993,105.158537 111,105.158537 L41,105.158537 C37.1340068,105.158537 34,102.212898 34,98.5792683 Z" id="Path" fill="#000000" fill-rule="nonzero"></path>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/shared/ui/icon-svg/icon-svg.vue b/src/shared/ui/icon-svg/icon-svg.vue
index ea9f63d..70f4aa8 100644
--- a/src/shared/ui/icon-svg/icon-svg.vue
+++ b/src/shared/ui/icon-svg/icon-svg.vue
@@ -230,6 +230,47 @@ defineProps<Props>();
       </g>
     </svg>
 
+    <svg
+      v-else-if="name === 'monolog'"
+      viewBox="0 0 162 149"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g
+        id="Artboard"
+        stroke="none"
+        stroke-width="1"
+        fill="none"
+        fill-rule="evenodd"
+      >
+        <g id="var_dump" transform="translate(5.000000, 5.000000)">
+          <g id="Group">
+            <path
+              id="Shape"
+              d="M123.25,3.54545455 C137.198959,3.54545455 148.5,14.884546 148.5,28.8636364 L148.5,110.136364 C148.5,124.115454 137.198959,135.454545 123.25,135.454545 L28.75,135.454545 C14.8010408,135.454545 3.5,124.115454 3.5,110.136364 L3.5,28.8636364 C3.5,14.884546 14.8010408,3.54545455 28.75,3.54545455 L123.25,3.54545455 Z M28.75,0 C12.8755827,0 0,12.9189349 0,28.8636364 L0,110.136364 C0,126.081065 12.8755827,139 28.75,139 L123.25,139 C139.124417,139 152,126.081065 152,110.136364 L152,28.8636364 C152,21.2049896 148.968246,13.861044 143.573383,8.4480163 C138.181747,3.03822678 130.871433,0 123.25,0 L28.75,0 Z"
+              stroke-opacity="0.99"
+              stroke="#000000"
+              stroke-width="10"
+            ></path>
+            <text
+              id="LOG"
+              fill="#000000"
+              font-family="ArialRoundedMTBold, Arial Rounded MT Bold"
+              font-size="38"
+              font-weight="normal"
+            >
+              <tspan x="35" y="74">LOG</tspan>
+            </text>
+            <path
+              id="Path"
+              d="M34,98.5792683 C34,94.6317073 36.8,92 41,92 L111,92 C114.865993,92 118,94.9456387 118,98.5792683 C118,102.212898 114.865993,105.158537 111,105.158537 L41,105.158537 C37.1340068,105.158537 34,102.212898 34,98.5792683 Z"
+              fill="#000000"
+              fill-rule="nonzero"
+            ></path>
+          </g>
+        </g>
+      </g>
+    </svg>
+
     <svg
       v-else-if="name === 'logo'"
       xmlns="http://www.w3.org/2000/svg"

From 3e51e5abe2bc944407029a946436d833f1ba399e Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Fri, 7 Jun 2024 20:31:39 +0400
Subject: [PATCH 3/5] add monolog events page to sidebar

---
 .../icon-svg/icon-svg-originals/monolog.svg   |  6 +++---
 src/shared/ui/icon-svg/icon-svg.vue           | 21 ++++++-------------
 .../ui/layout-sidebar/layout-sidebar.vue      |  9 ++++++++
 3 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/shared/ui/icon-svg/icon-svg-originals/monolog.svg b/src/shared/ui/icon-svg/icon-svg-originals/monolog.svg
index b96ea23..ca191a6 100644
--- a/src/shared/ui/icon-svg/icon-svg-originals/monolog.svg
+++ b/src/shared/ui/icon-svg/icon-svg-originals/monolog.svg
@@ -2,11 +2,11 @@
     <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="var_dump" transform="translate(5.000000, 5.000000)">
             <g id="Group">
-                <path d="M123.25,3.54545455 C137.198959,3.54545455 148.5,14.884546 148.5,28.8636364 L148.5,110.136364 C148.5,124.115454 137.198959,135.454545 123.25,135.454545 L28.75,135.454545 C14.8010408,135.454545 3.5,124.115454 3.5,110.136364 L3.5,28.8636364 C3.5,14.884546 14.8010408,3.54545455 28.75,3.54545455 L123.25,3.54545455 Z M28.75,0 C12.8755827,0 0,12.9189349 0,28.8636364 L0,110.136364 C0,126.081065 12.8755827,139 28.75,139 L123.25,139 C139.124417,139 152,126.081065 152,110.136364 L152,28.8636364 C152,21.2049896 148.968246,13.861044 143.573383,8.4480163 C138.181747,3.03822678 130.871433,0 123.25,0 L28.75,0 Z" id="Shape" stroke-opacity="0.99" stroke="#000000" stroke-width="10"></path>
-                <text id="LOG" fill="#000000" font-family="ArialRoundedMTBold, Arial Rounded MT Bold" font-size="38" font-weight="normal">
+                <path d="M123.25,3.54545455 C137.198959,3.54545455 148.5,14.884546 148.5,28.8636364 L148.5,110.136364 C148.5,124.115454 137.198959,135.454545 123.25,135.454545 L28.75,135.454545 C14.8010408,135.454545 3.5,124.115454 3.5,110.136364 L3.5,28.8636364 C3.5,14.884546 14.8010408,3.54545455 28.75,3.54545455 L123.25,3.54545455 Z M28.75,0 C12.8755827,0 0,12.9189349 0,28.8636364 L0,110.136364 C0,126.081065 12.8755827,139 28.75,139 L123.25,139 C139.124417,139 152,126.081065 152,110.136364 L152,28.8636364 C152,21.2049896 148.968246,13.861044 143.573383,8.4480163 C138.181747,3.03822678 130.871433,0 123.25,0 L28.75,0 Z" id="Shape" stroke-opacity="0.99" stroke="currentColor" stroke-width="10"></path>
+                <text id="LOG" fill="currentColor" font-family="ArialRoundedMTBold, Arial Rounded MT Bold" font-size="38" font-weight="normal">
                     <tspan x="35" y="74">LOG</tspan>
                 </text>
-                <path d="M34,98.5792683 C34,94.6317073 36.8,92 41,92 L111,92 C114.865993,92 118,94.9456387 118,98.5792683 C118,102.212898 114.865993,105.158537 111,105.158537 L41,105.158537 C37.1340068,105.158537 34,102.212898 34,98.5792683 Z" id="Path" fill="#000000" fill-rule="nonzero"></path>
+                <path d="M34,98.5792683 C34,94.6317073 36.8,92 41,92 L111,92 C114.865993,92 118,94.9456387 118,98.5792683 C118,102.212898 114.865993,105.158537 111,105.158537 L41,105.158537 C37.1340068,105.158537 34,102.212898 34,98.5792683 Z" id="Path" fill="currentColor" fill-rule="nonzero"></path>
             </g>
         </g>
     </g>
diff --git a/src/shared/ui/icon-svg/icon-svg.vue b/src/shared/ui/icon-svg/icon-svg.vue
index 70f4aa8..6f73871 100644
--- a/src/shared/ui/icon-svg/icon-svg.vue
+++ b/src/shared/ui/icon-svg/icon-svg.vue
@@ -235,25 +235,17 @@ defineProps<Props>();
       viewBox="0 0 162 149"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <g
-        id="Artboard"
-        stroke="none"
-        stroke-width="1"
-        fill="none"
-        fill-rule="evenodd"
-      >
-        <g id="var_dump" transform="translate(5.000000, 5.000000)">
-          <g id="Group">
+      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(5.000000, 5.000000)">
+          <g>
             <path
-              id="Shape"
               d="M123.25,3.54545455 C137.198959,3.54545455 148.5,14.884546 148.5,28.8636364 L148.5,110.136364 C148.5,124.115454 137.198959,135.454545 123.25,135.454545 L28.75,135.454545 C14.8010408,135.454545 3.5,124.115454 3.5,110.136364 L3.5,28.8636364 C3.5,14.884546 14.8010408,3.54545455 28.75,3.54545455 L123.25,3.54545455 Z M28.75,0 C12.8755827,0 0,12.9189349 0,28.8636364 L0,110.136364 C0,126.081065 12.8755827,139 28.75,139 L123.25,139 C139.124417,139 152,126.081065 152,110.136364 L152,28.8636364 C152,21.2049896 148.968246,13.861044 143.573383,8.4480163 C138.181747,3.03822678 130.871433,0 123.25,0 L28.75,0 Z"
               stroke-opacity="0.99"
-              stroke="#000000"
+              stroke="currentColor"
               stroke-width="10"
             ></path>
             <text
-              id="LOG"
-              fill="#000000"
+              fill="currentColor"
               font-family="ArialRoundedMTBold, Arial Rounded MT Bold"
               font-size="38"
               font-weight="normal"
@@ -261,9 +253,8 @@ defineProps<Props>();
               <tspan x="35" y="74">LOG</tspan>
             </text>
             <path
-              id="Path"
               d="M34,98.5792683 C34,94.6317073 36.8,92 41,92 L111,92 C114.865993,92 118,94.9456387 118,98.5792683 C118,102.212898 114.865993,105.158537 111,105.158537 L41,105.158537 C37.1340068,105.158537 34,102.212898 34,98.5792683 Z"
-              fill="#000000"
+              fill="currentColor"
               fill-rule="nonzero"
             ></path>
           </g>
diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
index 5320fe5..7dd6299 100644
--- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue
+++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
@@ -128,6 +128,15 @@ const path = computed(() => useRoute().path);
         <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"

From f02e6ea74b9fd2d1ae39a5e3e561c4fa1e8f874c Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Fri, 7 Jun 2024 20:37:35 +0400
Subject: [PATCH 4/5] update logo link title

---
 src/widgets/ui/layout-sidebar/layout-sidebar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/widgets/ui/layout-sidebar/layout-sidebar.vue b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
index 7dd6299..50fb73c 100644
--- a/src/widgets/ui/layout-sidebar/layout-sidebar.vue
+++ b/src/widgets/ui/layout-sidebar/layout-sidebar.vue
@@ -64,7 +64,7 @@ const path = computed(() => useRoute().path);
     <nav class="layout-sidebar__nav">
       <NuxtLink
         to="/"
-        title="Events"
+        title="Dashboard"
         class="layout-sidebar__link layout-sidebar__link--logo"
       >
         <IconSvg class="layout-sidebar__link-icon" name="logo-short" />

From c17d9c1fc900487f93aba57fcd904981ed516b60 Mon Sep 17 00:00:00 2001
From: Kuchuk Andrey <kreezag@gmail.com>
Date: Fri, 7 Jun 2024 21:07:11 +0400
Subject: [PATCH 5/5] add "open json" button to event id pages

---
 pages/http-dumps/[id].vue                     | 18 +----
 pages/inspector/[id].vue                      | 18 +----
 pages/monolog/[id].vue                        | 22 +-----
 pages/profiler/[id].vue                       | 19 +-----
 pages/ray/[id].vue                            | 18 +----
 pages/sentry/[id].vue                         | 18 +----
 pages/smtp/[id].vue                           | 18 +----
 pages/var-dump/[id].vue                       | 18 +----
 src/widgets/ui/index.ts                       |  1 +
 src/widgets/ui/page-event-header/index.ts     |  3 +
 .../page-event-header.stories.ts              | 16 +++++
 .../page-event-header/page-event-header.vue   | 67 +++++++++++++++++++
 12 files changed, 103 insertions(+), 133 deletions(-)
 create mode 100644 src/widgets/ui/page-event-header/index.ts
 create mode 100644 src/widgets/ui/page-event-header/page-event-header.stories.ts
 create mode 100644 src/widgets/ui/page-event-header/page-event-header.vue

diff --git a/pages/http-dumps/[id].vue b/pages/http-dumps/[id].vue
index 1a5920d..61f8c84 100644
--- a/pages/http-dumps/[id].vue
+++ b/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>
diff --git a/pages/inspector/[id].vue b/pages/inspector/[id].vue
index 1c014ac..a0357bb 100644
--- a/pages/inspector/[id].vue
+++ b/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>
diff --git a/pages/monolog/[id].vue b/pages/monolog/[id].vue
index 48f651e..61b688e 100644
--- a/pages/monolog/[id].vue
+++ b/pages/monolog/[id].vue
@@ -2,7 +2,7 @@
 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 { PageHeader } from "~/src/widgets/ui";
+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";
@@ -28,12 +28,6 @@ const event = computed(() =>
   serverEvent.value ? normalizeMonologEvent(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="monolog">
-    <PageHeader
-      class="monolog__head"
-      button-title="Delete event"
-      @delete="onDelete"
-    >
-      <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink to="/monolog">Monolog</NuxtLink>&nbsp;/&nbsp;
-      <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
-    </PageHeader>
+    <PageEventHeader title="Monolog" :event-id="eventId" />
 
     <div v-if="isLoading && !event" class="monolog__loading">
       <div></div>
@@ -86,10 +72,6 @@ onMounted(getEvent);
   @include layout;
 }
 
-.monolog__head {
-  @include layout-head;
-}
-
 .monolog__loading {
   @include loading;
   @include layout-body;
diff --git a/pages/profiler/[id].vue b/pages/profiler/[id].vue
index 912d082..17a7ba1 100644
--- a/pages/profiler/[id].vue
+++ b/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>
diff --git a/pages/ray/[id].vue b/pages/ray/[id].vue
index b5bbce4..959aa03 100644
--- a/pages/ray/[id].vue
+++ b/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>
diff --git a/pages/sentry/[id].vue b/pages/sentry/[id].vue
index 352f506..f1f3674 100644
--- a/pages/sentry/[id].vue
+++ b/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>
diff --git a/pages/smtp/[id].vue b/pages/smtp/[id].vue
index 5e7cac0..0859751 100644
--- a/pages/smtp/[id].vue
+++ b/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>
diff --git a/pages/var-dump/[id].vue b/pages/var-dump/[id].vue
index e6b4793..5f5dffa 100644
--- a/pages/var-dump/[id].vue
+++ b/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>
diff --git a/src/widgets/ui/index.ts b/src/widgets/ui/index.ts
index 0d3f1a6..45b58a1 100644
--- a/src/widgets/ui/index.ts
+++ b/src/widgets/ui/index.ts
@@ -1,5 +1,6 @@
 export * from './render-graph';
 export * from './page-header';
+export * from './page-event-header';
 export * from './event-card';
 export * from './preview-card-default';
 export * from './page-placeholder';
diff --git a/src/widgets/ui/page-event-header/index.ts b/src/widgets/ui/page-event-header/index.ts
new file mode 100644
index 0000000..346624b
--- /dev/null
+++ b/src/widgets/ui/page-event-header/index.ts
@@ -0,0 +1,3 @@
+import PageEventHeader from "./page-event-header.vue";
+
+export { PageEventHeader };
diff --git a/src/widgets/ui/page-event-header/page-event-header.stories.ts b/src/widgets/ui/page-event-header/page-event-header.stories.ts
new file mode 100644
index 0000000..f246ff8
--- /dev/null
+++ b/src/widgets/ui/page-event-header/page-event-header.stories.ts
@@ -0,0 +1,16 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import PageEventHeader from "./page-event-header.vue";
+
+const PageEventHeaderMeta: Meta<typeof PageEventHeader> = {
+  title: "Widgets/PageEventHeader",
+  component: PageEventHeader,
+};
+
+export default PageEventHeaderMeta;
+
+export const Default: StoryObj<typeof PageEventHeader> = {
+  args: {
+    title: "Monolog",
+    eventId: "1",
+  }
+};
diff --git a/src/widgets/ui/page-event-header/page-event-header.vue b/src/widgets/ui/page-event-header/page-event-header.vue
new file mode 100644
index 0000000..5906f1f
--- /dev/null
+++ b/src/widgets/ui/page-event-header/page-event-header.vue
@@ -0,0 +1,67 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { REST_API_URL } from "~/src/shared/lib/io";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { Uuid } from "~/src/shared/types";
+import { PageHeader } from "../page-header";
+
+type Props = {
+  title: string;
+  eventId: Uuid;
+};
+
+const props = defineProps<Props>();
+
+const { events } = useEvents();
+const router = useRouter();
+
+const eventsListLink = computed(() =>
+  router.currentRoute.value.path.replace(`/${props.eventId}`, "")
+);
+const onDelete = () => {
+  events.removeById(props.eventId);
+
+  router.push("/");
+};
+
+const eventUrl = computed(() => `${REST_API_URL}/api/event/${props.eventId}`);
+</script>
+
+<template>
+  <PageHeader
+    class="page-event-header"
+    button-title="Delete event"
+    @delete="onDelete"
+  >
+    <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
+    <NuxtLink :to="eventsListLink">{{ title }}</NuxtLink
+    >&nbsp;/&nbsp;
+    <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
+
+    <template #controls>
+      <a
+        v-if="eventUrl"
+        :href="eventUrl"
+        target="_blank"
+        class="page-event-header__button"
+        title="Open JSON payload for this event in new tab"
+      >
+        Open JSON
+      </a>
+    </template>
+  </PageHeader>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.page-event-header {
+  @include layout-head;
+}
+
+.page-event-header__button {
+  @include button;
+  @apply bg-gray-800 hover:bg-gray-700;
+}
+</style>