Move "Hardware model" page to React

Development
21

I created two Redmine tickets for the first two tasks in the 1st step

22

Just one small comment: Can we please make sure the table does not look any different than what we use in other places in the app? The storybook example you provided earlier displays the action links in a weird way, I’d prefer to keep the delete action as a normal button:

image

23

I see what you’re saying in the example the button is stretched and fills the entire cell.
I will do my best to avoid this. I think I can format “action” cells in a way that the style of the button is similar to what we have right now.

Thanks for pointing that out, though.

24

I just pushed the latest PR that adds the MVP required to move the models page to graphql. Looking forward to a review. :slight_smile:

This is how a query can look to get all models and the associated count of hosts. Looks pretty slim, right?

query queryModels($modelId: ID!) {
  model(id: $modelId) {
    id
    name
    info
    vendorClass
    hardwareModel
    hosts {
      totalCount
    }
  }
}

One thing to consider: Do we want to use relay instead of or next to redux? With graphql it might reduce the boilerplate a lot. I don’t have a strong opinion, just thought I’d bring it up.

2 Likes
25

:wave: everyone,
here are the latest updates:

We are very close to finish with stage 1 (creating the required components):

component /API pull request status
search 5771 90%
pagination 5957 75%
table 5755 80%
empty state 5850 100%
api/permissions 5814 90%
api/hosts counter 6025 100%
1 Like
26

Updates:
search box and pagination were merged.

Current status:

component /API pull request status
table 5755 80%
api/permissions 5814 90%
27

Hello,

I am watching your presentation during Foreman Community Demo 52 and you said that the hardware models page “is going to be turned into SPA”.

I am confused, I thought we are working on creating components in Reax/Redux but the application still stays as non-SPA. Is there something I missed? Thanks.

28

Hey Lukas,

I appreciate the question and thank you for watching our (Ron and I) talk. I should have been clearer and for that I am sorry.

In regard to your question:
Nowadays, when I am going to Hardware Models, Rails renders the index page: it takes the data from the database, the models.erb.html, the assets and etc and renders the page out of all these and sends it to the client.

Sometimes interacting with the received page requires Rails to render a new page. For example, clicking the “Create” button requires Rails to render the “create” form from a template and assets.

What we are trying to do is to replace most of this with React/Redux. We still need a server side but we are more concentrate on the user experience.

In the future, Rails will generate only one page. The page will mount a React component that will navigate between the index page and the create page. Interacting with the page will ask React to render the page instead of Rails.
For example, changing the order of the Vendor column in the table will send an API call that in the end React will re-render according to the results recieved in the response.

This is only going to take place in Hardware Models. As far as I know there are no plans on applying this in other places.

I hope that answers your question.
Boaz.

29

This was a non-technical question about when we started working on SPA. Thanks.