Upgrade Basenine to 0.3.0, do a refactor to enable redact helper and update the cheatsheet (#614)

* Upgrade Basenine version from `0.2.26` to `0.3.0`

* Remove `Summarize` method from `Dissector` interface and refactor the data structures in `tap/api/api.go`

* Rename `MizuEntry` to `Entry` and `BaseEntryDetails` to `BaseEntry`

* Populate `ContractStatus` field as well

* Update the cheatsheet

* Upgrade the Basenine version in the helm chart as well

* Remove a forgoten `console.log` call

ui/src/components/EntryDetailed.tsx

@@ -69,9 +69,7 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
     </div>;
 };
 
-const EntrySummary: React.FC<any> = ({data, updateQuery}) => {
-    const entry = data.base;
-
+const EntrySummary: React.FC<any> = ({entry, updateQuery}) => {
     return <EntryItem
         key={`entry-${entry.id}`}
         entry={entry}
@@ -92,7 +90,7 @@ export const EntryDetailed: React.FC<EntryDetailedProps> = ({entryData, updateQu
             elapsedTime={entryData.data.elapsedTime}
             updateQuery={updateQuery}
         />
-        {entryData.data && <EntrySummary data={entryData.data} updateQuery={updateQuery}/>}
+        {entryData.data && <EntrySummary entry={entryData.data} updateQuery={updateQuery}/>}
         <>
             {entryData.data && <EntryViewer
                 representation={entryData.representation}

ui/src/components/EntryListItem/EntryListItem.tsx

@@ -20,11 +20,11 @@ interface TCPInterface {
 }
 
 interface Entry {
-    protocol: ProtocolInterface,
+    proto: ProtocolInterface,
     method?: string,
     summary: string,
     id: number,
-    statusCode?: number;
+    status?: number;
     timestamp: Date;
     src: TCPInterface,
     dst: TCPInterface,
@@ -53,7 +53,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
 
     const isSelected = focusedEntryId === entry.id.toString();
 
-    const classification = getClassification(entry.statusCode)
+    const classification = getClassification(entry.status)
     const numberOfRules = entry.rules.numberOfRules
     let ingoingIcon;
     let outgoingIcon;
@@ -123,7 +123,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
             break;
     }
 
-    const isStatusCodeEnabled = ((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0);
+    const isStatusCodeEnabled = ((entry.proto.name === "http" && "status" in entry) || entry.status !== 0);
     var endpointServiceContainer = "10px";
     if (!isStatusCodeEnabled) endpointServiceContainer = "20px";
 
@@ -137,7 +137,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
                 setFocusedEntryId(entry.id.toString());
             }}
             style={{
-                border: isSelected ? `1px ${entry.protocol.backgroundColor} solid` : "1px transparent solid",
+                border: isSelected ? `1px ${entry.proto.backgroundColor} solid` : "1px transparent solid",
                 position: !headingMode ? "absolute" : "unset",
                 top: style['top'],
                 marginTop: !headingMode ? style['marginTop'] : "10px",
@@ -145,12 +145,12 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
             }}
         >
             {!headingMode ? <Protocol
-                protocol={entry.protocol}
+                protocol={entry.proto}
                 horizontal={false}
                 updateQuery={updateQuery}
             /> : null}
             {isStatusCodeEnabled && <div>
-                <StatusCode statusCode={entry.statusCode} updateQuery={updateQuery}/>
+                <StatusCode statusCode={entry.status} updateQuery={updateQuery}/>
             </div>}
             <div className={styles.endpointServiceContainer} style={{paddingLeft: endpointServiceContainer}}>
                 <Summary method={entry.method} summary={entry.summary} updateQuery={updateQuery}/>
@@ -171,7 +171,7 @@ export const EntryItem: React.FC<EntryProps> = ({entry, focusedEntryId, setFocus
                             {entry.src.name ? entry.src.name : "[Unresolved]"}
                         </span>
                     </Queryable>
-                    <SwapHorizIcon style={{color: entry.protocol.backgroundColor, marginTop: "-2px"}}></SwapHorizIcon>
+                    <SwapHorizIcon style={{color: entry.proto.backgroundColor, marginTop: "-2px"}}></SwapHorizIcon>
                     <Queryable
                         query={`dst.name == "${entry.dst.name}"`}
                         updateQuery={updateQuery}

ui/src/components/Filters.tsx

@@ -265,7 +265,7 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
                             </Typography>
                             <br></br>
                             <Typography id="modal-modal-description">
-                                true if the given selector's value starts with the string:
+                                true if the given selector's value starts with (similarly <code style={{fontSize: "14px"}}>endsWith</code>, <code style={{fontSize: "14px"}}>contains</code>) the string:
                             </Typography>
                             <SyntaxHighlighter
                                 showLineNumbers={false}
@@ -273,19 +273,19 @@ export const QueryForm: React.FC<QueryFormProps> = ({query, setQuery, background
                                 language="python"
                             />
                             <Typography id="modal-modal-description">
-                                true if the given selector's value ends with the string:
+                                a field that contains a JSON encoded string can be filtered based a JSONPath:
                             </Typography>
                             <SyntaxHighlighter
                                 showLineNumbers={false}
-                                code={`request.path.endsWith("something")`}
+                                code={`response.content.text.json().some.path == "somevalue"`}
                                 language="python"
                             />
                             <Typography id="modal-modal-description">
-                                true if the given selector's value contains the string:
+                                fields that contain sensitive information can be redacted:
                             </Typography>
                             <SyntaxHighlighter
                                 showLineNumbers={false}
-                                code={`request.path.contains("something")`}
+                                code={`and redact("request.path", "src.name")`}
                                 language="python"
                             />
                             <Typography id="modal-modal-description">

ui/src/components/TrafficPage.tsx

@@ -212,7 +212,7 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({onTLSDetected, setAnaly
         setSelectedEntryData(null);
         (async () => {
             try {
-                const entryData = await api.getEntry(focusedEntryId);
+                const entryData = await api.getEntry(focusedEntryId, query);
                 setSelectedEntryData(entryData);
             } catch (error) {
                 if (error.response?.data?.type) {

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

@@ -32,9 +32,8 @@
   fieldset
     border: none
 
-$divider-breakpoint-1: 1474px
-$divider-breakpoint-2: 1366px
-$divider-breakpoint-3: 1980px
+$divider-breakpoint-1: 1055px
+$divider-breakpoint-2: 1453px
 
 @media (max-width: $divider-breakpoint-1)
   .divider1
@@ -43,7 +42,3 @@ $divider-breakpoint-3: 1980px
 @media (max-width: $divider-breakpoint-2)
   .divider2
     display: none
-
-@media (min-width: $divider-breakpoint-1) and (max-width: $divider-breakpoint-3)
-  .divider2
-    display: none