From 9591103bb958903de0ea3a2fdabcb61dfe07d56a Mon Sep 17 00:00:00 2001 From: Luis Filipe Pessoa Date: Tue, 20 Sep 2022 09:30:24 -0300 Subject: [PATCH] Allow copying label-value pair to buffer on click (#11229) * Allow copying label-value pair to buffer on click Kept similar DOM structure to keep test compatibility. Using `navigator.clipboard` API since it is used by the current standard browsers. React hot toast is used to notify that the text was successfully copied into clipboard. Signed-off-by: lpessoa * Using reactstrap for toast notification Using the bootstrap toast notification provided by reactstrap. Clipboard handling is managed using React.Context via a shared callback. Updated css according to CR suggestions. Signed-off-by: lpessoa * Changes from CR comments Cleaning up renderFormatted method. Renamed Clipboard to ToastContext. Updated tests. Signed-off-by: Luis Pessoa Signed-off-by: lpessoa Signed-off-by: Luis Pessoa --- web/ui/react-app/src/App.tsx | 16 +- .../react-app/src/contexts/ToastContext.tsx | 11 ++ .../react-app/src/pages/graph/PanelList.tsx | 149 ++++++++++-------- .../src/pages/graph/SeriesName.test.tsx | 34 ++-- .../react-app/src/pages/graph/SeriesName.tsx | 21 ++- web/ui/react-app/src/themes/_shared.scss | 8 + 6 files changed, 151 insertions(+), 88 deletions(-) create mode 100644 web/ui/react-app/src/contexts/ToastContext.tsx diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx index 7ba77d8f05..dcf5f98f17 100755 --- a/web/ui/react-app/src/App.tsx +++ b/web/ui/react-app/src/App.tsx @@ -1,25 +1,25 @@ -import React, { FC } from 'react'; -import Navigation from './Navbar'; +import { FC } from 'react'; import { Container } from 'reactstrap'; +import Navigation from './Navbar'; -import { BrowserRouter as Router, Redirect, Switch, Route } from 'react-router-dom'; +import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-dom'; +import { PathPrefixContext } from './contexts/PathPrefixContext'; +import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext'; +import { useLocalStorage } from './hooks/useLocalStorage'; +import useMedia from './hooks/useMedia'; import { AgentPage, AlertsPage, ConfigPage, FlagsPage, + PanelListPage, RulesPage, ServiceDiscoveryPage, StatusPage, TargetsPage, TSDBStatusPage, - PanelListPage, } from './pages'; -import { PathPrefixContext } from './contexts/PathPrefixContext'; -import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext'; import { Theme, themeLocalStorageKey } from './Theme'; -import { useLocalStorage } from './hooks/useLocalStorage'; -import useMedia from './hooks/useMedia'; interface AppProps { consolesLink: string | null; diff --git a/web/ui/react-app/src/contexts/ToastContext.tsx b/web/ui/react-app/src/contexts/ToastContext.tsx new file mode 100644 index 0000000000..b1750dbc7a --- /dev/null +++ b/web/ui/react-app/src/contexts/ToastContext.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const ToastContext = React.createContext((msg: string) => { + return; +}); + +function useToastContext() { + return React.useContext(ToastContext); +} + +export { useToastContext, ToastContext }; diff --git a/web/ui/react-app/src/pages/graph/PanelList.tsx b/web/ui/react-app/src/pages/graph/PanelList.tsx index e7fb7ceb07..bc5118d238 100644 --- a/web/ui/react-app/src/pages/graph/PanelList.tsx +++ b/web/ui/react-app/src/pages/graph/PanelList.tsx @@ -1,13 +1,14 @@ -import React, { FC, useState, useEffect } from 'react'; -import { Alert, Button } from 'reactstrap'; +import { FC, useEffect, useState } from 'react'; +import { Alert, Button, Toast, ToastBody } from 'reactstrap'; -import Panel, { PanelOptions, PanelDefaultOptions } from './Panel'; import Checkbox from '../../components/Checkbox'; -import { generateID, decodePanelOptionsFromQueryString, encodePanelOptionsToQueryString, callAll } from '../../utils'; +import { API_PATH } from '../../constants/constants'; +import { ToastContext } from '../../contexts/ToastContext'; +import { usePathPrefix } from '../../contexts/PathPrefixContext'; import { useFetch } from '../../hooks/useFetch'; import { useLocalStorage } from '../../hooks/useLocalStorage'; -import { usePathPrefix } from '../../contexts/PathPrefixContext'; -import { API_PATH } from '../../constants/constants'; +import { callAll, decodePanelOptionsFromQueryString, encodePanelOptionsToQueryString, generateID } from '../../utils'; +import Panel, { PanelDefaultOptions, PanelOptions } from './Panel'; export type PanelMeta = { key: string; options: PanelOptions; id: string }; @@ -125,6 +126,7 @@ const PanelList: FC = () => { const [enableAutocomplete, setEnableAutocomplete] = useLocalStorage('enable-metric-autocomplete', true); const [enableHighlighting, setEnableHighlighting] = useLocalStorage('enable-syntax-highlighting', true); const [enableLinter, setEnableLinter] = useLocalStorage('enable-linter', true); + const [clipboardMsg, setClipboardMsg] = useState(null); const pathPrefix = usePathPrefix(); const { response: metricsRes, error: metricsErr } = useFetch(`${pathPrefix}/${API_PATH}/label/__name__/values`); @@ -134,6 +136,13 @@ const PanelList: FC = () => { `${pathPrefix}/${API_PATH}/query?query=time()` ); + const onClipboardMsg = (msg: string) => { + setClipboardMsg(msg); + setTimeout(() => { + setClipboardMsg(null); + }, 1500); + }; + useEffect(() => { if (timeRes.data) { const serverTime = timeRes.data.result[0]; @@ -149,73 +158,81 @@ const PanelList: FC = () => { return ( <> -
-
- setUseLocalTime(target.checked)} - defaultChecked={useLocalTime} + +
+ - Use local time + Label matcher copied to clipboard + +
+ setUseLocalTime(target.checked)} + defaultChecked={useLocalTime} + > + Use local time + + setEnableQueryHistory(target.checked)} + defaultChecked={enableQueryHistory} + > + Enable query history + + setEnableAutocomplete(target.checked)} + defaultChecked={enableAutocomplete} + > + Enable autocomplete + +
+ setEnableHighlighting(target.checked)} + defaultChecked={enableHighlighting} + > + Enable highlighting setEnableQueryHistory(target.checked)} - defaultChecked={enableQueryHistory} + id="linter-checkbox" + onChange={({ target }) => setEnableLinter(target.checked)} + defaultChecked={enableLinter} > - Enable query history - - setEnableAutocomplete(target.checked)} - defaultChecked={enableAutocomplete} - > - Enable autocomplete + Enable linter
- setEnableHighlighting(target.checked)} - defaultChecked={enableHighlighting} - > - Enable highlighting - - setEnableLinter(target.checked)} - defaultChecked={enableLinter} - > - Enable linter - -
- {(delta > 30 || timeErr) && ( - - Warning: - {timeErr && `Unexpected response status when fetching server time: ${timeErr.message}`} - {delta >= 30 && - `Error fetching server time: Detected ${delta} seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.`} - - )} - {metricsErr && ( - - Warning: - Error fetching metrics list: Unexpected response status when fetching metric names: {metricsErr.message} - - )} - + {(delta > 30 || timeErr) && ( + + Warning: + {timeErr && `Unexpected response status when fetching server time: ${timeErr.message}`} + {delta >= 30 && + `Error fetching server time: Detected ${delta} seconds time difference between your browser and the server. Prometheus relies on accurate time and time drift might cause unexpected query results.`} + + )} + {metricsErr && ( + + Warning: + Error fetching metrics list: Unexpected response status when fetching metric names: {metricsErr.message} + + )} + + ); }; diff --git a/web/ui/react-app/src/pages/graph/SeriesName.test.tsx b/web/ui/react-app/src/pages/graph/SeriesName.test.tsx index f75cf9603d..d932fa7fd3 100755 --- a/web/ui/react-app/src/pages/graph/SeriesName.test.tsx +++ b/web/ui/react-app/src/pages/graph/SeriesName.test.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { shallow } from 'enzyme'; +import { shallow, ShallowWrapper } from 'enzyme'; import SeriesName from './SeriesName'; describe('SeriesName', () => { @@ -51,26 +51,36 @@ describe('SeriesName', () => { { name: 'label3', value: 'value_3', className: 'legend-label-name' }, { name: '}', className: 'legend-label-brace' }, ]; + + const testLabelContainerElement = (text:string, expectedText:string, container: ShallowWrapper) => { + expect(text).toEqual(expectedText); + expect(container.prop('className')).toEqual('legend-label-container'); + expect(container.childAt(0).prop('className')).toEqual('legend-label-name'); + expect(container.childAt(2).prop('className')).toEqual('legend-label-value'); + } + testCases.forEach((tc, i) => { const child = seriesName.childAt(i); + const firstChildElement = child.childAt(0); + const firstChildElementClass = firstChildElement.prop('className') const text = child .children() .map((ch) => ch.text()) .join(''); switch (child.children().length) { case 1: - expect(text).toEqual(tc.name); - expect(child.prop('className')).toEqual(tc.className); + switch(firstChildElementClass) { + case 'legend-label-container': + testLabelContainerElement(text, `${tc.name}="${tc.value}"`, firstChildElement) + break + default: + expect(text).toEqual(tc.name); + expect(child.prop('className')).toEqual(tc.className); + } break; - case 3: - expect(text).toEqual(`${tc.name}="${tc.value}"`); - expect(child.childAt(0).prop('className')).toEqual('legend-label-name'); - expect(child.childAt(2).prop('className')).toEqual('legend-label-value'); - break; - case 4: - expect(text).toEqual(`, ${tc.name}="${tc.value}"`); - expect(child.childAt(1).prop('className')).toEqual('legend-label-name'); - expect(child.childAt(3).prop('className')).toEqual('legend-label-value'); + case 2: + const container = child.childAt(1); + testLabelContainerElement(text, `, ${tc.name}="${tc.value}"`, container) break; default: fail('incorrect number of children: ' + child.children().length); diff --git a/web/ui/react-app/src/pages/graph/SeriesName.tsx b/web/ui/react-app/src/pages/graph/SeriesName.tsx index d76a780bac..9639653b36 100644 --- a/web/ui/react-app/src/pages/graph/SeriesName.tsx +++ b/web/ui/react-app/src/pages/graph/SeriesName.tsx @@ -1,4 +1,5 @@ -import React, { FC } from 'react'; +import React, { FC, useContext } from 'react'; +import { useToastContext } from '../../contexts/ToastContext'; import { metricToSeriesName } from '../../utils'; interface SeriesNameProps { @@ -7,6 +8,20 @@ interface SeriesNameProps { } const SeriesName: FC = ({ labels, format }) => { + const setClipboardMsg = useToastContext(); + + const toClipboard = (e: React.MouseEvent) => { + let copyText = e.currentTarget.innerText || ''; + navigator.clipboard + .writeText(copyText.trim()) + .then(() => { + setClipboardMsg(copyText); + }) + .catch((reason) => { + console.error(`unable to copy text: ${reason}`); + }); + }; + const renderFormatted = (): React.ReactElement => { const labelNodes: React.ReactElement[] = []; let first = true; @@ -18,7 +33,9 @@ const SeriesName: FC = ({ labels, format }) => { labelNodes.push( {!first && ', '} - {label}="{labels[label]}" + + {label}="{labels[label]}" + ); diff --git a/web/ui/react-app/src/themes/_shared.scss b/web/ui/react-app/src/themes/_shared.scss index a03bf1cbd3..20658a8afd 100644 --- a/web/ui/react-app/src/themes/_shared.scss +++ b/web/ui/react-app/src/themes/_shared.scss @@ -275,6 +275,14 @@ input[type='checkbox']:checked + label { margin-right: 1px; } +.legend-label-container:hover { + background-color: #add6ff; + border-radius: 3px; + padding-bottom: 1px; + color: #495057; + cursor: pointer; +} + .legend-label-name { font-weight: bold; }