Remove TLSWarning React component (#1014)

agent/pkg/providers/status_provider.go

@@ -4,18 +4,13 @@ import (
 	"encoding/json"
 	"fmt"
 	"os"
-	"time"
 
-	"github.com/patrickmn/go-cache"
 	"github.com/up9inc/mizu/agent/pkg/models"
 	"github.com/up9inc/mizu/shared"
 )
 
-const tlsLinkRetainmentTime = time.Minute * 15
-
 var (
-	authStatus     *models.AuthStatus
+	authStatus *models.AuthStatus
-	RecentTLSLinks = cache.New(tlsLinkRetainmentTime, tlsLinkRetainmentTime)
 )
 
 func GetAuthStatus() (*models.AuthStatus, error) {

ui-common/example/src/api.js

@@ -54,11 +54,6 @@ export default class Api {
         return response.data;
     }
 
-    getRecentTLSLinks = async () => {
-        const response = await client.get("/status/recentTLSLinks");
-        return response.data;
-    }
-
     getOasServices = async () => {
         const response = await client.get("/oas");
         return response.data;
@@ -121,4 +116,4 @@ export function getWebsocketUrl(){
     }
 
     return websocketUrl;
-}
+}

ui-common/src/components/TLSWarning/TLSWarning.sass

@@ -1,12 +0,0 @@
-.httpsDomains
-  display: none
-  margin: 0
-  padding: 0
-  list-style: none
-
-.customWarningStyle
-  &:hover
-    overflow-y: scroll
-    height: 85px
-    .httpsDomains
-      display: block

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

@@ -1,44 +0,0 @@
-import {Snackbar} from "@material-ui/core";
-import MuiAlert from "@material-ui/lab/Alert";
-import React, {useEffect} from "react";
-import { RecoilState, useRecoilValue } from "recoil";
-import TrafficViewerApiAtom from "../../recoil/TrafficViewerApi/atom";
-import TrafficViewerApi from "../TrafficViewer/TrafficViewerApi";
-import './TLSWarning.sass';
-
-interface TLSWarningProps {
-    showTLSWarning: boolean
-    setShowTLSWarning: (show: boolean) => void
-    addressesWithTLS: Set<string>
-    setAddressesWithTLS: (addresses: Set<string>) => void
-    userDismissedTLSWarning: boolean
-    setUserDismissedTLSWarning: (flag: boolean) => void
-}
-
-export const TLSWarning: React.FC<TLSWarningProps>  = ({showTLSWarning, setShowTLSWarning, addressesWithTLS, setAddressesWithTLS, userDismissedTLSWarning, setUserDismissedTLSWarning}) => {
-
-    const trafficViewerApi = useRecoilValue(TrafficViewerApiAtom as RecoilState<TrafficViewerApi>)
-    useEffect(() => {
-        (async () => {
-            try {
-                const getRecentTLSLinksFunc = trafficViewerApi?.getRecentTLSLinks ? trafficViewerApi?.getRecentTLSLinks : function(){}
-                const recentTLSLinks = await getRecentTLSLinksFunc();
-                if (recentTLSLinks?.length > 0) {
-                    setAddressesWithTLS(new Set(recentTLSLinks));
-                    setShowTLSWarning(true);
-                }
-            } catch (e) {
-                console.error(e);
-            }
-        })();
-    }, [setShowTLSWarning, setAddressesWithTLS,trafficViewerApi]);
-
-    return (<Snackbar open={showTLSWarning && !userDismissedTLSWarning}>
-        <MuiAlert classes={{filledWarning: 'customWarningStyle'}} elevation={6} variant="filled"
-                  onClose={() => setUserDismissedTLSWarning(true)} severity="warning">
-            Mizu is detecting TLS traffic, this type of traffic will not be displayed.
-            {addressesWithTLS.size > 0 &&
-            <ul className="httpsDomains"> {Array.from(addressesWithTLS, address => <li>{address}</li>)} </ul>}
-        </MuiAlert>
-    </Snackbar>);
-}

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

@@ -14,7 +14,6 @@ import {RecoilRoot, RecoilState, useRecoilState, useRecoilValue, useSetRecoilSta
 import entriesAtom from "../../recoil/entries";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
 import queryAtom from "../../recoil/query";
-import {TLSWarning} from "../TLSWarning/TLSWarning";
 import trafficViewerApiAtom from "../../recoil/TrafficViewerApi"
 import TrafficViewerApi from "./TrafficViewerApi";
 import {StatusBar} from "../UI/StatusBar";
@@ -77,10 +76,6 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   const setLeftOffTop = useSetRecoilState(leftOffTopAtom);
   const scrollableRef = useRef(null);
 
-  const [showTLSWarning, setShowTLSWarning] = useState(false);
-  const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false);
-  const [addressesWithTLS, setAddressesWithTLS] = useState(new Set<string>());
-
   const handleQueryChange = useMemo(
     () =>
       debounce(async (query: string) => {
@@ -286,12 +281,6 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
           <EntryDetailed/>
         </div>
       </div>}
-      <TLSWarning showTLSWarning={showTLSWarning}
-                  setShowTLSWarning={setShowTLSWarning}
-                  addressesWithTLS={addressesWithTLS}
-                  setAddressesWithTLS={setAddressesWithTLS}
-                  userDismissedTLSWarning={userDismissedTLSWarning}
-                  setUserDismissedTLSWarning={setUserDismissedTLSWarning}/>
     </div>
   );
 };

ui-common/src/components/TrafficViewer/TrafficViewerApi.ts

@@ -4,7 +4,6 @@ type TrafficViewerApi = {
   analyzeStatus: () => any
   fetchEntries: (leftOff: any, direction: number, query: any, limit: number, timeoutMs: number) => any
   getEntry: (entryId: any, query: string) => any
-  getRecentTLSLinks: () => any,
   webSocket: {
     close: () => void
   }

ui/src/helpers/api.js

@@ -62,11 +62,6 @@ export default class Api {
         return response.data;
     }
 
-    getRecentTLSLinks = async () => {
-        const response = await client.get("/status/recentTLSLinks");
-        return response.data;
-    }
-
     getAuthStatus = async () => {
         const response = await client.get("/status/auth");
         return response.data;