Fix/regration-fixes-24.3 (#933)

* 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 <>
2025-07-04 11:58:41 +00:00 · 2022-03-27 15:47:46 +03:00 · 2022-03-27 15:47:46 +03:00 · c45a869b75
commit c45a869b75
parent 0a793cd9e0
13 changed files with 109 additions and 91 deletions
--- a/ui-common/package.json
+++ b/ui-common/package.json
@ -1,6 +1,6 @@
 {
  "name": "@up9/mizu-common",
-  "version": "1.0.138",
+  "version": "1.0.139",
  "description": "Made with create-react-library",
  "author": "",
  "license": "MIT",
--- a/ui-common/src/components/OasModal/OasModal.tsx
+++ b/ui-common/src/components/OasModal/OasModal.tsx
@ -7,7 +7,9 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { UI } from "../..";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";
+import { Select } from "../UI/Select";
+

 const modalStyle = {
  position: 'absolute',
@ -42,7 +44,7 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
        const data = await getOasByService(selectedService);
        setSelectedServiceSpec(data);
      } 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);
      }
    }
@ -106,32 +108,32 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
              <div className={style.title}>OpenApi </div>
            </div>
            <div style={{ cursor: "pointer" }}>
-                <img src={closeIcon} alt="close" onClick={handleCloseModal} />
-              </div>
+              <img src={closeIcon} alt="close" onClick={handleCloseModal} />
+            </div>
          </div>
          <div className={style.selectContainer} >
