TRA-4274 fix ui common linter issues (#1161)

* fix lint issues

* fix all ui-common line issues

* max warnings 0

ui-common/package.json

@@ -20,7 +20,7 @@
     "test:lint": "eslint .",
     "predeploy": "cd example && npm install && npm run build",
     "deploy": "gh-pages -d example/build",
-    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx"
+    "eslint": "eslint . --ext .js,.jsx,.ts,.tsx --max-warnings=0"
   },
   "peerDependencies": {
     "@craco/craco": "^6.4.3",

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

@@ -109,7 +109,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({
     if (scrollTo) {
       scrollableRef.current.scrollToIndex(data.data.length - 1);
     }
-  }, [setLoadMoreTop, setIsLoadingTop, entries, setEntries, query, setNoMoreDataTop, leftOffTop, setLeftOffTop, setQueriedTotal, setTruncatedTimestamp, scrollableRef]);
+  }, [setLoadMoreTop, setIsLoadingTop, entries, setEntries, query, setNoMoreDataTop, leftOffTop, setLeftOffTop, setQueriedTotal, setTruncatedTimestamp, scrollableRef, trafficViewerApi]);
 
   useEffect(() => {
     if (!isWsConnectionClosed || !loadMoreTop || noMoreDataTop) return;
@@ -121,7 +121,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({
   useEffect(() => {
     if (!focusedEntryId && entries.length > 0)
       setFocusedEntryId(entries[0].id);
-  }, [focusedEntryId, entries])
+  }, [focusedEntryId, entries, setFocusedEntryId])
 
   useEffect(() => {
     const newEntries = [...entries];
@@ -131,7 +131,7 @@ export const EntriesList: React.FC<EntriesListProps> = ({
       setNoMoreDataTop(false);
       setEntries(newEntries);
     }
-  }, [entries])
+  }, [entries, setLeftOffTop, setNoMoreDataTop, setEntries])
 
   if(ws.current && !ws.current.onmessage) {
     ws.current.onmessage = (e) => {

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

@@ -15,7 +15,6 @@ import outgoingIconFailure from "assets/outgoing-traffic-failure.svg"
 import outgoingIconNeutral from "assets/outgoing-traffic-neutral.svg"
 import {useRecoilState} from "recoil";
 import focusedEntryIdAtom from "../../recoil/focusedEntryId";
-import queryAtom from "../../recoil/query";
 
 interface TCPInterface {
     ip: string
@@ -66,7 +65,6 @@ enum CaptureTypes {
 export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode, namespace}) => {
 
     const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
-    const [queryState, setQuery] = useRecoilState(queryAtom);
     const isSelected = focusedEntryId === entry.id;
 
     const classification = getClassification(entry.status)

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from "react";
+import React, {useCallback, useEffect, useRef, useState} from "react";
 import { Filters } from "../Filters/Filters";
 import { EntriesList } from "../EntriesList/EntriesList";
 import makeStyles from '@mui/styles/makeStyles';
@@ -59,7 +59,6 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
                                                             }) => {
 
   const classes = useLayoutStyles();
-
   const setEntries = useSetRecoilState(entriesAtom);
   const setFocusedEntryId = useSetRecoilState(focusedEntryIdAtom);
   const query = useRecoilValue(queryAtom);
@@ -68,40 +67,44 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
   const [noMoreDataTop, setNoMoreDataTop] = useState(false);
   const [isSnappedToBottom, setIsSnappedToBottom] = useState(true);
   const [wsReadyState, setWsReadyState] = useState(0);
-
   const setLeftOffTop = useSetRecoilState(leftOffTopAtom);
   const scrollableRef = useRef(null);
 
 
+  const ws = useRef(null);
 
-
+  const closeWebSocket = useCallback(() => {
+    if (ws?.current?.readyState === WebSocket.OPEN) {
+      ws.current.close();
+      return true;
+    }
+  }, [])
 
   useEffect(() => {
     if(shouldCloseWebSocket){
       closeWebSocket()
       setShouldCloseWebSocket(false);
     }
-  }, [shouldCloseWebSocket])
+  }, [shouldCloseWebSocket, setShouldCloseWebSocket, closeWebSocket])
 
-  useEffect(() => {
-    reopenConnection()
-  }, [webSocketUrl])
-
-  const ws = useRef(null);
-
-  const openEmptyWebSocket = () => {
-    openWebSocket(DEFAULT_LEFTOFF, query, true, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS);
-  }
-
-  const closeWebSocket = () => {
-    if (ws?.current?.readyState === WebSocket.OPEN) {
-      ws.current.close();
-      return true;
-    }
-  }
+  const sendQueryWhenWsOpen = useCallback((leftOff: string, query: string, fetch: number, fetchTimeoutMs: number) => {
+    setTimeout(() => {
+      if (ws?.current?.readyState === WebSocket.OPEN) {
+        ws.current.send(JSON.stringify({
+          "leftOff": leftOff,
+          "query": query,
+          "enableFullEntries": false,
+          "fetch": fetch,
+          "timeoutMs": fetchTimeoutMs
+        }));
+      } else {
+        sendQueryWhenWsOpen(leftOff, query, fetch, fetchTimeoutMs);
+      }
+    }, 500)
+  }, [])
 
   const listEntry = useRef(null);
-  const openWebSocket = (leftOff: string, query: string, resetEntries: boolean, fetch: number, fetchTimeoutMs: number) => {
+  const openWebSocket = useCallback((leftOff: string, query: string, resetEntries: boolean, fetch: number, fetchTimeoutMs: number) => {
     if (resetEntries) {
       setFocusedEntryId(null);
       setEntries([]);
@@ -127,24 +130,11 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
       }
     } catch (e) {
     }
-  }
-
-  const sendQueryWhenWsOpen = (leftOff: string, query: string, fetch: number, fetchTimeoutMs: number) => {
-    setTimeout(() => {
-      if (ws?.current?.readyState === WebSocket.OPEN) {
-        ws.current.send(JSON.stringify({
-          "leftOff": leftOff,
-          "query": query,
-          "enableFullEntries": false,
-          "fetch": fetch,
-          "timeoutMs": fetchTimeoutMs
-        }));
-      } else {
-        sendQueryWhenWsOpen(leftOff, query, fetch, fetchTimeoutMs);
-      }
-    }, 500)
-  }
+  }, [setFocusedEntryId, setEntries, setLeftOffTop, setNoMoreDataTop, ws, sendQueryWhenWsOpen, webSocketUrl])
 
