autoselect query from metric dropdown

openshift · Apr 27, 2020 · d6ab61d · d6ab61d
1 parent 7de6dd1
commit d6ab61d
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 43 deletions.
diff --git a/frontend/packages/dev-console/src/components/monitoring/metrics/MetricsQueryInput.tsx b/frontend/packages/dev-console/src/components/monitoring/metrics/MetricsQueryInput.tsx
@@ -1,12 +1,13 @@
 import * as React from 'react';
+import * as _ from 'lodash';
 // FIXME upgrading redux types is causing many errors at this time
 // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
 // @ts-ignore
 import { useSelector, useDispatch } from 'react-redux';
 import * as fuzzy from 'fuzzysearch';
 import { RootState } from '@console/internal/redux';
 import { Button } from '@patternfly/react-core';
-import { Dropdown } from '@console/internal/components/utils';
+import { Dropdown, removeQueryArgument } from '@console/internal/components/utils';
 import { queryBrowserRunQueries, queryBrowserPatchQuery } from '@console/internal/actions/ui';
 import { getActiveNamespace } from '@console/internal/reducers/ui';
 import { QueryInput } from '@console/internal/components/monitoring/metrics';
@@ -17,7 +18,11 @@ import './MetricsQueryInput.scss';
 const ADD_NEW_QUERY = '#ADD_NEW_QUERY#';
 const CUSTOM_QUERY = 'Custom Query';
 
