StatsHouse UI: fix metric edit transport (#1984)

vauweb · web-flow · commit 46e230b59680 · 2025-08-13T12:54:14.000+03:00
diff --git a/statshouse-ui/src/admin/api/saveMetric.ts b/statshouse-ui/src/admin/api/saveMetric.ts
@@ -7,7 +7,7 @@
 import { isNotNil } from '@/common/helpers';
 import { IBackendKind, IKind, IMetric, ITag } from '../models/metric';
 import { freeKeyPrefix } from '@/url2';
-import { ApiMetric, PostMetricMetaValue } from '@/api/metric';
+import { ApiMetric, MetricMetaValue } from '@/api/metric';
 
 export function resetMetricFlood(metricName: string) {
   return fetch(`/api/reset-flood?s=${metricName}`, {
@@ -70,7 +70,7 @@ export function mapMetricToEdit({ data: { metric } }: ApiMetric): IMetric {
   };
 }
 
-export function mapEditToMetric(metric: IMetric): PostMetricMetaValue {
+export function mapEditToMetric(metric: IMetric): MetricMetaValue {
   return {
     description: metric.description,
     kind: (metric.kind + (metric.withPercentiles ? '_p' : '')) as IBackendKind,
diff --git a/statshouse-ui/src/api/metric.ts b/statshouse-ui/src/api/metric.ts
@@ -60,7 +60,7 @@ export type MetricMetaValue = {
   name: string;
   version?: number;
   currentVersion?: number;
-  update_time: number;
+  update_time?: number;
   description?: string;
   tags?: MetricMetaTag[];
   /**
@@ -85,8 +85,6 @@ export type MetricMetaValue = {
   [key: string]: unknown;
 };
 
-export type PostMetricMetaValue = Omit<MetricMetaValue, 'update_time' | 'currentVersion'>;
-
 export type MetricMetaTag = {
   name?: string;
   description?: string;
@@ -109,23 +107,31 @@ export async function apiMetricVersionFetch(params: ApiMetricVersionGet, keyRequ
 
 export function getMetricOptions<T = ApiMetric>(
   metricName: string,
-  version: string | null = null,
+  version: number | null = null,
   enabled: boolean = true
-): UndefinedInitialDataOptions<ApiMetric | undefined, ExtendedError, T, [string, string, string | null]> {
+): UndefinedInitialDataOptions<ApiMetric | undefined, ExtendedError, T, [string, string, number | null]> {
   return {
-    enabled: enabled && metricName !== '',
+    enabled,
     queryKey: [ApiMetricEndpoint, metricName, version],
-    queryFn: async ({ signal }) => {
+    queryFn: async ({ signal, client }) => {
       if (!metricName) {
         throw new ExtendedError('no metric name');
       }
       const { response, error } = await apiMetricFetch({ [GET_PARAMS.metricName]: metricName }, signal);
       if (error) {
         throw error;
       }
+      if (response) {
+        response.data.metric.currentVersion = response.data.metric.version;
+        client.setQueryData([ApiMetricEndpoint, metricName, response.data.metric.version], response);
+      }
       if (response && version) {
+        client.setQueryData([ApiMetricEndpoint, metricName, null], response);
         const historyVersion = await apiMetricVersionFetch(
-          { [GET_PARAMS.metricId]: response.data.metric.metric_id.toString(), [GET_PARAMS.metricApiVersion]: version },
+          {
+            [GET_PARAMS.metricId]: response.data.metric.metric_id.toString(),
+            [GET_PARAMS.metricApiVersion]: version.toString(),
+          },
           signal
         );
 
@@ -135,19 +141,14 @@ export function getMetricOptions<T = ApiMetric>(
           });
         }
       }
-      return (
-        response &&
-        produce(response, (res) => {
-          res.data.metric.currentVersion = res.data.metric.version;
-        })
-      );
+      return response;
     },
   };
 }
 
 export async function apiMetric<T = ApiMetric>(
   metricName: string,
-  version: string | null = null
+  version: number | null = null
 ): Promise<ApiFetchResponse<T>> {
   const result: ApiFetchResponse<T> = { ok: false, status: 0 };
 
@@ -186,7 +187,7 @@ export async function loadMetricMeta(metricName: string) {
 
 export function useApiMetric<T = ApiMetric>(
   metricName: string,
-  version: string | null = null,
+  version: number | null = null,
   select?: (response?: ApiMetric) => T,
   enabled: boolean = true
 ): UseQueryResult<T, ExtendedError> {
@@ -208,8 +209,12 @@ export function getMetricMeta(metricName: string): MetricMeta | null {
   return null;
 }
 
-async function postMetricMeta(metric: PostMetricMetaValue) {
-  const { response, error } = await apiFetch<ApiMetric>({ url: ApiMetricEndpoint, post: { metric }, method: 'POST' });
+async function postMetricMeta(metric: MetricMetaValue) {
+  const { response, error } = await apiFetch<ApiMetric, undefined, ApiMetricPost>({
+    url: ApiMetricEndpoint,
+    post: { metric },
+    method: 'POST',
+  });
   if (error) {
     throw error;
   }
@@ -218,13 +223,10 @@ async function postMetricMeta(metric: PostMetricMetaValue) {
 
 export function useMutationMetricMeta() {
   const queryClient = useQueryClient();
-  return useMutation<Awaited<ReturnType<typeof postMetricMeta>>, ExtendedError, PostMetricMetaValue>({
-    mutationFn: async (metric: PostMetricMetaValue, originalMetric?: MetricMetaValue) => {
-      originalMetric ??= queryClient.getQueryData<ApiMetric>([
-        ApiMetricEndpoint,
-        metric.name,
-        metric.version?.toString() ?? null,
-      ])?.data.metric;
+  return useMutation<Awaited<ReturnType<typeof postMetricMeta>>, ExtendedError, MetricMetaValue>({
+    mutationFn: async (metric: MetricMetaValue) => {
+      const originalMetric = queryClient.getQueryData<ApiMetric>([ApiMetricEndpoint, metric.name, metric.version])?.data
+        .metric;
       return postMetricMeta(
         produce({ ...originalMetric, ...metric }, (p) => {
           if (p.currentVersion) {
@@ -236,13 +238,14 @@ export function useMutationMetricMeta() {
       );
     },
     onSuccess: (data, variables) => {
-      queryClient.invalidateQueries({ queryKey: [ApiMetricEndpoint, variables.name], type: 'all' });
       if (data) {
         const metric = data.data.metric;
         const metricName = metric.name;
         queryClient.setQueryData([ApiMetricEndpoint, metricName, null], data);
-        queryClient.setQueryData([ApiMetricEndpoint, metricName, metric.version?.toString() ?? null], data);
+        queryClient.setQueryData([ApiMetricEndpoint, metricName, metric.version ?? null], data);
         queryClient.invalidateQueries({ queryKey: [API_HISTORY, metric.metric_id], type: 'all' });
+      } else {
+        queryClient.invalidateQueries({ queryKey: [ApiMetricEndpoint, variables.name], type: 'all' });
       }
     },
     onError: (_error, variables) => {
diff --git a/statshouse-ui/src/components2/MetricEdit/MetricEditMenu.tsx b/statshouse-ui/src/components2/MetricEdit/MetricEditMenu.tsx
@@ -12,6 +12,7 @@ import css from './style.module.css';
 import cn from 'classnames';
 import { useHistoricalMetricVersion } from '@/hooks/useHistoricalMetricVersion';
 import { GET_PARAMS } from '@/api/enum';
+import { useMemo } from 'react';
 
 export type MetricEditMenuProps = {};
 
@@ -21,6 +22,13 @@ export function MetricEditMenu({}: MetricEditMenuProps) {
   const queryMetric = useApiMetric(metricName ?? '', historicalMetricVersion);
   const metric = queryMetric.data?.data.metric;
   const isHistoricalMetric = !!metric && metric.version !== metric.currentVersion;
+  const search = useMemo(
+    () =>
+      historicalMetricVersion
+        ? new URLSearchParams([[GET_PARAMS.metricUrlVersion, historicalMetricVersion.toString()]]).toString()
+        : undefined,
+    [historicalMetricVersion]
+  );
   if (queryMetric.isError) {
     return null;
   }
@@ -32,10 +40,8 @@ export function MetricEditMenu({}: MetricEditMenuProps) {
             {metricName}:
             <NavLink
               to={{
-                pathname: ``,
-                search: historicalMetricVersion
-                  ? `${GET_PARAMS.metricUrlVersion}=${historicalMetricVersion}`
-                  : undefined,
+                pathname: '',
+                search,
               }}
               end
               className={cn('mx-4', css.link)}
@@ -44,10 +50,8 @@ export function MetricEditMenu({}: MetricEditMenuProps) {
             </NavLink>
             <NavLink
               to={{
-                pathname: `history`,
-                search: historicalMetricVersion
-                  ? `${GET_PARAMS.metricUrlVersion}=${historicalMetricVersion}`
-                  : undefined,
+                pathname: 'history',
+                search,
               }}
               className={cn('me-4', css.link)}
             >
diff --git a/statshouse-ui/src/hooks/useHistoricalMetricVersion.ts b/statshouse-ui/src/hooks/useHistoricalMetricVersion.ts
@@ -1,8 +1,9 @@
 import { useSearchParams } from 'react-router-dom';
 import { useMemo } from 'react';
 import { GET_PARAMS } from '@/api/enum';
+import { toNumber } from '@/common/helpers';
 
 export function useHistoricalMetricVersion() {
   const [searchParams] = useSearchParams();
-  return useMemo(() => searchParams.get(GET_PARAMS.metricUrlVersion), [searchParams]);
+  return useMemo(() => toNumber(searchParams.get(GET_PARAMS.metricUrlVersion)), [searchParams]);
 }
