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

* 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>

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

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

ui-common/src/components/UI/InformationIcon.tsx

@@ -1,18 +1,17 @@
 import React, { CSSProperties } from "react";
-import infoImg from 'assets/info.svg';
 import styles from "./style/InformationIcon.module.sass"
 
 const DEFUALT_LINK = "https://getmizu.io/docs"
 
-export interface InformationIconProps{
+export interface InformationIconProps {
     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>
-        <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 href={DEFUALT_LINK ? DEFUALT_LINK : link} style={style} className={styles.linkStyle} title="documentation" target="_blank">
+            <span>Docs</span>
         </a>
     </React.Fragment>
 }

ui-common/src/components/UI/assets/info.svg

@@ -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>

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

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

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

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

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

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