github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-09 04:19:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

filter changes state on diffrent events (#1040)

Browse Source 
Co-authored-by: Leon <>
This commit is contained in:
leon-up9 2022-04-24 17:20:14 +03:00 committed by GitHub
parent 95a37c877e
commit 36910c84ed
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 16 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
ui-common/src/components/ServiceMapModal/ServiceMapModal.tsx
View File

@ -117,31 +117,32 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
.sort((a, b) => { return a.key.localeCompare(b.key) }); .sort((a, b) => { return a.key.localeCompare(b.key) });
const getServicesForFilter = useMemo(() => { const getServicesForFilter = useMemo(() => {
const resolved = mapToKeyValForFilter(serviceMapApiData.nodes?.filter(x => x.resolved)) const resolved = mapToKeyValForFilter(serviceMapApiData.nodes?.filter(x => x.resolved))
const unResolved = mapToKeyValForFilter(serviceMapApiData.nodes?.filter(x => !x.resolved)) const unResolved = mapToKeyValForFilter(serviceMapApiData.nodes?.filter(x => !x.resolved))
return [...resolved, ...unResolved] return [...resolved, ...unResolved]
}, [serviceMapApiData]) }, [serviceMapApiData])
const filterServiceMap = useCallback((newProtocolsFilters?: any[], newServiceFilters?: string[]) => { useEffect(() => {
const filterProt = newProtocolsFilters || checkedProtocols
const filterService = newServiceFilters || checkedServices
setCheckedProtocols(filterProt)
setCheckedServices(filterService)
const newGraphData: GraphData = { const newGraphData: GraphData = {
nodes: serviceMapApiData.nodes?.map(mapNodesDatatoGraph).filter(node => filterService.includes(node.label)), nodes: serviceMapApiData.nodes?.map(mapNodesDatatoGraph).filter(node => checkedServices.includes(node.label)),
edges: serviceMapApiData.edges?.filter(edge => filterProt.includes(edge.protocol.abbr)).map(mapEdgesDatatoGraph) edges: serviceMapApiData.edges?.filter(edge => checkedProtocols.includes(edge.protocol.abbr)).map(mapEdgesDatatoGraph)
} }
setGraphData(newGraphData); setGraphData(newGraphData);
}, [checkedProtocols, checkedServices, serviceMapApiData]) }, [checkedServices, checkedProtocols, serviceMapApiData])
const onProtocolsChange = (newProtocolsFiltersnewProt) => {
const filterProt = newProtocolsFiltersnewProt || checkedProtocols
setCheckedProtocols(filterProt)
}
const onServiceChanges = (newServiceFilters) => {
const filterService = newServiceFilters || checkedServices
setCheckedServices([...filterService])
}
useEffect(() => { useEffect(() => {
if (checkedServices.length > 0) if (checkedServices.length == 0)
filterServiceMap() setCheckedServices(getServicesForFilter.map(x => x.key).filter(serviceName => !Utils.isIpAddress(serviceName)))
else
filterServiceMap(checkedProtocols, getServicesForFilter.map(x => x.key).filter(serviceName => !Utils.isIpAddress(serviceName)))
}, [getServicesForFilter]) }, [getServicesForFilter])
useEffect(() => { useEffect(() => {
@ -177,14 +178,14 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
<div className={styles.filterWrapper}> <div className={styles.filterWrapper}>
<div className={styles.protocolsFilterList}> <div className={styles.protocolsFilterList}>
<SelectList items={protocols} checkBoxWidth="5%" tableName={"Protocols"} multiSelect={true} <SelectList items={protocols} checkBoxWidth="5%" tableName={"Protocols"} multiSelect={true}
checkedValues={checkedProtocols} setCheckedValues={filterServiceMap} tableClassName={styles.filters} /> checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters} />
</div> </div>
<div className={styles.separtorLine}></div> <div className={styles.separtorLine}></div>
<div className={styles.servicesFilter}> <div className={styles.servicesFilter}>
<input className={commonClasses.textField + ` ${styles.servicesFilterSearch}`} placeholder="search service" value={servicesSearchVal} onChange={(event) => setServicesSearchVal(event.target.value)} /> <input className={commonClasses.textField + ` ${styles.servicesFilterSearch}`} placeholder="search service" value={servicesSearchVal} onChange={(event) => setServicesSearchVal(event.target.value)} />
<div className={styles.servicesFilterList}> <div className={styles.servicesFilterList}>
<SelectList items={getServicesForFilter} tableName={"Services"} tableClassName={styles.filters} multiSelect={true} searchValue={servicesSearchVal} <SelectList items={getServicesForFilter} tableName={"Services"} tableClassName={styles.filters} multiSelect={true} searchValue={servicesSearchVal}
checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={(newServicesForFilter) => filterServiceMap(null, newServicesForFilter)} /> checkBoxWidth="5%" checkedValues={checkedServices} setCheckedValues={onServiceChanges} />
</div> </div>
</div> </div>
</div> </div>