[release-4.4] Bug 1802300: Monitoring Dashboard metrics corrections

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

@@ -2,7 +2,6 @@ import * as React from 'react';
 import * as _ from 'lodash';
 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 ConnectedMonitoringDashboardGraph from './MonitoringDashboardGraph';
 import {
@@ -11,7 +10,6 @@ import {
   MonitoringQuery,
   topWorkloadMetricsQueries,
 } from '../queries';
-import MonitoringDasboardPodCount from './MonitoringDashboardPodCount';
 
 interface MonitoringDashboardProps {
   match: RMatch<{
@@ -33,23 +31,19 @@ const MonitoringDashboard: React.FC<MonitoringDashboardProps> = ({ match }) => {
       <Helmet>
         <title>Dashboard</title>
       </Helmet>
-      <Grid className="co-m-pane__body" gutter="md">
-        <GridItem span={3} rowSpan={1}>
-          <MonitoringDasboardPodCount namespace={namespace} />
-        </GridItem>
-        {_.map(queries, (q, i) => (
-          <GridItem span={i === 0 ? 5 : 4} key={q.title}>
-            <ConnectedMonitoringDashboardGraph
-              title={q.title}
-              namespace={namespace}
-              graphType={q.chartType}
-              query={q.query({ namespace, workloadName, workloadType })}
-              humanize={q.humanize}
-              byteDataType={q.byteDataType}
-            />
-          </GridItem>
+      <div className="co-m-pane__body">
+        {_.map(queries, (q) => (
+          <ConnectedMonitoringDashboardGraph
+            title={q.title}
+            namespace={namespace}
+            graphType={q.chartType}
+            query={q.query({ namespace, workloadName, workloadType })}
+            humanize={q.humanize}
+            byteDataType={q.byteDataType}
+            key={q.title}
+          />
         ))}
-      </Grid>
+      </div>
     </>
   );
 };

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

@@ -28,6 +28,7 @@ type OwnProps = {
 type MonitoringDashboardGraphProps = OwnProps & DispatchProps;
 
 const defaultTimespan = 30 * 60 * 1000;
+const defaultSamples = 30;
 
 export const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> = ({
   query,
@@ -44,6 +45,7 @@ export const MonitoringDashboardGraph: React.FC<MonitoringDashboardGraphProps> =
           <QueryBrowser
             hideControls
             defaultTimespan={defaultTimespan}
+            defaultSamples={defaultSamples}
             namespace={namespace}
             queries={[query]}
             isStack={graphType === GraphTypes.area}

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

@@ -57,13 +57,13 @@ const MetricsQueryInput: React.FC = () => {
   }, [queries]);
 
   const onChange = (selectedValue: string) => {
-    setMetric(selectedValue);
+    setMetric(metricsQuery[selectedValue]);
     if (selectedValue && selectedValue === ADD_NEW_QUERY) {
       setTitle(CUSTOM_QUERY);
       setIsPromQlDisabled(true);
       setShowPromQl(true);
     } else {
-      setTitle(selectedValue);
+      setTitle(metricsQuery[selectedValue]);
       setIsPromQlDisabled(false);
     }
   };

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

@@ -56,6 +56,6 @@ describe('Metrics Query Input', () => {
       .props()
       .onChange('PODS_BY_CPU');
     expect(wrapper.find(Button).props().isDisabled).toBe(false);
-    expect(wrapper.find(Dropdown).props().title).toEqual('PODS_BY_CPU');
+    expect(wrapper.find(Dropdown).props().title).toEqual('CPU Usage');
   });
 });