Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bug 1921610: fix pipeline metrics font size issue #7961

Merged

Conversation

karthikjeeyar
Copy link
Contributor

Fixes:

https://issues.redhat.com/browse/ODC-5312

Analysis / Root cause:

Font size in the chart labels should be consistent while resizing the window to a smaller screen.

Solution Description:

Used resize Observer (react measure) to pass the container width to PF charts.

Screen shots / Gifs for design review:

metrics-fontsize

Test setup:

  1. Run pipelines multiple times and visit pipeline Metrics page.
  2. Resize the metrics page to smaller size.

Browser conformance:

  • Chrome
  • Firefox
  • Safari
  • Edge

/kind bug
cc: @andrewballantyne @christianvogt @bgliwa01

@openshift-ci-robot openshift-ci-robot added the kind/bug Categorizes issue or PR as related to a bug. label Jan 28, 2021
@karthikjeeyar karthikjeeyar changed the title fix pipeline metrics font size issue Bug 1921610: fix pipeline metrics font size issue Jan 28, 2021
@openshift-ci-robot openshift-ci-robot added bugzilla/severity-low Referenced Bugzilla bug's severity is low for the branch this PR is targeting. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. labels Jan 28, 2021
@openshift-ci-robot
Copy link
Contributor

@karthikjeeyar: This pull request references Bugzilla bug 1921610, which is valid. The bug has been moved to the POST state. The bug has been updated to refer to the pull request using the external bug tracker.

3 validation(s) were run on this bug
  • bug is open, matching expected state (open)
  • bug target release (4.7.0) matches configured target release for branch (4.7.0)
  • bug is in the state NEW, which is one of the valid states (NEW, ASSIGNED, ON_DEV, POST, POST)

In response to this:

Bug 1921610: fix pipeline metrics font size issue

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

Copy link

@bgliwa01 bgliwa01 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm! Thanks, Karthik!

hiddenSeries={hiddenSeries}
tickValues={tickValues}
width={contentRect.bounds.width}
height={chartHeight}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

can we even get height from contentRect.bounds.height

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the last chart in the bottom row and this one has interactive legends under the chart, whereas the other chart in the bottom row doesn't have this legends. So fixed Height will make the cards even, if i use a dynamic height the cards wont be on the same size.

@invincibleJai
Copy link
Member

/approve

Verified the changes , works as expected

@openshift-ci-robot openshift-ci-robot added the approved Indicates a PR has been approved by an approver from all required OWNERS files. label Jan 29, 2021
Comment on lines 61 to 63
expect(PipelineRunCountWrapper.find(TimeSeriesChart).exists()).toBe(true);
expect(PipelineRunCountWrapper.find(LoadingInline).exists()).toBe(false);
expect(PipelineRunCountWrapper.find(GraphEmpty).exists()).toBe(false);
expect(PipelineRunCountWrapper.find(Measure).exists()).toBe(true);
Copy link
Member

@jerolimov jerolimov Jan 29, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@karthikjeeyar Is this change really necessary? The change of this tests "... if data is available" doesn't check that there is a TimeSeriesChart anymore.

I would like to see that this test case still tests for the TimeSeriesChart, or? Wdyt?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@karthikjeeyar looks like you need to go two levels deeper with the shallow-renderer to find your TimeSeriesChart again. One for the <Measure /> and one for the children-render-function:

    expect(
      PipelineRunCountWrapper.dive()
        .dive()
        .find(TimeSeriesChart)
        .exists(),
    ).toBe(true);

Want add this test again? Up to you if you want also keep the other checks. With the Measure check you test some internal which are not required in my opionion.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Agreed @jerolimov. I will update the tests and push again. Thanks for pointing out.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated.

Copy link
Member

@jerolimov jerolimov left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for the test update.

/lgtm

@openshift-ci-robot openshift-ci-robot added the lgtm Indicates that a PR is ready to be merged. label Jan 29, 2021
@openshift-ci-robot
Copy link
Contributor

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: bgliwa01, invincibleJai, jerolimov, karthikjeeyar

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:

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

@jerolimov
Copy link
Member

/retest

@openshift-bot
Copy link
Contributor

/retest

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

2 similar comments
@openshift-bot
Copy link
Contributor

/retest

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

@openshift-bot
Copy link
Contributor

/retest

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

@spadgett
Copy link
Member

/override ci/prow/ceph-storage-plugin

The ceph-storage-plugin job should only have run on PRs with changes to frontend/packages/ceph-storage-plugin. It failed due to an unrelated CI config change. Overriding status on this PR.

@openshift-ci-robot
Copy link
Contributor

@spadgett: Overrode contexts on behalf of spadgett: ci/prow/ceph-storage-plugin

In response to this:

/override ci/prow/ceph-storage-plugin

The ceph-storage-plugin job should only have run on PRs with changes to frontend/packages/ceph-storage-plugin. It failed due to an unrelated CI config change. Overriding status on this PR.

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@openshift-merge-robot openshift-merge-robot merged commit 62f9de0 into openshift:master Jan 29, 2021
@openshift-ci-robot
Copy link
Contributor

@karthikjeeyar: All pull requests linked via external trackers have merged:

Bugzilla bug 1921610 has been moved to the MODIFIED state.

In response to this:

Bug 1921610: fix pipeline metrics font size issue

Instructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository.

@spadgett spadgett added this to the v4.7 milestone Feb 1, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
approved Indicates a PR has been approved by an approver from all required OWNERS files. bugzilla/severity-low Referenced Bugzilla bug's severity is low for the branch this PR is targeting. bugzilla/valid-bug Indicates that a referenced Bugzilla bug is valid for the branch this PR is targeting. kind/bug Categorizes issue or PR as related to a bug. lgtm Indicates that a PR is ready to be merged.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

8 participants