Merge pull request #4426 from invincibleJai/fix-promql-type

Bug 1806114: fixes issue with editing customQueries in promQL
openshift · Feb 24, 2020 · 537ce1e · 537ce1e
2 parents 82e2e34 + 3bd444f
commit 537ce1e
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 57 deletions.
diff --git a/frontend/packages/dev-console/src/components/monitoring/metrics/MetricsQueryInput.tsx b/frontend/packages/dev-console/src/components/monitoring/metrics/MetricsQueryInput.tsx
@@ -1,5 +1,8 @@
 import * as React from 'react';
-import { connect } from 'react-redux';
+// FIXME upgrading redux types is causing many errors at this time
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import { useSelector, useDispatch } from 'react-redux';
 import * as fuzzy from 'fuzzysearch';
 import { RootState } from '@console/internal/redux';
 import { Button } from '@patternfly/react-core';
@@ -14,27 +17,7 @@ import './MetricsQueryInput.scss';
 const ADD_NEW_QUERY = '#ADD_NEW_QUERY#';
 const CUSTOM_QUERY = 'Custom Query';
 
-type StateProps = {
-  namespace: string;
-  text: string;
-  query: string;
-};
-
-type MetricsQueryInputProps = {
-  patchQuery: (patch: QueryObj) => void;
-  runQueries: () => void;
-  namespace: string;
-  text?: string;
-  query?: string;
-};
-
-export const MetricsQueryInput: React.FC<MetricsQueryInputProps> = ({
-  patchQuery,
-  runQueries,
-  namespace,
-  text,
-  query,
-}) => {
+const MetricsQueryInput: React.FC = () => {
   const items = metricsQuery;
   const autocompleteFilter = (strText, item) => fuzzy(strText, item);
   const defaultActionItem = [
@@ -44,30 +27,38 @@ export const MetricsQueryInput: React.FC<MetricsQueryInputProps> = ({
     },
   ];
 
+  const namespace = useSelector((state: RootState) => getActiveNamespace(state));
+  const queries = useSelector((state: RootState) =>
+    state.UI.getIn(['queryBrowser', 'queries', 0]).toJS(),
+  );
+  const dispatch = useDispatch();
+
   const [title, setTitle] = React.useState('Select Query');
   const [metric, setMetric] = React.useState('');
   const [showPromQl, setShowPromQl] = React.useState(false);
   const [isPromQlDisabled, setIsPromQlDisabled] = React.useState(false);
   React.useEffect(() => {
-    if (metric && metric !== ADD_NEW_QUERY) {
+    const runQueries = () => dispatch(queryBrowserRunQueries());
+    const patchQuery = (v: QueryObj) => dispatch(queryBrowserPatchQuery(0, v));
+    if (metric) {
       const queryMetrics = getTopMetricsQueries(namespace)[metric];
-      patchQuery({ text: queryMetrics });
+      patchQuery({ text: queryMetrics || '' });
       runQueries();
     }
-  }, [metric, namespace, patchQuery, runQueries]);
+  }, [dispatch, metric, namespace]);
 
   React.useEffect(() => {
+    const query = queries?.query;
+    const text = queries?.text;
     if (text && text.localeCompare(query) !== 0) {
       setTitle(CUSTOM_QUERY);
       setIsPromQlDisabled(true);
     }
-  }, [text, query]);
+  }, [queries]);
 
   const onChange = (selectedValue: string) => {
     setMetric(selectedValue);
     if (selectedValue && selectedValue === ADD_NEW_QUERY) {
-      patchQuery({ text: '' });
-      runQueries();
       setTitle(CUSTOM_QUERY);
       setIsPromQlDisabled(true);
       setShowPromQl(true);
@@ -113,15 +104,4 @@ export const MetricsQueryInput: React.FC<MetricsQueryInputProps> = ({
   );
 };
 
-const mapStateToProps = (state: RootState): StateProps => ({
-  namespace: getActiveNamespace(state),
-  text: state.UI.getIn(['queryBrowser', 'queries', 0, 'text']),
-  query: state.UI.getIn(['queryBrowser', 'queries', 0, 'query']),
-});
-
-const mapDispatchToProps = (dispatch) => ({
-  runQueries: () => dispatch(queryBrowserRunQueries()),
-  patchQuery: (v: QueryObj) => dispatch(queryBrowserPatchQuery(0, v)),
-});
-
-export default connect(mapStateToProps, mapDispatchToProps)(MetricsQueryInput);
+export default MetricsQueryInput;
diff --git a/frontend/packages/dev-console/src/components/monitoring/metrics/MonitoringMetrics.tsx b/frontend/packages/dev-console/src/components/monitoring/metrics/MonitoringMetrics.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
-import ConnectedMetricsQueryInput from './MetricsQueryInput';
+import MetricsQueryInput from './MetricsQueryInput';
 import { connect } from 'react-redux';
 import { getURLSearchParams } from '@console/internal/components/utils';
 import { queryBrowserRunQueries, queryBrowserPatchQuery } from '@console/internal/actions/ui';
@@ -26,7 +26,7 @@ export const MonitoringMetrics: React.FC<MonitoringMetricsProps> = ({ patchQuery
         <title>Metrics</title>
       </Helmet>
       <div className="co-m-pane__body">
-        <ConnectedMetricsQueryInput />
+        <MetricsQueryInput />
         <div className="row">
           <div className="col-xs-12">
             <ConnectedMetricsChart />

diff --git a/...ckages/dev-console/src/components/monitoring/metrics/__tests__/MetricsQueryInput.spec.tsx b/...ckages/dev-console/src/components/monitoring/metrics/__tests__/MetricsQueryInput.spec.tsx
@@ -1,42 +1,44 @@
 import * as React from 'react';
+import * as redux from 'react-redux';
 import { shallow } from 'enzyme';
 import { Button } from '@patternfly/react-core';
 import { Dropdown } from '@console/internal/components/utils';
 import { QueryInput } from '@console/internal/components/monitoring/metrics';
-import { MetricsQueryInput } from '../MetricsQueryInput';
+import MetricsQueryInput from '../MetricsQueryInput';
 
 describe('Metrics Query Input', () => {
-  let props: React.ComponentProps<typeof MetricsQueryInput>;
-  beforeEach(() => {
-    props = {
-      namespace: 'my-app',
-      patchQuery: jest.fn(),
-      runQueries: jest.fn(),
-    };
-  });
-
+  // FIXME upgrading redux types is causing many errors at this time
+  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+  // @ts-ignore
+  const spySelector = jest.spyOn(redux, 'useSelector');
+  spySelector.mockReturnValue({ queryBrowser: { queries: [] } });
+  // FIXME upgrading redux types is causing many errors at this time
+  // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+  // @ts-ignore
+  const spyDispatch = jest.spyOn(redux, 'useDispatch');
+  spyDispatch.mockReturnValue(() => {});
   it('should render Dropdown with default title', () => {
-    const wrapper = shallow(<MetricsQueryInput {...props} />);
+    const wrapper = shallow(<MetricsQueryInput />);
     expect(wrapper.find(Dropdown)).toHaveLength(1);
     expect(wrapper.find(Dropdown).props().title).toEqual('Select Query');
   });
 
   it('should render Button with text "Show PromQL" and not render QueryInput', () => {
-    const wrapper = shallow(<MetricsQueryInput {...props} />);
+    const wrapper = shallow(<MetricsQueryInput />);
     expect(wrapper.find(Button)).toHaveLength(1);
     expect(wrapper.find(Button).props().children).toEqual('Show PromQL');
     expect(wrapper.find(QueryInput).exists()).toBe(false);
   });
 
   it('should update Button with text "Hide PromQL" on click and render QueryInput', () => {
-    const wrapper = shallow(<MetricsQueryInput {...props} />);
+    const wrapper = shallow(<MetricsQueryInput />);
     wrapper.find(Button).simulate('click');
     expect(wrapper.find(Button).props().children).toEqual('Hide PromQL');
     expect(wrapper.find(QueryInput)).toHaveLength(1);
   });
 
   it('Custom Querey selection should update Dropdown title, show QueryInput and Button in disabled state', () => {
-    const wrapper = shallow(<MetricsQueryInput {...props} />);
+    const wrapper = shallow(<MetricsQueryInput />);
     wrapper
       .find(Dropdown)
       .props()
@@ -48,7 +50,7 @@ describe('Metrics Query Input', () => {
   });
 
   it('Metric selection should update Dropdown title and show Button in enabled state', () => {
-    const wrapper = shallow(<MetricsQueryInput {...props} />);
+    const wrapper = shallow(<MetricsQueryInput />);
     wrapper
       .find(Dropdown)
       .props()