StatsHouse UI: feature widget system

Author: vauweb

statshouse-ui/package-lock.json

@@ -21,6 +21,7 @@
     "@swc/core": "^1.10.7",
     "@swc/jest": "^0.2.37",
     "@tanstack/react-query": "^5.63.0",
+    "@tanstack/react-query-devtools": "^5.67.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

statshouse-ui/package.json

@@ -12,6 +12,7 @@ import { queryClient } from './common/queryClient';
 import { useStatsHouse } from '@/store2';
 import View2Page from './view2/ViewPage';
 import Core from './view2/Core';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 const FAQ = React.lazy(() => import('./doc/FAQ'));
 const Admin = React.lazy(() => import('./admin/Admin'));
@@ -26,6 +27,7 @@ export function App() {
   const isAdmin = useStatsHouse((s) => s.user.admin);
   return (
     <QueryClientProvider client={queryClient}>
+      {process.env.NODE_ENV !== 'production' && <ReactQueryDevtools client={queryClient} />}
       <Routes>
         <Route path="/" element={<Core />}>
           <Route path="" element={<Navigate to="view" replace={true} />} />

statshouse-ui/src/App.tsx

@@ -4,7 +4,6 @@
 // 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 * as React from 'react';
 import { FormPage } from './pages/FormPage';
 import { CreatePage } from './pages/CreatePage';
 import { Route, Routes } from 'react-router-dom';

statshouse-ui/src/admin/Admin.tsx

@@ -95,6 +95,7 @@ function useSubmitCreate(name: string) {
       resolution: 1,
       withPercentiles: false,
       visible: true,
+      disable: false,
       tags: [
         { name: '', alias: 'environment', customMapping: [] }, // env
         ...new Array(maxTagsSize - 1).fill({}).map(() => getDefaultTag()),

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

@@ -22,6 +22,7 @@ export const initialValues: IMetric = {
   resolution: 1,
   withPercentiles: false,
   visible: true,
+  disable: false,
   tags: [getDefaultTag()],
   tags_draft: [],
   tagsSize: 1,

statshouse-ui/src/admin/storages/MetricFormValues/reducer.ts

@@ -156,6 +156,6 @@ export class ExtendedError extends Error {
     this.status = status;
   }
   toString() {
-    return `${this.status}: ${this.message.substring(0, 255)}`;
+    return `${this.status}: ${this.message ? this.message.substring(0, 255) : 'unknown error'}`;
   }
 }

statshouse-ui/src/api/api.ts

@@ -6,11 +6,12 @@
 
 import { apiFetch, ExtendedError } from './api';
 import type { ApiQueryGet } from './query';
-import type { PlotParams, QueryParams } from '@/url2';
+import type { PlotParams, TimeRange, VariableKey, VariableParams } from '@/url2';
 import { useLiveModeStore } from '@/store2/liveModeStore';
 import { useMemo } from 'react';
-import { getLoadPlotUrlParams } from '@/store2/plotDataStore/loadPlotData';
 import { useQuery, type UseQueryResult } from '@tanstack/react-query';
+import { useStatsHouse } from '@/store2';
+import { getLoadPlotUrlParamsLight } from '@/store2/plotDataStore/loadPlotData2';
 
 export const ApiBadgesEndpoint = '/api/badges';
 
@@ -35,35 +36,36 @@ export async function apiBadgesFetch(params: ApiQueryGet, keyRequest?: unknown)
 
 export function useApiBadges<T = ApiBadges>(
   plot: PlotParams,
-  params: QueryParams,
+  timeRange: TimeRange,
+  timeShifts: number[],
+  variables: Partial<Record<VariableKey, VariableParams>>,
   select?: (response?: ApiBadges) => T,
-  enabled: boolean = true
+  enabled: boolean = false,
+  priority: number = 2
 ): UseQueryResult<T, ExtendedError> {
-  const interval = useLiveModeStore(({ interval, status }) => (status ? interval : undefined));
-
-  const priority = useMemo(() => {
-    if (plot?.id === params.tabNum) {
-      return 1;
-    }
-    return enabled ? 2 : 3;
-  }, [enabled, params.tabNum, plot?.id]);
+  const interval = useLiveModeStore(({ interval, status }) => (status ? interval * 2 : undefined));
 
   const keyParams = useMemo(() => {
     if (!plot?.id) {
       return null;
     }
-    return getLoadPlotUrlParams(plot?.id, params);
-  }, [params, plot?.id]);
+    return getLoadPlotUrlParamsLight(plot, timeRange, timeShifts, variables, interval);
+  }, [interval, plot, timeRange, timeShifts, variables]);
+
+  const plotHeals = useStatsHouse((s) => {
+    const status = s.plotHeals[plot.id];
+    return !(!!status && !status.status && status.lastTimestamp + status.timeout * 1000 > Date.now());
+  });
 
   const fetchParams = useMemo(() => {
     if (!plot?.id) {
       return null;
     }
-    return getLoadPlotUrlParams(plot?.id, params, interval, false, priority);
-  }, [interval, params, plot?.id, priority]);
+    return getLoadPlotUrlParamsLight(plot, timeRange, timeShifts, variables, interval, false, priority);
+  }, [interval, plot, priority, timeRange, timeShifts, variables]);
 
   return useQuery({
-    enabled,
+    enabled: plotHeals && enabled,
     select,
     queryKey: [ApiBadgesEndpoint, keyParams],
     queryFn: async ({ signal }) => {
@@ -78,5 +80,6 @@ export function useApiBadges<T = ApiBadges>(
       return response;
     },
     placeholderData: (previousData) => previousData,
+    refetchInterval: interval ? interval * 1000 : undefined, //live mode badge x2 interval
   });
 }

statshouse-ui/src/api/badges.ts

@@ -8,6 +8,10 @@ import { GET_PARAMS, type MetricMetaKind, type MetricMetaTagRawKind } from './en
 import { apiFetch, type ApiFetchResponse, ExtendedError } from './api';
 import { type UndefinedInitialDataOptions, useQuery, type UseQueryResult } from '@tanstack/react-query';
 import { queryClient } from '@/common/queryClient';
+import { promQLMetric } from '@/url2';
+import { debug } from '@/common/debug';
+import { MetricMeta, tagsArrToObject } from '@/store2/metricsMetaStore';
+import { useMemo } from 'react';
 
 export const ApiMetricEndpoint = '/api/metric';
 /**
@@ -115,14 +119,43 @@ export async function apiMetric<T = ApiMetric>(metricName: string): Promise<ApiF
   }
   return result;
 }
+export async function loadMetricMeta(metricName: string) {
+  if (!metricName || metricName === promQLMetric) {
+    return null;
+  }
+
+  const { response, error } = await apiMetric(metricName);
+
+  if (response && !error) {
+    debug.log('loading meta for', response.data.metric.name);
+    const metricMeta: MetricMeta = {
+      ...response.data.metric,
+      ...tagsArrToObject(response.data.metric.tags),
+    };
+    return metricMeta;
+  }
+  return null;
+}
 
 export function useApiMetric<T = ApiMetric>(
   metricName: string,
   select?: (response?: ApiMetric) => T,
   enabled: boolean = true
 ): UseQueryResult<T, ExtendedError> {
+  const options = useMemo(() => getMetricOptions(metricName, enabled), [enabled, metricName]);
   return useQuery({
-    ...getMetricOptions(metricName, enabled),
+    ...options,
     select,
   });
 }
+
+export function getMetricMeta(metricName: string): MetricMeta | null {
+  const meta = queryClient.getQueryData<ApiMetric>([ApiMetricEndpoint, metricName])?.data.metric;
+  if (meta) {
+    return {
+      ...meta,
+      ...tagsArrToObject(meta.tags),
+    };
+  }
+  return null;
+}