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

.github/workflows/test.yaml

@@ -1,39 +0,0 @@
-name: test
-on:
-  pull_request:
-    branches:
-      - 'develop'
-      - 'main'
-  push:
-    branches:
-      - 'develop'
-      - 'main'
-jobs:
-  build:
-    name: Build
-    runs-on: ubuntu-latest
-    steps:
-      - name: Set up Go 1.16
-        uses: actions/setup-go@v2
-        with:
-          go-version: '^1.16'
-      - run: go version
-
-      - name: Check out code into the Go module directory
-        uses: actions/checkout@v2
-
-      - name: Build CLI
-        run: make cli
-
-      - shell: bash
-        run: |
-          sudo apt-get install libpcap-dev
-
-      - name: Build Agent
-        run: make agent
-
-      - name: Test
-        run: make test
-
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v2

.github/workflows/validation.yaml

@@ -0,0 +1,84 @@
+name: Validations
+on:
+  pull_request:
+    branches:
+      - 'develop'
+      - 'main'
+  push:
+    branches:
+      - 'develop'
+      - 'main'
+jobs:
+  build-cli:
+    name: Build CLI
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Go 1.16
+        uses: actions/setup-go@v2
+        with:
+          go-version: '^1.16'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v2
+
+      - name: Build CLI
+        run: make cli
+
+  build-agent:
+    name: Build Agent
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Go 1.16
+        uses: actions/setup-go@v2
+        with:
+          go-version: '^1.16'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v2
+
+      - shell: bash
+        run: |
+          sudo apt-get install libpcap-dev
+
+      - name: Build Agent
+        run: make agent
+
+  run-tests-cli:
+    name: Run CLI tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Go 1.16
+        uses: actions/setup-go@v2
+        with:
+          go-version: '^1.16'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v2
+
+      - name: Test
+        run: make test-cli
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v2
+
+  run-tests-agent:
+    name: Run Agent tests
+    runs-on: ubuntu-latest
+    steps:
+      - name: Set up Go 1.16
+        uses: actions/setup-go@v2
+        with:
+          go-version: '^1.16'
+
+      - name: Check out code into the Go module directory
+        uses: actions/checkout@v2
+
+      - shell: bash
+        run: |
+          sudo apt-get install libpcap-dev
+
+      - name: Test
+        run: make test-agent
+
+      - name: Upload coverage to Codecov
+        uses: codecov/codecov-action@v2

Makefile

@@ -65,6 +65,8 @@ clean-cli:  ## Clean CLI.
 clean-docker:
 	@(echo "DOCKER cleanup - NOT IMPLEMENTED YET " )
 
-test: ## Run tests.
+test-cli: ## Run tests.
 	@echo "running cli tests"; cd cli && $(MAKE) test
+
+test-agent: ## Run tests.
 	@echo "running agent tests"; cd agent && $(MAKE) test

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
@@ -53,4 +54,21 @@
   justify-content: center
   margin-top: 12px
   font-weight: 600
-  color: rgba(255,255,255,0.75)
+  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