Skip to content
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

Add JSON Folding Support in Logs #1724

Merged
merged 2 commits into from
Aug 24, 2023
Merged

Add JSON Folding Support in Logs #1724

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d773daf
Add JSON Folding Support in Logs
prathamesh-mutkure Aug 23, 2023
b501f0f
JSON Tree Auto Expand
prathamesh-mutkure Aug 24, 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
3 changes: 0 additions & 3 deletions .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,6 @@ build
coverage
packages/plexus/src/LayoutManager/layout.worker*js*

# Ignore forked file
packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/jsonMarkup.js

# Ignore generated files
packages/jaeger-ui/index.d.ts
packages/plexus/dist
Expand Down
1 change: 1 addition & 0 deletions packages/jaeger-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,7 @@
"react-helmet": "^6.1.0",
"react-icons": "^4.10.1",
"react-is": "^18.2.0",
"react-json-view-lite": "^0.9.8",
"react-redux": "^5.0.6",
"react-router-dom": "4.3.1",
"react-router-redux": "5.0.0-alpha.8",
Expand Down
36 changes: 24 additions & 12 deletions ...ages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/KeyValuesTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,11 @@
// See the License for the specific language governing permissions and
// limitations under the License.

/* eslint-disable import/no-extraneous-dependencies */
import * as React from 'react';
import { Dropdown, Menu } from 'antd';
import { ExportOutlined, ProfileOutlined } from '@ant-design/icons';
import { jsonMarkup } from './jsonMarkup';
import { JsonView, allExpanded, defaultStyles } from 'react-json-view-lite';

import CopyIcon from '../../../common/CopyIcon';

Expand Down Expand Up @@ -57,15 +58,6 @@ const stringMarkup = (value: string) => (
</div>
);

function _jsonMarkup(value: any) {
const markup = { __html: jsonMarkup(value) };

return (
// eslint-disable-next-line react/no-danger
<div dangerouslySetInnerHTML={markup} />
);
}

