Merge pull request #4060 from kyoto/monitoring-dashboards-fix-tooltips

Monitoring Dashboards: Fix tooltips and improve graph styling

frontend/public/components/monitoring/_monitoring.scss

@@ -21,11 +21,14 @@
   height: calc(100% - 20px);
   margin: 0 -5px 20px -5px;
 
+  .co-dashboard-card__body--dashboard-graph {
+    padding: 0;
+  }
+
   .query-browser__wrapper {
     border: 0;
     margin: 0;
     overflow: hidden;
-    padding-right: 0;
     padding-top: 0;
   }
 }

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

@@ -1,31 +1,43 @@
+import * as _ from 'lodash-es';
 import * as React from 'react';
+import { connect } from 'react-redux';
 
-import { FormatLegendLabel, QueryBrowser } from '../query-browser';
+import * as UIActions from '../../../actions/ui';
+import { FormatLegendLabel, PatchQuery, QueryBrowser } from '../query-browser';
+
+// Set the queries in Redux so that other components like the graph tooltip can access them
+const patchAllQueries = (queries: string[], patchQuery: PatchQuery): void => {
+  _.each(queries, (query, i) => patchQuery(i, { query }));
+};
 
 const Graph: React.FC<Props> = ({
   formatLegendLabel,
   isStack,
+  patchQuery,
   pollInterval,
   queries,
   timespan,
 }) => (
-  <QueryBrowser
-    defaultSamples={30}
-    formatLegendLabel={formatLegendLabel}
-    hideControls
-    isStack={isStack}
-    pollInterval={pollInterval}
-    queries={queries}
-    timespan={timespan}
-  />
+  <div onMouseEnter={() => patchAllQueries(queries, patchQuery)}>
+    <QueryBrowser
+      defaultSamples={30}
+      formatLegendLabel={formatLegendLabel}
+      hideControls
+      isStack={isStack}
+      pollInterval={pollInterval}
+      queries={queries}
+      timespan={timespan}
+    />
+  </div>
 );
 
 type Props = {
   formatLegendLabel?: FormatLegendLabel;
   isStack: boolean;
+  patchQuery: PatchQuery;
   pollInterval: number;
   queries: string[];
   timespan: number;
 };
 
-export default Graph;
+export default connect(null, { patchQuery: UIActions.queryBrowserPatchQuery })(Graph);

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

@@ -1,3 +1,4 @@
+import * as classNames from 'classnames';
 import * as _ from 'lodash-es';
 import * as React from 'react';
 import { Helmet } from 'react-helmet';