-              <FormControl>
-                <UI.Select
-                  labelId="service-select-label"
-                  id="service-select"
-                  value={selectedServiceName}
-                  onChangeCb={onSelectedOASService}
-                >
-                  <ListSubheader disableSticky={true}>Resolved</ListSubheader>
-                  {resolvedServices.map((service) => (
-                    <MenuItem key={service} value={service}>
-                      {service}
-                    </MenuItem>
-                  ))}
-                  <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
-                  {unResolvedServices.map((service) => (
-                    <MenuItem key={service} value={service}>
-                      {service}
-                    </MenuItem>
-                  ))}
-                </UI.Select>
-              </FormControl>
-            </div>
+            <FormControl>
+              <Select
+                labelId="service-select-label"
+                id="service-select"
+                value={selectedServiceName}
+                onChangeCb={onSelectedOASService}
+              >
+                <ListSubheader disableSticky={true}>Resolved</ListSubheader>
+                {resolvedServices.map((service) => (
+                  <MenuItem key={service} value={service}>
+                    {service}
+                  </MenuItem>
+                ))}
+                <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
+                {unResolvedServices.map((service) => (
+                  <MenuItem key={service} value={service}>
+                    {service}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+          </div>
          <div className={style.borderLine}></div>
          <div className={style.redoc}>
            {selectedServiceSpec && <RedocStandalone
--- a/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryDetailed.tsx
@ -1,17 +1,18 @@
-import React, {useEffect, useState} from "react";
+import React, { useEffect, useState } from "react";
 import EntryViewer from "./EntryDetailed/EntryViewer";
-import {EntryItem} from "./EntryListItem/EntryListItem";
-import {makeStyles} from "@material-ui/core";
+import { EntryItem } from "./EntryListItem/EntryListItem";
+import { makeStyles } from "@material-ui/core";
 import Protocol from "../UI/Protocol"
 import Queryable from "../UI/Queryable";
-import {toast} from "react-toastify";
-import {RecoilState, useRecoilState, useRecoilValue} from "recoil";
+import { toast } from "react-toastify";
+import { RecoilState, useRecoilState, useRecoilValue } from "recoil";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 import trafficViewerApi from "../../recoil/TrafficViewerApi";
 import TrafficViewerApi from "./TrafficViewerApi";
 import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
 import queryAtom from "../../recoil/query/atom";
 import useWindowDimensions, { useRequestTextByWidth } from "../../hooks/WindowDimensionsHook";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";

 const useStyles = makeStyles(() => ({
    entryTitle: {
@ -37,24 +38,24 @@ const useStyles = makeStyles(() => ({

 export const formatSize = (n: number) => n > 1000 ? `${Math.round(n / 1000)}KB` : `${n} B`;
 const minSizeDisplayRequestSize = 880;
-const EntryTitle: React.FC<any> = ({protocol, data, elapsedTime}) => {
+const EntryTitle: React.FC<any> = ({ protocol, data, elapsedTime }) => {
    const classes = useStyles();
    const request = data.request;
    const response = data.response;

    const { width } = useWindowDimensions();
-    const {requestText, responseText, elapsedTimeText} = useRequestTextByWidth(width)
+    const { requestText, responseText, elapsedTimeText } = useRequestTextByWidth(width)

    return <div className={classes.entryTitle}>
-        <Protocol protocol={protocol} horizontal={true}/>
-        {(width > minSizeDisplayRequestSize) && <div style={{right: "30px", position: "absolute", display: "flex"}}>
+        <Protocol protocol={protocol} horizontal={true} />
+        {(width > minSizeDisplayRequestSize) && <div style={{ right: "30px", position: "absolute", display: "flex" }}>
            {request && <Queryable
                query={`requestSize == ${data.requestSize}`}
-                style={{margin: "0 18px"}}
+                style={{ margin: "0 18px" }}
                displayIconOnMouseOver={true}
            >
                <div
-                    style={{opacity: 0.5}}
+                    style={{ opacity: 0.5 }}
                    id="entryDetailedTitleRequestSize"
                >
                    {`${requestText}${formatSize(data.requestSize)}`}
@ -62,11 +63,11 @@ const EntryTitle: React.FC<any> = ({protocol, data, elapsedTime}) => {
            </Queryable>}
            {response && <Queryable
                query={`responseSize == ${data.responseSize}`}
-                style={{margin: "0 18px"}}
+                style={{ margin: "0 18px" }}
                displayIconOnMouseOver={true}
            >
                <div
-                    style={{opacity: 0.5}}
+                    style={{ opacity: 0.5 }}
                    id="entryDetailedTitleResponseSize"
                >
                    {`${responseText}${formatSize(data.responseSize)}`}
@ -74,11 +75,11 @@ const EntryTitle: React.FC<any> = ({protocol, data, elapsedTime}) => {
            </Queryable>}
            {response && <Queryable
                query={`elapsedTime >= ${elapsedTime}`}
-                style={{margin: "0 0 0 18px"}}
+                style={{ margin: "0 0 0 18px" }}
                displayIconOnMouseOver={true}
            >
                <div
-                    style={{opacity: 0.5}}
+                    style={{ opacity: 0.5 }}
                    id="entryDetailedTitleElapsedTime"
                >
                    {`${elapsedTimeText}${Math.round(elapsedTime)}ms`}
@ -88,7 +89,7 @@ const EntryTitle: React.FC<any> = ({protocol, data, elapsedTime}) => {
    </div>;
 };

-const EntrySummary: React.FC<any> = ({entry}) => {
+const EntrySummary: React.FC<any> = ({ entry }) => {
    return <EntryItem
        key={`entry-${entry.id}`}
        entry={entry}
@ -125,7 +126,7 @@ export const EntryDetailed = () => {
                        pauseOnHover: true,
                        draggable: true,
                        progress: undefined,
-                    });
+                    }, { containerId: TOAST_CONTAINER_ID });
                }
                console.error(error);
            }
@ -139,7 +140,7 @@ export const EntryDetailed = () => {
            data={entryData.data}
            elapsedTime={entryData.data.elapsedTime}
        />}
-        {entryData && <EntrySummary entry={entryData.base}/>}
+        {entryData && <EntrySummary entry={entryData.base} />}
        <React.Fragment>
            {entryData && <EntryViewer
                representation={entryData.representation}
--- a/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.tsx
@ -4,7 +4,7 @@ import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
 import styles from './EntryListItem.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
 import Protocol, {ProtocolInterface} from "../../UI/Protocol"
-import eBPFLogo from '../../assets/ebpf.png';
+import eBPFLogo from 'assets/ebpf.png';
 import {Summary} from "../../UI/Summary";
 import Queryable from "../../UI/Queryable";
 import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
--- a/ui-common/src/components/TrafficViewer/EntryListItem/assets/ebpf.png
+++ b/ui-common/src/components/TrafficViewer/EntryListItem/assets/ebpf.png
--- a/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
+++ b/ui-common/src/components/TrafficViewer/TrafficViewer.tsx
@ -8,8 +8,7 @@ import { EntryDetailed } from "./EntryDetailed";
 import playIcon from 'assets/run.svg';
 import pauseIcon from 'assets/pause.svg';
 import variables from '../../variables.module.scss';
-import { toast,ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
+import { toast, ToastContainer } from 'react-toastify';
 import debounce from 'lodash/debounce';
 import { RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilState } from "recoil";
 import entriesAtom from "../../recoil/entries";
@ -20,6 +19,7 @@ import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
 import TrafficViewerApi from "./TrafficViewerApi";
 import { StatusBar } from "../UI/StatusBar";
 import tappingStatusAtom from "../../recoil/tappingStatus/atom";
+import { TOAST_CONTAINER_ID } from "../../configs/Consts";

 const useLayoutStyles = makeStyles(() => ({
  details: {
@ -47,14 +47,14 @@ interface TrafficViewerProps {
  trafficViewerApiProp: TrafficViewerApi,
  actionButtons?: JSX.Element,
  isShowStatusBar?: boolean,
-  webSocketUrl : string,
-  isCloseWebSocket : boolean,
-  isDemoBannerView : boolean
+  webSocketUrl: string,
+  isCloseWebSocket: boolean,
+  isDemoBannerView: boolean
 }

-export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus, trafficViewerApiProp,
-                                                               actionButtons,isShowStatusBar,webSocketUrl,
-                                                               isCloseWebSocket, isDemoBannerView}) => {
+export const TrafficViewer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp,
+  actionButtons, isShowStatusBar, webSocketUrl,
+  isCloseWebSocket, isDemoBannerView }) => {

  const classes = useLayoutStyles();

@ -106,9 +106,9 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
    handleQueryChange(query);
  }, [query, handleQueryChange]);

-  useEffect(()=>{
+  useEffect(() => {
    isCloseWebSocket && closeWebSocket()
-  },[isCloseWebSocket])
+  }, [isCloseWebSocket])

  const ws = useRef(null);

@ -126,7 +126,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
      sendQueryWhenWsOpen(query);

      ws.current.onclose = () => {
-        if(window.location.pathname === "/")
+        if (window.location.pathname === "/")
          setForceRender(forceRender + 1);
      }
      ws.current.onerror = (event) => {
@ -140,13 +140,13 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
          openWebSocket(`leftOff(${leftOffBottom})`, false);
        }
      }
-    } catch (e) {}
+    } catch (e) { }
  }

  const sendQueryWhenWsOpen = (query) => {
    setTimeout(() => {
      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 {
        sendQueryWhenWsOpen(query);
      }
@ -154,7 +154,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
  }

  const closeWebSocket = () => {
-    if(ws?.current?.readyState === WebSocket.OPEN) {
+    if (ws?.current?.readyState === WebSocket.OPEN) {
      ws.current.close();
    }
  }
@ -194,7 +194,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
            pauseOnHover: true,
            draggable: true,
            progress: undefined,
-          });
+          }, { containerId: TOAST_CONTAINER_ID });
          break;
        case "queryMetadata":
          setQueriedCurrent(queriedCurrent + message.data.current);
@ -217,13 +217,13 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
  }

  useEffect(() => {
-    setTrafficViewerApiState({...trafficViewerApiProp, webSocket : {close : closeWebSocket}});
+    setTrafficViewerApiState({ ...trafficViewerApiProp, webSocket: { close: closeWebSocket } });
    (async () => {
      openWebSocket("leftOff(-1)", true);
-      try{
+      try {
        const tapStatusResponse = await trafficViewerApiProp.tapStatus();
        setTappingStatus(tapStatusResponse);
-        if(setAnalyzeStatus) {
+        if (setAnalyzeStatus) {
          const analyzeStatusResponse = await trafficViewerApiProp.analyzeStatus();
          setAnalyzeStatus(analyzeStatusResponse);
        }
@ -235,7 +235,7 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
  }, []);

  const toggleConnection = () => {
-    if(ws?.current?.readyState === WebSocket.OPEN) {
+    if (ws?.current?.readyState === WebSocket.OPEN) {
      ws?.current?.close();
    } else {
      if (query) {
@ -349,19 +349,28 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
        setAddressesWithTLS={setAddressesWithTLS}
        userDismissedTLSWarning={userDismissedTLSWarning}
        setUserDismissedTLSWarning={setUserDismissedTLSWarning} />
-      <ToastContainer/>
    </div>
  );
 };

 const MemoiedTrafficViewer = React.memo(TrafficViewer)
 const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({ setAnalyzeStatus, trafficViewerApiProp,
-                                                                actionButtons, isShowStatusBar = true ,
-                                                                webSocketUrl, isCloseWebSocket, isDemoBannerView}) => {
+  actionButtons, isShowStatusBar = true,
+  webSocketUrl, isCloseWebSocket, isDemoBannerView }) => {
  return <RecoilRoot>
    <MemoiedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
-                          isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
-                          setAnalyzeStatus={setAnalyzeStatus} isDemoBannerView={isDemoBannerView} />
+      isCloseWebSocket={isCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
+      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>
 }

--- a/ui-common/src/components/UI/InformationIcon.tsx
+++ b/ui-common/src/components/UI/InformationIcon.tsx
@ -11,7 +11,7 @@ export interface InformationIconProps{

 export const InformationIcon: React.FC<InformationIconProps> = ({link,style}) => {
    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"/>
        </a>
    </React.Fragment>
--- a/ui-common/src/components/UI/assets/info.svg
+++ b/ui-common/src/components/UI/assets/info.svg
@ -1,3 +1,5 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<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"/>
-</svg>
+<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>
--- a/ui-common/src/configs/Consts.ts
+++ b/ui-common/src/configs/Consts.ts
@ -0,0 +1 @@
+export const TOAST_CONTAINER_ID = "Common";
--- a/ui/package.json
+++ b/ui/package.json
@ -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.138",
+    "@up9/mizu-common": "1.0.139",
    "axios": "^0.25.0",
    "core-js": "^3.20.2",
    "craco-babel-loader": "^1.0.3",
--- a/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
+++ b/ui/src/components/ServiceMapModal/ServiceMapModal.tsx
@ -11,6 +11,7 @@ import ServiceMapOptions from './ServiceMapOptions'
 import { useCommonStyles } from "../../helpers/commonStyle";
 import refresh from "../assets/refresh.svg";
 import close from "../assets/close.svg";
+import { TOAST_CONTAINER_ID } from "../../consts";

 interface GraphData {
    nodes: Node[];
@ -140,7 +141,7 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
            setGraphData(newGraphData)

        } 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);
        } finally {
            setIsLoading(false)
@ -176,20 +177,20 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onOpen
                        <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
                    </div>}
                    {!isLoading && <div style={{ height: "100%", width: "100%" }}>
-                    <div style={{ display: "flex", justifyContent: "space-between" }}> 
-                        <div>
-                        <Button
-                            startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight:"8%"}}></img>}
-                            size="medium"
-                            variant="contained"
-                            className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
-                            onClick={refreshServiceMap}
-                        >
-                            Refresh
-                        </Button>
+                        <div style={{ display: "flex", justifyContent: "space-between" }}>
+                            <div>
+                                <Button
+                                    startIcon={<img src={refresh} className="custom" alt="refresh" style={{ marginRight: "8%" }}></img>}
+                                    size="medium"
+                                    variant="contained"
+                                    className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
+                                    onClick={refreshServiceMap}
+                                >
+                                    Refresh
+                                </Button>
+                            </div>
+                            <img src={close} alt="close" onClick={() => onClose()} style={{ cursor: "pointer" }}></img>
                        </div>
-                        <img src={close} alt="close" onClick={() => onClose()} style={{cursor:"pointer"}}></img>
-                    </div>
                        <Graph
                            graph={graphData}
                            options={ServiceMapOptions}
--- a/ui/src/consts.ts
+++ b/ui/src/consts.ts
@ -1 +1,2 @@
 export const adminUsername = "admin";
+export const TOAST_CONTAINER_ID = "Community";
--- a/ui/src/index.tsx
+++ b/ui/src/index.tsx
@ -1,14 +1,15 @@
 import ReactDOM from 'react-dom';
 import './index.sass';
 import {ToastContainer} from "react-toastify";
-import 'react-toastify/dist/ReactToastify.css';
+import 'react-toastify/dist/ReactToastify.min.css';
 import {RecoilRoot} from "recoil";
 import App from './App';
+import { TOAST_CONTAINER_ID } from './consts';

 ReactDOM.render( <>
    <RecoilRoot>
        <App/>
-        <ToastContainer
+        <ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID} 
            position="bottom-right"
            autoClose={5000}
            hideProgressBar={false}