feat: Update WebLogView to handle common mime types #41

2Steaks · 2024-07-17T13:31:40Z

Closes https://github.com/grafana/k6-cloud/issues/2389

This PR updates the WebLogView

Handle various common mime types
Add split pane for request/response
Add rendering/raw content views
Add cookies view

Screen.Recording.2024-07-17.at.14.25.16.mov

Questions

Do we want to start using emotion for all styling?
Should we hide tabs that don't have content?

- Update Remove padding from Drawer component - Update WebLogView/Row/SideBar layout - Add RequestDetails components - Add ResponseDetails components - Add a Tabs component to fill the height of the Allotment component

e-fisher

This looks so much better 💯

There's some duplication in the code where I left comments, but overall looks good!

Few things regarding UI/UX:

There's no longer a close button in the drawer - no way to hide it
I think one important mime type missed is form data, that must be quite common. We have an example in test.k6.io:

Can we add another label to the switch to make it more clear what it switches between?

e-fisher · 2024-07-18T07:22:45Z

src/components/WebLogView/RequestDetails/Cookies.tsx

+export function Cookies({ data }: { data: ProxyData }) {
+  const cookies = data.request.cookies || []
+
+  if (!cookies.length) {
+    return (
+      <Flex height="200px" justify="center" align="center">
+        Cookies not available
+      </Flex>
+    )
+  }
+
+  return (
+    <Table.Root size="1" variant="surface">
+      <Table.Header>
+        <Table.Row>
+          <Table.ColumnHeaderCell>Name</Table.ColumnHeaderCell>
+          <Table.ColumnHeaderCell>Value</Table.ColumnHeaderCell>
+        </Table.Row>
+      </Table.Header>
+
+      <Table.Body>
+        {cookies.map(([name, value], index) => (
+          <Table.Row key={index}>
+            <Table.Cell>{name}</Table.Cell>
+            <Table.Cell>{value}</Table.Cell>
+          </Table.Row>
+        ))}
+      </Table.Body>
+    </Table.Root>
+  )
+}


Request and response Cookies components are almost the same, instead of passing ProxyData you could pass just the cookies (either request's or response's) and reuse the same component

e-fisher · 2024-07-18T07:27:35Z

src/components/WebLogView/RequestDetails/Payload.tsx

+const options: editor.IStandaloneEditorConstructionOptions = {
+  automaticLayout: true,
+  codeLens: false,
+  contextmenu: false,
+  domReadOnly: true,
+  fixedOverflowWidgets: true,
+  foldingMaximumRegions: 5,
+  lineNumbers: 'off',
+  minimap: {
+    enabled: false,
+    renderCharacters: false,
+  },
+  overviewRulerBorder: false,
+  readOnly: true,
+  scrollbar: {
+    alwaysConsumeMouseWheel: true,
+    horizontalScrollbarSize: 3,
+    verticalScrollbarSize: 3,
+  },
+  scrollBeyondLastLine: false,
+  tabSize: 1,
+  wordWrap: 'off',
+}


Duplicate options and theme switching logic between Payload and Preview, that's a good candidate for a shared component

e-fisher · 2024-07-18T07:35:02Z

src/components/WebLogView/Tabs.tsx

