UX updates for pipeline logs

[DaoDaoNoCode]

JIRA: https://issues.redhat.com/browse/RHOAIENG-6582

Description

Follow the mockup to do the following updates:

1. Update the alert text, add 2 links to allow users to view raw logs or download the current step in the alert

2. Add a mousedown event to capture the highlight and click the event in the log window and pause the logs as needed
3. Updated the tooltip and icon for pause/resume logs

4. Remove the log viewer footer

How Has This Been Tested?

1. Check the JIRA comment, use the log-forever-pipeline and create a run
2. Check the node logs, and verify all the changes based on the mockup

Test Impact

N/A, mostly UX updates, and needs manual verification.

Request review criteria:

Self checklist (all need to be checked):

• The developer has manually tested the changes and verified that the changes work
• Testing instructions have been added in the PR body (for PRs involving changes that are not immediately obvious).
• The developer has added tests or explained why testing cannot be added (unit or cypress tests for related changes)

If you have UI changes:

• Included any necessary screenshots or gifs if it was a UI change.
• Included tags to the UX team if it was a UI/UX change.

After the PR is posted & before it merges:

• The developer has tested their solution on a cluster by using the image produced by the PR to main

[DaoDaoNoCode]

@yannnz Can you check the screenshots above?

[codecov]

Codecov Report

Attention: Patch coverage is 90.90909% with 1 line in your changes missing coverage. Please review.

Project coverage is 84.77%. Comparing base (355fbf7) to head (3d956d3).
Report is 6 commits behind head on main.

Files with missing lines	Patch %	Lines
...t/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx	88.88%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #3295      +/-   ##
==========================================
+ Coverage   84.76%   84.77%   +0.01%     
==========================================
  Files        1309     1309              
  Lines       29318    29321       +3     
  Branches     7981     7979       -2     
==========================================
+ Hits        24850    24858       +8     
+ Misses       4468     4463       -5     

Files with missing lines	Coverage Δ
...tend/src/concepts/dashboard/DashboardLogViewer.tsx	100.00% <ø> (ø)
...linesDetails/pipelineRun/runLogs/LogsTabStatus.tsx	52.77% <100.00%> (+2.77%)	⬆️
...t/pipelinesDetails/pipelineRun/runLogs/LogsTab.tsx	76.47% <88.88%> (+1.47%)	⬆️

... and 3 files with indirect coverage changes

---

Continue to review full report in Codecov by Sentry.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 355fbf7...3d956d3. Read the comment docs.

[yannnz]

@yannnz Can you check the screenshots above?

@DaoDaoNoCode, wonder what are the sizes of the pause and resume action buttons? It seems a bit smaller.
For the second point of adding mousedown events, just double check if I understand it correctly: we already have the scroll to pause interaction, so we only need to add highlight to pause and click to pause the log viewer streaming in this ticket, right?

[DaoDaoNoCode]

Hi @yannnz, the icon is 14x14, which is the same size as the search icon

For the second point, what you said is correct.

[dpanshug]

When i expand or un-expand the LogTabStatus the log scrolls to the start. I would expect it to be at the same position. wdyt @yannnz ?

Screen.Recording.2024-10-09.at.7.39.36.PM.mov

[dpanshug]

@DaoDaoNoCode regarding the pause/resume icon size, i agree with @yannnz that seems a bit smaller to me also. can we increase to lg? https://www.patternfly.org/components/icon#sizes

[DaoDaoNoCode]

@yannnz @dpanshug I updated the icon size to medium, does it look better?

[DaoDaoNoCode]

As for the issue you mentioned above @dpanshug, I think it's a known issue in the PF log viewer and a limitation there because everything got rendered dynamically. When the container height changes, it's hard to estimate which line it remained at.

[Gkrumbach07]

/lgtm

tested and works as expected. I am able to highlight and copy without it jumping around

[openshift-ci]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: Gkrumbach07

The full list of commands accepted by this bot can be found here.

The pull request process is described here

Needs approval from an approver in each of these files:

• frontend/OWNERS [Gkrumbach07]

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment