request type based on mimetype

grafana · Dec 6, 2024 · 8008d4e · 8008d4e
1 parent 9b2e439
commit 8008d4e
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 8 deletions.
diff --git a/src/components/WebLogView/Row.tsx b/src/components/WebLogView/Row.tsx
@@ -1,12 +1,12 @@
-import { Box, Table, Text } from '@radix-ui/themes'
+import { Box, Table } from '@radix-ui/themes'
 
 import { ProxyData, ProxyDataWithMatches } from '@/types'
 
 import { MethodBadge } from '../MethodBadge'
 import { ResponseStatusBadge } from '../ResponseStatusBadge'
 import { TableCellWithTooltip } from '../TableCellWithTooltip'
 import { HighlightedText } from '../HighlightedText'
-import { isNonStaticAssetResponse } from '@/utils/staticAssets'
+import { getRequestType } from './WebLogView.utils'
 
 interface RowProps {
   data: ProxyDataWithMatches
@@ -54,11 +54,7 @@ export function Row({ data, isSelected, onSelectRequest }: RowProps) {
           />
         </ResponseStatusBadge>
       </Table.Cell>
-      <Table.Cell>
-        <Text size="1">
-          {isNonStaticAssetResponse(data) ? 'Dynamic' : 'Static'}
-        </Text>
-      </Table.Cell>
+      <TableCellWithTooltip>{getRequestType(data)}</TableCellWithTooltip>
       <TableCellWithTooltip>
         <HighlightedText text={data.request.host} matches={data.matches} />
       </TableCellWithTooltip>

diff --git a/src/components/WebLogView/WebLogView.tsx b/src/components/WebLogView/WebLogView.tsx
@@ -93,7 +93,7 @@ function RequestList({
         <Table.Row>
           <Table.ColumnHeaderCell width="70px">Method</Table.ColumnHeaderCell>
           <Table.ColumnHeaderCell width="60px">Status</Table.ColumnHeaderCell>
-          <Table.ColumnHeaderCell width="70px">Type</Table.ColumnHeaderCell>
+          <Table.ColumnHeaderCell width="80px">Type</Table.ColumnHeaderCell>
           <Table.ColumnHeaderCell width="20%">Host</Table.ColumnHeaderCell>
           <Table.ColumnHeaderCell width="80%">Path</Table.ColumnHeaderCell>
         </Table.Row>

diff --git a/src/components/WebLogView/WebLogView.utils.ts b/src/components/WebLogView/WebLogView.utils.ts
@@ -1,4 +1,6 @@
 import { GroupedProxyData, ProxyData } from '@/types'
+import { getContentType } from '@/utils/headers'
+import { isNonStaticAssetResponse } from '@/utils/staticAssets'
 
 export function removeQueryStringFromUrl(url: string) {
   return url.split('?')[0]
@@ -20,3 +22,12 @@ export function isGroupedProxyData(
 ): data is GroupedProxyData {
   return !Array.isArray(data)
 }
+
+export function getRequestType(data: ProxyData) {
+  if (isNonStaticAssetResponse(data)) {
+    return 'fetch'
+  }
+
+  const mimeType = getContentType(data.response?.headers ?? [])
+  return mimeType ? mimeType.split('/')[1] : 'unknown'
+}