@cristinadresch commented on Fri Oct 11 2019

Latest visuals to follow: https://app.zeplin.io/project/5d2dfd8e5b67f14c5e1d2aef/screen/5da856a44c5d384ecfb054fc

For this issue we can just amend the following (other changes will be in the model details styling issue)

• We need to add scroll to the table. Please note the left navigation is fixed, so only the table/content area should scroll
• The CLI needs to be made sticky so only the content on the table scrolls
• The side navigation when expanded/on hover should go above the CLI module

Remove the animation on the button with chevron, it will then match this vanilla update:

https://vanilla-framework-canonical-web-and-design-pr-2611.run.demo.haus/examples/patterns/contextual-menu/contextual-menu-indicator/

With the new modelData structure we need to update the testing data for the redux-store dump.

The sanitization process can take some time so this would be a good time to write a script to take a redux store and sanitize it.

A combined model data object has been created in the redux store to make working with combined model data easier now and in the future when the new API's become available. Before the old keys can be removed these components need to be converted to use the new data.

When clicking an item in the filter UI then filter the model list.

Blocked by #124

There are some styling issues when applying this update that'll need some eyes on to resolve.

With the .u-table-layout--auto applied to tables in FF is spreading the padding around tables:

If there is no data available for a table in the model list the table component should render a 'no data' message that's passed in as a prop. This work would be done to the shared component so thought has to be done how this work will effect others.

The error message:

Close and re-open the terminal window to reconnect.

...is confusing as we don't provide a way for the user to terminate/restart the terminal.

@spencerbygraves I can't export the nav icons from Zeplin as when I hover over, I can only select the constituent parts of each icon. Can you export them from Sketch and attach here pls?

We're now using Vanilla 2.4.1 which may have this issue resolved.
https://github.com/canonical-web-and-design/jaas-dashboard/blob/master/src/scss/index.scss#L9

Create a benchmarking document with dashboard examples.

Under the JAAS logo (and before 'model') there is a mouse over status for an item that shouldn't be there:

It doesn't appear that the renovate config is working as intended. I'll update them manually for now.

See example: https://cl.ly/954187927ca2

The logic to determine when a model is in error can be used in the selectors but also in the UI when trying to extract error data from the models.

We should move the logic out from the selectors into a util that can be imported elsewhere.

React Router has a component NavLink that applies styles when they match the url. We may be able to use this for our navigation to simplify some of the code.

https://reacttraining.com/react-router/web/api/NavLink

@cristinadresch commented on Fri Oct 11 2019

Latest designs here:
https://app.zeplin.io/project/5d2dfd8e5b67f14c5e1d2aef/screen/5da02d1a74c79508529ea451

The graph and the memory/disk info wouldnt be there, so you could try to add the IP in the same row as the machine name if possible?

Describe the bug

Visiting non existent routes lands on blank page.

To Reproduce
Steps to reproduce the behavior:

• visit {host}/model/foo (an invalid url)

Expected behavior
Some type of 404 page

Seems like a browser bug in Chrome, will check if still an issue before release.

If you have shared models in your model list. When you click them they do not switch the URL to the proper model name to be able to fetch the statuses.

When splitting off individual Sass files for performance - those files do not currently inherit Vanilla so we cannot use Sass variables.

Introduced in #54 In order for the primary nav to interact with the window.location the tests required a little hack around overriding the window.location values. I don't think this is necessary any longer if the tests use the MemoryRouter and the component uses the router hooks.

With the addition of the persistent login we now need a way to log out. cc @clagom

Describe the bug
The controller connection appears to disconnect after a short period of time. If you leave the application running you'll eventually see it time out. It's possible we have to enable the pinger to keep the connection alive. With a sufficiently large list of models the model status requests take too long and the next controller request falls outside the 'keep alive' time limit.

To Reproduce
Steps to reproduce the behavior:

1. Open application and have it list the models
2. Open the devtools and wait
3. The controller connection will time out.

Screenshots

Describe the bug

Sometimes when logging in, I get the following error in the console:

A refresh and another try will resolve it?

@cristinadresch commented on Tue Oct 22 2019

@hatched We were wondering if it would be possible to add this for the demo. If you are in a model and you do juju switch (model name) it refreshes the page with the UI for the new model? It would be a super cool thing to be able to showcase in the POC.

cc @clagom

In multiple places now we setup a memory router and routes. If we change the application routes then these routes will become out of sync.

This is somewhat related to #82

When logging out we clear the bakery to remove the user data but the application doesn't create a new bakery when logging in so you cannot log back in after logging out.

The login/out mechanisms need to be improved to make for easier clearing of user data and more robust checks for logins.

Introduced #111

We rely on the route specifications in the primary navigation as well as to route for the application. We should split it out into a separate component exporting both the route components and the route definitions.

To Reproduce
Steps to reproduce the behavior:

1. Open application & devtools network tab.
2. Switch between views in left column.
3. Note that the logo is requested over and over.

The series of selectors is now done in multiple places so we should combine them into one and imported in both places.

The items in the filter UI are static but should instead be generated by the values in the modelData.

see image:

The designs have the columns lining up across the tables. Currently each table width is being styled individually.

https://cl.ly/7c90d5e867be/Screenshot%202019-10-24%20at%2015.23.35.png

The side navigation (models, controllers, and so on) should display a notification for the number of blocked models.
Design:

Dev:

In the old GUI we would stack elements in one common place so that we don't end up with weird stacking issues as the application grows in complexity.

https://github.com/juju/juju-gui/blob/d01429be10395b6dc7e627ada71347cf807bdee9/gui/src/app/assets/css/_variables.scss#L85

use:

https://github.com/juju/juju-gui/blob/b309c95462c2c523bd209cc1d0351fbb1b714c01/gui/src/app/assets/css/_modal.scss#L8

When clicking the buttons to group the content, actually group it.

Describe the bug
Every time the table re-renders, so every time the data changes, each row gets bigger.

To Reproduce
Steps to reproduce the behavior:

1. Use Firefox
2. View your models and wait

Screenshots

Desktop (please complete the following information):

• OS: OSX
• Browser Firefox
• Version 70

vs

Introduced #111

The dashboard will need to run in a resticted environment and will not be able to talk to third party URLs.