Merge branch 'develop' into SigNozgh-3299

.github/CODEOWNERS

@@ -4,6 +4,7 @@
 * @ankitnayan
 
 /frontend/ @palashgdev @YounixM
+/frontend/src/container/MetricsApplication @srikanthccv
 /deploy/ @prashant-shahi
 /sample-apps/ @prashant-shahi
 **/query-service/ @srikanthccv

.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/

deploy/docker-swarm/clickhouse-setup/docker-compose.yaml

@@ -146,7 +146,7 @@ services:
         condition: on-failure
 
   query-service:
-    image: signoz/query-service:0.33.1
+    image: signoz/query-service:0.34.2
     command:
       [
         "-config=/root/config/prometheus.yml",
@@ -186,7 +186,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:0.33.1
+    image: signoz/frontend:0.34.2
     deploy:
       restart_policy:
         condition: on-failure
@@ -199,7 +199,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector:
-    image: signoz/signoz-otel-collector:0.79.13
+    image: signoz/signoz-otel-collector:0.88.1
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -237,7 +237,7 @@ services:
       - query-service
 
   otel-collector-migrator:
-      image: signoz/signoz-schema-migrator:0.79.13
+      image: signoz/signoz-schema-migrator:0.88.1
       deploy:
         restart_policy:
           condition: on-failure
@@ -250,7 +250,7 @@ services:
         # - clickhouse-3
 
   otel-collector-metrics:
-    image: signoz/signoz-otel-collector:0.79.13
+    image: signoz/signoz-otel-collector:0.88.1
     command:
       [
         "--config=/etc/otel-collector-metrics-config.yaml",

deploy/docker/clickhouse-setup/docker-compose-core.yaml

@@ -66,7 +66,7 @@ services:
       - --storage.path=/data
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.79.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.1}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -81,7 +81,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
   otel-collector:
     container_name: signoz-otel-collector
-    image: signoz/signoz-otel-collector:0.79.13
+    image: signoz/signoz-otel-collector:0.88.1
     command:
       [
         "--config=/etc/otel-collector-config.yaml",
@@ -118,7 +118,7 @@ services:
 
   otel-collector-metrics:
     container_name: signoz-otel-collector-metrics
-    image: signoz/signoz-otel-collector:0.79.13
+    image: signoz/signoz-otel-collector:0.88.1
     command:
       [
         "--config=/etc/otel-collector-metrics-config.yaml",

deploy/docker/clickhouse-setup/docker-compose.yaml

@@ -164,7 +164,7 @@ services:
   # Notes for Maintainers/Contributors who will change Line Numbers of Frontend & Query-Section. Please Update Line Numbers in `./scripts/commentLinesForSetup.sh` & `./CONTRIBUTING.md`
 
   query-service:
-    image: signoz/query-service:${DOCKER_TAG:-0.33.1}
+    image: signoz/query-service:${DOCKER_TAG:-0.34.2}
     container_name: signoz-query-service
     command:
       [
@@ -203,7 +203,7 @@ services:
     <<: *db-depend
 
   frontend:
-    image: signoz/frontend:${DOCKER_TAG:-0.33.1}
+    image: signoz/frontend:${DOCKER_TAG:-0.34.2}
     container_name: signoz-frontend
     restart: on-failure
     depends_on:
@@ -215,7 +215,7 @@ services:
       - ../common/nginx-config.conf:/etc/nginx/conf.d/default.conf
 
   otel-collector-migrator:
-    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.79.13}
+    image: signoz/signoz-schema-migrator:${OTELCOL_TAG:-0.88.1}
     container_name: otel-migrator
     command:
       - "--dsn=tcp://clickhouse:9000"
@@ -229,7 +229,7 @@ services:
 
 
   otel-collector:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.79.13}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.1}
     container_name: signoz-otel-collector
     command:
       [
@@ -269,7 +269,7 @@ services:
         condition: service_healthy
 
   otel-collector-metrics:
-    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.79.13}
+    image: signoz/signoz-otel-collector:${OTELCOL_TAG:-0.88.1}
     container_name: signoz-otel-collector-metrics
     command:
       [

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"
+  }
+}

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/",
+  },
+});

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);
+});

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==

frontend/src/components/Uplot/Uplot.tsx

@@ -3,6 +3,7 @@ import './uplot.scss';
 
 import { Typography } from 'antd';
 import { ToggleGraphProps } from 'components/Graph/types';
