Merge pull request #9314 from vikram-raj/bz-1972011

Bug 1972011: Fix time range for drag & drop in devconsole monitoring
openshift · Jul 14, 2021 · fbb4361 · fbb4361
2 parents c3bc8ad + 900c36c
commit fbb4361
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 0 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
@@ -1,5 +1,12 @@
 import * as React from 'react';
 import { useTranslation } from 'react-i18next';
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import { useDispatch } from 'react-redux';
+import {
+  monitoringDashboardsSetEndTime,
+  monitoringDashboardsSetTimespan,
+} from '@console/internal/actions/ui';
 import { PrometheusGraphLink } from '@console/internal/components/graphs/prometheus-graph';
 import { QueryBrowser } from '@console/internal/components/monitoring/query-browser';
 import { Humanize } from '@console/internal/components/utils';
@@ -40,6 +47,14 @@ export const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> =
   endTime,
 }) => {
   const { t } = useTranslation();
+  const dispatch = useDispatch();
+  const onZoom = React.useCallback(
+    (from, to) => {
+      dispatch(monitoringDashboardsSetEndTime(to));
+      dispatch(monitoringDashboardsSetTimespan(to - from));
+    },
+    [dispatch],
+  );
   return (
     <DashboardCard className="monitoring-dashboards__card odc-monitoring-dashboard-graph">
       <DashboardCardHeader>
@@ -63,6 +78,7 @@ export const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> =
             pollInterval={pollInterval}
             fixedEndTime={endTime}
             formatSeriesTitle={(labels) => labels.pod}
+            onZoom={onZoom}
             showLegend
           />
         </PrometheusGraphLink>

diff --git a/...v-console/src/components/monitoring/dashboard/__tests__/MonitoringDashboardGraph.spec.tsx b/...v-console/src/components/monitoring/dashboard/__tests__/MonitoringDashboardGraph.spec.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import { TFunction } from 'i18next';
+import * as redux from 'react-redux';
 import { PrometheusGraphLink } from '@console/internal/components/graphs/prometheus-graph';
 import { QueryBrowser } from '@console/internal/components/monitoring/query-browser';
 import { monitoringDashboardQueries } from '../../queries';
@@ -17,6 +18,11 @@ jest.mock('react-i18next', () => {
 });
 
 describe('Monitoring Dashboard graph', () => {
+  // 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(() => {});
   let monitoringDashboardGraphProps: React.ComponentProps<typeof MonitoringDashboardGraph>;
 
   beforeAll(() => {