#59 move profiler top function build to use-profiler

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

@@ -1,11 +1,17 @@
-import type { ServerEvent, NormalizedEvent } from '~/src/shared/types';
-import type { Profiler } from "../../types";
+import {useProfilerRequests} from "~/src/shared/lib/io/use-profiler-requests";
+import type {ServerEvent, NormalizedEvent, EventId} from '~/src/shared/types';
+import type {Profiler, ProfilerTopFunctions} from "../../types";
 import { normalizeProfilerEvent } from "./normalize-profile-event";
 
 type TUseProfiler = () => {
   normalizeProfilerEvent: (event: ServerEvent<Profiler>) => NormalizedEvent<Profiler>
+  getTopFunctions: (id: EventId, params?: Record<string, string>) => Promise<ProfilerTopFunctions>
 }
 
-export const useProfiler: TUseProfiler = () => ({
-  normalizeProfilerEvent
-})
+export const useProfiler: TUseProfiler = () => {
+  const { getTopFunctions } = useProfilerRequests();
+
+  return {
+    normalizeProfilerEvent,
+    getTopFunctions,
+}}

src/entities/profiler/types.ts

@@ -12,6 +12,11 @@ export interface ProfilerCost {
   p_mu: number;
   p_pmu: number;
   p_wt: number;
+  excl_cpu: number,
+  excl_wt: number,
+  excl_pmu: number,
+  excl_mu: number,
+  excl_ct: number,
 }
 
 export interface ProfilerEdge {
@@ -31,3 +36,16 @@ export interface Profiler {
   date: number,
   peaks: ProfilerCost,
 }
+
+
+export interface ProfilerTopFunctions {
+  functions: Array<ProfilerCost & { function: string }>,
+  schema: {
+    description: string
+    key: string
+    label: string
+    sortable: boolean
+    values: { key: string, format: string, type?: 'sub' }[]
+  }[],
+  overall_totals: Partial<ProfilerCost>
+}

src/screens/profiler/ui/top-functions/top-functions.vue

@@ -1,33 +1,31 @@
 <script setup lang="ts">
-import { computedAsync } from "@vueuse/core";
-import { ref } from "vue";
-import type { Profiler } from "~/src/entities/profiler/types";
+import { ref, onMounted } from "vue";
+import { useProfiler } from "~/src/entities/profiler";
+import type {
+  Profiler,
+  ProfilerTopFunctions,
+} from "~/src/entities/profiler/types";
 import { formatDuration } from "~/src/shared/lib/formats/format-duration";
 import { formatFileSize } from "~/src/shared/lib/formats/format-file-size";
-import { REST_API_URL } from "~/src/shared/lib/io";
-import { type EventId, TopFunctionsMetric } from "~/src/shared/types";
+import { type EventId } from "~/src/shared/types";
 import { StatBoard } from "~/src/shared/ui";
 
 type Props = {
   payload: Profiler;
   id: EventId;
 };
 
+const { getTopFunctions } = useProfiler();
 const props = defineProps<Props>();
-const metric = ref(
-  TopFunctionsMetric.EXCLUSIVE_WALL_TIME as TopFunctionsMetric,
-);
-
-const data = computedAsync(
-  () =>
-    // TODO: move to api service
-    fetch(
-      `${REST_API_URL}/api/profiler/${props.id}/top?metric=${metric.value}`,
-    ).then((response) => response.json()),
-  [],
-);
-
-const setMetric = (value: TopFunctionsMetric | null) => {
+const metric = ref("excl_wt"); // TODO: use enum value
+
+const data = ref<ProfilerTopFunctions>({
+  functions: [],
+  overall_totals: {},
+  schema: [],
+});
+
+const setMetric = (value: string | undefined) => {
   if (value) {
     metric.value = value;
   }
@@ -52,6 +50,10 @@ const formatValue = (value: number, format: string) => {
 
   return value;
 };
+
+onMounted(async () => {
+  data.value = await getTopFunctions(props.id, { metric: metric.value });
+});
 </script>
 
 <template>
@@ -69,7 +71,7 @@ const formatValue = (value: number, format: string) => {
             class="text-left"
             :class="`col-${col.key} ${metric === col.key ? 'selected' : ''}`"
             :title="col.description"
-            @click="setMetric(col.sortable ? col.key : null)"
+            @click="setMetric(col.sortable ? col.key : undefined)"
           >
             {{ col.label }}
           </td>

src/shared/lib/io/use-profiler-requests.ts

@@ -0,0 +1,58 @@
+import type {ProfilerTopFunctions} from "~/src/entities/profiler/types";
+import {useProfileStore} from "../../stores";
+import type { EventId } from "../../types";
+import { REST_API_URL } from "./constants";
+
+type TUseProfilerRequests = () => {
+  getTopFunctions: (id: EventId, params?: Record<string, string>) => Promise<ProfilerTopFunctions>
+}
+
+enum ProfilerPartType {
+  FlameChart = 'flame_chart',
+  CallGraph = 'call_graph',
+  TopFunctions = 'top'
+}
+// TODO: add 403 response handling
+
+export const useProfilerRequests: TUseProfilerRequests = () => {
+  const { token } = storeToRefs(useProfileStore())
+
+  const headers = {"X-Auth-Token": token.value }
+
+  const getProfilerPartsRestUrl = ({
+    id,
+    params,
+    type,
+  }: {
+     id: EventId,
+     params?: Record<string, string>,
+     type: ProfilerPartType
+  }): string  => {
+    const url = `${REST_API_URL}/api/profiler/${id}/${type}`
+
+    const searchParams = new URLSearchParams(params).toString()
+
+    return searchParams ? `${url}?${searchParams}` : url
+  }
+
+  const getTopFunctions = (id: EventId, params?: Record<string, string>) => fetch(getProfilerPartsRestUrl({ id, params, type: ProfilerPartType.TopFunctions }), { headers })
+    .then((response) => response.json())
+    .then((response) => {
+      if (response) {
+        return response
+      }
+
+      if (response?.code === 403) {
+        console.error('Forbidden')
+        return {};
+      }
+
+      console.error('Fetch Error')
+
+      return {};
+    })
+
+  return {
+    getTopFunctions,
+  }
+}

src/shared/types/partials.ts

@@ -22,17 +22,3 @@ export enum GraphTypes {
   MEMORY = 'mu',
   CALLS = 'ct',
 }
-
-export enum TopFunctionsMetric {
-  CPU = 'cpu',
-  WALL_TIME = 'wt',
-  MEMORY_CHANGE = 'pmu',
-  MEMORY = 'mu',
-  CALLS = 'ct',
-
-  EXCLUSIVE_CPU = 'excl_cpu',
-  EXCLUSIVE_WALL_TIME = 'excl_wt',
-  EXCLUSIVE_MEMORY_CHANGE = 'excl_pmu',
-  EXCLUSIVE_MEMORY = 'excl_mu',
-  EXCLUSIVE_CALLS = 'excl_ct',
-}