Skip to content

Commit

Permalink
固定格式的 http history 表格
Browse files Browse the repository at this point in the history
  • Loading branch information
@VillanCh
VillanCh committed Nov 29, 2021
1 parent 5685274 commit 684afac
Show file tree
Hide file tree
Showing 9 changed files with 216 additions and 201 deletions.
17 changes: 17 additions & 0 deletions app/main/handlers/queryHTTPFlow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,23 @@ module.exports = (win, getClient) => {
return await asyncQueryHTTPFlows(params)
})


// asyncQueryHTTPFlows wrapper
const asyncGetHTTPFlowByHash = (params) => {
return new Promise((resolve, reject) => {
getClient().GetHTTPFlowByHash(params, (err, data) => {
if (err) {
reject(err)
return
}
resolve(data)
})
})
}
ipcMain.handle("GetHTTPFlowByHash", async (e, params) => {
return await asyncGetHTTPFlowByHash(params)
})

ipcMain.handle("get-http-flow", async (r, hash) => {
getClient().GetHTTPFlowByHash({
Hash: hash,
Expand Down
37 changes: 12 additions & 25 deletions app/renderer/src/main/src/components/HTTPFlowDetail.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -220,39 +220,26 @@ export const HTTPFlowDetailMini: React.FC<HTTPFlowDetailProp> = (props) => {
return
}

ipcRenderer.on(props.hash, (e, data: HTTPFlow) => {
setFlow(data)
setTimeout(() => setLoading(false), 300)
})
ipcRenderer.on(`ERROR:${props.hash}`, (e, details) => {
failed(`查询该请求失败[${props.hash}]: ` + details)
})

setLoading(true)
ipcRenderer.invoke("get-http-flow", props.hash)

return () => {
ipcRenderer.removeAllListeners(props.hash)
ipcRenderer.removeAllListeners(`ERROR:${props.hash}`)
}
ipcRenderer.invoke("GetHTTPFlowByHash", {Hash: props.hash}).then((i: HTTPFlow) => {
setFlow(i)
}).catch(e => {
failed(`Query HTTPFlow failed: ${e}`)
}).finally(() => {
setLoading(false)
})
}, [props.hash])

if (!flow) {
return <></>
}

return <Row gutter={8}>
return <Row gutter={8} style={{height: "100%"}}>
<Col span={12}>
{/*<CodeViewer*/}
{/* value={new Buffer(flow.Request).toString("utf-8")}*/}
{/* mode={"http"} height={350} width={"100%"}*/}
{/*/>*/}
<HTTPPacketEditor originValue={flow.Request} readOnly={true} sendToWebFuzzer={props.sendToWebFuzzer} defaultHeight={props.defaultHeight}/>
{/*<div style={{height: 350}}>*/}
{/* <YakHTTPPacketViewer value={flow?.Request || []}/>*/}
{/* /!*<YakEditor readOnly={true} type={"http"}*!/*/}
{/* /!* value={new Buffer(flow.Request).toString("utf-8")}/>*!/*/}
{/*</div>*/}
<HTTPPacketEditor
originValue={flow.Request} readOnly={true} sendToWebFuzzer={props.sendToWebFuzzer}
defaultHeight={props.defaultHeight}
/>
</Col>
<Col span={12}>
<HTTPPacketEditor originValue={flow.Response} readOnly={true} defaultHeight={props.defaultHeight}/>
Expand Down
7 changes: 3 additions & 4 deletions app/renderer/src/main/src/components/HTTPFlowTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, {useEffect, useState,useRef,useMemo} from "react";
import React, {useEffect, useState, useRef, useMemo} from "react";
import {
Button,
Col,
Expand Down Expand Up @@ -317,7 +317,7 @@ export const HTTPFlowTable: React.FC<HTTPFlowTableProp> = (props) => {
}
}, [autoReload])

return <div style={{width: "100%",height:'100%'}}>
return <div style={{width: "100%", height: '100%', overflow: "auto"}}>
{!props.noHeader && <PageHeader
title={"HTTP History"}
subTitle={<Space>
Expand Down Expand Up @@ -432,7 +432,6 @@ export const HTTPFlowTable: React.FC<HTTPFlowTableProp> = (props) => {
</Col>
</Row>
}}
style={{paddingBottom: 20}}
size={"small"} loading={loading}
rowKey={"Hash"}
pagination={false}
Expand Down Expand Up @@ -473,7 +472,7 @@ export const HTTPFlowTable: React.FC<HTTPFlowTableProp> = (props) => {
}
}
}}
scroll={{x: "auto",y:props.tableHeight }}
scroll={{x: "auto", y: props.tableHeight}}
// @ts-ignore*/
onChange={(paging: any, _: any, sorter: SorterResult<HTTPFlow>) => {
if (sorter.order && sorter.columnKey) {
Expand Down
125 changes: 60 additions & 65 deletions app/renderer/src/main/src/components/HTTPHistory.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,78 +15,73 @@ export interface HTTPHistoryProp extends HTTPPacketFuzzable {

export const HTTPHistory: React.FC<HTTPHistoryProp> = (props) => {
const [selected, setSelectedHTTPFlow] = useState<HTTPFlow>();
const [tableHeight, setTableHeight] = useState(400);
const [detailHeight, setDetailHeight] = useState(400);

// 外部 DIV 配置
const [height, setHeight] = useState(window.outerHeight - 230);
const [refreshTrigger, setRefresh] = useState(false);
const refresh = () => {
setRefresh(!refreshTrigger)
}

const reseze=(l:HTMLDivElement,r:HTMLDivElement)=>{
setTableHeight([l][0].offsetHeight-100)
setDetailHeight([r][0].offsetHeight-50)
}
const showDetail=(i: HTTPFlow | undefined) =>{
setSelectedHTTPFlow(i)
if(!i) {
setTableHeight(height - 100)
}else{
setDetailHeight(((height-230)*0.35))
setTableHeight(height-330-detailHeight)
}

}

useEffect(() => {
if (selected) {
setTableHeight(340)
return
}

setTableHeight(height - 100)
}, [selected])

// useEffect(() => {
// setDetailHeight(height - tableHeight)
// }, [tableHeight])

return <div style={{width: "100%",flex:'1'}}>
<VerticalResize
firstResizable={(_, h: number) => {
if (selected) {
setTableHeight(h - 98)
}
}}
firstHideResize={!selected}
firstInitHeight={340}
firstMaxHeight={500}
firstNode={<div style={{height:'100%'}}>
<HTTPFlowTable
noHeader={true}
tableHeight={tableHeight}
onSendToWebFuzzer={props.sendToWebFuzzer}
onSelected={(i) => {
showDetail(i)
}}
paginationPosition={"topRight"}
/>
</div>}
secondHideResize={true} secondMinHeight={detailHeight} secondMaxHeight={detailHeight}
secondNode={selected && <div style={{overflow: "hidden", height: '100%'}}>
<Card bodyStyle={{padding: 0}} bordered={false}>
<HTTPFlowDetailMini
noHeader={true}
hash={selected.Hash}
sendToWebFuzzer={props.sendToWebFuzzer}
defaultHeight={detailHeight}
/>
</Card>
</div>}
reseze={reseze}
/>
return <div style={{
width: "100%", height: "100%",
// display: "flex", flexDirection: "column",
overflowY: selected ? "hidden" : "auto", overflowX: "hidden"
}}>
<div style={{
marginBottom: 0,
...(selected ? {height: "33%", overflow: "auto"} : {})
}}>
<HTTPFlowTable
noHeader={true}
// tableHeight={selected ? 164 : undefined}
onSendToWebFuzzer={props.sendToWebFuzzer}
onSelected={(i) => {
setSelectedHTTPFlow(i)
}}
paginationPosition={"topRight"}
/>
</div>
{selected && <div style={{height: "67%"}}>
<HTTPFlowDetailMini
noHeader={true}
hash={selected.Hash}
sendToWebFuzzer={props.sendToWebFuzzer}
// defaultHeight={detailHeight}
/>
</div>}
{/*<VerticalResize*/}
{/* firstResizable={(_, h: number) => {*/}
{/* if (selected) {*/}
{/* setTableHeight(h - 98)*/}
{/* }*/}
{/* }}*/}
{/* firstHideResize={!selected}*/}
{/* firstInitHeight={340}*/}
{/* firstMaxHeight={500}*/}
{/* firstNode={<div style={{height: '100%'}}>*/}
{/* <HTTPFlowTable*/}
{/* noHeader={true}*/}
{/* tableHeight={tableHeight}*/}
{/* onSendToWebFuzzer={props.sendToWebFuzzer}*/}
{/* onSelected={(i) => {*/}
{/* showDetail(i)*/}
{/* }}*/}
{/* paginationPosition={"topRight"}*/}
{/* />*/}
{/* </div>}*/}
{/* secondHideResize={true} secondMinHeight={detailHeight} secondMaxHeight={detailHeight}*/}
{/* secondNode={selected && <div style={{overflow: "hidden", height: '100%'}}>*/}
{/* <Card bodyStyle={{padding: 0}} bordered={false}>*/}
{/* <HTTPFlowDetailMini*/}
{/* noHeader={true}*/}
{/* hash={selected.Hash}*/}
{/* sendToWebFuzzer={props.sendToWebFuzzer}*/}
{/* defaultHeight={detailHeight}*/}
{/* />*/}
{/* </Card>*/}
{/* </div>}*/}
{/* reseze={reseze}*/}
{/*/>*/}

</div>
};
19 changes: 11 additions & 8 deletions app/renderer/src/main/src/pages/MainOperator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,7 @@ export const Main: React.FC<MainProp> = (props) => {
const [loading, setLoading] = useState(false);
const [pageCache, setPageCache] = useState<PageCache[]>([
{
node: <div style={{overflow: "hidden",flex:1,display:'flex',flexDirection:'column'}}>
{ContentByRoute(Route.HTTPHacker)}
</div>,
node: ContentByRoute(Route.HTTPHacker),
id: "", route: Route.HTTPHacker,
verbose: "MITM"
}
Expand Down Expand Up @@ -433,11 +431,11 @@ export const Main: React.FC<MainProp> = (props) => {
overflow: "hidden",
backgroundColor: "#fff",
marginLeft: 12, height: "100%",
display:'flex',
display: 'flex',
}}>
<div style={{padding: 12, paddingTop: 8,overflow:'hidden',display:'flex', flex:'1'}}>
<div style={{padding: 12, paddingTop: 8, overflow: 'hidden', display: 'flex', flex: '1'}}>
{pageCache.length > 0 ? <Tabs
style={{display:'flex', flex:'1'}}
style={{display: 'flex', flex: '1'}}
className='main-content-tabs'
activeKey={currentTabKey}
onChange={setCurrentTabKey}
Expand Down Expand Up @@ -514,9 +512,14 @@ export const Main: React.FC<MainProp> = (props) => {
setTimeout(() => setTabLoading(false), 300)
}}/>
</Space>}>
<Spin spinning={tabLoading} wrapperClassName={'main-panel-spin'} >
{/*<Spin spinning={tabLoading} wrapperClassName={'main-panel-spin'} >*/}
<div style={{
overflowY: i.route === Route.HTTPHacker ? "hidden" : "auto",
height: "100%"
}}>
{i.node}
</Spin>
</div>
{/*</Spin>*/}
</Tabs.TabPane>
})}
</Tabs> : <>
Expand Down
Loading

0 comments on commit 684afac

Please sign in to comment.