From 0253616aa542e301a91fba255ec9e2d7c2138339 Mon Sep 17 00:00:00 2001 From: ktx-vaidehi <134508096+ktx-vaidehi@users.noreply.github.com> Date: Tue, 8 Jul 2025 16:53:11 +0530 Subject: [PATCH] feat: dashboard query editor vertical scroll (#7453) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### **PR Type** Enhancement ___ ### **Description** - Enable dashboard query bar by default - Refactor AddPanel layout with scrollable containers - Simplify overflow styles; remove outdated splitters - Adjust component height calculations ___ ### **Changes walkthrough** 📝
Relevant files
Enhancement
DashboardQueryEditor.vue
Simplify query editor bar styling                                               
web/src/components/dashboards/addPanel/DashboardQueryEditor.vue
  • Removed query bar toggle icon wrapper
  • Commented out cursor pointer on .sql-bar
    		• +1/-14   
    AddPanel.vue
    Refactor AddPanel layout and scrolling                                     
    web/src/views/Dashboards/addPanel/AddPanel.vue
  • Replaced nested q-splitter with scrollable div wrappers
  • Moved DashboardQueryBuilder and VariablesValueSelector
  • Simplified outdated chart notification styling
  • Updated wrappers heights for renderer and editor
    		• +143/-215
    Configuration changes
    useDashboardPanel.ts
    Enable query bar by default                                                           
    web/src/composables/useDashboardPanel.ts - Set default `showQueryBar` to `true`
    		+1/-1     
    ___ >
    Need help?
  • Type /help how to ... in the comments thread for any questions about PR-Agent usage.
  • Check out the documentation for more information.
    • --------- Co-authored-by: ktx-akshay --- .../dashboards/custom-charts.spec.js | 116 +++--- .../dashboards/dashboard-filter.spec.js | 4 +- .../dashboards/dashboard2.spec.js | 2 +- .../addPanel/DashboardQueryEditor.vue | 15 +- web/src/composables/useDashboardPanel.ts | 2 +- .../views/Dashboards/addPanel/AddPanel.vue | 362 +++++++----------- 6 files changed, 213 insertions(+), 288 deletions(-) diff --git a/tests/ui-testing/playwright-tests/dashboards/custom-charts.spec.js b/tests/ui-testing/playwright-tests/dashboards/custom-charts.spec.js index e8954a7f68..e3acbcd068 100644 --- a/tests/ui-testing/playwright-tests/dashboards/custom-charts.spec.js +++ b/tests/ui-testing/playwright-tests/dashboards/custom-charts.spec.js @@ -2,11 +2,10 @@ import { test, expect } from "../baseFixtures"; import path from "path"; import fs from "fs"; import logsdata from "../../../test-data/logs_data.json"; -import { DashboardPage } from '../../pages/dashboardPage'; +import { DashboardPage } from "../../pages/dashboardPage"; // Function to handle login async function login(page) { - await page.goto(process.env["ZO_BASE_URL"]); if (await page.getByText("Login as internal user").isVisible()) { await page.getByText("Login as internal user").click(); @@ -14,8 +13,12 @@ async function login(page) { console.log("ZO_BASE_URL", process.env["ZO_BASE_URL"]); await page.waitForTimeout(1000); - await page.locator('[data-cy="login-user-id"]').fill(process.env["ZO_ROOT_USER_EMAIL"]); - await page.locator('[data-cy="login-password"]').fill(process.env["ZO_ROOT_USER_PASSWORD"]); + await page + .locator('[data-cy="login-user-id"]') + .fill(process.env["ZO_ROOT_USER_EMAIL"]); + await page + .locator('[data-cy="login-password"]') + .fill(process.env["ZO_ROOT_USER_PASSWORD"]); await page.locator('[data-cy="login-sign-in"]').click(); await page.waitForTimeout(4000); await page.goto(process.env["ZO_BASE_URL"]); @@ -29,23 +32,29 @@ async function ingestion(page) { ).toString("base64"); const headers = { - "Authorization": `Basic ${basicAuthCredentials}`, + Authorization: `Basic ${basicAuthCredentials}`, "Content-Type": "application/json", }; - const response = await page.evaluate(async ({ url, headers, orgId, streamName, logsdata }) => { - const fetchResponse = await fetch(`${url}/api/${orgId}/${streamName}/_json`, { - method: "POST", + const response = await page.evaluate( + async ({ url, headers, orgId, streamName, logsdata }) => { + const fetchResponse = await fetch( + `${url}/api/${orgId}/${streamName}/_json`, + { + method: "POST", + headers: headers, + body: JSON.stringify(logsdata), + } + ); + return await fetchResponse.json(); + }, + { + url: process.env.INGESTION_URL, headers: headers, - body: JSON.stringify(logsdata) - }); - return await fetchResponse.json(); - }, { - url: process.env.INGESTION_URL, - headers: headers, - orgId: orgId, - streamName: streamName, - logsdata: logsdata - }); + orgId: orgId, + streamName: streamName, + logsdata: logsdata, + } + ); console.log(response); } @@ -59,27 +68,23 @@ function readJsonFile(filename) { return fs.readFileSync(filePath, "utf8"); } -test.describe("Sanity Tests", () => { let dashboardPage +test.describe("Sanity Tests", () => { + let dashboardPage; let pictorialJSON, lineJSON; test.beforeEach(async ({ page }) => { - dashboardPage = new DashboardPage(page); - -}); + }); test.beforeAll(() => { - const jsonString = readJsonFile("pictorial.json"); - pictorialJSON = jsonString + pictorialJSON = jsonString; lineJSON = readJsonFile("line.json"); }); test.beforeEach(async ({ page }) => { - await login(page); - - + await page.waitForTimeout(1000); await ingestion(page); }); @@ -90,38 +95,43 @@ test.describe("Sanity Tests", () => { let dashboardPage return; } await dashboardPage.addCustomChart(); - // Type the content with raw modifier to bypass autocomplete - await page.keyboard.insertText(pictorialJSON); - - await page.waitForTimeout(1000); - await page.locator('[data-test="dashboard-panel-error-bar-icon"]').click(); - await page.locator('[data-test="dashboard-panel-query-editor"]').getByRole("textbox").fill('select * from "e2e_automate"'); - await page.waitForTimeout(2000); - await page.locator('[data-test="dashboard-apply"]').click(); - await page.waitForTimeout(3000); - await expect(page.getByText("Unsafe code detected: Access to 'document' is not allowed")).toBeVisible(); + // Type the content with raw modifier to bypass autocomplete + await page.keyboard.insertText(pictorialJSON); - -}); + await page.waitForTimeout(1000); + // await page.locator('[data-test="dashboard-panel-error-bar-icon"]').click(); + await page + .locator('[data-test="dashboard-panel-query-editor"]') + .getByRole("textbox") + .fill('select * from "e2e_automate"'); + await page.waitForTimeout(2000); + await page.locator('[data-test="dashboard-apply"]').click(); + await page.waitForTimeout(3000); + await expect( + page.getByText( + "Unsafe code detected: Access to 'document' is not allowed" + ) + ).toBeVisible(); + }); -test("Add line JSON in Monaco Editor", async ({ page }) => { + test("Add line JSON in Monaco Editor", async ({ page }) => { if (!lineJSON) { console.error("Skipping test: pictorial.json not found"); return; } await dashboardPage.addCustomChart(); - // Type the content with raw modifier to bypass autocomplete - await page.keyboard.insertText(lineJSON); - - await page.waitForTimeout(1000); - await page.locator('[data-test="dashboard-panel-error-bar-icon"]').click(); - await page.locator('[data-test="dashboard-panel-query-editor"]').getByRole("textbox").fill('select * from "e2e_automate"'); - await page.waitForTimeout(3000); - await page.locator('[data-test="dashboard-apply"]').click(); - await page.waitForTimeout(3000); - // await expect(page.getByText("Unsafe code detected: Access to 'document' is not allowed")).toBeVisible(); - - -}); + // Type the content with raw modifier to bypass autocomplete + await page.keyboard.insertText(lineJSON); + await page.waitForTimeout(1000); + // await page.locator('[data-test="dashboard-panel-error-bar-icon"]').click(); + await page + .locator('[data-test="dashboard-panel-query-editor"]') + .getByRole("textbox") + .fill('select * from "e2e_automate"'); + await page.waitForTimeout(3000); + await page.locator('[data-test="dashboard-apply"]').click(); + await page.waitForTimeout(3000); + // await expect(page.getByText("Unsafe code detected: Access to 'document' is not allowed")).toBeVisible(); + }); }); diff --git a/tests/ui-testing/playwright-tests/dashboards/dashboard-filter.spec.js b/tests/ui-testing/playwright-tests/dashboards/dashboard-filter.spec.js index ed0db58152..e743ee55c9 100644 --- a/tests/ui-testing/playwright-tests/dashboards/dashboard-filter.spec.js +++ b/tests/ui-testing/playwright-tests/dashboards/dashboard-filter.spec.js @@ -347,7 +347,7 @@ test.describe("dashboard filter testcases", () => { await page.getByLabel("Value").fill("$variablename"); await page.locator('[data-test="dashboard-apply"]').click(); - await page.getByText("arrow_rightQueryAutoPromQLCustom SQL").click(); + // await page.getByText("arrow_rightQueryAutoPromQLCustom SQL").click(); await expect(page.getByText("'$variablename'").first()).toBeVisible(); await page .locator('[data-test="dashboard-panel-data-view-query-inspector-btn"]') @@ -596,7 +596,7 @@ test.describe("dashboard filter testcases", () => { await page.locator('[data-test="dashboard-apply"]').click(); await page.locator('[data-test="dashboard-apply"]').click(); - await page.getByText("arrow_rightQueryAutoPromQLCustom SQL").click(); + // await page.getByText("arrow_rightQueryAutoPromQLCustom SQL").click(); await expect(page.getByText("'$variablename'").first()).toBeVisible(); await page .locator('[data-test="dashboard-panel-data-view-query-inspector-btn"]') diff --git a/tests/ui-testing/playwright-tests/dashboards/dashboard2.spec.js b/tests/ui-testing/playwright-tests/dashboards/dashboard2.spec.js index 81b44eae15..6f6161b588 100644 --- a/tests/ui-testing/playwright-tests/dashboards/dashboard2.spec.js +++ b/tests/ui-testing/playwright-tests/dashboards/dashboard2.spec.js @@ -515,7 +515,7 @@ test.describe("dashboard UI testcases", () => { await page.getByRole("button", { name: "9" }).last().click(); await page.getByRole("button", { name: "16" }).last().click(); - await page.locator('[data-test="chart-renderer"] div').click(); + // await page.locator('[data-test="chart-renderer"] div').click(); await page.locator('[data-test="dashboard-apply"]').click(); await page.reload(); diff --git a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue index c7ea720e57..7f1e37dfc0 100644 --- a/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue +++ b/web/src/components/dashboards/addPanel/DashboardQueryEditor.vue @@ -25,19 +25,6 @@ along with this program. If not, see . style="display: flex; flex-direction: row; align-items: center" data-test="dashboard-query-data" > -
    - -
    ({ layout: { splitter: 20, querySplitter: 41, - showQueryBar: false, + showQueryBar: true, isConfigPanelOpen: false, currentQueryIndex: 0, vrlFunctionToggle: false, diff --git a/web/src/views/Dashboards/addPanel/AddPanel.vue b/web/src/views/Dashboards/addPanel/AddPanel.vue index bfd5814d35..7d69e6645b 100644 --- a/web/src/views/Dashboards/addPanel/AddPanel.vue +++ b/web/src/views/Dashboards/addPanel/AddPanel.vue @@ -180,138 +180,99 @@ along with this program. If not, see . />