Make ScrollableFeed virtualized by replacing react-scrollable-feed with react-scrollable-feed-virtualized (#268)

* Make `ScrollableFeed` virtualized by replacing `react-scrollable-feed` with `react-scrollable-feed-virtualized`

* fix get new entries button

* Fix the not populated `Protocol` struct in case of `GetEntries` endpoint is called

Co-authored-by: Liraz Yehezkel <lirazy@up9.com>

tap/api/api.go

@@ -102,8 +102,14 @@ type MizuEntry struct {
 	ID                      uint `gorm:"primarykey"`
 	CreatedAt               time.Time
 	UpdatedAt               time.Time
-	ProtocolName        string `json:"protocolKey" gorm:"column:protocolKey"`
+	ProtocolName            string `json:"protocolName" gorm:"column:protocolName"`
+	ProtocolLongName        string `json:"protocolLongName" gorm:"column:protocolLongName"`
+	ProtocolAbbreviation    string `json:"protocolAbbreviation" gorm:"column:protocolVersion"`
 	ProtocolVersion         string `json:"protocolVersion" gorm:"column:protocolVersion"`
+	ProtocolBackgroundColor string `json:"protocolBackgroundColor" gorm:"column:protocolBackgroundColor"`
+	ProtocolForegroundColor string `json:"protocolForegroundColor" gorm:"column:protocolForegroundColor"`
+	ProtocolFontSize        int8   `json:"protocolFontSize" gorm:"column:protocolFontSize"`
+	ProtocolReferenceLink   string `json:"protocolReferenceLink" gorm:"column:protocolReferenceLink"`
 	Entry                   string `json:"entry,omitempty" gorm:"column:entry"`
 	EntryId                 string `json:"entryId" gorm:"column:entryId"`
 	Url                     string `json:"url" gorm:"column:url"`
@@ -162,11 +168,19 @@ type DataUnmarshaler interface {
 }
 
 func (bed *BaseEntryDetails) UnmarshalData(entry *MizuEntry) error {
-	entryUrl := entry.Url
+	bed.Protocol = Protocol{
-	service := entry.Service
+		Name:            entry.ProtocolName,
+		LongName:        entry.ProtocolLongName,
+		Abbreviation:    entry.ProtocolAbbreviation,
+		Version:         entry.ProtocolVersion,
+		BackgroundColor: entry.ProtocolBackgroundColor,
+		ForegroundColor: entry.ProtocolForegroundColor,
+		FontSize:        entry.ProtocolFontSize,
+		ReferenceLink:   entry.ProtocolReferenceLink,
+	}
 	bed.Id = entry.EntryId
-	bed.Url = entryUrl
+	bed.Url = entry.Url
-	bed.Service = service
+	bed.Service = entry.Service
 	bed.Summary = entry.Path
 	bed.StatusCode = entry.Status
 	bed.Method = entry.Method

tap/extensions/amqp/main.go

@@ -268,7 +268,13 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, entryId string, resolve
 	entryBytes, _ := json.Marshal(item.Pair)
 	return &api.MizuEntry{
 		ProtocolName:            protocol.Name,
+		ProtocolLongName:        protocol.LongName,
+		ProtocolAbbreviation:    protocol.Abbreviation,
 		ProtocolVersion:         protocol.Version,
+		ProtocolBackgroundColor: protocol.BackgroundColor,
+		ProtocolForegroundColor: protocol.ForegroundColor,
+		ProtocolFontSize:        protocol.FontSize,
+		ProtocolReferenceLink:   protocol.ReferenceLink,
 		EntryId:                 entryId,
 		Entry:                   string(entryBytes),
 		Url:                     fmt.Sprintf("%s%s", service, summary),

tap/extensions/http/main.go

@@ -173,7 +173,13 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, entryId string, resolve
 	entryBytes, _ := json.Marshal(item.Pair)
 	return &api.MizuEntry{
 		ProtocolName:            protocol.Name,
+		ProtocolLongName:        protocol.LongName,
+		ProtocolAbbreviation:    protocol.Abbreviation,
 		ProtocolVersion:         item.Protocol.Version,
+		ProtocolBackgroundColor: protocol.BackgroundColor,
+		ProtocolForegroundColor: protocol.ForegroundColor,
+		ProtocolFontSize:        protocol.FontSize,
+		ProtocolReferenceLink:   protocol.ReferenceLink,
 		EntryId:                 entryId,
 		Entry:                   string(entryBytes),
 		Url:                     fmt.Sprintf("%s%s", service, path),

tap/extensions/kafka/main.go

@@ -143,7 +143,13 @@ func (d dissecting) Analyze(item *api.OutputChannelItem, entryId string, resolve
 	entryBytes, _ := json.Marshal(item.Pair)
 	return &api.MizuEntry{
 		ProtocolName:            _protocol.Name,
+		ProtocolLongName:        _protocol.LongName,
+		ProtocolAbbreviation:    _protocol.Abbreviation,
 		ProtocolVersion:         _protocol.Version,
+		ProtocolBackgroundColor: _protocol.BackgroundColor,
+		ProtocolForegroundColor: _protocol.ForegroundColor,
+		ProtocolFontSize:        _protocol.FontSize,
+		ProtocolReferenceLink:   _protocol.ReferenceLink,
 		EntryId:                 entryId,
 		Entry:                   string(entryBytes),
 		Url:                     fmt.Sprintf("%s%s", service, summary),

ui/package.json

@@ -12,8 +12,8 @@
     "@types/node": "^12.20.10",
     "@types/react": "^17.0.3",
     "@types/react-dom": "^17.0.3",
-    "jsonpath": "^1.1.1",
     "axios": "^0.21.1",
+    "jsonpath": "^1.1.1",
     "node-sass": "^5.0.0",
     "numeral": "^2.0.6",
     "protobuf-decoder": "^0.1.0",
@@ -21,7 +21,7 @@
     "react-copy-to-clipboard": "^5.0.3",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
-    "react-scrollable-feed": "^1.3.0",
+    "react-scrollable-feed-virtualized": "^1.4.2",
     "react-syntax-highlighter": "^15.4.3",
     "typescript": "^4.2.4",
     "web-vitals": "^1.1.1"

ui/src/components/EntriesList.tsx

@@ -2,7 +2,7 @@ import {EntryItem} from "./EntryListItem/EntryListItem";
 import React, {useCallback, useEffect, useMemo, useRef, useState} from "react";
 import styles from './style/EntriesList.module.sass';
 import spinner from './assets/spinner.svg';
-import ScrollableFeed from "react-scrollable-feed";
+import ScrollableFeedVirtualized from "react-scrollable-feed-virtualized";
 import {StatusType} from "./Filters";
 import Api from "../helpers/api";
 import down from "./assets/downImg.svg";
@@ -77,9 +77,6 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, fo
         }
         setIsLoadingTop(false);
         const newEntries = [...data, ...entries];
-        if(newEntries.length >= 1000) {
-            newEntries.splice(1000);
-        }
         setEntries(newEntries);
 
         if(scrollTo) {
@@ -100,10 +97,6 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, fo
         }
         scrollTo = document.getElementById(filteredEntries?.[filteredEntries.length -1]?.id);
         let newEntries = [...entries, ...data];
-        if(newEntries.length >= 1000) {
-            setNoMoreDataTop(false);
-            newEntries = newEntries.slice(-1000);
-        }
         setEntries(newEntries);
         if(scrollTo) {
             scrollTo.scrollIntoView({behavior: "smooth"});
@@ -116,19 +109,20 @@ export const EntriesList: React.FC<EntriesListProps> = ({entries, setEntries, fo
                     {isLoadingTop && <div className={styles.spinnerContainer}>
                         <img alt="spinner" src={spinner} style={{height: 25}}/>
                     </div>}
-                    <ScrollableFeed ref={scrollableRef} onScroll={(isAtBottom) => onScrollEvent(isAtBottom)}>
+                    <ScrollableFeedVirtualized ref={scrollableRef} itemHeight={48} marginTop={10} onScroll={(isAtBottom) => onScrollEvent(isAtBottom)}>
                         {noMoreDataTop && !connectionOpen && <div id="noMoreDataTop" className={styles.noMoreDataAvailable}>No more data available</div>}
                         {filteredEntries.map(entry => <EntryItem key={entry.id}
                                                         entry={entry}
                                                         setFocusedEntryId={setFocusedEntryId}
-                                                        isSelected={focusedEntryId === entry.id}/>)}
+                                                        isSelected={focusedEntryId === entry.id}
+                                                        style={{}}/>)}
+                    </ScrollableFeedVirtualized>
                     {!connectionOpen && !noMoreDataBottom && <div className={styles.fetchButtonContainer}>
                         <div className={styles.styledButton} onClick={() => getNewEntries()}>Fetch more entries</div>
                     </div>}
-                    </ScrollableFeed>
                     <button type="button"
                         className={`${styles.btnLive} ${scrollableList ? styles.showButton : styles.hideButton}`}
-                        onClick={(_) => scrollableRef.current.scrollToBottom()}>
+                        onClick={(_) => scrollableRef.current.jumpToBottom()}>
                         <img alt="down" src={down} />
                     </button>
                 </div>

ui/src/components/EntryListItem/EntryListItem.tsx

@@ -38,9 +38,10 @@ interface EntryProps {
     entry: Entry;
     setFocusedEntryId: (id: string) => void;
     isSelected?: boolean;
+    style: object;
 }
 
-export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, isSelected}) => {
+export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, isSelected, style}) => {
     const classification = getClassification(entry.statusCode)
     let ingoingIcon;
     let outgoingIcon;
@@ -103,7 +104,13 @@ export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, isSel
             className={`${styles.row}
             ${isSelected ? styles.rowSelected : backgroundColor}`}
             onClick={() => setFocusedEntryId(entry.id)}
-            style={{border: isSelected ? `1px ${entry.protocol.backgroundColor} solid` : "1px transparent solid"}}
+            style={{
+                border: isSelected ? `1px ${entry.protocol.backgroundColor} solid` : "1px transparent solid",
+                position: "absolute",
+                top: style['top'],
+                marginTop: style['marginTop'],
+                width: "calc(100% - 25px)",
+            }}
         >
             <Protocol protocol={entry.protocol} horizontal={false}/>
             {((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0) && <div>

ui/src/components/TrafficPage.tsx

@@ -86,10 +86,6 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                     }
                     if (!focusedEntryId) setFocusedEntryId(entry.id)
                     let newEntries = [...entries];
-                    if (entries.length === 1000) {
-                        newEntries = newEntries.splice(1);
-                        setNoMoreDataTop(false);
-                    }
                     setEntries([...newEntries, entry])
                     if(listEntry.current) {
                         if(isScrollable(listEntry.current.firstChild)) {

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

@@ -14,7 +14,6 @@
   flex-direction: column
   overflow: hidden
   flex-grow: 1
-  padding-top: 20px
 
 .footer
   display: flex