StatsHouse UI: update prom ql control and total name

VKCOM · Mar 4, 2024 · b191193 · b191193
1 parent 2d9c738
commit b191193
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 5 deletions.
diff --git a/statshouse-ui/src/components/Plot/PlotControlView.tsx b/statshouse-ui/src/components/Plot/PlotControlView.tsx
@@ -37,7 +37,7 @@ export function PlotControlView({
         <div>
           <div>
             <SwitchBox className="text-nowrap my-1 mx-2 user-select-none" checked={totalLine} onChange={setTotalLine}>
-              Show total line
+              Show Total
             </SwitchBox>
           </div>
           <div>

diff --git a/statshouse-ui/src/components/Plot/PlotControlsPromQL.tsx b/statshouse-ui/src/components/Plot/PlotControlsPromQL.tsx
@@ -9,8 +9,20 @@ import { produce } from 'immer';
 import cn from 'classnames';
 import * as utils from '../../view/utils';
 import { getTimeShifts, timeShiftAbbrevExpand } from '../../view/utils';
-import { Button, PlotControlFrom, PlotControlTimeShifts, PlotControlTo, SwitchBox } from '../index';
-import { selectorParamsTimeShifts, selectorPlotsDataByIndex, selectorTimeRange, useStore } from '../../store';
+import { Button, PlotControlFrom, PlotControlTimeShifts, PlotControlTo, SwitchBox, VariableControl } from '../index';
+import {
+  selectorParamsTimeShifts,
+  selectorPlotsDataByIndex,
+  selectorTimeRange,
+  setGroupByVariable,
+  setNegativeVariable,
+  setUpdatedVariable,
+  setValuesVariable,
+  Store,
+  useStore,
+  useVariableListStore,
+  VariableListStore,
+} from '../../store';
 import { metricKindToWhat } from '../../view/api';
 import { ReactComponent as SVGPcDisplay } from 'bootstrap-icons/icons/pc-display.svg';
 import { ReactComponent as SVGFilter } from 'bootstrap-icons/icons/filter.svg';
@@ -31,6 +43,8 @@ const METRIC_TYPE_DESCRIPTION_SELECTOR = {
   ...METRIC_TYPE_DESCRIPTION,
 };
 
+const selectorVariables = ({ params: { variables } }: Store) => variables;
+
 export const PlotControlsPromQL = memo(function PlotControlsPromQL_(props: {
   indexPlot: number;
   setBaseRange: (r: utils.timeRangeAbbrev) => void;
@@ -52,6 +66,13 @@ export const PlotControlsPromQL = memo(function PlotControlsPromQL_(props: {
 
   const timeRange = useStore(selectorTimeRange);
 
+  const allVariables = useStore(selectorVariables);
+  const variables = useMemo(
+    () => allVariables.filter((v) => sel.promQL.indexOf(v.name) > -1),
+    [allVariables, sel.promQL]
+  );
+  const variableItems = useVariableListStore((s: VariableListStore) => s.variables);
+
   // keep meta up-to-date when sel.metricName changes (e.g. because of navigation)
   useEffect(() => {
     const whats = metricKindToWhat(meta?.kind);
@@ -214,7 +235,29 @@ export const PlotControlsPromQL = memo(function PlotControlsPromQL_(props: {
           </div>
           <PlotControlTimeShifts className="w-100 mt-2" />
         </div>
-
+        <div>
+          {variables.map((variable) => (
+            <VariableControl<string>
+              key={variable.name}
+              target={variable.name}
+              placeholder={variable.description || variable.name}
+              list={variableItems[variable.name].list}
+              loaded={variableItems[variable.name].loaded}
+              tagMeta={variableItems[variable.name].tagMeta}
+              more={variableItems[variable.name].more}
+              customValue={variableItems[variable.name].more || !variableItems[variable.name].list.length}
+              negative={variable.args.negative}
+              setNegative={setNegativeVariable}
+              groupBy={variable.args.groupBy}
+              setGroupBy={setGroupByVariable}
+              className={''}
+              values={!variable.args.negative ? variable.values : undefined}
+              notValues={variable.args.negative ? variable.values : undefined}
+              onChange={setValuesVariable}
+              setOpen={setUpdatedVariable}
+            />
+          ))}
+        </div>
         <div className="row mb-3 align-items-baseline">
           <div className="input-group">
             <textarea

diff --git a/statshouse-ui/src/store/statshouse.ts b/statshouse-ui/src/store/statshouse.ts
@@ -883,7 +883,7 @@ export const useStore = createStoreWithEqualityFn<Store>((setState, getState, st
             let series_meta = [...resp?.series.series_meta] ?? [];
             let series_data = ([...resp.series.series_data] as (number | null)[][]) ?? [];
             const totalLineId = lastPlotParams.totalLine ? series_meta.length : null;
-            const totalLineLabel = 'Total line';
+            const totalLineLabel = 'Total';
             if (lastPlotParams.totalLine) {
               const totalLineData = resp.series.time.map((time, idx) =>
                 series_data.reduce((res, d) => res + (d[idx] ?? 0), 0)