Enhance UI and Functionality for Profiler and Event Cards

1. Enhanced UI for Profiler Top Functions: Profiler now fetches table schema from the backend.
2. Improved UI for Profiler Call Graph: Profiler now retrieves the toolbar from the backend.
3. Restored links on event preview cards for SMTP, Sentry, Profiler, and Inspector.
4. Various visual improvements to the UI.

Author: butschster

pages/profiler/[id].vue

@@ -63,7 +63,7 @@ onMounted(getEvent);
     </div>
 
     <div class="profiler-event__body">
-      <ProfilerPage v-if="event" :event="event" />
+      <ProfilerPage v-if="event" :event="event" class="p-5"/>
     </div>
   </main>
 </template>

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

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { defineProps } from "vue";
+import { computed, defineProps } from "vue";
 import type { NormalizedEvent } from "~/src/shared/types";
 import { PreviewCard } from "~/src/shared/ui";
 import type { Inspector } from "../../types";
@@ -9,14 +9,16 @@ type Props = {
   event: NormalizedEvent<Inspector>;
 };
 
-defineProps<Props>();
+const props = defineProps<Props>();
+
+const eventLink = computed(() => `/inspector/${props.event.id}`);
 </script>
 
 <template>
   <PreviewCard class="preview-card" :event="event">
-    <div class="preview-card__content">
-      <InspectorStatBoard :transaction="event.payload[0]" />
-    </div>
+    <NuxtLink :to="eventLink" class="preview-card__link">
+      <InspectorStatBoard :transaction="event.payload[0]"/>
+    </NuxtLink>
   </PreviewCard>
 </template>
 
@@ -27,7 +29,7 @@ defineProps<Props>();
   @apply flex flex-col;
 }
 
-.preview-card__content {
-  @apply pb-2 flex-grow;
+.preview-card__link {
+  @apply flex-grow cursor-pointer rounded-md overflow-hidden mb-2 border dark:border-gray-500;
 }
 </style>

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

@@ -7,14 +7,15 @@ type Props = {
   event: NormalizedEvent<Profiler>;
 };
 
-defineProps<Props>();
+const props = defineProps<Props>();
+const eventLink = computed(() => `/profiler/${props.event.id}`);
 </script>
 
 <template>
   <PreviewCard class="profiler-preview" :event="event">
-    <div class="profiler-preview__link">
-      <StatBoard :cost="event.payload.peaks" />
-    </div>
+    <NuxtLink tag="div" :to="eventLink" class="profiler-preview__link">
+      <StatBoard :cost="event.payload.peaks"/>
+    </NuxtLink>
   </PreviewCard>
 </template>
 
@@ -26,6 +27,6 @@ defineProps<Props>();
 }
 
 .profiler-preview__link {
-  @apply pb-2 flex-grow;
+  @apply flex-grow rounded-md overflow-hidden mb-2 border dark:border-gray-500;
 }
 </style>

src/entities/sentry/ui/preview-card/preview-card.vue

@@ -15,6 +15,8 @@ const props = withDefaults(defineProps<Props>(), {
   maxFrames: 3,
 });
 
+const eventLink = computed(() => `/sentry/${props.event.id}`);
+
 const exceptionValues = computed(
   () => props.event?.payload?.exception?.values || []
 );
@@ -27,12 +29,12 @@ const exception: Ref<Exception> = computed(() =>
   exceptionValues.value.length > 0
     ? exceptionValues.value[0]
     : {
-        type: "Unknown",
-        value: "Something went wrong",
-        stacktrace: {
-          frames: [],
-        },
-      }
+      type: "Unknown",
+      value: "Something went wrong",
+      stacktrace: {
+        frames: [],
+      },
+    }
 );
 </script>
 
