add prometheus icon with state color SH-215

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

@@ -11,8 +11,9 @@ 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 { type PlotKey } from 'url2';
+import { getNewPlot, type PlotKey } from 'url2';
 import { useStatsHouseShallow } from 'store2';
+import { PrometheusSwitch } from './PrometheusSwitch';
 
 const FallbackEditor = (props: { className?: string; value?: string; onChange?: (value: string) => void }) => (
   <div className="input-group">
@@ -30,23 +31,31 @@ export type PlotControlPromQLEditorProps = {
   className?: string;
   plotKey: PlotKey;
 };
+
+const { prometheusCompat: defaultPrometheusCompat } = getNewPlot();
+
 export function _PlotControlPromQLEditor({ className, plotKey }: PlotControlPromQLEditorProps) {
-  const { promQLParam, promqlExpand, togglePromqlExpand, setPlot } = useStatsHouseShallow(
+  const { promQLParam, promqlExpand, togglePromqlExpand, setPlot, prometheusCompat } = useStatsHouseShallow(
     ({ params: { plots }, plotsData, togglePromqlExpand, setPlot }) => ({
       promQLParam: plots[plotKey]?.promQL ?? '',
       promqlExpand: plotsData[plotKey]?.promqlExpand ?? false,
+      prometheusCompat: plots[plotKey]?.prometheusCompat ?? defaultPrometheusCompat,
       togglePromqlExpand,
       setPlot,
     })
   );
+
   const [promQL, setPromQL] = useState(promQLParam);
   const promQlRef = useStateToRef(promQL);
+
   const resetPromQL = useCallback(() => {
     setPromQL(promQLParam);
   }, [promQLParam]);
+
   const onTogglePromqlExpand = useCallback(() => {
     togglePromqlExpand(plotKey);
   }, [plotKey, togglePromqlExpand]);
+
   const sendPromQL = useCallback(() => {
     setPlot(plotKey, (p) => {
       p.promQL = promQlRef.current;
@@ -57,6 +66,15 @@ export function _PlotControlPromQLEditor({ className, plotKey }: PlotControlProm
     setPromQL(promQLParam);
   }, [promQLParam]);
 
+  const setPrometheusCompat = useCallback(
+    (status: boolean) => {
+      setPlot(plotKey, (p) => {
+        p.prometheusCompat = status;
+      });
+    },
+    [plotKey, setPlot]
+  );
+
   return (
     <div className={cn('d-flex flex-column gap-2', className)}>
       <Suspense fallback={<FallbackEditor value={promQL} onChange={setPromQL} />}>
@@ -74,6 +92,7 @@ export function _PlotControlPromQLEditor({ className, plotKey }: PlotControlProm
           <SVGArrowCounterclockwise />
         </Button>
         <span className="flex-grow-1"></span>
+        <PrometheusSwitch prometheusCompat={prometheusCompat} setPrometheusCompat={setPrometheusCompat} />
         <Button type="button" className="btn btn-outline-primary" onClick={sendPromQL}>
           Run
         </Button>

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

@@ -18,18 +18,12 @@ export type PlotControlViewProps = {
   className?: string;
 };
 
-const {
-  filledGraph: defaultFilledGraph,
-  totalLine: defaultTotalLine,
-  prometheusCompat: defaultPrometheusCompat,
-} = getNewPlot();
+const { filledGraph: defaultFilledGraph, totalLine: defaultTotalLine } = getNewPlot();
 
 export function _PlotControlView({ plotKey, className }: PlotControlViewProps) {
-  const { filledGraph, totalLine, prometheusCompat, isPlotPromQL, setPlot } = useStatsHouseShallow((s) => ({
+  const { filledGraph, totalLine, setPlot } = useStatsHouseShallow((s) => ({
     filledGraph: s.params.plots[plotKey]?.filledGraph ?? defaultFilledGraph,
     totalLine: s.params.plots[plotKey]?.totalLine ?? defaultTotalLine,
-    prometheusCompat: s.params.plots[plotKey]?.prometheusCompat ?? defaultPrometheusCompat,
-    isPlotPromQL: isPromQL(s.params.plots[plotKey]),
     setPlot: s.setPlot,
   }));
   const [dropdown, setDropdown] = useState(false);
@@ -57,14 +51,7 @@ export function _PlotControlView({ plotKey, className }: PlotControlViewProps) {
     },
     [plotKey, setPlot]
   );
-  const setPrometheusCompat = useCallback(
-    (status: boolean) => {
-      setPlot(plotKey, (p) => {
-        p.prometheusCompat = status;
-      });
-    },
-    [plotKey, setPlot]
-  );
+
   return (
     <Tooltip
       as="button"
@@ -87,18 +74,6 @@ export function _PlotControlView({ plotKey, className }: PlotControlViewProps) {
               Filled graph
             </SwitchBox>
           </div>
-          {isPlotPromQL && (
-            <div>
-              <SwitchBox
-                className="text-nowrap my-1 mx-2 user-select-none"
-                checked={prometheusCompat}
-                onChange={setPrometheusCompat}
-                title="Prometeus cumulative counters mode"
-              >
-                Prometeus mode
-              </SwitchBox>
-            </div>
-          )}
         </div>
       }
       open={dropdown}

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

@@ -0,0 +1,31 @@
+// Copyright 2024 V Kontakte LLC
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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 React, { memo } from 'react';
+import { SwitchBox } from 'components/UI';
+import cn from 'classnames';
+
+import { ReactComponent as SVGPrometheus } from '../../../../assets/svg/Prometheus.svg';
+
+type IPrometheusSwitchProps = {
+  prometheusCompat: boolean;
+  setPrometheusCompat: (arg: boolean) => void;
+};
+
+function _PrometheusSwitch({ prometheusCompat, setPrometheusCompat }: IPrometheusSwitchProps) {
+  return (
+    <SwitchBox
+      className={cn(prometheusCompat ? 'text-primary' : 'text-body-tertiary', 'text-nowrap my-1 mx-2 user-select-none')}
+      checked={prometheusCompat}
+      onChange={setPrometheusCompat}
+      title="Prometheus cumulative counters mode"
+    >
+      <SVGPrometheus width={26} height={26} />
+    </SwitchBox>
+  );
+}
+
+export const PrometheusSwitch = memo(_PrometheusSwitch);

statshouse-ui/src/components2/Plot/PlotControl/PrometheusSwitch/index.ts

@@ -0,0 +1,7 @@
+// Copyright 2024 V Kontakte LLC
+//
+// This Source Code Form is subject to the terms of the Mozilla Public
+// 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/.
+
+export * from './PrometheusSwitch';