github/kubeshark
1
0
Fork 0
mirror of https://github.com/kubeshark/kubeshark.git synced 2025-07-04 20:08:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Fix/regration-fixes-24.3 (#933)

Browse Source 
* link open in a new tab

* fixed double toast

* added const

* javiers new icon

* epbg img fix

* pkg update

* changed import

* formated

Co-authored-by: Leon <>
This commit is contained in:
leon-up9 2022-03-27 15:47:46 +03:00 committed by GitHub
parent 0a793cd9e0
commit c45a869b75
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 109 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui-common/package.json
View File

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

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

@ -7,7 +7,9 @@ import style from './OasModal.module.sass';
import openApiLogo from 'assets/openApiLogo.png' import openApiLogo from 'assets/openApiLogo.png'
import { redocThemeOptions } from "./redocThemeOptions"; import { redocThemeOptions } from "./redocThemeOptions";
import React from "react"; import React from "react";
import { UI } from "../.."; import { TOAST_CONTAINER_ID } from "../../configs/Consts";
import { Select } from "../UI/Select";
const modalStyle = { const modalStyle = {
position: 'absolute', position: 'absolute',
@ -42,7 +44,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
const data = await getOasByService(selectedService); const data = await getOasByService(selectedService);
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", { containerId: TOAST_CONTAINER_ID });
console.error(e); console.error(e);
} }
} }
@ -106,32 +108,32 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
<div className={style.title}>OpenApi </div> <div className={style.title}>OpenApi </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>
<UI.Select <Select
labelId="service-select-label" labelId="service-select-label"
id="service-select" id="service-select"
value={selectedServiceName} value={selectedServiceName}
onChangeCb={onSelectedOASService} onChangeCb={onSelectedOASService}
> >
<ListSubheader disableSticky={true}>Resolved</ListSubheader> <ListSubheader disableSticky={true}>Resolved</ListSubheader>
{resolvedServices.map((service) => ( {resolvedServices.map((service) => (
<MenuItem key={service} value={service}> <MenuItem key={service} value={service}>
{service} {service}
</MenuItem> </MenuItem>
))} ))}
<ListSubheader disableSticky={true}>UnResolved</ListSubheader> <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
{unResolvedServices.map((service) => ( {unResolvedServices.map((service) => (
<MenuItem key={service} value={service}> <MenuItem key={service} value={service}>
{service} {service}
</MenuItem> </MenuItem>
))} ))}
</UI.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

37
ui-common/src/components/TrafficViewer/EntryDetailed.tsx
View File

