#131 create blank pages for var and ray dumbs

pages/ray-dump/[id].vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } 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";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+
+const { normalizeProfilerEvent } = useProfiler();
+
+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<Event | null>(null);
+
+const event = computed(() =>
+ serverEvent.value
+ ? normalizeProfilerEvent(
+ serverEvent.value as unknown as ServerEvent<Profiler>
+ )
+ : 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-dump">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 class="ray-dump__body">
+ {{ JSON.stringify(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-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.RAY_DUMP" title="Ray Dumps" />
+</template>

pages/var-dump/[id].vue

@@ -0,0 +1,104 @@
+<script lang="ts" setup>
+import { computed, onMounted, ref } from "vue";
+import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
+import { PageHeader } 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";
+import type { EventId, ServerEvent } from "~/src/shared/types";
+
+const { normalizeProfilerEvent } = useProfiler();
+
+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<Event | null>(null);
+
+const event = computed(() =>
+ serverEvent.value
+ ? normalizeProfilerEvent(
+ serverEvent.value as unknown as ServerEvent<Profiler>
+ )
+ : 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 class="var-dump__body">
+ {{ JSON.stringify(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/widgets/ui/layout-sidebar/layout-sidebar.vue

@@ -119,6 +119,24 @@ const { path } = useRoute();
  <IconSvg class="layout-sidebar__link-icon" name="inspector" />
  </NuxtLink>
 
+ <NuxtLink
+ to="/var-dump"
+ title="Var Dump logs"
+ class="layout-sidebar__link"
+ :class="{ 'router-link-active': path.includes('/var-dump') }"
+ >
+ <IconSvg class="layout-sidebar__link-icon" name="inspector" />
+ </NuxtLink>
+
+ <NuxtLink
+ to="/ray-dump"
+ title="Ray Dump logs"
+ class="layout-sidebar__link"
+ :class="{ 'router-link-active': path.includes('/ray-dump') }"
+ >
+ <IconSvg class="layout-sidebar__link-icon" name="inspector" />
+ </NuxtLink>
+
  <NuxtLink to="/settings" title="Settings" class="layout-sidebar__link">
  <IconSvg class="layout-sidebar__link-icon" name="settings" />
  </NuxtLink>