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

Redesign: Apply redesign #11

Merged
merged 19 commits into from
Feb 25, 2020
Merged

Redesign: Apply redesign #11

merged 19 commits into from
Feb 25, 2020

Conversation

danielgolden
Copy link
Contributor

@danielgolden danielgolden commented Jan 29, 2020

Overview of changes made:

Redesign toolbar:

  • Adds styles for the new toolbar
  • Swaps out old <select> elements for <Dropdown> components
  • Refactors filter functions to work with new dropdowns
  • Adds new "table state" Dropdown into toolbar

Redesign tables:

  • Feed the new table component (React Bootstrap Table 2) data in the format that needs.
  • Add search to the top of the primary table
  • Replace the primary table with the new component
  • Replace the agent versions table with the new component
  • Style tables according to latest mockup from Redesign groundkeeper UI #3.

Screenshot

Captura de Pantalla 2020-01-31 a la(s) 9 27 11 a  m


Resolves #3

@danielgolden danielgolden added the enhancement New feature or request label Jan 29, 2020
@claassistantio
Copy link

claassistantio commented Jan 29, 2020

CLA assistant check
All committers have signed the CLA.

@danielgolden danielgolden changed the title Redesign: Apply the filter bar redesign Redesign: Apply redesign from #3 Jan 30, 2020
@danielgolden danielgolden changed the title Redesign: Apply redesign from #3 Redesign: Apply redesign Jan 30, 2020
@danielgolden danielgolden self-assigned this Jan 30, 2020
@danielgolden danielgolden removed the request for review from fightingmonk January 30, 2020 18:14
Copy link
Contributor

@fightingmonk fightingmonk left a comment

Choose a reason for hiding this comment

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

Love the improved table @danielgolden . A few questions on using custom styles vs. just using the standard styles from the NR1 platform.

Two issues I'm noticing:

  1. Search performance is pretty bad. With a table of ~ 2,000 entries, there's a multi-second lag before refresh when I add or remove a character from the search bar on my 2018 Macbook Pro in Firefox.
  2. The agent releases table sits on top of the main table when I narrow my window below ~ 1,100 pixels.

Screen Shot 2020-02-21 at 9 29 07 AM

nerdlets/groundskeeper-nerdlet/components/TableWrapper.js Outdated Show resolved Hide resolved
nerdlets/groundskeeper-nerdlet/nrds.scss Outdated Show resolved Hide resolved
nerdlets/groundskeeper-nerdlet/nrds.scss Outdated Show resolved Hide resolved
nerdlets/groundskeeper-nerdlet/nrds.scss Outdated Show resolved Hide resolved
@danielgolden
Copy link
Contributor Author

We spoke about the rationale behind removing the NRDS.scss stylesheet in slack. This addresses 3 of the comments from the code review, which I have since resolved.

Makes the nerdlet usable at small screen sizes
down to ~1000px.
@fightingmonk
Copy link
Contributor

Looks really good! Performance is much improved and the layout bugs in Firefox are gone. I'm going to merge this.

One followup request: sorting by age looks like it's an alphabetical search. Can you add a numeric sort field for that column so (e.g.) 99 weeks sorts lower than 100 weeks? For unknown ? entries, maybe use -1 as the sort value?

@fightingmonk fightingmonk merged commit bbd54a5 into newrelic:master Feb 25, 2020
@devfreddy
Copy link
Contributor

🎉 This PR is included in version 0.4.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request released
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Redesign groundkeeper UI
4 participants