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>