@@ -43,31 +45,32 @@ const exception: Ref<Exception> = computed(() =>
       :exception="exception"
       :max-frames="maxFrames"
     >
-      <div class="preview-card__content">
+      <NuxtLink :to="eventLink" class="preview-card__link">
         <h3 class="preview-card__title">
           {{ exception.type }}
         </h3>
 
-        <pre class="preview-card__text" v-html="exception.value" />
-      </div>
+        <pre class="preview-card__text" v-html="exception.value"/>
+      </NuxtLink>
     </SentryException>
 
     <div v-if="message">
       <div class="preview-card__content">
-        <pre class="preview-card__text" v-html="message" />
+        <pre class="preview-card__text" v-html="message"/>
       </div>
     </div>
   </PreviewCard>
 </template>
 
 <style lang="scss" scoped>
 @import "src/assets/mixins";
+
 .preview-card {
   @apply flex flex-col;
 }
 
-.preview-card__content {
-  @apply block dark:bg-gray-900 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-400;
+.preview-card__link {
+  @apply cursor-pointer block dark:bg-gray-800 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-500;
 }
 
 .preview-card__title {
@@ -76,10 +79,10 @@ const exception: Ref<Exception> = computed(() =>
 
 .preview-card__text {
   @include code-example();
-  @apply text-sm break-words whitespace-pre-wrap mb-3 overflow-auto text-opacity-60;
+  @apply text-sm break-words whitespace-pre-wrap mb-3 overflow-auto text-opacity-60 dark:bg-gray-900 p-3;
 }
 
 .preview-card__frames {
-  @apply border border-purple-200 dark:border-gray-600 flex-col justify-center w-full;
+  @apply border border-purple-200 dark:border-gray-500 flex-col justify-center w-full;
 }
 </style>

src/entities/sentry/ui/sentry-exception/sentry-exception.vue

@@ -58,7 +58,7 @@ const exceptionFrames = computed(() => {
 }
 
 .sentry-exception__header {
-  @apply dark:bg-gray-900 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-400 border-b-0;
+  @apply dark:bg-gray-900 bg-gray-100 p-3 rounded-t-md border border-purple-300 dark:border-gray-500 border-b-0;
 }
 
 .sentry-exception__title {
@@ -71,6 +71,6 @@ const exceptionFrames = computed(() => {
 }
 
 .sentry-exception__frames {
-  @apply flex-col justify-center w-full border border-purple-300 dark:border-gray-400 border-t-0 rounded-b-md overflow-hidden;
+  @apply flex-col justify-center w-full border border-purple-300 dark:border-gray-500 border-t-0 rounded-b-md overflow-hidden;
 }
 </style>

src/entities/smtp/ui/preview-card/preview-card.vue

@@ -10,6 +10,7 @@ type Props = {
 };
 
 const props = defineProps<Props>();
+const eventLink = computed(() => `/smtp/${props.event.id}`);
 
 const dateFormat = computed(() => moment(props.event.date).fromNow());
 
@@ -20,19 +21,19 @@ const emailRecipient = computed(
 
 <template>
   <PreviewCard class="smtp-preview" :event="event">
-    <div class="smtp-preview__link">
+    <NuxtLink :to="eventLink" class="smtp-preview__link">
       <h3 class="smtp-preview__link-title">
         {{ event.payload.subject }}
       </h3>
 
       <div class="smtp-preview__link-text">
-        <span v-if="emailRecipient"
-          ><strong>To:</strong> {{ emailRecipient }}
+        <span v-if="emailRecipient">
+          <strong>To:</strong> {{ emailRecipient }}
         </span>
 
         <span>{{ dateFormat }}</span>
       </div>
-    </div>
+    </NuxtLink>
   </PreviewCard>
 </template>
 
@@ -46,7 +47,7 @@ const emailRecipient = computed(
   @apply block flex items-stretch;
   @apply p-2 md:p-4;
   @apply flex flex-col;
-  @apply border dark:border-gray-600;
+  @apply border dark:border-gray-500 rounded-md overflow-hidden;
   @apply dark:bg-gray-800 dark:hover:bg-gray-900 hover:bg-white;
 }
 

src/screens/profiler/ui/call-graph-toolbar/call-graph-toolbar.vue

@@ -0,0 +1,115 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import { GraphTypes } from "~/src/shared/types";
+import { IconSvg } from "~/src/shared/ui";
+
+const emit = defineEmits(['onMetricChange', 'onFullscreen', 'onThresholdChange', 'onPercentChange'])
+
+type Props = {
+  data: Object;
+  isFullscreen: boolean;
+  metric: GraphTypes;
+  threshold: number;
+  percent: number;
+};
+
+const props = defineProps<Props>();
+
+const fetchToolbar = async function () {
+  return await props.data.then(response => response.toolbar);
+};
+
+const toolbar = await fetchToolbar();
+
+const percentLabel = computed(() =>
+  props.metric === GraphTypes.CALLS ? "Min calls" : "Percent"
+);
+</script>
+
+<template>
+  <div class="call-graph__toolbar-wrapper">
+    <div class="call-graph__toolbar">
+      <button title="Full screen" @click="emit('onFullscreen')">
+        <IconSvg name="fullscreen" class="call-graph__toolbar-icon"/>
+      </button>
+      <button
+        v-for="button in toolbar"
+        class="call-graph__toolbar-action"
+        :class="{
+          'call-graph__toolbar-action--active': metric === button.metric,
+        }"
+        :title="button.description"
+        @click="emit('onMetricChange', button.metric)"
+      >
+        {{ button.label }}
+      </button>
+    </div>
+
+    <div class="call-graph__toolbar call-graph__toolbar--right">
+      <label
+        v-if="metric !== GraphTypes.CALLS"
+        class="call-graph__toolbar-input-wr"
+      >
+        Threshold
+
+        <input
+          class="call-graph__toolbar-input"
+          type="number"
+          :value="threshold"
+          :min="0"
+          :max="10"
+          :step="0.1"
+          @input="emit('onThresholdChange', $event.target.value)"
+        />
+      </label>
+
+      <label class="call-graph__toolbar-input-wr">
+        {{ percentLabel }}
+
+        <input
+          class="call-graph__toolbar-input"
+          type="number"
+          :value="percent"
+          :min="metric === GraphTypes.CALLS ? 1 : 0"
+          :max="metric === GraphTypes.CALLS ? 1000 : 100"
+          :step="metric === GraphTypes.CALLS ? 10 : 5"
+          @input="emit('onPercentChange', $event.target.value)"
+        />
+      </label>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.call-graph--fullscreen {
+  @apply rounded-none mt-0 top-0 left-0 fixed w-full h-full bg-gray-800 z-[99999];
+}
+
+.call-graph__toolbar {
+  @apply absolute top-5 left-5 flex bg-gray-200 p-2 rounded gap-x-5 shadow-lg;
+}
+
+.call-graph__toolbar--right {
+  @apply right-5 left-auto py-1;
+}
+
+.call-graph__toolbar-icon {
+  @apply w-4 h-4 fill-blue-500;
+}
+
+.call-graph__toolbar-action {
+  @apply text-xs uppercase text-gray-600;
+}
+
+.call-graph__toolbar-action--active {
+  @apply font-bold;
+}
+
+.call-graph__toolbar-input-wr {
+  @apply text-xs uppercase text-gray-600;
+}
+
+.call-graph__toolbar-input {
+  @apply border-gray-600 text-gray-600 w-10 font-bold text-right bg-gray-300 ml-1 py-1 rounded;
+}
+</style>

src/screens/profiler/ui/call-graph-toolbar/index.ts

@@ -0,0 +1 @@
+export { default as CallGraphToolbar } from "./call-graph-toolbar.vue";