+  const openEmptyWebSocket = useCallback(() => {
+    openWebSocket(DEFAULT_LEFTOFF, query, true, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS);
+  }, [openWebSocket, query])
 
   useEffect(() => {
     setTrafficViewerApiState({...trafficViewerApiProp, webSocket: {close: closeWebSocket}});
@@ -156,7 +146,7 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
         console.error(error);
       }
     })()
-  }, []);
+  }, [trafficViewerApiProp, closeWebSocket, setTappingStatus, setTrafficViewerApiState]);
 
   const toggleConnection = () => {
     if (!closeWebSocket()) {
@@ -166,12 +156,17 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
     }
   }
 
-  const reopenConnection = async () => {
+  const reopenConnection = useCallback(async () => {
     closeWebSocket()
     openEmptyWebSocket();
     scrollableRef.current.jumpToBottom();
     setIsSnappedToBottom(true);
-  }
+  }, [scrollableRef, setIsSnappedToBottom, closeWebSocket, openEmptyWebSocket])
+
+  useEffect(() => {
+    reopenConnection()
+    // eslint-disable-next-line
+  }, [webSocketUrl])
 
   useEffect(() => {
     return () => {

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

@@ -11,7 +11,7 @@ interface LinkProps {
 }
 
 export const Link: React.FC<LinkProps> = ({ link, className, title, children }) => {
-    return <a href={link} className={className} title={title} target="_blank">
+    return <a href={link} className={className} title={title} target="_blank" rel="noreferrer">
         {children}
     </a>
 }

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

@@ -66,7 +66,7 @@ const SelectList: React.FC<Props> = ({ items, tableName, checkedValues = [], mul
         }
 
         setCheckedValues(newChecked)
-    }, [searchValue, checkedValues, filteredValuesKeys])
+    }, [checkedValues, filteredValuesKeys, items, setCheckedValues])
 
     const dataFieldFunc = (listValue) => listValue.component ? listValue.component :
         <span className={styles.nowrap} title={listValue.value}>

ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.module.sass

@@ -0,0 +1,4 @@
+.barChartContainer
+    width: 100%
+    display: flex 
+    justify-content: center

ui-common/src/components/modals/TrafficStatsModal/TimelineBarChart/TimelineBarChart.tsx

