Adds PromQL Editor to monitoring metrics #3955

invincibleJai · 2020-01-14T14:49:22Z

Adds PromQL Editor to monitoring metrics

Tracks:

Gif:

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

andrewballantyne · 2020-01-15T01:27:35Z

/kind feature

abhi-kn · 2020-01-16T11:23:13Z

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

Actually Show PromQL button is not shown in design mock up when no query is selected. If possible its good to hide otherwise we can set isPromQlDisabled default value to true

It's there Show PromQL button in the mockup

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

serenamarie125

@invincibleJai this is looking good! Couple of things I see which would be good to address:

When the graph comes up, the legend is viewed before the chart. Is there a way to display it at the same time ( picky I know, so if this is difficult, don't worry )
Is it still possible to get the hints when creating the PromQL query as it was in the metrics page?
in your animated gif, some tooltip shows up very quickly. Is that associated with the top line in the graph? Curious if we should have a bit of a delay (similar to the timing we do with the pipeline visualization) so that tooltips aren't showing up immediately.

kyoto · 2020-01-21T04:57:40Z

FYI @sichvoge

invincibleJai · 2020-01-21T13:03:47Z

@serenamarie125 Thanks for inputs, have updated the gif PTAL and added comments below.

When the graph comes up, the legend is viewed before the chart. Is there a way to display it at the same time ( picky I know, so if this is difficult, don't worry )

we are rendering the components at the same time, on the first load graph rendering takes more than legend

Is it still possible to get the hints when creating the PromQL query as it was in the metrics page?

have updated the gif with hints.

in your animated gif, some tooltip shows up very quickly. Is that associated with the top line in the graph? Curious if we should have a bit of a delay (similar to the timing we do with the pipeline visualization) so that tooltips aren't showing up immediately.

Graph component is reused from the console and internally it makes use of the Pf line chart. We can take this as an issue in separate PR if needed.

vikram-raj · 2020-01-21T12:59:47Z

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

nit:

Suggested change

const autocompleteFilter = (strtext, item) => fuzzy(strtext, item);

const autocompleteFilter = (strText, item) => fuzzy(strText, item);

vikram-raj · 2020-01-21T13:10:20Z

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

nit: This way it is more readable.

Suggested change

if (selVal && selVal === ADD_NEW_QUERY) {

if (selectedValue && selectedValue === ADD_NEW_QUERY) {

vikram-raj · 2020-01-21T13:10:50Z

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

nit:

Suggested change

{showPromQl ? `Hide PromQL` : `Show PromQL`}

{showPromQl ? 'Hide PromQL' : 'Show PromQL'}

vikram-raj · 2020-01-21T13:27:25Z

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

Can we directly pass setShowPromQl to onClick as we are not doing anything else in togglePromQl?

serenamarie125

@invincibleJai thanks for the updates and responses to my comments. From a UX perspective, this PR is approved.

vikram-raj

/lgtm

christianvogt · 2020-01-21T15:49:26Z

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

You should probably omit this entire row if there is no content to show.

christianvogt · 2020-01-21T15:50:08Z

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

Combine these two conditions into one.

christianvogt · 2020-01-21T20:15:26Z

/approve

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

vikram-raj

/lgtm

openshift-ci-robot · 2020-01-22T03:29:06Z

[APPROVALNOTIFIER] This PR is APPROVED

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

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

The pull request process is described here

Details

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

openshift-bot · 2020-01-22T03:36:37Z

/retest

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

kyoto · 2020-01-22T06:04:29Z

FYI @openshift/openshift-team-monitoring

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 14, 2020

openshift-ci-robot requested review from kyoto and vikram-raj January 14, 2020 14:49

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 14, 2020

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

abhi-kn reviewed Jan 16, 2020

View reviewed changes

invincibleJai force-pushed the fix-promql-edit branch from c6f6219 to 966bf49 Compare January 16, 2020 12:44

invincibleJai mentioned this pull request Jan 20, 2020

Dev metrics: visualisation of queries in metrics #3891

Merged

invincibleJai force-pushed the fix-promql-edit branch 2 times, most recently from af4da3d to c9bc935 Compare January 20, 2020 08:47

serenamarie125 suggested changes Jan 20, 2020

View reviewed changes

invincibleJai force-pushed the fix-promql-edit branch from c9bc935 to c6e28c2 Compare January 20, 2020 14:22

invincibleJai force-pushed the fix-promql-edit branch 2 times, most recently from a1320d1 to 8106741 Compare January 21, 2020 12:35

invincibleJai changed the title ~~[WIP] Adds PromQL Editor to monitoring metrics~~ Adds PromQL Editor to monitoring metrics Jan 21, 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 21, 2020

vikram-raj reviewed Jan 21, 2020

View reviewed changes

invincibleJai force-pushed the fix-promql-edit branch from 8106741 to 9826b53 Compare January 21, 2020 13:51

serenamarie125 approved these changes Jan 21, 2020

View reviewed changes

vikram-raj reviewed Jan 21, 2020

View reviewed changes

openshift-ci-robot assigned vikram-raj Jan 21, 2020

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

christianvogt reviewed Jan 21, 2020

View reviewed changes

invincibleJai force-pushed the fix-promql-edit branch from 9826b53 to 87f8786 Compare January 21, 2020 18:14

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

invincibleJai force-pushed the fix-promql-edit branch 2 times, most recently from d8d3463 to 3d103fc Compare January 21, 2020 18:20

openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jan 21, 2020

vikram-raj reviewed Jan 22, 2020

View reviewed changes

frontend/packages/dev-console/src/components/monitoring/metrics/MetricsQueryInput.tsx Outdated Show resolved Hide resolved

invincibleJai force-pushed the fix-promql-edit branch from 3d103fc to 741fd36 Compare January 22, 2020 03:05

adds promQL editor and toggle option for it

297dedf

invincibleJai force-pushed the fix-promql-edit branch from 741fd36 to 297dedf Compare January 22, 2020 03:09

vikram-raj reviewed Jan 22, 2020

View reviewed changes

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

openshift-merge-robot merged commit e6e3fed into openshift:master Jan 22, 2020

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

	const autocompleteFilter = (strtext, item) => fuzzy(strtext, item);
	const autocompleteFilter = (strText, item) => fuzzy(strText, item);

	if (selVal && selVal === ADD_NEW_QUERY) {
	if (selectedValue && selectedValue === ADD_NEW_QUERY) {

	{showPromQl ? `Hide PromQL` : `Show PromQL`}
	{showPromQl ? 'Hide PromQL' : 'Show PromQL'}

Adds PromQL Editor to monitoring metrics #3955

Adds PromQL Editor to monitoring metrics #3955

Uh oh!

Conversation

invincibleJai commented Jan 14, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

andrewballantyne commented Jan 15, 2020

Uh oh!

abhi-kn Jan 16, 2020

Choose a reason for hiding this comment

Uh oh!

invincibleJai Jan 16, 2020

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

serenamarie125 left a comment

Choose a reason for hiding this comment

Uh oh!

kyoto commented Jan 21, 2020

Uh oh!

invincibleJai commented Jan 21, 2020

Uh oh!

vikram-raj Jan 21, 2020

Choose a reason for hiding this comment

Uh oh!

vikram-raj Jan 21, 2020

Choose a reason for hiding this comment

Uh oh!

vikram-raj Jan 21, 2020

Choose a reason for hiding this comment

Uh oh!

vikram-raj Jan 21, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

serenamarie125 left a comment

Choose a reason for hiding this comment

Uh oh!

vikram-raj left a comment

Choose a reason for hiding this comment

Uh oh!

christianvogt Jan 21, 2020

Choose a reason for hiding this comment

Uh oh!

christianvogt Jan 21, 2020

Choose a reason for hiding this comment

Uh oh!

christianvogt commented Jan 21, 2020

Uh oh!

Uh oh!

vikram-raj left a comment

Choose a reason for hiding this comment

Uh oh!

openshift-ci-robot commented Jan 22, 2020

Uh oh!

openshift-bot commented Jan 22, 2020

Uh oh!

kyoto commented Jan 22, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

11 participants

invincibleJai commented Jan 14, 2020 •

edited

Loading

vikram-raj Jan 21, 2020 •

edited

Loading