-const MetricsQueryInput: React.FC = () => {
+type MetricsQueryInputProps = {
+  query?: string;
+};
+
+const MetricsQueryInput: React.FC<MetricsQueryInputProps> = ({ query }) => {
   const items = metricsQuery;
   const autocompleteFilter = (strText, item) => fuzzy(strText, item);
   const defaultActionItem = [
@@ -32,8 +37,8 @@ const MetricsQueryInput: React.FC = () => {
     state.UI.getIn(['queryBrowser', 'queries', 0]).toJS(),
   );
   const dispatch = useDispatch();
-
   const [title, setTitle] = React.useState('Select Query');
+  const [selectedKey, setSelectedKey] = React.useState('');
   const [metric, setMetric] = React.useState('');
   const [showPromQl, setShowPromQl] = React.useState(false);
   const [isPromQlDisabled, setIsPromQlDisabled] = React.useState(false);
@@ -48,13 +53,25 @@ const MetricsQueryInput: React.FC = () => {
   }, [dispatch, metric, namespace]);
 
   React.useEffect(() => {
-    const query = queries?.query;
+    const q = queries?.query;
     const text = queries?.text;
-    if (text && text.localeCompare(query) !== 0) {
+    if (text && text.localeCompare(q) !== 0) {
       setTitle(CUSTOM_QUERY);
       setIsPromQlDisabled(true);
+      if (query) {
+        removeQueryArgument('query0');
+      }
     }
-  }, [queries]);
+  }, [query, queries]);
+
+  React.useEffect(() => {
+    if (query) {
+      const topMetricsQueries = getTopMetricsQueries(namespace);
+      const selectedQuery = _.findKey(topMetricsQueries, (topQuery) => topQuery === query);
+      const sKey = _.findKey(items, (item) => item === selectedQuery);
+      selectedQuery ? setSelectedKey(sKey) : setTitle(CUSTOM_QUERY);
+    }
+  }, [query, namespace, items]);
 
   const onChange = (selectedValue: string) => {
     setMetric(metricsQuery[selectedValue]);
@@ -66,6 +83,9 @@ const MetricsQueryInput: React.FC = () => {
       setTitle(metricsQuery[selectedValue]);
       setIsPromQlDisabled(false);
     }
+    if (query) {
+      removeQueryArgument('query0');
+    }
   };
 
   return (
@@ -75,6 +95,7 @@ const MetricsQueryInput: React.FC = () => {
           <Dropdown
             autocompleteFilter={autocompleteFilter}
             items={items || {}}
+            selectedKey={selectedKey}
             actionItems={defaultActionItem}
             dropDownClassName="odc-metrics-query-input dropdown--full-width"
             menuClassName="odc-metrics-query-input__menu dropdown-menu--text-wrap"

diff --git a/frontend/packages/dev-console/src/components/monitoring/metrics/MonitoringMetrics.tsx b/frontend/packages/dev-console/src/components/monitoring/metrics/MonitoringMetrics.tsx
@@ -16,8 +16,10 @@ export const MonitoringMetrics: React.FC<MonitoringMetricsProps> = ({ patchQuery
   const params = getURLSearchParams();
   const query = params.query0;
   React.useEffect(() => {
-    patchQuery({ text: query });
-    runQueries();
+    if (query) {
+      patchQuery({ text: query });
+      runQueries();
+    }
   }, [query, patchQuery, runQueries]);
 
   return (
@@ -26,7 +28,7 @@ export const MonitoringMetrics: React.FC<MonitoringMetricsProps> = ({ patchQuery
         <title>Metrics</title>
       </Helmet>
       <div className="co-m-pane__body">
-        <MetricsQueryInput />
+        <MetricsQueryInput query={query} />
         <div className="row">
           <div className="col-xs-12">
             <ConnectedMetricsChart />

diff --git a/...ckages/dev-console/src/components/monitoring/metrics/__tests__/MetricsQueryInput.spec.tsx b/...ckages/dev-console/src/components/monitoring/metrics/__tests__/MetricsQueryInput.spec.tsx
@@ -54,7 +54,7 @@ describe('Metrics Query Input', () => {
     wrapper
       .find(Dropdown)
       .props()
-      .onChange('PODS_BY_CPU');
+      .onChange('CPU Usage');
     expect(wrapper.find(Button).props().isDisabled).toBe(false);
     expect(wrapper.find(Dropdown).props().title).toEqual('CPU Usage');
   });

diff --git a/frontend/packages/dev-console/src/components/monitoring/queries.ts b/frontend/packages/dev-console/src/components/monitoring/queries.ts
@@ -24,42 +24,10 @@ export const metricsQuery = {
   PODS_BY_NETWORK_OUT: 'Transmit Bandwidth',
 };
 
-const topMetricsQueries = {
-  [metricsQuery.PODS_BY_CPU]: _.template(
-    `topk(25, sort_desc(sum(avg_over_time(pod:container_cpu_usage:sum{container="",pod!="",namespace='<%= namespace %>'}[5m])) BY (pod, namespace)))`,
-  ),
-  [metricsQuery.PODS_BY_MEMORY]: _.template(
-    `topk(25, sort_desc(sum(avg_over_time(container_memory_working_set_bytes{container="",pod!="",namespace='<%= namespace %>'}[5m])) BY (pod, namespace)))`,
-  ),
-  [metricsQuery.PODS_BY_FILESYSTEM]: _.template(
-    `topk(25, sort_desc(sum(pod:container_fs_usage_bytes:sum{container="",pod!="",namespace='<%= namespace %>'}) BY (pod, namespace)))`,
-  ),
-  [metricsQuery.PODS_BY_NETWORK_IN]: _.template(
-    `topk(25, sort_desc(sum(rate(container_network_receive_bytes_total{ container="POD", pod!= "", namespace='<%= namespace %>'}[5m])) BY (namespace, pod)))`,
-  ),
-  [metricsQuery.PODS_BY_NETWORK_OUT]: _.template(
-    `topk(25, sort_desc(sum(rate(container_network_transmit_bytes_total{ container="POD", pod!= "", namespace='<%= namespace %>'}[5m])) BY (namespace, pod)))`,
-  ),
-};
-
-export const getTopMetricsQueries = (namespace: string) => ({
-  [metricsQuery.PODS_BY_CPU]: topMetricsQueries[metricsQuery.PODS_BY_CPU]({ namespace }),
-  [metricsQuery.PODS_BY_MEMORY]: topMetricsQueries[metricsQuery.PODS_BY_MEMORY]({ namespace }),
-  [metricsQuery.PODS_BY_FILESYSTEM]: topMetricsQueries[metricsQuery.PODS_BY_FILESYSTEM]({
-    namespace,
-  }),
-  [metricsQuery.PODS_BY_NETWORK_IN]: topMetricsQueries[metricsQuery.PODS_BY_NETWORK_IN]({
-    namespace,
-  }),
-  [metricsQuery.PODS_BY_NETWORK_OUT]: topMetricsQueries[metricsQuery.PODS_BY_NETWORK_OUT]({
-    namespace,
-  }),
-});
-
 export const monitoringDashboardQueries: MonitoringQuery[] = [
   {
     query: _.template(
-      `sum(node_namespace_pod_container:container_cpu_usage_seconds_total:sum_rate{cluster="",namespace='<%= namespace %>'}) by (pod)`,
+      `sum(node_namespace_pod_container:container_cpu_usage_seconds_total:sum_rate{cluster="", namespace='<%= namespace %>'}) by (pod)`,
     ),
     chartType: GraphTypes.area,
     title: 'CPU Usage',
@@ -236,3 +204,32 @@ export const workloadMetricsQueries: MonitoringQuery[] = [
     ),
   },
 ];
+
+const getMetricsQuery = (title: string): _.TemplateExecutor => {
+  const queryObject = _.find(monitoringDashboardQueries, (q) => q.title === title);
+  return queryObject.query;
+};
+
+const topMetricsQueries = {
+  PODS_BY_CPU: getMetricsQuery('CPU Usage'),
+  PODS_BY_MEMORY: getMetricsQuery('Memory Usage'),
+  PODS_BY_FILESYSTEM: _.template(
+    `topk(25, sort_desc(sum(pod:container_fs_usage_bytes:sum{container="",pod!="",namespace='<%= namespace %>'}) BY (pod, namespace)))`,
+  ),
+  PODS_BY_NETWORK_IN: getMetricsQuery('Receive Bandwidth'),
+  PODS_BY_NETWORK_OUT: getMetricsQuery('Transmit Bandwidth'),
+};
+
+export const getTopMetricsQueries = (namespace: string) => ({
+  [metricsQuery.PODS_BY_CPU]: topMetricsQueries.PODS_BY_CPU({ namespace }),
+  [metricsQuery.PODS_BY_MEMORY]: topMetricsQueries.PODS_BY_MEMORY({ namespace }),
+  [metricsQuery.PODS_BY_FILESYSTEM]: topMetricsQueries.PODS_BY_FILESYSTEM({
+    namespace,
+  }),
+  [metricsQuery.PODS_BY_NETWORK_IN]: topMetricsQueries.PODS_BY_NETWORK_IN({
+    namespace,
+  }),
+  [metricsQuery.PODS_BY_NETWORK_OUT]: topMetricsQueries.PODS_BY_NETWORK_OUT({
+    namespace,
+  }),
+});