[Summary] Improvements on actions run/job detail page

[HesterG]

Feature Description

For this page, some improvements on ui can be made:

1. For the left panel, it is better to show rerun icon only on hover, and add style when the job is selected

   Untitled.mov

2. Move the rerun workflow icon to a consistent position. Probably move it to top right corner as a button, or add a management section under left panel

   

   Possible option 1: Top right corner
   

   Possible option 2: Add management section on left panel
   

3. Adjust fonts (maybe generally smaller and use some secondary colors so the page will look more spatial), and add on hover effects to the log lines. And add loading effect when exanpanding the log.

   On hover effect:

   

   Loading when expanding log lines:

   Untitled.mov

4. Add some left/right padding to the action-view-container

5. Add gt-ellipsis to summary lines

   

Screenshots

No response

[wolfogre]

Some work has been done at #24611

[wolfogre]

One more thing, when loading the page, you will see an instant failure icon.

Screen.Recording.2023-05-10.at.13.37.21.mov

[silverwind]

One more thing, when loading the page, you will see an instant failure icon.

Backend should render this initially on page load if possible, JS can then afterwards take over for dynamic updates.

Adjust fonts (maybe generally smaller and use some secondary colors so the page will look more spatial)

For the "console box": Maybe tone down the bold in the fonts and use a less contrasting text color. I think we should consider not using the super contrastful console colors. I would also consider actually making the console window have a light background on light theme. This black box just looks out of place in a light theme to me.

[HesterG]

One more thing, when loading the page, you will see an instant failure icon.

Backend should render this initially on page load if possible, JS can then afterwards take over for dynamic updates.

I think this is because ActionRunStatus renders failure icon by default, should adjust that condition to only accept explicit action status.

[HesterG]

For the "console box": Maybe tone down the bold in the fonts and use a less contrasting text color. I think we should consider not using the super contrastful console colors.

I will try to use secondary colors as they are grey and should make less contrast.

I would also consider actually making the console window have a light background on light theme. This black box just looks out of place in a light theme to me.

I am pretty bad at managing color themes, might need some help with this..

[silverwind]

I can probably check out the console box colors later.

Do people generally agree that white background on light theme is fine?

[wolfogre]

Do people generally agree that white background on light theme is fine?

I would say I would agree only if I see the demo and it looks good. Because the console box is always black on Drone CI or GitHub Actions even if the theme is light. That's not a strong reason, just a stereotype.

Details

[silverwind]

I think it goes against the theme's design to put a box of the opposing color scheme into the interface. In the past, many terminals where black, but today it's very much possible to run a light terminal as well and many do.

[lunny]

I never used a white background terminal...