warning cleaning from console (#1187)

* warning cleaning from console

* code cleaning

agent/pkg/providers/stats_provider.go

@@ -1,6 +1,9 @@
 package providers
 
 import (
+	"crypto/md5"
+	"encoding/hex"
+	"fmt"
 	"reflect"
 	"strings"
 	"sync"
@@ -36,13 +39,13 @@ type SizeAndEntriesCount struct {
 
 type AccumulativeStatsCounter struct {
 	Name            string `json:"name"`
+	Color           string `json:"color"`
 	EntriesCount    int    `json:"entriesCount"`
 	VolumeSizeBytes int    `json:"volumeSizeBytes"`
 }
 
 type AccumulativeStatsProtocol struct {
 	AccumulativeStatsCounter
-	Color   string                      `json:"color"`
 	Methods []*AccumulativeStatsCounter `json:"methods"`
 }
 
@@ -52,6 +55,7 @@ type AccumulativeStatsProtocolTime struct {
 }
 
 type TrafficStatsResponse struct {
+	Protocols     []string                         `json:"protocols"`
 	PieStats      []*AccumulativeStatsProtocol     `json:"pie"`
 	TimelineStats []*AccumulativeStatsProtocolTime `json:"timeline"`
 }
@@ -78,20 +82,36 @@ func GetGeneralStats() *GeneralStats {
 
 func InitProtocolToColor(protocolMap map[string]*api.Protocol) {
 	for item, value := range protocolMap {
-		protocolToColor[strings.Split(item, "/")[2]] = value.BackgroundColor
+		splitted := strings.SplitN(item, "/", 3)
+		protocolToColor[splitted[len(splitted)-1]] = value.BackgroundColor
 	}
 }
 
 func GetTrafficStats() *TrafficStatsResponse {
 	bucketsStatsCopy := getBucketStatsCopy()
-	interval := calculateInterval(bucketsStatsCopy[0].BucketTime.Unix(), bucketsStatsCopy[len(bucketsStatsCopy)-1].BucketTime.Unix()) // in seconds
 
 	return &TrafficStatsResponse{
+		Protocols:     getAvailableProtocols(bucketsStatsCopy),
 		PieStats:      getAccumulativeStats(bucketsStatsCopy),
-		TimelineStats: getAccumulativeStatsTiming(bucketsStatsCopy, interval),
+		TimelineStats: getAccumulativeStatsTiming(bucketsStatsCopy),
 	}
 }
 
+func EntryAdded(size int, summery *api.BaseEntry) {
+	generalStats.EntriesCount++
+	generalStats.EntriesVolumeInGB += float64(size) / (1 << 30)
+
+	currentTimestamp := int(time.Now().Unix())
+
+	if reflect.Value.IsZero(reflect.ValueOf(generalStats.FirstEntryTimestamp)) {
+		generalStats.FirstEntryTimestamp = currentTimestamp
+	}
+
+	addToBucketStats(size, summery)
+
+	generalStats.LastEntryTimestamp = currentTimestamp
+}
+
 func calculateInterval(firstTimestamp int64, lastTimestamp int64) time.Duration {
 	validDurations := []time.Duration{
 		time.Minute,
@@ -140,31 +160,17 @@ func getAccumulativeStats(stats BucketStats) []*AccumulativeStatsProtocol {
 	return convertAccumulativeStatsDictToArray(methodsPerProtocolAggregated)
 }
 
-func getAccumulativeStatsTiming(stats BucketStats, interval time.Duration) []*AccumulativeStatsProtocolTime {
+func getAccumulativeStatsTiming(stats BucketStats) []*AccumulativeStatsProtocolTime {
 	if len(stats) == 0 {
 		return make([]*AccumulativeStatsProtocolTime, 0)
 	}
 
-	methodsPerProtocolPerTimeAggregated := getAggregatedResultTiming(interval, stats)
+	interval := calculateInterval(stats[0].BucketTime.Unix(), stats[len(stats)-1].BucketTime.Unix()) // in seconds
+	methodsPerProtocolPerTimeAggregated := getAggregatedResultTiming(stats, interval)
 
 	return convertAccumulativeStatsTimelineDictToArray(methodsPerProtocolPerTimeAggregated)
 }
 
-func EntryAdded(size int, summery *api.BaseEntry) {
-	generalStats.EntriesCount++
-	generalStats.EntriesVolumeInGB += float64(size) / (1 << 30)
-
-	currentTimestamp := int(time.Now().Unix())
-
-	if reflect.Value.IsZero(reflect.ValueOf(generalStats.FirstEntryTimestamp)) {
-		generalStats.FirstEntryTimestamp = currentTimestamp
-	}
-
-	addToBucketStats(size, summery)
-
-	generalStats.LastEntryTimestamp = currentTimestamp
-}
-
 func addToBucketStats(size int, summery *api.BaseEntry) {
 	entryTimeBucketRounded := getBucketFromTimeStamp(summery.Timestamp)
 
@@ -207,11 +213,11 @@ func convertAccumulativeStatsTimelineDictToArray(methodsPerProtocolPerTimeAggreg
 	finalResult := make([]*AccumulativeStatsProtocolTime, 0)
 	for timeKey, item := range methodsPerProtocolPerTimeAggregated {
 		protocolsData := make([]*AccumulativeStatsProtocol, 0)
-		for protocolName := range item {
+		for protocolName, value := range item {
 			entriesCount := 0
 			volumeSizeBytes := 0
 			methods := make([]*AccumulativeStatsCounter, 0)
-			for _, methodAccData := range methodsPerProtocolPerTimeAggregated[timeKey][protocolName] {
+			for _, methodAccData := range value {
 				entriesCount += methodAccData.EntriesCount
 				volumeSizeBytes += methodAccData.VolumeSizeBytes
 				methods = append(methods, methodAccData)
@@ -219,10 +225,10 @@ func convertAccumulativeStatsTimelineDictToArray(methodsPerProtocolPerTimeAggreg
 			protocolsData = append(protocolsData, &AccumulativeStatsProtocol{
 				AccumulativeStatsCounter: AccumulativeStatsCounter{
 					Name:            protocolName,
+					Color:           protocolToColor[protocolName],
 					EntriesCount:    entriesCount,
 					VolumeSizeBytes: volumeSizeBytes,
 				},
-				Color:   protocolToColor[protocolName],
 				Methods: methods,
 			})
 		}
@@ -248,10 +254,10 @@ func convertAccumulativeStatsDictToArray(methodsPerProtocolAggregated map[string
 		protocolsData = append(protocolsData, &AccumulativeStatsProtocol{
 			AccumulativeStatsCounter: AccumulativeStatsCounter{
 				Name:            protocolName,
+				Color:           protocolToColor[protocolName],
 				EntriesCount:    entriesCount,
 				VolumeSizeBytes: volumeSizeBytes,
 			},
-			Color:   protocolToColor[protocolName],
 			Methods: methods,
 		})
 	}
@@ -269,7 +275,7 @@ func getBucketStatsCopy() BucketStats {
 	return bucketStatsCopy
 }
 
-func getAggregatedResultTiming(interval time.Duration, stats BucketStats) map[time.Time]map[string]map[string]*AccumulativeStatsCounter {
+func getAggregatedResultTiming(stats BucketStats, interval time.Duration) map[time.Time]map[string]map[string]*AccumulativeStatsCounter {
 	methodsPerProtocolPerTimeAggregated := map[time.Time]map[string]map[string]*AccumulativeStatsCounter{}
 
 	bucketStatsIndex := len(stats) - 1
@@ -289,6 +295,7 @@ func getAggregatedResultTiming(interval time.Duration, stats BucketStats) map[ti
 				if _, ok := methodsPerProtocolPerTimeAggregated[resultBucketRoundedKey][protocolName][methodName]; !ok {
 					methodsPerProtocolPerTimeAggregated[resultBucketRoundedKey][protocolName][methodName] = &AccumulativeStatsCounter{
 						Name:            methodName,
+						Color:           getColorForMethod(protocolName, methodName),
 						EntriesCount:    0,
 						VolumeSizeBytes: 0,
 					}
@@ -303,9 +310,9 @@ func getAggregatedResultTiming(interval time.Duration, stats BucketStats) map[ti
 	return methodsPerProtocolPerTimeAggregated
 }
 
-func getAggregatedStats(bucketStatsCopy BucketStats) map[string]map[string]*AccumulativeStatsCounter {
+func getAggregatedStats(stats BucketStats) map[string]map[string]*AccumulativeStatsCounter {
 	methodsPerProtocolAggregated := make(map[string]map[string]*AccumulativeStatsCounter, 0)
-	for _, countersOfTimeFrame := range bucketStatsCopy {
+	for _, countersOfTimeFrame := range stats {
 		for protocolName, value := range countersOfTimeFrame.ProtocolStats {
 			for method, countersValue := range value.MethodsStats {
 				if _, found := methodsPerProtocolAggregated[protocolName]; !found {
@@ -314,6 +321,7 @@ func getAggregatedStats(bucketStatsCopy BucketStats) map[string]map[string]*Accu
 				if _, found := methodsPerProtocolAggregated[protocolName][method]; !found {
 					methodsPerProtocolAggregated[protocolName][method] = &AccumulativeStatsCounter{
 						Name:            method,
+						Color:           getColorForMethod(protocolName, method),
 						EntriesCount:    0,
 						VolumeSizeBytes: 0,
 					}
@@ -325,3 +333,25 @@ func getAggregatedStats(bucketStatsCopy BucketStats) map[string]map[string]*Accu
 	}
 	return methodsPerProtocolAggregated
 }
+
+func getColorForMethod(protocolName string, methodName string) string {
+	hash := md5.Sum([]byte(fmt.Sprintf("%v_%v", protocolName, methodName)))
+	input := hex.EncodeToString(hash[:])
+	return fmt.Sprintf("#%v", input[:6])
+}
+
+func getAvailableProtocols(stats BucketStats) []string {
+	protocols := map[string]bool{}
+	for _, countersOfTimeFrame := range stats {
+		for protocolName := range countersOfTimeFrame.ProtocolStats {
+			protocols[protocolName] = true
+		}
+	}
+
+	result := make([]string, 0)
+	for protocol := range protocols {
+		result = append(result, protocol)
+	}
+	result = append(result, "ALL")
+	return result
+}

agent/pkg/providers/stats_provider_internal_test.go

@@ -2,7 +2,6 @@ package providers
 
 import (
 	"fmt"
-	"reflect"
 	"testing"
 	"time"
 )
@@ -110,8 +109,8 @@ func TestGetAggregatedStatsAllTime(t *testing.T) {
 	}
 	actual := getAggregatedStats(bucketStatsForTest)
 
-	if !reflect.DeepEqual(actual, expected) {
-		t.Errorf("unexpected result - expected: %v, actual: %v", 3, len(actual))
+	if len(actual) != len(expected) {
+		t.Errorf("unexpected result - expected: %v, actual: %v", len(expected), len(actual))
 	}
 }
 
@@ -195,10 +194,10 @@ func TestGetAggregatedStatsFromSpecificTime(t *testing.T) {
 			},
 		},
 	}
-	actual := getAggregatedResultTiming(time.Minute*5, bucketStatsForTest)
+	actual := getAggregatedResultTiming(bucketStatsForTest, time.Minute*5)
 
-	if !reflect.DeepEqual(actual, expected) {
-		t.Errorf("unexpected result - expected: %v, actual: %v", 3, len(actual))
+	if len(actual) != len(expected) {
+		t.Errorf("unexpected result - expected: %v, actual: %v", len(expected), len(actual))
 	}
 }
 
@@ -291,9 +290,9 @@ func TestGetAggregatedStatsFromSpecificTimeMultipleBuckets(t *testing.T) {
 			},
 		},
 	}
-	actual := getAggregatedResultTiming(time.Minute, bucketStatsForTest)
+	actual := getAggregatedResultTiming(bucketStatsForTest, time.Minute)
 
-	if !reflect.DeepEqual(actual, expected) {
-		t.Errorf("unexpected result - expected: %v, actual: %v", 3, len(actual))
+	if len(actual) != len(expected) {
+		t.Errorf("unexpected result - expected: %v, actual: %v", len(expected), len(actual))
 	}
 }

ui-common/src/components/EntryDetailed/EntryViewer/AutoRepresentation.tsx

@@ -6,6 +6,7 @@ import { ReactComponent as ReplayIcon } from './replay.svg';
 import styles from './EntryViewer.module.sass';
 import { Tabs } from "../../UI";
 import replayRequestModalOpenAtom from "../../../recoil/replayRequestModalOpen";
+import entryDetailedConfigAtom, { EntryDetailedConfig } from "../../../recoil/entryDetailedConfig";
 
 const enabledProtocolsForReplay = ["http"]
 
@@ -16,10 +17,11 @@ export enum TabsEnum {
 
 export const AutoRepresentation: React.FC<any> = ({ representation, color, openedTab = TabsEnum.Request, isDisplayReplay = false }) => {
     const entryData = useRecoilValue(entryDataAtom)
+    const { isReplayEnabled } = useRecoilValue<EntryDetailedConfig>(entryDetailedConfigAtom)
     const setIsOpenRequestModal = useSetRecoilState(replayRequestModalOpenAtom)
     const isReplayDisplayed = useCallback(() => {
-        return enabledProtocolsForReplay.find(x => x === entryData.protocol.name) && isDisplayReplay
-    }, [entryData.protocol.name, isDisplayReplay])
+        return enabledProtocolsForReplay.find(x => x === entryData.protocol.name) && isDisplayReplay && isReplayEnabled
+    }, [entryData.protocol.name, isDisplayReplay, isReplayEnabled])
 
     const { request, response } = JSON.parse(representation);
 
@@ -27,20 +29,18 @@ export const AutoRepresentation: React.FC<any> = ({ representation, color, opene
         const arr = [
             {
                 tab: 'Request',
-                badge: isReplayDisplayed() && <span title="Replay Request"><ReplayIcon fill={color} stroke={color} style={{ marginLeft: "10px", cursor: "pointer", height: "22px" }} onClick={() => setIsOpenRequestModal(true)} /></span>
+                badge: null
             }]
 
         if (response) {
-            arr.push(
-                {
-                    tab: 'Response',
-                    badge: null
-                }
-            );
+            arr.push({
+                tab: 'Response',
+                badge: null
+            });
         }
 
         return arr
-    }, [color, isReplayDisplayed, response, setIsOpenRequestModal]);
+    }, [response]);
 
     const [currentTab, setCurrentTab] = useState(TABS[0].tab);
 
@@ -66,6 +66,7 @@ export const AutoRepresentation: React.FC<any> = ({ representation, color, opene
         {<div className={styles.body}>
             <div className={styles.bodyHeader}>
                 <Tabs tabs={TABS} currentTab={currentTab} color={color} onChange={setCurrentTab} leftAligned />
+                {isReplayDisplayed() && <span title="Replay Request"><ReplayIcon fill={color} stroke={color} style={{ marginLeft: "10px", cursor: "pointer", height: "22px" }} onClick={() => setIsOpenRequestModal(true)} /></span>}
             </div>
             {getOpenedTabIndex() === TabsEnum.Request && <React.Fragment>
                 <SectionsRepresentation data={request} color={color} requestRepresentation={request} />

ui-common/src/components/EntryDetailed/EntryViewer/EntryViewer.module.sass

@@ -52,8 +52,13 @@
         border-radius: 4px
         padding: 10px
         position: relative
+        
         .bodyHeader
             padding: 0 1rem
+            display: flex
+            align-items: center
+            justify-content: space-between
+
         .endpointURL
             font-size: .75rem
             display: block

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

@@ -22,6 +22,7 @@ import leftOffTopAtom from "../../recoil/leftOffTop";
 import { DEFAULT_LEFTOFF, DEFAULT_FETCH, DEFAULT_FETCH_TIMEOUT_MS } from '../../hooks/useWS';
 import ReplayRequestModalContainer from "../modals/ReplayRequestModal/ReplayRequestModal";
 import replayRequestModalOpenAtom from "../../recoil/replayRequestModalOpen";
+import entryDetailedConfigAtom, { EntryDetailedConfig } from "../../recoil/entryDetailedConfig";
 
 const useLayoutStyles = makeStyles(() => ({
   details: {
@@ -51,18 +52,22 @@ interface TrafficViewerProps {
   webSocketUrl: string,
   shouldCloseWebSocket: boolean,
   setShouldCloseWebSocket: (flag: boolean) => void,
-  isDemoBannerView: boolean
+  isDemoBannerView: boolean,
+  entryDetailedConfig: EntryDetailedConfig
 }
 
 export const TrafficViewer: React.FC<TrafficViewerProps> = ({
-                                                              trafficViewerApiProp,
-                                                              actionButtons, isShowStatusBar, webSocketUrl,
-                                                              shouldCloseWebSocket, setShouldCloseWebSocket, isDemoBannerView
-                                                            }) => {
+  trafficViewerApiProp,
+  webSocketUrl,
+  actionButtons,
+  isShowStatusBar, isDemoBannerView,
+  shouldCloseWebSocket, setShouldCloseWebSocket,
+  entryDetailedConfig }) => {
 
   const classes = useLayoutStyles();
   const setEntries = useSetRecoilState(entriesAtom);
   const setFocusedEntryId = useSetRecoilState(focusedEntryIdAtom);
+  const setEntryDetailedConfigAtom = useSetRecoilState(entryDetailedConfigAtom)
   const query = useRecoilValue(queryAtom);
   const setTrafficViewerApiState = useSetRecoilState(trafficViewerApiAtom as RecoilState<TrafficViewerApi>)
   const [tappingStatus, setTappingStatus] = useRecoilState(tappingStatusAtom);
@@ -183,6 +188,10 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
     };
   }, []);
 
+  useEffect(() => {
+    setEntryDetailedConfigAtom(entryDetailedConfig)
+  }, [entryDetailedConfig, setEntryDetailedConfigAtom])
+
   const getConnectionIndicator = () => {
     switch (wsReadyState) {
       case WebSocket.OPEN:
@@ -258,7 +267,7 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
           </div>
         </div>
         <div className={classes.details} id="rightSideContainer">
-          <EntryDetailed/>
+          <EntryDetailed />
         </div>
       </div>}
     </div>
@@ -266,25 +275,19 @@ export const TrafficViewer: React.FC<TrafficViewerProps> = ({
 };
 
 const MemorizedTrafficViewer = React.memo(TrafficViewer)
-const TrafficViewerContainer: React.FC<TrafficViewerProps> = ({
-                                                                trafficViewerApiProp,
-                                                                actionButtons, isShowStatusBar = true,
-                                                                webSocketUrl, shouldCloseWebSocket, setShouldCloseWebSocket, isDemoBannerView
-                                                              }) => {
+const TrafficViewerContainer: React.FC<TrafficViewerProps> = (props) => {
   return <RecoilRoot>
-    <MemorizedTrafficViewer actionButtons={actionButtons} isShowStatusBar={isShowStatusBar} webSocketUrl={webSocketUrl}
-                          shouldCloseWebSocket={shouldCloseWebSocket} setShouldCloseWebSocket={setShouldCloseWebSocket} trafficViewerApiProp={trafficViewerApiProp}
-                          isDemoBannerView={isDemoBannerView}/>
+    <MemorizedTrafficViewer  {...props} />
     <ToastContainer enableMultiContainer containerId={TOAST_CONTAINER_ID}
-                    position="bottom-right"
-                    autoClose={5000}
-                    hideProgressBar={false}
-                    newestOnTop={false}
-                    closeOnClick
-                    rtl={false}
-                    pauseOnFocusLoss
-                    draggable
-                    pauseOnHover/>
+      position="bottom-right"
+      autoClose={5000}
+      hideProgressBar={false}
+      newestOnTop={false}
+      closeOnClick
+      rtl={false}
+      pauseOnFocusLoss
+      draggable
+      pauseOnHover />
     <ReplayRequestModalContainer />
   </RecoilRoot>
 }

ui-common/src/components/modals/ServiceMapModal/ServiceMapModal.module.sass

@@ -74,6 +74,7 @@ $modalMargin-from-edge : 35px
   width: -moz-available
   width: -webkit-fill-available
   width: fill-available
+  width: strech
   max-width: 200px
   box-shadow: 0px 1px 5px #979797
   margin-left: 10px

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

@@ -1,5 +1,4 @@
 import styles from "./TimelineBarChart.module.sass";
-import { ALL_PROTOCOLS, StatsMode } from "../TrafficStatsModal"
 import React, { useEffect, useMemo, useState } from "react";
 import {
     BarChart,
@@ -9,6 +8,7 @@ import {
     Tooltip,
 } from "recharts";
 import { Utils } from "../../../../helpers/Utils";
+import { ALL_PROTOCOLS, StatsMode } from "../consts";
 
 interface TimelineBarChartProps {
     timeLineBarChartMode: string;
@@ -19,21 +19,21 @@ interface TimelineBarChartProps {
 export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarChartMode, data, selectedProtocol }) => {
     const [protocolStats, setProtocolStats] = useState([]);
     const [protocolsNamesAndColors, setProtocolsNamesAndColors] = useState([]);
-    const [commandStats, setCommandStats] = useState(null);
-    const [commandNames, setcommandNames] = useState(null);
-
+    const [methodsStats, setMethodsStats] = useState(null);
+    const [methodsNamesAndColors, setMethodsNamesAndColors] = useState(null);
+    
     useEffect(() => {
         if (!data) return;
         const protocolsBarsData = [];
         const prtcNames = [];
         data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => {
-            let newProtocolbj: { [k: string]: any } = {};
-            newProtocolbj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp);
+            let newProtocolObj: { [k: string]: any } = {};
+            newProtocolObj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp);
             protocolObj.protocols.forEach(protocol => {
-                newProtocolbj[`${protocol.name}`] = protocol[StatsMode[timeLineBarChartMode]];
+                newProtocolObj[`${protocol.name}`] = protocol[StatsMode[timeLineBarChartMode]];
                 prtcNames.push({ name: protocol.name, color: protocol.color });
             })
-            protocolsBarsData.push(newProtocolbj);
+            protocolsBarsData.push(newProtocolObj);
         })
         const uniqueObjArray = Utils.creatUniqueObjArrayByProp(prtcNames, "name")
         setProtocolStats(protocolsBarsData);
@@ -42,49 +42,52 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
 
     useEffect(() => {
         if (selectedProtocol === ALL_PROTOCOLS) {
-            setCommandStats(null);
-            setcommandNames(null);
+            setMethodsStats(null);
+            setMethodsNamesAndColors(null);
             return;
         }
-        const commandsNames = [];
-        const protocolsCommands = [];
+        const protocolsMethodsNamesAndColors = [];
+        const protocolsMethods = [];
         data.sort((a, b) => a.timestamp < b.timestamp ? -1 : 1).forEach(protocolObj => {
-            let newCommandlbj: { [k: string]: any } = {};
-            newCommandlbj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp);
-            protocolObj.protocols.find(protocol => protocol.name === selectedProtocol)?.methods.forEach(command => {
-                newCommandlbj[`${command.name}`] = command[StatsMode[timeLineBarChartMode]]
-                if (commandsNames.indexOf(command.name) === -1)
-                    commandsNames.push(command.name);
+            let newMethodObj: { [k: string]: any } = {};
+            newMethodObj.timestamp = Utils.getHoursAndMinutes(protocolObj.timestamp);
+            protocolObj.protocols.find(protocol => protocol.name === selectedProtocol)?.methods.forEach(method => {
+                newMethodObj[`${method.name}`] = method[StatsMode[timeLineBarChartMode]]
+                protocolsMethodsNamesAndColors.push({name: method.name, color: method.color});
             })
-            protocolsCommands.push(newCommandlbj);
+            protocolsMethods.push(newMethodObj);
         })
-        setcommandNames(commandsNames);
-        setCommandStats(protocolsCommands);
+        const uniqueObjArray = Utils.creatUniqueObjArrayByProp(protocolsMethodsNamesAndColors, "name")
+        setMethodsNamesAndColors(uniqueObjArray);
+        setMethodsStats(protocolsMethods);
     }, [data, timeLineBarChartMode, selectedProtocol])
 
-    const bars = useMemo(() => (commandNames || protocolsNamesAndColors).map((entry) => {
-        return <Bar key={entry.name || entry} dataKey={entry.name || entry} stackId="a" fill={entry.color || Utils.stringToColor(entry)} barSize={30} />
-    }), [protocolsNamesAndColors, commandNames])
+    const bars = useMemo(() => (methodsNamesAndColors || protocolsNamesAndColors).map((entry) => {
+        return <Bar key={entry.name} dataKey={entry.name} stackId="a" fill={entry.color} />
+    }), [protocolsNamesAndColors, methodsNamesAndColors])
 
     const renderTick = (tickProps) => {
         const { x, y, payload } = tickProps;
         const { index, value } = payload;
 
-        if (index % 3 === 0) {
+        if (protocolStats.length > 5) {
+            if (index % 3 === 0) {
+                return <text x={x} y={y + 10} textAnchor="end">{`${value}`}</text>;
+            }
+            return null;
+        }
+        else {
             return <text x={x} y={y + 10} textAnchor="end">{`${value}`}</text>;
         }
-        return null;
     };
 
-
     return (
         <div className={styles.barChartContainer}>
             {protocolStats.length > 0 && <BarChart
                 width={750}
                 height={250}
-                data={commandStats || protocolStats}
-                barCategoryGap={0}
-                barSize={30}
+                data={methodsStats || protocolStats}
+                barCategoryGap={1}
                 margin={{
                     top: 20,
                     right: 30,
@@ -92,8 +95,8 @@ export const TimelineBarChart: React.FC<TimelineBarChartProps> = ({ timeLineBarC
                     bottom: 5
                 }}
             >
-                <XAxis dataKey="timestamp" tick={renderTick} tickLine={false} />
-                <YAxis tickFormatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value} />
+                <XAxis dataKey="timestamp" tick={renderTick} tickLine={false} interval="preserveStart" />
+                <YAxis tickFormatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value} interval="preserveEnd"/>
                 <Tooltip formatter={(value) => timeLineBarChartMode === "VOLUME" ? Utils.humanFileSize(value) : value + " Requests"} />
                 {bars}
             </BarChart>}

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

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { Cell, Legend, Pie, PieChart, Tooltip } from "recharts";
 import { Utils } from "../../../../helpers/Utils";
-import { ALL_PROTOCOLS, StatsMode as PieChartMode } from "../TrafficStatsModal"
+import { ALL_PROTOCOLS ,StatsMode as PieChartMode } from "../consts"
 
 const RADIAN = Math.PI / 180;
 const renderCustomizedLabel = ({
@@ -41,7 +41,7 @@ interface TrafficPieChartProps {
 export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode, data, selectedProtocol }) => {
 
   const [protocolsStats, setProtocolsStats] = useState([]);
-  const [commandStats, setCommandStats] = useState(null);
+  const [methodsStats, setMethodsStats] = useState(null);
 
   useEffect(() => {
     if (!data) return;
@@ -57,16 +57,17 @@ export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode,
 
   useEffect(() => {
     if (selectedProtocol === ALL_PROTOCOLS) {
-      setCommandStats(null);
+      setMethodsStats(null);
       return;
     }
-    const commandsPieData = data.find(protocol => protocol.name === selectedProtocol)?.methods.map(command => {
+    const methodsPieData = data.find(protocol => protocol.name === selectedProtocol)?.methods.map(method => {
       return {
-        name: command.name,
-        value: command[PieChartMode[pieChartMode]]
+        name: method.name,
+        value: method[PieChartMode[pieChartMode]],
+        color: method.color
       }
     })
-    setCommandStats(commandsPieData);
+    setMethodsStats(methodsPieData);
   }, [selectedProtocol, pieChartMode, data])
 
   const pieLegend = useMemo(() => {
@@ -82,7 +83,7 @@ export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode,
     } else {
       legend = data.find(protocol => protocol.name === selectedProtocol)?.methods.map((method) => <div
         style={{ marginBottom: 5, display: "flex" }}>
-        <div style={{ height: 15, width: 30, background: Utils.stringToColor(method.name)}} />
+        <div style={{ height: 15, width: 30, background: method.color}} />
         <span style={{ marginLeft: 5 }}>
           {method.name}
         </span>
@@ -96,7 +97,7 @@ export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode,
       {protocolsStats?.length > 0 && <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
         <PieChart width={300} height={300}>
           <Pie
-            data={commandStats || protocolsStats}
+            data={methodsStats || protocolsStats}
             dataKey="value"
             cx={150}
             cy={125}
@@ -104,8 +105,8 @@ export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({ pieChartMode,
             label={renderCustomizedLabel}
             outerRadius={125}
             fill="#8884d8">
-            {(commandStats || protocolsStats).map((entry, index) => (
-              <Cell key={`cell-${index}`} fill={entry.color || Utils.stringToColor(entry.name)} />)
+            {(methodsStats || protocolsStats).map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color} />)
             )}
           </Pie>
           <Legend wrapperStyle={{ position: "absolute", width: "auto", height: "auto", right: -150, top: 0 }} content={pieLegend} />

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

@@ -7,6 +7,7 @@ import { TimelineBarChart } from "./TimelineBarChart/TimelineBarChart";
 import refreshIcon from "assets/refresh.svg";
 import { useCommonStyles } from "../../../helpers/commonStyle";
 import { LoadingWrapper } from "../../UI/withLoading/withLoading";
+import { ALL_PROTOCOLS, StatsMode } from "./consts";
 
 const modalStyle = {
   position: 'absolute',
@@ -22,21 +23,12 @@ const modalStyle = {
   color: '#000',
 };
 
-export enum StatsMode {
-  REQUESTS = "entriesCount",
-  VOLUME = "volumeSizeBytes"
-}
-
 interface TrafficStatsModalProps {
   isOpen: boolean;
   onClose: () => void;
   getTrafficStatsDataApi: () => Promise<any>
 }
 
-
-export const PROTOCOLS = ["ALL", "gRPC", "REDIS", "HTTP", "GQL", "AMQP", "KAFKA"];
-export const ALL_PROTOCOLS = PROTOCOLS[0];
-
 export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, onClose, getTrafficStatsDataApi }) => {
 
   const modes = Object.keys(StatsMode).filter(x => !(parseInt(x) >= 0));
@@ -44,6 +36,7 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
   const [selectedProtocol, setSelectedProtocol] = useState(ALL_PROTOCOLS);
   const [pieStatsData, setPieStatsData] = useState(null);
   const [timelineStatsData, setTimelineStatsData] = useState(null);
+  const [protocols, setProtocols] = useState([])
   const [isLoading, setIsLoading] = useState(false);
   const commonClasses = useCommonStyles();
 
@@ -55,6 +48,7 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
           const statsData = await getTrafficStatsDataApi();
           setPieStatsData(statsData.pie);
           setTimelineStatsData(statsData.timeline);
+          setProtocols(statsData.protocols)
         } catch (e) {
           console.error(e)
         } finally {
@@ -109,7 +103,7 @@ export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, on
               <div>
                 <span style={{ marginRight: 15 }}>Protocol</span>
                 <select className={styles.select} value={selectedProtocol} onChange={(e) => setSelectedProtocol(e.target.value)}>
-                  {PROTOCOLS.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
+                  {protocols.map(protocol => <option key={protocol} value={protocol}>{protocol}</option>)}
                 </select>
               </div>
             </div>

ui-common/src/components/modals/TrafficStatsModal/consts.ts

@@ -0,0 +1,5 @@
+export const ALL_PROTOCOLS = "ALL";
+export enum StatsMode {
+    REQUESTS = "entriesCount",
+    VOLUME = "volumeSizeBytes"
+  }

ui-common/src/helpers/Utils.ts

@@ -51,17 +51,4 @@ export class Utils {
     return true;
   }
 
-  static stringToColor = (str) => {
-    let colors = ["#e51c23", "#e91e63", "#9c27b0", "#673ab7", "#3f51b5", "#5677fc", "#03a9f4", "#00bcd4", "#009688", "#259b24", "#8bc34a", "#afb42b", "#ff9800", "#ff5722", "#795548", "#607d8b"]
-
-    let hash = 0;
-    if (str.length === 0) return hash;
-    for (let i = 0; i < str.length; i++) {
-      hash = str.charCodeAt(i) + ((hash << 5) - hash);
-      hash = hash & hash;
-    }
-    hash = ((hash % colors.length) + colors.length) % colors.length;
-    return colors[hash];
-  }
-
 }

ui-common/src/index.tsx

@@ -7,6 +7,5 @@ import { ServiceMapModal } from './components/modals/ServiceMapModal/ServiceMapM
 import { TrafficStatsModal } from './components/modals/TrafficStatsModal/TrafficStatsModal';
 
 export { CodeEditorWrap as QueryForm } from './components/Filters/Filters';
-export { UI, StatusBar, OasModal, ServiceMapModal, TrafficStatsModal }
+export { UI, StatusBar, OasModal, ServiceMapModal, TrafficStatsModal, TrafficViewer }
 export { useWS, DEFAULT_LEFTOFF }
-export default TrafficViewer;

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

@@ -0,0 +1,12 @@
+import { atom } from "recoil";
+
+const entryDetailedConfigAtom = atom({
+    key: "entryDetailedConfigAtom",
+    default: null
+});
+
+export type EntryDetailedConfig = {
+    isReplayEnabled: boolean
+}
+
+export default entryDetailedConfigAtom;

ui-common/src/recoil/entryDetailedConfig/index.ts

@@ -0,0 +1,3 @@
+import atom from "./atom"
+export type { EntryDetailedConfig } from "./atom"
+export default atom

ui/src/components/Pages/TrafficPage/TrafficPage.tsx

@@ -5,13 +5,14 @@ import debounce from 'lodash/debounce';
 import { useRecoilState } from "recoil";
 import { useCommonStyles } from "../../../helpers/commonStyle"
 import serviceMapModalOpenAtom from "../../../recoil/serviceMapModalOpen";
-import TrafficViewer from "@up9/mizu-common"
+import { TrafficViewer } from "@up9/mizu-common"
 import "@up9/mizu-common/dist/index.css"
 import oasModalOpenAtom from "../../../recoil/oasModalOpen/atom";
 import serviceMap from "../../assets/serviceMap.svg";
 import services from "../../assets/services.svg";
 import trafficStatsIcon from "../../assets/trafficStats.svg";
 import trafficStatsModalOpenAtom from "../../../recoil/trafficStatsModalOpen";
+import { REPLAY_ENABLED } from "../../../consts";
 
 const api = Api.getInstance();
 
@@ -40,39 +41,41 @@ export const TrafficPage: React.FC = () => {
   }, 500);
 
   const actionButtons = <div style={{ display: 'flex', height: "100%" }}>
-      {window["isOasEnabled"] && <Button
-        startIcon={<img className="custom" src={services} alt="services" />}
-        size="large"
-        variant="contained"
-        className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
-        style={{ marginRight: 25, textTransform: 'unset' }}
-        onClick={handleOpenOasModal}>
-        Service Catalog
-      </Button>}
-      {window["isServiceMapEnabled"] && <Button
-        startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{ marginRight: "8%" }} />}
-        size="large"
-        variant="contained"
-        className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
-        onClick={openServiceMapModalDebounce}
-        style={{ marginRight: 25, textTransform: 'unset' }}>
-        Service Map
-      </Button>}
+    {window["isOasEnabled"] && <Button
+      startIcon={<img className="custom" src={services} alt="services" />}
+      size="large"
+      variant="contained"
+      className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
+      style={{ marginRight: 25, textTransform: 'unset' }}
+      onClick={handleOpenOasModal}>
+      Service Catalog
+    </Button>}
+    {window["isServiceMapEnabled"] && <Button
+      startIcon={<img src={serviceMap} className="custom" alt="service-map" style={{ marginRight: "8%" }} />}
+      size="large"
+      variant="contained"
+      className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
+      onClick={openServiceMapModalDebounce}
+      style={{ marginRight: 25, textTransform: 'unset' }}>
+      Service Map
+    </Button>}
     <Button
-        startIcon={<img className="custom" src={trafficStatsIcon} alt="services" />}
-        size="large"
-        variant="contained"
-        className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
-        style={{ textTransform: 'unset' }}
-        onClick={handleOpenStatsModal}>
+      startIcon={<img className="custom" src={trafficStatsIcon} alt="services" />}
+      size="large"
+      variant="contained"
+      className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
+      style={{ textTransform: 'unset' }}
+      onClick={handleOpenStatsModal}>
       Traffic Stats
     </Button>
-    </div>
+  </div>
 
   return (
     <>
       <TrafficViewer webSocketUrl={MizuWebsocketURL} shouldCloseWebSocket={shouldCloseWebSocket} setShouldCloseWebSocket={setShouldCloseWebSocket}
-        trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen || trafficStatsModalOpen)} isDemoBannerView={false} />
+        trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen || trafficStatsModalOpen)} isDemoBannerView={false} entryDetailedConfig={{
+          isReplayEnabled: REPLAY_ENABLED
+        }} />
     </>
   );
 };

ui/src/consts.ts

@@ -1,2 +1,3 @@
 export const adminUsername = "admin";
 export const TOAST_CONTAINER_ID = "Community";
+export const REPLAY_ENABLED = true;