Skip to content

V3 32 0: JSON Log Viewer - date, level, app name and message configuration #716

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
davechri merged 6 commits into from
Oct 16, 2023
Merged

V3 32 0: JSON Log Viewer - date, level, app name and message configuration #716

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
7f912d4
Log Viewer import multiple line json message
davechri Oct 12, 2023
f3f4fda
create multiple tab when importing large logs
davechri Oct 12, 2023
d4a8224
v3-32-0: Log Viewer simple way to defined date, level...
davechri Oct 15, 2023
266b5f0
3.32.0
davechri Oct 15, 2023
19a6d60
Add ALLPROXY_APP environment variable
davechri Oct 15, 2023
d4f5c15
Update README links
davechri Oct 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,13 @@ MITM debugging proxy with a web GUI to view and modify all of the HTTP and HTTPS

### Install

> Mac: **[allproxy.dmg](https://github.com/allproxy/allproxy/releases/download/v3.31.0/allproxy-3.31.2-x64.dmg)**
> Mac: **[allproxy.dmg](https://github.com/allproxy/allproxy/releases/download/v3.32.0/allproxy-3.32.0-x64.dmg)**

> RedHat: **[allproxy.rpm](https://github.com/allproxy/allproxy/releases/download/v3.31.0/allproxy-3.31.2-1.x86_64.rpm)**
> RedHat: **[allproxy.rpm](https://github.com/allproxy/allproxy/releases/download/v3.32.0/allproxy-3.32.0-1.x86_64.rpm)**

> Ubuntu: **[allproxy.deb](https://github.com/allproxy/allproxy/releases/download/v3.31.0/allproxy_3.31.2_amd64.deb)**
> Ubuntu: **[allproxy.deb](https://github.com/allproxy/allproxy/releases/download/v3.32.0/allproxy_3.32.0_amd64.deb)**

> Windows: **[Setup.exe](https://github.com/allproxy/allproxy/releases/download/v3.31.0/allproxy-3.31.2.Setup.exe)**
> Windows: **[Setup.exe](https://github.com/allproxy/allproxy/releases/download/v3.32.0/allproxy-3.32.0.Setup.exe)**

> Other install options:
> 1. Install NPM package: **npm install -g allproxy**
Expand Down
34 changes: 21 additions & 13 deletions client/src/components/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -381,23 +381,31 @@ const Header = observer(({ socketStore, messageQueueStore, snapshotStore, filter
setShowHelp(false);
await jsonLogStore.init();
jsonLogStore.updateScriptFunc();
snapshotStore.setUpdating(true);
setTimeout(() => {
updateJSONRequestLabels();
snapshotStore.setUpdating(false);
});
}} />
<DarkModeDialog open={showDarkModeDialog} onClose={() => {
setShowDarkModeDialog(false);
}} />
<JSONFieldsModal
open={showJSONFieldsModal}
onClose={() => {
setShowJSONFieldsModal(false);
snapshotStore.setUpdating(true);
setTimeout(() => {
updateJSONRequestLabels();
snapshotStore.setUpdating(false);
});
}}
store={jsonLogStore}
jsonFields={jsonFields}
/>
{showJSONFieldsModal &&
<JSONFieldsModal
open={showJSONFieldsModal}
onClose={() => {
setShowJSONFieldsModal(false);
snapshotStore.setUpdating(true);
setTimeout(() => {
updateJSONRequestLabels();
snapshotStore.setUpdating(false);
});
}}
store={jsonLogStore}
jsonFields={jsonFields}
selectTab='jsonFields'
/>
}
<NotesModal
open={showNotesModal}
onClose={() => {
Expand Down
112 changes: 49 additions & 63 deletions client/src/components/HelpDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,8 @@ import { jsonLogStore, updateJSONRequestLabels } from '../store/JSONLogStore';
import JSONFieldsModal, { getJSONFields } from './JSONFieldsModal';
import { snapshotStore } from '../store/SnapshotStore';
import { logViewerStore } from '../store/LogViewerStore';
import JSONSimpleFields from './JSONSimpleFields';
import JSONFieldsMethods from './JSONFieldsMethod';

type Props = {
open: boolean,
Expand Down Expand Up @@ -74,6 +76,7 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
);
}

jsonLogStore.init();
return (
<><Dialog
maxWidth={'lg'}
Expand Down Expand Up @@ -262,7 +265,7 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
<h5>Annotating JSON Fields</h5>
Selected JSON fields can be annotated with labels.
<p></p>
<div style={{ marginRight: '1rem' }}>
<div style={{ margin: '0 1rem' }}>
<button className="btn btn-lg btn-primary"
style={{ marginBottom: "1rem" }}
onClick={async () => {
Expand All @@ -278,59 +281,11 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
Annotate JSON Fields
</button>
</div>
<h5>Extract Date, Level, App Name and Message</h5>
A custom script can be defined to extract the date, level, app name and message from the JSON log data.
<p></p>
<div style={{ marginRight: '1rem' }}>
<button className="btn btn-lg btn-success"
style={{ marginBottom: "1rem" }}
onClick={async () => {
await jsonLogStore.init();
setJsonFields(getJSONFields());
setShowJSONFieldsModal(true);
}}>
<div className='fa fa-calendar'
style={{
marginRight: '.5rem'
}}
/>
Extract Date...
</button>
</div>
<p></p>
<h5>Example log message:</h5>
<pre>
<div>{'{'}</div>
<div> "date": "2023-09-12T18:03:33.496Z"</div>
<div> "level": "info"</div>
<div> "pod_name": "my-pod-name"</div>
<div> "message": "This is a test message."</div>
<div>{'}'}</div>
</pre>
<p></p>
<h5>Example extract function:</h5>
<pre>
<div>// Function called to extract <b>date</b>, <b>level</b>, <b>app name</b> and <b>message</b></div>
<div>//</div>
<div>// @param <b>preJSONString</b>: string - optional non-JSON string proceeding JSON object</div>
<div>// @param <b>jsonObject</b>: {'{}'} - JSON log data</div>
<div>// @returns {'{'}<b>date</b>: Date, <b>level</b>: string, <b>appName</b>: string, <b>message</b>: string{'}'}</div>
<div>//</div>
<div>// <b>appName</b> is the pod name, process ID... </div>
<div>//</div>
<div>const myFunction = function(preJSONString, jsonObject) {'{'}</div>
<div> let date = new Date(jsonObject.date);</div>
<div> let level = jsonObject.level;</div>
<div> let appName = jsonObject.pod_name;</div>
<div> let message = jsonObject.message;</div>
<div> let additionalJSON = {'{}'};</div>
<div> return {'{date, level, appName, message, additionalJSON}'};</div>
<div>{'}'}</div>
</pre>
<h5>Import JSON Log</h5>
Click this button to import a JSON log file.
<p></p>
<div style={{ marginRight: '1rem' }}>
<div style={{ margin: '0 1rem' }}>
<button className="btn btn-lg btn-primary"
style={{ marginBottom: "1rem" }}
onClick={() => {
Expand All @@ -345,6 +300,34 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
Import JSON Log
</button>
</div>
<p></p>
<h5>Date, Level, App Name and Message</h5>
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.
<div style={{ margin: '0 1rem' }}>
<JSONFieldsMethods />
{jsonLogStore.getMethod() === 'simple' ?
<JSONSimpleFields />
:
<>
Write your own JavaScript to extract the date, level, app name and message fields.
<p></p>
<button className="btn btn-lg btn-success"
style={{ marginBottom: "1rem" }}
onClick={async () => {
await jsonLogStore.init();
setJsonFields(getJSONFields());
setShowJSONFieldsModal(true);
}}>
<div className='fa fa-calendar'
style={{
marginRight: '.5rem'
}}
/>
Edit JavaScript
</button>
</>
}
</div>
</TabPanel>
</TabContext>
</div>
Expand All @@ -359,19 +342,22 @@ const HelpDialog = observer(({ open, onClose }: Props) => {
onClose={() => setShowSessionModal(false)}
store={sessionStore}
/>
<JSONFieldsModal
open={showJSONFieldsModal}
onClose={() => {
setShowJSONFieldsModal(false);
snapshotStore.setUpdating(true);
setTimeout(() => {
updateJSONRequestLabels();
snapshotStore.setUpdating(false);
});
}}
store={jsonLogStore}
jsonFields={jsonFields}
/>
{showJSONFieldsModal &&
<JSONFieldsModal
open={showJSONFieldsModal}
onClose={() => {
setShowJSONFieldsModal(false);
snapshotStore.setUpdating(true);
setTimeout(() => {
updateJSONRequestLabels();
snapshotStore.setUpdating(false);
});
}}
store={jsonLogStore}
jsonFields={jsonFields}
selectTab='scripts'
/>
}
</>
);
});
Expand Down
27 changes: 26 additions & 1 deletion client/src/components/ImportJSONFileDialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,32 @@ const ImportJSONFileDialog = observer(({ open, onClose }: Props) => {
}
jsonClear();
} else if (pastedJSON.length > 0) {
snapshotStore.importSnapshot(tabName, importJSONFile(tabName, pastedJSON, []));
const flatten = function (json: object) {
let line = JSON.stringify(json);
line = line.replace(/\\n/g, '');
line = line.replace(/\\r/g, '');
line = line.replace(/\\"/g, '');
return line;
};

let jsonLines = pastedJSON;
try {
const json = JSON.parse(pastedJSON);
jsonLines = flatten(json);
for (const field in json) {
const value = json[field];
if (Array.isArray(value)) {
for (const obj of value) {
if (typeof value === 'object') {
jsonLines += "\n" + flatten(obj);
}
}
}
}
} catch (e) {
console.log(e);
}
snapshotStore.importSnapshot(tabName, importJSONFile(tabName, jsonLines, []));
setPastedJSON('');
}
setTabName('');
Expand Down
26 changes: 26 additions & 0 deletions client/src/components/JSONFieldsMethod.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import { FormControlLabel, Radio, RadioGroup } from "@material-ui/core";
import { observer } from "mobx-react-lite";
import { jsonLogStore } from "../store/JSONLogStore";

type Props = {};
const JSONFieldsMethods = observer(({ }: Props) => {
return (
<>
<p></p>
<b>Select Method:</b>
<RadioGroup
row
aria-labelledby="json-log-mode-radio"
defaultValue='simple'
name="json-log-mode-radio"
value={jsonLogStore.getMethod()}
onChange={(e) => jsonLogStore.setMethod(e.target.value as 'simple' | 'advanced')}
>
<FormControlLabel value="simple" control={<Radio />} label="Simple" />
<FormControlLabel value="advanced" control={<Radio />} label="Advanced" />
</RadioGroup>
</>
);
});

export default JSONFieldsMethods;
Loading