TRA-4122 - OAS dialog 2 (#637)

* parent d97d481392
author Amit Fainholts <amit@up9.com> 1641398982 +0200
committer Igor Gov <igor.govorov1@gmail.com> 1642070154 +0200

init

* revert

* small fixes

* api request to oas added

* redoc version downgraded and remove redundant package-lock

* remove redundant package json

* redoc updated to latest

* libraries updated to prevent vulnerabilities

* pr fixes

* remove ! from global var

* update useEffect in OasModal and other pr fixes

* change errors messages

Co-authored-by: Amit Fainholts <amit@up9.com>
Co-authored-by: Igor Gov <igor.govorov1@gmail.com>
Co-authored-by: lirazyehezkel <61656597+lirazyehezkel@users.noreply.github.com>

ui/package.json

@@ -15,11 +15,15 @@
     "@types/react-dom": "^17.0.3",
     "@uiw/react-textarea-code-editor": "^1.4.12",
     "axios": "^0.21.1",
+    "core-js": "^3.20.2",
     "highlight.js": "^11.3.1",
     "json-beautify": "^1.1.1",
     "jsonpath": "^1.1.1",
+    "marked": "^4.0.10",
     "material-ui-popup-state": "^2.0.0",
+    "mobx": "^6.3.10",
     "moment": "^2.29.1",
+    "node-fetch": "^3.1.1",
     "node-sass": "^5.0.0",
     "numeral": "^2.0.6",
     "protobuf-decoder": "^0.1.0",
@@ -32,6 +36,8 @@
     "react-syntax-highlighter": "^15.4.3",
     "react-toastify": "^8.0.3",
     "recoil": "^0.5.2",
+    "redoc": "^2.0.0-rc.59",
+    "styled-components": "^5.3.3",
     "typescript": "^4.2.4",
     "web-vitals": "^1.1.1",
     "xml-formatter": "^2.6.0"

ui/src/components/OasModal/OasModal.sass

@@ -0,0 +1,6 @@
+@import '../../variables.module.scss'
+
+.NotSelectedMessage
+    margin-left: 41%
+    padding-top: 3%
+    font-size: large

ui/src/components/OasModal/OasModal.tsx

@@ -0,0 +1,95 @@
+import { Box, Fade, FormControl, MenuItem, Modal } from "@material-ui/core";
+import { useEffect, useState } from "react";
+import { RedocStandalone } from "redoc";
+import Api from "../../helpers/api";
+import { Select } from "../UI/Select";
+import closeIcon from "../assets/closeIcon.svg";
+import { toast } from 'react-toastify';
+import './OasModal.sass'
+
+const api = Api.getInstance();
+const noOasServiceSelectedMessage = "Please Select OasService";
+
+const OasModal = ({ openModal, handleCloseModal }) => { 
+  const [oasServices, setOasServices] = useState([])
+  const [selectedServiceName, setSelectedServiceName] = useState("");
+  const [selectedServiceSpec, setSelectedServiceSpec] = useState(null);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const services = await api.getOasServices();
+        setOasServices(services);
+      } catch (e) {
+        toast.error("Error occurred while fetching services list");
+        console.error(e);
+      }
+    })();
+  }, [openModal]);
+
+  const onSelectedOASService = async (selectedService) => {
+    setSelectedServiceName(selectedService);
+    if(oasServices.length === 0){
+      return
+    }
+    try {
+      const data = await api.getOasByService(selectedService);
+      setSelectedServiceSpec(data);
+    } catch (e) {
+      toast.error("Error occurred while fetching service OAS spec");
+      console.error(e);
+    }
+  };
+
+  return (
+    <Modal
+      aria-labelledby="transition-modal-title"
+      aria-describedby="transition-modal-description"
+      open={openModal}
+      onClose={handleCloseModal}
+      closeAfterTransition
+      hideBackdrop={true}
+      style={{ overflow: "auto", backgroundColor: "#ffffff", color:"black" }}
+    >
+      <Fade in={openModal}>
+        <Box>
+          <div
+            style={{
+              display: "flex",
+              justifyContent: "space-between",
+              padding: "1%",
+            }}
+          >
+            <div style={{ marginLeft: "40%" }}>
+              <FormControl>
+                <Select
+                  labelId="service-select-label"
+                  id="service-select"
+                  label="Show OAS"
+                  placeholder="Show OAS"
+                  value={selectedServiceName}
+                  onChange={onSelectedOASService}
+                >
+                  {oasServices.map((service) => (
+                    <MenuItem key={service} value={service}>
+                      {service}
+                    </MenuItem>
+                  ))}
+                </Select>
+              </FormControl>
+            </div>
+            <div style={{ cursor: "pointer" }}>
+              <img src={closeIcon} alt="Back" onClick={handleCloseModal} />
+            </div>
+          </div>
+          {selectedServiceSpec && <RedocStandalone spec={selectedServiceSpec} />}
+          <div className="NotSelectedMessage">
+            {!selectedServiceName && noOasServiceSelectedMessage}
+          </div>
+        </Box>
+      </Fade>
+    </Modal>
+  );
+};
+
+export default OasModal;

