StatsHouse UI: widget url parse

statshouse-ui/src/components2/Plot/PlotControl/PlotControlAggregation.tsx

@@ -7,8 +7,8 @@
 import React, { memo, useCallback, useMemo } from 'react';
 import cn from 'classnames';
 import { isMetricAggregation, METRIC_AGGREGATION, METRIC_AGGREGATION_DESCRIPTION } from 'api/enum';
-import { getNewPlot, PlotKey } from '../../../url2';
-import { useStatsHouseShallow } from '../../../store2';
+import { getNewMetric, type PlotKey } from 'url2';
+import { useStatsHouseShallow } from 'store2';
 
 export type PlotControlAggregationProps = {
   plotKey: PlotKey;
@@ -20,7 +20,7 @@ const aggregationList = Object.values(METRIC_AGGREGATION).map((value) => ({
   description: METRIC_AGGREGATION_DESCRIPTION[value],
 }));
 
-const defaultCustomAgg = getNewPlot().customAgg;
+const defaultCustomAgg = getNewMetric().customAgg;
 
 export function _PlotControlAggregation({ className, plotKey }: PlotControlAggregationProps) {
   const { value, setPlot } = useStatsHouseShallow(({ params: { plots }, setPlot }) => ({

statshouse-ui/src/components2/Plot/PlotControl/PlotControlMaxHost.tsx

@@ -8,13 +8,13 @@ import { ReactComponent as SVGPcDisplay } from 'bootstrap-icons/icons/pc-display
 import React, { memo, useCallback } from 'react';
 import { SwitchBox } from 'components/UI';
 import { useStatsHouseShallow } from 'store2';
-import { getNewPlot, type PlotKey } from 'url2';
+import { getNewMetric, type PlotKey } from 'url2';
 
 export type PlotControlMaxHostProps = {
   plotKey: PlotKey;
 };
 
-const defaultMaxHost = getNewPlot().maxHost;
+const defaultMaxHost = getNewMetric().maxHost;
 
 export function _PlotControlMaxHost({ plotKey }: PlotControlMaxHostProps) {
   const { value, setPlot } = useStatsHouseShallow(({ params: { plots }, setPlot }) => ({

statshouse-ui/src/components2/Plot/PlotControl/PlotControlNumSeries.tsx

@@ -5,14 +5,14 @@
 // file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
 import React, { memo, useCallback } from 'react';
-import { useStatsHouseShallow } from '../../../store2';
-import { getNewPlot, PlotKey } from '../../../url2';
+import { useStatsHouseShallow } from 'store2';
+import { getNewMetric, type PlotKey } from 'url2';
 
 export type PlotControlNumSeriesProps = {
   plotKey: PlotKey;
 };
 
-const defaultNumSeries = getNewPlot().numSeries;
+const defaultNumSeries = getNewMetric().numSeries;
 
 export function _PlotControlNumSeries({ plotKey }: PlotControlNumSeriesProps) {
   const { numSeries, setPlot } = useStatsHouseShallow(({ params: { plots }, setPlot }) => ({

statshouse-ui/src/components2/Plot/PlotControl/PlotControlPromQLEditor.tsx

@@ -11,7 +11,7 @@ import cn from 'classnames';
 import { ReactComponent as SVGArrowCounterclockwise } from 'bootstrap-icons/icons/arrow-counterclockwise.svg';
 import { ReactComponent as SVGChevronCompactLeft } from 'bootstrap-icons/icons/chevron-compact-left.svg';
 import { ReactComponent as SVGChevronCompactRight } from 'bootstrap-icons/icons/chevron-compact-right.svg';
-import { getNewPlot, type PlotKey } from 'url2';
+import { getNewMetric, type PlotKey } from 'url2';
 import { useStatsHouseShallow } from 'store2';
 import { PrometheusSwitch } from './PrometheusSwitch';
 
@@ -32,7 +32,7 @@ export type PlotControlPromQLEditorProps = {
   plotKey: PlotKey;
 };
 
-const { prometheusCompat: defaultPrometheusCompat } = getNewPlot();
+const { prometheusCompat: defaultPrometheusCompat } = getNewMetric();
 
 export function _PlotControlPromQLEditor({ className, plotKey }: PlotControlPromQLEditorProps) {
   const { promQLParam, promqlExpand, togglePromqlExpand, setPlot, prometheusCompat } = useStatsHouseShallow(

statshouse-ui/src/components2/Plot/PlotControl/PlotControlVersion.tsx

@@ -8,16 +8,16 @@ import { ReactComponent as SVGLightning } from 'bootstrap-icons/icons/lightning.
 import React, { memo, useCallback } from 'react';
 import { SwitchBox } from 'components/UI';
 import { globalSettings } from 'common/settings';
-import { getNewPlot, type PlotKey } from 'url2';
-import { useStatsHouseShallow } from '../../../store2';
-import { METRIC_VALUE_BACKEND_VERSION, toMetricValueBackendVersion } from '../../../api/enum';
-import { useStoreDev } from '../../../store/dev';
+import { getNewMetric, type PlotKey } from 'url2';
+import { useStatsHouseShallow } from 'store2';
+import { METRIC_VALUE_BACKEND_VERSION, toMetricValueBackendVersion } from 'api/enum';
+import { useStoreDev } from 'store/dev';
 
 export type PlotControlVersionProps = {
   plotKey: PlotKey;
 };
 
-const defaultBackendVersion = getNewPlot().backendVersion;
+const defaultBackendVersion = getNewMetric().backendVersion;
 
 export function _PlotControlVersion({ plotKey }: PlotControlVersionProps) {
   const devMode = useStoreDev((s) => s.enabled);

statshouse-ui/src/components2/Plot/PlotControl/PlotControlView.tsx

@@ -10,15 +10,14 @@ import { ReactComponent as SVGGear } from 'bootstrap-icons/icons/gear.svg';
 import { useOnClickOutside } from 'hooks';
 import cn from 'classnames';
 import { useStatsHouseShallow } from 'store2';
-import { getNewPlot, PlotKey } from 'url2';
-import { isPromQL } from '../../../store2/helpers';
+import { getNewMetric, PlotKey } from 'url2';
 
 export type PlotControlViewProps = {
   plotKey: PlotKey;
   className?: string;
 };
 
-const { filledGraph: defaultFilledGraph, totalLine: defaultTotalLine } = getNewPlot();
+const { filledGraph: defaultFilledGraph, totalLine: defaultTotalLine } = getNewMetric();
 
 export function _PlotControlView({ plotKey, className }: PlotControlViewProps) {
   const { filledGraph, totalLine, setPlot } = useStatsHouseShallow((s) => ({

statshouse-ui/src/components2/Plot/PlotControl/PlotControlWhats.tsx

@@ -9,15 +9,15 @@ import { Select, type SelectOptionProps } from 'components/Select';
 import cn from 'classnames';
 import { type QueryWhat } from 'api/enum';
 import { metricKindToWhat } from 'view/api';
-import { getNewPlot, type PlotKey } from 'url2';
+import { getNewMetric, type PlotKey } from 'url2';
 import { useStatsHouseShallow } from 'store2';
 import { whatToWhatDesc } from 'view/whatToWhatDesc';
 
 export type PlotControlWhatsProps = {
   plotKey: PlotKey;
 };
 
-const defaultWhats = getNewPlot().what;
+const defaultWhats = getNewMetric().what;
 
 export function _PlotControlWhats({ plotKey }: PlotControlWhatsProps) {
   const { what, meta, setPlot } = useStatsHouseShallow((s) => ({

statshouse-ui/src/components2/Plot/PlotView/PlotEventsSelectColumns.tsx

@@ -10,7 +10,7 @@ import { useOnClickOutside } from 'hooks';
 import { useEventTagColumns2 } from 'hooks/useEventTagColumns2';
 import { ReactComponent as SVGEye } from 'bootstrap-icons/icons/eye.svg';
 import { ReactComponent as SVGEyeSlash } from 'bootstrap-icons/icons/eye-slash.svg';
-import { getNewPlot, PlotKey } from 'url2';
+import { getNewMetric, type PlotKey } from 'url2';
 import { useStatsHouseShallow } from 'store2';
 import { TagKey, toTagKey } from '../../../api/enum';
 
@@ -19,7 +19,7 @@ export type PlotEventsSelectColumnsProps = {
   className?: string;
   onClose?: () => void;
 };
-const emptyPlot = getNewPlot();
+const emptyPlot = getNewMetric();
 
 export function PlotEventsSelectColumns({ plotKey, className, onClose }: PlotEventsSelectColumnsProps) {
   const { plot, setPlot } = useStatsHouseShallow(({ params: { plots }, setPlot }) => ({

statshouse-ui/src/components2/Plot/PlotView/PlotHeaderBadges.tsx

@@ -8,14 +8,14 @@ import React, { useMemo } from 'react';
 import cn from 'classnames';
 
 import { Tooltip } from 'components/UI';
-import { getNewPlot, type PlotKey } from 'url2';
+import { getNewMetric, type PlotKey } from 'url2';
 import { useStatsHouseShallow } from 'store2';
 import { METRIC_VALUE_BACKEND_VERSION, toTagKey } from 'api/enum';
 import { formatTagValue } from 'view/api';
 import { getMetricMeta } from 'store2/helpers';
 import { PlotHeaderBadgeResolution } from './PlotHeaderBadgeResolution';
 
-const emptyPlot = getNewPlot();
+const emptyPlot = getNewMetric();
 
 export type PlotHeaderBadgesProps = { plotKey: PlotKey; compact?: boolean; dashboard?: boolean; className?: string };
 

statshouse-ui/src/store2/helpers/getAddPlotLink.ts

@@ -4,7 +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 { getNewPlot, type QueryParams, urlEncode } from 'url2';
+import { getNewMetric, type QueryParams, urlEncode } from 'url2';
 import { getNextPlotKey, updateQueryParamsPlotStruct } from '../urlStore/updateParamsPlotStruct';
 import { produce } from 'immer';
 import { clonePlot } from 'url2/clonePlot';
@@ -20,7 +20,7 @@ export function getAddPlotLink(params: QueryParams, saveParams?: QueryParams): s
       const groupKey = plotStruct.mapPlotToGroup[tabNum]!;
       const groupIndex = plotStruct.mapGroupIndex[groupKey]!;
       const plotIndex = plotStruct.mapPlotIndex[tabNum]!;
-      const plotInfo = clonePlot(plotStruct.groups[groupIndex]?.plots[plotIndex].plotInfo) ?? getNewPlot();
+      const plotInfo = clonePlot(plotStruct.groups[groupIndex]?.plots[plotIndex].plotInfo) ?? getNewMetric();
       const variableLinks = plotStruct.groups[groupIndex]?.plots[plotIndex].variableLinks ?? [];
 
       if (plotStruct.groups[groupIndex]) {

statshouse-ui/src/store2/helpers/getPlotLink.ts

@@ -4,7 +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 { getNewGroup, getNewPlot, type PlotKey, type QueryParams, urlEncode } from 'url2';
+import { getNewMetric, getNewGroup, type PlotKey, type QueryParams, urlEncode } from 'url2';
 import { produce } from 'immer';
 import { clonePlot } from 'url2/clonePlot';
 import { fixMessageTrouble } from 'url/fixMessageTrouble';
@@ -68,7 +68,7 @@ export function getFreePlot(plotKey: PlotKey, params: QueryParams) {
     });
     return plot;
   }
-  return getNewPlot();
+  return getNewMetric();
 }
 
 export function getPlotSingleLink(plotKey: PlotKey, params: QueryParams): string {

statshouse-ui/src/store2/helpers/getSinglePlotLink.ts

@@ -4,10 +4,10 @@
 // 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 { getDefaultParams, getNewPlot, type PlotKey, type QueryParams, urlEncode } from 'url2';
+import { getNewMetric, getDefaultParams, type PlotKey, type QueryParams, urlEncode } from 'url2';
 import { addPlot } from './addPlot';
 
 export function getSinglePlotLink(plotKey: PlotKey, params: QueryParams, saveParams?: QueryParams): string {
-  const nextParams = addPlot(params.plots[plotKey] ?? getNewPlot(), getDefaultParams());
+  const nextParams = addPlot(params.plots[plotKey] ?? getNewMetric(), getDefaultParams());
   return '?' + new URLSearchParams(urlEncode(nextParams, saveParams)).toString();
 }

statshouse-ui/src/store2/plotDataStore/loadPlotData.ts

@@ -4,7 +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 { type PlotKey, promQLMetric, type QueryParams, urlEncodePlotFilters, urlEncodeVariables } from 'url2';
+import { type PlotKey, promQLMetric, type QueryParams, metricFilterEncode, urlEncodeVariables } from 'url2';
 import { apiQueryFetch, type ApiQueryGet } from 'api/query';
 import { GET_PARAMS, METRIC_VALUE_BACKEND_VERSION } from 'api/enum';
 import { normalizePlotData } from './normalizePlotData';
@@ -34,7 +34,7 @@ export function getLoadPlotUrlParams(
     [GET_PARAMS.fromTime]: params.timeRange.from.toString(),
     [GET_PARAMS.width]: width,
     [GET_PARAMS.version]: plot.backendVersion,
-    [GET_PARAMS.metricFilter]: urlEncodePlotFilters('', plot.filterIn, plot.filterNotIn).map(([, v]) => v),
+    [GET_PARAMS.metricFilter]: metricFilterEncode('', plot.filterIn, plot.filterNotIn).map(([, v]) => v),
     [GET_PARAMS.metricGroupBy]: plot.groupBy,
     [GET_PARAMS.metricTimeShifts]: params.timeShifts.map((t) => t.toString()),
     [GET_PARAMS.excessPoints]: '1',

statshouse-ui/src/store2/plotEventsDataStore/plotEventsDataStore.ts

@@ -9,7 +9,7 @@ import {
   type QueryParams,
   readTimeRange,
   TimeRange,
-  urlEncodePlotFilters,
+  metricFilterEncode,
 } from 'url2';
 import { querySeriesMetaTag } from 'view/api';
 import { replaceVariable } from '../helpers/replaceVariable';
@@ -228,7 +228,7 @@ export function getLoadTableUrlParams(
     [GET_PARAMS.fromTime]: params.timeRange.from.toString(),
     [GET_PARAMS.width]: width,
     [GET_PARAMS.version]: plot.backendVersion,
-    [GET_PARAMS.metricFilter]: urlEncodePlotFilters('', plot.filterIn, plot.filterNotIn).map(([, v]) => v),
+    [GET_PARAMS.metricFilter]: metricFilterEncode('', plot.filterIn, plot.filterNotIn).map(([, v]) => v),
     [GET_PARAMS.metricGroupBy]: uniqueArray([...plot.groupBy.map(freeKeyPrefix), ...plot.eventsBy]),
     // [GET_PARAMS.metricAgg]: plot.customAgg.toString(),
     // [GET_PARAMS.metricTimeShifts]: params.timeShifts.map((t) => t.toString()),

statshouse-ui/src/store2/urlStore/updateParamsPlotStruct.ts

@@ -1,6 +1,6 @@
 import { produce } from 'immer';
 import type { ProduceUpdate } from '../helpers';
-import { getNewPlot, GroupInfo, GroupKey, PlotKey, PlotParams, QueryParams, VariableKey, VariableParams } from 'url2';
+import { getNewMetric, GroupInfo, GroupKey, PlotKey, PlotParams, QueryParams, VariableKey, VariableParams } from 'url2';
 import type { StatsHouseStore } from '../statsHouseStore';
 import type { TagKey } from 'api/enum';
 import { isNotNil, toNumberM } from 'common/helpers';
@@ -48,7 +48,7 @@ export function getPlotStruct(params: QueryParams): PlotStruct {
           mapPlotIndex[plotKey] = plotIndex;
           mapPlotToGroup[plotKey] = groupKey;
           return {
-            plotInfo: clonePlot(params.plots[plotKey] ?? { ...getNewPlot(), id: plotKey }),
+            plotInfo: clonePlot(params.plots[plotKey] ?? { ...getNewMetric(), id: plotKey }),
             variableLinks: variableLinks[plotKey]?.map(({ variableKey, tag }) => ({ variableKey, tag })) ?? [],
           };
         }),

statshouse-ui/src/url2/getDefault.ts

@@ -1,7 +1,8 @@
 import type { GroupInfo, PlotParams, QueryParams, VariableParams, VariableParamsSource } from './queryParams';
-import { METRIC_VALUE_BACKEND_VERSION, PLOT_TYPE, QUERY_WHAT, TAG_KEY, TIME_RANGE_KEYS_TO } from 'api/enum';
+import { TAG_KEY, TIME_RANGE_KEYS_TO } from 'api/enum';
 import { deepClone } from 'common/helpers';
 import { globalSettings } from 'common/settings';
+import { getNewMetric } from './widgetsParams/metric';
 
 export function getDefaultParams(): QueryParams {
   return {
@@ -30,39 +31,8 @@ export function getDefaultParams(): QueryParams {
   };
 }
 
-export function getNewPlot(): PlotParams {
-  return {
-    id: '',
-    metricName: '',
-    customName: '',
-    customDescription: '',
-    promQL: '',
-    metricUnit: undefined,
-    what: [QUERY_WHAT.countNorm],
-    customAgg: 0,
-    groupBy: [],
-    filterIn: {},
-    filterNotIn: {},
-    numSeries: 5,
-    backendVersion: METRIC_VALUE_BACKEND_VERSION.v2,
-    yLock: {
-      min: 0,
-      max: 0,
-    },
-    maxHost: false,
-    type: PLOT_TYPE.Metric,
-    events: [],
-    eventsBy: [],
-    eventsHide: [],
-    totalLine: false,
-    filledGraph: true,
-    timeShifts: [],
-    prometheusCompat: false,
-  };
-}
-
 export function getHomePlot(): PlotParams {
-  const plot = getNewPlot();
+  const plot = getNewMetric();
   plot.metricName = globalSettings.default_metric;
   plot.what = globalSettings.default_metric_what.slice();
   plot.groupBy = globalSettings.default_metric_group_by.slice();

statshouse-ui/src/url2/index.ts

@@ -5,3 +5,4 @@ export * from './urlDecode';
 export * from './urlHelpers';
 export * from './timeRangeHelpers';
 export * from './getDefault';
+export * from './widgetsParams';

statshouse-ui/src/url2/url.test.ts

@@ -2,19 +2,20 @@ import 'testMock/matchMedia.mock';
 import { type QueryParams } from './queryParams';
 import { urlEncode } from './urlEncode';
 import { urlDecode } from './urlDecode';
-import { getDefaultParams, getNewGroup, getNewPlot, getNewVariable } from './getDefault';
+import { getDefaultParams, getNewGroup, getNewVariable } from './getDefault';
 import { arrToObj, toTreeObj } from './index';
+import { getNewMetric } from './widgetsParams/metric';
 
 jest.useFakeTimers().setSystemTime(new Date('2020-01-01 00:00:00'));
 
 const params: QueryParams = {
   ...getDefaultParams(),
   timeRange: { absolute: true, from: 0, now: 1577826000, to: 1577826000, urlTo: 1577826000 },
   plots: {
-    '0': { ...getNewPlot(), id: '0' },
-    '1': { ...getNewPlot(), id: '1' },
-    '2': { ...getNewPlot(), id: '2' },
-    '3': { ...getNewPlot(), id: '3' },
+    '0': { ...getNewMetric(), id: '0' },
+    '1': { ...getNewMetric(), id: '1' },
+    '2': { ...getNewMetric(), id: '2' },
+    '3': { ...getNewMetric(), id: '3' },
   },
   orderPlot: ['1', '0', '2', '3'],
   groups: {
@@ -36,9 +37,9 @@ const params2: QueryParams = {
   ...getDefaultParams(),
   timeRange: { absolute: true, from: 0, now: 1577826000, to: 1577826000, urlTo: 1577826000 },
   plots: {
-    '1': { ...getNewPlot(), id: '1' },
-    '2': { ...getNewPlot(), id: '2' },
-    '3': { ...getNewPlot(), id: '3' },
+    '1': { ...getNewMetric(), id: '1' },
+    '2': { ...getNewMetric(), id: '2' },
+    '3': { ...getNewMetric(), id: '3' },
   },
   orderPlot: ['1', '2', '3'],
   groups: {