Add ARM64 support to eBPF (#1151)

* Define and use `BPF_CFLAGS` environment variable

* Add eBPF dependencies to `builder-from-amd64-to-arm64v8` and `builder-native-base`

* Add eBPF dependencies to `builder-from-arm64v8-to-amd64`

* Only compile x86 arch of Capstone for x86 target

* Build and install `libbpf` from source

* Fix `builder-from-arm64v8-to-amd64`

* Add `BPF_TARGET` environment variable

* Fix the eBPF verifier error on ARM64

* Fix `go_crypto_tls_ex_uprobe`

* Fix the check

* #run_acceptance_tests

* Fix the build script

* Include ARM64 files

* Bring back `x86.o`

* Generate both endianness

* Fix Dockerfile

* #run_acceptance_tests

* Determine the endianness on runtime if it's possible in Go (default little-endian) #run_acceptance_tests

* Revert "Determine the endianness on runtime if it's possible in Go (default little-endian) #run_acceptance_tests"

This reverts commit a2c83c6040.

* Remove big-endian files #run_acceptance_tests

* Fix Dockerfile #run_acceptance_tests

Co-authored-by: Ubuntu <ubuntu@ip-172-31-33-233.eu-central-1.compute.internal>

Dockerfile

@@ -25,7 +25,18 @@ RUN npm run build
 ### Base builder image for native builds architecture
 FROM golang:1.17-alpine AS builder-native-base
 ENV CGO_ENABLED=1 GOOS=linux
-RUN apk add --no-cache libpcap-dev g++ perl-utils curl build-base binutils-gold bash
+RUN apk add --no-cache \
+    libpcap-dev \
+    g++ \
+    perl-utils \
+    curl \
+    build-base \
+    binutils-gold \
+    bash \
+    clang \
+    llvm \
+    libbpf-dev \
+    linux-headers
 COPY devops/install-capstone.sh .
 RUN ./install-capstone.sh
 
@@ -33,23 +44,27 @@ RUN ./install-capstone.sh
 ### Intermediate builder image for x86-64 to x86-64 native builds
 FROM builder-native-base AS builder-from-amd64-to-amd64
 ENV GOARCH=amd64
+ENV BPF_TARGET=amd64 BPF_CFLAGS="-O2 -g -D__TARGET_ARCH_x86"
 
 
 ### Intermediate builder image for AArch64 to AArch64 native builds
 FROM builder-native-base AS builder-from-arm64v8-to-arm64v8
 ENV GOARCH=arm64
+ENV BPF_TARGET=arm64 BPF_CFLAGS="-O2 -g -D__TARGET_ARCH_arm64"
 
 
 ### Builder image for x86-64 to AArch64 cross-compilation
-FROM up9inc/linux-arm64-musl-go-libpcap-capstone AS builder-from-amd64-to-arm64v8
+FROM up9inc/linux-arm64-musl-go-libpcap-capstone-bpf AS builder-from-amd64-to-arm64v8
 ENV CGO_ENABLED=1 GOOS=linux
 ENV GOARCH=arm64 CGO_CFLAGS="-I/work/libpcap -I/work/capstone/include"
+ENV BPF_TARGET=arm64 BPF_CFLAGS="-O2 -g -D__TARGET_ARCH_arm64 -I/usr/xcc/aarch64-linux-musl-cross/aarch64-linux-musl/include/"
 
 
 ### Builder image for AArch64 to x86-64 cross-compilation
-FROM up9inc/linux-x86_64-musl-go-libpcap-capstone AS builder-from-arm64v8-to-amd64
+FROM up9inc/linux-x86_64-musl-go-libpcap-capstone-bpf AS builder-from-arm64v8-to-amd64
 ENV CGO_ENABLED=1 GOOS=linux
 ENV GOARCH=amd64 CGO_CFLAGS="-I/libpcap -I/capstone/include"
+ENV BPF_TARGET=amd64 BPF_CFLAGS="-O2 -g -D__TARGET_ARCH_x86  -I/usr/local/musl/x86_64-unknown-linux-musl/include/"
 
 
 ### Final builder image where the build happens
@@ -88,6 +103,11 @@ ARG GIT_BRANCH
 ARG BUILD_TIMESTAMP
 ARG VER=0.0
 
+WORKDIR /app/tap/tlstapper
+
+RUN rm tlstapper_bpf*
+RUN GOARCH=${BUILDARCH} go generate tls_tapper.go
+
 WORKDIR /app/agent-build
 
 RUN go build -ldflags="-extldflags=-static -s -w \

devops/linux-arm64-musl-go-libpcap-capstone-bpf/Dockerfile

@@ -25,3 +25,6 @@ RUN curl https://github.com/capstone-engine/capstone/archive/4.0.2.tar.gz -Lo ./
 WORKDIR /work/capstone
 RUN CAPSTONE_ARCHS="aarch64" CAPSTONE_STATIC=yes ./make.sh \
 && cp /work/capstone/libcapstone.a /usr/xcc/aarch64-linux-musl-cross/lib/gcc/aarch64-linux-musl/*/
+
+# Install eBPF related dependencies
+RUN apt-get -y install clang llvm libbpf-dev

devops/linux-arm64-musl-go-libpcap-capstone-bpf/build-push.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+set -e
+
+docker build . -t up9inc/linux-arm64-musl-go-libpcap-capstone-bpf && docker push up9inc/linux-arm64-musl-go-libpcap-capstone-bpf

devops/linux-arm64-musl-go-libpcap-capstone/build-push.sh

@@ -1,4 +0,0 @@
-#!/bin/bash
-set -e
-
-docker build . -t up9inc/linux-arm64-musl-go-libpcap-capstone && docker push up9inc/linux-arm64-musl-go-libpcap-capstone

devops/linux-x86_64-musl-go-libpcap-capstone-bpf/Dockerfile

@@ -1,5 +1,18 @@
 FROM messense/rust-musl-cross:x86_64-musl AS builder-from-arm64v8-to-amd64
 
+WORKDIR /
+
+# Install eBPF related dependencies
+RUN apt-get update
+RUN apt-get -y install clang llvm libelf-dev pkg-config
+
+# Build and install libbpf from source
+RUN curl https://github.com/libbpf/libbpf/archive/refs/tags/v0.8.0.tar.gz -Lo ./libbpf.tar.gz \
+ && tar -xzf libbpf.tar.gz && mv ./libbpf-* ./libbpf
+WORKDIR /libbpf/src
+RUN make && make install
+WORKDIR /
+
 ENV CROSS_TRIPLE x86_64-unknown-linux-musl
 ENV CROSS_ROOT /usr/local/musl
 
@@ -12,7 +25,6 @@ ENV AS=${CROSS_ROOT}/bin/${CROSS_TRIPLE}-as \
     FC=${CROSS_ROOT}/bin/${CROSS_TRIPLE}-gfortran
 
 # Install Go
-WORKDIR /
 RUN curl https://go.dev/dl/go1.17.6.linux-arm64.tar.gz -Lo ./go.linux-arm64.tar.gz \
  && curl https://go.dev/dl/go1.17.6.linux-arm64.tar.gz.asc -Lo ./go.linux-arm64.tar.gz.asc \
  && curl https://dl.google.com/dl/linux/linux_signing_key.pub  -Lo linux_signing_key.pub \
@@ -35,5 +47,5 @@ WORKDIR /
 RUN curl https://github.com/capstone-engine/capstone/archive/4.0.2.tar.gz -Lo ./capstone.tar.gz \
  && tar -xzf capstone.tar.gz && mv ./capstone-* ./capstone
 WORKDIR /capstone
-RUN ./make.sh \
+RUN CAPSTONE_ARCHS="x86" CAPSTONE_STATIC=yes ./make.sh \
  && cp /capstone/libcapstone.a /usr/local/musl/lib/gcc/x86_64-unknown-linux-musl/*/

devops/linux-x86_64-musl-go-libpcap-capstone-bpf/build-push.sh

@@ -0,0 +1,4 @@
+#!/bin/bash
+set -e
+
+docker build . -t up9inc/linux-x86_64-musl-go-libpcap-capstone-bpf && docker push up9inc/linux-x86_64-musl-go-libpcap-capstone-bpf

devops/linux-x86_64-musl-go-libpcap-capstone/build-push.sh

@@ -1,4 +0,0 @@
-#!/bin/bash
-set -e
-
-docker build . -t up9inc/linux-x86_64-musl-go-libpcap-capstone && docker push up9inc/linux-x86_64-musl-go-libpcap-capstone

tap/tlstapper/bpf-builder/build.sh

@@ -6,17 +6,22 @@ MIZU_HOME=$(realpath ../../../)
 
 docker build -t mizu-ebpf-builder . || exit 1
 
+BPF_TARGET=amd64
+BPF_CFLAGS="-O2 -g -D__TARGET_ARCH_x86"
+ARCH=$(uname -m)
+if [[ $ARCH == "aarch64" ]]; then
+    BPF_TARGET=arm64
+    BPF_CFLAGS="-O2 -g -D__TARGET_ARCH_arm64"
+fi
+
 docker run --rm \
 	--name mizu-ebpf-builder \
 	-v $MIZU_HOME:/mizu \
 	-v $(go env GOPATH):/root/go \
 	-it mizu-ebpf-builder \
 	sh -c "
-		go generate tap/tlstapper/tls_tapper.go
-		chown $(id -u):$(id -g) tap/tlstapper/tlstapper_bpfeb.go
-		chown $(id -u):$(id -g) tap/tlstapper/tlstapper_bpfeb.o
-		chown $(id -u):$(id -g) tap/tlstapper/tlstapper_bpfel.go
-		chown $(id -u):$(id -g) tap/tlstapper/tlstapper_bpfel.o
+		BPF_TARGET=\"$BPF_TARGET\" BPF_CFLAGS=\"$BPF_CFLAGS\" go generate tap/tlstapper/tls_tapper.go
+		chown $(id -u):$(id -g) tap/tlstapper/tlstapper_bpf*
 	" || exit 1
 
 popd

tap/tlstapper/bpf/common.c

@@ -80,10 +80,6 @@ static __always_inline void send_chunk(struct pt_regs *ctx, __u8* buffer, __u64
 }
 
 static __always_inline void output_ssl_chunk(struct pt_regs *ctx, struct ssl_info* info, int count_bytes, __u64 id, __u32 flags) {
-    if (count_bytes <= 0) {
-        return;
-    }
-
     if (count_bytes > (CHUNK_SIZE * MAX_CHUNKS_PER_OPERATION)) {
         log_error(ctx, LOG_ERROR_BUFFER_TOO_BIG, id, count_bytes, 0l);
         return;

tap/tlstapper/bpf/go_uprobes.c

@@ -128,6 +128,15 @@ static __always_inline void go_crypto_tls_ex_uprobe(struct pt_regs *ctx, struct
         return;
     }
 
+    // In case of read, the length is determined on return
+    if (flags == FLAGS_IS_READ_BIT) {
+        info.buffer_len = GO_ABI_INTERNAL_PT_REGS_R1(ctx); // n in return n, nil
+        // This check achieves ignoring 0 length reads (the reads result with an error)
+        if (info.buffer_len <= 0) {
+            return;
+        }
+    }
+
     output_ssl_chunk(ctx, &info, info.buffer_len, pid_tgid, flags);
 
     return;

tap/tlstapper/bpf/openssl_uprobes.c

@@ -101,6 +101,9 @@ static __always_inline void ssl_uretprobe(struct pt_regs *ctx, struct bpf_map_de
 	}
 
     int count_bytes = get_count_bytes(ctx, &info, id);
+    if (count_bytes <= 0) {
+        return;
+    }
 
 	output_ssl_chunk(ctx, &info, count_bytes, id, flags);
 }

tap/tlstapper/go_offsets.go

@@ -113,7 +113,11 @@ func getOffsets(filePath string) (offsets map[string]*goExtendedOffset, err erro
 		return
 	}
 
-	syms, err := se.Symbols()
+	var syms []elf.Symbol
+	syms, err = se.Symbols()
+	if err != nil {
+		return
+	}
 	for _, sym := range syms {
 		offset := sym.Value
 
@@ -158,7 +162,7 @@ func getOffsets(filePath string) (offsets map[string]*goExtendedOffset, err erro
 		}
 		symBytes := textSectionData[symStartingIndex:symEndingIndex]
 
-		// disasemble the symbol
+		// disassemble the symbol
 		var instructions []gapstone.Instruction
 		instructions, err = engine.Disasm(symBytes, sym.Value, 0)
 		if err != nil {

tap/tlstapper/tls_tapper.go

@@ -12,7 +12,7 @@ import (
 
 const GLOABL_TAP_PID = 0
 
-//go:generate go run github.com/cilium/ebpf/cmd/bpf2go@0d0727ef53e2f53b1731c73f4c61e0f58693083a -type tls_chunk tlsTapper bpf/tls_tapper.c -- -O2 -g -D__TARGET_ARCH_x86
+//go:generate go run github.com/cilium/ebpf/cmd/bpf2go@0d0727ef53e2f53b1731c73f4c61e0f58693083a -target $BPF_TARGET -cflags $BPF_CFLAGS -type tls_chunk tlsTapper bpf/tls_tapper.c
 
 type TlsTapper struct {
 	bpfObjects      tlsTapperObjects
@@ -161,14 +161,14 @@ func setupRLimit() error {
 }
 
 func (t *TlsTapper) tapSsllibPid(pid uint32, sslLibrary string, namespace string) error {
-	logger.Log.Infof("Tapping TLS (pid: %v) (sslLibrary: %v)", pid, sslLibrary)
-
 	newSsl := sslHooks{}
 
 	if err := newSsl.installUprobes(&t.bpfObjects, sslLibrary); err != nil {
 		return err
 	}
 
+	logger.Log.Infof("Tapping TLS (pid: %v) (sslLibrary: %v)", pid, sslLibrary)
+
 	t.sslHooksStructs = append(t.sslHooksStructs, newSsl)
 
 	t.poller.addPid(pid, namespace)

tap/tlstapper/tlstapper_bpfel_arm64.go

@@ -1,6 +1,6 @@
 // Code generated by bpf2go; DO NOT EDIT.
-//go:build arm64be || armbe || mips || mips64 || mips64p32 || ppc64 || s390 || s390x || sparc || sparc64
-// +build arm64be armbe mips mips64 mips64p32 ppc64 s390 s390x sparc sparc64
+//go:build arm64
+// +build arm64
 
 package tlstapper
 
@@ -208,5 +208,5 @@ func _TlsTapperClose(closers ...io.Closer) error {
 }
 
 // Do not access this directly.
-//go:embed tlstapper_bpfeb.o
+//go:embed tlstapper_bpfel_arm64.o
 var _TlsTapperBytes []byte

tap/tlstapper/tlstapper_bpfel_x86.go

@@ -1,6 +1,6 @@
 // Code generated by bpf2go; DO NOT EDIT.
-//go:build 386 || amd64 || amd64p32 || arm || arm64 || mips64le || mips64p32le || mipsle || ppc64le || riscv64
-// +build 386 amd64 amd64p32 arm arm64 mips64le mips64p32le mipsle ppc64le riscv64
+//go:build 386 || amd64
+// +build 386 amd64
 
 package tlstapper
 
@@ -208,5 +208,5 @@ func _TlsTapperClose(closers ...io.Closer) error {
 }
 
 // Do not access this directly.
-//go:embed tlstapper_bpfel.o
+//go:embed tlstapper_bpfel_x86.o
 var _TlsTapperBytes []byte

ui-common/package.json

@@ -60,6 +60,7 @@
     "react-scrollable-feed-virtualized": "^1.4.9",
     "react-syntax-highlighter": "^15.5.0",
     "react-toastify": "^8.2.0",
+    "recharts": "^2.1.10",
     "redoc": "^2.0.0-rc.71",
     "styled-components": "^5.3.5",
     "web-vitals": "^2.1.4",

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

@@ -197,14 +197,14 @@ export const ServiceMapModal: React.FC<ServiceMapModalProps> = ({ isOpen, onClos
             <Fade in={isOpen}>
                 <Box sx={modalStyle}>
                     <div className={styles.closeIcon}>
-                        <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }}></img>
+                        <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }}/>
                     </div>
                     <div className={styles.headerContainer}>
                         <div className={styles.headerSection}>
                             <span className={styles.title}>Services</span>
                             <Button size="medium"
                                 variant="contained"
-                                startIcon={<img src={isFilterClicked ? filterIconClicked : filterIcon} className="custom" alt="refresh" style={{ height: "26px", width: "26px" }}></img>}
+                                startIcon={<img src={isFilterClicked ? filterIconClicked : filterIcon} className="custom" alt="refresh" style={{ height: "26px", width: "26px" }}/>}
                                 className={commonClasses.outlinedButton + " " + commonClasses.imagedButton + ` ${isFilterClicked ? commonClasses.clickedButton : ""}`}
                                 onClick={() => setIsFilterClicked(prevState => !prevState)}
                                 style={{ textTransform: 'unset' }}>

ui-common/src/components/modals/TrafficStatsModal/TrafficPieChart/TrafficPieChart.module.sass

@@ -0,0 +1,16 @@
+.breadCrumbsContainer
+  margin-top: 15px
+  height: 15px
+
+  .breadCrumbs
+    color: #494677
+    text-align: left
+
+    .clickableTag
+      margin-right: 5px
+      border-bottom: 1px black solid
+      cursor: pointer
+
+    .nonClickableTag
+      margin-left: 5px
+      font-weight: 600

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

@@ -0,0 +1,131 @@
+import React, {useEffect, useMemo, useState} from "react";
+import styles from "./TrafficPieChart.module.sass";
+import {Cell, Legend, Pie, PieChart, Tooltip} from "recharts";
+import {Utils} from "../../../../helpers/Utils";
+
+enum PieChartMode {
+  REQUESTS = "entriesCount",
+  VOLUME = "volumeSizeBytes"
+}
+
+const COLORS = ['#e6194b', '#3cb44b', '#ffe119', '#4363d8', '#f58231', '#911eb4', '#46f0f0', '#f032e6', '#bcf60c', '#fabebe', '#008080', '#e6beff', '#9a6324', '#fffac8', '#800000', '#aaffc3', '#808000', '#ffd8b1', '#000075', '#808080', '#ffffff', '#000000'];
+
+const RADIAN = Math.PI / 180;
+const renderCustomizedLabel = ({
+                                 cx,
+                                 cy,
+                                 midAngle,
+                                 innerRadius,
+                                 outerRadius,
+                                 percent,
+                                 index
+                               }: any) => {
+  const radius = innerRadius + (outerRadius - innerRadius) * 0.5;
+  const x = cx + radius * Math.cos(-midAngle * RADIAN);
+  const y = cy + radius * Math.sin(-midAngle * RADIAN);
+
+  return (
+    <text
+      x={x}
+      y={y}
+      fill="white"
+      textAnchor={x > cx ? "start" : "end"}
+      dominantBaseline="central"
+    >
+      {`${(percent * 100).toFixed(0)}%`}
+    </text>
+  );
+};
+
+interface TrafficPieChartProps {
+  pieChartMode: string;
+  data: any;
+}
+
+export const TrafficPieChart: React.FC<TrafficPieChartProps> = ({pieChartMode , data}) => {
+
+  const [protocolsStats, setProtocolsStats] = useState([]);
+  const [commandStats, setCommandStats] = useState(null);
+  const [selectedProtocol, setSelectedProtocol] = useState(null as string);
+
+  useEffect(() => {
+    if (!data) return;
+    const protocolsPieData = data.map(protocol => {
+      return {
+        name: protocol.name,
+        value: protocol[PieChartMode[pieChartMode]],
+        color: protocol.color
+      }
+    })
+    setProtocolsStats(protocolsPieData)
+  }, [data, pieChartMode])
+
+  useEffect(() => {
+    if (!selectedProtocol) {
+      setCommandStats(null);
+      return;
+    }
+    const commandsPieData = data.find(protocol => protocol.name === selectedProtocol).methods.map(command => {
+      return {
+        name: command.name,
+        value: command[PieChartMode[pieChartMode]]
+      }
+    })
+    setCommandStats(commandsPieData);
+  }, [selectedProtocol, pieChartMode, data])
+
+  const pieLegend = useMemo(() => {
+    if (!data) return;
+    let legend;
+    if (!selectedProtocol) {
+      legend = data.map(protocol => <div style={{marginBottom: 5, display: "flex"}}>
+        <div style={{height: 15, width: 30, background: protocol?.color}}/>
+        <span style={{marginLeft: 5}}>
+          {protocol.name}
+        </span>
+      </div>)
+    } else {
+      legend = data.find(protocol => protocol.name === selectedProtocol).methods.map((method, index) => <div
+        style={{marginBottom: 5, display: "flex"}}>
+        <div style={{height: 15, width: 30, background: COLORS[index % COLORS.length]}}/>
+        <span style={{marginLeft: 5}}>
+          {method.name}
+        </span>
+      </div>)
+    }
+    return <div>{legend}</div>;
+  }, [data, selectedProtocol])
+
+  return (
+    <div>
+      <div className={styles.breadCrumbsContainer}>
+        {selectedProtocol && <div className={styles.breadCrumbs}>
+          <span className={styles.clickableTag} onClick={() => setSelectedProtocol(null)}>protocols</span>
+          <span>/</span>
+          <span className={styles.nonClickableTag}>{selectedProtocol}</span>
+        </div>}
+      </div>
+
+      {protocolsStats?.length > 0 && <div style={{width: "100%", display: "flex", justifyContent: "center"}}>
+        <PieChart width={300} height={300}>
+          <Pie
+            data={commandStats || protocolsStats}
+            dataKey="value"
+            cx={150}
+            cy={125}
+            labelLine={false}
+            label={renderCustomizedLabel}
+            outerRadius={125}
+            fill="#8884d8"
+            onClick={(section) => !commandStats && setSelectedProtocol(section.name)}>
+            {(commandStats || protocolsStats).map((entry, index) => (
+              <Cell key={`cell-${index}`} fill={entry.color || COLORS[index % COLORS.length]}/>)
+            )}
+          </Pie>
+          <Legend wrapperStyle={{position: "absolute", width: "auto", height: "auto", right: -150, top: 0}} content={pieLegend}/>
+          <Tooltip formatter={(value) => pieChartMode === "VOLUME" ? Utils.humanFileSize(value) : value + " Requests"}/>
+        </PieChart>
+      </div>}
+    </div>
+  );
+}

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

@@ -0,0 +1,19 @@
+.title
+  color: #494677
+  font-family: Source Sans Pro,Lucida Grande,Tahoma,sans-serif
+  font-size: 28px
+  font-weight: 600
+
+.closeIcon
+  position: absolute
+  right: 20px
+  top: 20px
+
+.mainContainer
+  padding: 30px
+  text-align: center
+
+.select
+  border: none
+  border-bottom: 1px black solid
+  outline: none

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

@@ -0,0 +1,86 @@
+import React, {useEffect, useState} from "react";
+import {Backdrop, Box, Fade, Modal} from "@mui/material";
+import styles from "./TrafficStatsModal.module.sass";
+import closeIcon from "assets/close.svg";
+import {TrafficPieChart} from "./TrafficPieChart/TrafficPieChart";
+import spinnerImg from "assets/spinner.svg";
+
+const modalStyle = {
+  position: 'absolute',
+  top: '6%',
+  left: '50%',
+  transform: 'translate(-50%, 0%)',
+  width: '50vw',
+  height: '82vh',
+  bgcolor: 'background.paper',
+  borderRadius: '5px',
+  boxShadow: 24,
+  p: 4,
+  color: '#000',
+};
+
+enum StatsMode {
+  REQUESTS = "entriesCount",
+  VOLUME = "volumeSizeBytes"
+}
+
+interface TrafficStatsModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  getTrafficStatsDataApi: () => Promise<any>
+}
+
+export const TrafficStatsModal: React.FC<TrafficStatsModalProps> = ({ isOpen, onClose, getTrafficStatsDataApi }) => {
+
+  const modes = Object.keys(StatsMode).filter(x => !(parseInt(x) >= 0));
+  const [statsMode, setStatsMode] = useState(modes[0]);
+  const [statsData, setStatsData] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  useEffect(() => {
+    if(isOpen && getTrafficStatsDataApi) {
+      (async () => {
+        try {
+          setIsLoading(true);
+          const data = await getTrafficStatsDataApi();
+          setStatsData(data);
+        } catch (e) {
+          console.error(e)
+        } finally {
+          setIsLoading(false)
+        }
+      })()
+    }
+  }, [isOpen, getTrafficStatsDataApi])
+
+  return (
+    <Modal
+      aria-labelledby="transition-modal-title"
+      aria-describedby="transition-modal-description"
+      open={isOpen}
+      onClose={onClose}
+      closeAfterTransition
+      BackdropComponent={Backdrop}
+      BackdropProps={{ timeout: 500 }}>
+      <Fade in={isOpen}>
+        <Box sx={modalStyle}>
+          <div className={styles.closeIcon}>
+            <img src={closeIcon} alt="close" onClick={() => onClose()} style={{ cursor: "pointer", userSelect: "none" }}/>
+          </div>
+          <div className={styles.title}>Traffic Statistics</div>
+          <div className={styles.mainContainer}>
+            <div>
+              <span style={{marginRight: 15}}>Breakdown By</span>
+              <select className={styles.select} value={statsMode} onChange={(e) => setStatsMode(e.target.value)}>
+                {modes.map(mode => <option value={mode}>{mode}</option>)}
+              </select>
+            </div>
+            {isLoading ? <div style={{textAlign: "center", marginTop: 20}}>
+                <img alt="spinner" src={spinnerImg} style={{ height: 50 }} />
+            </div> : <TrafficPieChart pieChartMode={statsMode} data={statsData}/>}
+          </div>
+        </Box>
+      </Fade>
+    </Modal>
+  );
+}

ui-common/src/components/modals/TrafficStatsModal/assets/close.svg

@@ -0,0 +1,4 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.591 9.99997C18.591 14.7446 14.7447 18.5909 10.0001 18.5909C5.25546 18.5909 1.40918 14.7446 1.40918 9.99997C1.40918 5.25534 5.25546 1.40906 10.0001 1.40906C14.7447 1.40906 18.591 5.25534 18.591 9.99997Z" fill="#E9EBF8" stroke="#BCCEFD"/>
+<path d="M13.1604 8.23038L11.95 7.01994L10.1392 8.83078L8.32832 7.01994L7.11789 8.23038L8.92872 10.0412L7.12046 11.8495L8.33089 13.0599L10.1392 11.2517L11.9474 13.0599L13.1579 11.8495L11.3496 10.0412L13.1604 8.23038Z" fill="#205CF5"/>
+</svg>

ui-common/src/components/modals/TrafficStatsModal/assets/spinner.svg

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
+<circle cx="50" cy="50" fill="none" stroke="#1d3f72" stroke-width="10" r="35" stroke-dasharray="164.93361431346415 56.97787143782138" transform="rotate(275.903 50 50)">
+  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;360 50 50" keyTimes="0;1"></animateTransform>
+</circle>
+<!-- [ldio] generated by https://loading.io/ --></svg>

ui-common/src/helpers/Utils.ts

@@ -4,4 +4,26 @@ const IP_ADDRESS_REGEX = /([0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3})(:([0-9]{
 export class Utils {
     static isIpAddress = (address: string): boolean => IP_ADDRESS_REGEX.test(address)
     static lineNumbersInString = (code:string): number => code.split("\n").length;
+
+  static humanFileSize(bytes, si=false, dp=1) {
+    const thresh = si ? 1000 : 1024;
+
+    if (Math.abs(bytes) < thresh) {
+      return bytes + ' B';
+    }
+
+    const units = si
+      ? ['kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+      : ['KiB', 'MiB', 'GiB', 'TiB', 'PiB', 'EiB', 'ZiB', 'YiB'];
+    let u = -1;
+    const r = 10**dp;
+
+    do {
+      bytes /= thresh;
+      ++u;
+    } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
+
+
+    return bytes.toFixed(dp) + ' ' + units[u];
+  }
 }

ui-common/src/index.tsx

@@ -4,8 +4,9 @@ import { StatusBar } from './components/UI';
 import useWS, { DEFAULT_LEFTOFF } from './hooks/useWS';
 import OasModal from './components/modals/OasModal/OasModal';
 import { ServiceMapModal } from './components/modals/ServiceMapModal/ServiceMapModal';
+import { TrafficStatsModal } from './components/modals/TrafficStatsModal/TrafficStatsModal';
 
 export { CodeEditorWrap as QueryForm } from './components/Filters/Filters';
-export { UI, StatusBar, OasModal, ServiceMapModal }
+export { UI, StatusBar, OasModal, ServiceMapModal, TrafficStatsModal }
 export { useWS, DEFAULT_LEFTOFF }
 export default TrafficViewer;

ui/src/App.tsx

@@ -5,9 +5,11 @@ import { ServiceMapModal } from '@up9/mizu-common';
 import { useRecoilState } from "recoil";
 import serviceMapModalOpenAtom from "./recoil/serviceMapModalOpen";
 import oasModalOpenAtom from './recoil/oasModalOpen/atom';
+import trafficStatsModalOpenAtom from "./recoil/trafficStatsModalOpen";
 import { OasModal } from '@up9/mizu-common';
 import Api from './helpers/api';
-import { ThemeProvider, StyledEngineProvider, createTheme } from '@mui/material';
+import {ThemeProvider, StyledEngineProvider, createTheme} from '@mui/material';
+import { TrafficStatsModal } from '@up9/mizu-common';
 
 const api = Api.getInstance()
 
@@ -15,6 +17,7 @@ const App = () => {
 
     const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom);
     const [oasModalOpen, setOasModalOpen] = useRecoilState(oasModalOpenAtom)
+    const [trafficStatsModalOpen, setTrafficStatsModalOpen] = useRecoilState(trafficStatsModalOpenAtom);
 
     return (
         <StyledEngineProvider injectFirst>
@@ -33,6 +36,7 @@ const App = () => {
                         openModal={oasModalOpen}
                         handleCloseModal={() => setOasModalOpen(false)}
                     />}
+                    <TrafficStatsModal isOpen={trafficStatsModalOpen} onClose={() => setTrafficStatsModalOpen(false)} getTrafficStatsDataApi={api.getStats}/>
                 </div>
             </ThemeProvider>
         </StyledEngineProvider>

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

@@ -10,6 +10,8 @@ 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";
 
 const api = Api.getInstance();
 
@@ -17,6 +19,7 @@ export const TrafficPage: React.FC = () => {
   const commonClasses = useCommonStyles();
   const [serviceMapModalOpen, setServiceMapModalOpen] = useRecoilState(serviceMapModalOpenAtom);
   const [openOasModal, setOpenOasModal] = useRecoilState(oasModalOpenAtom);
+  const [trafficStatsModalOpen, setTrafficStatsModalOpen] = useRecoilState(trafficStatsModalOpenAtom);
   const [shouldCloseWebSocket, setShouldCloseWebSocket] = useState(false);
 
   const trafficViewerApi = { ...api }
@@ -26,13 +29,17 @@ export const TrafficPage: React.FC = () => {
     setOpenOasModal(true);
   }
 
+  const handleOpenStatsModal = () => {
+    setShouldCloseWebSocket(true)
+    setTrafficStatsModalOpen(true);
+  }
+
   const openServiceMapModalDebounce = debounce(() => {
     setShouldCloseWebSocket(true)
     setServiceMapModalOpen(true)
   }, 500);
 
-  const actionButtons = (window["isOasEnabled"] || window["isServiceMapEnabled"]) &&
-    <div style={{ display: 'flex', height: "100%" }}>
+  const actionButtons = <div style={{ display: 'flex', height: "100%" }}>
       {window["isOasEnabled"] && <Button
         startIcon={<img className="custom" src={services} alt="services" />}
         size="large"
@@ -48,15 +55,24 @@ export const TrafficPage: React.FC = () => {
         variant="contained"
         className={commonClasses.outlinedButton + " " + commonClasses.imagedButton}
         onClick={openServiceMapModalDebounce}
-        style={{ textTransform: 'unset' }}>
+        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}>
+      Traffic Stats
+    </Button>
     </div>
 
   return (
     <>
       <TrafficViewer webSocketUrl={MizuWebsocketURL} shouldCloseWebSocket={shouldCloseWebSocket} setShouldCloseWebSocket={setShouldCloseWebSocket}
-        trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen)} isDemoBannerView={false} />
+        trafficViewerApiProp={trafficViewerApi} actionButtons={actionButtons} isShowStatusBar={!(openOasModal || serviceMapModalOpen || trafficStatsModalOpen)} isDemoBannerView={false} />
     </>
   );
 };

ui/src/components/assets/trafficStats.svg

@@ -0,0 +1,10 @@
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1.5" y="2.5" width="9" height="12" rx="1.5" stroke="#A0B2FF"/>
+<rect x="5" y="4" width="3.42857" height="2" rx="1" fill="#205CF5"/>
+<rect x="3" y="7" width="6" height="2" rx="1" fill="#205CF5"/>
+<rect x="3" y="11" width="6" height="2" rx="1" fill="#205CF5"/>
+<rect x="-0.5" y="0.5" width="9" height="12" rx="1.5" transform="matrix(-1 0 0 1 19 2)" stroke="#A0B2FF"/>
+<rect width="3" height="2" rx="1" transform="matrix(-1 0 0 1 15 4)" fill="#205CF5"/>
+<rect width="6" height="2" rx="1" transform="matrix(-1 0 0 1 18 7)" fill="#205CF5"/>
+<rect width="6" height="2" rx="1" transform="matrix(-1 0 0 1 18 11)" fill="#205CF5"/>
+</svg>

ui/src/helpers/api.js

@@ -110,4 +110,9 @@ export default class Api {
             headers
         });
     }
+
+    getStats = async () => {
+        const response = await client.get("/status/accumulative");
+        return response.data;
+    }
 }

ui/src/recoil/trafficStatsModalOpen/atom.ts

@@ -0,0 +1,8 @@
+import { atom } from "recoil"
+
+const trafficStatsModalOpenAtom = atom({
+    key: "trafficStatsModalOpenAtom",
+    default: false
+})
+
+export default trafficStatsModalOpenAtom;

ui/src/recoil/trafficStatsModalOpen/index.ts

@@ -0,0 +1,2 @@
+import atom from "./atom";
+export default atom;