From b971ac16d66673ad2187cc0e63641a76598aa404 Mon Sep 17 00:00:00 2001 From: Jarod Watkins Date: Thu, 29 Oct 2020 14:28:26 -0400 Subject: [PATCH 1/4] UI: Add toggle to enable/disable metric autocomplete This change adds a toggle to enable or disable the metric autocomplete functionality. By default it is enabled. Signed-off-by: Jarod Watkins --- .../src/pages/graph/ExpressionInput.test.tsx | 8 ++++++++ .../react-app/src/pages/graph/ExpressionInput.tsx | 3 ++- pkg/ui/react-app/src/pages/graph/Panel.test.tsx | 1 + pkg/ui/react-app/src/pages/graph/Panel.tsx | 2 ++ pkg/ui/react-app/src/pages/graph/PanelList.tsx | 13 +++++++++++++ 5 files changed, 26 insertions(+), 1 deletion(-) diff --git a/pkg/ui/react-app/src/pages/graph/ExpressionInput.test.tsx b/pkg/ui/react-app/src/pages/graph/ExpressionInput.test.tsx index 4b058416e2..d396d25964 100644 --- a/pkg/ui/react-app/src/pages/graph/ExpressionInput.test.tsx +++ b/pkg/ui/react-app/src/pages/graph/ExpressionInput.test.tsx @@ -30,6 +30,7 @@ describe('ExpressionInput', () => { // Do nothing. }, loading: false, + enable: true, }; let expressionInput: ReactWrapper; @@ -174,6 +175,13 @@ describe('ExpressionInput', () => { instance.createAutocompleteSection({ closeMenu: spyCloseMenu }); setTimeout(() => expect(spyCloseMenu).toHaveBeenCalled()); }); + it('should not render list if enable is false', () => { + const input = mount(); + const instance: any = input.instance(); + const spyCloseMenu = jest.fn(); + instance.createAutocompleteSection({ closeMenu: spyCloseMenu }); + setTimeout(() => expect(spyCloseMenu).toHaveBeenCalled()); + }); it('should render autosuggest-dropdown', () => { const input = mount(); const instance: any = input.instance(); diff --git a/pkg/ui/react-app/src/pages/graph/ExpressionInput.tsx b/pkg/ui/react-app/src/pages/graph/ExpressionInput.tsx index 7d2622abb0..e24645f046 100644 --- a/pkg/ui/react-app/src/pages/graph/ExpressionInput.tsx +++ b/pkg/ui/react-app/src/pages/graph/ExpressionInput.tsx @@ -14,6 +14,7 @@ interface ExpressionInputProps { autocompleteSections: { [key: string]: string[] }; executeQuery: () => void; loading: boolean; + enable: boolean; } interface ExpressionInputState { @@ -76,7 +77,7 @@ class ExpressionInput extends Component { const matches = this.getSearchMatches(inputValue!, items); return !matches.length diff --git a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx index 7fa772ea38..46c0138854 100644 --- a/pkg/ui/react-app/src/pages/graph/Panel.test.tsx +++ b/pkg/ui/react-app/src/pages/graph/Panel.test.tsx @@ -39,6 +39,7 @@ const defaultProps = { // Do nothing. }, stores: [], + enableMetricAutocomplete: true, }; describe('Panel', () => { diff --git a/pkg/ui/react-app/src/pages/graph/Panel.tsx b/pkg/ui/react-app/src/pages/graph/Panel.tsx index 54875ce7e2..747a3ad310 100644 --- a/pkg/ui/react-app/src/pages/graph/Panel.tsx +++ b/pkg/ui/react-app/src/pages/graph/Panel.tsx @@ -26,6 +26,7 @@ interface PanelProps { removePanel: () => void; onExecuteQuery: (query: string) => void; stores: Store[]; + enableMetricAutocomplete: boolean; } interface PanelState { @@ -283,6 +284,7 @@ class Panel extends Component { onExpressionChange={this.handleExpressionChange} executeQuery={this.executeQuery} loading={this.state.loading} + enable={this.props.enableMetricAutocomplete} autocompleteSections={{ 'Query History': pastQueries, 'Metric Names': metricNames, diff --git a/pkg/ui/react-app/src/pages/graph/PanelList.tsx b/pkg/ui/react-app/src/pages/graph/PanelList.tsx index bec45a9a6b..8904f8be8d 100644 --- a/pkg/ui/react-app/src/pages/graph/PanelList.tsx +++ b/pkg/ui/react-app/src/pages/graph/PanelList.tsx @@ -25,6 +25,7 @@ interface PanelListProps extends PathPrefixProps, RouteComponentProps { useLocalTime: boolean; queryHistoryEnabled: boolean; stores: StoreListProps; + enableMetricAutocomplete: boolean; } export const PanelListContent: FC = ({ @@ -33,6 +34,7 @@ export const PanelListContent: FC = ({ pathPrefix, queryHistoryEnabled, stores = {}, + enableMetricAutocomplete, ...rest }) => { const [panels, setPanels] = useState(rest.panels); @@ -114,6 +116,7 @@ export const PanelListContent: FC = ({ pastQueries={queryHistoryEnabled ? historyItems : []} pathPrefix={pathPrefix} stores={storeData} + enableMetricAutocomplete={enableMetricAutocomplete} /> ))}