Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add type column to WebLogView #372

Open
wants to merge 3 commits into
base: main
Choose a base branch
from

Conversation

cristianoventura
Copy link
Collaborator

Description

This PR adds a new Type column to the WebLogView component to differentiate static assets from dynamic requests.

How to Test

  • Toggle the "Show static assets" switch
  • Check that the Type column shows the appropriate label for each request

Checklist

  • I have performed a self-review of my code.
  • I have added tests for my changes.
  • I have run linter locally (npm run lint) and all checks pass.
  • I have run tests locally (npm test) and all tests pass.
  • I have commented on my code, particularly in hard-to-understand areas.

Screenshots (if appropriate):

image

Related PR(s)/Issue(s)

Resolves #325

@cristianoventura cristianoventura self-assigned this Dec 4, 2024
@cristianoventura cristianoventura requested a review from a team as a code owner December 4, 2024 15:14
@cristianoventura cristianoventura requested review from going-confetti and e-fisher and removed request for a team December 4, 2024 15:14
e-fisher
e-fisher previously approved these changes Dec 6, 2024
Copy link
Collaborator

@e-fisher e-fisher left a comment

Choose a reason for hiding this comment

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

LGTM

@@ -53,6 +54,11 @@ export function Row({ data, isSelected, onSelectRequest }: RowProps) {
/>
</ResponseStatusBadge>
</Table.Cell>
<Table.Cell>
<Text size="1">
{isNonStaticAssetResponse(data) ? 'Dynamic' : 'Static'}
Copy link
Collaborator

Choose a reason for hiding this comment

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

I was under the impression we wanted this to work similarly to the browser dev tools:
image
image
If we only want to mark static requests, I suggest something that will take less horizontal space in WebLogView - maybe an icon or something like that

Copy link
Collaborator Author

@cristianoventura cristianoventura left a comment

Choose a reason for hiding this comment

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

@going-confetti I made a change to include a more descriptive "type" based on the content-type returned by the request.

image


export function getRequestType(data: ProxyData) {
if (isNonStaticAssetResponse(data)) {
return 'fetch'
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

ChromeDevTools categorizes this a bit more. I was debating whether to call it "document", "dynamic" or "fetch". Any thoughts?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Web Log Viewer: add type column
3 participants