fix: Chart form metrics bug (#394)

hyperdxio · May 22, 2024 · 4176710 · 4176710
1 parent 9c45109
commit 4176710
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 12 deletions.
diff --git a/.changeset/afraid-apples-mate.md b/.changeset/afraid-apples-mate.md
@@ -0,0 +1,5 @@
+---
+'@hyperdx/app': patch
+---
+
+autofocus on field select after setting a non-count aggfn
diff --git a/packages/app/src/ChartUtils.tsx b/packages/app/src/ChartUtils.tsx
@@ -489,6 +489,7 @@ export function MetricNameSelect({
   return (
     <MSelect
       disabled={isLoading || isError}
+      autoFocus={!value}
       variant="filled"
       placeholder={
         isLoading
@@ -517,16 +518,20 @@ export function FieldSelect({
   setValue,
   types,
   className,
+  autoFocus,
 }: {
   value: string | undefined | null;
   setValue: (value: string | undefined) => void;
   types: ('number' | 'string' | 'bool')[];
   className?: string;
+  autoFocus?: boolean;
 }) {
   const propertyOptions = usePropertyOptions(types);
 
   return (
     <AsyncSelect
+      autoFocus={autoFocus}
+      placeholder="Select a field..."
       loadOptions={input => {
         return Promise.resolve([
           { value: undefined, label: 'None' },
@@ -660,7 +665,12 @@ export function ChartSeriesForm({
         </div>
         {table === 'logs' && aggFn != 'count' && aggFn != 'count_distinct' ? (
           <div className="ms-3 flex-grow-1">
-            <FieldSelect value={field} setValue={setField} types={['number']} />
+            <FieldSelect
+              value={field}
+              setValue={setField}
+              types={['number']}
+              autoFocus={!field}
+            />
           </div>
         ) : null}
         {table === 'logs' && aggFn != 'count' && aggFn == 'count_distinct' ? (
@@ -669,6 +679,7 @@ export function ChartSeriesForm({
               value={field}
               setValue={setField}
               types={['string', 'number', 'bool']}
+              autoFocus={!field}
             />
           </div>
         ) : null}
@@ -996,6 +1007,7 @@ export function ChartSeriesFormCompact({
               value={field}
               setValue={setField}
               types={['number']}
+              autoFocus={!field}
             />
           </div>
         ) : null}
@@ -1006,6 +1018,7 @@ export function ChartSeriesFormCompact({
               value={field}
               setValue={setField}
               types={['string', 'number', 'bool']}
+              autoFocus={!field}
             />
           </div>
         ) : null}

diff --git a/packages/app/src/api.ts b/packages/app/src/api.ts
@@ -227,18 +227,35 @@ const api = {
     },
     options?: UseQueryOptions<any, Error>,
   ) {
-    const enrichedSeries = series.map(s => {
-      if (s.type != 'search' && s.type != 'markdown' && s.table === 'metrics') {
-        const [metricName, metricDataType] = (s.field ?? '').split(' - ');
-        return {
-          ...s,
-          field: metricName,
-          metricDataType,
-        };
-      }
+    const enrichedSeries = series
+      .filter(s => {
+        // Skip time series without field
+        if (s.type === 'time') {
+          if (s.table === 'metrics' && !s.field) {
+            return false;
+          }
+          if (s.table === 'logs' && !s.field && s.aggFn !== 'count') {
+            return false;
+          }
+        }
+        return true;
+      })
+      .map(s => {
+        if (
+          s.type != 'search' &&
+          s.type != 'markdown' &&
+          s.table === 'metrics'
+        ) {
+          const [metricName, metricDataType] = (s.field ?? '').split(' - ');
+          return {
+            ...s,
+            field: metricName,
+            metricDataType,
+          };
+        }
+        return s;
+      });
 
-      return s;
-    });
     const startTime = startDate.getTime();
     const endTime = endDate.getTime();
     return useQuery<
@@ -276,6 +293,7 @@ const api = {
           },
         }).json(),
       retry: 1,
+      enabled: enrichedSeries.length > 0,
       ...options,
     });
   },