+import ErrorBoundaryFallback from 'pages/ErrorBoundaryFallback/ErrorBoundaryFallback';
 import {
 	forwardRef,
 	memo,
@@ -11,6 +12,7 @@ import {
 	useImperativeHandle,
 	useRef,
 } from 'react';
+import { ErrorBoundary } from 'react-error-boundary';
 import UPlot from 'uplot';
 
 import { dataMatch, optionsUpdateState } from './utils';
@@ -119,13 +121,15 @@ const Uplot = forwardRef<ToggleGraphProps | undefined, UplotProps>(
 		}, [data, resetScales, create]);
 
 		return (
-			<div className="uplot-graph-container" ref={targetRef}>
-				{data && data[0] && data[0]?.length === 0 ? (
-					<div className="not-found">
-						<Typography>No Data</Typography>
-					</div>
-				) : null}
-			</div>
+			<ErrorBoundary FallbackComponent={ErrorBoundaryFallback}>
+				<div className="uplot-graph-container" ref={targetRef}>
+					{data && data[0] && data[0]?.length === 0 ? (
+						<div className="not-found">
+							<Typography>No Data</Typography>
+						</div>
+					) : null}
+				</div>
+			</ErrorBoundary>
 		);
 	},
 );

frontend/src/container/FormAlertRules/ChartPreview/index.tsx

@@ -7,8 +7,8 @@ import { Time } from 'container/TopNav/DateTimeSelection/config';
 import { useGetQueryRange } from 'hooks/queryBuilder/useGetQueryRange';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartData';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getChartData';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';

frontend/src/container/GridCardLayout/GridCard/FullView/index.tsx

@@ -15,8 +15,8 @@ import { useStepInterval } from 'hooks/queryBuilder/useStepInterval';
 import { useChartMutable } from 'hooks/useChartMutable';
 import { useIsDarkMode } from 'hooks/useDarkMode';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartData';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getChartData';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { useSelector } from 'react-redux';

frontend/src/container/GridCardLayout/GridCard/index.tsx

@@ -5,8 +5,8 @@ import { useIsDarkMode } from 'hooks/useDarkMode';
 import { useResizeObserver } from 'hooks/useDimensions';
 import { useIntersectionObserver } from 'hooks/useIntersectionObserver';
 import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
-import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartData';
-import { getUPlotChartData } from 'lib/uPlotLib/utils/getChartData';
+import { getUPlotChartOptions } from 'lib/uPlotLib/getUplotChartOptions';
+import { getUPlotChartData } from 'lib/uPlotLib/utils/getUplotChartData';
 import isEmpty from 'lodash-es/isEmpty';
 import _noop from 'lodash-es/noop';
 import { memo, useCallback, useMemo, useRef, useState } from 'react';
@@ -28,6 +28,7 @@ function GridCardGraph({
 	isQueryEnabled,
 	threshold,
 	variables,
+	filterNaN,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -89,7 +90,11 @@ function GridCardGraph({
 
 	const containerDimensions = useResizeObserver(graphRef);
 
-	const chartData = getUPlotChartData(queryResponse?.data?.payload);
+	const chartData = getUPlotChartData(
+		queryResponse?.data?.payload,
+		undefined,
+		filterNaN,
+	);
 
 	const isDarkMode = useIsDarkMode();
 

frontend/src/container/GridCardLayout/GridCard/types.ts

@@ -39,6 +39,7 @@ export interface GridCardGraphProps {
 	headerMenuList?: WidgetGraphComponentProps['headerMenuList'];
 	isQueryEnabled: boolean;
 	variables?: Dashboard['data']['variables'];
+	filterNaN?: boolean;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

frontend/src/container/GridCardLayout/GridCardLayout.tsx

@@ -118,7 +118,11 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element {
 					)}
 
 					{addPanelPermission && (
-						<Button onClick={onAddPanelHandler} icon={<PlusOutlined />}>
+						<Button
+							onClick={onAddPanelHandler}
+							icon={<PlusOutlined />}
+							data-testid="add-panel"
+						>
 							{t('dashboard:add_panel')}
 						</Button>
 					)}

frontend/src/container/GridCardLayout/WidgetHeader/index.tsx

@@ -203,7 +203,7 @@ function WidgetHeader({
 					onClick={onClickHandler}
 				>
 					<HeaderContentContainer>
-						<Typography.Text style={{ maxWidth: '80%' }} ellipsis>
+						<Typography.Text style={{ maxWidth: '80%' }} ellipsis data-testid={title}>
 							{title}
 						</Typography.Text>
 						<ArrowContainer hover={parentHover}>