Feature/tra 3475 scroll to end (#206)

* configuration changed

* testing scroll with button

* back to scroll button feature is done

* scroll to the end of entries feature is done

* config of docker image is reverted back

* path of docker image is changed in configStruct.go

ui/src/components/HarEntriesList.tsx

@@ -5,6 +5,7 @@ import spinner from './assets/spinner.svg';
 import ScrollableFeed from "react-scrollable-feed";
 import {StatusType} from "./HarFilters";
 import Api from "../helpers/api";
+import uninon from "./assets/union.svg";
 
 interface HarEntriesListProps {
     entries: any[];
@@ -19,6 +20,9 @@ interface HarEntriesListProps {
     methodsFilter: Array<string>;
     statusFilter: Array<string>;
     pathFilter: string
+    listEntryREF: any;
+    onScrollEvent: (isAtBottom:boolean) => void;
+    scrollableList: boolean;
 }
 
 enum FetchOperator {
@@ -28,7 +32,7 @@ enum FetchOperator {
 
 const api = new Api();
 
-export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntries, focusedEntryId, setFocusedEntryId, connectionOpen, noMoreDataTop, setNoMoreDataTop, noMoreDataBottom, setNoMoreDataBottom, methodsFilter, statusFilter, pathFilter}) => {
+export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntries, focusedEntryId, setFocusedEntryId, connectionOpen, noMoreDataTop, setNoMoreDataTop, noMoreDataBottom, setNoMoreDataBottom, methodsFilter, statusFilter, pathFilter, listEntryREF, onScrollEvent, scrollableList}) => {
 
     const [loadMoreTop, setLoadMoreTop] = useState(false);
     const [isLoadingTop, setIsLoadingTop] = useState(false);
@@ -106,11 +110,11 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntri
 
     return <>
             <div className={styles.list}>
-                <div id="list" className={styles.list}>
+                <div id="list" ref={listEntryREF} className={styles.list}>
                     {isLoadingTop && <div className={styles.spinnerContainer}>
                         <img alt="spinner" src={spinner} style={{height: 25}}/>
                     </div>}
-                    <ScrollableFeed>
+                    <ScrollableFeed onScroll={(isAtBottom) => onScrollEvent(isAtBottom)}>
                         {noMoreDataTop && !connectionOpen && <div id="noMoreDataTop" className={styles.noMoreDataAvailable}>No more data available</div>}
                         {filteredEntries.map(entry => <HarEntry key={entry.id}
                                                      entry={entry}
@@ -120,6 +124,15 @@ export const HarEntriesList: React.FC<HarEntriesListProps> = ({entries, setEntri
                             <div className={styles.styledButton} onClick={() => getNewEntries()}>Fetch more entries</div>
                         </div>}
                     </ScrollableFeed>
+                    <button type="button" 
+                        className={`${styles.btnLive} ${scrollableList ? styles.showButton : styles.hideButton}`} 
+                        onClick={(_) => {
+                            const list = listEntryREF.current.firstChild;
+                            if(list instanceof HTMLElement) {
+                                list.scrollTo({ top: list.scrollHeight, behavior: 'smooth' })
+                            }
+                        }}><img src={uninon} />
+                    </button>
                 </div>
 
                 {entries?.length > 0 && <div className={styles.footer}>

ui/src/components/HarPage.tsx

@@ -60,8 +60,12 @@ export const HarPage: React.FC<HarPageProps> = ({setAnalyzeStatus, onTLSDetected
 
     const [tappingStatus, setTappingStatus] = useState(null);
 
+    const [disableScrollList, setDisableScrollList] = useState(false);
+
     const ws = useRef(null);
 
+    const listEntry = useRef(null);
+
     const openWebSocket = () => {
         ws.current = new WebSocket(MizuWebsocketURL);
         ws.current.onopen = () => setConnection(ConnectionStatus.Connected);
@@ -86,6 +90,11 @@ export const HarPage: React.FC<HarPageProps> = ({setAnalyzeStatus, onTLSDetected
                         setNoMoreDataTop(false);
                     }
                     setEntries([...newEntries, entry])
+                    if(listEntry.current) {
+                        if(isScrollable(listEntry.current.firstChild)) {
+                            setDisableScrollList(true)
+                        }
+                    }
                     break
                 case "status":
                     setTappingStatus(message.tappingStatus);
@@ -158,6 +167,14 @@ export const HarPage: React.FC<HarPageProps> = ({setAnalyzeStatus, onTLSDetected
         }
     }
 
+    const onScrollEvent = (isAtBottom) => {
+        isAtBottom ? setDisableScrollList(false) : setDisableScrollList(true)
+    }
+    
+    const isScrollable = (element) => {
+        return element.scrollWidth > element.clientWidth || element.scrollHeight > element.clientHeight;
+    };
+
     return (
         <div className="HarPage">
             <div className="harPageHeader">
@@ -192,6 +209,9 @@ export const HarPage: React.FC<HarPageProps> = ({setAnalyzeStatus, onTLSDetected
                                         methodsFilter={methodsFilter}
                                         statusFilter={statusFilter}
                                         pathFilter={pathFilter}
+                                        listEntryREF={listEntry}
+                                        onScrollEvent={onScrollEvent}
+                                        scrollableList={disableScrollList}
                         />
                     </div>
                 </div>

ui/src/components/assets/union.svg

@@ -0,0 +1,3 @@
+<svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2.82846L7.82843 3.6478e-05L9.24264 1.41425L5 5.65689L4.99997 5.65686L3.58579 4.24268L0.75733 1.41422L2.17154 5.00679e-06L5 2.82846Z" fill="white"/>
+</svg>

ui/src/components/style/HarEntriesList.module.sass

@@ -6,6 +6,7 @@
   flex-grow: 1
   flex-direction: column
   justify-content: space-between
+  position: relative
 
 .container
   position: relative
@@ -54,3 +55,20 @@
   margin-top: 12px
   font-weight: 600
   color: rgba(255,255,255,0.75)
+
+.btnLive
+  position: absolute
+  bottom: 10px
+  right: 10px
+  background: #205CF5
+  border-radius: 50%
+  height: 35px
+  width: 35px
+  border: none
+  cursor: pointer
+  img
+    height: 10px
+.hideButton
+  display: none
+.showButton
+  display: block