feat: Log tab enhancements

[salman-amjad]

• Adds a Live button which will allow us to tail logs
• Adds a Fullscreen option
• Adds the ability to do a simple filter
• Use line numbers for logs

bull-board-logs-ui-update.mov

[felixmosh]

Cool PR, I'll review it asap, thank you 🙏🏼

[felixmosh]

In addition there are several UX improvements,

1. The board doesn't supports Dark mode (maybe we should open a new issue for it), so the logs should be with a white theme. otherwise, it catches a lot of attention.
2. The custom scroller looks out of place, bulky, maybe it is better to make it a bit thiner.
3. There is no spacing between the percentage loader and the logs container.
4. The Buttons in the UI are based on icons, I think that it is better to make the Fullscreen & Live buttons as icons only
5. The search text is white on white, (I'm using a OS dark theme)
   

Overall, this is really great improvement to the logs section, and I'll happy to add it to the board 🙏🏼 .

I think that it is better to split these improvements into small PRs:

1. Fullscreen capabilities
2. Live mode when the job is active
3. Ability to search inside logs.

[felixmosh]

Why not to scroll the container to 0?

[felixmosh]

Some styles changes, and code refactoring

[felixmosh]

@salman-amjad I've made some improvements and style changes, can you review this branch?

git remote -v #check if you have an upstream points to this repo
git remote add upstream [email protected]:felixmosh/bull-board.git # run to add an upstream if not exists
git fetch upsteam
git branch -b pr-458-improvments

EDIT: I've pushed the changes :]

[salman-amjad]

@salman-amjad I've made some improvements and style changes, can you review this branch?

git remote -v #check if you have an upstream points to this repo
git remote add upstream [email protected]:felixmosh/bull-board.git # run to add an upstream if not exists
git fetch upsteam
git branch -b pr-458-improvments

EDIT: I've pushed the changes :]

I actually got to something pretty similar myself haha

[salman-amjad]

@felixmosh I've copied some of your improvements from pr-458-improvments. Using <ol /> to generate line numbers doesn't seems to be working as it won't preserve the line numbers after a filter is applied

I'll probably do another PR after this one to move settings like polling time etc to settings UI

bull-board-logs-ui-update-v2.mov

[felixmosh]

@felixmosh I've copied some of your improvements from pr-458-improvments. Using <ol /> to generate line numbers doesn't seems to be working as it won't preserve the line numbers after a filter is applied

I'll probably do another PR after this one to move settings like polling time etc to settings UI

bull-board-logs-ui-update-v2.mov

Pay attention, I'm using ol, but not the default numbering... It do preserves line number, and the benefit of this method is that all the logs are aligned (when a line number digit increases)

[salman-amjad]

@felixmosh I've copied some of your improvements from pr-458-improvments. Using <ol /> to generate line numbers doesn't seems to be working as it won't preserve the line numbers after a filter is applied
I'll probably do another PR after this one to move settings like polling time etc to settings UI
bull-board-logs-ui-update-v2.mov

Pay attention, I'm using ol, but not the default numbering... It do preserves line number, and the benefit of this method is that all the logs are aligned (when a line number digit increases)

I know what that piece of code is doing and we need to use value attribute instead of data-line-number to make it work on all major browsers ( https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li#attr-value ), but the issue is that it adds a lot of whitespace around some line numbers when the line numbers get up to 4+ digits length

Up to you tho, if you think it looks better with the ol plz feel free to add it back in

[felixmosh]

Thank you for this PR, and the co-operation
This PR released in v4.6.0