From f23f50373bc41a832db9cd35ca5ff486dd6cf636 Mon Sep 17 00:00:00 2001 From: Liraz Yehezkel Date: Thu, 29 Apr 2021 18:01:30 +0300 Subject: [PATCH] meta information --- ui/src/App.sass | 2 +- ui/src/components/HarEntriesList.tsx | 4 +++ .../HarEntryViewer/HAREntryViewer.module.sass | 3 +- ui/src/components/HarPage.tsx | 32 ++++++++++++++----- .../style/HarEntriesList.module.sass | 14 +++++++- ui/src/components/style/HarPage.sass | 24 ++++++++++++++ ui/src/components/style/misc.module.sass | 2 +- 7 files changed, 69 insertions(+), 12 deletions(-) diff --git a/ui/src/App.sass b/ui/src/App.sass index 406c0f678..e2f145845 100644 --- a/ui/src/App.sass +++ b/ui/src/App.sass @@ -1,5 +1,5 @@ .mizuApp - background-color: #090b14 + background-color: #111629 width: 100% .header diff --git a/ui/src/components/HarEntriesList.tsx b/ui/src/components/HarEntriesList.tsx index 1cddeba50..3dd54aaf4 100644 --- a/ui/src/components/HarEntriesList.tsx +++ b/ui/src/components/HarEntriesList.tsx @@ -20,6 +20,10 @@ export const HarEntriesList: React.FC = ({entries, focusedE isSelected={focusedEntryId === entry.id} />)} + {entries?.length > 0 &&
+
{entries?.length} requests
+
Started listening at {new Date(+entries[0].timestamp*1000)?.toLocaleString()}
+
} ; }; diff --git a/ui/src/components/HarEntryViewer/HAREntryViewer.module.sass b/ui/src/components/HarEntryViewer/HAREntryViewer.module.sass index e2f7e20f2..9a50bc140 100644 --- a/ui/src/components/HarEntryViewer/HAREntryViewer.module.sass +++ b/ui/src/components/HarEntryViewer/HAREntryViewer.module.sass @@ -53,4 +53,5 @@ color: #627ef7 text-decoration: none font-weight: 600 - margin-bottom: .5rem \ No newline at end of file + margin-bottom: .5rem + overflow-wrap: anywhere \ No newline at end of file diff --git a/ui/src/components/HarPage.tsx b/ui/src/components/HarPage.tsx index 31c4d8e93..22355c48e 100644 --- a/ui/src/components/HarPage.tsx +++ b/ui/src/components/HarPage.tsx @@ -11,8 +11,9 @@ const useLayoutStyles = makeStyles(() => ({ details: { flex: "0 0 50%", width: "45vw", - backgroundColor: "#171c30", padding: "12px 24px", + backgroundColor: "#090b14", + borderLeft: "2px #11162a solid" }, harViewer: { @@ -31,19 +32,28 @@ export const HarPage: React.FC = () => { const [entries, setEntries] = useState([] as any); const [focusedEntryId, setFocusedEntryId] = useState(null); const [selectedHarEntry, setSelectedHarEntry] = useState(null); + const [connectionOpen, setConnectionOpen] = useState(false); const socketUrl = 'ws://localhost:8899/ws'; - const {lastMessage} = useWebSocket(socketUrl, {shouldReconnect: (closeEvent) => true}); + const {lastMessage} = useWebSocket(socketUrl, { + onOpen: () => setConnectionOpen(true), + onClose: () => setConnectionOpen(false), + shouldReconnect: (closeEvent) => true}); useEffect(() => { if(!lastMessage?.data) return; const entry = JSON.parse(lastMessage.data); if(!focusedEntryId) setFocusedEntryId(entry.id) - setEntries([...entries, entry]) + let newEntries = [...entries]; + if(entries.length === 1000) { + newEntries = newEntries.splice(1) + } + setEntries([...newEntries, entry]) },[lastMessage?.data]) useEffect(() => { if(!focusedEntryId) return; + setSelectedHarEntry(null) fetch(`http://localhost:8899/api/entries/${focusedEntryId}`) .then(response => response.json()) .then(data => setSelectedHarEntry(data)); @@ -51,17 +61,23 @@ export const HarPage: React.FC = () => { return (
-
+
+
+ {connectionOpen ? "connected, waiting for traffic" : "not connected"} +
+
+
+ {entries.length > 0 &&
{/**/}
- {selectedHarEntry &&
- -
} -
+
+ {selectedHarEntry && } +
+
}
) }; diff --git a/ui/src/components/style/HarEntriesList.module.sass b/ui/src/components/style/HarEntriesList.module.sass index d219f3aa7..2c5eb782d 100644 --- a/ui/src/components/style/HarEntriesList.module.sass +++ b/ui/src/components/style/HarEntriesList.module.sass @@ -3,10 +3,22 @@ display: flex flex-grow: 1 flex-direction: column + justify-content: space-between .container position: relative display: flex flex-direction: column overflow: hidden - flex-grow: 1 \ No newline at end of file + flex-grow: 1 + padding-top: 20px + background-color: #090b14 + +.footer + display: flex + justify-content: space-between + border-top: 1px solid rgba(255,255,255,0.5) + align-items: center + padding-top: 10px + margin-top: 10px + margin-right: 15px \ No newline at end of file diff --git a/ui/src/components/style/HarPage.sass b/ui/src/components/style/HarPage.sass index 3ff4ba321..6c9e4ca68 100644 --- a/ui/src/components/style/HarPage.sass +++ b/ui/src/components/style/HarPage.sass @@ -55,6 +55,7 @@ display: flex flex-grow: 1 overflow: hidden + background-color: #090b14 .HarPage-ListContainer display: flex @@ -69,3 +70,26 @@ background-color: #171c30 flex: 0 0 50% padding: 12px 24px + +.greenIndicator + height: 10px + width: 10px + background-color: #1acd37 + border-radius: 50% + box-shadow: 0 0 3px 3px #1acd3787 + margin-left: 10px + +.redIndicator + height: 10px + width: 10px + background-color: #ff3a30 + border-radius: 50% + box-shadow: 0 0 3px 3px #ff3a3073 + margin-left: 10px + +.connectionText + display: flex + align-items: center + height: 17px + font-size: 16px + color: rgba(255,255,255,0.75) diff --git a/ui/src/components/style/misc.module.sass b/ui/src/components/style/misc.module.sass index 59c91fb71..d4e975dc3 100644 --- a/ui/src/components/style/misc.module.sass +++ b/ui/src/components/style/misc.module.sass @@ -2,7 +2,7 @@ border-radius: 4px border: solid 1px #bcc6dd60 margin-left: 4px - padding: 1px 3px + padding: 2px 5px color: #ffffff88 text-transform: uppercase font-family: "Source Sans Pro", sans-serif