add tooltip to devconsole monitoring graph

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

@@ -4,7 +4,7 @@ import { match as RMatch } from 'react-router-dom';
 import { Helmet } from 'react-helmet';
 import { Grid, GridItem } from '@patternfly/react-core';
 import { getURLSearchParams } from '@console/internal/components/utils';
-import MonitoringDashboardGraph from './MonitoringDashboardGraph';
+import ConnectedMonitoringDashboardGraph from './MonitoringDashboardGraph';
 import {
   monitoringDashboardQueries,
   workloadMetricsQueries,
@@ -39,7 +39,7 @@ const MonitoringDashboard: React.FC<MonitoringDashboardProps> = ({ match }) => {
         </GridItem>
         {_.map(queries, (q, i) => (
           <GridItem span={i === 0 ? 5 : 4} key={q.title}>
-            <MonitoringDashboardGraph
+            <ConnectedMonitoringDashboardGraph
               title={q.title}
               namespace={namespace}
               graphType={q.chartType}

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

@@ -1,32 +1,44 @@
 import * as React from 'react';
-import { QueryBrowser } from '@console/internal/components/monitoring/query-browser';
+import { connect } from 'react-redux';
+import { QueryBrowser, QueryObj } from '@console/internal/components/monitoring/query-browser';
 import { Humanize } from '@console/internal/components/utils';
 import { ByteDataTypes } from '@console/shared/src/graph-helper/data-utils';
 import { PrometheusGraphLink } from '@console/internal/components/graphs/prometheus-graph';
+import { queryBrowserPatchQuery } from '@console/internal/actions/ui';
 import './MonitoringDashboardGraph.scss';
 
 export enum GraphTypes {
   area = 'Area',
   line = 'Line',
 }
 
-interface MonitoringDashboardGraphProps {
+type DispatchProps = {
+  patchQuery: (patch: QueryObj) => void;
+};
+
+type OwnProps = {
   title: string;
   query: string;
   namespace: string;
   graphType?: GraphTypes;
   humanize: Humanize;
   byteDataType: ByteDataTypes;
-}
+};
+
+type MonitoringDashboardGraphProps = OwnProps & DispatchProps;
 
 const defaultTimespan = 30 * 60 * 1000;
 
-const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> = ({
+export const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> = ({
   query,
   namespace,
   title,
+  patchQuery,
   graphType = GraphTypes.area,
 }) => {
+  React.useEffect(() => {
+    patchQuery({ query });
+  }, [patchQuery, query]);
   return (
     <div className="odc-monitoring-dashboard-graph">
       <h5>{title}</h5>
@@ -43,4 +55,11 @@ const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> = ({
   );
 };
 
-export default MonitoringDashboardGraph;
+const mapDispatchToProps = (dispatch): DispatchProps => ({
+  patchQuery: (v: QueryObj) => dispatch(queryBrowserPatchQuery(0, v)),
+});
+
+export default connect<{}, DispatchProps, OwnProps>(
+  null,
+  mapDispatchToProps,
+)(MonitoringDashboardGraph);

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 import * as link from '@console/internal/components/utils';
 import MonitoringDashboard from '../MonitoringDashboard';
-import MonitoringDashboardGraph from '../MonitoringDashboardGraph';
+import { MonitoringDashboardGraph } from '../MonitoringDashboardGraph';
 import { monitoringDashboardQueries, topWorkloadMetricsQueries } from '../../queries';
 
 type MonitoringDashboardProps = React.ComponentProps<typeof MonitoringDashboard>;

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

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import { QueryBrowser } from '@console/internal/components/monitoring/query-browser';
 import { PrometheusGraphLink } from '@console/internal/components/graphs/prometheus-graph';
 import { monitoringDashboardQueries } from '../../queries';
-import MonitoringDashboardGraph, { GraphTypes } from '../MonitoringDashboardGraph';
+import { MonitoringDashboardGraph, GraphTypes } from '../MonitoringDashboardGraph';
 
 describe('Monitoring Dashboard graph', () => {
   let monitoringDashboardGraphProps: React.ComponentProps<typeof MonitoringDashboardGraph>;
@@ -17,6 +17,7 @@ describe('Monitoring Dashboard graph', () => {
       query: query.query({ namespace: 'test-project' }),
       humanize: query.humanize,
       byteDataType: query.byteDataType,
+      patchQuery: jest.fn(),
     };
   });
 

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

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { requirePrometheus } from '@console/internal/components/graphs';
 import { topWorkloadMetricsQueries } from '../queries';
-import MonitoringDashboardGraph from '../dashboard/MonitoringDashboardGraph';
+import ConnectedMonitoringDashboardGraph from '../dashboard/MonitoringDashboardGraph';
 
 const WorkloadGraphs = requirePrometheus(({ resource }) => {
   const namespace = resource?.metadata?.namespace;
@@ -12,7 +12,7 @@ const WorkloadGraphs = requirePrometheus(({ resource }) => {
   return (
     <>
       {_.map(topWorkloadMetricsQueries, (q) => (
-        <MonitoringDashboardGraph
+        <ConnectedMonitoringDashboardGraph
           key={q.title}
           title={q.title}
           namespace={namespace}