feat: add type column to WebLogView (#372)

grafana · Dec 12, 2024 · b7a793a · b7a793a
1 parent 564aab9
commit b7a793a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
diff --git a/src/components/WebLogView/Row.tsx b/src/components/WebLogView/Row.tsx
@@ -6,6 +6,7 @@ import { MethodBadge } from '../MethodBadge'
 import { ResponseStatusBadge } from '../ResponseStatusBadge'
 import { TableCellWithTooltip } from '../TableCellWithTooltip'
 import { HighlightedText } from '../HighlightedText'
+import { getRequestType } from './WebLogView.utils'
 
 interface RowProps {
   data: ProxyDataWithMatches
@@ -53,6 +54,7 @@ export function Row({ data, isSelected, onSelectRequest }: RowProps) {
           />
         </ResponseStatusBadge>
       </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,6 +93,7 @@ function RequestList({
         <Table.Row>
           <Table.ColumnHeaderCell width="70px">Method</Table.ColumnHeaderCell>
           <Table.ColumnHeaderCell width="60px">Status</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'
+}