Bug 1807210: added Time Range & Refresh Interval dropdowns in monitoring dashboard

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

@@ -5,7 +5,7 @@ import { HorizontalNav, PageHeading, history } from '@console/internal/component
 import { TechPreviewBadge, ALL_NAMESPACES_KEY } from '@console/shared';
 import NamespacedPage, { NamespacedPageVariants } from '../NamespacedPage';
 import ProjectListPage from '../projects/ProjectListPage';
-import MonitoringDashboard from './dashboard/MonitoringDashboard';
+import ConnectedMonitoringDashboard from './dashboard/MonitoringDashboard';
 import ConnectedMonitoringMetrics from './metrics/MonitoringMetrics';
 import MonitoringEvents from './events/MonitoringEvents';
 
@@ -44,7 +44,7 @@ export const MonitoringPage: React.FC<MonitoringPageProps> = ({ match }) => {
                 {
                   href: '',
                   name: 'Dashboard',
-                  component: MonitoringDashboard,
+                  component: ConnectedMonitoringDashboard,
                 },
                 {
                   href: 'metrics',

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

@@ -0,0 +1,7 @@
+.odc-monitoring-dashboard__dropdown-options {
+    display: flex;
+    float: right;
+    align-self: flex-end;
+    margin-top: -65px;
+}
+

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

@@ -1,23 +1,37 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { match as RMatch } from 'react-router-dom';
+import { connect } from 'react-redux';
 import { Helmet } from 'react-helmet';
+import { RootState } from '@console/internal/redux';
 import { getURLSearchParams } from '@console/internal/components/utils';
+import {
+  TimespanDropdown,
+  PollIntervalDropdown,
+} from '@console/internal/components/monitoring/dashboards';
 import ConnectedMonitoringDashboardGraph from './MonitoringDashboardGraph';
 import {
   monitoringDashboardQueries,
   workloadMetricsQueries,
   MonitoringQuery,
   topWorkloadMetricsQueries,
 } from '../queries';
+import './MonitoringDashboard.scss';
 
-interface MonitoringDashboardProps {
+type MonitoringDashboardProps = {
   match: RMatch<{
     ns?: string;
   }>;
-}
+};
+
+type StateProps = {
+  timespan: number;
+  pollInterval: number;
+};
 
-const MonitoringDashboard: React.FC<MonitoringDashboardProps> = ({ match }) => {
+type Props = MonitoringDashboardProps & StateProps;
+
+export const MonitoringDashboard: React.FC<Props> = ({ match, timespan, pollInterval }) => {
   const namespace = match.params.ns;
   const params = getURLSearchParams();
   const { workloadName, workloadType } = params;
@@ -31,6 +45,10 @@ const MonitoringDashboard: React.FC<MonitoringDashboardProps> = ({ match }) => {
       <Helmet>
         <title>Dashboard</title>
       </Helmet>
+      <div className="odc-monitoring-dashboard__dropdown-options">
+        <TimespanDropdown />
+        <PollIntervalDropdown />
+      </div>
       <div className="co-m-pane__body">
         {_.map(queries, (q) => (
           <ConnectedMonitoringDashboardGraph
@@ -41,11 +59,18 @@ const MonitoringDashboard: React.FC<MonitoringDashboardProps> = ({ match }) => {
             humanize={q.humanize}
             byteDataType={q.byteDataType}
             key={q.title}
+            timespan={timespan}
+            pollInterval={pollInterval}
           />
         ))}
       </div>
     </>
   );
 };
 
-export default MonitoringDashboard;
+const mapStateToProps = (state: RootState): StateProps => ({
+  timespan: state.UI.getIn(['monitoringDashboards', 'timespan']),
+  pollInterval: state.UI.getIn(['monitoringDashboards', 'pollInterval']),
+});
+
+export default connect<StateProps, MonitoringDashboardProps>(mapStateToProps)(MonitoringDashboard);

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

@@ -23,19 +23,23 @@ type OwnProps = {
   graphType?: GraphTypes;
   humanize: Humanize;
   byteDataType: ByteDataTypes;
+  timespan?: number;
+  pollInterval?: number;
 };
 
 type MonitoringDashboardGraphProps = OwnProps & DispatchProps;
 
-const defaultTimespan = 30 * 60 * 1000;
-const defaultSamples = 30;
+const DEFAULT_TIME_SPAN = 30 * 60 * 1000;
+const DEFAULT_SAMPLES = 30;
 
 export const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> = ({
   query,
   namespace,
   title,
   patchQuery,
   graphType = GraphTypes.area,
+  timespan,
+  pollInterval,
 }) => {
   return (
     <div className="odc-monitoring-dashboard-graph">
@@ -44,11 +48,13 @@ export const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> =
         <div onMouseEnter={() => patchQuery({ query })}>
           <QueryBrowser
             hideControls
-            defaultTimespan={defaultTimespan}
-            defaultSamples={defaultSamples}
+            defaultTimespan={DEFAULT_TIME_SPAN}
+            defaultSamples={DEFAULT_SAMPLES}
             namespace={namespace}
             queries={[query]}
             isStack={graphType === GraphTypes.area}
+            timespan={timespan}
+            pollInterval={pollInterval}
           />
         </div>
       </PrometheusGraphLink>

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

@@ -1,7 +1,11 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import * as link from '@console/internal/components/utils';
-import MonitoringDashboard from '../MonitoringDashboard';
+import {
+  TimespanDropdown,
+  PollIntervalDropdown,
+} from '@console/internal/components/monitoring/dashboards';
+import { MonitoringDashboard } from '../MonitoringDashboard';
 import ConnectedMonitoringDashboardGraph from '../MonitoringDashboardGraph';
 import { monitoringDashboardQueries, topWorkloadMetricsQueries } from '../../queries';
 
@@ -17,6 +21,8 @@ describe('Monitoring Dashboard Tab', () => {
       path: '',
       url: '',
     },
+    timespan: 1800000,
+    pollInterval: 90000,
   };
 
   it('should render Monitoring Dashboard tab', () => {
@@ -55,4 +61,10 @@ describe('Monitoring Dashboard Tab', () => {
         .props().query,
     ).toEqual(dashboardQuery);
   });
+
+  it('should render Time Range & Refresh Interval dropdowns', () => {
+    const wrapper = shallow(<MonitoringDashboard {...monitoringDashboardProps} />);
+    expect(wrapper.find(TimespanDropdown).exists()).toBe(true);
+    expect(wrapper.find(PollIntervalDropdown).exists()).toBe(true);
+  });
 });

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

@@ -18,6 +18,8 @@ describe('Monitoring Dashboard graph', () => {
       humanize: query.humanize,
       byteDataType: query.byteDataType,
       patchQuery: jest.fn(),
+      timespan: 1800000,
+      pollInterval: 30000,
     };
   });
 

frontend/public/components/monitoring/dashboards/index.tsx

@@ -217,7 +217,8 @@ const TimespanDropdown_: React.FC<TimespanDropdownProps> = ({ timespan, setTimes
     />
   );
 };
-const TimespanDropdown = connect(
+
+export const TimespanDropdown = connect(
   ({ UI }: RootState) => ({
     timespan: UI.getIn(['monitoringDashboards', 'timespan']),
   }),
@@ -258,7 +259,8 @@ const PollIntervalDropdown_: React.FC<PollIntervalDropdownProps> = ({
     />
   );
 };
-const PollIntervalDropdown = connect(
+
+export const PollIntervalDropdown = connect(
   ({ UI }: RootState) => ({
     pollInterval: UI.getIn(['monitoringDashboards', 'pollInterval']),
   }),