Small Frontend Fixes/Cleanup

.changeset/gorgeous-cars-wait.md

@@ -0,0 +1,5 @@
+---
+"@hyperdx/app": patch
+---
+
+Fix threshold on alerts not visible, fix sessions page overflow bug

packages/app/src/DBSearchPageAlertModal.tsx

@@ -109,7 +109,6 @@ const AlertForm = ({
   const interval = useWatch({ control, name: 'interval' });
   const groupByValue = useWatch({ control, name: 'groupBy' });
   const threshold = useWatch({ control, name: 'threshold' });
-  const thresholdTypeValue = useWatch({ control, name: 'thresholdType' });
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -202,7 +201,7 @@ const AlertForm = ({
                 interval={interval}
                 groupBy={groupByValue}
                 threshold={threshold}
-                thresholdType={thresholdTypeValue}
+                thresholdType={thresholdType}
               />
             )}
           </Accordion.Panel>

packages/app/src/SessionsPage.tsx

@@ -417,12 +417,7 @@ export default function SessionsPage() {
             return false;
           }}
         >
-          <Flex
-            gap="xs"
-            direction="column"
-            wrap="nowrap"
-            style={{ overflow: 'hidden' }}
-          >
+          <Flex gap="xs" direction="column" wrap="nowrap">
             <Group justify="space-between" gap="xs" wrap="nowrap" flex={1}>
               <SourceSelectControlled
                 control={control}

packages/app/src/TeamPage.tsx

@@ -455,7 +455,6 @@ function ClickhouseSettingForm({
               <SelectControlled
                 control={form.control}
                 name="value"
-                value={useWatch({ control: form.control, name: 'value' })}
                 data={[displayValue(true), displayValue(false)]}
                 size="xs"
                 placeholder="Please select"

packages/app/src/components/Alerts.tsx

@@ -126,9 +126,9 @@ export const getAlertReferenceLines = ({
 }: {
   thresholdType: 'above' | 'below';
   threshold: number;
-}) => (
-  <>
-    {threshold != null && thresholdType === 'below' && (
+}) => {
+  if (threshold != null && thresholdType === 'below') {
+    return (
       <ReferenceArea
         y1={0}
         y2={threshold}
@@ -137,17 +137,21 @@ export const getAlertReferenceLines = ({
         strokeWidth={0}
         fillOpacity={0.05}
       />
-    )}
-    {threshold != null && thresholdType === 'above' && (
+    );
+  }
+  if (threshold != null && thresholdType === 'above') {
+    return (
       <ReferenceArea
         y1={threshold}
         ifOverflow="extendDomain"
         fill="red"
         strokeWidth={0}
         fillOpacity={0.05}
       />
-    )}
-    {threshold != null && (
+    );
+  }
+  if (threshold != null) {
+    return (
       <ReferenceLine
         y={threshold}
         label={
@@ -161,6 +165,7 @@ export const getAlertReferenceLines = ({
         stroke="red"
         strokeDasharray="3 3"
       />
-    )}
-  </>
-);
+    );
+  }
+  return null;
+};