github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-19 10:48:59 +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",
"version": "1.0.10",
"version": "1.0.135",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "@up9/mizu-common",
"version": "1.0.10",
"version": "1.0.135",
"license": "MIT",
"dependencies": {
"@craco/craco": "^6.4.3",

2
ui-common/package.json
View File

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

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

@ -48,12 +48,13 @@ interface TrafficViewerProps {
actionButtons?: JSX.Element,
isShowStatusBar?: boolean,
webSocketUrl : string,
isCloseWebSocket : boolean
isCloseWebSocket : boolean,
isDemoBannerView : boolean
}
export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus, trafficViewerApiProp,
actionButtons,isShowStatusBar,webSocketUrl,
isCloseWebSocket}) => {
isCloseWebSocket, isDemoBannerView}) => {
const classes = useLayoutStyles();
@ -293,7 +294,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
return (
<div className={TrafficViewerStyles.TrafficPage}>
{tappingStatus && isShowStatusBar && <StatusBar />}
{tappingStatus && isShowStatusBar && <StatusBar isDemoBannerView={isDemoBannerView} />}
<div className={TrafficViewerStyles.TrafficPageHeader}>
<div className={TrafficViewerStyles.TrafficPageStreamStatus}>
<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 TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp,
actionButtons, isShowStatusBar = true ,
webSocketUrl, isCloseWebSocket}) => {
webSocketUrl, isCloseWebSocket, isDemoBannerView}) => {
return <RecoilRoot>
<MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
setAnalyzeStatus={setAnalyzeStatus} />
setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView} />
</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' : ''}`
}
export const StatusBar = () => {
interface StatusBarProps {
isDemoBannerView: boolean;
}
export const StatusBar = ({isDemoBannerView}) => {
const tappingStatus = useRecoilValue(tappingStatusAtom);
const [expandedBar, setExpandedBar] = useState(false);
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}>
{tappingStatus.some(pod => !pod.isTapped) && <img src={warningIcon} alt="warning"/>}
<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
max-width: clamp(150px,50%,600px)
&.banner
top: 53px
.podsCount
display: flex
justify-content: center

2
ui/package.json
View File

@ -13,7 +13,7 @@
"@types/jest": "^26.0.22",
"@types/node": "^12.20.10",
"@uiw/react-textarea-code-editor": "^1.4.12",
"@up9/mizu-common": "1.0.135",
"@up9/mizu-common": "1.0.136",
"axios": "^0.25.0",
"core-js": "^3.20.2",
"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"
variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
style={{ marginRight: 25 }}
style={{ marginRight: 25, textTransform: 'unset' }}
onClick={handleOpenOasModal}>
OpenApi Specs
</Button>}
@ -52,7 +52,8 @@ const trafficViewerApi = {...api}
size="large"
variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
onClick={openServiceMapModalDebounce}>
onClick={openServiceMapModalDebounce}
style={{textTransform: 'unset'}}>
Service Map
</Button>}
</div>
@ -66,7 +67,7 @@ const trafficViewerApi = {...api}
return (
<>
<TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={getWebsocketUrl()} isCloseWebSocket={!openWebSocket}
trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal}/>
trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal} isDemoBannerView={false}/>
</>
);
};