ui/src/components/TrafficPage.tsx

@@ -1,7 +1,7 @@
-import React, {useEffect, useMemo, useRef, useState} from "react";
-import {Filters} from "./Filters";
-import {EntriesList} from "./EntriesList";
-import {makeStyles} from "@material-ui/core";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { Filters } from "./Filters";
+import { EntriesList } from "./EntriesList";
+import { makeStyles, Button } from "@material-ui/core";
 import "./style/TrafficPage.sass";
 import styles from './style/EntriesList.module.sass';
 import {EntryDetailed} from "./EntryDetailed";
@@ -18,6 +18,7 @@ import entriesAtom from "../recoil/entries";
 import focusedEntryIdAtom from "../recoil/focusedEntryId";
 import websocketConnectionAtom, {WsConnectionStatus} from "../recoil/wsConnection";
 import queryAtom from "../recoil/query";
+import OasModal from "./OasModal/OasModal";
 
 const useLayoutStyles = makeStyles(() => ({
   details: {
@@ -30,24 +31,23 @@ const useLayoutStyles = makeStyles(() => ({
   },
 
   viewer: {
-        display: 'flex',
-        overflowY: 'auto',
+    display: "flex",
+    overflowY: "auto",
     height: "calc(100% - 70px)",
     padding: 5,
     paddingBottom: 0,
     overflow: "auto",
-    }
+  },
 }));
 
 interface TrafficPageProps {
-    onTLSDetected: (destAddress: string) => void;
   setAnalyzeStatus?: (status: any) => void;
+  onTLSDetected: (destAddress: string) => void;
 }
 
 const api = Api.getInstance();
 
-export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnalyzeStatus}) => {
-
+export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus,onTLSDetected}) => {
     const classes = useLayoutStyles();
     const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom);
     const [entries, setEntries] = useRecoilState(entriesAtom);
@@ -67,12 +67,17 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
     const [truncatedTimestamp, setTruncatedTimestamp] = useState(0);
 
     const [startTime, setStartTime] = useState(0);
-
     const scrollableRef = useRef(null);
 
