UI api helper (#131)

* Api helper

* cr fixes

ui/package.json

@@ -11,6 +11,7 @@
     "@types/node": "^12.20.10",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
+    "axios": "^0.21.1",
     "node-sass": "^5.0.0",
     "numeral": "^2.0.6",
     "protobuf-decoder": "^0.1.0",

ui/src/components/HarEntriesList.tsx

@@ -4,6 +4,7 @@ import styles from './style/HarEntriesList.module.sass';
 import spinner from './assets/spinner.svg';
 import ScrollableFeed from "react-scrollable-feed";
 import {StatusType} from "./HarFilters";
+import Api from "../helpers/api";
 
 interface HarEntriesListProps {
     entries: any[];
@@ -25,6 +26,8 @@ enum FetchOperator {
     GT = "gt"
 }
 
+const api = new Api();
+
 export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntries, focusedEntryId, setFocusedEntryId, connectionOpen, noMoreDataTop, setNoMoreDataTop, noMoreDataBottom, setNoMoreDataBottom, methodsFilter, statusFilter, pathFilter}) => {
 
     const [loadMoreTop, setLoadMoreTop] = useState(false);
@@ -54,14 +57,9 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntri
         return entries.filter(filterEntries);
     },[entries, filterEntries])
 
-    const fetchData = async (operator, timestamp) => {
-        const response = await fetch(`http://localhost:8899/api/entries?limit=50&operator=${operator}&timestamp=${timestamp}`);
-        return await response.json();
-    }
-
     const getOldEntries = useCallback(async () => {
         setIsLoadingTop(true);
-        const data = await fetchData(FetchOperator.LT, entries[0].timestamp);
+        const data = await api.fetchEntries(FetchOperator.LT, entries[0].timestamp);
         setLoadMoreTop(false);
 
         let scrollTo;
@@ -89,7 +87,7 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntri
     }, [loadMoreTop, connectionOpen, noMoreDataTop, getOldEntries]);
 
     const getNewEntries = async () => {
-        const data = await fetchData(FetchOperator.GT, entries[entries.length - 1].timestamp);
+        const data = await api.fetchEntries(FetchOperator.GT, entries[entries.length - 1].timestamp);
         let scrollTo;
         if(data.length === 0) {
             setNoMoreDataBottom(true);

ui/src/components/HarPage.tsx

@@ -9,6 +9,7 @@ import playIcon from './assets/run.svg';
 import pauseIcon from './assets/pause.svg';
 import variables from './style/variables.module.scss';
 import {StatusBar} from "./StatusBar";
+import Api, {MizuWebsocketURL} from "../helpers/api";
 
 const useLayoutStyles = makeStyles(() => ({
     details: {
@@ -39,21 +40,7 @@ interface HarPageProps {
     setAnalyzeStatus: (status: any) => void;
 }
 
-const mizuAPIPathPrefix = "/mizu";
-
-
-// When working locally (with npm run start) we need to change the PORT 
-const getMizuApiUrl = () => {
-    return `${window.location.origin}${mizuAPIPathPrefix}`;
-};
-
-const getMizuWebsocketUrl = () => {
-    return `ws://${window.location.host}${mizuAPIPathPrefix}/ws`;
-}
-
-
-const mizuApiUrl = getMizuApiUrl();
-const mizuWebsocketUrl = getMizuWebsocketUrl();
+const api = new Api();
 
 export const HarPage: React.FC<HarPageProps> = ({setAnalyzeStatus}) => {
 
@@ -75,7 +62,7 @@ export const HarPage: React.FC<HarPageProps> = ({setAnalyzeStatus}) => {
     const ws = useRef(null);
 
     const openWebSocket = () => {
-        ws.current = new WebSocket(mizuWebsocketUrl);
+        ws.current = new WebSocket(MizuWebsocketURL);
         ws.current.onopen = () => setConnection(ConnectionStatus.Connected);
         ws.current.onclose = () => setConnection(ConnectionStatus.Closed);
     }
@@ -113,24 +100,32 @@ export const HarPage: React.FC<HarPageProps> = ({setAnalyzeStatus}) => {
     }
 
     useEffect(() => {
+        (async () => {
             openWebSocket();
-        fetch(`${mizuApiUrl}/api/tapStatus`)
-            .then(response => response.json())
-            .then(data => setTappingStatus(data));
-
-        fetch(`${mizuApiUrl}/api/analyzeStatus`)
-            .then(response => response.json())
-            .then(data => setAnalyzeStatus(data));
+            try{
+                const tapStatusResponse = await api.tapStatus();
+                setTappingStatus(tapStatusResponse);
+                const analyzeStatusResponse = await api.analyzeStatus();
+                setAnalyzeStatus(analyzeStatusResponse);
+            } catch (error) {
+                console.error(error);
+            }
+        })()
         // eslint-disable-next-line
     }, []);
 
 
     useEffect(() => {
         if (!focusedEntryId) return;
-        setSelectedHarEntry(null)
-        fetch(`${mizuApiUrl}/api/entries/${focusedEntryId}`)
-            .then(response => response.json())
-            .then(data => setSelectedHarEntry(data));
+        setSelectedHarEntry(null);
+        (async () => {
+            try {
+                const entryData = await api.getEntry(focusedEntryId);
+                setSelectedHarEntry(entryData);
+            } catch (error) {
+                console.error(error);
+            }
+        })()
     }, [focusedEntryId])
 
     const toggleConnection = () => {

ui/src/components/StatusBar.tsx

@@ -29,12 +29,14 @@ export const StatusBar: React.FC<Props> = ({tappingStatus}) => {
         <div className="podsCount">{`Tapping ${amountOfPods} ${pluralize('pod', amountOfPods)} in ${pluralize('namespace', uniqueNamespaces.length)} ${uniqueNamespaces.join(", ")}`}</div>
         {expandedBar && <div style={{marginTop: 20}}>
             <table>
+                <thead>
                     <tr>
                         <th>Pod name</th>
                         <th>Namespace</th>
                     </tr>
+                </thead>
                 <tbody>
-                    {tappingStatus.pods.map(pod => <tr>
+                    {tappingStatus.pods.map(pod => <tr key={pod.name}>
                         <td>{pod.name}</td>
                         <td>{pod.namespace}</td>
                     </tr>)}

ui/src/helpers/api.js

@@ -0,0 +1,45 @@
+import * as axios from "axios";
+
+const mizuAPIPathPrefix = "/mizu";
+
+// When working locally (with npm run start) change to:
+// export const MizuWebsocketURL = `ws://localhost:8899${mizuAPIPathPrefix}/ws`;
+export const MizuWebsocketURL = `ws://${window.location.host}${mizuAPIPathPrefix}/ws`;
+
+export default class Api {
+
+    constructor() {
+
+        // When working locally (with npm run start) change to:
+        // const apiURL = `http://localhost:8899/${mizuAPIPathPrefix}/api/`;
+        const apiURL = `${window.location.origin}${mizuAPIPathPrefix}/api/`;
+
+        this.client = axios.create({
+            baseURL: apiURL,
+            timeout: 31000,
+            headers: {
+                Accept: "application/json",
+            }
+        });
+    }
+
+    tapStatus = async () => {
+        const response = await this.client.get("/tapStatus");
+        return response.data;
+    }
+
+    analyzeStatus = async () => {
+        const response = await this.client.get("/analyzeStatus");
+        return response.data;
+    }
+
+    getEntry = async (entryId) => {
+        const response = await this.client.get(`/entries/${entryId}`);
+        return response.data;
+    }
+
+    fetchEntries = async (operator, timestamp) => {
+        const response = await this.client.get(`/entries?limit=50&operator=${operator}&timestamp=${timestamp}`);
+        return response.data;
+    }
+}