@@ -0,0 +1,83 @@
+import styles from "./TimelineBarChart.module.sass";
+import { StatsMode } from "../TrafficStatsModal"
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import {
+    BarChart,
+    Bar,
+    XAxis,
+    YAxis,
+    Tooltip,
+    Legend
+} from "recharts";
+import { Utils } from "../../../../helpers/Utils";
+
+interface TimelineBarChartProps {
+    timeLineBarChartMode: string;
+    data: any;
+}
+
+export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarChartMode, data }) => {
+    const [protocolStats, setProtocolStats] = useState([]);
+    const [protocolsNamesAndColors, setProtocolsNamesAndColors] = useState([]);
+
+    const padTo2Digits = useCallback((num) => {
+        return String(num).padStart(2, '0');
+    }, [])
+
+    const getHoursAndMinutes = useCallback((protocolTimeKey) => {
+        const time = new Date(protocolTimeKey)
+        const hoursAndMinutes = padTo2Digits(time.getHours()) + ':' + padTo2Digits(time.getMinutes());
+        return hoursAndMinutes;
+    }, [padTo2Digits])
+
+    const creatUniqueObjArray = useCallback((objArray) => {
+        return [
+            ...new Map(objArray.map((item) => [item["name"], item])).values(),
+        ];
+    }, [])
+
+    useEffect(() => {
+        if (!data) return;
+        const protocolsBarsData = [];
+        const prtcNames = [];
+        data.forEach(protocolObj => {
+            let obj: { [k: string]: any } = {};
+            obj.timestamp = getHoursAndMinutes(protocolObj.timestamp);
+            protocolObj.protocols.forEach(protocol => {
+                obj[`${protocol.name}`] = protocol[StatsMode[timeLineBarChartMode]];
+                prtcNames.push({ name: protocol.name, color: protocol.color });
+            })
+            protocolsBarsData.push(obj);
+        })
+        const uniqueObjArray = creatUniqueObjArray(prtcNames);
+        protocolsBarsData.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1);
+        setProtocolStats(protocolsBarsData);
+        setProtocolsNamesAndColors(uniqueObjArray);
+    }, [data, timeLineBarChartMode, setProtocolStats, setProtocolsNamesAndColors, creatUniqueObjArray, getHoursAndMinutes])
+
+    const bars = useMemo(() => protocolsNamesAndColors.map((protocolToDIsplay) => {
+        return <Bar key={protocolToDIsplay.name} dataKey={protocolToDIsplay.name} stackId="a" fill={protocolToDIsplay.color} />
+    }), [protocolsNamesAndColors])
+
+    return (
+        <div className={styles.barChartContainer}>
+            <BarChart
+                width={730}
+                height={250}
+                data={protocolStats}
+                margin={{
+                    top: 20,
+                    right: 30,
+                    left: 20,
+                    bottom: 5
+                }}
+            >
+                <XAxis dataKey="timestamp" />
+                <YAxis tickFormatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value} />
+                <Tooltip formatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value + " Requests"} />
+                <Legend />
+                {bars}
+            </BarChart>
+        </div>
+    );
+}

ui-common/src/components/modals/TrafficStatsModal/TrafficPieChart/TrafficPieChart.tsx

@@ -2,11 +2,7 @@ import React, {useEffect, useMemo, useState} from "react";
 import styles from "./TrafficPieChart.module.sass";
 import {Cell, Legend, Pie, PieChart, Tooltip} from "recharts";
 import {Utils} from "../../../../helpers/Utils";
-
-enum PieChartMode {
-  REQUESTS = "entriesCount",
-  VOLUME = "volumeSizeBytes"
-}
+import {StatsMode as PieChartMode} from "../TrafficStatsModal"
 
 const COLORS = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];
 
