Fixes #2461: Build Log dashboard should use same layout/CSS as rest of Dashboard

[mqnguyen5]

Issue This PR Addresses

Type of Change

• UI: Change which improves UI

Description

This issue updates the Build Log dashboard to have the same layout/CSS as the rest of the Telescope dashboard.

Changes:

• Added header and sidebar
• Replaced Material UI logo with Telescope's logo and changed sidebar title to "Telescope Dashboard"
• Updated the Telescope logo inside the sidebar to redirect to ./

Results:

Checklist

• Quality: This PR builds and passes our npm test and works locally
• Tests: This PR includes thorough tests or an explanation of why it does not
• Screenshots: This PR includes screenshots or GIFs of the changes made or an explanation of why it does not (if applicable)
• Documentation: This PR includes updated/added documentation to user exposed functionality or configuration variables are added/changed or an explanation of why it does not(if applicable)

[gitpod-io]

[mqnguyen5]

Currently, this PR is not fully completed, as I still have some stuff to discuss in #2472.

[humphd]

Currently, this PR is not fully completed, as I still have some stuff to discuss in #2472.

What's the status of this? Also, please post a screenshot of it running.

[mqnguyen5]

@humphd I'll push the rest of the changes up by today.

[mqnguyen5]

I have made some changes based on what was discussed in #2472:

Screenshots:

• Main page

• Sidenav

[humphd]

@mqnguyen5 can you do a single screenshot of the whole thing, which is really want we want to see here?

[mqnguyen5]

Here it is:

I assume it means a screenshot of the whole page with the sidenav opened?

[humphd]

Let's add a left margin to the terminal so it has some breathing room next to the sidebar. Also, let's have it go higher in the page (don't waste so much space above it). I think it can be aligned with the top of the sidebar. Let's also have it fill the available space vertically.

[mqnguyen5]

If that's the case, should I remove the "Build Log" <h1> above the terminal? And the left margin should be added only when we open the sidenav?

[humphd]

I think so, since the sidebar acts as the anchoring navigational element (we don't need a title).

[mqnguyen5]

Currently, the page looks like this after remove the title and adjust the padding to make it closer to the top:

I'm not sure how I can add a margin when opening the sidenav and remove it when closing the sidenav. Is there a way to do it with Material UI?

[mqnguyen5]

@Andrewnt219, @menghif you have any suggestions on this?

[Andrewnt219]

@mqnguyen5 one quick way is you copy everything in the index.html, paste it on the build.html. Open Devtools, start deleting all the unrelated stuffs (with Element Inspector), copy the html from the Devtools and paste it back to your IDE. Finally, just add the tag div.id="termminal" to main content area.

[Andrewnt219]

I'm not sure how I can add a margin when opening the sidenav and remove it when closing the sidenav. Is there a way to do it with Material UI?

That sounds like JS magic. But why do you want to do this?

This is just Bootstrap 5 with vanilla JS btw, not the same as Material UI on Telescope.

[mqnguyen5]

After looking around, I managed to find out what is wrong. I didn't not realized that I had been showing screenshots of the site when opening in small window instead of going full screen.

I also adjusted the padding on the terminal per @humphd suggestion, so it should take less space from the top now.

[drew5494]

Tested and looks good on my end.