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.
When the job log is loaded we parse it using an external parser. We used https://www.npmjs.com/package/anser (this decision was made with help from @timzallmann and @fatihacet on Slack)

Conclusion

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.

Next Steps

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 🔹 in the list above in one release cycle

Resources

FE @filipa | BE @ayufan

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

Proposal

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 be great to also have line numbers (extra: linkable line numbers)

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.

Decisions made:

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)
Technology:
- 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)