@@ -24,6 +20,8 @@ const renderCustomizedLabel = ({
   const x = cx + radius * Math.cos(-midAngle * RADIAN);
   const y = cy + radius * Math.sin(-midAngle * RADIAN);
 
+  if (Number((percent * 100).toFixed(0)) <= 1) return;
+
   return (
     <text
       x={x}

ui-common/src/components/modals/TrafficStatsModal/TrafficStatsModal.tsx

@@ -1,8 +1,9 @@
-import React, {useEffect, useState} from "react";
-import {Backdrop, Box, Fade, Modal} from "@mui/material";
+import React, { useEffect, useState } from "react";
+import { Backdrop, Box, Fade, Modal } from "@mui/material";
 import styles from "./TrafficStatsModal.module.sass";
 import closeIcon from "assets/close.svg";
-import {TrafficPieChart} from "./TrafficPieChart/TrafficPieChart";
+import { TrafficPieChart } from "./TrafficPieChart/TrafficPieChart";
+import { TimelineBarChart } from "./TimelineBarChart/TimelineBarChart";
 import spinnerImg from "assets/spinner.svg";
 
 const modalStyle = {
@@ -19,7 +20,7 @@ const modalStyle = {
   color: '#000',
 };
 
-enum StatsMode {
+export enum StatsMode {
   REQUESTS = "entriesCount",
   VOLUME = "volumeSizeBytes"
 }
@@ -27,23 +28,27 @@ enum StatsMode {
 interface TrafficStatsModalProps {
   isOpen: boolean;
   onClose: () => void;
-  getTrafficStatsDataApi: () => Promise<any>
+  getPieStatsDataApi: () => Promise<any>
+  getTimelineStatsDataApi: () => Promise<any>
 }
 
-export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, onClose, getTrafficStatsDataApi }) => {
+export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, onClose, getPieStatsDataApi, getTimelineStatsDataApi }) => {
 
   const modes = Object.keys(StatsMode).filter(x => !(parseInt(x) >= 0));
   const [statsMode, setStatsMode] = useState(modes[0]);
-  const [statsData, setStatsData] = useState(null);
+  const [pieStatsData, setPieStatsData] = useState(null);
+  const [timelineStatsData, setTimelineStatsData] = useState(null);
   const [isLoading, setIsLoading] = useState(false);
 
   useEffect(() => {
-    if(isOpen && getTrafficStatsDataApi) {
+    if (isOpen && getPieStatsDataApi) {
       (async () => {
         try {
           setIsLoading(true);
-          const data = await getTrafficStatsDataApi();
-          setStatsData(data);
+          const pieData = await getPieStatsDataApi();
+          setPieStatsData(pieData);
+          const timelineData = await getTimelineStatsDataApi();
+          setTimelineStatsData(timelineData);
         } catch (e) {
           console.error(e)
         } finally {
@@ -51,7 +56,7 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
         }
       })()
     }
-  }, [isOpen, getTrafficStatsDataApi])
+  }, [isOpen, getPieStatsDataApi, getTimelineStatsDataApi, setPieStatsData, setTimelineStatsData])
 
   return (
     <Modal
@@ -65,19 +70,25 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
       <Fade in={isOpen}>
         <Box sx={modalStyle}>
           <div className={styles.closeIcon}>
-            <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }}/>
+            <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }} />
           </div>
           <div className={styles.title}>Traffic Statistics</div>
           <div className={styles.mainContainer}>
             <div>
-              <span style={{marginRight: 15}}>Breakdown By</span>
+              <span style={{ marginRight: 15 }}>Breakdown By</span>
               <select className={styles.select} value={statsMode} onChange={(e) => setStatsMode(e.target.value)}>
-                {modes.map(mode => <option value={mode}>{mode}</option>)}
+                {modes.map(mode => <option key={mode} value={mode}>{mode}</option>)}
               </select>
             </div>
-            {isLoading ? <div style={{textAlign: "center", marginTop: 20}}>
+            <div>
+              {isLoading ? <div style={{ textAlign: "center", marginTop: 20 }}>
                 <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
-            </div> : <TrafficPieChart pieChartMode={statsMode} data={statsData}/>}
+              </div> : 
+                <div>
+                  <TrafficPieChart pieChartMode={statsMode} data={pieStatsData} />
+                  <TimelineBarChart timeLineBarChartMode={statsMode} data={timelineStatsData} />
+                </div>}
+            </div>
           </div>
         </Box>
       </Fade>

ui-common/src/recoil/TrafficViewerApi/atom.ts

@@ -1,5 +1,4 @@
 import { atom } from "recoil";
-import TrafficViewerApi from "../../components/TrafficViewer/TrafficViewerApi";
 
 const TrafficViewerApiAtom = atom({
     key: "TrafficViewerApiAtom",

ui/src/App.tsx

@@ -36,7 +36,7 @@ const App = () => {
                         openModal={oasModalOpen}
                         handleCloseModal={() => setOasModalOpen(false)}
                     />}
-                    <TrafficStatsModal isOpen={trafficStatsModalOpen} onClose={() => setTrafficStatsModalOpen(false)} getTrafficStatsDataApi={api.getStats}/>
+                    <TrafficStatsModal isOpen={trafficStatsModalOpen} onClose={() => setTrafficStatsModalOpen(false)} getPieStatsDataApi={api.getPieStats} getTimelineStatsDataApi={api.getTimelineStats}/>
                 </div>
             </ThemeProvider>
         </StyledEngineProvider>

ui/src/helpers/api.js

@@ -111,8 +111,13 @@ export default class Api {
         });
     }
 
-    getStats = async () => {
+    getPieStats = async () => {
         const response = await client.get("/status/accumulative");
         return response.data;
     }
+
+    getTimelineStats = async () => {
+        const response = await client.get("/status/accumulativeTiming");
+        return response.data;
+    }
 }