add "open json" button to event id pages

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

@@ -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;

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/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';

src/widgets/ui/page-event-header/index.ts

@@ -0,0 +1,3 @@
+import PageEventHeader from "./page-event-header.vue";
+
+export { PageEventHeader };

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",
+  }
+};