fix log message

[abhinandan13jan]

Addresses

https://issues.redhat.com/browse/ODC-3759

Issue

Log message for incorrect task reference shows incorrect styling

Solution

Changed styling for log container

Screenshot

Tests

none

browser confirmation

Chrome

[andrewballantyne]

Looks like the issue here is poor layout from the Logs tab content overall. It seems we are using margins awkwardly and it's causing a bit of a rendering issue.

With the current changes, you have a bit of a different look and feel to your page (footer of the Logs tab is smaller):

This is because of the margin. My first instinct was to fix the margin by moving it up a level, but that causes some other issues... we may need UX to weigh in here.

For instance, you get a problem when you're on a task that doesn't exist (like a url with another task name after /logs, like /logs/not-a-task) but have other tasks you can select. With your current changes, you can sorta see the UI shifts around a bit:

So even if we remove your margin and get rid of that white space at the top, it's still going to shift around 🤔 Not sure if it's a big deal or not... it shifts a little at the top current (the margin is not the same height as the buttons along the top of the log).

Also, while we are here, can we just eliminate the fallback use-case styling issue as well?

In PipelineRunLogs, we have this snippet:

          {activeItem ? (
            <Firehose key={activeItem} resources={resources}>
              <LogsWrapperComponent
                taskName={_.get(taskRunFromYaml, [activeItem, 'pipelineTaskName'], '-')}
                downloadAllLabel="Download All Task Logs"
                onDownloadAll={downloadAllCallback}
              />
            </Firehose>
          ) : _.has(obj, ['status', 'conditions', 0, 'message']) ? (
            <div className="odc-pipeline-run-logs__log">
              {_.get(obj, ['status', 'conditions', 0, 'message'], '-')}
            </div>
          ) : (
            <div>No Logs Found</div>
          )}

I think we can simplify this to:

          {activeItem ? (
            <Firehose key={activeItem} resources={resources}>
              <LogsWrapperComponent
                taskName={_.get(taskRunFromYaml, [activeItem, 'pipelineTaskName'], '-')}
                downloadAllLabel="Download All Task Logs"
                onDownloadAll={downloadAllCallback}
              />
            </Firehose>
          ) : (
            <div className="odc-pipeline-run-logs__log">
              {_.get(obj, ['status', 'conditions', 0, 'message'], 'No Logs Found')}
            </div>
          )}

[andrewballantyne]

Ah, this 100% is not the same as the 100% that is provided by the actual MultiStreamLogs component. Because of the margin-top, you are pushing into the footer padding of the Logs tab.

[abhinandan13jan]

I've clubbed both the messages and changed the margin to internal padding

[andrewballantyne]

LGTM, please squash your commits though.

[andrewballantyne]

/lgtm

Odd I didn't get an email notification about this.

[openshift-ci-robot]

[APPROVALNOTIFIER] This PR is APPROVED

This pull-request has been approved by: abhinandan13jan, andrewballantyne

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/packages/dev-console/OWNERS [andrewballantyne]

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

[openshift-bot]

/retest

Please review the full test history for this PR and help us cut down flakes.