Merge pull request #80 from grafana/missing-props-sent-custom-formatter

Variables: Missing variable props sent to custom variable formatters

Author: torkelo

packages/scenes/src/components/VizPanel/VizPanel.tsx

@@ -16,7 +16,7 @@ import { DeepPartial, SceneLayoutChildState } from '../../core/types';
 import { VizPanelRenderer } from './VizPanelRenderer';
 import { VizPanelMenu } from './VizPanelMenu';
 import { VariableDependencyConfig } from '../../variables/VariableDependencyConfig';
-import { CustomFormatterFn } from '../../variables/interpolation/sceneInterpolator';
+import { VariableCustomFormatterFn } from '../../variables/types';
 
 export interface VizPanelState<TOptions = {}, TFieldConfig = {}> extends SceneLayoutChildState {
   title: string;
@@ -125,7 +125,7 @@ export class VizPanel<TOptions = {}, TFieldConfig = {}> extends SceneObjectBase<
     this.setState({ fieldConfig });
   };
 
-  public interpolate = ((value: string, scoped?: ScopedVars, format?: string | CustomFormatterFn) => {
+  public interpolate = ((value: string, scoped?: ScopedVars, format?: string | VariableCustomFormatterFn) => {
     return sceneGraph.interpolate(this, value, scoped, format);
   }) as InterpolateFunction;
 }

packages/scenes/src/core/sceneGraph.ts

@@ -1,8 +1,8 @@
 import { ScopedVars } from '@grafana/data';
 import { DefaultTimeRange, EmptyDataNode, EmptyVariableSet } from '../variables/interpolation/defaults';
 
-import { CustomFormatterFn, sceneInterpolator } from '../variables/interpolation/sceneInterpolator';
-import { SceneVariables } from '../variables/types';
+import { sceneInterpolator } from '../variables/interpolation/sceneInterpolator';
+import { VariableCustomFormatterFn, SceneVariables } from '../variables/types';
 
 import { SceneDataState, SceneEditor, SceneLayout, SceneObject, SceneTimeRangeLike } from './types';
 import { lookupVariable } from '../variables/lookupVariable';
@@ -92,7 +92,7 @@ export function interpolate(
   sceneObject: SceneObject,
   value: string | undefined | null,
   scopedVars?: ScopedVars,
-  format?: string | CustomFormatterFn
+  format?: string | VariableCustomFormatterFn
 ): string {
   if (value === '' || value == null) {
     return '';

packages/scenes/src/index.ts

@@ -11,7 +11,6 @@ export { SceneDataTransformer } from './querying/SceneDataTransformer';
 export * from './variables/types';
 export { VariableDependencyConfig } from './variables/VariableDependencyConfig';
 export { formatRegistry, FormatRegistryID, type FormatVariable } from './variables/interpolation/formatRegistry';
-export { type CustomFormatterFn } from './variables/interpolation/sceneInterpolator';
 export { VariableValueSelectors } from './variables/components/VariableValueSelectors';
 export { SceneVariableSet } from './variables/sets/SceneVariableSet';
 export { ConstantVariable } from './variables/variants/ConstantVariable';

packages/scenes/src/variables/interpolation/formatRegistry.ts

@@ -19,6 +19,8 @@ export interface FormatVariable {
   state: {
     name: string;
     type: VariableType | string;
+    isMulti?: boolean;
+    includeAll?: boolean;
   };
 
   getValue(fieldPath?: string): VariableValue | undefined | null;

packages/scenes/src/variables/interpolation/sceneInterpolator.test.ts

@@ -167,4 +167,25 @@ describe('sceneInterpolator', () => {
     const scopedVars = { __data: { value: { name: 'Main org' }, text: '' } };
     expect(sceneInterpolator(scene, '${__data.name}', scopedVars)).toBe('Main org');
   });
+
+  it('Can use custom formatter', () => {
+    const scene = new TestScene({
+      $variables: new SceneVariableSet({
+        variables: [
+          new TestVariable({
+            name: 'cluster',
+            value: ['1', '2'],
+            text: ['hello', 'world'],
+            isMulti: true,
+            includeAll: true,
+          }),
+        ],
+      }),
+    });
+
+    const formatter = jest.fn().mockReturnValue('custom');
+
+    expect(sceneInterpolator(scene, '$cluster', undefined, formatter)).toBe('custom');
+    expect(formatter.mock.calls[0][1]).toEqual({ name: 'cluster', type: 'custom', multi: true, includeAll: true });
+  });
 });

packages/scenes/src/variables/interpolation/sceneInterpolator.ts

@@ -1,20 +1,14 @@
 import { ScopedVars } from '@grafana/data';
-import { VariableModel, VariableType } from '@grafana/schema';
+import { VariableType } from '@grafana/schema';
 
 import { SceneObject } from '../../core/types';
-import { VariableValue } from '../types';
+import { VariableCustomFormatterFn, VariableValue } from '../types';
 
 import { getSceneVariableForScopedVar } from './ScopedVarsVariable';
 import { formatRegistry, FormatRegistryID, FormatVariable } from './formatRegistry';
 import { VARIABLE_REGEX } from '../constants';
 import { lookupVariable } from '../lookupVariable';
 
-export type CustomFormatterFn = (
-  value: unknown,
-  legacyVariableModel: Partial<VariableModel>,
-  legacyDefaultFormatter?: CustomFormatterFn
-) => string;
-
 /**
  * This function will try to parse and replace any variable expression found in the target string. The sceneObject will be used as the source of variables. It will
  * use the scene graph and walk up the parent tree until it finds the closest variable.
@@ -26,7 +20,7 @@ export function sceneInterpolator(
   sceneObject: SceneObject,
   target: string | undefined | null,
   scopedVars?: ScopedVars,
-  format?: string | CustomFormatterFn
+  format?: string | VariableCustomFormatterFn
 ): string {
   if (!target) {
     return target ?? '';
@@ -56,7 +50,7 @@ export function sceneInterpolator(
 function formatValue(
   variable: FormatVariable,
   value: VariableValue | undefined | null,
-  formatNameOrFn?: string | CustomFormatterFn
+  formatNameOrFn?: string | VariableCustomFormatterFn
 ): string {
   if (value === null || value === undefined) {
     return '';
@@ -81,6 +75,8 @@ function formatValue(
     return formatNameOrFn(value, {
       name: variable.state.name,
       type: variable.state.type as VariableType,
+      multi: variable.state.isMulti,
+      includeAll: variable.state.includeAll,
     });
   }
 

packages/scenes/src/variables/types.ts

@@ -85,3 +85,19 @@ export interface SceneVariableDependencyConfigLike {
    **/
   variableUpdatesCompleted(changedVariables: Set<SceneVariable>): void;
 }
+
+/**
+ * Used in CustomFormatterFn
+ */
+export interface CustomFormatterVariable {
+  name: string;
+  type: VariableType;
+  multi?: boolean;
+  includeAll?: boolean;
+}
+
+export type VariableCustomFormatterFn = (
+  value: unknown,
+  legacyVariableModel: Partial<CustomFormatterVariable>,
+  legacyDefaultFormatter?: VariableCustomFormatterFn
+) => string;

packages/scenes/src/variables/variants/DataSourceVariable.test.ts

@@ -3,9 +3,9 @@ import { lastValueFrom } from 'rxjs';
 import { DataSourceInstanceSettings, ScopedVars, PluginType } from '@grafana/data';
 
 import { SceneObject } from '../../core/types';
-import { CustomFormatterFn } from '../interpolation/sceneInterpolator';
 
 import { DataSourceVariable } from './DataSourceVariable';
+import { VariableCustomFormatterFn } from '../types';
 
 function getDataSource(name: string, type: string, isDefault = false): DataSourceInstanceSettings {
   return {
@@ -58,7 +58,7 @@ jest.mock('../../core/sceneGraph', () => {
         sceneObject: SceneObject,
         value: string | undefined | null,
         scopedVars?: ScopedVars,
-        format?: string | CustomFormatterFn
+        format?: string | VariableCustomFormatterFn
       ) => {
         return value?.replace('$variable-1', 'slow');
       },