@@ -130,7 +131,11 @@ const Card_: React.FC<CardProps> = ({ panel, pollInterval, timespan, variables }
         <DashboardCardHeader className="monitoring-dashboards__card-header">
           <DashboardCardTitle>{panel.title}</DashboardCardTitle>
         </DashboardCardHeader>
-        <DashboardCardBody>
+        <DashboardCardBody
+          className={classNames({
+            'co-dashboard-card__body--dashboard-graph': panel.type === 'graph',
+          })}
+        >
           {panel.type === 'grafana-piechart-panel' && <BarChart query={queries[0]} />}
           {panel.type === 'graph' && (
             <Graph
@@ -259,11 +264,15 @@ const Board: React.FC<BoardProps> = ({ board, patchVariable, pollInterval, times
 
 const MonitoringDashboardsPage_: React.FC<MonitoringDashboardsPageProps> = ({
   clearVariables,
+  deleteAll,
   patchVariable,
   match,
 }) => {
   const { board } = match.params;
 
+  // Clear queries on unmount
+  React.useEffect(() => deleteAll, [deleteAll]);
+
   const [pollInterval, setPollInterval] = React.useState(
     parsePrometheusDuration(defaultPollInterval),
   );
@@ -328,6 +337,7 @@ const MonitoringDashboardsPage_: React.FC<MonitoringDashboardsPageProps> = ({
 };
 const MonitoringDashboardsPage = connect(null, {
   clearVariables: UIActions.monitoringDashboardsClearVariables,
+  deleteAll: UIActions.queryBrowserDeleteAllQueries,
   patchVariable: UIActions.monitoringDashboardsPatchVariable,
 })(MonitoringDashboardsPage_);
 
@@ -374,6 +384,7 @@ type CardProps = {
 
 type MonitoringDashboardsPageProps = {
   clearVariables: () => undefined;
+  deleteAll: () => undefined;
   patchVariable: (key: string, patch: Variable) => undefined;
   match: any;
 };

frontend/public/components/monitoring/query-browser.tsx

@@ -6,6 +6,7 @@ import {
   ChartArea,
   ChartAxis,
   ChartGroup,
+  ChartLegend,
   ChartLine,
   ChartStack,
   ChartThemeColor,
@@ -278,9 +279,6 @@ const Graph: React.FC<GraphProps> = React.memo(
             domain={domain}
             domainPadding={{ y: 1 }}
             height={200}
-            legendAllowWrap={true}
-            legendData={legendData}
-            legendPosition="bottom-left"
             scale={{ x: 'time', y: 'linear' }}
             theme={chartTheme}
             width={width}
@@ -300,6 +298,19 @@ const Graph: React.FC<GraphProps> = React.memo(
                 ))}
               </ChartGroup>
             )}
+            {legendData && (
+              <ChartLegend
+                data={legendData}
+                itemsPerRow={4}
+                orientation="vertical"
+                style={{
+                  labels: { fontSize: 11 },
+                }}
+                symbolSpacer={4}
+                x={0}
+                y={230}
+              />
+            )}
           </Chart>
         )}
       </div>
@@ -430,6 +441,12 @@ const ZoomableGraph: React.FC<ZoomableGraphProps> = ({
   );
 };
 
+const Loading = () => (
+  <div className="query-browser__loading">
+    <LoadingInline />
+  </div>
+);
+
 const QueryBrowser_: React.FC<QueryBrowserProps> = ({
   defaultSamples,
   defaultTimespan = parsePrometheusDuration('30m'),
@@ -603,23 +620,21 @@ const QueryBrowser_: React.FC<QueryBrowserProps> = ({
         'graph-empty-state': _.isEmpty(graphData),
       })}
     >
-      <div className="query-browser__controls">
-        <div className="query-browser__controls--left">
-          {!hideControls && (
+      {hideControls ? (
+        <>{updating && <Loading />}</>
+      ) : (
+        <div className="query-browser__controls">
+          <div className="query-browser__controls--left">
             <SpanControls defaultSpanText={defaultSpanText} onChange={onSpanChange} span={span} />
-          )}
-          {updating && (
-            <div className="query-browser__loading">
-              <LoadingInline />
+            {updating && <Loading />}
+          </div>
+          {GraphLink && (
+            <div className="query-browser__controls--right">
+              <GraphLink />
             </div>
           )}
         </div>
-        {GraphLink && (
-          <div className="query-browser__controls--right">
-            <GraphLink />
-          </div>
-        )}
-      </div>
+      )}
       {error && <Error error={error} />}
       {_.isEmpty(graphData) && !updating && <GraphEmpty />}
       {!_.isEmpty(graphData) && (
@@ -678,6 +693,8 @@ type PrometheusValue = [number, string];
 
 export type FormatLegendLabel = (labels: Labels, i: number) => string;
 
+export type PatchQuery = (index: number, patch: QueryObj) => any;
+
 type GraphProps = {
   allSeries: Series[];
   disabledSeries?: Labels[][];
@@ -708,7 +725,7 @@ export type QueryBrowserProps = {
   formatLegendLabel?: FormatLegendLabel;
   isStack?: boolean;
   namespace?: string;
-  patchQuery: (index: number, patch: QueryObj) => any;
+  patchQuery: PatchQuery;
   pollInterval?: number;
   queries: string[];
   timespan?: number;