Variables: Fixes issue when variable value was null (#985)

Co-authored-by: Dominik Prokop <[email protected]>
grafana · Dec 3, 2024 · 3b6cfee · 3b6cfee
1 parent a7291d1
commit 3b6cfee
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 6 deletions.
diff --git a/packages/scenes/src/variables/components/VariableValueSelect.test.tsx b/packages/scenes/src/variables/components/VariableValueSelect.test.tsx
@@ -80,6 +80,7 @@ describe('VariableValueSelect', () => {
     expect(variableValueSelectElement).toBeInTheDocument();
     expect(inputElement).toBeDisabled();
   });
+
   it('should render VariableValueSelect component with disabled value', async () => {
     const model = new CustomVariable({
       name: 'test',

diff --git a/packages/scenes/src/variables/variants/query/toMetricFindValues.ts b/packages/scenes/src/variables/variants/query/toMetricFindValues.ts
@@ -68,8 +68,8 @@ export function toMetricFindValues(): OperatorFunction<PanelData, MetricFindValu
           for (let index = 0; index < frame.length; index++) {
             const expandable = expandableIndex !== -1 ? frame.fields[expandableIndex].values.get(index) : undefined;
             const string = frame.fields[stringIndex].values.get(index);
-            const text = textIndex !== -1 ? frame.fields[textIndex].values.get(index) : null;
-            const value = valueIndex !== -1 ? frame.fields[valueIndex].values.get(index) : null;
+            const text = textIndex !== -1 ? frame.fields[textIndex].values.get(index) : '';
+            const value = valueIndex !== -1 ? frame.fields[valueIndex].values.get(index) : '';
 
             if (valueIndex === -1 && textIndex === -1) {
               metrics.push({ text: string, value: string, expandable });

diff --git a/packages/scenes/src/variables/variants/query/utils.test.ts b/packages/scenes/src/variables/variants/query/utils.test.ts
@@ -0,0 +1,9 @@
+import { VariableSort } from '@grafana/data';
+import { metricNamesToVariableValues } from './utils';
+
+describe('When null values are returned', () => {
+  it('Should translated to empty strings', async () => {
+    const values = metricNamesToVariableValues('', VariableSort.disabled, [{ text: null, value: null }]);
+    expect(values).toEqual([{ label: '', value: '' }]);
+  });
+});
diff --git a/packages/scenes/src/variables/variants/query/utils.ts b/packages/scenes/src/variables/variants/query/utils.ts
@@ -4,7 +4,7 @@ import { stringToJsRegex, VariableSort } from '@grafana/data';
 
 import { VariableValueOption } from '../../types';
 
-export const metricNamesToVariableValues = (variableRegEx: string, sort: VariableSort, metricNames: any[]) => {
+export function metricNamesToVariableValues(variableRegEx: string, sort: VariableSort, metricNames: any[]) {
   let regex;
   let options: VariableValueOption[] = [];
 
@@ -14,8 +14,8 @@ export const metricNamesToVariableValues = (variableRegEx: string, sort: Variabl
 
   for (let i = 0; i < metricNames.length; i++) {
     const item = metricNames[i];
-    let text = item.text === undefined || item.text === null ? item.value : item.text;
-    let value = item.value === undefined || item.value === null ? item.text : item.value;
+    let text = item.text ?? item.value ?? '';
+    let value = item.value ?? item.text ?? '';
 
     if (isNumber(value)) {
       value = value.toString();
@@ -56,7 +56,7 @@ export const metricNamesToVariableValues = (variableRegEx: string, sort: Variabl
 
   options = uniqBy(options, 'value');
   return sortVariableValues(options, sort);
-};
+}
 
 const getAllMatches = (str: string, regex: RegExp): RegExpExecArray[] => {
   const results: RegExpExecArray[] = [];