#131 create ray event page

pages/ray/[id].vue

@@ -1,5 +1,6 @@
 <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";
@@ -62,7 +63,7 @@ onMounted(getEvent);
  @delete="onDelete"
  >
  <NuxtLink to="/">Home</NuxtLink>&nbsp;/&nbsp;
- <NuxtLink to="/ray-dump">Ray Dump</NuxtLink>&nbsp;/&nbsp;
+ <NuxtLink to="/ray">Ray Dump</NuxtLink>&nbsp;/&nbsp;
  <NuxtLink :disabled="true">{{ eventId }}</NuxtLink>
  </PageHeader>
 
@@ -72,8 +73,8 @@ onMounted(getEvent);
  <div></div>
  </div>
 
- <div class="ray-dump__body">
- {{ JSON.stringify(event) }}
+ <div v-if="event" class="ray-dump__body">
+ <RayPage :event="event" />
  </div>
  </main>
 </template>

src/entities/ray/lib/use-ray/config.ts

@@ -0,0 +1,145 @@
+import { computed } from "vue";
+import type { OneOfValues } from "~/src/shared/types";
+import {
+ RAY_EVENT_TYPES,
+ type RayContentApplicationLog,
+ type RayContentCarbon,
+ type RayContentCustom,
+ type RayContentEloquent,
+ type RayContentEvent,
+ type RayContentException,
+ type RayContentFrame,
+ type RayContentFrames,
+ type RayContentJob,
+ type RayContentLock,
+ type RayContentLog,
+ type RayContentMail,
+ type RayContentMeasure,
+ type RayContentObject,
+ type RayContentSQL,
+ type RayContentView,
+ type RayPayload
+} from "../../types";
+import { RayApplicationLog } from "../../ui/ray-application-log";
+import { RayCarbon } from "../../ui/ray-carbon";
+import { RayCustom } from "../../ui/ray-custom";
+import { RayEloquent } from "../../ui/ray-eloquent";
+import { RayEvent } from "../../ui/ray-event";
+import { RayException } from "../../ui/ray-exception";
+import { RayFrame } from "../../ui/ray-frame";
+import { RayJob } from "../../ui/ray-job";
+import { RayLock } from "../../ui/ray-lock";
+import { RayLog } from "../../ui/ray-log";
+import { RayMail } from "../../ui/ray-mail";
+import { RayMeasure } from "../../ui/ray-measure";
+import { RayOrigin } from "../../ui/ray-origin";
+import { RayQuery } from "../../ui/ray-query";
+import { RayTable } from "../../ui/ray-table";
+import { RayTrace } from "../../ui/ray-trace";
+import { RayView } from "../../ui/ray-view";
+
+export const COMPONENT_TYPE_MAP: Record<RAY_EVENT_TYPES, {
+ view: unknown,
+ getProps: (payload: RayPayload) => Record<string, unknown>
+}> = {
+ [RAY_EVENT_TYPES.LOG]: {
+ view: RayLog,
+ getProps: (payload: RayPayload) => ({
+ log: (payload.content as RayContentLog).values[0],
+ }),
+ },
+ [RAY_EVENT_TYPES.CUSTOM]: {
+ view: RayCustom,
+ getProps: (payload: RayPayload) => ({
+ content: payload.content as RayContentCustom,
+ }),
+ },
+ [RAY_EVENT_TYPES.CALLER]: {
+ view: RayFrame,
+ getProps: (payload: RayPayload) => ({
+ frame: (payload.content as RayContentFrame).frame,
+ }),
+ },
+ [RAY_EVENT_TYPES.CARBON]: {
+ view: RayCarbon,
+ getProps: (payload: RayPayload) => ({
+ carbon: payload.content as RayContentCarbon,
+ }),
+ },
+ [RAY_EVENT_TYPES.TRACE]: {
+ view: RayTrace,
+ getProps: (payload: RayPayload) => ({
+ frames: (payload.content as RayContentFrames).frames,
+ }),
+ },
+ [RAY_EVENT_TYPES.EXCEPTION]: {
+ view: RayException,
+ getProps: (payload: RayPayload) => ({
+ exception: payload.content as RayContentException,
+ }),
+ },
+ [RAY_EVENT_TYPES.TABLE]: {
+ view: RayTable,
+ getProps: (payload: RayPayload) => ({
+ table: payload.content as RayContentObject,
+ }),
+ },
+ [RAY_EVENT_TYPES.MEASURE]: {
+ view: RayMeasure,
+ getProps: (payload: RayPayload) => ({
+ measure: payload.content as RayContentMeasure,
+ }),
+ },
+ [RAY_EVENT_TYPES.QUERY]: {
+ view: RayQuery,
+ getProps: (payload: RayPayload) => ({
+ content: payload.content as RayContentSQL,
+ }),
+ },
+ [RAY_EVENT_TYPES.ELOQUENT]: {
+ view: RayEloquent,
+ getProps: (payload: RayPayload) => ({
+ content: payload.content as RayContentEloquent,
+ }),
+ },
+ [RAY_EVENT_TYPES.APPLICATION_LOG]: {
+ view: RayApplicationLog,
+ getProps: (payload: RayPayload) => ({
+ content: payload.content as RayContentApplicationLog,
+ }),
+ },
+ [RAY_EVENT_TYPES.VIEW]: {
+ view: RayView,
+ getProps: (payload: RayPayload) => ({
+ view: payload.content as RayContentView,
+ }),
+ },
+ [RAY_EVENT_TYPES.EVENT]: {
+ view: RayEvent,
+ getProps: (payload: RayPayload) => ({
+ content: payload.content as RayContentEvent,
+ }),
+ },
+ [RAY_EVENT_TYPES.JOB]: {
+ view: RayJob,
+ getProps: (payload: RayPayload) => ({
+ content: payload.content as RayContentJob,
+ }),
+ },
+ [RAY_EVENT_TYPES.LOCK]: {
+ view: RayLock,
+ getProps: (payload: RayPayload) => ({
+ name: (payload.content as RayContentLock).name,
+ }),
+ },
+ [RAY_EVENT_TYPES.MAILABLE]: {
+ view: RayMail,
+ getProps: (payload: RayPayload) => ({
+ content: payload.content as RayContentMail,
+ }),
+ },
+ [RAY_EVENT_TYPES.NOTIFY]: {
+ view: RayOrigin,
+ getProps: (payload: RayPayload) => ({ origin: payload.origin }),
+ },
+};

