Make a PoC for job's details page
Final result of the PoC
For 9.5 the work in this PoC is done. As discussed in ci/cd weekly team, the conclusions we reached are:
What was done:
From the graph in the pipelines page, when the user clicks on a job we open a closable tab that loads job information.
It is doable to use this new user interaction and it is doable to parse the log in the frontend. As long as we do not parse it all at once in the frontend.
We also can't have more than one open tab with the log at once.
In order to get this done there are some things that need to be done:
🔹Tabs component in Vue.js - already in the PoC ✅ 🔹Jobs table needs to be build in vue.js 🔹Jobs table needs an endpoint;
Failed jobs needs to be build in vue.js and also needs an endpoint;
🔹Open a new (closable) tab when the user clicks in a job in the graph - already in the PoC ✅ 🔹Use an external ansi parser in the first iteration - already in the PoC ✅ 🔹Render linkable lines and render links in the log
(Maybe extend the parser or write our own parser in the 2nd iteration do allow for collapsible sections.)
🔹Handle URL state to show the open tab - started in the PoC 🔹Load the log in chunks for better performance 🔹Backend needs to header section in the API - note that some fields are markdown
I believe we can accomplish all the next steps marked with
Job's details page has a lot of features and a lot of specific details that we could make better.
Currently we have:
- Realtime on header
- Realtime on a small part of sidebar
- Haml on the rest of the sidebar
- jQuery in the trace output
- Nicescroll on the sidebar
Features of the output:
- Show the received output
- Keep requesting the output in case the job is not complete
- Show scroll controllers if page is scrollable
- Scroll to the bottom when we receive the output if the user has not scrolled
- Show animated scroll button if the auto scroll is enabled
- Show animation in the end of the log if it is not completed
- Show information about truncated info if size received is bigger than the previous log size received
We could improve the user experience on this page by providing the same information in a less crowded way. We could also make this view usable on mobile and smaller screens.
The main problem of smaller screens is the sidebar. Maybe we could remove the sidebar and found another way of showing data and see the output on mobile. Removing the sidebar would also allow for a cleaner code base:
- No nicescroll
- No recalculations to toggle the sidebar
- No calculations to either show it open or closed depending on the window size
It would also be great if we could simplify the code a little:
- Add new polling to the all page would allow us to:
- Remove checks for complete build and fetching every 4s
- Remove nicescroll by moving sidebar data to other place.
Travis-like implementation, with option for expandable sections in future iteration
Line numbers, with option to convert to timestamps in future iteration (either Relative job start time, relative pipeline start time, absolute time)
- Probably do as much as possible on front-end to keep it flexible + better scalability
- See if xterm is a viable option otherwise build it ourselves (possibly with vue?)
- Want to support infinite job logs (100MB+)
- Possibly have a way of just loading in log.txt (preferably only part of it for large build logs, the dividing log.txt in multiple parts if size exceeds threshold would be done and delivered by back-end)
Move job's detail view into pipeline view (improved context)
- Have closable tabs inside pipeline view.. as to not lose "open multiple tabs" (this will be presented in the url as well, together with line number.. for absolute url referencing)
The following UX is a target and subject to change as the WIP is iterated.