Traffic viewer changing ebpf to lock icon (#938)

* passed containerId in the object config

* pkg version

* tmp: run acceptance tests, revert before merge

* reverte

Co-authored-by: Leon <>

ui-common/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@up9/mizu-common",
-  "version": "1.0.138",
+  "version": "1.0.142",
   "description": "Made with create-react-library",
   "author": "",
   "license": "MIT",
@@ -27,7 +27,7 @@
     "@material-ui/icons": "^4.11.2",
     "@material-ui/lab": "^4.0.0-alpha.60",
     "node-sass": "^6.0.0",
-    "react":"^17.0.2",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "recoil": "^0.5.2",
     "react-copy-to-clipboard": "^5.0.3",
@@ -77,7 +77,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-sass": "^1.2.10",
     "rollup-plugin-scss": "^3.0.0",
-    "react":"^17.0.2",
+    "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "typescript": "^4.2.4"
   },
@@ -90,4 +90,4 @@
   "files": [
     "dist"
   ]
-}
+}

ui-common/src/components/OasModal/OasModal.tsx

@@ -1,4 +1,4 @@
-import { Box, Fade, FormControl, MenuItem, Modal, Backdrop, ListSubheader } from "@material-ui/core";
+import { Box, Fade, FormControl, MenuItem, Modal, Backdrop } from "@material-ui/core";
 import { useCallback, useEffect, useState } from "react";
 import { RedocStandalone } from "redoc";
 import closeIcon from "assets/closeIcon.svg";
@@ -7,7 +7,8 @@ import style from './OasModal.module.sass';
 import openApiLogo from 'assets/openApiLogo.png'
 import { redocThemeOptions } from "./redocThemeOptions";
 import React from "react";
-import { UI } from "../..";
+import { Select } from "../UI/Select";
+
 
 const modalStyle = {
   position: 'absolute',
@@ -23,68 +24,44 @@ const modalStyle = {
   color: '#000',
 };
 
-const ipAddressWithPortRegex = new RegExp('([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}):([0-9]{1,5})');
 
 const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService }) => {
   const [oasServices, setOasServices] = useState([] as string[])
   const [selectedServiceName, setSelectedServiceName] = useState("");
   const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
-  const [resolvedServices, setResolvedServices] = useState([]);
-  const [unResolvedServices, setUnResolvedServices] = useState([]);
 
-  const onSelectedOASService = useCallback(async (selectedService) => {
+  const onSelectedOASService = async (selectedService) => {
-    if (!!selectedService) {
+    if (oasServices.length === 0) {
-      setSelectedServiceName(selectedService);
+      setSelectedServiceSpec(null);
-      if (oasServices.length === 0) {
+      setSelectedServiceName("");
-        return
+      return
-      }
+    }
-      try {
+    else {
-        const data = await getOasByService(selectedService);
+      setSelectedServiceName(selectedService ? selectedService : oasServices[0]);
-        setSelectedServiceSpec(data);
+    }
+    try {
+      const data = await getOasByService(selectedService ? selectedService : oasServices[0]);
+      setSelectedServiceSpec(data);
       } catch (e) {
         toast.error("Error occurred while fetching service OAS spec");
         console.error(e);
-      }
+      }  
-    }
+  };
-  }, [oasServices.length])
-
-  const resolvedArrayBuilder = useCallback(async (services) => {
-    const resServices = [];
-    const unResServices = [];
-    services.forEach(s => {
-      if (ipAddressWithPortRegex.test(s)) {
-        unResServices.push(s);
-      }
-      else {
-        resServices.push(s);
-      }
-    });
-
-    resServices.sort();
-    unResServices.sort();
-    if (resServices.length > 0) {
-      onSelectedOASService(resServices[0]);
-    }
-    else {
-      onSelectedOASService(unResServices[0]);
-    }
-
-    setResolvedServices(resServices);
-    setUnResolvedServices(unResServices);
-  }, [onSelectedOASService])
 
   useEffect(() => {
     (async () => {
       try {
         const services = await getOasServices();
-        resolvedArrayBuilder(services);
         setOasServices(services);
       } catch (e) {
         console.error(e);
       }
     })();
-  }, [openModal, resolvedArrayBuilder]);
+  }, [openModal]);
 
