Merge pull request #163 from buggregator/feature/59

Refactors profiler module

Author: butschster

package.json

@@ -84,7 +84,7 @@
     "d3-graphviz": "^5.0.2",
     "d3-selection": "^3.0.0",
     "downloadjs": "^1.4.7",
-    "flame-chart-js": "^2.3.1",
+    "flame-chart-js": "^3.0",
     "highlight.js": "^11.7.0",
     "html-to-image": "^1.11.4",
     "lodash.debounce": "^4.0.8",

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>
@@ -86,5 +86,6 @@ onMounted(getEvent);
 
 .profiler-event__body {
   @include layout-body;
+  @apply h-full;
 }
 </style>

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/types.ts

@@ -1,12 +1,16 @@
 export interface ProfilerCost {
   [key: string]: number,
+
   "ct": number,
   "wt": number,
   "cpu": number,
   "mu": number,
   "pmu": number
 }
+
 export interface ProfilerEdge {
+  id: string,
+  parent: string | null,
   caller: string | null,
   callee: string,
   cost: ProfilerCost
@@ -20,7 +24,8 @@ export interface Profiler {
   },
   app_name: string,
   hostname: string,
+  profile_uuid: string,
   date: number,
   peaks: ProfilerCost,
-  edges: ProfilerEdges
+  // edges: ProfilerEdges
 }

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/features/lib/cytoscape/prepare-data.ts

@@ -5,7 +5,6 @@ import type { TEdge, TNode } from "./types";
 
 const { formatDuration, formatFileSize } = useFormats();
 
-
 const getColorForCallCount = (callCount: number) => {
   if (callCount <= 1) {
     return '#fff'; // Sky Blue for 1 call
@@ -91,7 +90,7 @@ const invertHexColor = (hexInput: string) => {
   return (yiq >= 128) ? '#000' : '#fff';
 }
 const formatValue = (value: number, metric: string): string | number => {
-  const metricFormatMap: Record<string, (v: number) => string|number> = {
+  const metricFormatMap: Record<string, (v: number) => string | number> = {
     p_mu: (a: number) => `${a}%`,
     p_pmu: (a: number) => `${a}%`,
     p_cpu: (a: number) => `${a}%`,
@@ -118,28 +117,22 @@ export const prepareData: (
   nodes: TNode[],
   edges: TEdge[]
 }) =
-  (edges: ProfilerEdges, metric , threshold = 1, percent = 10) => Object.values(edges)
+  (edges: ProfilerEdges, metric, threshold = 1, percent = 10) => Object.values(edges)
     .reduce((arr, edge: ProfilerEdge, index) => {
-      let nodeColor = '#fff';
-      let nodeTextColor = '#000';
-      let edgeColor = '#fff';
+      let nodeColor: string = '#fff';
+      let nodeTextColor: string = '#000';
+      let edgeColor: string = '#fff';
       let edgeLabel: string = edge.cost.ct > 1 ? `${edge.cost.ct}x` : '';
 
-      if (metric === GraphTypes.CALLS) {
-        const metricKey = `ct`;
-        const isImportantNode: boolean = edge.cost[metricKey] >= percent;
-        if (!isImportantNode) {
-          return arr
-        }
+      const metricKey: string = metric === GraphTypes.CALLS ? `ct` : `p_${metric}`;
+      const isImportantNode: boolean = edge.cost[metricKey] >= percent;
+      if (!isImportantNode && edge.cost[metricKey] <= threshold) {
+        return arr
+      }
 
+      if (metric === GraphTypes.CALLS) {
         nodeColor = getColorForCallCount(edge.cost[metricKey]);
       } else {
-        const metricKey = `p_${metric}`;
-        const isImportantNode: boolean = edge.cost[metricKey] >= percent;
-        if (!isImportantNode && edge.cost[metricKey] <= threshold) {
-          return arr
-        }
-
         nodeColor = isImportantNode ? getColorForPercentCount(edge.cost[metricKey]) : '#fff';
         nodeTextColor = isImportantNode ? invertHexColor(nodeColor) : '#000';
 
@@ -149,31 +142,23 @@ export const prepareData: (
         edgeLabel = `${formatValue(edge.cost[metricKey], metricKey)}${postfix}`;
       }
 
-      const metricKey = `p_${metric}`;
-
-      const isImportantNode = edge.cost.p_pmu > 10;
-
-      if (!isImportantNode && edge.cost[metricKey] <= threshold) {
-        return arr
-      }
-
       arr.nodes.push({
         data: {
-          id: edge.callee,
+          id: edge.id,
           name: edge.callee as string,
           cost: edge.cost,
           color: nodeColor,
           textColor: nodeTextColor
         }
       })
 
-      const hasNodeSource = arr.nodes.find(node => node.data.id === edge.caller);
+      const hasNodeSource = arr.nodes.find(node => node.data.id === edge.parent);
 
       if (index > 0 && hasNodeSource) {
         arr.edges.push({
           data: {
-            source: edge.caller || '',
-            target: edge.callee,
+            source: edge.parent || '',
+            target: edge.id,
             color: edgeColor,
             label: edgeLabel,
             weight: edge.cost.ct,

src/features/lib/cytoscape/types.ts

@@ -3,6 +3,7 @@ import type { ProfilerCost } from "~/src/entities/profiler/types";
 export type TNode = {
   data: {
     id: string,
+    parent: string | null,
     name: string,
     cost?: ProfilerCost,
     color?: string,