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

upcoming: [DI-20050] - Added Data Rollup logic for graph data #10747

Merged
merged 8 commits into from
Aug 8, 2024

Conversation

nikhagra-akamai
Copy link
Contributor

@nikhagra-akamai nikhagra-akamai commented Aug 5, 2024

Description 📝

Added data rollup logic to convert the graph data to highest possible unit based on the base unit of data we receive from widget configuration.

Changes 🔄

List any change relevant to the reviewer.

  1. Added a unit conversion utility file to handle data rollup & conversion logic
  2. Modified utils.ts to add a logic to generate label name for graph.
  3. Modified JWE token payload from resource_id to resource_ids based on api specs
  4. Updated position of message for empty data in the graph.

Target release date 🗓️

15th August 2024

Preview 📷

Include a screenshot or screen recording of the change

💡 Use <video src="" /> tag when including recordings in table.

Before After
Screenshot 2024-08-05 at 7 49 36 PM Screenshot 2024-08-05 at 7 37 01 PM
Screenshot 2024-08-05 at 7 37 46 PM Screenshot 2024-08-05 at 7 36 52 PM

How to test 🧪

  1. Enable mock services as some endpoints are not ready to use
  2. As there is not much visual change in the UI you can simulate the unit conversion logic by passing different values & units

Note: You may notice some flickering because of continuous re-rendering but that will be resolved once global filter change handler will be implemented.

Check all that apply

  • 👀 Doing a self review
  • ❔ Our contribution guidelines
  • 🤏 Splitting feature into small PRs
  • ➕ Adding a changeset
  • 🧪 Providing/Improving test coverage
  • 🔐 Removing all sensitive information from the code and PR description
  • 🚩 Using a feature flag to protect the release
  • 👣 Providing comprehensive reproduction steps
  • 📑 Providing or updating our documentation
  • 🕛 Scheduling a pair reviewing session
  • 📱 Providing mobile support
  • ♿ Providing accessibility support

@nikhagra-akamai nikhagra-akamai requested a review from a team as a code owner August 5, 2024 14:23
@nikhagra-akamai nikhagra-akamai requested review from mjac0bs and cpathipa and removed request for a team August 5, 2024 14:23
Copy link
Contributor

@venkymano-akamai venkymano-akamai left a comment

Choose a reason for hiding this comment

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

LGTM, this is the same changes we have in our integrated branch

@nikhagra-akamai
Copy link
Contributor Author

@jaalah-akamai thanks for the suggestions. I've updated those & added test cases

@jaalah-akamai
Copy link
Contributor

jaalah-akamai commented Aug 6, 2024

Please take note of this issue and address it in an upcoming PR (or this one): The Grid item containing the refresh icon has styles that cause the button to overlap with the dropdown menus at smaller breakpoints. These styles should be removed to prevent this overlap, and you should probably add flex-shrink

Screenshot 2024-08-06 at 9 57 36 AM

@jaalah-akamai
Copy link
Contributor

@mjac0bs / @DevDW (Added because @cpathipa is OOO) - Feel free to review when you can

@nikhagra-akamai
Copy link
Contributor Author

nikhagra-akamai commented Aug 6, 2024

Please take note of this issue and address it in an upcoming PR (or this one): The Grid item containing the refresh icon has styles that cause the button to overlap with the dropdown menus at smaller breakpoints. These styles should be removed to prevent this overlap.

Screenshot 2024-08-06 at 9 57 36 AM

@jaalah-akamai, yes this is being addressed in the separate PR which @venkymano is working on with configured global filters. Along with responsiveness for different device support.

Copy link

github-actions bot commented Aug 6, 2024

Coverage Report:
Base Coverage: 82.41%
Current Coverage: 82.41%

Copy link
Contributor

@mjac0bs mjac0bs left a comment

Choose a reason for hiding this comment

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

Left some feedback on initial pass through and will re-review once that feedback has been addressed.

@nikhagra-akamai
Copy link
Contributor Author

@mjac0bs Thanks for the comments. I've addressed them and also created new changesets with upcoming-feature tag

@nikhagra-akamai nikhagra-akamai requested a review from mjac0bs August 7, 2024 13:03
Copy link
Contributor

@mjac0bs mjac0bs 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 addressing feedback @nikhagra. Error and loading states look cleaner and comments for documentation help everyone.

I've provided more detail (and hopefully more clarity) in comments about what we'd like to see for util functions with several parameters. Once those are cleaned up, this is looking in better shape to be merged.

A note to address in a future PR: there is a typo in the cloudpulse query params so they read: Clousepulse. (We also generally lowercase these, so cloudpulse would be standard here.)

image

legendRows={
legendRows && legendRows.length > 0 ? legendRows : undefined
}
ariaLabel={props.ariaLabel ? props.ariaLabel : ''}
Copy link
Contributor

Choose a reason for hiding this comment

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

Same comment as below - please destructure your props.

Suggested change
ariaLabel={props.ariaLabel ? props.ariaLabel : ''}
ariaLabel={ariaLabel ?? : ''}

@nikhagra-akamai
Copy link
Contributor Author

@mjac0bs @dwiley-akamai I've addressed comments & enhanced jsDocs. Please check & approve if all good

Copy link
Contributor

@mjac0bs mjac0bs left a comment

Choose a reason for hiding this comment

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

Approving since most of feedback clean up has been addressed, but left some final bits of feedback for you, @nikhagra. 👍🏼

@nikhagra-akamai
Copy link
Contributor Author

@mjac0bs thanks for the approval, I've updated the interface structure. @jaalah-akamai @mjac0bs @dwiley-akamai we've received required approval, please merge.

Copy link
Contributor

@dwiley-akamai dwiley-akamai left a comment

Choose a reason for hiding this comment

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

Code review ✅
Mocked graphs ✅

legendRows={
legendRows && legendRows.length > 0 ? legendRows : undefined
}
ariaLabel={ariaLabel ? ariaLabel : ''}
Copy link
Contributor

Choose a reason for hiding this comment

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

could use a nullish coalescing operator here

Suggested change
ariaLabel={ariaLabel ? ariaLabel : ''}
ariaLabel={ariaLabel ?? ''}

@jaalah-akamai jaalah-akamai added the Approved Multiple approvals and ready to merge! label Aug 8, 2024
@mjac0bs
Copy link
Contributor

mjac0bs commented Aug 8, 2024

The only CI failure was on smoke-community-stackscrips.spec.ts which is a result of this branch not being up to date with develop, where this was fixed earlier this week.

I'm going to merge this PR now.

@mjac0bs mjac0bs merged commit d610531 into linode:develop Aug 8, 2024
18 of 19 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Approved Multiple approvals and ready to merge! Cloud Pulse
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants