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

Feature/UI/tra 4390 status bar banner demo env (#921)

Browse Source 
* no message

* banner styling condition added and button text transform disabled

* added prps to container

* build fix
This commit is contained in:
AmitUp9 2022-03-24 12:14:31 +02:00 committed by GitHub
parent 11a2246cb9
commit 3c8f63ed92
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 24 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui-common/package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "@up9/mizu-common", "name": "@up9/mizu-common",
"version": "1.0.10", "version": "1.0.135",
"lockfileVersion": 2, "lockfileVersion": 2,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "@up9/mizu-common", "name": "@up9/mizu-common",
"version": "1.0.10", "version": "1.0.135",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@craco/craco": "^6.4.3", "@craco/craco": "^6.4.3",

2
ui-common/package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "@up9/mizu-common", "name": "@up9/mizu-common",
"version": "1.0.135", "version": "1.0.136",
"description": "Made with create-react-library", "description": "Made with create-react-library",
"author": "", "author": "",
"license": "MIT", "license": "MIT",

11
ui-common/src/components/TrafficViewer/TrafficViewer.tsx
View File

@ -48,12 +48,13 @@ interface TrafficViewerProps {
actionButtons?: JSX.Element, actionButtons?: JSX.Element,
isShowStatusBar?: boolean, isShowStatusBar?: boolean,
webSocketUrl : string, webSocketUrl : string,
isCloseWebSocket : boolean isCloseWebSocket : boolean,
isDemoBannerView : boolean
} }
export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus, trafficViewerApiProp, export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus, trafficViewerApiProp,
actionButtons,isShowStatusBar,webSocketUrl, actionButtons,isShowStatusBar,webSocketUrl,
isCloseWebSocket}) => { isCloseWebSocket, isDemoBannerView}) => {
const classes = useLayoutStyles(); const classes = useLayoutStyles();
@ -293,7 +294,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
return ( return (
<div className={TrafficViewerStyles.TrafficPage}> <div className={TrafficViewerStyles.TrafficPage}>
{tappingStatus && isShowStatusBar && <StatusBar />} {tappingStatus && isShowStatusBar && <StatusBar isDemoBannerView={isDemoBannerView} />}
<div className={TrafficViewerStyles.TrafficPageHeader}> <div className={TrafficViewerStyles.TrafficPageHeader}>
<div className={TrafficViewerStyles.TrafficPageStreamStatus}> <div className={TrafficViewerStyles.TrafficPageStreamStatus}>
<img className={TrafficViewerStyles.playPauseIcon} style={{ visibility: ws?.current?.readyState === WebSocket.OPEN ? "visible" : "hidden" }} alt="pause" <img className={TrafficViewerStyles.playPauseIcon} style={{ visibility: ws?.current?.readyState === WebSocket.OPEN ? "visible" : "hidden" }} alt="pause"
@ -356,11 +357,11 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
const MemoiedTrafficViewer = React.memo(TrafficViewer) const MemoiedTrafficViewer = React.memo(TrafficViewer)
const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp, const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp,
actionButtons, isShowStatusBar = true , actionButtons, isShowStatusBar = true ,
webSocketUrl, isCloseWebSocket}) => { webSocketUrl, isCloseWebSocket, isDemoBannerView}) => {
return <RecoilRoot> return <RecoilRoot>
<MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl} <MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp} isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
setAnalyzeStatus={setAnalyzeStatus} /> setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView} />
</RecoilRoot> </RecoilRoot>
} }

8
ui-common/src/components/UI/StatusBar.tsx
View File

@ -10,12 +10,16 @@ const pluralize = (noun: string, amount: number) => {
return `${noun}${amount !== 1 ? 's' : ''}` return `${noun}${amount !== 1 ? 's' : ''}`
} }
export const StatusBar = () => { interface StatusBarProps {
isDemoBannerView: boolean;
}
export const StatusBar = ({isDemoBannerView}) => {
const tappingStatus = useRecoilValue(tappingStatusAtom); const tappingStatus = useRecoilValue(tappingStatusAtom);
const [expandedBar, setExpandedBar] = useState(false); const [expandedBar, setExpandedBar] = useState(false);
const {uniqueNamespaces, amountOfPods, amountOfTappedPods, amountOfUntappedPods} = useRecoilValue(tappingStatusDetails); const {uniqueNamespaces, amountOfPods, amountOfTappedPods, amountOfUntappedPods} = useRecoilValue(tappingStatusDetails);
return <div className={`${style.statusBar} ${(expandedBar ? `${style.expandedStatusBar}` : "")}`} onMouseOver={() => setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)} data-cy="expandedStatusBar"> return <div className={`${isDemoBannerView ? `${style.banner}` : ''} ${style.statusBar} ${(expandedBar ? `${style.expandedStatusBar}` : "")}`} onMouseOver={() => setExpandedBar(true)} onMouseLeave={() => setExpandedBar(false)} data-cy="expandedStatusBar">
<div className={style.podsCount}> <div className={style.podsCount}>
{tappingStatus.some(pod => !pod.isTapped) && <img src={warningIcon} alt="warning"/>} {tappingStatus.some(pod => !pod.isTapped) && <img src={warningIcon} alt="warning"/>}
<span className={style.podsCountText} data-cy="podsCountText"> <span className={style.podsCountText} data-cy="podsCountText">

3
ui-common/src/components/UI/style/StatusBar.module.sass
View File

@ -19,6 +19,9 @@
overflow: hidden overflow: hidden
max-width: clamp(150px,50%,600px) max-width: clamp(150px,50%,600px)
&.banner
top: 53px
.podsCount .podsCount
display: flex display: flex
justify-content: center justify-content: center

2
ui/package.json
View File

@ -13,7 +13,7 @@
"@types/jest": "^26.0.22", "@types/jest": "^26.0.22",
"@types/node": "^12.20.10", "@types/node": "^12.20.10",
"@uiw/react-textarea-code-editor": "^1.4.12", "@uiw/react-textarea-code-editor": "^1.4.12",
"@up9/mizu-common": "1.0.135", "@up9/mizu-common": "1.0.136",
"axios": "^0.25.0", "axios": "^0.25.0",
"core-js": "^3.20.2", "core-js": "^3.20.2",
"craco-babel-loader": "^1.0.3", "craco-babel-loader": "^1.0.3",

7
ui/src/components/Pages/TrafficPage/TrafficPage.tsx
View File

@ -43,7 +43,7 @@ const trafficViewerApi = {...api}
type="submit" type="submit"
variant="contained" variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
style={{ marginRight: 25 }} style={{ marginRight: 25, textTransform: 'unset' }}
onClick={handleOpenOasModal}> onClick={handleOpenOasModal}>
OpenApi Specs OpenApi Specs
</Button>} </Button>}
@ -52,7 +52,8 @@ const trafficViewerApi = {...api}
size="large" size="large"
variant="contained" variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
onClick={openServiceMapModalDebounce}> onClick={openServiceMapModalDebounce}
style={{textTransform: 'unset'}}>
Service Map Service Map
</Button>} </Button>}
</div> </div>
@ -66,7 +67,7 @@ const trafficViewerApi = {...api}
return ( return (
<> <>
<TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={getWebsocketUrl()} isCloseWebSocket={!openWebSocket} <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={getWebsocketUrl()} isCloseWebSocket={!openWebSocket}
trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal}/> trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal} isDemoBannerView={false}/>
</> </>
); );
}; };