Skip to content

Add copy button to structured logs message column#2344

Merged
JamesNK merged 14 commits intomicrosoft:mainfrom
adamint:dev/adamint/add-copy-button-structured-logs-message
Mar 25, 2024
Merged

Add copy button to structured logs message column#2344
JamesNK merged 14 commits intomicrosoft:mainfrom
adamint:dev/adamint/add-copy-button-structured-logs-message

Conversation

@adamint
Copy link
Copy Markdown
Member

@adamint adamint commented Feb 21, 2024

Resolves #2109

word-wrap: nowrap had to be added to GridValue's css as otherwise the content could overflow to another line; this property is beneficial for the other uses of GridValue too, which can suffer from the same problem.

image

Microsoft Reviewers: Open in CodeFlow

Copy link
Copy Markdown
Member

@JamesNK JamesNK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

  1. The background color of the copy button doesn't look good. Should it be transparent when not hovered over? That's the same experience as non-error/warning rows, it just so happens the background colors match.
  2. The exception details icon is on a different line.

@dotnet-policy-service dotnet-policy-service Bot added the needs-author-action An issue or pull request that requires more info or actions from the author. label Feb 22, 2024
@adamint
Copy link
Copy Markdown
Member Author

adamint commented Feb 22, 2024

Fixed both.
image

@dotnet-policy-service dotnet-policy-service Bot removed the needs-author-action An issue or pull request that requires more info or actions from the author. label Feb 22, 2024
@mitchdenny mitchdenny added this to the preview 4 (Mar) milestone Feb 23, 2024
@JamesNK
Copy link
Copy Markdown
Member

JamesNK commented Feb 23, 2024

image

  1. The button hover color has also disappeared. I don't have a strong opinion about whether a hover color makes sense when hovering on a row with a color, but it's now been removed for all copy buttons.
  2. The copy button is no longer at the end of the column.

Compare with resources page:

image

@adamint
Copy link
Copy Markdown
Member Author

adamint commented Feb 26, 2024

The button hover color has also disappeared. I don't have a strong opinion about whether a hover color makes sense when hovering on a row with a color, but it's now been removed for all copy buttons.

I made it so the background is only transparent on error.

The copy button is no longer at the end of the column.

I do not think the copy button should be at the end of the column. Considering how long the message column can be, it is unlikely to be discoverable. Contrast this with the resources page, which has a small source column width

@adamint adamint requested a review from JamesNK February 26, 2024 20:06
Comment thread src/Aspire.Dashboard/Components/Controls/GridValue.razor Outdated
Comment thread src/Aspire.Dashboard/Components/Controls/GridValue.razor Outdated
@adamint adamint requested a review from tlmii February 26, 2024 22:25
Copy link
Copy Markdown
Member

@tlmii tlmii left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Much cleaner! Thanks!

I do think the "should the copy button be all the way at the end" is worth a conversation before GA but relative to adding the copy button functionality, I don't think its worth blocking the PR at the moment.

Copy link
Copy Markdown
Member

@JamesNK JamesNK left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do not think the copy button should be at the end of the column. Considering how long the message column can be, it is unlikely to be discoverable. Contrast this with the resources page, which has a small source column width

The source column displays it at the end of the column. Also, the property grid has the button at the end of the column, which can be long if displayed horizontally.

For example:
copy-button

This isn't urgent for P4 and doesn't need to be rushed in. Please make it consistent.

If we want to change copy buttons in columns across the app then that should be separate issue to consider properly.

@dotnet-policy-service dotnet-policy-service Bot added the needs-author-action An issue or pull request that requires more info or actions from the author. label Feb 26, 2024
@joperezr
Copy link
Copy Markdown
Member

Friendly reminder that this PR is assigned to the Preview 4 milestone which is snapping in a couple of hours. Please ensure it is merged by 4pm PST in order to ensure the change will be part of Preview 4.

Adam Ratzman added 2 commits March 13, 2024 11:27
…tured-logs-message

# Conflicts:
#	src/Aspire.Dashboard/Components/ResourcesGridColumns/LogMessageColumnDisplay.razor
@adamint
Copy link
Copy Markdown
Member Author

adamint commented Mar 13, 2024

@JamesNK updated
image

I also added disposal of the fluent tooltip when the grid value is disposed

@adamint adamint requested a review from JamesNK March 13, 2024 16:02
@dotnet-policy-service dotnet-policy-service Bot removed no-recent-activity needs-author-action An issue or pull request that requires more info or actions from the author. labels Mar 13, 2024
@adamint
Copy link
Copy Markdown
Member Author

adamint commented Mar 13, 2024

No change to existing buttons
image

Comment thread src/Aspire.Dashboard/Components/Controls/GridValue.razor Outdated

public void Dispose()
{
_tooltipComponent?.Dispose();
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Why is this necessary? There are other places we're using tooltip and not disposing.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This will close the tooltip. I could only reproduce the issue you filed about the tooltips not closing on data grid data update on tooltips located in the data grid itself. So I don’t think it’s necessary elsewhere

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Which issue is that? I'd like to test it works.

There should be a comment saying why it's being disposed.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I swear there was an issue that you filed about multiple tooltips appearing when hovering over the copy button & data changes in a data grid, but I cannot find it.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This one: #2704

Test on the stress project. The resources that update have this behavior.

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I am unable to run the stress project. Starting some of the projects fails

@JamesNK
Copy link
Copy Markdown
Member

JamesNK commented Mar 14, 2024

The cell browser tooltip shows up:

image

I added changes to the error icon to fix this happening. Add them to the copy button.

@adamint
Copy link
Copy Markdown
Member Author

adamint commented Mar 25, 2024

Hidden now
image

@adamint adamint requested a review from JamesNK March 25, 2024 18:38
@JamesNK JamesNK enabled auto-merge (squash) March 25, 2024 22:24
@JamesNK JamesNK merged commit 0eaeab4 into microsoft:main Mar 25, 2024
@github-actions github-actions Bot locked and limited conversation to collaborators Apr 25, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Add copy button to structured logs message column

6 participants