Use wss:// instead of ws:// in case of HTTPS (#573)

cli/apiserver/provider.go

@@ -4,11 +4,9 @@ import (
 	"bytes"
 	"encoding/json"
 	"fmt"
-	"io"
 	"io/ioutil"
 	"net/http"
 	"net/url"
-	"strings"
 	"time"
 
 	"github.com/up9inc/mizu/shared/kubernetes"
@@ -41,7 +39,7 @@ func NewProvider(url string, retries int, timeout time.Duration) *Provider {
 func (provider *Provider) TestConnection() error {
 	retriesLeft := provider.retries
 	for retriesLeft > 0 {
-		if _, err := provider.GetHealthStatus(); err != nil {
+		if isReachable, err := provider.isReachable(); err != nil || !isReachable {
 			logger.Log.Debugf("api server not ready yet %v", err)
 		} else {
 			logger.Log.Debugf("connection test to api server passed successfully")
@@ -57,27 +55,14 @@ func (provider *Provider) TestConnection() error {
 	return nil
 }
 
-func (provider *Provider) GetHealthStatus() (*shared.HealthResponse, error) {
-	healthUrl := fmt.Sprintf("%s/echo", provider.url)
-	if response, err := provider.client.Get(healthUrl); err != nil {
-		return nil, err
-	} else if response.StatusCode > 299 {
-		responseBody := new(strings.Builder)
-
-		if _, err := io.Copy(responseBody, response.Body); err != nil {
-			return nil, fmt.Errorf("status code: %d - (bad response - %v)", response.StatusCode, err)
-		} else {
-			singleLineResponse := strings.ReplaceAll(responseBody.String(), "\n", "")
-			return nil, fmt.Errorf("status code: %d - (response - %v)", response.StatusCode, singleLineResponse)
-		}
+func (provider *Provider) isReachable() (bool, error) {
+	echoUrl := fmt.Sprintf("%s/echo", provider.url)
+	if response, err := provider.client.Get(echoUrl); err != nil {
+		return false, err
+	} else if response.StatusCode != 200 {
+		return false, fmt.Errorf("invalid status code %v", response.StatusCode)
 	} else {
-		defer response.Body.Close()
-
-		healthResponse := &shared.HealthResponse{}
-		if err := json.NewDecoder(response.Body).Decode(&healthResponse); err != nil {
-			return nil, err
-		}
-		return healthResponse, nil
+		return true, nil
 	}
 }
 

ui/src/App.sass

@@ -23,16 +23,3 @@
       font-size: 11px
       font-weight: bold
       color: $light-blue-color
-
-  .httpsDomains
-    display: none
-    margin: 0
-    padding: 0
-    list-style: none
-
-  .customWarningStyle
-    &:hover
-      overflow-y: scroll
-      height: 85px
-      .httpsDomains
-        display: block

ui/src/App.tsx

@@ -1,51 +1,15 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import './App.sass';
-import logo from './components/assets/Mizu-logo.svg';
-import logo_up9 from './components/assets/logo_up9.svg';
-import {Button, Snackbar} from "@material-ui/core";
 import {TrafficPage} from "./components/TrafficPage";
-import Tooltip from "./components/UI/Tooltip";
-import {makeStyles} from "@material-ui/core/styles";
-import MuiAlert from '@material-ui/lab/Alert';
-import Api from "./helpers/api";
-
-
-const useStyles = makeStyles(() => ({
-    tooltip: {
-        backgroundColor: "#3868dc",
-        color: "white",
-        fontSize: 13,
-    },
-}));
-
-const api = new Api();
+import {TLSWarning} from "./components/TLSWarning/TLSWarning";
+import {Header} from "./components/Header/Header";
 
 const App = () => {
 
-    const classes = useStyles();
-
     const [analyzeStatus, setAnalyzeStatus] = useState(null);
     const [showTLSWarning, setShowTLSWarning] = useState(false);
     const [userDismissedTLSWarning, setUserDismissedTLSWarning] = useState(false);
-    const [addressesWithTLS, setAddressesWithTLS] = useState(new Set());
-    const [statusAuth, setStatusAuth] = useState(null);
-
-    useEffect(() => {
-        (async () => {
-            try {
-                const recentTLSLinks = await api.getRecentTLSLinks();
-                if (recentTLSLinks?.length > 0) {
-                    setAddressesWithTLS(new Set(recentTLSLinks));
-                    setShowTLSWarning(true);
-                }
-                const auth = await api.getAuthStatus();
-                setStatusAuth(auth);
-            } catch (e) {
-                console.error(e);
-            }
-
-        })();
-    }, []);
+    const [addressesWithTLS, setAddressesWithTLS] = useState(new Set<string>());
 
     const onTLSDetected = (destAddress: string) => {
         addressesWithTLS.add(destAddress);
@@ -56,96 +20,16 @@ const App = () => {
         }
     };
 
-    const analysisMessage = analyzeStatus?.isRemoteReady ?
-        <span>
-            <table>
-                <tr>
-                    <td>Status</td>
-                    <td><b>Available</b></td>
-                </tr>
-                <tr>
-                    <td>Messages</td>
-                    <td><b>{analyzeStatus?.sentCount}</b></td>
-                </tr>
-            </table>
-        </span> :
-        analyzeStatus?.sentCount > 0 ?
-            <span>
-                <table>
-                    <tr>
-                        <td>Status</td>
-                        <td><b>Processing</b></td>
-                    </tr>
-                    <tr>
-                        <td>Messages</td>
-                        <td><b>{analyzeStatus?.sentCount}</b></td>
-                    </tr>
-                    <tr>
-                        <td colSpan={2}> Please allow a few minutes for the analysis to complete</td>
-                    </tr>
-                </table>
-            </span> :
-            <span>
-                <table>
-                    <tr>
-                        <td>Status</td>
-                        <td><b>Waiting for traffic</b></td>
-                    </tr>
-                    <tr>
-                        <td>Messages</td>
-                        <td><b>{analyzeStatus?.sentCount}</b></td>
-                    </tr>
-                </table>
-
-            </span>
-
     return (
         <div className="mizuApp">
-            <div className="header">
-                <div style={{display: "flex", alignItems: "center"}}>
-                    <div className="title"><img src={logo} alt="logo"/></div>
-                    <div className="description">Traffic viewer for Kubernetes</div>
-                </div>
-                <div style={{display: "flex", alignItems: "center"}}>
-
-                    {analyzeStatus?.isAnalyzing &&
-                        <div>
-                            <Tooltip title={analysisMessage} isSimple classes={classes}>
-                                <div>
-                                    <Button
-                                        style={{fontFamily: "system-ui",
-                                            fontWeight: 600,
-                                            fontSize: 12,
-                                            padding: 8}}
-                                        size={"small"}
-                                        variant="contained"
-                                        color="primary"
-                                        startIcon={<img style={{height: 24, maxHeight: "none", maxWidth: "none"}} src={logo_up9} alt={"up9"}/>}
-                                        disabled={!analyzeStatus?.isRemoteReady}
-                                        onClick={() => {
-                                            window.open(analyzeStatus?.remoteUrl)
-                                        }}>
-                                        Analysis
-                                    </Button>
-                                </div>
-                            </Tooltip>
-                        </div>
-                    }
-                    {statusAuth?.email && <div style={{display: "flex", borderLeft: "2px #87878759 solid", paddingLeft: 10, marginLeft: 10}}>
-                        <div style={{color: "rgba(0,0,0,0.75)"}}>
-                            <div style={{fontWeight: 600, fontSize: 13}}>{statusAuth.email}</div>
-                            <div style={{fontSize:11}}>{statusAuth.model}</div>
-                        </div>
-                    </div>}
-                </div>
-            </div>
+            <Header analyzeStatus={analyzeStatus}/>
             <TrafficPage setAnalyzeStatus={setAnalyzeStatus} onTLSDetected={onTLSDetected}/>
-            <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>
+            <TLSWarning showTLSWarning={showTLSWarning}
+                        setShowTLSWarning={setShowTLSWarning}
+                        addressesWithTLS={addressesWithTLS}
+                        setAddressesWithTLS={setAddressesWithTLS}
+                        userDismissedTLSWarning={userDismissedTLSWarning}
+                        setUserDismissedTLSWarning={setUserDismissedTLSWarning}/>
         </div>
     );
 }

ui/src/components/AnalyzeButton/AnalyzeButton.tsx

@@ -0,0 +1,86 @@
+import {Button} from "@material-ui/core";
+import React from "react";
+import Tooltip from "../UI/Tooltip";
+import logo_up9 from "../assets/logo_up9.svg";
+import {makeStyles} from "@material-ui/core/styles";
+
+const useStyles = makeStyles(() => ({
+    tooltip: {
+        backgroundColor: "#3868dc",
+        color: "white",
+        fontSize: 13,
+    },
+}));
+
+interface AnalyseButtonProps {
+    analyzeStatus: any
+}
+
+export const AnalyzeButton: React.FC<AnalyseButtonProps>  = ({analyzeStatus}) => {
+
+    const classes = useStyles();
+
+    const analysisMessage = analyzeStatus?.isRemoteReady ?
+        <span>
+            <table>
+                <tr>
+                    <td>Status</td>
+                    <td><b>Available</b></td>
+                </tr>
+                <tr>
+                    <td>Messages</td>
+                    <td><b>{analyzeStatus?.sentCount}</b></td>
+                </tr>
+            </table>
+        </span> :
+        analyzeStatus?.sentCount > 0 ?
+            <span>
+                <table>
+                    <tr>
+                        <td>Status</td>
+                        <td><b>Processing</b></td>
+                    </tr>
+                    <tr>
+                        <td>Messages</td>
+                        <td><b>{analyzeStatus?.sentCount}</b></td>
+                    </tr>
+                    <tr>
+                        <td colSpan={2}> Please allow a few minutes for the analysis to complete</td>
+                    </tr>
+                </table>
+            </span> :
+            <span>
+                <table>
+                    <tr>
+                        <td>Status</td>
+                        <td><b>Waiting for traffic</b></td>
+                    </tr>
+                    <tr>
+                        <td>Messages</td>
+                        <td><b>{analyzeStatus?.sentCount}</b></td>
+                    </tr>
+                </table>
+            </span>
+
+    return ( <div>
+        <Tooltip title={analysisMessage} isSimple classes={classes}>
+            <div>
+                <Button
+                    style={{fontFamily: "system-ui",
+                        fontWeight: 600,
+                        fontSize: 12,
+                        padding: 8}}
+                    size={"small"}
+                    variant="contained"
+                    color="primary"
+                    startIcon={<img style={{height: 24, maxHeight: "none", maxWidth: "none"}} src={logo_up9} alt={"up9"}/>}
+                    disabled={!analyzeStatus?.isRemoteReady}
+                    onClick={() => {
+                        window.open(analyzeStatus?.remoteUrl)
+                    }}>
+                    Analysis
+                </Button>
+            </div>
+        </Tooltip>
+    </div>);
+}

ui/src/components/AuthPresentation/AuthPresentation.sass

@@ -0,0 +1,13 @@
+.authPresentationContainer
+  display: flex
+  border-left: 2px #87878759 solid
+  padding-left: 10px
+  margin-left: 10px
+  color: rgba(0,0,0,0.75)
+
+  .authEmail
+    font-weight: 600
+    font-size: 13px
+
+  .authModel
+    font-size: 11px

ui/src/components/AuthPresentation/AuthPresentation.tsx

@@ -0,0 +1,30 @@
+import React, {useEffect, useState} from "react";
+import Api from "../../helpers/api";
+import './AuthPresentation.sass';
+
+const api = new Api();
+
+export const AuthPresentation = () => {
+
+    const [statusAuth, setStatusAuth] = useState(null);
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const auth = await api.getAuthStatus();
+                setStatusAuth(auth);
+            } catch (e) {
+                console.error(e);
+            }
+        })();
+    }, []);
+
+    return <>
+        {statusAuth?.email && <div className="authPresentationContainer">
+                <div>
+                    <div className="authEmail">{statusAuth.email}</div>
+                    <div className="authModel">{statusAuth.model}</div>
+                </div>
+            </div>}
+    </>;
+}

ui/src/components/Header/Header.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+import {AuthPresentation} from "../AuthPresentation/AuthPresentation";
+import {AnalyzeButton} from "../AnalyzeButton/AnalyzeButton";
+import logo from '../assets/Mizu-logo.svg';
+
+interface HeaderProps {
+    analyzeStatus: any
+}
+
+export const Header: React.FC<HeaderProps> = ({analyzeStatus}) => {
+
+    return <div className="header">
+        <div style={{display: "flex", alignItems: "center"}}>
+            <div className="title"><img src={logo} alt="logo"/></div>
+            <div className="description">Traffic viewer for Kubernetes</div>
+        </div>
+        <div style={{display: "flex", alignItems: "center"}}>
+            {analyzeStatus?.isAnalyzing && <AnalyzeButton analyzeStatus={analyzeStatus}/>}
+            <AuthPresentation/>
+        </div>
+    </div>;
+}

ui/src/components/TLSWarning/TLSWarning.sass

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

ui/src/components/TLSWarning/TLSWarning.tsx

@@ -0,0 +1,42 @@
+import {Snackbar} from "@material-ui/core";
+import MuiAlert from "@material-ui/lab/Alert";
+import React, {useEffect} from "react";
+import Api from "../../helpers/api";
+import './TLSWarning.sass';
+
+const api = new Api();
+
+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}) => {
+
+    useEffect(() => {
+        (async () => {
+            try {
+                const recentTLSLinks = await api.getRecentTLSLinks();
+                if (recentTLSLinks?.length > 0) {
+                    setAddressesWithTLS(new Set(recentTLSLinks));
+                    setShowTLSWarning(true);
+                }
+            } catch (e) {
+                console.error(e);
+            }
+        })();
+    }, []);
+
+    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/src/components/TrafficPage.tsx

@@ -211,7 +211,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                 const entryData = await api.getEntry(focusedEntryId);
                 setSelectedEntryData(entryData);
             } catch (error) {
-                if (error.response) {
+                if (error.response?.data?.type) {
                     toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
                         position: "bottom-right",
                         theme: "colored",

ui/src/helpers/api.js

@@ -1,7 +1,8 @@
 import * as axios from "axios";
 
 // When working locally cp `cp .env.example .env`
-export const MizuWebsocketURL = process.env.REACT_APP_OVERRIDE_WS_URL ? process.env.REACT_APP_OVERRIDE_WS_URL : `ws://${window.location.host}/ws`;
+export const MizuWebsocketURL = process.env.REACT_APP_OVERRIDE_WS_URL ? process.env.REACT_APP_OVERRIDE_WS_URL :
+                        window.location.protocol === 'https:' ? `wss://${window.location.host}/ws` : `ws://${window.location.host}/ws`;
 
 const CancelToken = axios.CancelToken;