Skip to content

Commit fce155d

Browse files
butschsterbutschster
authored
Merge pull request #155 from buggregator/issue/#131-open-in-the-new-page
Issue/#131 open in the new page
2 parents d148c11 + 49f029c commit fce155d

File tree

34 files changed

+967
-247
lines changed

34 files changed

+967
-247
lines changed

‎pages/ray/[id].vue‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<script lang="ts" setup>
2+
import { computed, onMounted, ref } from "vue";
3+
import { RayPage } from "~/src/screens/ray";
4+
import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
5+
import { PageHeader } from "~/src/widgets/ui";
6+
import { useRay } from "~/src/entities/ray";
7+
import type { RayDump } from "~/src/entities/ray/types";
8+
import { useEvents } from "~/src/shared/lib/use-events";
9+
import type { EventId, ServerEvent } from "~/src/shared/types";
10+
11+
const { normalizeRayEvent } = useRay();
12+
13+
const { params } = useRoute();
14+
const { $authToken } = useNuxtApp();
15+
const router = useRouter();
16+
const eventId = params.id as EventId;
17+
18+
useHead({
19+
title: `Ray Dump > ${eventId} | Buggregator`,
20+
});
21+
22+
const { events } = useEvents();
23+
24+
const isLoading = ref(false);
25+
const serverEvent = ref<ServerEvent<RayDump> | null>(null);
26+
27+
const event = computed(() =>
28+
serverEvent.value ? normalizeRayEvent(serverEvent.value) : null
29+
);
30+
31+
const onDelete = () => {
32+
events.removeById(eventId);
33+
34+
router.push("/");
35+
};
36+
37+
const getEvent = async () => {
38+
isLoading.value = true;
39+
40+
await useFetch(events.getUrl(eventId), {
41+
headers: { "X-Auth-Token": $authToken.token || "" },
42+
onResponse({ response: { _data } }) {
43+
serverEvent.value = _data;
44+
isLoading.value = false;
45+
},
46+
onResponseError() {
47+
router.push("/404");
48+
},
49+
onRequestError() {
50+
router.push("/404");
51+
},
52+
});
53+
};
54+
55+
onMounted(getEvent);
56+
</script>
57+
58+
<template>
59+
<main class="ray-dump">
60+
<PageHeader
61+
class="ray-dump__head"
62+
button-title="Delete event"
63+
@delete="onDelete"
64+
>
65+
<NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
66+
<NuxtLink to="/ray">Ray Dump</NuxtLink>&nbsp;/&nbsp;
67+
<NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
68+
</PageHeader>
69+
70+
<div v-if="isLoading && !event" class="ray-dump__loading">
71+
<div></div>
72+
<div></div>
73+
<div></div>
74+
</div>
75+
76+
<div v-if="event" class="ray-dump__body">
77+
<RayPage :event="event" />
78+
</div>
79+
</main>
80+
</template>
81+
82+
<style lang="scss" scoped>
83+
@import "src/assets/mixins";
84+
85+
.ray-dump {
86+
@include layout;
87+
}
88+
89+
.ray-dump__head {
90+
@include layout-head;
91+
}
92+
93+
.ray-dump__loading {
94+
@include loading;
95+
@include layout-body;
96+
}
97+
98+
.ray-dump__body {
99+
@include layout-body;
100+
}
101+
</style>

‎pages/ray/index.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script lang="ts" setup>
2+
import { PageLayout } from "~/src/widgets/ui/page-layout";
3+
import { PAGE_TYPES } from "~/src/shared/constants";
4+
</script>
5+
6+
<template>
7+
<PageLayout :type="PAGE_TYPES.RAY_DUMP" title="Ray Dumps" />
8+
</template>

‎pages/var-dump/[id].vue‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<script lang="ts" setup>
2+
import { computed, onMounted, ref } from "vue";
3+
import { VarDumpPage } from "~/src/screens/var-dump";
4+
import { useFetch, useHead, useNuxtApp, useRoute, useRouter } from "#app"; // eslint-disable-line @conarti/feature-sliced/layers-slices
5+
import { PageHeader } from "~/src/widgets/ui";
6+
import { useVarDump } from "~/src/entities/var-dump";
7+
import type { VarDump } from "~/src/entities/var-dump/types";
8+
import { useEvents } from "~/src/shared/lib/use-events";
9+
import type { EventId, ServerEvent } from "~/src/shared/types";
10+
11+
const { normalizeVarDumpEvent } = useVarDump();
12+
13+
const { params } = useRoute();
14+
const { $authToken } = useNuxtApp();
15+
const router = useRouter();
16+
const eventId = params.id as EventId;
17+
18+
useHead({
19+
title: `Var Dump > ${eventId} | Buggregator`,
20+
});
21+
22+
const { events } = useEvents();
23+
24+
const isLoading = ref(false);
25+
const serverEvent = ref<ServerEvent<VarDump> | null>(null);
26+
27+
const event = computed(() =>
28+
serverEvent.value ? normalizeVarDumpEvent(serverEvent.value) : null
29+
);
30+
31+
const onDelete = () => {
32+
events.removeById(eventId);
33+
34+
router.push("/");
35+
};
36+
37+
const getEvent = async () => {
38+
isLoading.value = true;
39+
40+
await useFetch(events.getUrl(eventId), {
41+
headers: { "X-Auth-Token": $authToken.token || "" },
42+
onResponse({ response: { _data } }) {
43+
serverEvent.value = _data;
44+
isLoading.value = false;
45+
},
46+
onResponseError() {
47+
router.push("/404");
48+
},
49+
onRequestError() {
50+
router.push("/404");
51+
},
52+
});
53+
};
54+
55+
onMounted(getEvent);
56+
</script>
57+
58+
<template>
59+
<main class="var-dump">
60+
<PageHeader
61+
class="var-dump__head"
62+
button-title="Delete event"
63+
@delete="onDelete"
64+
>
65+
<NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
66+
<NuxtLink to="/var-dump">Var Dump</NuxtLink>&nbsp;/&nbsp;
67+
<NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
68+
</PageHeader>
69+
70+
<div v-if="isLoading && !event" class="var-dump__loading">
71+
<div></div>
72+
<div></div>
73+
<div></div>
74+
</div>
75+
76+
<div v-if="event" class="var-dump__body">
77+
<VarDumpPage :event="event" />
78+
</div>
79+
</main>
80+
</template>
81+
82+
<style lang="scss" scoped>
83+
@import "src/assets/mixins";
84+
85+
.var-dump {
86+
@include layout;
87+
}
88+
89+
.var-dump__head {
90+
@include layout-head;
91+
}
92+
93+
.var-dump__loading {
94+
@include loading;
95+
@include layout-body;
96+
}
97+
98+
.var-dump__body {
99+
@include layout-body;
100+
}
101+
</style>

