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

Migrate Home and OS data page to components #231

Merged
merged 13 commits into from
Jan 20, 2021

Conversation

vegg89
Copy link
Contributor

@vegg89 vegg89 commented Jan 4, 2021

Hi everyone,

I worked on the issue #216 and migrate the Home and OS Data pages to components.
In order to achieve this, I created 6 components and add them to the PageBuilder module:

  • PageColumns:
    • Render up to 3 columns and you can add all other components inside them. the column width is calculated depending on the number of elements in columns params
  • Row:
    • Render a row and you can add all other components columns included.
  • Card:
    • Used to render the basic card used in Home page. You can add custom classes.
  • Usage Card:
    • Used to render usage limits used in system limits sections in Home page and memory and disk sections in OS Data page. It can be used to show 1 or more usages per card.
  • Shared Usage Card:
    • Used to render a the card used by memory section in Home page and cpu section in OS Data page.
  • Fields Card:
    • Used to render the environment section in Home page.

@vegg89 vegg89 changed the title Feature/component migration Migrate Home and OS data page to components Jan 7, 2021
@josevalim
Copy link
Member

Hi @vegg89! Thank you so much for the PR. I am a bit behind on my open source duties but I haven't forgot about this. It is sitting on my inbox. :) I hope to get this reviewed by next week the latest!

<%= live_component @socket, ColorBarComponent, dom_id: "cpu-#{usage.dom_sub_id}", data: usage.data, title: usage.title, csp_nonces: @csp_nonces %>
</div>
<% end %>
<%= live_component @socket, ColorBarLegendComponent, data: @total_data, formatter: @total_formatter %>
Copy link
Member

Choose a reason for hiding this comment

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

It would be nice to remove this component and instead make if a function or just inline the code directly here. :) The same for ColorBarComponent above.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I removed the components and added the code directly to the render.

|> PageColumnsComponent.normalize_params()

{PageColumnsComponent, assigns}
end
Copy link
Member

Choose a reason for hiding this comment

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

There is a bit of inconsistency between page_columns and row. Is page_columns prefixed with page_ because it can only be used at the root? If so, should we document that? Also, we do page_columns(columns: [...]) and row(components: [...]). Should it be called components for both?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Initially I decide to use page_columns to avoid confusion with columns/0 function used in tables. I change the latter to table_columns/0 and rename page_columns to columns

* `:usages` - Required. A list of `Map` with the following keys:
* `:data` - A list of tuples with 4 elements with the following data:
`{usage_name, usage_percent, color, hint}`
* `:sub_dom_id` - Required. Usage identifier.
Copy link
Member

Choose a reason for hiding this comment

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

dom_sub_id?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I did the correction!

@josevalim
Copy link
Member

Hi @vegg89, sorry for the delay, I have finally looked into it. This looks great! I have dropped some comments but they are minor. :) Let me know if you have any questions, review should be quicker from now on!

@vegg89
Copy link
Contributor Author

vegg89 commented Jan 20, 2021

Hi @josevalim, thank you for your review, I did the corrections that you mention, please let me know if you notice any other detail! 🤓

@josevalim josevalim merged commit 2b5df0a into phoenixframework:master Jan 20, 2021
@josevalim
Copy link
Member

💚 💙 💜 💛 ❤️

@vegg89
Copy link
Contributor Author

vegg89 commented Jan 20, 2021

Thank you!! 😃🤟🏽

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants