Merge pull request #3678 from kyoto/monitoring-simplify-query-browser…

…-links Query Browser: Simplify Query Browser link URL logic
openshift · Dec 6, 2019 · b71cae9 · b71cae9
2 parents ee74e32 + 3b29b72
commit b71cae9
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 31 deletions.
diff --git a/frontend/__tests__/components/graphs/prometheus-graph.spec.tsx b/frontend/__tests__/components/graphs/prometheus-graph.spec.tsx
@@ -37,7 +37,6 @@ describe('<PrometheusGraph />', () => {
 describe('<PrometheusGraphLink />', () => {
   it('should only render with a link if query is set', () => {
     window.SERVER_FLAGS.prometheusBaseURL = 'prometheusBaseURL';
-    store.dispatch(UIActions.setActivePerspective('admin'));
 
     // Need full mount with redux store since this is a redux-connected component
     const getWrapper = (query: string) => {
@@ -57,13 +56,29 @@ describe('<PrometheusGraphLink />', () => {
     let wrapper;
 
     store.dispatch(setFlag(FLAGS.CAN_GET_NS, false));
+    store.dispatch(UIActions.setActivePerspective('dev'));
+    wrapper = getWrapper('');
+    expect(wrapper.find(Link).exists()).toBe(false);
+    wrapper = getWrapper('test');
+    expect(wrapper.find(Link).exists()).toBe(true);
+    expect(wrapper.find(Link).props().to).toEqual('/metrics?query0=test');
+
+    store.dispatch(UIActions.setActivePerspective('admin'));
     wrapper = getWrapper('');
     expect(wrapper.find(Link).exists()).toBe(false);
     wrapper = getWrapper('test');
     expect(wrapper.find(Link).exists()).toBe(true);
-    expect(wrapper.find(Link).props().to).toEqual('/metrics/ns/default?query0=test');
+    expect(wrapper.find(Link).props().to).toEqual('/metrics?query0=test');
 
     store.dispatch(setFlag(FLAGS.CAN_GET_NS, true));
+    store.dispatch(UIActions.setActivePerspective('dev'));
+    wrapper = getWrapper('');
+    expect(wrapper.find(Link).exists()).toBe(false);
+    wrapper = getWrapper('test');
+    expect(wrapper.find(Link).exists()).toBe(true);
+    expect(wrapper.find(Link).props().to).toEqual('/metrics?query0=test');
+
+    store.dispatch(UIActions.setActivePerspective('admin'));
     wrapper = getWrapper('');
     expect(wrapper.find(Link).exists()).toBe(false);
     wrapper = getWrapper('test');

diff --git a/frontend/public/components/graphs/prometheus-graph.tsx b/frontend/public/components/graphs/prometheus-graph.tsx
@@ -1,14 +1,13 @@
 import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
 import * as React from 'react';
-import { connect, Dispatch } from 'react-redux';
+import { connect } from 'react-redux';
 import { Link } from 'react-router-dom';
 
-import * as UIActions from '../../actions/ui';
-import { FLAGS } from '../../const';
+import { FLAGS } from '@console/internal/const';
 import { featureReducerName } from '../../reducers/features';
 import { MonitoringRoutes } from '../../reducers/monitoring';
-import { getActivePerspective, getActiveNamespace } from '../../reducers/ui';
+import { getActivePerspective } from '../../reducers/ui';
 import { RootState } from '../../redux';
 
 export const getPrometheusExpressionBrowserURL = (urls, queries): string => {
@@ -26,30 +25,17 @@ export const getPrometheusExpressionBrowserURL = (urls, queries): string => {
 };
 
 const mapStateToProps = (state: RootState) => ({
-  activePerspective: getActivePerspective(state),
   canAccessMonitoring:
     !!state[featureReducerName].get(FLAGS.CAN_GET_NS) && !!window.SERVER_FLAGS.prometheusBaseURL,
-  namespace: getActiveNamespace(state),
-});
-
-const mapDispatchToProps = (dispatch: Dispatch) => ({
-  setActivePerspective: (id: string) => dispatch(UIActions.setActivePerspective(id)),
+  perspective: getActivePerspective(state),
 });
 
 export const PrometheusGraphLink_: React.FC<PrometheusGraphLinkProps> = ({
-  activePerspective,
   canAccessMonitoring,
   children,
-  namespace,
+  perspective,
   query,
-  setActivePerspective,
 }) => {
-  const onClick = React.useCallback(() => {
-    if (!canAccessMonitoring && activePerspective !== 'dev') {
-      setActivePerspective('dev');
-    }
-  }, [canAccessMonitoring, setActivePerspective, activePerspective]);
-
   if (!query) {
     return <>{children}</>;
   }
@@ -58,20 +44,17 @@ export const PrometheusGraphLink_: React.FC<PrometheusGraphLinkProps> = ({
   params.set('query0', query);
 
   const url =
-    canAccessMonitoring && activePerspective === 'admin'
+    canAccessMonitoring && perspective === 'admin'
       ? `/monitoring/query-browser?${params.toString()}`
-      : `/metrics/ns/${namespace}?${params.toString()}`;
+      : `/metrics?${params.toString()}`;
 
   return (
-    <Link to={url} onClick={onClick} style={{ color: 'inherit', textDecoration: 'none' }}>
+    <Link to={url} style={{ color: 'inherit', textDecoration: 'none' }}>
       {children}
     </Link>
   );
 };
-export const PrometheusGraphLink = connect(
-  mapStateToProps,
-  mapDispatchToProps,
-)(PrometheusGraphLink_);
+export const PrometheusGraphLink = connect(mapStateToProps)(PrometheusGraphLink_);
 
 export const PrometheusGraph: React.FC<PrometheusGraphProps> = React.forwardRef(
   ({ children, className, title }, ref: React.RefObject<HTMLDivElement>) => (
@@ -83,11 +66,9 @@ export const PrometheusGraph: React.FC<PrometheusGraphProps> = React.forwardRef(
 );
 
 type PrometheusGraphLinkProps = {
-  activePerspective: string;
   canAccessMonitoring: boolean;
-  namespace?: string;
+  perspective: string;
   query: string;
-  setActivePerspective: (id: string) => undefined;
 };
 
 type PrometheusGraphProps = {