From 1e373e199499fdca65872700fae0c3bdcb8ca6cd Mon Sep 17 00:00:00 2001 From: "v.trushin" Date: Thu, 31 Oct 2024 13:45:18 +0300 Subject: [PATCH] add prometheus icon with state color SH-215 --- statshouse-ui/src/assets/svg/Prometheus.svg | 7 +++++ .../PlotControl/PlotControlPromQLEditor.tsx | 23 ++++++++++++-- .../Plot/PlotControl/PlotControlView.tsx | 31 ++----------------- .../PrometheusSwitch/PrometheusSwitch.tsx | 31 +++++++++++++++++++ .../PlotControl/PrometheusSwitch/index.ts | 7 +++++ 5 files changed, 69 insertions(+), 30 deletions(-) create mode 100644 statshouse-ui/src/assets/svg/Prometheus.svg create mode 100644 statshouse-ui/src/components2/Plot/PlotControl/PrometheusSwitch/PrometheusSwitch.tsx create mode 100644 statshouse-ui/src/components2/Plot/PlotControl/PrometheusSwitch/index.ts diff --git a/statshouse-ui/src/assets/svg/Prometheus.svg b/statshouse-ui/src/assets/svg/Prometheus.svg new file mode 100644 index 000000000..133423ee1 --- /dev/null +++ b/statshouse-ui/src/assets/svg/Prometheus.svg @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/statshouse-ui/src/components2/Plot/PlotControl/PlotControlPromQLEditor.tsx b/statshouse-ui/src/components2/Plot/PlotControl/PlotControlPromQLEditor.tsx index fce68bf3d..8ca3502d4 100644 --- a/statshouse-ui/src/components2/Plot/PlotControl/PlotControlPromQLEditor.tsx +++ b/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 }) => (
@@ -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 (
}> @@ -74,6 +92,7 @@ export function _PlotControlPromQLEditor({ className, plotKey }: PlotControlProm + diff --git a/statshouse-ui/src/components2/Plot/PlotControl/PlotControlView.tsx b/statshouse-ui/src/components2/Plot/PlotControl/PlotControlView.tsx index 4514c454e..e9319cc9a 100644 --- a/statshouse-ui/src/components2/Plot/PlotControl/PlotControlView.tsx +++ b/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 (
- {isPlotPromQL && ( -
- - Prometeus mode - -
- )}
} open={dropdown} diff --git a/statshouse-ui/src/components2/Plot/PlotControl/PrometheusSwitch/PrometheusSwitch.tsx b/statshouse-ui/src/components2/Plot/PlotControl/PrometheusSwitch/PrometheusSwitch.tsx new file mode 100644 index 000000000..aadb2a79c --- /dev/null +++ b/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 ( + + + + ); +} + +export const PrometheusSwitch = memo(_PrometheusSwitch); diff --git a/statshouse-ui/src/components2/Plot/PlotControl/PrometheusSwitch/index.ts b/statshouse-ui/src/components2/Plot/PlotControl/PrometheusSwitch/index.ts new file mode 100644 index 000000000..fe69ab7a2 --- /dev/null +++ b/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';