Add clickable action to monitoring dashboard graph

openshift · Jan 17, 2020 · 77596a1 · 77596a1
1 parent 0a60bfc
commit 77596a1
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 10 deletions.
diff --git a/...end/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx b/...end/packages/dev-console/src/components/monitoring/dashboard/MonitoringDashboardGraph.tsx
@@ -3,6 +3,7 @@ import { QueryBrowser } from '@console/internal/components/monitoring/query-brow
 import { humanizeBinaryBytes } 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';
 
 interface MonitoringDashboardGraphProps {
@@ -25,12 +26,14 @@ const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> = ({
       {graphType === '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

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,9 +1,25 @@
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
+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 MetricsDropdown from './MetricsDropdown';
 import MetricsChart from './MetricsChart';
 
-const MonitoringMetrics: React.FC = () => {
+type MonitoringMetricsProps = {
+  patchQuery: (patch: QueryObj) => void;
+  runQueries: () => never;
+};
+
+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,12 @@ 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);
diff --git a/frontend/public/components/graphs/prometheus-graph.tsx b/frontend/public/components/graphs/prometheus-graph.tsx
@@ -7,7 +7,7 @@ import { Link } from 'react-router-dom';
 import { FLAGS } from '@console/internal/const';
 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 = {