Add clickable action to monitoring dashboard graph

frontend/__tests__/components/graphs/prometheus-graph.spec.tsx

@@ -61,22 +61,22 @@ describe('<PrometheusGraphLink />', () => {
     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');
+    expect(wrapper.find(Link).props().to).toEqual('/dev-monitoring/ns/default/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?query0=test');
+    expect(wrapper.find(Link).props().to).toEqual('/dev-monitoring/ns/default/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');
+    expect(wrapper.find(Link).props().to).toEqual('/dev-monitoring/ns/default/metrics?query0=test');
 
     store.dispatch(UIActions.setActivePerspective('admin'));
     wrapper = getWrapper('');

frontend/packages/dev-console/src/components/monitoring/MonitoringPage.tsx

@@ -6,7 +6,7 @@ import { TechPreviewBadge, ALL_NAMESPACES_KEY } from '@console/shared';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import ProjectListPage from '../projects/ProjectListPage';
 import MonitoringDashboard from './dashboard/MonitoringDashboard';
-import MonitoringMetrics from './metrics/MonitoringMetrics';
+import ConnectedMonitoringMetrics from './metrics/MonitoringMetrics';
 
 export const MONITORING_ALL_NS_PAGE_URI = '/dev-monitoring/all-namespaces';
 
@@ -48,7 +48,7 @@ export const MonitoringPage: React.FC<MonitoringPageProps> = ({ match }) => {
                 {
                   href: 'metrics',
                   name: 'Metrics',
-                  component: MonitoringMetrics,
+                  component: ConnectedMonitoringMetrics,
                 },
               ]}
               match={match}

frontend/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx

@@ -3,6 +3,7 @@ import { QueryBrowser } from '@console/internal/components/monitoring/query-brow
 import { Humanize } from '@console/internal/components/utils';
 import { ByteDataTypes } from '@console/shared/src/graph-helper/data-utils';
 import { Area } from '@console/internal/components/graphs/area';
+import { PrometheusGraphLink } from '@console/internal/components/graphs/prometheus-graph';
 import './MonitoringDashboardGraph.scss';
 
 export enum GraphTypes {
@@ -34,12 +35,14 @@ const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> = ({
       {graphType === GraphTypes.line ? (
         <>
           <h5 className="graph-title">{title}</h5>
-          <QueryBrowser
-            hideControls
-            defaultTimespan={defaultTimespan}
-            namespace={namespace}
-            queries={[query]}
-          />
+          <PrometheusGraphLink query={query}>
+            <QueryBrowser
+              hideControls
+              defaultTimespan={defaultTimespan}
+              namespace={namespace}
+              queries={[query]}
+            />
+          </PrometheusGraphLink>
         </>
       ) : (
         <Area

frontend/packages/dev-console/src/components/monitoring/dashboard/__tests__/MonitoringDashboardGraph.spec.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 import { Area } from '@console/internal/components/graphs/area';
 import { QueryBrowser } from '@console/internal/components/monitoring/query-browser';
+import { PrometheusGraphLink } from '@console/internal/components/graphs/prometheus-graph';
 import { queries } from '../monitoringDashboardQueries';
 import MonitoringDashboardGraph, { GraphTypes } from '../MonitoringDashboardGraph';
 
@@ -30,4 +31,13 @@ describe('Monitoring Dashboard graph', () => {
     const wrapper = shallow(<MonitoringDashboardGraph {...monitoringDashboardGraphProps} />);
     expect(wrapper.find(QueryBrowser).exists()).toBe(true);
   });
+
+  it('should add link to line graph', () => {
+    monitoringDashboardGraphProps.graphType = GraphTypes.line;
+    const wrapper = shallow(<MonitoringDashboardGraph {...monitoringDashboardGraphProps} />);
+    expect(wrapper.find(PrometheusGraphLink).exists()).toBe(true);
+    expect(wrapper.find(PrometheusGraphLink).props().query).toEqual(
+      monitoringDashboardGraphProps.query,
+    );
+  });
 });

frontend/packages/dev-console/src/components/monitoring/metrics/MonitoringMetrics.tsx

@@ -1,9 +1,25 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
 import ConnectedMetricsQueryInput from './MetricsQueryInput';
+import { connect } from 'react-redux';
+import { getURLSearchParams } from '@console/internal/components/utils';
+import { queryBrowserRunQueries, queryBrowserPatchQuery } from '@console/internal/actions/ui';
+import { QueryObj } from '@console/internal/components/monitoring/query-browser';
 import ConnectedMetricsChart from './MetricsChart';
 
-const MonitoringMetrics: React.FC = () => {
+type MonitoringMetricsProps = {
+  patchQuery?: (patch: QueryObj) => void;
+  runQueries?: () => never;
+};
+
+export const MonitoringMetrics: React.FC<MonitoringMetricsProps> = ({ patchQuery, runQueries }) => {
+  const params = getURLSearchParams();
+  const query = params.query0;
+  React.useEffect(() => {
+    patchQuery({ text: query });
+    runQueries();
+  }, [query, patchQuery, runQueries]);
+
   return (
     <>
       <Helmet>
@@ -25,4 +41,9 @@ const MonitoringMetrics: React.FC = () => {
   );
 };
 
-export default MonitoringMetrics;
+const mapDispatchToProps = (dispatch) => ({
+  runQueries: () => dispatch(queryBrowserRunQueries()),
+  patchQuery: (v: QueryObj) => dispatch(queryBrowserPatchQuery(0, v)),
+});
+
+export default connect(null, mapDispatchToProps)(MonitoringMetrics);

frontend/packages/dev-console/src/components/monitoring/metrics/__tests__/MonitoringMetrics.spec.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
-import MonitoringMetrics from '../MonitoringMetrics';
+import { MonitoringMetrics } from '../MonitoringMetrics';
 
 describe('Monitoring Metrics Tab', () => {
   it('should render Monitoring Metrics tab', () => {

frontend/public/components/graphs/prometheus-graph.tsx

@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { FLAGS } from '@console/shared';
 import { featureReducerName } from '../../reducers/features';
 import { MonitoringRoutes } from '../../reducers/monitoring';
-import { getActivePerspective } from '../../reducers/ui';
+import { getActivePerspective, getActiveNamespace } from '../../reducers/ui';
 import { RootState } from '../../redux';
 
 export const getPrometheusExpressionBrowserURL = (urls, queries): string => {
@@ -28,13 +28,15 @@ const mapStateToProps = (state: RootState) => ({
   canAccessMonitoring:
     !!state[featureReducerName].get(FLAGS.CAN_GET_NS) && !!window.SERVER_FLAGS.prometheusBaseURL,
   perspective: getActivePerspective(state),
+  namespace: getActiveNamespace(state),
 });
 
 export const PrometheusGraphLink_: React.FC<PrometheusGraphLinkProps> = ({
   canAccessMonitoring,
   children,
   perspective,
   query,
+  namespace,
 }) => {
   if (!query) {
     return <>{children}</>;
@@ -46,7 +48,7 @@ export const PrometheusGraphLink_: React.FC<PrometheusGraphLinkProps> = ({
   const url =
     canAccessMonitoring && perspective === 'admin'
       ? `/monitoring/query-browser?${params.toString()}`
-      : `/metrics?${params.toString()}`;
+      : `/dev-monitoring/ns/${namespace}/metrics?${params.toString()}`;
 
   return (
     <Link to={url} style={{ color: 'inherit', textDecoration: 'none' }}>
@@ -69,6 +71,7 @@ type PrometheusGraphLinkProps = {
   canAccessMonitoring: boolean;
   perspective: string;
   query: string;
+  namespace?: string;
 };
 
 type PrometheusGraphProps = {