Skip to content

Commit 4e70c6e

Browse files
davechridavechri
authored
Merge pull request #701 from allproxy/v3-30-0
V3 30 0: JSON Log Viewer render wrapped line
2 parents f21cf30 + e440a44 commit 4e70c6e

File tree

7 files changed

+42
-20
lines changed

7 files changed

+42
-20
lines changed

‎README.md‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -8,13 +8,13 @@ MITM debugging proxy with a web GUI to view and modify all of the HTTP and HTTPS
88

99
### Install
1010

11-
> Mac: **[allproxy.dmg](https://github.com/allproxy/allproxy/releases/download/v3.29.0/allproxy-3.29.2-x64.dmg)**
11+
> Mac: **[allproxy.dmg](https://github.com/allproxy/allproxy/releases/download/v3.30.0/allproxy-3.30.0-x64.dmg)**
1212
13-
> RedHat: **[allproxy.rpm](https://github.com/allproxy/allproxy/releases/download/v3.29.0/allproxy-3.29.2-1.x86_64.rpm)**
13+
> RedHat: **[allproxy.rpm](https://github.com/allproxy/allproxy/releases/download/v3.30.0/allproxy-3.30.0-1.x86_64.rpm)**
1414
15-
> Ubuntu: **[allproxy.deb](https://github.com/allproxy/allproxy/releases/download/v3.29.0/allproxy_3.29.2_amd64.deb)**
15+
> Ubuntu: **[allproxy.deb](https://github.com/allproxy/allproxy/releases/download/v3.30.0/allproxy_3.30.0_amd64.deb)**
1616
17-
> Windows: **[Setup.exe](https://github.com/allproxy/allproxy/releases/download/v3.29.0/allproxy-3.29.2.Setup.exe)**
17+
> Windows: **[Setup.exe](https://github.com/allproxy/allproxy/releases/download/v3.30.0/allproxy-3.30.0.Setup.exe)**
1818
1919
> Other install options:
2020
> 1. Install NPM package: **npm install -g allproxy**

‎client/src/App.css‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,15 @@ body {
4040
td {
4141
border-color: black !important;
4242
}
43+
44+
.request__msg-even {
45+
background-color: #333333;
46+
}
47+
48+
.request__msg-highlight {
49+
/* color:rgba(0, 55, 255, 0.884) !important; */
50+
color: #4ca728 !important;
51+
}
4352
}
4453

4554
@media screen and (prefers-color-scheme: light) {
@@ -79,6 +88,15 @@ body {
7988
.MuiCheckbox-colorSecondary {
8089
color: blue;
8190
}
91+
92+
.request__msg-even {
93+
background-color: #e5e5e5;
94+
}
95+
96+
.request__msg-highlight {
97+
/* color:rgba(0, 55, 255, 0.884) !important; */
98+
color: rgb(203, 75, 22) !important;
99+
}
82100
}
83101

84102
.header__filter-input,
@@ -169,8 +187,8 @@ td input {
169187
padding-bottom: 0 !important;
170188
}
171189

172-
.json-label {
173-
cursor: pointer;
190+
.keep-all {
191+
word-break: keep-all;
174192
}
175193

176194
.center {
@@ -325,11 +343,6 @@ td input {
325343
white-space: nowrap;
326344
}
327345

328-
.request__msg-highlight {
329-
/* color:rgba(0, 55, 255, 0.884) !important; */
330-
color: rgb(203, 75, 22) !important;
331-
}
332-
333346
.request__msg-unhighlight {
334347
color: grey !important;
335348
}
@@ -733,6 +746,11 @@ td input {
733746
display: flex;
734747
}
735748

749+
.request__msg.wrap {
750+
white-space: wrap;
751+
word-break: break-all;
752+
}
753+
736754
/* .request__msg.active {
737755
border: red solid thin;
738756
border-radius: .2rem;

‎client/src/components/JsonLogAnnotator.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ const JsonLogAnnotator = observer(({ message }: Props) => {
2323
// Look for embedded JSON object
2424
let nonJson = message.path ? message.path + ' ' : '';
2525

26-
elements.push(<span> {nonJson + JSON.stringify(message.responseBody)}</span>);
26+
elements.push(<div style={{ display: 'inline-block', maxHeight: '52px', overflow: 'hidden', textOverflow: 'ellipsis' }}> {nonJson + JSON.stringify(message.responseBody)}</div>);
2727
}
2828

2929
let messageText = messageStore.getLogEntry().message;
@@ -58,14 +58,15 @@ const JsonLogAnnotator = observer(({ message }: Props) => {
5858
function makeLabel(name: string, background: string, color: string, filter: string, value: any = undefined): JSX.Element[] {
5959
const v = value === undefined ? '' : typeof value === 'string' ? `"${value}"` : value;
6060

61-
const className = value !== undefined ? 'json-label' : '';
61+
const className = value !== undefined ? 'json-label keep-all' : '';
6262

6363
const elements: JSX.Element[] = [];
6464
elements.push(
6565
<span className={className}
6666
style={{ color: color, background: background, filter: filter, marginLeft: '.25rem', padding: '0 .25rem', borderRadius: '.25rem', border: `${background} thin solid` }}>{name}</span>);
6767
if (v !== undefined) {
68-
elements.push(<span style={{ marginLeft: '.25rem' }}>{v}</span >);
68+
const className = value === 'string' && v.length > 16 ? undefined : 'keep-all';
69+
elements.push(<span className={className} style={{ marginLeft: '.25rem' }}>{v}</span >);
6970
}
7071
return elements;
7172
}

‎client/src/components/Request.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,9 @@ type Props = {
2121
maxEndpointSize: number,
2222
vertical: boolean,
2323
isFiltered: boolean,
24+
className: string,
2425
};
25-
const Request = observer(({ isActive, highlight, onClick, store, onResend, maxStatusSize, maxMethodSize, maxEndpointSize, vertical, isFiltered }: Props) => {
26+
const Request = observer(({ isActive, highlight, onClick, store, onResend, maxStatusSize, maxMethodSize, maxEndpointSize, vertical, isFiltered, className }: Props) => {
2627
const [openNoteDialog, setOpenNoteDialog] = React.useState(false);
2728

2829
const handleClick = () => {
@@ -39,7 +40,7 @@ const Request = observer(({ isActive, highlight, onClick, store, onResend, maxSt
3940

4041
return (
4142
<><div>
42-
<div className="request__msg-container">
43+
<div className={"request__msg-container " + className} >
4344
<div className="request__msg-header">
4445
<div className="request__msg-time-ms">
4546
{message.protocol !== 'log:' ?
@@ -105,6 +106,7 @@ const Request = observer(({ isActive, highlight, onClick, store, onResend, maxSt
105106
</div>
106107

107108
<div className={`request__msg
109+
${message.protocol === 'log:' ? ' wrap' : ''}
108110
${isActive ? ' active' : ''}
109111
${highlight ? ' highlight' : ''}
110112
${!store.isHttpOrHttps() && !store.isNoResponse() && store.isError() ? ' error' : ''}
@@ -147,7 +149,7 @@ const Request = observer(({ isActive, highlight, onClick, store, onResend, maxSt
147149
displayDataTypes={false}
148150
quotesOnKeys={false} />}
149151
</div>
150-
</div>
152+
</div >
151153
<NoteDialog
152154
message={store}
153155
open={openNoteDialog}

‎client/src/components/SnapshotTabContent.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,7 @@ const SnapshotTabContent = observer(({
170170
onResend={() => handleResend(message)}
171171
vertical={vertical}
172172
isFiltered={isFiltered}
173+
className={message.protocol === 'log:' && matchCount % 2 === 0 ? 'request__msg-even' : ''}
173174
/>);
174175
}
175176
})}

‎package-lock.json‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "allproxy",
3-
"version": "3.29.2",
3+
"version": "3.30.0",
44
"description": "AllProxy: MITM HTTP Debugging Tool.",
55
"keywords": [
66
"proxy",

0 commit comments

Comments
 (0)