New host page - details tab

Hi all,

In the new host page, the overview tab brings a high-level summary for the host, but due to the amount of data a host can have (combining core and plugins) and for achieving a more organized user interface, we have designed an additional “details” tab.
In this tab, users can observe deeper information regarding the system, OS, NICS, content, registration, virtualization, and more.

The design is similar to the overview tab, registered cards from core, and plugins which can be re-order by specific weights. However, in this case, more content and cards are significantly expected, therefore we have added a collapse / expand mechanism to each and every card, so users can be focused only on what they care about and to allow a more responsive grid looks.

Collapsed layout:

expanded layout:

global expanded/collapsed switcher
You also can test it with this work in progress pull request which added this details tab, expand/collapse feature, and system properties card.

Some questions for further discussion:

  1. In general, what do you think about this cards layout? Is it beneficial to you?
  2. What should be the default? collapsed or expanded cards layout?
  3. does a global collapse / expand button look beneficial?
  4. Would you favor a “remember me” mechanism, so expanded cards will stay expanded during the entire session?

Cheers

3 Likes

Thanks @amirfefer, I really like the more informal tab and the layout looks good :+1:
Can you also share screenshots of a few collapsed and expanded cards on the same page? does the layout still look good?

+1 for the main toggle button and a to “remember”/store the last state of collapse cards

I would like to start with all expanded, so it is a “collapse what I am not interested”. As others perhaps will like it the other way round a global button would be good. And remembering this for a session (or even over a re-login) would than remove some clicks, so also bonus points for this!

I’m definitely for the remembering the state of collapsed & expanded cards for the session, or maybe for the account so it will be remembered after the logout.

Thanks all for replying!

I updated the PR and it contains a global collapse / expand switcher and a remember mechanism for keeping the user’s choice for later.

|JS development| hooks addition

For this effort I’ve also included these two reuseable general hooks:

  1. useLocalStorage - A custom hook that creates a memorized state in local storage
// the state is stored in local storage
const [state, setState] = useLocalStorage(UNIQE_ID, DEFAULT_VALUE);
  1. useDidMountEffect - creates a useEffect that function as a componentDidMount - triggers only after a second render.
3 Likes