perforator: show correct format in TaskCard

commit_hash:45673a29704cd0130995e1e4fd222b98d30421e8

Author: gearoffortune

perforator/ui/src/components/TaskCard/TaskCard.tsx

@@ -7,6 +7,7 @@ import { Button, Card, ClipboardButton, Link } from '@gravity-ui/uikit';
 import { uiFactory } from 'src/factory';
 import type { TaskResult } from 'src/models/Task';
 import { TaskState } from 'src/models/Task';
+import { getFormat, isDiffTaskResult } from 'src/utils/renderingFormat';
 import { setPageTitle } from 'src/utils/title';
 
 import type { DefinitionListItem } from '../DefinitionList/DefinitionList';
@@ -36,6 +37,10 @@ export const TaskCard: React.FC<TaskCardProps> = props => {
     const query = spec?.Query;
     const traceId = task?.Spec?.TraceBaggage?.Baggage?.traceparent?.match(/^[^-]{2}-([^-]*)-.*/)?.[1];
 
+    const isDiff = isDiffTaskResult(props.task);
+    const isLegacyFormat = isDiff && 'FlamegraphOptions' in (props.task?.Spec?.DiffProfiles || {});
+    const format = getFormat(spec?.Format) ?? getFormat(diffSpec?.RenderFormat) ?? (isLegacyFormat ? 'Flamegraph' : undefined);
+
     React.useMemo(() => {
         if (query?.Selector) {
             setPageTitle(`Profile: ${query?.Selector}`);
@@ -91,7 +96,7 @@ export const TaskCard: React.FC<TaskCardProps> = props => {
         ['Baseline sample count', diffSpec?.BaselineQuery?.MaxSamples],
         ['Diff sample count', diffSpec?.DiffQuery?.MaxSamples],
         ['Trace', renderTraceLink()],
-        ['Flamegraph format', 'JSONFlamegraph' in (spec?.Format || {}) ? undefined : 'HTML'],
+        ['Flamegraph format', format === 'Flamegraph' ? 'HTML' : undefined],
     ];
 
     return (

perforator/ui/src/components/TaskReport/TaskReport.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import { Alert, Button, Loader } from '@gravity-ui/uikit';
 
 import { uiFactory } from 'src/factory';
-import type { RenderFormat } from 'src/generated/perforator/proto/perforator/perforator';
 import type { TaskResult } from 'src/models/Task';
+import { getFormat, isDiffTaskResult } from 'src/utils/renderingFormat';
 
 import { ErrorPanel } from '../ErrorPanel/ErrorPanel';
 
@@ -17,16 +17,9 @@ export interface TaskReportProps {
     task: TaskResult | null;
 }
 
-function getWellKnownKeysFromObject<O extends Record<string, any>, K extends keyof O>(o: O, keys: K[]): K[] {
-    return keys.filter(k => k in o);
-}
-
-const getFormatLike = (o: RenderFormat) => getWellKnownKeysFromObject(o, ['Flamegraph', 'JSONFlamegraph', 'RawProfile']);
-const getFormat = (o?: RenderFormat) => o ? getFormatLike(o)[0] : undefined;
-
 export const TaskReport: React.FC<TaskReportProps> = props => {
     const url = props.task?.Result?.MergeProfiles?.ProfileURL || props.task?.Result?.DiffProfiles?.ProfileURL;
-    const isDiff = 'DiffProfiles' in (props.task?.Result || {});
+    const isDiff = isDiffTaskResult(props.task);
     const mergeRenderFormat = props.task?.Spec?.MergeProfiles?.Format;
     const diffRenderFormat = props.task?.Spec?.DiffProfiles?.RenderFormat;
     const isLegacyFormat = isDiff && 'FlamegraphOptions' in (props.task?.Spec?.DiffProfiles || {});

perforator/ui/src/utils/renderingFormat.ts

@@ -0,0 +1,14 @@
+import type { RenderFormat } from 'src/generated/perforator/proto/perforator/perforator';
+import type { TaskResult } from 'src/models/Task';
+
+
+function getWellKnownKeysFromObject<O extends Record<string, any>, K extends keyof O>(obj: O, keys: K[]): K[] {
+    return keys.filter(k => k in obj);
+}
+
+const getFormatLike = (o: RenderFormat) => getWellKnownKeysFromObject(o, ['Flamegraph', 'JSONFlamegraph', 'RawProfile']);
+export const getFormat = (o?: RenderFormat) => o ? getFormatLike(o)[0] : undefined;
+
+export function isDiffTaskResult(task: TaskResult | null) {
+    return 'DiffProfiles' in (task?.Result || {});
+}