Skip to content

Commit 9711c4f

Browse files
davechridavechri
authored
Merge pull request #716 from allproxy/v3-32-0
V3 32 0: JSON Log Viewer - date, level, app name and message configuration
2 parents baa3779 + d4f5c15 commit 9711c4f

14 files changed

Lines changed: 362 additions & 139 deletions

‎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.31.0/allproxy-3.31.2-x64.dmg)**
11+
> Mac: **[allproxy.dmg](https://github.com/allproxy/allproxy/releases/download/v3.32.0/allproxy-3.32.0-x64.dmg)**
1212
13-
> RedHat: **[allproxy.rpm](https://github.com/allproxy/allproxy/releases/download/v3.31.0/allproxy-3.31.2-1.x86_64.rpm)**
13+
> RedHat: **[allproxy.rpm](https://github.com/allproxy/allproxy/releases/download/v3.32.0/allproxy-3.32.0-1.x86_64.rpm)**
1414
15-
> Ubuntu: **[allproxy.deb](https://github.com/allproxy/allproxy/releases/download/v3.31.0/allproxy_3.31.2_amd64.deb)**
15+
> Ubuntu: **[allproxy.deb](https://github.com/allproxy/allproxy/releases/download/v3.32.0/allproxy_3.32.0_amd64.deb)**
1616
17-
> Windows: **[Setup.exe](https://github.com/allproxy/allproxy/releases/download/v3.31.0/allproxy-3.31.2.Setup.exe)**
17+
> Windows: **[Setup.exe](https://github.com/allproxy/allproxy/releases/download/v3.32.0/allproxy-3.32.0.Setup.exe)**
1818
1919
> Other install options:
2020
> 1. Install NPM package: **npm install -g allproxy**

‎client/src/components/Header.tsx‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -381,23 +381,31 @@ const Header = observer(({ socketStore, messageQueueStore, snapshotStore, filter
381381
setShowHelp(false);
382382
await jsonLogStore.init();
383383
jsonLogStore.updateScriptFunc();
384+
snapshotStore.setUpdating(true);
385+
setTimeout(() => {
386+
updateJSONRequestLabels();
387+
snapshotStore.setUpdating(false);
388+
});
384389
}} />
385390
<DarkModeDialog open={showDarkModeDialog} onClose={() => {
386391
setShowDarkModeDialog(false);
387392
}} />
388-
<JSONFieldsModal
389-
open={showJSONFieldsModal}
390-
onClose={() => {
391-
setShowJSONFieldsModal(false);
392-
snapshotStore.setUpdating(true);
393-
setTimeout(() => {
394-
updateJSONRequestLabels();
395-
snapshotStore.setUpdating(false);
396-
});
397-
}}
398-
store={jsonLogStore}
399-
jsonFields={jsonFields}
400-
/>
393+
{showJSONFieldsModal &&
394+
<JSONFieldsModal
395+
open={showJSONFieldsModal}
396+
onClose={() => {
397+
setShowJSONFieldsModal(false);
398+
snapshotStore.setUpdating(true);
399+
setTimeout(() => {
400+
updateJSONRequestLabels();
401+
snapshotStore.setUpdating(false);
402+
});
403+
}}
404+
store={jsonLogStore}
405+
jsonFields={jsonFields}
406+
selectTab='jsonFields'
407+
/>
408+
}
401409
<NotesModal
402410
open={showNotesModal}
403411
onClose={() => {

‎client/src/components/HelpDialog.tsx‎

Lines changed: 49 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import { jsonLogStore, updateJSONRequestLabels } from '../store/JSONLogStore';
1313
import JSONFieldsModal, { getJSONFields } from './JSONFieldsModal';
1414
import { snapshotStore } from '../store/SnapshotStore';
1515
import { logViewerStore } from '../store/LogViewerStore';
16+
import JSONSimpleFields from './JSONSimpleFields';
17+
import JSONFieldsMethods from './JSONFieldsMethod';
1618

1719
type Props = {
1820
open: boolean,
@@ -74,6 +76,7 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
7476
);
7577
}
7678

79+
jsonLogStore.init();
7780
return (
7881
<><Dialog
7982
maxWidth={'lg'}
@@ -262,7 +265,7 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
262265
<h5>Annotating JSON Fields</h5>
263266
Selected JSON fields can be annotated with labels.
264267
<p></p>
265-
<div style={{ marginRight: '1rem' }}>
268+
<div style={{ margin: '0 1rem' }}>
266269
<button className="btn btn-lg btn-primary"
267270
style={{ marginBottom: "1rem" }}
268271
onClick={async () => {
@@ -278,59 +281,11 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
278281
Annotate JSON Fields
279282
</button>
280283
</div>
281-
<h5>Extract Date, Level, App Name and Message</h5>
282-
A custom script can be defined to extract the date, level, app name and message from the JSON log data.
283284
<p></p>
284-
<div style={{ marginRight: '1rem' }}>
285-
<button className="btn btn-lg btn-success"
286-
style={{ marginBottom: "1rem" }}
287-
onClick={async () => {
288-
await jsonLogStore.init();
289-
setJsonFields(getJSONFields());
290-
setShowJSONFieldsModal(true);
291-
}}>
292-
<div className='fa fa-calendar'
293-
style={{
294-
marginRight: '.5rem'
295-
}}
296-
/>
297-
Extract Date...
298-
</button>
299-
</div>
300-
<p></p>
301-
<h5>Example log message:</h5>
302-
<pre>
303-
<div>{'{'}</div>
304-
<div> "date": "2023-09-12T18:03:33.496Z"</div>
305-
<div> "level": "info"</div>
306-
<div> "pod_name": "my-pod-name"</div>
307-
<div> "message": "This is a test message."</div>
308-
<div>{'}'}</div>
309-
</pre>
310-
<p></p>
311-
<h5>Example extract function:</h5>
312-
<pre>
313-
<div>// Function called to extract <b>date</b>, <b>level</b>, <b>app name</b> and <b>message</b></div>
314-
<div>//</div>
315-
<div>// @param <b>preJSONString</b>: string - optional non-JSON string proceeding JSON object</div>
316-
<div>// @param <b>jsonObject</b>: {'{}'} - JSON log data</div>
317-
<div>// @returns {'{'}<b>date</b>: Date, <b>level</b>: string, <b>appName</b>: string, <b>message</b>: string{'}'}</div>
318-
<div>//</div>
319-
<div>// <b>appName</b> is the pod name, process ID... </div>
320-
<div>//</div>
321-
<div>const myFunction = function(preJSONString, jsonObject) {'{'}</div>
322-
<div> let date = new Date(jsonObject.date);</div>
323-
<div> let level = jsonObject.level;</div>
324-
<div> let appName = jsonObject.pod_name;</div>
325-
<div> let message = jsonObject.message;</div>
326-
<div> let additionalJSON = {'{}'};</div>
327-
<div> return {'{date, level, appName, message, additionalJSON}'};</div>
328-
<div>{'}'}</div>
329-
</pre>
330285
<h5>Import JSON Log</h5>
331286
Click this button to import a JSON log file.
332287
<p></p>
333-
<div style={{ marginRight: '1rem' }}>
288+
<div style={{ margin: '0 1rem' }}>
334289
<button className="btn btn-lg btn-primary"
335290
style={{ marginBottom: "1rem" }}
336291
onClick={() => {
@@ -345,6 +300,34 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
345300
Import JSON Log
346301
</button>
347302
</div>
303+
<p></p>
304+
<h5>Date, Level, App Name and Message</h5>
305+
Use the <b>Simple</b> or <b>Advanced</b> method to identify the date, level, app name and message fields in the JSON log entry.
306+
<div style={{ margin: '0 1rem' }}>
307+
<JSONFieldsMethods />
308+
{jsonLogStore.getMethod() === 'simple' ?
309+
<JSONSimpleFields />
310+
:
311+
<>
312+
Write your own JavaScript to extract the date, level, app name and message fields.
313+
<p></p>
314+
<button className="btn btn-lg btn-success"
315+
style={{ marginBottom: "1rem" }}
316+
onClick={async () => {
317+
await jsonLogStore.init();
318+
setJsonFields(getJSONFields());
319+
setShowJSONFieldsModal(true);
320+
}}>
321+
<div className='fa fa-calendar'
322+
style={{
323+
marginRight: '.5rem'
324+
}}
325+
/>
326+
Edit JavaScript
327+
</button>
328+
</>
329+
}
330+
</div>
348331
</TabPanel>
349332
</TabContext>
350333
</div>
@@ -359,19 +342,22 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
359342
onClose={() => setShowSessionModal(false)}
360343
store={sessionStore}
361344
/>
362-
<JSONFieldsModal
363-
open={showJSONFieldsModal}
364-
onClose={() => {
365-
setShowJSONFieldsModal(false);
366-
snapshotStore.setUpdating(true);
367-
setTimeout(() => {
368-
updateJSONRequestLabels();
369-
snapshotStore.setUpdating(false);
370-
});
371-
}}
372-
store={jsonLogStore}
373-
jsonFields={jsonFields}
374-
/>
345+
{showJSONFieldsModal &&
346+
<JSONFieldsModal
347+
open={showJSONFieldsModal}
348+
onClose={() => {
349+
setShowJSONFieldsModal(false);
350+
snapshotStore.setUpdating(true);
351+
setTimeout(() => {
352+
updateJSONRequestLabels();
353+
snapshotStore.setUpdating(false);
354+
});
355+
}}
356+
store={jsonLogStore}
357+
jsonFields={jsonFields}
358+
selectTab='scripts'
359+
/>
360+
}
375361
</>
376362
);
377363
});

‎client/src/components/ImportJSONFileDialog.tsx‎

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,32 @@ const ImportJSONFileDialog = observer(({ open, onClose }: Props) => {
2929
}
3030
jsonClear();
3131
} else if (pastedJSON.length > 0) {
32-
snapshotStore.importSnapshot(tabName, importJSONFile(tabName, pastedJSON, []));
32+
const flatten = function (json: object) {
33+
let line = JSON.stringify(json);
34+
line = line.replace(/\\n/g, '');
35+
line = line.replace(/\\r/g, '');
36+
line = line.replace(/\\"/g, '');
37+
return line;
38+
};
39+
40+
let jsonLines = pastedJSON;
41+
try {
42+
const json = JSON.parse(pastedJSON);
43+
jsonLines = flatten(json);
44+
for (const field in json) {
45+
const value = json[field];
46+
if (Array.isArray(value)) {
47+
for (const obj of value) {
48+
if (typeof value === 'object') {
49+
jsonLines += "\n" + flatten(obj);
50+
}
51+
}
52+
}
53+
}
54+
} catch (e) {
55+
console.log(e);
56+
}
57+
snapshotStore.importSnapshot(tabName, importJSONFile(tabName, jsonLines, []));
3358
setPastedJSON('');
3459
}
3560
setTabName('');

‎client/src/components/JSONFieldsMethod.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import { FormControlLabel, Radio, RadioGroup } from "@material-ui/core";
2+
import { observer } from "mobx-react-lite";
3+
import { jsonLogStore } from "../store/JSONLogStore";
4+
5+
type Props = {};
6+
const JSONFieldsMethods = observer(({ }: Props) => {
7+
return (
8+
<>
9+
<p></p>
10+
<b>Select Method:</b>
11+
<RadioGroup
12+
row
13+
aria-labelledby="json-log-mode-radio"
14+
defaultValue='simple'
15+
name="json-log-mode-radio"
16+
value={jsonLogStore.getMethod()}
17+
onChange={(e) => jsonLogStore.setMethod(e.target.value as 'simple' | 'advanced')}
18+
>
19+
<FormControlLabel value="simple" control={<Radio />} label="Simple" />
20+
<FormControlLabel value="advanced" control={<Radio />} label="Advanced" />
21+
</RadioGroup>
22+
</>
23+
);
24+
});
25+
26+
export default JSONFieldsMethods;

0 commit comments

Comments
 (0)