Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: history屏蔽关键词 #2143

Merged
merged 1 commit into from
Nov 28, 2024
Merged

feat: history屏蔽关键词 #2143

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions app/protos/grpc.proto
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4687,6 +4687,7 @@ message QueryHTTPFlowRequest {
repeated string IncludeHash = 41;
repeated string HiddenIndex = 42;
repeated string ProcessName = 43;
repeated string ExcludeKeywords = 44;
}

message HTTPFlowsToOnlineRequest {
Expand Down
34 changes: 26 additions & 8 deletions app/renderer/src/main/src/components/HTTPFlowTable/HTTPFlowTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -726,6 +726,7 @@ export const HTTPFlowTable = React.memo<HTTPFlowTableProp>((props) => {
const [urlPath, setUrlPath] = useState<string[]>([])
const [fileSuffix, setFileSuffix] = useState<string[]>([])
const [searchContentType, setSearchContentType] = useState<string>("")
const [excludeKeywords, setExcludeKeywords] = useState<string[]>([])
// 表格排序
const sortRef = useRef<SortProps>(defSort)

Expand Down Expand Up @@ -838,6 +839,13 @@ export const HTTPFlowTable = React.memo<HTTPFlowTableProp>((props) => {
setSearchContentType(ContentType)
}
})
// 关键字
getRemoteValue(HTTPFlowTableFormConsts.HTTPFlowTableExcludeKeywords).then((e) => {
if (!!e) {
let excludeKeywords = JSON.parse(e)
setExcludeKeywords(excludeKeywords)
}
})
}
}, [])

Expand All @@ -856,7 +864,8 @@ export const HTTPFlowTable = React.memo<HTTPFlowTableProp>((props) => {
IncludePath: [],
ExcludePath: urlPath,
IncludeSuffix: [],
ExcludeSuffix: fileSuffix
ExcludeSuffix: fileSuffix,
ExcludeKeywords: excludeKeywords
}
}
// 展示
Expand All @@ -879,13 +888,13 @@ export const HTTPFlowTable = React.memo<HTTPFlowTableProp>((props) => {
}, 10)
}
},
[filterMode, hostName, urlPath, fileSuffix, searchContentType],
[filterMode, hostName, urlPath, fileSuffix, searchContentType, excludeKeywords],
{wait: 500}
)

const isFilter: boolean = useMemo(() => {
return hostName.length > 0 || urlPath.length > 0 || fileSuffix.length > 0 || searchContentType?.length > 0
}, [hostName, urlPath, fileSuffix, searchContentType])
return hostName.length > 0 || urlPath.length > 0 || fileSuffix.length > 0 || searchContentType?.length > 0 || excludeKeywords.length > 0
}, [hostName, urlPath, fileSuffix, searchContentType, excludeKeywords])

