Add full screen view for logs

[tirkarthi]

Related #44663 (comment)

It will be useful to have logs open in full screen view to read the logs. Currently the tab and task details are still present on scroll taking more space. Legacy logs page had more screen space which was useful for our users internally. The implementation is simple that uses dialog to display the same code block with wrap and other styles applied in full screen mode.

Notes for reviewer and self :

• I would opt for removing Dialog.Header section too to get more space or replace log with some other useful information.
• Using an IconButton but can change to button with text "Full Screen" for uniformity.

[bbovenzi]

We should keep the try selector and wrap/unwrap button in the modal

[tirkarthi]

Thanks, I suppose the entire content from can become a component like <LogComponent> and then show FullScreen based on the present inside the dialog or not like below. Are there any other ways to do this idiomatic in react without a separate component?

<Box>
    <LogComponent showFullScreenButton />
    <Dialog>
        <LogComponent />
    </Dialog>
</Box>

[tirkarthi]

I tried copy pasting code to try this out. IMO it still takes up some space with tries, I would prefer selecting the log and then clicking on the fullscreen to utilise the screen space fully.

Full screen with task tries and wrap

Fullscreen without dialog header

[pierrejeambrun]

+1 for keeping the header. It's taking really few real estate in the page and allowing to navigate without having to close and then open again the full screen mode.

That's also consistant with how we build the graph,grid, etc... views. (there's a header). Also maybe the Task id too would be helpful. (for the grid graph etc... we have the dag_id). I can easily imagine someone losing track of what logs he is looking at after a while reading in the full screen page. Let's imagine we have multiple opened tabs like this at the same time, it's difficult to navigate and remember about.

[tirkarthi]

Thanks @bbovenzi and @pierrejeambrun for the feedback. It also makes it consistent with other pages if this is the intended design. I will wait for @bbovenzi comment to see if there is any way to do this in react since without a component or if a component is the best way.