import React from "react"
import {RequestUtils, ResponseUtils} from "../flow/utils.js"
import {formatSize, formatTimeDelta} from "../utils.js"
export function TLSColumn({flow}) {
let ssl = (flow.request.scheme === "https")
let classes
if (ssl) {
classes = "col-tls col-tls-https"
} else {
classes = "col-tls col-tls-http"
}
return
|
}
TLSColumn.Title = ({className = "", ...props}) => |
TLSColumn.sortKeyFun = flow => flow.request.scheme
export function IconColumn({flow}) {
let icon
if (flow.response) {
var contentType = ResponseUtils.getContentType(flow.response)
//TODO: We should assign a type to the flow somewhere else.
if (flow.response.status_code === 304) {
icon = "resource-icon-not-modified"
} else if (300 <= flow.response.status_code && flow.response.status_code < 400) {
icon = "resource-icon-redirect"
} else if (contentType && contentType.indexOf("image") >= 0) {
icon = "resource-icon-image"
} else if (contentType && contentType.indexOf("javascript") >= 0) {
icon = "resource-icon-js"
} else if (contentType && contentType.indexOf("css") >= 0) {
icon = "resource-icon-css"
} else if (contentType && contentType.indexOf("html") >= 0) {
icon = "resource-icon-document"
}
}
if (!icon) {
icon = "resource-icon-plain"
}
icon += " resource-icon"
return
|
}
IconColumn.Title = ({className = "", ...props}) => |
export function PathColumn({flow}) {
return
{flow.request.is_replay ? : null}
{flow.intercepted ? : null}
{ RequestUtils.pretty_url(flow.request) }
|
}
PathColumn.Title = ({className = "", ...props}) =>
Path |
PathColumn.sortKeyFun = flow => RequestUtils.pretty_url(flow.request)
export function MethodColumn({flow}) {
return {flow.request.method} |
}
MethodColumn.Title = ({className = "", ...props}) =>
Method |
MethodColumn.sortKeyFun = flow => flow.request.method
export function StatusColumn({flow}) {
let status
if (flow.response) {
status = flow.response.status_code
} else {
status = null
}
return {status} |
}
StatusColumn.Title = ({className = "", ...props}) =>
Status |
StatusColumn.sortKeyFun = flow => flow.response ? flow.response.status_code : undefined
export function SizeColumn({flow}) {
let total = flow.request.contentLength
if (flow.response) {
total += flow.response.contentLength || 0
}
let size = formatSize(total)
return {size} |
}
SizeColumn.Title = ({className = "", ...props}) =>
Size |
SizeColumn.sortKeyFun = flow => {
let total = flow.request.contentLength
if (flow.response) {
total += flow.response.contentLength || 0
}
return total
}
export function TimeColumn({flow}) {
let time
if (flow.response) {
time = formatTimeDelta(1000 * (flow.response.timestamp_end - flow.request.timestamp_start))
} else {
time = "..."
}
return {time} |
}
TimeColumn.Title = ({className = "", ...props}) =>
Time |
TimeColumn.sortKeyFun = flow => flow.response.timestamp_end - flow.request.timestamp_start
var all_columns = [
TLSColumn,
IconColumn,
PathColumn,
MethodColumn,
StatusColumn,
SizeColumn,
TimeColumn
]
export default all_columns