useEffect(() => {
if (pageType === "MITM") {
Expand Down Expand Up @@ -1135,7 +1144,6 @@ export const HTTPFlowTable = React.memo<HTTPFlowTableProp>((props) => {
}

updateQueryParams(realQuery)

ipcRenderer
.invoke("QueryHTTPFlows", realQuery)
.then((rsp: YakQueryHTTPFlowResponse) => {
Expand Down Expand Up @@ -1936,9 +1944,17 @@ export const HTTPFlowTable = React.memo<HTTPFlowTableProp>((props) => {
title: "延迟(ms)",
dataKey: "DurationMs",
width: 200,
render: (text) => {
render: (text, rowData) => {
let timeMs: number = parseInt(text)
return <div className={style["duration-ms"]}>{timeMs}</div>
return (
<div
className={classNames({
[style["duration-ms"]]: !hasRedOpacityBg(rowData.cellClassName)
})}
>
{timeMs}
</div>
)
}
// 此处排序会使偏移量新数据进入时乱序(ps：后续处理，考虑此处排序时偏移量新增数据在页面上不更新)
// sorterProps: {
Expand Down Expand Up @@ -3925,19 +3941,21 @@ export const HTTPFlowTable = React.memo<HTTPFlowTableProp>((props) => {
visible={drawerFormVisible}
setVisible={setDrawerFormVisible}
onSave={(val) => {
const {filterMode, hostName, urlPath, fileSuffix, searchContentType} = val
const {filterMode, hostName, urlPath, fileSuffix, searchContentType, excludeKeywords} = val
setFilterMode(filterMode)
setHostName(hostName)
setUrlPath(urlPath)
setFileSuffix(fileSuffix)
setSearchContentType(searchContentType)
setExcludeKeywords(excludeKeywords)
setDrawerFormVisible(false)
}}
filterMode={filterMode}
hostName={hostName}
urlPath={urlPath}
fileSuffix={fileSuffix}
searchContentType={searchContentType}
excludeKeywords={excludeKeywords}
/>
</div>
)
Expand Down
47 changes: 39 additions & 8 deletions app/renderer/src/main/src/components/HTTPFlowTable/HTTPFlowTableForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ export interface HTTPFlowTableFormConfigurationProps {
urlPath: string[]
fileSuffix: string[]
searchContentType: string
excludeKeywords: string[]
}

export interface HTTPFlowTableFromValue {
Expand All @@ -29,30 +30,45 @@ export interface HTTPFlowTableFromValue {
hostName: string[]
fileSuffix: string[]
searchContentType: string
excludeKeywords: string[]
}

export enum HTTPFlowTableFormConsts {
HTTPFlowTableFilterMode = "YAKIT_HTTPFlowTableFilterMode",
HTTPFlowTableHostName = "YAKIT_HTTPFlowTableHostName",
HTTPFlowTableUrlPath = "YAKIT_HTTPFlowTableUrlPath",
HTTPFlowTableFileSuffix = "YAKIT_HTTPFlowTableFileSuffix",
HTTPFlowTableContentType = "YAKIT_HTTPFlowTableContentType"
HTTPFlowTableContentType = "YAKIT_HTTPFlowTableContentType",
HTTPFlowTableExcludeKeywords = "YAKIT_HTTPFlowTableExcludeKeywords"
}

export const HTTPFlowTableFormConfiguration: React.FC<HTTPFlowTableFormConfigurationProps> = (props) => {
const {visible, setVisible, responseType, onSave, filterMode, hostName, urlPath, fileSuffix, searchContentType} =
props
const {
visible,
setVisible,
responseType,
onSave,
filterMode,
hostName,
urlPath,
fileSuffix,
searchContentType,
excludeKeywords
} = props
const [filterModeVal, setFilterModeVal] = useState<"shield" | "show">("shield")
const [filterModeDef, setFilterModeDef] = useState<"shield" | "show">("shield")
const [hostNameDef, setHostNameDef] = useState<string[]>([])
const [urlPathDef, setUrlPathDef] = useState<string[]>([])
const [fileSuffixDef, setFileSuffixDef] = useState<string[]>([])
const [searchContentTypeDef, setSearchContentTypeDef] = useState<string[]>()
const [excludeKeywordsDef, setExcludeKeywordsDef] = useState<string[]>()
const [form] = Form.useForm()
// 获取默认值
useEffect(() => {
if(!visible) return
if (!visible) return
// 筛选模式
setFilterModeDef(filterMode)
setFilterModeVal(filterMode)
// HostName
setHostNameDef(hostName)
// URL路径
Expand All @@ -63,28 +79,32 @@ export const HTTPFlowTableFormConfiguration: React.FC<HTTPFlowTableFormConfigura
const contentType: string = searchContentType
const searchType: string[] = contentType.length === 0 ? [] : contentType.split(",")
setSearchContentTypeDef(searchType)
// 关键字
setExcludeKeywordsDef(excludeKeywords)

form.setFieldsValue({filterMode, hostName, urlPath, fileSuffix, searchContentType: searchType})
form.setFieldsValue({filterMode, hostName, urlPath, fileSuffix, searchContentType: searchType, excludeKeywords})
}, [visible])

/**
* @description 保存高级配置
*/
const onSaveSetting = useMemoizedFn(() => {
form.validateFields().then((formValue) => {
const {filterMode, urlPath = [], hostName = [], fileSuffix = []} = formValue
const {filterMode, urlPath = [], hostName = [], fileSuffix = [], excludeKeywords = []} = formValue
let searchContentType: string = (formValue.searchContentType || []).join(",")
setRemoteValue(HTTPFlowTableFormConsts.HTTPFlowTableFilterMode, filterMode)
setRemoteValue(HTTPFlowTableFormConsts.HTTPFlowTableHostName, JSON.stringify(hostName))
setRemoteValue(HTTPFlowTableFormConsts.HTTPFlowTableUrlPath, JSON.stringify(urlPath))
setRemoteValue(HTTPFlowTableFormConsts.HTTPFlowTableFileSuffix, JSON.stringify(fileSuffix))
setRemoteValue(HTTPFlowTableFormConsts.HTTPFlowTableContentType, searchContentType)
setRemoteValue(HTTPFlowTableFormConsts.HTTPFlowTableExcludeKeywords, JSON.stringify(excludeKeywords))
onSave({
filterMode: filterMode,
hostName,
urlPath,
fileSuffix,
searchContentType
searchContentType,
excludeKeywords
})
})
})
Expand All @@ -96,7 +116,8 @@ export const HTTPFlowTableFormConfiguration: React.FC<HTTPFlowTableFormConfigura
hostName: hostNameDef,
urlPath: urlPathDef,
fileSuffix: fileSuffixDef,
searchContentType: searchContentTypeDef
searchContentType: searchContentTypeDef,
excludeKeywords: excludeKeywordsDef
}
const newValue = {
...formValue
Expand Down Expand Up @@ -136,6 +157,7 @@ export const HTTPFlowTableFormConfiguration: React.FC<HTTPFlowTableFormConfigura

const reset = () => {
form.resetFields()
setFilterModeVal("shield")
}
return (
<YakitDrawer
Expand Down Expand Up @@ -177,6 +199,10 @@ export const HTTPFlowTableFormConfiguration: React.FC<HTTPFlowTableFormConfigura
label: "只展示"
}
]}
value={filterModeVal}
onChange={(e) => {
setFilterModeVal(e.target.value)
}}
/>
</Form.Item>
<Form.Item label='Hostname' name='hostName'>
Expand All @@ -195,6 +221,11 @@ export const HTTPFlowTableFormConfiguration: React.FC<HTTPFlowTableFormConfigura
<Form.Item label={"响应类型"} name='searchContentType'>
<YakitSelect mode='tags' options={responseType}></YakitSelect>
</Form.Item>
{filterModeVal === "shield" && (
<Form.Item label='关键字' name='excludeKeywords' help={"匹配逻辑与外面搜索关键字逻辑一样"}>
<YakitSelect mode='tags'></YakitSelect>
</Form.Item>
)}
<Form.Item label={" "} colon={false}>
<YakitButton type='text' onClick={reset}>
重置
Expand Down
1 change: 1 addition & 0 deletions app/renderer/src/main/src/utils/yakQueryHTTPFlow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ export interface YakQueryHTTPFlowRequest {
RuntimeIDs?: string[]
Full?: boolean
ProcessName?: string[]
ExcludeKeywords?: string[]
}

export interface Paging {
Expand Down