@ -1,17 +1,18 @@
import React, {useEffect, useState} from "react"; import React, { useEffect, useState } from "react";
import EntryViewer from "./EntryDetailed/EntryViewer"; import EntryViewer from "./EntryDetailed/EntryViewer";
import {EntryItem} from "./EntryListItem/EntryListItem"; import { EntryItem } from "./EntryListItem/EntryListItem";
import {makeStyles} from "@material-ui/core"; import { makeStyles } from "@material-ui/core";
import Protocol from "../UI/Protocol" import Protocol from "../UI/Protocol"
import Queryable from "../UI/Queryable"; import Queryable from "../UI/Queryable";
import {toast} from "react-toastify"; import { toast } from "react-toastify";
import {RecoilState, useRecoilState, useRecoilValue} from "recoil"; import { RecoilState, useRecoilState, useRecoilValue } from "recoil";
import focusedEntryIdAtom from "../../recoil/focusedEntryId"; import focusedEntryIdAtom from "../../recoil/focusedEntryId";
import trafficViewerApi from "../../recoil/TrafficViewerApi"; import trafficViewerApi from "../../recoil/TrafficViewerApi";
import TrafficViewerApi from "./TrafficViewerApi"; import TrafficViewerApi from "./TrafficViewerApi";
import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom"; import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
import queryAtom from "../../recoil/query/atom"; import queryAtom from "../../recoil/query/atom";
import useWindowDimensions, { useRequestTextByWidth } from "../../hooks/WindowDimensionsHook"; import useWindowDimensions, { useRequestTextByWidth } from "../../hooks/WindowDimensionsHook";
import { TOAST_CONTAINER_ID } from "../../configs/Consts";
const useStyles = makeStyles(() => ({ const useStyles = makeStyles(() => ({
entryTitle: { entryTitle: {
@ -37,24 +38,24 @@ const useStyles = makeStyles(() => ({
export const formatSize = (n: number) => n > 1000 ? `${Math.round(n / 1000)}KB` : `${n} B`; export const formatSize = (n: number) => n > 1000 ? `${Math.round(n / 1000)}KB` : `${n} B`;
const minSizeDisplayRequestSize = 880; const minSizeDisplayRequestSize = 880;
const EntryTitle: React.FC<any> = ({protocol, data, elapsedTime}) => { const EntryTitle: React.FC<any> = ({ protocol, data, elapsedTime }) => {
const classes = useStyles(); const classes = useStyles();
const request = data.request; const request = data.request;
const response = data.response; const response = data.response;
const { width } = useWindowDimensions(); const { width } = useWindowDimensions();
const {requestText, responseText, elapsedTimeText} = useRequestTextByWidth(width) const { requestText, responseText, elapsedTimeText } = useRequestTextByWidth(width)
return <div className={classes.entryTitle}> return <div className={classes.entryTitle}>
<Protocol protocol={protocol} horizontal={true}/> <Protocol protocol={protocol} horizontal={true} />
{(width > minSizeDisplayRequestSize) && <div style={{right: "30px", position: "absolute", display: "flex"}}> {(width > minSizeDisplayRequestSize) && <div style={{ right: "30px", position: "absolute", display: "flex" }}>
{request && <Queryable {request && <Queryable
query={`requestSize == ${data.requestSize}`} query={`requestSize == ${data.requestSize}`}
style={{margin: "0 18px"}} style={{ margin: "0 18px" }}
displayIconOnMouseOver={true} displayIconOnMouseOver={true}
> >
<div <div
style={{opacity: 0.5}} style={{ opacity: 0.5 }}
id="entryDetailedTitleRequestSize" id="entryDetailedTitleRequestSize"
> >
{`${requestText}${formatSize(data.requestSize)}`} {`${requestText}${formatSize(data.requestSize)}`}
@ -62,11 +63,11 @@ const EntryTitle: React.FC<any> = ({protocol, data, elapsedTime}) => {
</Queryable>} </Queryable>}
{response && <Queryable {response && <Queryable
query={`responseSize == ${data.responseSize}`} query={`responseSize == ${data.responseSize}`}
style={{margin: "0 18px"}} style={{ margin: "0 18px" }}
displayIconOnMouseOver={true} displayIconOnMouseOver={true}
> >
<div <div
style={{opacity: 0.5}} style={{ opacity: 0.5 }}
id="entryDetailedTitleResponseSize" id="entryDetailedTitleResponseSize"
> >
{`${responseText}${formatSize(data.responseSize)}`} {`${responseText}${formatSize(data.responseSize)}`}
@ -74,11 +75,11 @@ const EntryTitle: React.FC<any> = ({protocol, data, elapsedTime}) => {
</Queryable>} </Queryable>}
{response && <Queryable {response && <Queryable
query={`elapsedTime >= ${elapsedTime}`} query={`elapsedTime >= ${elapsedTime}`}
style={{margin: "0 0 0 18px"}} style={{ margin: "0 0 0 18px" }}
displayIconOnMouseOver={true} displayIconOnMouseOver={true}
> >
<div <div
style={{opacity: 0.5}} style={{ opacity: 0.5 }}
id="entryDetailedTitleElapsedTime" id="entryDetailedTitleElapsedTime"
> >
{`${elapsedTimeText}${Math.round(elapsedTime)}ms`} {`${elapsedTimeText}${Math.round(elapsedTime)}ms`}
@ -88,7 +89,7 @@ const EntryTitle: React.FC<any> = ({protocol, data, elapsedTime}) => {
</div>; </div>;
}; };
const EntrySummary: React.FC<any> = ({entry}) => { const EntrySummary: React.FC<any> = ({ entry }) => {
return <EntryItem return <EntryItem
key={`entry-${entry.id}`} key={`entry-${entry.id}`}
entry={entry} entry={entry}
@ -125,7 +126,7 @@ export const EntryDetailed = () => {
pauseOnHover: true, pauseOnHover: true,
draggable: true, draggable: true,
progress: undefined, progress: undefined,
}); }, { containerId: TOAST_CONTAINER_ID });
} }
console.error(error); console.error(error);
} }
@ -139,7 +140,7 @@ export const EntryDetailed = () => {
data={entryData.data} data={entryData.data}
elapsedTime={entryData.data.elapsedTime} elapsedTime={entryData.data.elapsedTime}
/>} />}
{entryData && <EntrySummary entry={entryData.base}/>} {entryData && <EntrySummary entry={entryData.base} />}
<React.Fragment> <React.Fragment>
{entryData && <EntryViewer {entryData && <EntryViewer
representation={entryData.representation} representation={entryData.representation}

2
ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
View File

@ -4,7 +4,7 @@ import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
import styles from './EntryListItem.module.sass'; import styles from './EntryListItem.module.sass';
import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode"; import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
import Protocol, {ProtocolInterface} from "../../UI/Protocol" import Protocol, {ProtocolInterface} from "../../UI/Protocol"
import eBPFLogo from '../../assets/ebpf.png'; import eBPFLogo from 'assets/ebpf.png';
import {Summary} from "../../UI/Summary"; import {Summary} from "../../UI/Summary";
import Queryable from "../../UI/Queryable"; import Queryable from "../../UI/Queryable";
import ingoingIconSuccess from "assets/ingoing-traffic-success.svg" import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"

0
ui-common/src/components/assets/ebpf.png → ui-common/src/components/TrafficViewer/EntryListItem/assets/ebpf.png
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 21 KiB

After

Width:  |  Height:  |  Size: 21 KiB

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

@ -8,8 +8,7 @@ import { EntryDetailed } from "./EntryDetailed";
import playIcon from 'assets/run.svg'; import playIcon from 'assets/run.svg';
import pauseIcon from 'assets/pause.svg'; import pauseIcon from 'assets/pause.svg';
import variables from '../../variables.module.scss'; import variables from '../../variables.module.scss';
import { toast,ToastContainer } from 'react-toastify'; import { toast, ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import debounce from 'lodash/debounce'; import debounce from 'lodash/debounce';
import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil"; import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
import entriesAtom from "../../recoil/entries"; import entriesAtom from "../../recoil/entries";
@ -20,6 +19,7 @@ import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
import TrafficViewerApi from "./TrafficViewerApi"; import TrafficViewerApi from "./TrafficViewerApi";
import { StatusBar } from "../UI/StatusBar"; import { StatusBar } from "../UI/StatusBar";
import tappingStatusAtom from "../../recoil/tappingStatus/atom"; import tappingStatusAtom from "../../recoil/tappingStatus/atom";
import { TOAST_CONTAINER_ID } from "../../configs/Consts";
const useLayoutStyles = makeStyles(() => ({ const useLayoutStyles = makeStyles(() => ({
details: { details: {
@ -47,14 +47,14 @@ interface TrafficViewerProps {
trafficViewerApiProp: TrafficViewerApi, trafficViewerApiProp: TrafficViewerApi,
actionButtons?: JSX.Element, actionButtons?: JSX.Element,
isShowStatusBar?: boolean, isShowStatusBar?: boolean,
webSocketUrl : string, webSocketUrl: string,
isCloseWebSocket : boolean, isCloseWebSocket: boolean,
isDemoBannerView : 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, isDemoBannerView}) => { isCloseWebSocket, isDemoBannerView }) => {
const classes = useLayoutStyles(); const classes = useLayoutStyles();
@ -106,9 +106,9 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
handleQueryChange(query); handleQueryChange(query);
}, [query, handleQueryChange]); }, [query, handleQueryChange]);
useEffect(()=>{ useEffect(() => {
isCloseWebSocket && closeWebSocket() isCloseWebSocket && closeWebSocket()
},[isCloseWebSocket]) }, [isCloseWebSocket])
const ws = useRef(null); const ws = useRef(null);
@ -126,7 +126,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
sendQueryWhenWsOpen(query); sendQueryWhenWsOpen(query);
ws.current.onclose = () => { ws.current.onclose = () => {
if(window.location.pathname === "/") if (window.location.pathname === "/")
setForceRender(forceRender + 1); setForceRender(forceRender + 1);
} }
ws.current.onerror = (event) => { ws.current.onerror = (event) => {
@ -140,13 +140,13 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
openWebSocket(`leftOff(${leftOffBottom})`, false); openWebSocket(`leftOff(${leftOffBottom})`, false);
} }
} }
} catch (e) {} } catch (e) { }
} }
const sendQueryWhenWsOpen = (query) => { const sendQueryWhenWsOpen = (query) => {
setTimeout(() => { setTimeout(() => {
if (ws?.current?.readyState === WebSocket.OPEN) { if (ws?.current?.readyState === WebSocket.OPEN) {
ws.current.send(JSON.stringify({"query": query, "enableFullEntries": false})); ws.current.send(JSON.stringify({ "query": query, "enableFullEntries": false }));
} else { } else {
sendQueryWhenWsOpen(query); sendQueryWhenWsOpen(query);
} }
@ -154,7 +154,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
} }
const closeWebSocket = () => { const closeWebSocket = () => {
if(ws?.current?.readyState === WebSocket.OPEN) { if (ws?.current?.readyState === WebSocket.OPEN) {
ws.current.close(); ws.current.close();
} }
} }
@ -194,7 +194,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
pauseOnHover: true, pauseOnHover: true,
draggable: true, draggable: true,
progress: undefined, progress: undefined,
}); }, { containerId: TOAST_CONTAINER_ID });
break; break;
case "queryMetadata": case "queryMetadata":
setQueriedCurrent(queriedCurrent + message.data.current); setQueriedCurrent(queriedCurrent + message.data.current);
@ -217,13 +217,13 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
} }
useEffect(() => { useEffect(() => {
setTrafficViewerApiState({...trafficViewerApiProp, webSocket : {close : closeWebSocket}}); setTrafficViewerApiState({ ...trafficViewerApiProp, webSocket: { close: closeWebSocket } });
(async () => { (async () => {
openWebSocket("leftOff(-1)", true); openWebSocket("leftOff(-1)", true);
try{ try {
const tapStatusResponse = await trafficViewerApiProp.tapStatus(); const tapStatusResponse = await trafficViewerApiProp.tapStatus();
setTappingStatus(tapStatusResponse); setTappingStatus(tapStatusResponse);
if(setAnalyzeStatus) { if (setAnalyzeStatus) {
const analyzeStatusResponse = await trafficViewerApiProp.analyzeStatus(); const analyzeStatusResponse = await trafficViewerApiProp.analyzeStatus();
setAnalyzeStatus(analyzeStatusResponse); setAnalyzeStatus(analyzeStatusResponse);
} }
@ -235,7 +235,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
}, []); }, []);
const toggleConnection = () => { const toggleConnection = () => {
if(ws?.current?.readyState === WebSocket.OPEN) { if (ws?.current?.readyState === WebSocket.OPEN) {
ws?.current?.close(); ws?.current?.close();
} else { } else {
if (query) { if (query) {
@ -349,19 +349,28 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
setAddressesWithTLS={setAddressesWithTLS} setAddressesWithTLS={setAddressesWithTLS}
userDismissedTLSWarning={userDismissedTLSWarning} userDismissedTLSWarning={userDismissedTLSWarning}
setUserDismissedTLSWarning={setUserDismissedTLSWarning} /> setUserDismissedTLSWarning={setUserDismissedTLSWarning} />
<ToastContainer/>
</div> </div>
); );
}; };
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, isDemoBannerView}) => { 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} isDemoBannerView={isDemoBannerView} /> setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView} />
<ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID}
position="bottom-right"
autoClose={5000}
hideProgressBar={false}
newestOnTop={false}
closeOnClick
rtl={false}
pauseOnFocusLoss
draggable
pauseOnHover />
</RecoilRoot> </RecoilRoot>
} }

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

@ -11,7 +11,7 @@ export interface InformationIconProps{
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"> <a href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.flex} title="documentation" target="_blank">
<img className="headerIcon" src={infoImg} alt="Info icon"/> <img className="headerIcon" src={infoImg} alt="Info icon"/>
</a> </a>
</React.Fragment> </React.Fragment>

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

@ -1,3 +1,5 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill="#627EF7" d="M12 4.707c-2.938-1.83-7.416-2.567-12-2.707v17.714c3.937.12 7.795.681 10.667 1.995.846.388 1.817.388 2.667 0 2.872-1.314 6.729-1.875 10.666-1.995v-17.714c-4.584.14-9.062.877-12 2.707zm-10 13.104v-13.704c5.157.389 7.527 1.463 9 2.334v13.168c-1.525-.546-4.716-1.505-9-1.798zm20 0c-4.283.293-7.475 1.252-9 1.799v-13.171c1.453-.861 3.83-1.942 9-2.332v13.704z"/> <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"/>
</svg> <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 Swipe Overlay

Before

Width:  |  Height:  |  Size: 471 B

After

Width:  |  Height:  |  Size: 454 B

1
ui-common/src/configs/Consts.ts Normal file
View File

@ -0,0 +1 @@
export const TOAST_CONTAINER_ID = "Common";

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.138", "@up9/mizu-common": "1.0.139",
"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",

29
ui/src/components/ServiceMapModal/ServiceMapModal.tsx
View File

@ -11,6 +11,7 @@ import ServiceMapOptions from './ServiceMapOptions'
import { useCommonStyles } from "../../helpers/commonStyle"; import { useCommonStyles } from "../../helpers/commonStyle";
import refresh from "../assets/refresh.svg"; import refresh from "../assets/refresh.svg";
import close from "../assets/close.svg"; import close from "../assets/close.svg";
import { TOAST_CONTAINER_ID } from "../../consts";
interface GraphData { interface GraphData {
nodes: Node[]; nodes: Node[];
@ -140,7 +141,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
setGraphData(newGraphData) setGraphData(newGraphData)
} catch (ex) { } catch (ex) {
toast.error("An error occurred while loading Mizu Service Map, see console for mode details"); toast.error("An error occurred while loading Mizu Service Map, see console for mode details", { containerId: TOAST_CONTAINER_ID });
console.error(ex); console.error(ex);
} finally { } finally {
setIsLoading(false) setIsLoading(false)
@ -176,20 +177,20 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
<img alt="spinner" src={spinnerImg} style={{ height: 50 }} /> <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
</div>} </div>}
{!isLoading && <div style={{ height: "100%", width: "100%" }}> {!isLoading && <div style={{ height: "100%", width: "100%" }}>
<div style={{ display: "flex", justifyContent: "space-between" }}> <div style={{ display: "flex", justifyContent: "space-between" }}>
<div> <div>
<Button <Button
startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight:"8%"}}></img>} startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}></img>}
size="medium" size="medium"
variant="contained" variant="contained"
className={commonClasses.outlinedButton + " " + commonClasses.imagedButton} className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
onClick={refreshServiceMap} onClick={refreshServiceMap}
> >
Refresh Refresh
</Button> </Button>
</div>
<img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}></img>
</div> </div>
<img src={close} alt="close" onClick={() => onClose()} style={{cursor:"pointer"}}></img>
</div>
<Graph <Graph
graph={graphData} graph={graphData}
options={ServiceMapOptions} options={ServiceMapOptions}

1
ui/src/consts.ts
View File

@ -1 +1,2 @@
export const adminUsername = "admin"; export const adminUsername = "admin";
export const TOAST_CONTAINER_ID = "Community";

5
ui/src/index.tsx
View File

@ -1,14 +1,15 @@
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import './index.sass'; import './index.sass';
import {ToastContainer} from "react-toastify"; import {ToastContainer} from "react-toastify";
import 'react-toastify/dist/ReactToastify.css'; import 'react-toastify/dist/ReactToastify.min.css';
import {RecoilRoot} from "recoil"; import {RecoilRoot} from "recoil";
import App from './App'; import App from './App';
import { TOAST_CONTAINER_ID } from './consts';
ReactDOM.render( <> ReactDOM.render( <>
<RecoilRoot> <RecoilRoot>
<App/> <App/>
<ToastContainer <ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID}
position="bottom-right" position="bottom-right"
autoClose={5000} autoClose={5000}
hideProgressBar={false} hideProgressBar={false}