From 0434f191fe9637d67468f08961651244daa0fd6f Mon Sep 17 00:00:00 2001
From: Fabrizio <135109076+fabrizio-grafana@users.noreply.github.com>
Date: Wed, 24 Jan 2024 16:21:36 +0100
Subject: [PATCH] Tempo: Fix NaN value using fallback (#81150)

---
 .../tempo/traceql/TempoQueryBuilderOptions.tsx  | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx b/public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx
index bf8c5aa4ba5..98658945e54 100644
--- a/public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx
+++ b/public/app/plugins/datasource/tempo/traceql/TempoQueryBuilderOptions.tsx
@@ -13,6 +13,19 @@ interface Props {
   query: Partial<TempoQuery> & TempoQuery;
 }
 
+/**
+ * Parse a string value to integer. If the conversion fails, for example because we are prosessing an empty value for
+ * a field, return a fallback (default) value.
+ *
+ * @param val the value to be parsed to an integer
+ * @param fallback the fallback value
+ * @returns the converted value or the fallback value if the conversion fails
+ */
+const parseIntWithFallback = (val: string, fallback: number) => {
+  const parsed = parseInt(val, 10);
+  return isNaN(parsed) ? fallback : parsed;
+};
+
 export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query }) => {
   if (!query.hasOwnProperty('limit')) {
     query.limit = DEFAULT_LIMIT;
@@ -23,10 +36,10 @@ export const TempoQueryBuilderOptions = React.memo<Props>(({ onChange, query })
   }
 
   const onLimitChange = (e: React.FormEvent<HTMLInputElement>) => {
-    onChange({ ...query, limit: parseInt(e.currentTarget.value, 10) });
+    onChange({ ...query, limit: parseIntWithFallback(e.currentTarget.value, DEFAULT_LIMIT) });
   };
   const onSpssChange = (e: React.FormEvent<HTMLInputElement>) => {
-    onChange({ ...query, spss: parseInt(e.currentTarget.value, 10) });
+    onChange({ ...query, spss: parseIntWithFallback(e.currentTarget.value, DEFAULT_SPSS) });
   };
   const onTableTypeChange = (val: SearchTableType) => {
     onChange({ ...query, tableType: val });