Skip to content

Commit

Permalink
fix: Log viewer json viewer fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
ernestii committed Apr 18, 2024
1 parent ab96e7c commit 7bcf4fa
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 17 deletions.
5 changes: 5 additions & 0 deletions .changeset/grumpy-tools-sin.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@hyperdx/app': patch
---

LogViewer: better JSON parsing and other tweaks
4 changes: 2 additions & 2 deletions packages/app/src/LogSidePanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -1375,7 +1375,7 @@ function PropertySubpanel({
{
normallyExpanded: true,
tabulate: true,
lineWrap: true,
lineWrap: false,
useLegacyViewer: false,
},
);
Expand Down Expand Up @@ -1623,7 +1623,7 @@ function PropertySubpanel({
}}
/>
)}
<Menu width={240}>
<Menu width={240} withinPortal={false}>
<Menu.Target>
<ActionIcon size="md" variant="filled" color="gray">
<i className="bi bi-gear" />
Expand Down
37 changes: 22 additions & 15 deletions packages/app/src/components/HyperJson.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -124,28 +124,35 @@ const Line = React.memo(
// mounting it for potentially hundreds of lines
const { ref, hovered } = useHover<HTMLDivElement>();

const isStringValueJsonLike = React.useMemo(() => {
const isStringValueValidJson = React.useMemo(() => {
if (!isString(value)) return false;
return (
(value.startsWith('{') && value.endsWith('}')) ||
(value.startsWith('[') && value.endsWith(']'))
);
try {
if (
(value.startsWith('{') && value.endsWith('}')) ||
(value.startsWith('[') && value.endsWith(']'))
) {
const parsed = JSON.parse(value);
return !!parsed;
}
} catch (e) {
return false;
}
}, [value]);

const [isExpanded, setIsExpanded] = React.useState(
normallyExpanded && !isStringValueJsonLike,
normallyExpanded && !isStringValueValidJson,
);

React.useEffect(() => {
setIsExpanded(normallyExpanded && !isStringValueJsonLike);
}, [isStringValueJsonLike, normallyExpanded]);
setIsExpanded(normallyExpanded && !isStringValueValidJson);
}, [isStringValueValidJson, normallyExpanded]);

const isExpandable = React.useMemo(
() =>
(isPlainObject(value) && Object.keys(value).length > 0) ||
(isArray(value) && value.length > 0) ||
isStringValueJsonLike,
[isStringValueJsonLike, value],
isStringValueValidJson,
[isStringValueValidJson, value],
);

const handleToggle = React.useCallback(() => {
Expand All @@ -154,15 +161,15 @@ const Line = React.memo(
}, [isExpandable]);

const expandedData = React.useMemo(() => {
if (isStringValueJsonLike) {
if (isStringValueValidJson) {
try {
return JSON.parse(value);
} catch (e) {
return null;
}
}
return value;
}, [isStringValueJsonLike, value]);
}, [isStringValueValidJson, value]);

const nestedLevel = parentKeyPath.length;
const keyPath = React.useMemo(
Expand Down Expand Up @@ -198,13 +205,13 @@ const Line = React.memo(
</div>
</div>
<div className={styles.valueContainer}>
{isStringValueJsonLike ? (
{isStringValueValidJson ? (
isExpanded ? (
<div className={styles.object}>{'{}'} Parsed JSON</div>
) : (
<>
<ValueRenderer value={value} />
<div className={styles.jsonBtn}>Looks like JSON. Parse?</div>
<div className={styles.jsonBtn}>JSON</div>
</>
)
) : (
Expand All @@ -219,7 +226,7 @@ const Line = React.memo(
<TreeNode
data={expandedData}
keyPath={keyPath}
disableMenu={isStringValueJsonLike}
disableMenu={isStringValueValidJson}
/>
)}
</>
Expand Down

0 comments on commit 7bcf4fa

Please sign in to comment.