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] 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 1a5920d8..61f8c842 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 1c014ac4..a0357bb1 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 48f651e1..61b688e7 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 912d0823..17a7ba16 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 b5bbce44..959aa03b 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 352f506b..f1f36741 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 5e7cac0a..0859751a 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 e6b4793d..5f5dffa9 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 0d3f1a6d..45b58a1d 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 00000000..346624b8
--- /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 00000000..f246ff8a
--- /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 00000000..5906f1fc
--- /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>