Merge pull request #155 from buggregator/issue/#131-open-in-the-new-page

Issue/#131 open in the new page

pages/ray/[id].vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+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 { useRay } from "~/src/entities/ray";
+import type { RayDump } from "~/src/entities/ray/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+
+const { normalizeRayEvent } = useRay();
+
+const { params } = useRoute();
+const { $authToken } = useNuxtApp();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Ray Dump > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<ServerEvent<RayDump> | null>(null);
+
+const event = computed(() =>
+  serverEvent.value ? normalizeRayEvent(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="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>
+
+    <div v-if="isLoading && !event" class="ray-dump__loading">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div v-if="event" class="ray-dump__body">
+      <RayPage :event="event" />
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.ray-dump {
+  @include layout;
+}
+
+.ray-dump__head {
+  @include layout-head;
+}
+
+.ray-dump__loading {
+  @include loading;
+  @include layout-body;
+}
+
+.ray-dump__body {
+  @include layout-body;
+}
+</style>

pages/ray/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.RAY_DUMP" title="Ray Dumps" />
+</template>

pages/var-dump/[id].vue

@@ -0,0 +1,101 @@
+<script lang="ts" setup>
+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 { useVarDump } from "~/src/entities/var-dump";
+import type { VarDump } from "~/src/entities/var-dump/types";
+import { useEvents } from "~/src/shared/lib/use-events";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+
+const { normalizeVarDumpEvent } = useVarDump();
+
+const { params } = useRoute();
+const { $authToken } = useNuxtApp();
+const router = useRouter();
+const eventId = params.id as EventId;
+
+useHead({
+  title: `Var Dump > ${eventId} | Buggregator`,
+});
+
+const { events } = useEvents();
+
+const isLoading = ref(false);
+const serverEvent = ref<ServerEvent<VarDump> | null>(null);
+
+const event = computed(() =>
+  serverEvent.value ? normalizeVarDumpEvent(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="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>
+
+    <div v-if="isLoading && !event" class="var-dump__loading">
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div v-if="event" class="var-dump__body">
+      <VarDumpPage :event="event" />
+    </div>
+  </main>
+</template>
+
+<style lang="scss" scoped>
+@import "src/assets/mixins";
+
+.var-dump {
+  @include layout;
+}
+
+.var-dump__head {
+  @include layout-head;
+}
+
+.var-dump__loading {
+  @include loading;
+  @include layout-body;
+}
+
+.var-dump__body {
+  @include layout-body;
+}
+</style>

pages/var-dump/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.VAR_DUMP" title="Var Dumps" />
+</template>

src/entities/http-dump/ui/preview-card/preview-card.vue

@@ -9,18 +9,17 @@ type Props = {
 
 const props = defineProps<Props>();
 
-const eventLink = `/http-dumps/${props.event.id}`;
 const uri = decodeURI(props.event.payload.request.uri);
 </script>
 
 <template>
   <PreviewCard class="preview-card" :event="event">
-    <NuxtLink :to="eventLink" class="preview-card__link">
+    <div class="preview-card__content">
       <span class="preview-card__method">
         {{ event.payload.request.method }} </span
       >:
       <span class="preview-card__uri">/{{ uri }}</span>
-    </NuxtLink>
+    </div>
   </PreviewCard>
 </template>
 
@@ -31,8 +30,8 @@ const uri = decodeURI(props.event.payload.request.uri);
   @apply flex flex-col text-2xs md:text-xs;
 }
 
-.preview-card__link {
-  @apply cursor-pointer p-2 md:p-3 bg-gray-200 dark:bg-gray-800;
+.preview-card__content {
+  @apply p-2 md:p-3 bg-gray-200 dark:bg-gray-800;
 }
 
 .preview-card__method {

src/entities/inspector/ui/preview-card/preview-card.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { computed, defineProps } from "vue";
+import { defineProps } from "vue";
 import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard } from "~/src/shared/ui";
 import type { Inspector } from "../../types";
@@ -9,16 +9,14 @@ type Props = {
   event: NormalizedEvent<Inspector>;
 };
 
-const props = defineProps<Props>();
-
-const eventLink = computed(() => `/inspector/${props.event.id}`);
+defineProps<Props>();
 </script>
 
 <template>
   <PreviewCard class="preview-card" :event="event">
-    <NuxtLink :to="eventLink" class="preview-card__link">
+    <div class="preview-card__content">
       <InspectorStatBoard :transaction="event.payload[0]" />
-    </NuxtLink>
+    </div>
   </PreviewCard>
 </template>
 
@@ -29,7 +27,7 @@ const eventLink = computed(() => `/inspector/${props.event.id}`);
   @apply flex flex-col;
 }
 
-.preview-card__link {
-  @apply cursor-pointer pb-2 flex-grow;
+.preview-card__content {
+  @apply pb-2 flex-grow;
 }
 </style>

src/entities/profiler/ui/preview-card/preview-card.vue

@@ -1,5 +1,4 @@
 <script lang="ts" setup>
-import { computed } from "vue";
 import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard, StatBoard } from "~/src/shared/ui";
 import type { Profiler } from "../../types";
@@ -8,16 +7,14 @@ type Props = {
   event: NormalizedEvent<Profiler>;
 };
 
-const props = defineProps<Props>();
-
-const eventLink = computed(() => `/profiler/${props.event.id}`);
+defineProps<Props>();
 </script>
 
 <template>
   <PreviewCard class="profiler-preview" :event="event">
-    <NuxtLink tag="div" :to="eventLink" class="profiler-preview__link">
+    <div class="profiler-preview__link">
       <StatBoard :cost="event.payload.peaks" />
-    </NuxtLink>
+    </div>
   </PreviewCard>
 </template>
 
@@ -29,6 +26,6 @@ const eventLink = computed(() => `/profiler/${props.event.id}`);
 }
 
 .profiler-preview__link {
-  @apply cursor-pointer pb-2 flex-grow;
+  @apply pb-2 flex-grow;
 }
 </style>