Bug 1796463: add view monitoring dashboard option for metrics section in monitoring overview

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

@@ -3,8 +3,14 @@ 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 MonitoringDashboardGraph from './MonitoringDashboardGraph';
-import { queries } from './monitoringDashboardQueries';
+import {
+  monitoringDashboardQueries,
+  workloadMetricsQueries,
+  MonitoringQuery,
+  topWorkloadMetricsQueries,
+} from '../queries';
 import MonitoringDasboardCountBlock from './MonitoringDashboardCountBlock';
 
 interface MonitoringDashboardProps {
@@ -15,6 +21,12 @@ interface MonitoringDashboardProps {
 
 const MonitoringDashboard: React.FC<MonitoringDashboardProps> = ({ match }) => {
   const namespace = match.params.ns;
+  const params = getURLSearchParams();
+  const { workloadName, workloadType } = params;
+  const queries: MonitoringQuery[] =
+    workloadName && workloadType
+      ? [...topWorkloadMetricsQueries, ...workloadMetricsQueries]
+      : monitoringDashboardQueries;
 
   return (
     <>
@@ -31,7 +43,7 @@ const MonitoringDashboard: React.FC<MonitoringDashboardProps> = ({ match }) => {
               title={q.title}
               namespace={namespace}
               graphType={q.chartType}
-              query={q.query({ namespace })}
+              query={q.query({ namespace, workloadName, workloadType })}
               humanize={q.humanize}
               byteDataType={q.byteDataType}
             />

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

@@ -3,7 +3,7 @@ import { Bullseye } from '@patternfly/react-core';
 
 const MonitoringDasboardCountBlock: React.FC = () => (
   <div className="graph-wrapper">
-    <h5 className="graph-title">Stat 0</h5>
+    <h5 className="graph-title">Pod Count</h5>
     <Bullseye>
       <h1>3</h1>
     </Bullseye>

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

@@ -1,6 +1,9 @@
 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 { monitoringDashboardQueries, topWorkloadMetricsQueries } from '../../queries';
 
 type MonitoringDashboardProps = React.ComponentProps<typeof MonitoringDashboard>;
 
@@ -20,4 +23,36 @@ describe('Monitoring Dashboard Tab', () => {
     const wrapper = shallow(<MonitoringDashboard {...monitoringDashboardProps} />);
     expect(wrapper.contains(<title>Dashboard</title>)).toBe(true);
   });
+
+  it('should render all workload queries', () => {
+    const workloadQuery = topWorkloadMetricsQueries[0].query({
+      namespace: monitoringDashboardProps.match.params.ns,
+      workloadName: 'dotnet',
+      workloadType: 'deployment',
+    });
+    const spygetURLSearchParams = jest.spyOn(link, 'getURLSearchParams');
+    spygetURLSearchParams.mockReturnValue({ workloadName: 'dotnet', workloadType: 'deployment' });
+    const wrapper = shallow(<MonitoringDashboard {...monitoringDashboardProps} />);
+    expect(
+      wrapper
+        .find(MonitoringDashboardGraph)
+        .first()
+        .props().query,
+    ).toEqual(workloadQuery);
+  });
+
+  it('should render dashboard queries', () => {
+    const dashboardQuery = monitoringDashboardQueries[0].query({
+      namespace: monitoringDashboardProps.match.params.ns,
+    });
+    const spygetURLSearchParams = jest.spyOn(link, 'getURLSearchParams');
+    spygetURLSearchParams.mockReturnValue({});
+    const wrapper = shallow(<MonitoringDashboard {...monitoringDashboardProps} />);
+    expect(
+      wrapper
+        .find(MonitoringDashboardGraph)
+        .first()
+        .props().query,
+    ).toEqual(dashboardQuery);
+  });
 });

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

@@ -3,14 +3,14 @@ import { shallow } from 'enzyme';
 import { Area } from '@console/internal/components/graphs/area';
 import { QueryBrowser } from '@console/internal/components/monitoring/query-browser';
 import { PrometheusGraphLink } from '@console/internal/components/graphs/prometheus-graph';
-import { queries } from '../monitoringDashboardQueries';
+import { monitoringDashboardQueries } from '../../queries';
 import MonitoringDashboardGraph, { GraphTypes } from '../MonitoringDashboardGraph';
 
 describe('Monitoring Dashboard graph', () => {
   let monitoringDashboardGraphProps: React.ComponentProps<typeof MonitoringDashboardGraph>;
 
   beforeAll(() => {
-    const query = queries[1];
+    const query = monitoringDashboardQueries[1];
     monitoringDashboardGraphProps = {
       title: query.title,
       namespace: 'test-project',

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

@@ -1,22 +1,23 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { requirePrometheus } from '@console/internal/components/graphs';
-import { workloadMetricQueries } from './queries';
+import { topWorkloadMetricsQueries } from '../queries';
 import MonitoringDashboardGraph from '../dashboard/MonitoringDashboardGraph';
 
 const WorkloadGraphs = requirePrometheus(({ resource }) => {
-  const ns = resource?.metadata?.namespace;
+  const namespace = resource?.metadata?.namespace;
   const workloadName = resource?.metadata?.name;
   const workloadType = resource?.kind?.toLowerCase();
+
   return (
     <>
-      {_.map(workloadMetricQueries, (q) => (
+      {_.map(topWorkloadMetricsQueries, (q) => (
         <MonitoringDashboardGraph
           key={q.title}
           title={q.title}
-          namespace={ns}
+          namespace={namespace}
           graphType={q.chartType}
-          query={q.query({ ns, workloadName, workloadType })}
+          query={q.query({ namespace, workloadName, workloadType })}
           humanize={q.humanize}
           byteDataType={q.byteDataType}
         />

frontend/packages/dev-console/src/components/monitoring/overview/MonitoringOverview.scss

@@ -12,8 +12,9 @@
       padding: var(--pf-global--spacer--sm) 0;
     }
   }
-  h5 {
-    margin: 0;
+  &__view-monitoring-dashboard {
+    margin: var(--pf-global--spacer--sm) 0;
+    text-align: right;
   }
   .pf-c-accordion__expanded-content.pf-m-expanded {
     --pf-c-accordion__expanded-content--BorderLeftColor: transparent;

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

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
+import { Link } from 'react-router-dom';
 import {
   Accordion,
   AccordionItem,
@@ -78,6 +79,15 @@ const MonitoringOverview: React.FC<MonitoringOverviewProps> = ({ resource, event
             Metrics
           </AccordionToggle>
           <AccordionContent id="metrics-content" isHidden={!expanded.includes('metrics')}>
+            <div className="odc-monitoring-overview__view-monitoring-dashboard">
+              <Link
+                to={`/dev-monitoring/ns/${resource?.metadata?.namespace}/?workloadName=${
+                  resource?.metadata?.name
+                }&workloadType=${resource?.kind?.toLowerCase()}`}
+              >
+                View monitoring dashboard
+              </Link>
+            </div>
             <WorkloadGraphs resource={resource} />
           </AccordionContent>
         </AccordionItem>