StatsHouse UI: update metric edit transport (#1982)

Author: vauweb

statshouse-ui/src/admin/Admin.tsx

@@ -6,16 +6,29 @@
 
 import { FormPage } from './pages/FormPage';
 import { CreatePage } from './pages/CreatePage';
-import { Route, Routes } from 'react-router-dom';
+import { Outlet, Route, Routes } from 'react-router-dom';
 import { AdminDashControl } from './AdminDashControl';
+import { MetricHistory } from '@/admin/pages/MetricHistory';
+import { MetricEditMenu } from '@/components2/MetricEdit/MetricEditMenu';
 
 export function Admin(props: { yAxisSize: number; adminMode: boolean }) {
   const { yAxisSize, adminMode } = props;
 
   return (
     <Routes>
       <Route path="create" element={<CreatePage yAxisSize={yAxisSize} />} />
-      <Route path="edit/:metricName/*" element={<FormPage adminMode={adminMode} yAxisSize={yAxisSize} />} />
+      <Route
+        path="edit/:metricName"
+        element={
+          <div className="container-xl pt-3 pb-3">
+            <MetricEditMenu />
+            <Outlet />
+          </div>
+        }
+      >
+        <Route path="" element={<FormPage adminMode={adminMode} yAxisSize={yAxisSize} />} />
+        <Route path="history" element={<MetricHistory adminMode={adminMode} />} />
+      </Route>
       <Route path="dash/" element={<AdminDashControl />} />
     </Routes>
   );

statshouse-ui/src/admin/api/saveMetric.ts

@@ -5,65 +5,9 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import { isNotNil } from '@/common/helpers';
-import { IBackendKind, IBackendMetric, IKind, IMetric, ITag } from '../models/metric';
+import { IBackendKind, IKind, IMetric, ITag } from '../models/metric';
 import { freeKeyPrefix } from '@/url2';
-
-export function saveMetric(metric: IMetric) {
-  const body: IBackendMetric = {
-    description: metric.description,
-    kind: (metric.kind + (metric.withPercentiles ? '_p' : '')) as IBackendKind,
-    name: metric.name,
-    metric_id: metric.id,
-    string_top_name: metric.stringTopName,
-    string_top_description: metric.stringTopDescription,
-    weight: metric.weight,
-    resolution: metric.resolution,
-    visible: metric.visible,
-    disable: metric.disable,
-    tags: metric.tags.map((tag) => ({
-      name: tag.name,
-      description: tag.alias,
-      raw: tag.raw_kind != null,
-      raw_kind: tag.raw_kind,
-      value_comments:
-        tag.customMapping.length > 0
-          ? tag.customMapping.reduce(
-              (acc, map) => {
-                acc[map.from] = map.to;
-                return acc;
-              },
-              {} as Record<string, string>
-            )
-          : undefined,
-    })),
-    tags_draft: Object.fromEntries(metric.tags_draft.map((t) => [t.name, t])),
-    pre_key_tag_id: metric.pre_key_tag_id,
-    pre_key_from: metric.pre_key_from ? metric.pre_key_from : 0,
-    skip_max_host: !!metric.skip_max_host,
-    skip_min_host: !!metric.skip_min_host,
-    skip_sum_square: !!metric.skip_sum_square,
-    pre_key_only: !!metric.pre_key_only,
-    metric_type: metric.metric_type,
-    version: metric.version,
-    group_id: metric.group_id,
-    fair_key_tag_ids: metric.fair_key_tag_ids,
-  };
-
-  return fetch(`/api/metric${metric.id ? `?s=${metric.name}` : ''}`, {
-    method: 'POST',
-    body: JSON.stringify({ metric: body }),
-  })
-    .then((res) => res.json())
-    .catch(() => {
-      throw new Error('Unknown error');
-    })
-    .then((parsed) => {
-      if ('error' in parsed) {
-        throw new Error(parsed.error);
-      }
-      return parsed;
-    });
-}
+import { ApiMetric, PostMetricMetaValue } from '@/api/metric';
 
 export function resetMetricFlood(metricName: string) {
   return fetch(`/api/reset-flood?s=${metricName}`, {
@@ -81,19 +25,7 @@ export function resetMetricFlood(metricName: string) {
     });
 }
 
-export const fetchMetric = async (url: string) => {
-  const response = await fetch(url);
-  if (!response.ok) {
-    throw new Error(`Failed to fetch: ${url}`);
-  }
-  return response.json();
-};
-
-export const fetchAndProcessMetric = async (url: string) => {
-  const {
-    data: { metric },
-  } = await fetchMetric(url);
-
+export function mapMetricToEdit({ data: { metric } }: ApiMetric): IMetric {
   const tags_draft: ITag[] = Object.entries(metric.tags_draft ?? {})
     .map(([, t]) => t as ITag)
     .filter(isNotNil);
@@ -102,7 +34,7 @@ export const fetchAndProcessMetric = async (url: string) => {
   return {
     id: metric.metric_id === undefined ? 0 : metric.metric_id,
     name: metric.name,
-    description: metric.description,
+    description: metric.description ?? '',
     kind: (metric.kind.endsWith('_p') ? metric.kind.replace('_p', '') : metric.kind) as IKind,
     stringTopName: metric.string_top_name === undefined ? '' : metric.string_top_name,
     stringTopDescription: metric.string_top_description === undefined ? '' : metric.string_top_description,
@@ -111,20 +43,21 @@ export const fetchAndProcessMetric = async (url: string) => {
     visible: metric.visible === undefined ? false : metric.visible,
     disable: metric.disable === undefined ? false : metric.disable,
     withPercentiles: metric.kind.endsWith('_p'),
-    tags: metric.tags.map((tag: ITag, index: number) => ({
-      name: tag.name === undefined || tag.name === `key${index}` ? '' : tag.name,
-      alias: tag.description === undefined ? '' : tag.description,
-      customMapping: tag.value_comments
-        ? Object.entries(tag.value_comments).map(([from, to]) => ({
-            from,
-            to,
-          }))
-        : [],
-      isRaw: tag.raw || tag.raw_kind != null,
-      raw_kind: tag.raw_kind,
-    })),
+    tags:
+      metric.tags?.map((tag, index) => ({
+        name: tag.name === undefined || tag.name === `key${index}` ? '' : tag.name,
+        alias: tag.description === undefined ? '' : tag.description,
+        customMapping: tag.value_comments
+          ? Object.entries(tag.value_comments).map(([from, to]) => ({
+              from,
+              to,
+            }))
+          : [],
+        isRaw: tag.raw || tag.raw_kind != null,
+        raw_kind: tag.raw_kind,
+      })) ?? [],
     tags_draft,
-    tagsSize: metric.tags.length,
+    tagsSize: metric.tags?.length ?? 0,
     pre_key_tag_id: metric.pre_key_tag_id && freeKeyPrefix(metric.pre_key_tag_id),
     pre_key_from: metric.pre_key_from,
     metric_type: metric.metric_type,
@@ -135,4 +68,46 @@ export const fetchAndProcessMetric = async (url: string) => {
     skip_min_host: !!metric.skip_min_host,
     skip_sum_square: !!metric.skip_sum_square,
   };
-};
+}
+
+export function mapEditToMetric(metric: IMetric): PostMetricMetaValue {
+  return {
+    description: metric.description,
+    kind: (metric.kind + (metric.withPercentiles ? '_p' : '')) as IBackendKind,
+    name: metric.name,
+    metric_id: metric.id,
+    string_top_name: metric.stringTopName,
+    string_top_description: metric.stringTopDescription,
+    weight: metric.weight,
+    resolution: metric.resolution,
+    visible: metric.visible,
+    disable: metric.disable,
+    tags: metric.tags.map((tag) => ({
+      name: tag.name,
+      description: tag.alias,
+      raw: tag.raw_kind != null,
+      raw_kind: tag.raw_kind,
+      value_comments:
+        tag.customMapping.length > 0
+          ? tag.customMapping.reduce(
+              (acc, map) => {
+                acc[map.from] = map.to;
+                return acc;
+              },
+              {} as Record<string, string>
+            )
+          : undefined,
+    })),
+    tags_draft: Object.fromEntries(metric.tags_draft.map((t) => [t.name, t])),
+    pre_key_tag_id: metric.pre_key_tag_id,
+    pre_key_from: metric.pre_key_from ? metric.pre_key_from : 0,
+    skip_max_host: !!metric.skip_max_host,
+    skip_min_host: !!metric.skip_min_host,
+    skip_sum_square: !!metric.skip_sum_square,
+    pre_key_only: !!metric.pre_key_only,
+    metric_type: metric.metric_type,
+    version: metric.version,
+    group_id: metric.group_id,
+    fair_key_tag_ids: metric.fair_key_tag_ids,
+  };
+}

statshouse-ui/src/admin/models/metric.ts

@@ -4,11 +4,7 @@
 // License, v. 2.0. If a copy of the MPL was not distributed with this
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
-import { RawValueKind } from '@/view/api';
-
-export interface IShortMetric {
-  readonly name: string;
-}
+import { MetricMetaTagRawKind } from '@/api/enum';
 
 export interface ITag {
   readonly name: string;
@@ -17,7 +13,7 @@ export interface ITag {
    * @deprecated
    */
   readonly raw?: boolean;
-  readonly raw_kind?: RawValueKind;
+  readonly raw_kind?: MetricMetaTagRawKind;
   readonly value_comments?: Readonly<Record<string, string>>;
 }
 
@@ -28,11 +24,12 @@ export interface ITagAlias {
   readonly name: string;
   readonly alias: string;
   readonly isRaw?: boolean;
-  readonly raw_kind?: RawValueKind;
+  readonly raw_kind?: MetricMetaTagRawKind;
   readonly customMapping: { readonly from: string; readonly to: string }[];
 }
 
-export interface IMetric extends IShortMetric {
+export interface IMetric {
+  readonly name: string;
   readonly id: number;
   readonly description: string;
   readonly kind: IKind;
@@ -60,31 +57,3 @@ export interface IMetric extends IShortMetric {
   readonly group_id?: number;
   readonly fair_key_tag_ids?: string[];
 }
-
-export interface IBackendMetric {
-  readonly metric_id?: number;
-  readonly name?: string;
-  readonly description: string;
-  readonly kind: IBackendKind;
-  readonly tags: readonly ITag[];
-  readonly tags_draft?: Partial<Record<string, ITag>>;
-  readonly string_top_name?: string;
-  readonly string_top_description?: string;
-  readonly weight?: number;
-  readonly resolution?: number;
-  /**
-   * @deprecated
-   */
-  readonly visible?: boolean;
-  readonly disable?: boolean;
-  readonly pre_key_tag_id?: string;
-  readonly pre_key_from?: number;
-  readonly skip_max_host?: boolean;
-  readonly skip_min_host?: boolean;
-  readonly skip_sum_square?: boolean;
-  readonly pre_key_only?: boolean;
-  readonly metric_type?: string;
-  readonly version?: number;
-  readonly group_id?: number;
-  readonly fair_key_tag_ids?: string[];
-}

statshouse-ui/src/admin/pages/CreatePage.tsx

@@ -7,10 +7,11 @@
 import * as React from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { IMetric } from '../models/metric';
-import { saveMetric } from '../api/saveMetric';
+import { mapEditToMetric } from '../api/saveMetric';
 import { maxTagsSize } from '@/common/settings';
 import { getDefaultTag } from '../storages/MetricFormValues/reducer';
 import { useMetricMeta } from '@/hooks/useMetricMeta';
+import { useMutationMetricMeta } from '@/api/metric';
 
 export function CreatePage(props: { yAxisSize: number }) {
   const { yAxisSize } = props;
@@ -81,7 +82,8 @@ function useSubmitCreate(name: string) {
   const [isRunning, setRunning] = React.useState<boolean>(false);
   const [error, setError] = React.useState<string | null>(null);
   const [success, setSuccess] = React.useState<string | null>(null);
-
+  const mutationMetricMeta = useMutationMetricMeta();
+  const createMetric = mutationMetricMeta.mutateAsync;
   const onSubmit = React.useCallback(() => {
     setError(null);
     setSuccess(null);
@@ -106,17 +108,22 @@ function useSubmitCreate(name: string) {
       tags_draft: [],
       tagsSize: maxTagsSize,
     };
-    saveMetric(values)
-      .then(() => {
+
+    createMetric(mapEditToMetric(values), {
+      onSuccess: () => {
         setSuccess('Saved');
         setRunning(false);
         navigate(`/view?s=${name}`, { replace: true });
-      })
-      .catch((err) => {
-        setError(err.message);
+      },
+      onError: (error) => {
+        setError(error.message);
+        setRunning(false);
+      },
+      onSettled: () => {
         setRunning(false);
-      });
-  }, [name, navigate]);
+      },
+    });
+  }, [createMetric, name, navigate]);
 
   return {
     isRunning,