From fe75f6347b3a1e0707e3a9ca6b456736949ed53c Mon Sep 17 00:00:00 2001 From: Vikrant Gupta <54737045+Vikrant2520@users.noreply.github.com> Date: Thu, 23 Nov 2023 01:05:15 +0530 Subject: [PATCH 1/6] feat: setup end to end test framework for playwright (#4003) * feat: setup end to end test framework for playwright * fix: remove github workflow --- .gitignore | 10 ++++++++- e2e/package.json | 14 ++++++++++++ e2e/playwright.config.ts | 33 ++++++++++++++++++++++++++++ e2e/tests/login.spec.ts | 33 ++++++++++++++++++++++++++++ e2e/yarn.lock | 46 ++++++++++++++++++++++++++++++++++++++++ 5 files changed, 135 insertions(+), 1 deletion(-) create mode 100644 e2e/package.json create mode 100644 e2e/playwright.config.ts create mode 100644 e2e/tests/login.spec.ts create mode 100644 e2e/yarn.lock diff --git a/.gitignore b/.gitignore index 829e51d9d1..14176321bf 100644 --- a/.gitignore +++ b/.gitignore @@ -37,7 +37,7 @@ frontend/src/constants/env.ts **/locust-scripts/__pycache__/ **/__debug_bin -frontend/.env +.env pkg/query-service/signoz.db pkg/query-service/tests/test-deploy/data/ @@ -53,3 +53,11 @@ ee/query-service/tests/test-deploy/data/ bin/ */query-service/queries.active + +# e2e + +e2e/node_modules/ +e2e/test-results/ +e2e/playwright-report/ +e2e/blob-report/ +e2e/playwright/.cache/ \ No newline at end of file diff --git a/e2e/package.json b/e2e/package.json new file mode 100644 index 0000000000..b0d1f6f754 --- /dev/null +++ b/e2e/package.json @@ -0,0 +1,14 @@ +{ + "name": "e2e", + "version": "1.0.0", + "main": "index.js", + "license": "MIT", + "devDependencies": { + "@playwright/test": "^1.22.0", + "@types/node": "^20.9.2" + }, + "scripts": {}, + "dependencies": { + "dotenv": "8.2.0" + } +} diff --git a/e2e/playwright.config.ts b/e2e/playwright.config.ts new file mode 100644 index 0000000000..f6a780717f --- /dev/null +++ b/e2e/playwright.config.ts @@ -0,0 +1,33 @@ +import { defineConfig, devices } from "@playwright/test"; +import dotenv from "dotenv"; + +dotenv.config(); + +export default defineConfig({ + testDir: "./tests", + + fullyParallel: true, + + forbidOnly: !!process.env.CI, + + name: "Signoz E2E", + + retries: process.env.CI ? 2 : 0, + + reporter: process.env.CI ? "github" : "list", + + preserveOutput: "always", + + updateSnapshots: "all", + + quiet: false, + + testMatch: ["**/*.spec.ts"], + + use: { + trace: "on-first-retry", + + baseURL: + process.env.PLAYWRIGHT_TEST_BASE_URL || "https://stagingapp.signoz.io/", + }, +}); diff --git a/e2e/tests/login.spec.ts b/e2e/tests/login.spec.ts new file mode 100644 index 0000000000..8bdd775446 --- /dev/null +++ b/e2e/tests/login.spec.ts @@ -0,0 +1,33 @@ +import { test, expect } from "@playwright/test"; +import ROUTES from "../../frontend/src/constants/routes"; +import dotenv from "dotenv"; + +dotenv.config(); + +test("E2E Login Test", async ({ page }) => { + await Promise.all([page.goto("/"), page.waitForRequest("**/version")]); + + const signup = "Monitor your applications. Find what is causing issues."; + + const el = await page.locator(`text=${signup}`); + + expect(el).toBeVisible(); + + await page + .locator("id=loginEmail") + .type( + process.env.PLAYWRIGHT_USERNAME ? process.env.PLAYWRIGHT_USERNAME : "" + ); + + await page.getByText("Next").click(); + + await page + .locator('input[id="currentPassword"]') + .fill( + process.env.PLAYWRIGHT_PASSWORD ? process.env.PLAYWRIGHT_PASSWORD : "" + ); + + await page.locator('button[data-attr="signup"]').click(); + + await expect(page).toHaveURL(ROUTES.APPLICATION); +}); diff --git a/e2e/yarn.lock b/e2e/yarn.lock new file mode 100644 index 0000000000..1fd28ee9e6 --- /dev/null +++ b/e2e/yarn.lock @@ -0,0 +1,46 @@ +# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY. +# yarn lockfile v1 + + +"@playwright/test@^1.22.0": + version "1.40.0" + resolved "https://registry.yarnpkg.com/@playwright/test/-/test-1.40.0.tgz#d06c506977dd7863aa16e07f2136351ecc1be6ed" + integrity sha512-PdW+kn4eV99iP5gxWNSDQCbhMaDVej+RXL5xr6t04nbKLCBwYtA046t7ofoczHOm8u6c+45hpDKQVZqtqwkeQg== + dependencies: + playwright "1.40.0" + +"@types/node@^20.9.2": + version "20.9.2" + resolved "https://registry.yarnpkg.com/@types/node/-/node-20.9.2.tgz#002815c8e87fe0c9369121c78b52e800fadc0ac6" + integrity sha512-WHZXKFCEyIUJzAwh3NyyTHYSR35SevJ6mZ1nWwJafKtiQbqRTIKSRcw3Ma3acqgsent3RRDqeVwpHntMk+9irg== + dependencies: + undici-types "~5.26.4" + +dotenv@8.2.0: + version "8.2.0" + resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a" + integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw== + +fsevents@2.3.2: + version "2.3.2" + resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" + integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== + +playwright-core@1.40.0: + version "1.40.0" + resolved "https://registry.yarnpkg.com/playwright-core/-/playwright-core-1.40.0.tgz#82f61e5504cb3097803b6f8bbd98190dd34bdf14" + integrity sha512-fvKewVJpGeca8t0ipM56jkVSU6Eo0RmFvQ/MaCQNDYm+sdvKkMBBWTE1FdeMqIdumRaXXjZChWHvIzCGM/tA/Q== + +playwright@1.40.0: + version "1.40.0" + resolved "https://registry.yarnpkg.com/playwright/-/playwright-1.40.0.tgz#2a1824b9fe5c4fe52ed53db9ea68003543a99df0" + integrity sha512-gyHAgQjiDf1m34Xpwzaqb76KgfzYrhK7iih+2IzcOCoZWr/8ZqmdBw+t0RU85ZmfJMgtgAiNtBQ/KS2325INXw== + dependencies: + playwright-core "1.40.0" + optionalDependencies: + fsevents "2.3.2" + +undici-types@~5.26.4: + version "5.26.5" + resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617" + integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA== From e7f9c3981bae5f31df862059b593509271465c06 Mon Sep 17 00:00:00 2001 From: Yunus M Date: Thu, 23 Nov 2023 14:10:34 +0530 Subject: [PATCH 2/6] feat: show dashboard in full screen (#4040) * fix: show dashboard in full screen * fix: update label and remove border from grid in fullscreen mode --- frontend/package.json | 1 + frontend/public/locales/en/dashboard.json | 1 + .../GridCardLayout/GridCardLayout.styles.scss | 7 ++ .../GridCardLayout/GridCardLayout.tsx | 92 +++++++++++-------- frontend/yarn.lock | 12 +++ 5 files changed, 75 insertions(+), 38 deletions(-) create mode 100644 frontend/src/container/GridCardLayout/GridCardLayout.styles.scss diff --git a/frontend/package.json b/frontend/package.json index 0c79c47b1d..25036d24fe 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -82,6 +82,7 @@ "react-drag-listview": "2.0.0", "react-error-boundary": "4.0.11", "react-force-graph": "^1.43.0", + "react-full-screen": "1.1.1", "react-grid-layout": "^1.3.4", "react-helmet-async": "1.3.0", "react-i18next": "^11.16.1", diff --git a/frontend/public/locales/en/dashboard.json b/frontend/public/locales/en/dashboard.json index 7c4b894e76..5602ec5592 100644 --- a/frontend/public/locales/en/dashboard.json +++ b/frontend/public/locales/en/dashboard.json @@ -17,6 +17,7 @@ "layout_saved_successfully": "Layout saved successfully", "add_panel": "Add Panel", "save_layout": "Save Layout", + "full_view": "Full Screen View", "variable_updated_successfully": "Variable updated successfully", "error_while_updating_variable": "Error while updating variable", "dashboard_has_been_updated": "Dashboard has been updated", diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss new file mode 100644 index 0000000000..08de391e4c --- /dev/null +++ b/frontend/src/container/GridCardLayout/GridCardLayout.styles.scss @@ -0,0 +1,7 @@ +.fullscreen-grid-container { + overflow: auto; + + .react-grid-layout { + border: none !important; + } +} diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx index e3a346ef82..19d7244f5e 100644 --- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx +++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx @@ -1,3 +1,5 @@ +import './GridCardLayout.styles.scss'; + import { PlusOutlined, SaveFilled } from '@ant-design/icons'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import { PANEL_TYPES } from 'constants/queryBuilder'; @@ -5,7 +7,9 @@ import { useUpdateDashboard } from 'hooks/dashboard/useUpdateDashboard'; import useComponentPermission from 'hooks/useComponentPermission'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { useNotifications } from 'hooks/useNotifications'; +import { FullscreenIcon } from 'lucide-react'; import { useDashboard } from 'providers/Dashboard/Dashboard'; +import { FullScreen, useFullScreenHandle } from 'react-full-screen'; import { useTranslation } from 'react-i18next'; import { useSelector } from 'react-redux'; import { AppState } from 'store/reducers'; @@ -34,6 +38,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element { isDashboardLocked, } = useDashboard(); const { data } = selectedDashboard || {}; + const handle = useFullScreenHandle(); const { widgets, variables } = data || {}; @@ -106,6 +111,15 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element { <> {!isDashboardLocked && ( + + {saveLayoutPermission && (