Dev metrics: visualisation of queries in metrics #3891

invincibleJai · 2020-01-08T11:57:06Z

Dev metrics: visualization of queries in the metrics tab

Add Monitoring Metrics tab to run out-of-the-box queries on a project
Show Dropdown with pre-defined queries
Select should show series chart along with associated legends

Tracks:

Gif:

andrewballantyne · 2020-01-08T17:55:17Z

/kind feature

karthikjeeyar · 2020-01-10T09:32:01Z

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

+  return (
+    <Dropdown
+      autocompleteFilter={autocompleteFilter}
+      id="metrics-dropdown"


we can namespace this to odc-metrics-dropdownfield

karthikjeeyar · 2020-01-10T09:51:42Z

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

+
+const MetricsDropdown: React.FC<MetricsDropdownProps> = ({ patchQuery, runQueries, namespace }) => {
+  const items = metricsQuery;
+  const title: React.ReactNode = 'Select Query';


if we are not accepting title to be changed from parent component, then the type can be string

karthikjeeyar · 2020-01-10T09:51:49Z

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

+  );
+  const disabledSeries = React.useMemo(() => _.map(queries, 'disabledSeries'), [
+    disabledSeriesMemoKey,
+  ]);


If we are using this react.memo approach to improve the performance and eslint-disable comment to avoid get lint errors, then its a good practice to enable it back after the usage.

Suggested change

]);

]);

/* eslint-enable react-hooks/exhaustive-deps */

Only use eslint-disable-next-line

invincibleJai · 2020-01-13T11:55:01Z

/cc @openshift/team-devconsole-ux @serenamarie125

karthikjeeyar · 2020-01-13T18:42:08Z

Verified locally, looks good to me.
/lgtm

karthikjeeyar · 2020-01-13T18:42:24Z

/retest

vikram-raj

Tested it locally and its work fine as expected.

christianvogt · 2020-01-13T20:06:28Z

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

