github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-08-12 05:43:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Ui/TRA-4461_service-map-&-OAS---GUI-changes (#962)

Browse Source 
* OpenAPI renamed to Service Catalog

* Docs icon change
Hide Navbar on serviceMap modal open

* PR comments

Co-authored-by: Leon <>
Co-authored-by: RoyUP9 <87927115+RoyUP9@users.noreply.github.com>
This commit is contained in:
leon-up9 2022-04-04 14:49:41 +03:00 committed by GitHub
parent a97b5b3b38
commit 7adbf7bf1b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 66 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
ui-common/src/components/OasModal/OasModal.tsx
View File

@ -42,10 +42,10 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
try { try {
const data = await getOasByService(selectedService ? selectedService : oasServices[0]); const data = await getOasByService(selectedService ? selectedService : oasServices[0]);
setSelectedServiceSpec(data); setSelectedServiceSpec(data);
} catch (e) { } catch (e) {
toast.error("Error occurred while fetching service OAS spec"); toast.error("Error occurred while fetching service OAS spec");
console.error(e); console.error(e);
} }
}; };
useEffect(() => { useEffect(() => {
@ -61,7 +61,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
useEffect(() => { useEffect(() => {
onSelectedOASService(null); onSelectedOASService(null);
},[oasServices]) }, [oasServices])
return ( return (
<Modal <Modal
@ -80,28 +80,28 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
<div className={style.boxContainer}> <div className={style.boxContainer}>
<div className={style.selectHeader}> <div className={style.selectHeader}>
<div><img src={openApiLogo} alt="openAPI" className={style.openApilogo} /></div> <div><img src={openApiLogo} alt="openAPI" className={style.openApilogo} /></div>
<div className={style.title}>OpenAPI</div> <div className={style.title}>Service Catalog</div>
</div> </div>
<div style={{ cursor: "pointer" }}> <div style={{ cursor: "pointer" }}>
<img src={closeIcon} alt="close" onClick={handleCloseModal} /> <img src={closeIcon} alt="close" onClick={handleCloseModal} />
</div> </div>
</div> </div>
<div className={style.selectContainer} > <div className={style.selectContainer} >
<FormControl> <FormControl>
<Select <Select
labelId="service-select-label" labelId="service-select-label"
id="service-select" id="service-select"
value={selectedServiceName} value={selectedServiceName}
onChangeCb={onSelectedOASService} onChangeCb={onSelectedOASService}
> >
{oasServices.map((service) => ( {oasServices.map((service) => (
<MenuItem key={service} value={service}> <MenuItem key={service} value={service}>
{service} {service}
</MenuItem> </MenuItem>
))} ))}
</Select> </Select>
</FormControl> </FormControl>
</div> </div>
<div className={style.borderLine}></div> <div className={style.borderLine}></div>
<div className={style.redoc}> <div className={style.redoc}>
{selectedServiceSpec && <RedocStandalone {selectedServiceSpec && <RedocStandalone

11
ui-common/src/components/UI/InformationIcon.tsx
View File

@ -1,18 +1,17 @@
import React, { CSSProperties } from "react"; import React, { CSSProperties } from "react";
import infoImg from 'assets/info.svg';
import styles from "./style/InformationIcon.module.sass" import styles from "./style/InformationIcon.module.sass"
const DEFUALT_LINK = "https://getmizu.io/docs" const DEFUALT_LINK = "https://getmizu.io/docs"
export interface InformationIconProps{ export interface InformationIconProps {
link?: string, link?: string,
style? : CSSProperties style?: CSSProperties
} }
export const InformationIcon: React.FC<InformationIconProps> = ({link,style}) => { export const InformationIcon: React.FC<InformationIconProps> = ({ link, style }) => {
return <React.Fragment> return <React.Fragment>
<a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.flex} title="documentation" target="_blank"> <a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.linkStyle} title="documentation" target="_blank">
<img className="headerIcon" src={infoImg} alt="Info icon"/> <span>Docs</span>
</a> </a>
</React.Fragment> </React.Fragment>
} }

5
ui-common/src/components/UI/assets/info.svg
View File

@ -1,5 +0,0 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M19 21H6.14286C5.07143 21 4 20.32 4 18.96C4 17.6 5.07143 16.92 6.14286 16.92H19V4H6.14286C5.07143 4 4 5.02 4 6.04V18.96M16.8571 17.6V20.32V17.6Z" stroke="#627EF7" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<rect x="8" y="7" width="7" height="2" fill="#627EF7"/>
<rect x="8" y="11" width="4" height="2" fill="#627EF7"/>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 454 B

10
ui-common/src/components/UI/style/InformationIcon.module.sass
View File

@ -1,2 +1,8 @@
.flex .linkStyle
display: flex display: flex
color: #18253d
text-decoration: none
font-family: "Ubuntu", sans-serif
font-style: normal
font-weight: 600
font-size: 14px

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

@ -4,7 +4,7 @@
position: absolute position: absolute
transform: translate(-50%, -3px) transform: translate(-50%, -3px)
left: 50% left: 50%
z-index: 9999 z-index: 100
min-width: 200px min-width: 200px
background: $blue-color background: $blue-color
color: rgba(255,255,255,0.75) color: rgba(255,255,255,0.75)
@ -19,7 +19,7 @@
overflow: hidden overflow: hidden
max-width: clamp(150px,50%,600px) max-width: clamp(150px,50%,600px)
&.banner &.banner
top: 53px top: 53px
.podsCount .podsCount
@ -41,7 +41,7 @@
table table
width: 100% width: 100%
margin-top: 20px margin-top: 20px
tbody tbody
max-height: 70vh max-height: 70vh
overflow-y: auto overflow-y: auto

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

@ -1,9 +1,9 @@
import React, {useEffect, useState} from "react"; import React, { useState } from "react";
import { Button } from "@material-ui/core"; import { Button } from "@material-ui/core";
import Api, { MizuWebsocketURL } from "../../../helpers/api"; import Api, { MizuWebsocketURL } from "../../../helpers/api";
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import {useSetRecoilState, useRecoilState} from "recoil"; import { useRecoilState } from "recoil";
import {useCommonStyles} from "../../../helpers/commonStyle" import { useCommonStyles } from "../../../helpers/commonStyle"
import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen"; import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen";
import TrafficViewer from "@up9/mizu-common" import TrafficViewer from "@up9/mizu-common"
import "@up9/mizu-common/dist/index.css" import "@up9/mizu-common/dist/index.css"
@ -17,13 +17,13 @@ interface TrafficPageProps {
const api = Api.getInstance(); const api = Api.getInstance();
export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus}) => { export const TrafficPage: React.FC<TrafficPageProps> = ({ setAnalyzeStatus }) => {
const commonClasses = useCommonStyles(); const commonClasses = useCommonStyles();
const setServiceMapModalOpen = useSetRecoilState(serviceMapModalOpenAtom); const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom);
const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom); const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
const [openWebSocket, setOpenWebSocket] = useState(true); const [openWebSocket, setOpenWebSocket] = useState(true);
const trafficViewerApi = {...api} const trafficViewerApi = { ...api }
const handleOpenOasModal = () => { const handleOpenOasModal = () => {
setOpenWebSocket(false) setOpenWebSocket(false)
@ -36,37 +36,31 @@ const trafficViewerApi = {...api}
}, 500); }, 500);
const actionButtons = (window["isOasEnabled"] || window["isServiceMapEnabled"]) && const actionButtons = (window["isOasEnabled"] || window["isServiceMapEnabled"]) &&
<div style={{ display: 'flex', height: "100%" }}> <div style={{ display: 'flex', height: "100%" }}>
{window["isOasEnabled"] && <Button {window["isOasEnabled"] && <Button
startIcon={<img className="custom" src={services} alt="services"></img>} startIcon={<img className="custom" src={services} alt="services"></img>}
size="large" size="large"
variant="contained" variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
style={{ marginRight: 25, textTransform: 'unset' }} style={{ marginRight: 25, textTransform: 'unset' }}
onClick={handleOpenOasModal}> onClick={handleOpenOasModal}>
OpenAPI Specs Service Catalog
</Button>} </Button>}
{window["isServiceMapEnabled"] && <Button {window["isServiceMapEnabled"] && <Button
startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>} startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{ marginRight: "8%" }}></img>}
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'}}> style={{ textTransform: 'unset' }}>
Service Map Service Map
</Button>} </Button>}
</div> </div>
useEffect(() => {
return () => {
//closeSocket()
}
},[])
return ( return (
<> <>
<TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={MizuWebsocketURL} isCloseWebSocket={!openWebSocket} <TrafficViewer setAnalyzeStatus={setAnalyzeStatus} webSocketUrl={MizuWebsocketURL} isCloseWebSocket={!openWebSocket}
trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!openOasModal} isDemoBannerView={false}/> trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen)} isDemoBannerView={false} />
</> </>
); );
}; };