+  useEffect(() => {
+    onSelectedOASService(null);
+  },[oasServices])
 
   return (
     <Modal
@@ -102,34 +79,27 @@ const OasModal = ({ openModal, handleCloseModal, getOasServices, getOasByService
         <Box sx={modalStyle}>
           <div className={style.boxContainer}>
             <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}>OpenAPI</div>
             </div>
             <div style={{ cursor: "pointer" }}>
-                <img src={closeIcon} alt="close" onClick={handleCloseModal} />
+              <img src={closeIcon} alt="close" onClick={handleCloseModal} />
-              </div>
+            </div>
           </div>
           <div className={style.selectContainer} >
               <FormControl>
-                <UI.Select
+                <Select
                   labelId="service-select-label"
                   id="service-select"
                   value={selectedServiceName}
                   onChangeCb={onSelectedOASService}
                 >
-                  <ListSubheader disableSticky={true}>Resolved</ListSubheader>
+                  {oasServices.map((service) => (
-                  {resolvedServices.map((service) => (
                     <MenuItem key={service} value={service}>
                       {service}
                     </MenuItem>
                   ))}
-                  <ListSubheader disableSticky={true}>UnResolved</ListSubheader>
+                </Select>
-                  {unResolvedServices.map((service) => (
-                    <MenuItem key={service} value={service}>
-                      {service}
-                    </MenuItem>
-                  ))}
-                </UI.Select>
               </FormControl>
             </div>
           <div className={style.borderLine}></div>

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 { EntryItem } from "./EntryListItem/EntryListItem";
-import {makeStyles} from "@material-ui/core";
+import { makeStyles } from "@material-ui/core";
 import Protocol from "../UI/Protocol"
 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 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}/>
+        <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
                 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}
@@ -117,14 +118,10 @@ export const EntryDetailed = () => {
             } catch (error) {
                 if (error.response?.data?.type) {
                     toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
-                        position: "bottom-right",
                         theme: "colored",
                         autoClose: error.response.data.autoClose,
-                        hideProgressBar: false,
-                        closeOnClick: true,
-                        pauseOnHover: true,
-                        draggable: true,
                         progress: undefined,
+                        containerId: TOAST_CONTAINER_ID
                     });
                 }
                 console.error(error);
@@ -139,7 +136,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}

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/lock.svg';
 import {Summary} from "../../UI/Summary";
 import Queryable from "../../UI/Queryable";
 import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"

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 { toast, ToastContainer } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
 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,
+  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();
 
@@ -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();
     }
   }
@@ -186,14 +186,11 @@ export const TrafficViewer : React.FC<TrafficViewerProps> = ({setAnalyzeStatus,
           break;
         case "toast":
           toast[message.data.type](message.data.text, {
-            position: "bottom-right",
             theme: "colored",
             autoClose: message.data.autoClose,
-            hideProgressBar: false,
-            closeOnClick: true,
             pauseOnHover: true,
-            draggable: true,
             progress: undefined,
+            containerId: TOAST_CONTAINER_ID
           });
           break;
         case "queryMetadata":
@@ -217,13 +214,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 +232,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 +346,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 ,
+  actionButtons, isShowStatusBar = true,
-                                                                webSocketUrl, isCloseWebSocket, isDemoBannerView}) => {
+  webSocketUrl, isCloseWebSocket, isDemoBannerView }) => {
   return <RecoilRoot>
     <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>
 }
 

ui-common/src/components/TrafficViewer/assets/lock.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="14" viewBox="0 0 12 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M3.33333 6.36364H8.66667V6.36011H10.6667V6.36364H11C11.2778 6.36364 11.5139 6.45644 11.7083 6.64205C11.9028 6.82765 12 7.05303 12 7.31818V13.0455C12 13.3106 11.9028 13.536 11.7083 13.7216C11.5139 13.9072 11.2778 14 11 14H1C0.722222 14 0.486111 13.9072 0.291666 13.7216C0.0972223 13.536 0 13.3106 0 13.0455V7.31818C0 7.05303 0.0972223 6.82765 0.291666 6.64205C0.486111 6.45644 0.722222 6.36364 1 6.36364H1.33333V4.45455C1.33333 3.23485 1.79167 2.1875 2.70833 1.3125C3.625 0.4375 4.72222 0 6 0C7.27778 0 8.375 0.4375 9.29167 1.3125C9.92325 1.91538 10.3373 2.60007 10.5337 3.36658L8.59659 3.85085C8.48731 3.40176 8.25026 3.00309 7.88542 2.65483C7.36458 2.15767 6.73611 1.90909 6 1.90909C5.26389 1.90909 4.63542 2.15767 4.11458 2.65483C3.59375 3.15199 3.33333 3.75189 3.33333 4.45455V6.36364Z" fill="#BCCEFD"/>
+</svg>

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>