-    const handleQueryChange = useMemo(() => debounce(async (query: string) => {
+    const [openOasModal, setOpenOasModal] = useState(false);
+    const handleOpenModal = () => setOpenOasModal(true);
+    const handleCloseModal = () => setOpenOasModal(false);
+
+    const handleQueryChange = useMemo(
+      () =>
+        debounce(async (query: string) => {
           if (!query) {
-            setQueryBackgroundColor("#f5f5f5")
+            setQueryBackgroundColor("#f5f5f5");
           } else {
             const data = await api.validateQuery(query);
             if (!data) {
@@ -84,7 +89,9 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
               setQueryBackgroundColor("#fad6dc");
             }
           }
-    }, 500), []) as (query: string) => void;
+        }, 500),
+      []
+    ) as (query: string) => void;
 
     useEffect(() => {
         handleQueryChange(query);
@@ -93,7 +100,6 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
     const ws = useRef(null);
 
     const listEntry = useRef(null);
-
     const openWebSocket = (query: string, resetEntries: boolean) => {
         if (resetEntries) {
             setFocusedEntryId(null);
@@ -121,13 +127,13 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
     }
 
     if (ws.current) {
-        ws.current.onmessage = e => {
+      ws.current.onmessage = (e) => {
         if (!e?.data) return;
         const message = JSON.parse(e.data);
         switch (message.messageType) {
           case "entry":
             const entry = message.data;
-                    if (!focusedEntryId) setFocusedEntryId(entry.id.toString())
+            if (!focusedEntryId) setFocusedEntryId(entry.id.toString());
             const newEntries = [...entries, entry];
             if (newEntries.length === 10001) {
               setLeftOffTop(newEntries[0].entry.id);
@@ -135,14 +141,13 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
               setNoMoreDataTop(false);
             }
             setEntries(newEntries);
-                    break
+            break;
           case "status":
             setTappingStatus(message.tappingStatus);
-                    break
+            break;
           case "analyzeStatus":
-                    if(setAnalyzeStatus)
             setAnalyzeStatus(message.analyzeStatus);
-                    break
+            break;
           case "outboundLink":
             onTLSDetected(message.Data.DstIP);
             break;
@@ -171,9 +176,11 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
             setStartTime(message.data);
             break;
           default:
-                    console.error(`unsupported websocket message type, Got: ${message.messageType}`)
-            }
+            console.error(
+              `unsupported websocket message type, Got: ${message.messageType}`
+            );
         }
+      };
     }
 
     useEffect(() => {
@@ -235,6 +242,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
     return (
         <div className="TrafficPage">
             <div className="TrafficPageHeader">
+              <div className="TrafficPageStreamStatus">
                   <img className="playPauseIcon" style={{visibility: wsConnection === WsConnectionStatus.Connected ? "visible" : "hidden"}} alt="pause"
                       src={pauseIcon} onClick={toggleConnection}/>
                   <img className="playPauseIcon" style={{position: "absolute", visibility: wsConnection === WsConnectionStatus.Connected ? "hidden" : "visible"}} alt="play"
@@ -246,6 +254,28 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
                       </div>
                   </div>
               </div>
+              {window["isOasEnabled"] && <div>
+                <Button
+                  type="submit"
+                  variant="contained"
+                  style={{
+                    margin: "2px 0px 0px 0px",
+                    backgroundColor: variables.blueColor,
+                    fontWeight: 600,
+                    borderRadius: "4px",
+                    color: "#fff",
+                    textTransform: "none",
+                  }}
+                  onClick={handleOpenModal}
+                >
+                  Show OAS
+                </Button>
+              </div>}
+            </div>
+            {window["isOasEnabled"] && <OasModal
+              openModal={openOasModal}
+              handleCloseModal={handleCloseModal}
+            />}
             {<div className="TrafficPage-Container">
                 <div className="TrafficPage-ListContainer">
                     <Filters
@@ -281,7 +311,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
                     {focusedEntryId && <EntryDetailed/>}
                 </div>
             </div>}
-            {tappingStatus && <StatusBar/>}
+            {tappingStatus && !openOasModal && <StatusBar/>}
         </div>
-    )
+  );
 };

ui/src/components/assets/closeIcon.svg

@@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.5 11C20.5 16.2467 16.2467 20.5 11 20.5C5.75329 20.5 1.5 16.2467 1.5 11C1.5 5.75329 5.75329 1.5 11 1.5C16.2467 1.5 20.5 5.75329 20.5 11Z" stroke="#2B3560"/>
+<path d="M14.4762 9.05338L13.1448 7.7219L11.1528 9.71382L9.16091 7.7219L7.82943 9.05338L9.82135 11.0453L7.83226 13.0344L9.16374 14.3659L11.1528 12.3768L13.1419 14.3659L14.4734 13.0344L12.4843 11.0453L14.4762 9.05338Z" fill="#627EF7"/>
+</svg>

ui/src/components/style/TrafficPage.sass

@@ -13,6 +13,11 @@
         display: flex
         align-items: center
         background-color: $header-background-color
+        justify-content: space-between
+
+        .TrafficPageStreamStatus
+                display: flex
+                align-items: center
                 
 .TrafficPage-Header
     display: flex

ui/src/helpers/api.js

@@ -61,6 +61,16 @@ export default class Api {
         return response.data;
     }
 
+    getOasServices = async () => {
+        const response = await this.client.get("/oas");
+        return response.data;
+    }
+
+    getOasByService = async (selectedService) => {
+        const response = await this.client.get(`/oas/${selectedService}`);
+        return response.data;
+    }
+
     validateQuery = async (query) => {
         if (this.source) {
             this.source.cancel();