‎pages/var-dump/index.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<script lang="ts" setup>
2+
import { PageLayout } from "~/src/widgets/ui/page-layout";
3+
import { PAGE_TYPES } from "~/src/shared/constants";
4+
</script>
5+
6+
<template>
7+
<PageLayout :type="PAGE_TYPES.VAR_DUMP" title="Var Dumps" />
8+
</template>

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,17 @@ type Props = {
99
1010
const props = defineProps<Props>();
1111
12-
const eventLink = `/http-dumps/${props.event.id}`;
1312
const uri = decodeURI(props.event.payload.request.uri);
1413
</script>
1514

1615
<template>
1716
<PreviewCard class="preview-card" :event="event">
18-
<NuxtLink :to="eventLink" class="preview-card__link">
17+
<div class="preview-card__content">
1918
<span class="preview-card__method">
2019
{{ event.payload.request.method }} </span
2120
>:
2221
<span class="preview-card__uri">/{{ uri }}</span>
23-
</NuxtLink>
22+
</div>
2423
</PreviewCard>
2524
</template>
2625

@@ -31,8 +30,8 @@ const uri = decodeURI(props.event.payload.request.uri);
3130
@apply flex flex-col text-2xs md:text-xs;
3231
}
3332
34-
.preview-card__link {
35-
@apply cursor-pointer p-2 md:p-3 bg-gray-200 dark:bg-gray-800;
33+
.preview-card__content {
34+
@apply p-2 md:p-3 bg-gray-200 dark:bg-gray-800;
3635
}
3736
3837
.preview-card__method {

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

Lines changed: 6 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts" setup>
2-
import { computed, defineProps } from "vue";
2+
import { defineProps } from "vue";
33
import type { NormalizedEvent } from "~/src/shared/types";
44
import { PreviewCard } from "~/src/shared/ui";
55
import type { Inspector } from "../../types";
@@ -9,16 +9,14 @@ type Props = {
99
event: NormalizedEvent<Inspector>;
1010
};
1111
12-
const props = defineProps<Props>();
13-
14-
const eventLink = computed(() => `/inspector/${props.event.id}`);
12+
defineProps<Props>();
1513
</script>
1614

1715
<template>
1816
<PreviewCard class="preview-card" :event="event">
19-
<NuxtLink :to="eventLink" class="preview-card__link">
17+
<div class="preview-card__content">
2018
<InspectorStatBoard :transaction="event.payload[0]" />
21-
</NuxtLink>
19+
</div>
2220
</PreviewCard>
2321
</template>
2422

@@ -29,7 +27,7 @@ const eventLink = computed(() => `/inspector/${props.event.id}`);
2927
@apply flex flex-col;
3028
}
3129
32-
.preview-card__link {
33-
@apply cursor-pointer pb-2 flex-grow;
30+
.preview-card__content {
31+
@apply pb-2 flex-grow;
3432
}
3533
</style>

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

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<script lang="ts" setup>
2-
import { computed } from "vue";
32
import type { NormalizedEvent } from "~/src/shared/types";
43
import { PreviewCard, StatBoard } from "~/src/shared/ui";
54
import type { Profiler } from "../../types";
@@ -8,16 +7,14 @@ type Props = {
87
event: NormalizedEvent<Profiler>;
98
};
109
11-
const props = defineProps<Props>();
12-
13-
const eventLink = computed(() => `/profiler/${props.event.id}`);
10+
defineProps<Props>();
1411
</script>
1512

1613
<template>
1714
<PreviewCard class="profiler-preview" :event="event">
18-
<NuxtLink tag="div" :to="eventLink" class="profiler-preview__link">
15+
<div class="profiler-preview__link">
1916
<StatBoard :cost="event.payload.peaks" />
20-
</NuxtLink>
17+
</div>
2118
</PreviewCard>
2219
</template>
2320

@@ -29,6 +26,6 @@ const eventLink = computed(() => `/profiler/${props.event.id}`);
2926
}
3027
3128
.profiler-preview__link {
32-
@apply cursor-pointer pb-2 flex-grow;
29+
@apply pb-2 flex-grow;
3330
}
3431
</style>

0 commit comments

Comments
 (0)