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

cli/cmd/tapRunner.go

@@ -182,7 +182,7 @@ func createMizuApiServer(ctx context.Context, kubernetesProvider *kubernetes.Pro
 		MizuApiFilteringOptions: mizuApiFilteringOptions,
 		MaxEntriesDBSizeBytes:   config.Config.Tap.MaxEntriesDBSizeBytes(),
 	}
-	_, err = kubernetesProvider.CreateMizuApiServerPod(ctx, opts)
+	_, err = kubernetesProvider.CreateMizuApiServerPod(ctx, opts, config.Config.Tap.ApiServerResources)
 	if err != nil {
 		return err
 	}
@@ -237,6 +237,7 @@ func updateMizuTappers(ctx context.Context, kubernetesProvider *kubernetes.Provi
 			nodeToTappedPodIPMap,
 			serviceAccountName,
 			config.Config.Tap.TapOutgoing(),
+			config.Config.Tap.TapperResources,
 		); err != nil {
 			return err
 		}

cli/config/configStructs/tapConfig.go

@@ -23,20 +23,29 @@ const (
 )
 
 type TapConfig struct {
-	AnalysisDestination          string   `yaml:"dest" default:"up9.app"`
-	SleepIntervalSec             int      `yaml:"upload-interval" default:"10"`
-	PodRegexStr                  string   `yaml:"regex" default:".*"`
-	GuiPort                      uint16   `yaml:"gui-port" default:"8899"`
-	Namespaces                   []string `yaml:"namespaces"`
-	Analysis                     bool     `yaml:"analysis" default:"false"`
-	AllNamespaces                bool     `yaml:"all-namespaces" default:"false"`
-	PlainTextFilterRegexes       []string `yaml:"regex-masking"`
-	HealthChecksUserAgentHeaders []string `yaml:"ignored-user-agents"`
-	DisableRedaction             bool     `yaml:"no-redact" default:"false"`
-	HumanMaxEntriesDBSize        string   `yaml:"max-entries-db-size" default:"200MB"`
-	Direction                    string   `yaml:"direction" default:"in"`
-	DryRun                       bool     `yaml:"dry-run" default:"false"`
-	EnforcePolicyFile            string   `yaml:"test-rules"`
+	AnalysisDestination          string    `yaml:"dest" default:"up9.app"`
+	SleepIntervalSec             int       `yaml:"upload-interval" default:"10"`
+	PodRegexStr                  string    `yaml:"regex" default:".*"`
+	GuiPort                      uint16    `yaml:"gui-port" default:"8899"`
+	Namespaces                   []string  `yaml:"namespaces"`
+	Analysis                     bool      `yaml:"analysis" default:"false"`
+	AllNamespaces                bool      `yaml:"all-namespaces" default:"false"`
+	PlainTextFilterRegexes       []string  `yaml:"regex-masking"`
+	HealthChecksUserAgentHeaders []string  `yaml:"ignored-user-agents"`
+	DisableRedaction             bool      `yaml:"no-redact" default:"false"`
+	HumanMaxEntriesDBSize        string    `yaml:"max-entries-db-size" default:"200MB"`
+	Direction                    string    `yaml:"direction" default:"in"`
+	DryRun                       bool      `yaml:"dry-run" default:"false"`
+	EnforcePolicyFile            string    `yaml:"test-rules"`
+	ApiServerResources           Resources `yaml:"api-server-resources"`
+	TapperResources              Resources `yaml:"tapper-resources"`
+}
+
+type Resources struct {
+	CpuLimit       string `yaml:"cpu-limit" default:"750m"`
+	MemoryLimit    string `yaml:"memory-limit" default:"1Gi"`
+	CpuRequests    string `yaml:"cpu-requests" default:"50m"`
+	MemoryRequests string `yaml:"memory-requests" default:"50Mi"`
 }
 
 func (config *TapConfig) PodRegex() *regexp.Regexp {

cli/kubernetes/provider.go

@@ -7,6 +7,7 @@ import (
 	"encoding/json"
 	"errors"
 	"fmt"
+	"github.com/up9inc/mizu/cli/config/configStructs"
 	"github.com/up9inc/mizu/cli/logger"
 	"os"
 	"path/filepath"
@@ -143,7 +144,7 @@ type ApiServerOptions struct {
 	MaxEntriesDBSizeBytes   int64
 }
 
-func (provider *Provider) CreateMizuApiServerPod(ctx context.Context, opts *ApiServerOptions) (*core.Pod, error) {
+func (provider *Provider) CreateMizuApiServerPod(ctx context.Context, opts *ApiServerOptions, resources configStructs.Resources) (*core.Pod, error) {
 	marshaledFilteringOptions, err := json.Marshal(opts.MizuApiFilteringOptions)
 	if err != nil {
 		return nil, err
@@ -153,19 +154,19 @@ func (provider *Provider) CreateMizuApiServerPod(ctx context.Context, opts *ApiS
 	configMapOptional := true
 	configMapVolumeName.Optional = &configMapOptional
 
-	cpuLimit, err := resource.ParseQuantity("750m")
+	cpuLimit, err := resource.ParseQuantity(resources.CpuLimit)
 	if err != nil {
 		return nil, errors.New(fmt.Sprintf("invalid cpu limit for %s container", opts.PodName))
 	}
-	memLimit, err := resource.ParseQuantity("512Mi")
+	memLimit, err := resource.ParseQuantity(resources.MemoryLimit)
 	if err != nil {
 		return nil, errors.New(fmt.Sprintf("invalid memory limit for %s container", opts.PodName))
 	}
-	cpuRequests, err := resource.ParseQuantity("50m")
+	cpuRequests, err := resource.ParseQuantity(resources.CpuRequests)
 	if err != nil {
 		return nil, errors.New(fmt.Sprintf("invalid cpu request for %s container", opts.PodName))
 	}
-	memRequests, err := resource.ParseQuantity("50Mi")
+	memRequests, err := resource.ParseQuantity(resources.MemoryRequests)
 	if err != nil {
 		return nil, errors.New(fmt.Sprintf("invalid memory request for %s container", opts.PodName))
 	}
@@ -562,7 +563,7 @@ func (provider *Provider) CreateConfigMap(ctx context.Context, namespace string,
 	return nil
 }
 
-func (provider *Provider) ApplyMizuTapperDaemonSet(ctx context.Context, namespace string, daemonSetName string, podImage string, tapperPodName string, apiServerPodIp string, nodeToTappedPodIPMap map[string][]string, serviceAccountName string, tapOutgoing bool) error {
+func (provider *Provider) ApplyMizuTapperDaemonSet(ctx context.Context, namespace string, daemonSetName string, podImage string, tapperPodName string, apiServerPodIp string, nodeToTappedPodIPMap map[string][]string, serviceAccountName string, tapOutgoing bool, resources configStructs.Resources) error {
 	logger.Log.Debugf("Applying %d tapper deamonsets, ns: %s, daemonSetName: %s, podImage: %s, tapperPodName: %s", len(nodeToTappedPodIPMap), namespace, daemonSetName, podImage, tapperPodName)
 
 	if len(nodeToTappedPodIPMap) == 0 {
@@ -601,19 +602,19 @@ func (provider *Provider) ApplyMizuTapperDaemonSet(ctx context.Context, namespac
 			),
 		),
 	)
-	cpuLimit, err := resource.ParseQuantity("500m")
+	cpuLimit, err := resource.ParseQuantity(resources.CpuLimit)
 	if err != nil {
 		return errors.New(fmt.Sprintf("invalid cpu limit for %s container", tapperPodName))
 	}
-	memLimit, err := resource.ParseQuantity("1Gi")
+	memLimit, err := resource.ParseQuantity(resources.MemoryLimit)
 	if err != nil {
 		return errors.New(fmt.Sprintf("invalid memory limit for %s container", tapperPodName))
 	}
-	cpuRequests, err := resource.ParseQuantity("50m")
+	cpuRequests, err := resource.ParseQuantity(resources.CpuRequests)
 	if err != nil {
 		return errors.New(fmt.Sprintf("invalid cpu request for %s container", tapperPodName))
 	}
-	memRequests, err := resource.ParseQuantity("50Mi")
+	memRequests, err := resource.ParseQuantity(resources.MemoryRequests)
 	if err != nil {
 		return errors.New(fmt.Sprintf("invalid memory request for %s container", tapperPodName))
 	}

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