+});
+
+const mapDispatchToProps = (dispatch) =>
+  Object.assign(


Assign is unnecessary here.

christianvogt · 2020-01-13T20:07:44Z

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

+    disabledSeriesMemoKey,
+  ]);
+  /* eslint-enable react-hooks/exhaustive-deps */
+  return queryStrings.join('') === '' ? (


Nit: Prefer length 0 check.

christianvogt · 2020-01-13T20:08:25Z

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

+  return (
+    <Dropdown
+      autocompleteFilter={autocompleteFilter}
+      id="odc-metrics-dropdownfield"


Why do you need this is?

christianvogt · 2020-01-13T20:09:34Z

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

+
+const ADD_NEW_QUERY = '#ADD_NEW_QUERY#';
+
+interface StateProps {


I see a mix between type and interface. Choose one and stick to it in the same file.

I don't think there is an agreement on preference overall but at least in the same file we should be consistent.

have made use of type across

christianvogt · 2020-01-13T20:12:11Z

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

+
+  const [metric, setMetric] = React.useState('');
+  React.useEffect(() => {
+    if (metric !== ADD_NEW_QUERY) {


Won't this run the first time through with an empty string metric?

invincibleJai · 2020-01-14T03:14:25Z

@christianvogt thanks for the review, have fixed review comments PTAL.

openshift-bot · 2020-01-19T09:44:34Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T09:57:37Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T11:02:34Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T11:15:38Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T12:20:35Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T12:33:41Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T14:04:35Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T14:17:38Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T15:35:36Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-19T15:48:42Z

/retest

Please review the full test history for this PR and help us cut down flakes.

spadgett · 2020-01-19T16:08:47Z

/hold
to avoid retest while CI is broken

serenamarie125 · 2020-01-19T22:20:37Z

@invincibleJai couple of questions:

what is the paging control for that's in your gif?
could you put a border around the entire panel including the filter/graph/legend so it looks visually connected?

invincibleJai · 2020-01-20T03:23:12Z

@serenamarie125 pagination control in the gif is for legends.

could you put a border around the entire panel including the filter/graph/legend so it looks visually connected?

yes we can have a border, it'll wrap pagination as well right. Let me know your thoughts, it'll be as in below screenshot

we have associated PR #3955 , this adds PromQL editor PTAL

serenamarie125

@invincibleJai this looks great, thanks for acting on the feedback!

vikram-raj

/lgtm

vikram-raj · 2020-01-20T13:26:48Z

/retest

openshift-ci-robot · 2020-01-20T13:26:54Z

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: christianvogt, invincibleJai, karthikjeeyar, serenamarie125, TheRealJon, vikram-raj

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

~~frontend/packages/dev-console/OWNERS~~ [christianvogt]
~~frontend/public/components/monitoring/OWNERS~~ [christianvogt]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

spadgett · 2020-01-20T23:39:40Z

/hold cancel
/retest

openshift-bot · 2020-01-21T00:51:37Z

/retest

Please review the full test history for this PR and help us cut down flakes.

openshift-bot · 2020-01-21T01:04:47Z

/retest

Please review the full test history for this PR and help us cut down flakes.

invincibleJai changed the title ~~Dev metrics: visualisation of queries in metrics~~ [WIP] Dev metrics: visualisation of queries in metrics Jan 8, 2020

openshift-ci-robot added do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. size/L Denotes a PR that changes 100-499 lines, ignoring generated files. labels Jan 8, 2020

openshift-ci-robot requested review from debsmita1 and TheRealJon January 8, 2020 11:57

openshift-ci-robot added component/core Related to console core functionality component/dev-console Related to dev-console component/monitoring Related to monitoring labels Jan 8, 2020

invincibleJai force-pushed the fix-monitoring-metrics branch from ed3a146 to eba9d22 Compare January 8, 2020 17:18

openshift-ci-robot added the kind/feature Categorizes issue or PR as related to a new feature. label Jan 8, 2020

invincibleJai force-pushed the fix-monitoring-metrics branch from eba9d22 to 61ffe63 Compare January 10, 2020 08:20

karthikjeeyar reviewed Jan 10, 2020

View reviewed changes

invincibleJai force-pushed the fix-monitoring-metrics branch 3 times, most recently from 57007c4 to 6f379a6 Compare January 13, 2020 08:54

invincibleJai changed the title ~~[WIP] Dev metrics: visualisation of queries in metrics~~ Dev metrics: visualisation of queries in metrics Jan 13, 2020

openshift-ci-robot removed the do-not-merge/work-in-progress Indicates that a PR should not merge because it is a work in progress. label Jan 13, 2020

openshift-ci-robot requested a review from serenamarie125 January 13, 2020 11:55

invincibleJai force-pushed the fix-monitoring-metrics branch 2 times, most recently from 71e501a to 2317dc6 Compare January 13, 2020 13:57

openshift-ci-robot assigned karthikjeeyar Jan 13, 2020

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jan 13, 2020

vikram-raj reviewed Jan 13, 2020

View reviewed changes

christianvogt reviewed Jan 13, 2020

View reviewed changes

invincibleJai force-pushed the fix-monitoring-metrics branch from 2317dc6 to b28e8fb Compare January 14, 2020 03:12

openshift-ci-robot added the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Jan 19, 2020

invincibleJai mentioned this pull request Jan 20, 2020

Add monitoring dashboard graph #3923

Merged

invincibleJai force-pushed the fix-monitoring-metrics branch from 5f48659 to 9621349 Compare January 20, 2020 05:27

openshift-ci-robot removed the lgtm Indicates that a PR is ready to be merged. label Jan 20, 2020

adds monitoring metrics component and legend

8bf261d

invincibleJai force-pushed the fix-monitoring-metrics branch from 9621349 to 8bf261d Compare January 20, 2020 08:20

serenamarie125 approved these changes Jan 20, 2020

View reviewed changes

vikram-raj reviewed Jan 20, 2020

View reviewed changes

openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jan 20, 2020

openshift-ci-robot removed the do-not-merge/hold Indicates that a PR should not merge because someone has issued a /hold command. label Jan 20, 2020

openshift-merge-robot merged commit d0b8d94 into openshift:master Jan 21, 2020

spadgett added this to the v4.4 milestone Jan 27, 2020


		const ADD_NEW_QUERY = '#ADD_NEW_QUERY#';

		interface StateProps {

Dev metrics: visualisation of queries in metrics #3891

Dev metrics: visualisation of queries in metrics #3891

Conversation

invincibleJai commented Jan 8, 2020 • edited

andrewballantyne commented Jan 8, 2020

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

invincibleJai commented Jan 13, 2020

karthikjeeyar commented Jan 13, 2020

karthikjeeyar commented Jan 13, 2020

vikram-raj left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

invincibleJai commented Jan 14, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

openshift-bot commented Jan 19, 2020

spadgett commented Jan 19, 2020

serenamarie125 commented Jan 19, 2020

invincibleJai commented Jan 20, 2020 • edited

serenamarie125 left a comment

Choose a reason for hiding this comment

vikram-raj left a comment

Choose a reason for hiding this comment

vikram-raj commented Jan 20, 2020

openshift-ci-robot commented Jan 20, 2020

spadgett commented Jan 20, 2020

openshift-bot commented Jan 21, 2020

openshift-bot commented Jan 21, 2020

invincibleJai commented Jan 8, 2020 •

edited

invincibleJai commented Jan 20, 2020 •

edited