ui-common/src/components/UI/SyntaxHighlighter/index.module.sass

@@ -0,0 +1,39 @@
+.highlighterContainer
+    &.fitScreen
+        pre
+            max-height: 90vh
+            overflow: auto
+
+    pre
+        code
+            font-size: 0.75rem
+
+            &:first-child
+                margin-right: 0.75rem
+                background: #F7F9FC
+
+                .react-syntax-highlighter-line-number
+                    color: rgb(98, 126, 247)
+
+
+
+            &:last-child
+                display: block
+
+    code.hljs
+        white-space: pre-wrap
+
+    code.hljs:before
+        counter-reset: listing
+
+.hljsMarkerLine
+    counter-increment: listing
+
+.hljsMarkerLine:before
+    content: counter(listing) "  "
+    display: inline-block
+    width: 3rem
+    padding-left: auto
+    margin-left: auto
+    text-align: right
+    opacity: .5

ui-common/src/components/UI/SyntaxHighlighter/index.scss

@@ -1,49 +0,0 @@
-.highlighterContainer {
-    &.fitScreen {
-        pre {
-            max-height: 90vh;
-            overflow: auto;
-        }
-    }
-
-    pre {
-        code {
-            font-size: 0.75rem;
-
-            &:first-child {
-                margin-right: 0.75rem;
-                background: #F7F9FC;
-
-                .react-syntax-highlighter-line-number {
-                    color: rgb(98, 126, 247);
-                }
-            }
-
-            &:last-child {
-                display: block;
-            }
-        }
-    }
-}
-
-code.hljs {
-    white-space: pre-wrap;
-}
-
-code.hljs:before {
-    counter-reset: listing;
-}
-
-code.hljs .hljs-marker-line {
-    counter-increment: listing;
-}
-
-code.hljs .hljs-marker-line:before {
-    content: counter(listing) "  ";
-    display: inline-block;
-    width: 3rem;
-    padding-left: auto;
-    margin-left: auto;
-    text-align: right;
-    opacity: .5;
-}

ui-common/src/components/UI/SyntaxHighlighter/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Lowlight from 'react-lowlight'
 import 'highlight.js/styles/atom-one-light.css'
-import './index.scss';
+import styles from './index.module.sass';
 
 import xml from 'highlight.js/lib/languages/xml'
 import json from 'highlight.js/lib/languages/json'
@@ -37,11 +37,11 @@ export const SyntaxHighlighter: React.FC<Props> = ({
     const markers = showLineNumbers ? code.split("\n").map((item, i) => {
         return {
             line: i + 1,
-            className: 'hljs-marker-line'
+            className: styles.hljsMarkerLine
         }
     }) : [];
 
-    return <div style={{fontSize: ".75rem"}}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
+    return <div style={{fontSize: ".75rem"}} className={styles.highlighterContainer}><Lowlight language={language ? language : ""} value={code} markers={markers}/></div>;
 };
 
 export default SyntaxHighlighter;

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">
+<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>

ui-common/src/configs/Consts.ts

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

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.142",
     "axios": "^0.25.0",
     "core-js": "^3.20.2",
     "craco-babel-loader": "^1.0.3",
@@ -75,4 +75,4 @@
       "last 1 safari version"
     ]
   }
-}
+}

ui/src/components/Pages/TrafficPage/TrafficPage.tsx

@@ -44,7 +44,7 @@ const trafficViewerApi = {...api}
                                 className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
                                 style={{ marginRight: 25, textTransform: 'unset' }}
                                 onClick={handleOpenOasModal}>
-                                OpenApi Specs
+                                OpenAPI Specs
                               </Button>}
                               {window["isServiceMapEnabled"] && <Button
                                 startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{marginRight:"8%"}}></img>}

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 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>
-                        <img src={close} alt="close" onClick={() => onClose()} style={{cursor:"pointer"}}></img>
-                    </div>
                         <Graph
                             graph={graphData}
                             options={ServiceMapOptions}

ui/src/consts.ts

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

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}