github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-29 09:39:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix/ui/Service-map-GUI-issues_TRA-4499 (#1034)

Browse Source 
* LoadingOverlay z-index

* resizable max width
servicemap edges background color

* z-index as overlay

Co-authored-by: Leon <>
This commit is contained in:
leon-up9 2022-04-24 10:28:00 +03:00 committed by GitHub
parent df269fa950
commit b5c5a8934b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 11 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -178,7 +178,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
<Box sx={modalStyle}> <Box sx={modalStyle}>
<div className={styles.modalContainer}> <div className={styles.modalContainer}>
<div className={styles.filterSection}> <div className={styles.filterSection}>
<Resizeable minWidth={170}> <Resizeable minWidth={170} maxWidth={320}>
<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}

4
ui-common/src/components/ServiceMapModal/ServiceMapOptions.ts
View File

@ -67,11 +67,11 @@ const ServiceMapOptions = {
color: '#343434', color: '#343434',
size: 12, // px size: 12, // px
face: 'arial', face: 'arial',
background: 'none', background: 'rgba(255,255,255,0.7)',
strokeWidth: 2, // px strokeWidth: 2, // px
strokeColor: '#ffffff', strokeColor: '#ffffff',
align: 'horizontal', align: 'horizontal',
multi: false, multi: false
}, },
labelHighlightBold: true, labelHighlightBold: true,
selectionWidth: 1, selectionWidth: 1,

16
ui-common/src/components/UI/Resizeable.tsx
View File

@ -5,9 +5,10 @@ import styles from './style/Resizeable.module.sass'
export interface Props { export interface Props {
children children
minWidth: number minWidth: number
maxWidth?: number
} }
const Resizeable: React.FC<Props> = ({ children, minWidth }) => { const Resizeable: React.FC<Props> = ({ children, minWidth, maxWidth }) => {
const resizeble = useRef(null) const resizeble = useRef(null)
let mousePos = { x: 0, y: 0 } let mousePos = { x: 0, y: 0 }
let elementDimention = { w: 0, h: 0 } let elementDimention = { w: 0, h: 0 }
@ -47,14 +48,11 @@ const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
}; };
return ( return (
<React.Fragment> <div className={styles.resizable} ref={resizeble} style={{ width: elemWidth, maxWidth: maxWidth }}>
<div className={styles.resizable} ref={resizeble} style={{ width: elemWidth }}> {children}
{children} <div className={`${styles.resizer} ${styles.resizerRight}`} onMouseDown={mouseDownHandler}></div>
<div className={`${styles.resizer} ${styles.resizerRight}`} onMouseDown={mouseDownHandler}></div> {/* <div className={`${styles.resizer} ${styles.resizerB}`} onMouseDown={mouseDownHandler}></div> -- FutureUse*/}
{/* <div className={`${styles.resizer} ${styles.resizerB}`} onMouseDown={mouseDownHandler}></div> -- FutureUse*/} </div>
</div>
</React.Fragment>
); );
}; };

1
ui-common/src/components/style/LoadingOverlay.module.sass
View File

@ -8,6 +8,7 @@
align-items: center align-items: center
justify-content: center justify-content: center
background-color: rgba(25, 25, 25, 0.5) background-color: rgba(25, 25, 25, 0.5)
z-index: 1000
.loadingOverlaySpinner .loadingOverlaySpinner
width: 60px width: 60px