github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-19 02:40:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

UI/servicemap-dynamic-protocol-filters (#1072)

Browse Source 
* filters visble on click

* servicemap layout

* headers added
Icon changed

* flex removed , we have max size for filter

* selection only from edges

* caption changed

* removed duplicated code

* changes

Co-authored-by: Leon <>
This commit is contained in:
leon-up9 2022-05-10 13:49:46 +03:00 committed by GitHub
parent b2830f133f
commit e24c18254c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 10 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

@ -47,14 +47,11 @@ const LegentLabel: React.FC<LegentLabelProps> = ({ color, name }) => {
</React.Fragment> </React.Fragment>
} }
const protocols = [ type ProtocolType = {
{ key: "HTTP", value: "HTTP", component: <LegentLabel color="#494677" name="HTTP" /> }, key: string;
{ key: "HTTP/2", value: "HTTP/2", component: <LegentLabel color='#F7B202' name="HTTP/2" /> }, value: string;
{ key: "gRPC", value: "gRPC", component: <LegentLabel color='#219653' name="gRPC" /> }, component: JSX.Element;
{ key: "GQL", value: "GQL", component: <LegentLabel color='#e10098' name="GQL" /> }, };
{ key: "AMQP", value: "AMQP", component: <LegentLabel color='#F86818' name="AMQP" /> },
{ key: "KAFKA", value: "KAFKA", component: <LegentLabel color='#0C0B1A' name="KAFKA" /> },
{ key: "REDIS", value: "REDIS", component: <LegentLabel color='#DB2156' name="REDIS" /> },]
interface ServiceMapModalProps { interface ServiceMapModalProps {
@ -68,7 +65,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
const commonClasses = useCommonStyles(); const commonClasses = useCommonStyles();
const [isLoading, setIsLoading] = useState<boolean>(true); const [isLoading, setIsLoading] = useState<boolean>(true);
const [graphData, setGraphData] = useState<GraphData>({ nodes: [], edges: [] }); const [graphData, setGraphData] = useState<GraphData>({ nodes: [], edges: [] });
const [checkedProtocols, setCheckedProtocols] = useState(protocols.map(x => x.key)) const [checkedProtocols, setCheckedProtocols] = useState([])
const [checkedServices, setCheckedServices] = useState([]) const [checkedServices, setCheckedServices] = useState([])
const [serviceMapApiData, setServiceMapApiData] = useState<ServiceMapGraph>({ edges: [], nodes: [] }) const [serviceMapApiData, setServiceMapApiData] = useState<ServiceMapGraph>({ edges: [], nodes: [] })
const [servicesSearchVal, setServicesSearchVal] = useState("") const [servicesSearchVal, setServicesSearchVal] = useState("")
@ -120,6 +117,14 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
.map((edge) => { return { key: edge.label, value: edge.label } }) .map((edge) => { return { key: edge.label, value: edge.label } })
.sort((a, b) => { return a.key.localeCompare(b.key) }), []) .sort((a, b) => { return a.key.localeCompare(b.key) }), [])
const getProtocolsForFilter = useMemo(() => {
return serviceMapApiData.edges.reduce<ProtocolType[]>((returnArr, currentValue, currentIndex, array) => {
if (!returnArr.find(prot => prot.key === currentValue.protocol.abbr))
returnArr.push({ key: currentValue.protocol.abbr, value: currentValue.protocol.abbr, component: <LegentLabel color={currentValue.protocol.backgroundColor} name={currentValue.protocol.abbr} /> })
return returnArr
}, new Array<ProtocolType>())
}, [serviceMapApiData])
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))
@ -150,6 +155,12 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
// eslint-disable-next-line react-hooks/exhaustive-deps // eslint-disable-next-line react-hooks/exhaustive-deps
}, [getServicesForFilter]) }, [getServicesForFilter])
useEffect(() => {
if (checkedProtocols.length === 0) {
setCheckedProtocols(getProtocolsForFilter.map(x => x.key))
}
}, [getProtocolsForFilter])
useEffect(() => { useEffect(() => {
getServiceMapData() getServiceMapData()
}, [getServiceMapData]) }, [getServiceMapData])
@ -212,7 +223,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
PROTOCOLS PROTOCOLS
<span className={styles.totalSelected}>&nbsp;({checkedProtocols.length})</span> <span className={styles.totalSelected}>&nbsp;({checkedProtocols.length})</span>
</h3> </h3>
<SelectList items={protocols} checkBoxWidth="5%" tableName={"All"} multiSelect={true} <SelectList items={getProtocolsForFilter} checkBoxWidth="5%" tableName={"All"} multiSelect={true}
checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters} /> checkedValues={checkedProtocols} setCheckedValues={onProtocolsChange} tableClassName={styles.filters} />
</div> </div>
<div className={styles.servicesFilter}> <div className={styles.servicesFilter}>