Skip to content

Commit 2653738

Browse files
butschsterbutschster
authored
Merge pull request #56 from buggregator/issue/#55-fix-preview-horizontal-scroll
Issue/#55 fix preview horizontal scroll
2 parents 9e202c6 + 0236555 commit 2653738

File tree

7 files changed

+67
-54
lines changed

7 files changed

+67
-54
lines changed

‎components/RayDumpPreview/RayTypesPreview/CallerPayload.vue‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@
77
file.line_number
88
}`"
99
>
10-
<code class="ray-type-caller__code"
11-
>{{ file.class || "null" }}:{{ file.method }}</code
12-
>
10+
<code class="ray-type-caller__code">
11+
{{ file.class || "null" }}:{{ file.method }}
12+
</code>
1313
</a>
1414
</div>
1515
</template>

‎components/RayDumpPreview/RayTypesPreview/EloquentPayload.vue‎

Lines changed: 13 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,22 @@
11
<template>
22
<div class="ray-type-model">
3-
<h3>
4-
Class name: <code>{{ payload.content.class_name }}</code>
3+
<h3 class="ray-type-model__title">
4+
Class name:
5+
<code class="ray-type-model__title-in">
6+
{{ payload.content.class_name }}
7+
</code>
58
</h3>
6-
<ValueDump :value="payload.content.attributes"/>
9+
<ValueDump :value="payload.content.attributes" />
710
</div>
811
</template>
912

1013
<script lang="ts">
11-
import {defineComponent, PropType} from "vue";
12-
import {RayPayload} from "~/config/types";
14+
import { defineComponent, PropType } from "vue";
15+
import { RayPayload } from "~/config/types";
1316
import ValueDump from "~/components/ValueDump/ValueDump.vue";
1417
1518
export default defineComponent({
16-
components: {ValueDump},
19+
components: { ValueDump },
1720
props: {
1821
payload: {
1922
type: Object as PropType<RayPayload>,
@@ -27,11 +30,11 @@ export default defineComponent({
2730
.ray-type-model {
2831
}
2932
30-
.ray-type-model h3 {
31-
@apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800;
33+
.ray-type-model__title {
34+
@apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800 flex w-full overflow-auto;
3235
}
3336
34-
.ray-type-model code {
35-
@apply font-semibold;
37+
.ray-type-model__title-in {
38+
@apply font-semibold ml-1;
3639
}
3740
</style>

‎components/RayDumpPreview/RayTypesPreview/EventPayload.vue‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,27 @@
11
<template>
22
<div class="ray-type-event">
3-
<ValueDump v-if="payload.content.class_based_event" :value="payload.content.event"/>
4-
<h3>
5-
Event: <code>{{ payload.content.name }}</code>
3+
<ValueDump
4+
v-if="payload.content.class_based_event"
5+
:value="payload.content.event"
6+
/>
7+
<h3 class="ray-type-event__text">
8+
Event:
9+
<code class="ray-type-event__text-in">{{ payload.content.name }}</code>
610
</h3>
7-
<ValueDump v-if="payload.content.payload" :value="payload.content.payload"/>
11+
<ValueDump
12+
v-if="payload.content.payload"
13+
:value="payload.content.payload"
14+
/>
815
</div>
916
</template>
1017

1118
<script lang="ts">
12-
import {defineComponent, PropType} from "vue";
13-
import {RayPayload} from "~/config/types";
19+
import { defineComponent, PropType } from "vue";
20+
import { RayPayload } from "~/config/types";
1421
import ValueDump from "~/components/ValueDump/ValueDump.vue";
1522
1623
export default defineComponent({
17-
components: {ValueDump},
24+
components: { ValueDump },
1825
props: {
1926
payload: {
2027
type: Object as PropType<RayPayload>,
@@ -28,11 +35,11 @@ export default defineComponent({
2835
.ray-type-event {
2936
}
3037
31-
.ray-type-event h3 {
32-
@apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800;
38+
.ray-type-event__text {
39+
@apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800 flex w-full overflow-auto;
3340
}
3441
35-
.ray-type-event code {
36-
@apply font-semibold;
42+
.ray-type-event__text-in {
43+
@apply font-semibold ml-1;
3744
}
3845
</style>

‎components/RayDumpPreview/RayTypesPreview/QueryPayload.vue‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
11
<template>
2-
<div class="ray-type-query">
3-
<CodeSnippet
4-
language="sql"
5-
class="event-ray__query-snippet"
6-
:code="formattedSql"
7-
/>
8-
<EventTable class="event-ray__query-table">
2+
<div class="query-payload">
3+
<CodeSnippet language="sql" :code="formattedSql" />
4+
<EventTable>
95
<EventTableRow title="Connection name">
106
{{ payload.content.connection_name }}
117
</EventTableRow>
@@ -36,12 +32,16 @@ export default defineComponent({
3632
computed: {
3733
formattedSql() {
3834
return (this.payload.content?.bindings || []).reduce(
39-
(result, binding) => result.replace(/\?/, `'${binding}'`),
35+
(result, binding) => (result || "").replace(/\?/, `'${binding}'`),
4036
this.payload.content?.sql || ""
4137
);
4238
},
4339
},
4440
});
4541
</script>
4642

47-
<style lang="scss" scoped></style>
43+
<style lang="scss" scoped>
44+
.query-payload {
45+
width: 100%;
46+
}
47+
</style>

‎components/RayDumpTypeMapper/RayDumpTypeMapper.vue‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script lang="ts">
2-
import {defineComponent, h, PropType} from "vue";
3-
import {RayPayload} from "~/config/types";
4-
import {RAY_EVENT_TYPES} from "~/config/constants";
2+
import { defineComponent, h, PropType } from "vue";
3+
import { RayPayload } from "~/config/types";
4+
import { RAY_EVENT_TYPES } from "~/config/constants";
55
66
import LogPayload from "~/components/RayDumpPreview/RayTypesPreview/LogPayload.vue";
77
import CustomPayload from "~/components/RayDumpPreview/RayTypesPreview/CustomPayload.vue";
@@ -11,6 +11,7 @@ import TracePayload from "~/components/RayDumpPreview/RayTypesPreview/TracePaylo
1111
import ExceptionPayload from "~/components/RayDumpPreview/RayTypesPreview/ExceptionPayload.vue";
1212
import TablePayload from "~/components/RayDumpPreview/RayTypesPreview/TablePayload.vue";
1313
import MeasurePayload from "~/components/RayDumpPreview/RayTypesPreview/MeasurePayload.vue";
14+
import NotifyPayload from "~/components/RayDumpPreview/RayTypesPreview/NotifyPayload.vue";
1415
import QueryPayload from "~/components/RayDumpPreview/RayTypesPreview/QueryPayload.vue";
1516
import EloquentPayload from "~/components/RayDumpPreview/RayTypesPreview/EloquentPayload.vue";
1617
import ViewsPayload from "~/components/RayDumpPreview/RayTypesPreview/ViewsPayload.vue";
@@ -29,38 +30,40 @@ export default defineComponent({
2930
render() {
3031
const TYPE_RENDER_MAP = {
3132
[RAY_EVENT_TYPES.LOG]: (payload: RayPayload) =>
32-
h(LogPayload, {payload}),
33+
h(LogPayload, { payload }),
3334
[RAY_EVENT_TYPES.CUSTOM]: (payload: RayPayload) =>
34-
h(CustomPayload, {payload}),
35+
h(CustomPayload, { payload }),
3536
[RAY_EVENT_TYPES.CALLER]: (payload: RayPayload) =>
36-
h(CallerPayload, {payload}),
37+
h(CallerPayload, { payload }),
3738
[RAY_EVENT_TYPES.CARBON]: (payload: RayPayload) =>
38-
h(CarbonPayload, {payload}),
39+
h(CarbonPayload, { payload }),
3940
[RAY_EVENT_TYPES.TRACE]: (payload: RayPayload) =>
40-
h(TracePayload, {payload}),
41+
h(TracePayload, { payload }),
4142
[RAY_EVENT_TYPES.EXCEPTION]: (payload: RayPayload) =>
42-
h(ExceptionPayload, {payload}),
43+
h(ExceptionPayload, { payload }),
4344
[RAY_EVENT_TYPES.TABLE]: (payload: RayPayload) =>
44-
h(TablePayload, {payload}),
45+
h(TablePayload, { payload }),
4546
[RAY_EVENT_TYPES.MEASURE]: (payload: RayPayload) =>
46-
h(MeasurePayload, {payload}),
47+
h(MeasurePayload, { payload }),
4748
[RAY_EVENT_TYPES.QUERY]: (payload: RayPayload) =>
48-
h(QueryPayload, {payload}),
49+
h(QueryPayload, { payload }),
4950
[RAY_EVENT_TYPES.ELOQUENT]: (payload: RayPayload) =>
50-
h(EloquentPayload, {payload}),
51+
h(EloquentPayload, { payload }),
5152
[RAY_EVENT_TYPES.VIEW]: (payload: RayPayload) =>
52-
h(ViewsPayload, {payload}),
53+
h(ViewsPayload, { payload }),
5354
[RAY_EVENT_TYPES.EVENT]: (payload: RayPayload) =>
54-
h(EventPayload, {payload}),
55+
h(EventPayload, { payload }),
5556
[RAY_EVENT_TYPES.JOB]: (payload: RayPayload) =>
56-
h(JobPayload, {payload}),
57+
h(JobPayload, { payload }),
5758
[RAY_EVENT_TYPES.LOCK]: (payload: RayPayload) =>
58-
h(LockPayload, {payload}),
59+
h(LockPayload, { payload }),
5960
[RAY_EVENT_TYPES.MAILABLE]: (payload: RayPayload) =>
60-
h(MailablePayload, {payload}),
61+
h(MailablePayload, { payload }),
62+
[RAY_EVENT_TYPES.NOTIFY]: (payload: RayPayload) =>
63+
h(NotifyPayload, { payload }),
6164
};
6265
63-
if (this.payload.type === 'hide') {
66+
if (this.payload.type === "hide") {
6467
this.$emit("toggleView", true);
6568
}
6669

‎components/SentryPreview/SentryPreview.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export default defineComponent({
9595
9696
.sentry-preview__text {
9797
@include text-muted;
98-
@apply text-sm break-all mb-3 p-3 dark:bg-gray-800;
98+
@apply text-sm break-all mb-3 p-3 dark:bg-gray-800 overflow-auto;
9999
}
100100
101101
.sentry-preview__frames {

‎config/constants.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export const RAY_EVENT_TYPES = {
2222
EXCEPTION: "exception",
2323
// HIDE: "hide",
2424
MEASURE: "measure",
25-
// NOTIFY: "notify",
25+
NOTIFY: "notify",
2626
MAILABLE: "mailable",
2727
TABLE: "table",
2828
TRACE: "trace",

0 commit comments

Comments
 (0)