github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-06-28 09:10:09 +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}>
<div className={styles.modalContainer}>
<div className={styles.filterSection}>
<Resizeable minWidth={170}>
<Resizeable minWidth={170} maxWidth={320}>
<div className={styles.filterWrapper}>
<div className={styles.protocolsFilterList}>
<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',
size: 12, // px
face: 'arial',
background: 'none',
background: 'rgba(255,255,255,0.7)',
strokeWidth: 2, // px
strokeColor: '#ffffff',
align: 'horizontal',
multi: false,
multi: false
},
labelHighlightBold: true,
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 {
children
minWidth: number
maxWidth?: number
}
const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
const Resizeable: React.FC<Props> = ({ children, minWidth, maxWidth }) => {
const resizeble = useRef(null)
let mousePos = { x: 0, y: 0 }
let elementDimention = { w: 0, h: 0 }
@ -47,14 +48,11 @@ const Resizeable: React.FC<Props> = ({ children, minWidth }) => {
};
return (
<React.Fragment>
<div className={styles.resizable} ref={resizeble} style={{ width: elemWidth }}>
{children}
<div className={`${styles.resizer} ${styles.resizerRight}`} onMouseDown={mouseDownHandler}></div>
{/* <div className={`${styles.resizer} ${styles.resizerB}`} onMouseDown={mouseDownHandler}></div> -- FutureUse*/}
</div>
</React.Fragment>
<div className={styles.resizable} ref={resizeble} style={{ width: elemWidth, maxWidth: maxWidth }}>
{children}
<div className={`${styles.resizer} ${styles.resizerRight}`} onMouseDown={mouseDownHandler}></div>
{/* <div className={`${styles.resizer} ${styles.resizerB}`} onMouseDown={mouseDownHandler}></div> -- FutureUse*/}
</div>
);
};

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

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