Merge branch 'main' into ei/mantine-upd

hyperdxio · Apr 19, 2024 · a48bfe4 · a48bfe4
2 parents 664be0f + 14ae58b
commit a48bfe4
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 24 deletions.
diff --git a/.changeset/grumpy-tools-sin.md b/.changeset/grumpy-tools-sin.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+LogViewer: better JSON parsing and other tweaks
diff --git a/packages/app/src/DashboardPage.tsx b/packages/app/src/DashboardPage.tsx
@@ -227,7 +227,7 @@ const Tile = forwardRef(
 
     return (
       <div
-        className={`bg-hdx-dark p-3 ${className} d-flex flex-column ${
+        className={`bg-hdx-dark p-3 ${className} d-flex flex-column dashboard-chart ${
           isHighlighed && 'dashboard-chart-highlighted'
         }`}
         id={`chart-${chart.id}`}
@@ -320,7 +320,7 @@ const Tile = forwardRef(
           </div>
         ) : (
           <div
-            className="fs-7 text-muted flex-grow-1 overflow-hidden"
+            className="fs-7 text-muted flex-grow-1"
             onMouseDown={e => e.stopPropagation()}
           >
             <ErrorBoundary

diff --git a/packages/app/src/HDXMultiSeriesTimeChart.tsx b/packages/app/src/HDXMultiSeriesTimeChart.tsx
@@ -52,7 +52,7 @@ const HDXLineChartTooltip = withErrorBoundary(
               .sort((a: any, b: any) => b.value - a.value)
               .map((p: any) => (
                 <div key={p.dataKey} style={{ color: p.color }}>
-                  {truncateMiddle(p.name ?? p.dataKey, 70)}:{' '}
+                  {truncateMiddle(p.name ?? p.dataKey, 70)}:&nbsp;
                   {numberFormat ? formatNumber(p.value, numberFormat) : p.value}
                 </div>
               ))}

diff --git a/packages/app/src/LogSidePanel.tsx b/packages/app/src/LogSidePanel.tsx
@@ -1375,7 +1375,7 @@ function PropertySubpanel({
     {
       normallyExpanded: true,
       tabulate: true,
-      lineWrap: true,
+      lineWrap: false,
       useLegacyViewer: false,
     },
   );
@@ -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" />

diff --git a/packages/app/src/components/HyperJson.tsx b/packages/app/src/components/HyperJson.tsx
@@ -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(() => {
@@ -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(
@@ -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}>Expand JSON</div>
                 </>
               )
             ) : (
@@ -219,7 +226,7 @@ const Line = React.memo(
           <TreeNode
             data={expandedData}
             keyPath={keyPath}
-            disableMenu={isStringValueJsonLike}
+            disableMenu={isStringValueValidJson}
           />
         )}
       </>

diff --git a/packages/app/styles/app.scss b/packages/app/styles/app.scss
@@ -778,6 +778,16 @@ div.react-datepicker {
   border: 1px solid rgba(255, 166, 0, 0.5);
 }
 
+.dashboard-chart:hover {
+  z-index: 10000;
+}
+
+.recharts-tooltip-wrapper {
+  &:focus-visible {
+    outline: none;
+  }
+}
+
 @keyframes highlightedChart {
   0% {
     background-color: rgba(255, 166, 0, 0.5);
@@ -797,7 +807,3 @@ div.react-datepicker {
     color: white;
   }
 }
-
-// html {
-//   filter: invert(1) hue-rotate(180deg);
-// }