Dashboard edit pane interval variable (#105202)

* add interval variable * remove label from query variable button
2025-05-12 08:45:24 -04:00
parent 15be9861d0
commit b2a6174b2c
8 changed files with 34 additions and 13 deletions
@@ -20,6 +20,7 @@ interface IntervalVariableFormProps {
  autoEnabled: boolean;
  autoMinInterval: string;
  autoStepCount: number;
+  inline?: boolean;
 }

 export function IntervalVariableForm({
@@ -31,6 +32,7 @@ export function IntervalVariableForm({
  autoEnabled,
  autoMinInterval,
  autoStepCount,
+  inline = false,
 }: IntervalVariableFormProps) {
  const STEP_OPTIONS = [1, 2, 3, 4, 5, 10, 20, 30, 40, 50, 100, 200, 300, 400, 500].map((count) => ({
    label: `${count}`,
@@ -42,9 +44,11 @@ export function IntervalVariableForm({

  return (
    <>
-      <VariableLegend>
-        <Trans i18nKey="dashboard-scene.interval-variable-form.interval-options">Interval options</Trans>
-      </VariableLegend>
+      {!inline && (
+        <VariableLegend>
+          <Trans i18nKey="dashboard-scene.interval-variable-form.interval-options">Interval options</Trans>
+        </VariableLegend>
+      )}
      <VariableTextField
        defaultValue={intervals}
        name="Values"
@@ -1,7 +1,9 @@
+import { noop } from 'lodash';
 import { ChangeEvent, FormEvent } from 'react';

 import { SelectableValue } from '@grafana/data';
-import { IntervalVariable } from '@grafana/scenes';
+import { IntervalVariable, SceneVariable } from '@grafana/scenes';
+import { OptionsPaneItemDescriptor } from 'app/features/dashboard/components/PanelEditor/OptionsPaneItemDescriptor';
 import {
  getIntervalsFromQueryString,
  getIntervalsQueryFromNewIntervalModel,
@@ -12,9 +14,10 @@ import { IntervalVariableForm } from '../components/IntervalVariableForm';
 interface IntervalVariableEditorProps {
  variable: IntervalVariable;
  onRunQuery: () => void;
+  inline?: boolean;
 }

-export function IntervalVariableEditor({ variable, onRunQuery }: IntervalVariableEditorProps) {
+export function IntervalVariableEditor({ variable, onRunQuery, inline }: IntervalVariableEditorProps) {
  const { intervals, autoStepCount, autoEnabled, autoMinInterval, value } = variable.useState();

  //transform intervals array into string
@@ -55,6 +58,20 @@ export function IntervalVariableEditor({ variable, onRunQuery }: IntervalVariabl
      onAutoEnabledChange={onAutoEnabledChange}
      onAutoMinIntervalChanged={onAutoMinIntervalChanged}
      autoMinInterval={autoMinInterval}
+      inline={inline}
    />
  );
 }
+
+export function getIntervalVariableOptions(variable: SceneVariable): OptionsPaneItemDescriptor[] {
+  if (!(variable instanceof IntervalVariable)) {
+    console.warn('getIntervalVariableOptions: variable is not an IntervalVariable');
+    return [];
+  }
+
+  return [
+    new OptionsPaneItemDescriptor({
+      render: () => <IntervalVariableEditor variable={variable} onRunQuery={noop} inline={true} />,
+    }),
+  ];
+}
@@ -383,7 +383,6 @@ describe('QueryVariableEditor', () => {

    expect(result.length).toBe(1);
    const descriptor = result[0];
-    expect(descriptor.props.title).toBe('Query Editor');

    // Mock the parent property that OptionsPaneItem expects
    descriptor.parent = new OptionsPaneCategoryDescriptor({
@@ -101,7 +101,6 @@ export function getQueryVariableOptions(variable: SceneVariable): OptionsPaneIte

  return [
    new OptionsPaneItemDescriptor({
-      title: t('dashboard-scene.query-variable-form.label-editor', 'Query Editor'),
      render: () => <ModalEditor variable={variable} />,
    }),
  ];
@@ -29,7 +29,7 @@ import { ConstantVariableEditor, getConstantVariableOptions } from './editors/Co
 import { CustomVariableEditor } from './editors/CustomVariableEditor';
 import { DataSourceVariableEditor } from './editors/DataSourceVariableEditor';
 import { GroupByVariableEditor } from './editors/GroupByVariableEditor';
-import { IntervalVariableEditor } from './editors/IntervalVariableEditor';
+import { getIntervalVariableOptions, IntervalVariableEditor } from './editors/IntervalVariableEditor';
 import { getQueryVariableOptions, QueryVariableEditor } from './editors/QueryVariableEditor';
 import { TextBoxVariableEditor, getTextBoxVariableOptions } from './editors/TextBoxVariableEditor';

@@ -70,6 +70,7 @@ export const EDITABLE_VARIABLES: Record<EditableVariableType, EditableVariableCo
    name: 'Interval',
    description: 'Values are timespans, ex 1m, 1h, 1d',
    editor: IntervalVariableEditor,
+    getOptions: getIntervalVariableOptions,
  },
  datasource: {
    name: 'Data source',
@@ -12,7 +12,7 @@ import { OptionsPaneItemOverrides } from './OptionsPaneItemOverrides';
 import { OptionPaneItemOverrideInfo } from './types';

 export interface OptionsPaneItemInfo {
-  title: string;
+  title?: string;
  value?: any;
  description?: string;
  popularRank?: number;
@@ -83,6 +83,10 @@ function OptionsPaneItem({ itemDescriptor, searchQuery }: OptionsPaneItemProps)
 function renderOptionLabel(itemDescriptor: OptionsPaneItemDescriptor, searchQuery?: string): ReactNode {
  const { title, description, overrides, addon } = itemDescriptor.props;

+  if (!title) {
+    return null;
+  }
+
  if (!searchQuery) {
    // Do not render label for categories with only one child
    if (itemDescriptor.parent.props.title === title && !overrides?.length) {
@@ -34,7 +34,7 @@ export class OptionSearchEngine {
      const categoryNameMatch = searchRegex.test(category.props.title);

      for (const item of category.items) {
-        if (searchRegex.test(item.props.title)) {
+        if (searchRegex.test(item.props.title || '')) {
          hits.push({ item: item, rank: 1 });
          continue;
        }
@@ -4247,9 +4247,6 @@
      "query-options": "Query options",
      "selection-options": "Selection options"
    },
-    "query-variable-form": {
-      "label-editor": "Query Editor"
-    },
    "revert-dashboard-modal": {
      "body-restore-version": "Are you sure you want to restore the dashboard to version {{version}}? All unsaved changes will be lost.",
      "title-restore-version": "Restore version"