User defined variables incorrectly rendered

It fixes an issue with variable names on Grafana 11.3, where these
variables were rendered as undefined.

Github issue #278

CMK-20263

Author: lpetrora

src/ui/components.tsx

@@ -83,9 +83,10 @@ export const CheckMkGenericAsyncSelect = function <Value extends string | (strin
         const data = await autocompleter(inputValue);
         if (showVariables !== false) {
           for (const variable of getTemplateSrv().getVariables()) {
+            const variableId = variable?.id || variable.name;
             data.splice(0, 0, {
-              value: `$${variable.id}` as Value,
-              label: `$${variable.id}`,
+              value: `$${variableId}` as Value,
+              label: `$${variableId}`,
               isGrafanaVariable: true,
             });
           }

tests/e2e/constants.ts

@@ -40,6 +40,7 @@ export const GRAFANA_SELECTORS = {
     HOST_LABEL_FILTER_FIELD_ID: 'input_host_label',
     REMOVE_FILTER: (f: string) => `button[data-test-id="cmk-oac-minus-button-${f}"]`,
 
+    AGGREGATION_FIELD_ID: 'input_Aggregation',
     HOST_NAME_FILTER_FIELD_ID: 'input_Hostname',
     SERVICE_FILTER_FIELD_ID: 'input_Service',
     HOSTNAME_REGEX_FILTER_FIELD: 'input[data-test-id="host_name_regex-filter-input"]',
@@ -63,6 +64,13 @@ export const GRAFANA_SELECTORS = {
     APPLY_CHANGES_AND_SAVE_BUTTON: 'button[data-testid="data-testid Save dashboard button"]',
     SAVE_DASHBOARD_TITLE: 'input[aria-label="Save dashboard title field"]',
     SAVE_BUTTON: 'button[data-testid="data-testid Save dashboard drawer button"]',
+
+    SETTINGS_BUTTON: 'button[data-testid="data-testid Dashboard settings"]',
+    VARIABLES_TAB: 'a[data-testid="data-testid Tab Variables"]',
+    ADD_VARIABLE_BUTTON: 'button[data-testid="data-testid Call to action button Add variable"]',
+    VARIABLE_NAME_INPUT: 'input[data-testid="data-testid Variable editor Form Name field"]',
+    BACK_TO_DASHBOARD_BUTTON: 'button[data-testid="data-testid Back to dashboard button"]',
+    ADD_VISUALIZATION_BUTTON: 'button[data-testid="data-testid Create new panel button"]',
   },
 };
 

tests/e2e/models/DashboardPage.ts

@@ -146,5 +146,33 @@ export class DashboardPage {
   async refresGraph() {
     await this.page.locator(GRAFANA_SELECTORS.DASHBOARD.REFRESH_GRAPH_BUTTON).click();
   }
+
+  async goToNewDashboardSettings() {
+    await this.page.goto(current_config.grafanaUrl + 'dashboard/new');
+    await this.page.locator(GRAFANA_SELECTORS.DASHBOARD.SETTINGS_BUTTON).click();
+  }
+
+  async addNewVariable(variableName: string) {
+    await this.page.locator(GRAFANA_SELECTORS.DASHBOARD.VARIABLES_TAB).click();
+    await this.page.locator(GRAFANA_SELECTORS.DASHBOARD.ADD_VARIABLE_BUTTON).click();
+    await this.page.locator(GRAFANA_SELECTORS.DASHBOARD.VARIABLE_NAME_INPUT).fill(variableName);
+  }
+
+  async goBackToDashboard() {
+    await this.page.locator(GRAFANA_SELECTORS.DASHBOARD.BACK_TO_DASHBOARD_BUTTON).click();
+  }
+
+  async addVisualization() {
+    await this.page.locator(GRAFANA_SELECTORS.DASHBOARD.ADD_VISUALIZATION_BUTTON).click();
+  }
+
+  async assertAggregationVariableExists(variableName: string) {
+    const fieldSelector = `input[id="${GRAFANA_SELECTORS.DASHBOARD.AGGREGATION_FIELD_ID}"]`;
+    await this.page.locator(fieldSelector).fill(variableName);
+    await this.expectSpinners(false);
+    await this.page.keyboard.press('Enter');
+    await this.expectSpinners(false);
+    await expect(this.page.getByText(variableName).first()).toBeVisible();
+  }
 }
 export default DashboardPage;

tests/e2e/tests/e2e.test.ts

@@ -270,3 +270,18 @@ test.describe('E2E tests', () => {
     });
   });
 });
+
+test.describe('General tests', () => {
+  test.slow();
+  test('Variables get rendered', async ({ page }) => {
+    const customVariableName = 'MyVariable';
+    const dashboardPage = new DashboardPage(page);
+    await dashboardPage.goToNewDashboardSettings();
+    await dashboardPage.addNewVariable(customVariableName);
+    await dashboardPage.saveDashboard();
+    await dashboardPage.goBackToDashboard();
+    await dashboardPage.addVisualization();
+    await dashboardPage.selectDatasource(CMK_EDITION.CEE);
+    await dashboardPage.assertAggregationVariableExists(customVariableName);
+  });
+});