Add an indicator for the eBPF sourced entries (#886)

* Define `Capture` type and expect it as an argument in `Dissect` method

* Add an indicator for the  eBPF sourced entries

* Fix the Go lint error

* Fix the logic in the UI

* Update the expected JSONs

* Add TODOs

* Add `UndefinedCapture` constant

* Define `CaptureTypes` enum

ui-common/src/components/TrafficViewer/EntryListItem/EntryListItem.module.sass

@@ -62,6 +62,13 @@
   width: 185px
   text-align: left
 
+.capture
+  margin-top: -60px
+
+.capture img
+  height: 20px
+  z-index: 1000
+
 .endpointServiceContainer
   display: flex
   flex-direction: column

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

@@ -4,6 +4,7 @@ import SwapHorizIcon from '@material-ui/icons/SwapHoriz';
 import styles from './EntryListItem.module.sass';
 import StatusCode, {getClassification, StatusCodeClassification} from "../../UI/StatusCode";
 import Protocol, {ProtocolInterface} from "../../UI/Protocol"
+import eBPFLogo from '../assets/ebpf.png';
 import {Summary} from "../../UI/Summary";
 import Queryable from "../../UI/Queryable";
 import ingoingIconSuccess from "assets/ingoing-traffic-success.svg"
@@ -24,6 +25,7 @@ interface TCPInterface {
 
 interface Entry {
     proto: ProtocolInterface,
+    capture: string,
     method?: string,
     methodQuery?: string,
     summary: string,
@@ -52,6 +54,14 @@ interface EntryProps {
     headingMode: boolean;
 }
 
+enum CaptureTypes {
+    UndefinedCapture = "",
+    Pcap = "pcap",
+    Envoy = "envoy",
+    Linkerd = "linkerd",
+    Ebpf = "ebpf",
+}
+
 export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) => {
 
     const [focusedEntryId, setFocusedEntryId] = useRecoilState(focusedEntryIdAtom);
@@ -154,6 +164,17 @@ export const EntryItem: React.FC<EntryProps> = ({entry, style, headingMode}) =>
                 protocol={entry.proto}
                 horizontal={false}
             /> : null}
+            {/* TODO: Update the code below once we have api.Pcap, api.Envoy and api.Linkerd distinction in the backend */}
+            {entry.capture === CaptureTypes.Ebpf ? <div className={styles.capture}>
+                <Queryable
+                    query={`capture == "${entry.capture}"`}
+                    displayIconOnMouseOver={true}
+                    flipped={false}
+                    style={{position: "absolute"}}
+                >
+                    <img src={eBPFLogo} alt="eBPF"/>
+                </Queryable>
+            </div> : null}
             {isStatusCodeEnabled && <div>
                 <StatusCode statusCode={entry.status} statusQuery={entry.statusQuery}/>
             </div>}

ui-common/src/components/UI/Protocol.tsx

@@ -46,6 +46,7 @@ const Protocol: React.FC<ProtocolProps> = ({protocol, horizontal}) => {
             displayIconOnMouseOver={true}
             flipped={false}
             iconStyle={{marginTop: "52px", marginRight: "10px", zIndex: 1000}}
+            tooltipStyle={{marginTop: "-22px", zIndex: 1001}}
         >
             <span
                 className={`${styles.base} ${styles.vertical}`}

ui-common/src/components/UI/Queryable.tsx

@@ -11,11 +11,12 @@ interface Props {
     iconStyle?: object,
     className?: string,
     useTooltip?: boolean,
+    tooltipStyle?: object,
     displayIconOnMouseOver?: boolean,
     flipped?: boolean,
 }
 
-const Queryable: React.FC<Props> = ({query, style, iconStyle, className, useTooltip= true, displayIconOnMouseOver = false, flipped = false, children}) => {
+const Queryable: React.FC<Props> = ({query, style, iconStyle, className, useTooltip = true, tooltipStyle = null, displayIconOnMouseOver = false, flipped = false, children}) => {
     const [showAddedNotification, setAdded] = useState(false);
     const [showTooltip, setShowTooltip] = useState(false);
     const [queryState, setQuery] = useRecoilState(queryAtom);
@@ -48,12 +49,12 @@ const Queryable: React.FC<Props> = ({query, style, iconStyle, className, useTool
 				</CopyToClipboard> : null;
 
     return (
-        <div className={`${QueryableStyle.QueryableContainer} ${QueryableStyle.displayIconOnMouseOver} ${className ? className : ''} ${displayIconOnMouseOver ? QueryableStyle.displayIconOnMouseOver : ''}`} 
+        <div className={`${QueryableStyle.QueryableContainer} ${QueryableStyle.displayIconOnMouseOver} ${className ? className : ''} ${displayIconOnMouseOver ? QueryableStyle.displayIconOnMouseOver : ''}`}
             style={style} onMouseOver={ e => setShowTooltip(true)} onMouseLeave={ e => setShowTooltip(false)}>
                 {flipped && addButton}
                 {children}
                 {!flipped && addButton}
-                {useTooltip && showTooltip && <span className={QueryableStyle.QueryableTooltip}>{query}</span>}
+                {useTooltip && showTooltip && <span className={QueryableStyle.QueryableTooltip} style={tooltipStyle}>{query}</span>}
         </div>
     );
 };