src/entities/ray/lib/use-ray/use-ray.ts

@@ -1,11 +1,14 @@
 import type { ServerEvent } from '~/src/shared/types';
 import type { EnhancedRayEvent, RayDump } from "../../types";
+import { COMPONENT_TYPE_MAP } from "./config";
 import { normalizeRayEvent } from "./normalize-ray-event";
 
 type TUseRay = () => {
  normalizeRayEvent: (event: ServerEvent<RayDump>) => EnhancedRayEvent
+ COMPONENT_TYPE_MAP: typeof COMPONENT_TYPE_MAP
 }
 
 export const useRay: TUseRay = () => ({
- normalizeRayEvent
+ normalizeRayEvent,
+ COMPONENT_TYPE_MAP
 })

src/entities/ray/types.ts

@@ -1,5 +1,29 @@
 import type { NormalizedEvent } from "~/src/shared/types";
 
+export enum RAY_EVENT_TYPES {
+ LOG = "log",
+ // SIZE = "size",
+ CUSTOM = "custom",
+ // LABEL = "label",
+ CALLER = "caller",
+ CARBON = "carbon",
+ // COLOR = "color",
+ EXCEPTION = "exception",
+ // HIDE = "hide",
+ MEASURE = "measure",
+ NOTIFY = "notify",
+ MAILABLE = "mailable",
+ TABLE = "table",
+ TRACE = "trace",
+ QUERY = "executed_query",
+ APPLICATION_LOG = "application_log",
+ ELOQUENT = "eloquent_model",
+ VIEW = "view",
+ EVENT = "event",
+ JOB = "job_event",
+ LOCK = "create_lock",
+}
+
 export interface RayFrame {
  file_name: string,
  line_number: number,
@@ -138,7 +162,7 @@ export interface RayContentCustom {
 }
 
 export interface RayPayload {
- type: string,
+ type: RAY_EVENT_TYPES | string,
  origin?: RayPayloadOrigin,
  content: RayContentException
  | RayContent
@@ -184,27 +208,3 @@ export interface EnhancedRayEvent extends NormalizedEvent<RayDump> {
  size: 'sm' | 'md' | 'lg' | 'xl',
  }
 }
-
-export enum RAY_EVENT_TYPES {
- LOG = "log",
- // SIZE = "size",
- CUSTOM = "custom",
- // LABEL = "label",
- CALLER = "caller",
- CARBON = "carbon",
- // COLOR = "color",
- EXCEPTION = "exception",
- // HIDE = "hide",
- MEASURE = "measure",
- NOTIFY = "notify",
- MAILABLE = "mailable",
- TABLE = "table",
- TRACE = "trace",
- QUERY = "executed_query",
- APPLICATION_LOG = "application_log",
- ELOQUENT = "eloquent_model",
- VIEW = "view",
- EVENT = "event",
- JOB = "job_event",
- LOCK = "create_lock",
-}