Show the EntryItem as EntrySummary in EntryDetailed (#506)

ui/src/components/EntryDetailed.tsx

@@ -1,9 +1,8 @@
 import React from "react";
 import EntryViewer from "./EntryDetailed/EntryViewer";
+import {EntryItem} from "./EntryListItem/EntryListItem";
 import {makeStyles} from "@material-ui/core";
 import Protocol from "./UI/Protocol"
-import StatusCode from "./UI/StatusCode";
-import {Summary} from "./UI/Summary";
 
 const useStyles = makeStyles(() => ({
     entryTitle: {
@@ -12,6 +11,7 @@ const useStyles = makeStyles(() => ({
         maxHeight: 46,
         alignItems: 'center',
         marginBottom: 4,
+        marginLeft: 6,
         padding: 2,
         paddingBottom: 0
     },
@@ -64,18 +64,17 @@ const EntryTitle: React.FC<any> = ({protocol, data, bodySize, elapsedTime, updat
 };
 
 const EntrySummary: React.FC<any> = ({data, updateQuery}) => {
-    const classes = useStyles();
+    const entry = data.base;
 
-    const response = data.response;
-
-    return <div className={classes.entrySummary}>
-        {response && "status" in response && <div style={{marginRight: 8}}>
-            <StatusCode statusCode={response.status} updateQuery={updateQuery}/>
-        </div>}
-        <div style={{flexGrow: 1, overflow: 'hidden'}}>
-            <Summary method={data.method} summary={data.summary} updateQuery={updateQuery}/>
-        </div>
-    </div>;
+    return <EntryItem
+        key={entry.id}
+        entry={entry}
+        setFocusedEntryId={null}
+        style={{}}
+        updateQuery={updateQuery}
+        forceSelect={false}
+        headingMode={true}
+    />;
 };
 
 export const EntryDetailed: React.FC<EntryDetailedProps> = ({entryData, updateQuery}) => {

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

@@ -4,6 +4,7 @@
     font-family: "Source Sans Pro", Lucida Grande, Tahoma, sans-serif
     height: calc(100% - 70px)
     width: 100%
+    margin-top: 10px
 
     h3,
     h4

ui/src/components/EntryListItem/EntryListItem.tsx

@@ -40,11 +40,13 @@ interface EntryProps {
     setFocusedEntryId: (id: string) => void;
     style: object;
     updateQuery: any;
+    forceSelect: boolean;
+    headingMode: boolean;
 }
 
-export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, style, updateQuery}) => {
+export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, style, updateQuery, forceSelect, headingMode}) => {
 
-    const [isSelected, setIsSelected] = useState(false);
+    const [isSelected, setIsSelected] = useState(!forceSelect ? false : true);
 
     const classification = getClassification(entry.statusCode)
     const numberOfRules = entry.rules.numberOfRules
@@ -122,22 +124,23 @@ export const EntryItem: React.FC<EntryProps> = ({entry, setFocusedEntryId, style
             className={`${styles.row}
             ${isSelected && !rule && !contractEnabled ? styles.rowSelected : additionalRulesProperties}`}
             onClick={() => {
+                if (!setFocusedEntryId) return;
                 setIsSelected(!isSelected);
                 setFocusedEntryId(entry.id.toString());
             }}
             style={{
                 border: isSelected ? `1px ${entry.protocol.backgroundColor} solid` : "1px transparent solid",
-                position: "absolute",
+                position: !headingMode ? "absolute" : "unset",
                 top: style['top'],
                 marginTop: style['marginTop'],
-                width: "calc(100% - 25px)",
+                width: !headingMode ? "calc(100% - 25px)" : "calc(100% - 18px)",
             }}
         >
-            <Protocol
+            {!headingMode ? <Protocol
                 protocol={entry.protocol}
                 horizontal={false}
                 updateQuery={updateQuery}
-            />
+            /> : null}
             {((entry.protocol.name === "http" && "statusCode" in entry) || entry.statusCode !== 0) && <div>
                 <StatusCode statusCode={entry.statusCode} updateQuery={updateQuery}/>
             </div>}

ui/src/components/TrafficPage.tsx

@@ -119,7 +119,11 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
             switch (message.messageType) {
                 case "entry":
                     const entry = message.data;
-                    if (!focusedEntryId) setFocusedEntryId(entry.id.toString());
+                    var forceSelect = false;
+                    if (!focusedEntryId) {
+                        setFocusedEntryId(entry.id.toString());
+                        forceSelect = true;
+                    }
                     setEntriesBuffer([
                         ...entriesBuffer,
                         <EntryItem
@@ -128,6 +132,8 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                             setFocusedEntryId={setFocusedEntryId}
                             style={{}}
                             updateQuery={updateQuery}
+                            forceSelect={forceSelect}
+                            headingMode={false}
                         />
                     ]);
                     break
@@ -190,16 +196,18 @@ export const TrafficPage: React.FC<TrafficPageProps> = ({setAnalyzeStatus, onTLS
                 const entryData = await api.getEntry(focusedEntryId);
                 setSelectedEntryData(entryData);
             } catch (error) {
-                toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
-                    position: "bottom-right",
-                    theme: "colored",
-                    autoClose: error.response.data.autoClose,
-                    hideProgressBar: false,
-                    closeOnClick: true,
-                    pauseOnHover: true,
-                    draggable: true,
-                    progress: undefined,
-                });
+                if (error.response) {
+                    toast[error.response.data.type](`Entry[${focusedEntryId}]: ${error.response.data.msg}`, {
+                        position: "bottom-right",
+                        theme: "colored",
+                        autoClose: error.response.data.autoClose,
+                        hideProgressBar: false,
+                        closeOnClick: true,
+                        pauseOnHover: true,
+                        draggable: true,
+                        progress: undefined,
+                    });
+                }
                 console.error(error);
             }
         })()