function formatValue(key: string, value: any) {
let content;
let parsed = value;
Expand All @@ -79,7 +71,26 @@ function formatValue(key: string, value: any) {
} else if (Array.isArray(parsed) && shouldDisplayAsStringList(key)) {
content = stringListMarkup(parsed);
} else {
content = _jsonMarkup(parsed);
content = (
<JsonView
data={parsed}
shouldInitiallyExpand={allExpanded}
Copy link
Member

@yurishkuro yurishkuro Aug 23, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could this be conditional on the size of the output, e.g. if the JSON object has more than 10 keys then don't start in expanded form.

Also, please post a screenshot of how it looks in the collapsed at the root form.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here's how it looks when collapsed at the root

Screenshot 2023-08-24 at 12 55 08 PM

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The JSON tree will now only expand if it has 10 or less keys, nested objects will remain collapsed otherwise

style={{
...defaultStyles,
container: 'json-markup',
label: 'json-markup-key',
stringValue: 'json-markup-string',
numberValue: 'json-markup-number',
booleanValue: 'json-markup-bool',
nullValue: 'json-markup-null',
undefinedValue: 'json-markup-undefined',
expander: 'json-markup-expander',
basicChildStyle: 'json-markup-child',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This doesn't look like a desirable outcome:

image

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

please elaborate

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I made #2168

punctuation: 'json-markup-puncuation',
otherValue: 'json-markup-other',
}}
/>
);
}

return <div className="ub-inline-block">{content}</div>;
Expand Down Expand Up @@ -114,6 +125,7 @@ type KeyValuesTableProps = {

export default function KeyValuesTable(props: KeyValuesTableProps) {
const { data, linksGetter } = props;

return (
<div className="KeyValueTable u-simple-scrollbars">
<table className="u-width-100">
Expand All @@ -122,7 +134,7 @@ export default function KeyValuesTable(props: KeyValuesTableProps) {
const jsonTable = formatValue(row.key, row.value);
const links = linksGetter ? linksGetter(data, i) : null;
let valueMarkup;
if (links && links.length === 1) {
if (links?.length === 1) {
valueMarkup = (
<div>
<LinkValue href={links[0].url} title={links[0].text}>
Expand Down
53 changes: 34 additions & 19 deletions ...onents/TracePage/TraceTimelineViewer/SpanDetail/__snapshots__/KeyValuesTable.test.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,27 +4,42 @@ exports[`<KeyValuesTable> renders the expected text for each span value 1`] = `
<div
className="ub-inline-block"
>
<div
dangerouslySetInnerHTML={
<JsonView
data={
Object {
"__html": "<div class=\\"json-markup\\">{
<span class=\\"json-markup-key\\">\\"hello\\":</span> <span class=\\"json-markup-string\\">\\"world\\"</span>,
<span class=\\"json-markup-key\\">\\"&lt;xss&gt;\\":</span> <span class=\\"json-markup-string\\">\\"safe\\"</span>,
<span class=\\"json-markup-key\\">\\"link\\":</span> <span class=\\"json-markup-string\\">\\"<a href=\\"https://example.com/\\">https://example.com/</a>\\"</span>,
<span class=\\"json-markup-key\\">\\"xss_link\\":</span> <span class=\\"json-markup-string\\">\\"https://example.com with \\"quotes\\"\\"</span>,
<span class=\\"json-markup-key\\">\\"boolean\\":</span> <span class=\\"json-markup-bool\\">true</span>,
<span class=\\"json-markup-key\\">\\"number\\":</span> <span class=\\"json-markup-number\\">42</span>,
<span class=\\"json-markup-key\\">\\"null\\":</span> <span class=\\"json-markup-null\\">null</span>,
<span class=\\"json-markup-key\\">\\"array\\":</span> [
<span class=\\"json-markup-string\\">\\"x\\"</span>,
<span class=\\"json-markup-string\\">\\"y\\"</span>,
<span class=\\"json-markup-string\\">\\"z\\"</span>
],
<span class=\\"json-markup-key\\">\\"object\\":</span> {
<span class=\\"json-markup-key\\">\\"a\\":</span> <span class=\\"json-markup-string\\">\\"b\\"</span>,
<span class=\\"json-markup-key\\">\\"x\\":</span> <span class=\\"json-markup-string\\">\\"y\\"</span>
"<xss>": "safe",
"array": Array [
"x",
"y",
"z",
],
"boolean": true,
"hello": "world",
"link": "https://example.com",
"null": null,
"number": 42,
"object": Object {
"a": "b",
"x": "y",
},
"xss_link": "https://example.com with \\"quotes\\"",
}
}
}</div>",
shouldInitiallyExpand={[Function]}
style={
Object {
"basicChildStyle": "json-markup-child",
"booleanValue": "json-markup-bool",
"container": "json-markup",
"expander": "json-markup-expander",
"label": "json-markup-key",
"nullValue": "json-markup-null",
"numberValue": "json-markup-number",
"otherValue": "json-markup-other",
"pointer": "_1MFti",
"punctuation": "json-markup-puncuation",
"stringValue": "json-markup-string",
"undefinedValue": "json-markup-undefined",
}
}
/>
Expand Down
113 changes: 0 additions & 113 deletions packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/SpanDetail/jsonMarkup.js
View file
Open in desktop

This file was deleted.

34 changes: 33 additions & 1 deletion packages/jaeger-ui/src/components/TracePage/TraceTimelineViewer/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,21 +22,53 @@ limitations under the License.
line-height: 17px;
font-size: 13px;
font-family: monospace;

white-space: pre-wrap;
white-space: -moz-pre-wrap;
white-space: -pre-wrap;
white-space: -o-pre-wrap;

word-break: break-all;
word-wrap: break-word;
}

.json-markup-key {
font-weight: bold;
margin-right: 0.5rem;
}

.json-markup-bool {
color: firebrick;
}

.json-markup-string {
color: teal;
}
.json-markup-null {

.json-markup-null,
.json-markup-undefined {
color: gray;
}

.json-markup-number {
color: blue;
}

.json-markup-other {
color: lightgrey;
}

.json-markup-expander {
font-size: 1.2em;
margin-right: 5px;
user-select: none;
}

.json-markup-child {
margin: 0.25rem 2.5rem;
padding: 0;
}

.json-markup-puncuation {
font-weight: bold;
}
1 change: 0 additions & 1 deletion packages/jaeger-ui/tsconfig.lint.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@
"src/components/SearchTracePage/SearchResults/ScatterPlot.jsx",
"src/components/SearchTracePage/SearchResults/index.markers.js",
"src/components/SearchTracePage/SearchResults/ResultItem.markers.js",
"src/components/TracePage/TraceTimelineViewer/SpanDetail/jsonMarkup.js",
"src/middlewares/index.js",
"src/model/order-by.js",
"src/propTypes/dependencies.js",
Expand Down
5 changes: 5 additions & 0 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10506,6 +10506,11 @@ react-is@^17.0.0, react-is@^17.0.1, react-is@^17.0.2:
resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==

react-json-view-lite@^0.9.8:
version "0.9.8"
resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-0.9.8.tgz#d3d91bc16d62ef774a7b5c4ad95ccaaa623362d6"
integrity sha512-4D0UgQ5SjanNi2KzgEsEKOb9kj0L9HQz/3IshwIZN5reZsSU62t6sp8c+vskV42lXjGQCi7qGfoXIpNRsON7LA==

react-lazy-load@^3.0.13:
version "3.1.14"
resolved "https://registry.yarnpkg.com/react-lazy-load/-/react-lazy-load-3.1.14.tgz#536047d295f578614540a5b417b70b1155f36d9a"
Expand Down