+import { Tabs as RadixTabs } from '@radix-ui/themes'
+import { ComponentProps } from 'react'
+
+function Root({ children, ...props }: ComponentProps<typeof RadixTabs.Root>) {


Wasn't sure why we need tabs wrapper at a glance, maybe it would be useful to have a comment here?

2Steaks · 2024-07-18T10:17:50Z

Can we add another label to the switch to make it more clear what it switches between?

I've opted for the segmented control component instead.

- Consolidate Cookie component - Consolidate Read-only editor component - Update raw/preview switch to segmented controls

2Steaks · 2024-07-18T11:09:58Z

I think one important mime type missed is form data, that must be quite common

Thank you for finding the example request!

# Conflicts: # src/components/RequestDetails/RequestDetails.utils.ts

e-fisher

Still says "payload not available" for some reason 🤔 did you push all changes?

going-confetti · 2024-07-19T08:10:55Z

src/components/WebLogView/ResponseDetails/Preview.tsx

+export function Preview({ content, contentType, format }: PreviewProps) {
+  if (format === 'image') {
+    return (
+      <img


This needs a fallback:

Depending on how easy it is to implement it, we may want to create a separate issue for that work

Looks like it's broken for PNGs and SVGs - I can share the HAR I used if you want

going-confetti · 2024-07-19T08:30:55Z

src/components/WebLogView/ResponseDetails/ResponseDetails.utils.ts

+      case 'plain':
+        return safeAtob(content)
+      case 'audio':
+      case 'font':


Maybe this should also be safeAtob(content)?

going-confetti · 2024-07-19T08:38:43Z

src/components/WebLogView/ResponseDetails/Content.tsx

+          variant="classic"
+          onValueChange={(value) => setIsPreview(value === 'preview')}
+        >
+          <SegmentedControl.Item value="raw">Raw</SegmentedControl.Item>


I think for some MIME types (like images), we shouldn't let the user see the raw response

- Disable raw content for media files

going-confetti

LGTM!

2Steaks added 2 commits July 17, 2024 14:10

feat: Update WebLogView components

71d8ff5

- Update Remove padding from Drawer component - Update WebLogView/Row/SideBar layout - Add RequestDetails components - Add ResponseDetails components - Add a Tabs component to fill the height of the Allotment component

feat: Add padding to main window

fad3df5

2Steaks self-assigned this Jul 17, 2024

feat: Add response cookies tab

d3f20e5

2Steaks marked this pull request as ready for review July 17, 2024 18:56

2Steaks requested review from going-confetti and e-fisher and removed request for going-confetti July 17, 2024 18:56

e-fisher requested changes Jul 18, 2024

View reviewed changes

feat: Handle form data

ce12389

- Consolidate Cookie component - Consolidate Read-only editor component - Update raw/preview switch to segmented controls

2Steaks requested a review from e-fisher July 18, 2024 11:10

2Steaks added 2 commits July 18, 2024 12:13

Merge branch 'main' into feat/weblogview-mime-types

659a019

# Conflicts: # src/components/RequestDetails/RequestDetails.utils.ts

refactor: Add comments for custom Tabs component

0f1b06e

e-fisher reviewed Jul 18, 2024

View reviewed changes

going-confetti reviewed Jul 19, 2024

View reviewed changes

fix: Update form data handling

d7cd72b

2Steaks requested a review from e-fisher July 19, 2024 09:15

fix: Handle audio, video, css, js files

3826084

- Disable raw content for media files

2Steaks requested a review from going-confetti July 19, 2024 10:18

feat: Add font rendering

dec0fac

going-confetti approved these changes Jul 19, 2024

View reviewed changes

2Steaks merged commit 6326a18 into main Jul 19, 2024
1 check passed

2Steaks deleted the feat/weblogview-mime-types branch July 19, 2024 12:29

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: Update WebLogView to handle common mime types #41

feat: Update WebLogView to handle common mime types #41

2Steaks commented Jul 17, 2024 •

edited

Loading

e-fisher left a comment

e-fisher Jul 18, 2024

e-fisher Jul 18, 2024

e-fisher Jul 18, 2024

2Steaks commented Jul 18, 2024 •

edited

Loading

2Steaks commented Jul 18, 2024

e-fisher left a comment

going-confetti Jul 19, 2024

going-confetti Jul 19, 2024

going-confetti Jul 19, 2024

going-confetti Jul 19, 2024

going-confetti left a comment

feat: Update WebLogView to handle common mime types #41

feat: Update WebLogView to handle common mime types #41

Conversation

2Steaks commented Jul 17, 2024 • edited Loading

Questions

e-fisher left a comment

Choose a reason for hiding this comment

e-fisher Jul 18, 2024

Choose a reason for hiding this comment

e-fisher Jul 18, 2024

Choose a reason for hiding this comment

e-fisher Jul 18, 2024

Choose a reason for hiding this comment

2Steaks commented Jul 18, 2024 • edited Loading

2Steaks commented Jul 18, 2024

e-fisher left a comment

Choose a reason for hiding this comment

going-confetti Jul 19, 2024

Choose a reason for hiding this comment

going-confetti Jul 19, 2024

Choose a reason for hiding this comment

going-confetti Jul 19, 2024

Choose a reason for hiding this comment

going-confetti Jul 19, 2024

Choose a reason for hiding this comment

going-confetti left a comment

Choose a reason for hiding this comment

2Steaks commented Jul 17, 2024 •

edited

Loading

2Steaks commented Jul 18, 2024 •

edited

Loading