Merge branch 'develop' into fix/panic_on_rule_if_all_queries_are_disa…

…bled

.github/ISSUE_TEMPLATE/request_dashboard.md

@@ -1,58 +1,49 @@
 ---
 name: Request Dashboard
 about: Request a new dashboard for the SigNoz Dashboards repository
-title: ''
+title: '[Dashboard Request] '
 labels: 'dashboard-template'
 assignees: ''
 
 ---
 
-## 📝 Dashboard Request Template
+<!-- Use this template to request a new dashboard for the SigNoz Dashboards repository. Providing detailed information will help us understand your needs better and speed up the dashboard creation process. -->
 
-*Use this template to request a new dashboard for the SigNoz Dashboards repository. Please provide as much detail as possible to help us understand your needs.*
+## Dashboard Name
 
----
-
-### 1. Dashboard Name
+<!-- Provide the name for the requested dashboard. Be specific (e.g., "MySQL Monitoring Dashboard"). -->
 
-Name of the requested dashboard (e.g., MySQL Monitoring Dashboard):
+## Expected Dashboard Sections and Panels
 
----
+(Can be tweaked (add or remove panels/sections) according to available metrics)
 
-### 2. Expected Dashboard Sections and Panels
+### Section Name
 
-#### Section Name
+<!-- Brief description of what this section should display (e.g., "Resource usage metrics for MySQL database"). -->
 
-Brief description of the section (e.g., "Resource usage metrics for MySQL database").
+### Panel Name
 
-#### Panel Name
+<!-- Description of the panel (e.g., "Displays current CPU usage, memory usage, etc."). -->
 
-Panel description (e.g., "Value-type panels displaying current CPU usage, memory usage, etc.").
-
-- **Example:**
+<!-- - **Example:**
   - **Section**: Resource Metrics
     - **Panel**: CPU Usage - Displays the current CPU usage across all database instances.
-    - **Panel**: Memory Usage - Displays the total memory used by the MySQL process.
-
-(Repeat this format for additional sections and panels)
+    - **Panel**: Memory Usage - Displays the total memory used by the MySQL process. -->
 
----
+<!-- Repeat this format for any additional sections or panels. -->
 
-### 3. Expected Variables
+## Expected Dashboard Variables
 
-List any variables you expect to use in the dashboard (e.g., `deployment.environment`, `hostname`, etc.).
+<!-- List any dashboard variables that should be included in the dashboard. Examples could be `deployment.environment`, `hostname`, `region`, etc. -->
 
----
+## Additional Comments or Requirements
 
-### 4. Additional Comments or Requirements
+<!-- Include any other details, special requirements, or specific visualizations you'd like to request for this dashboard. -->
 
-Any additional details or special requirements for the dashboard?
+## References or Screenshots
 
----
+<!-- Add any references or screenshots of requested dashboard if available. -->
 
-### 📋 Notes
+## 📋 Notes
 
 Please review the [CONTRIBUTING.md](https://github.com/SigNoz/dashboards/blob/main/CONTRIBUTING.md) for guidelines on dashboard structure, naming conventions, and how to submit a pull request.
-
----
-Thank you for your request! We will review it and provide feedback or guidance as necessary.

CONTRIBUTING.md

@@ -30,6 +30,7 @@ Also, have a look at these [good first issues label](https://github.com/SigNoz/s
     - [To run ClickHouse setup](#41-to-run-clickhouse-setup-recommended-for-local-development)
 - [Contribute to SigNoz Helm Chart](#5-contribute-to-signoz-helm-chart-)
     - [To run helm chart for local development](#51-to-run-helm-chart-for-local-development)
+- [Contribute to Dashboards](#6-contribute-to-dashboards-)
 - [Other Ways to Contribute](#other-ways-to-contribute)
 
 # 1. General Instructions 📝
@@ -369,6 +370,17 @@ curl -sL https://github.com/SigNoz/signoz/raw/develop/sample-apps/hotrod/hotrod-
 
 ---
 
+# 6. Contribute to Dashboards 📈
+
+**Need to Update: [https://github.com/SigNoz/dashboards](https://github.com/SigNoz/dashboards)**
+
+To contribute a new dashboard template for any service, follow the contribution guidelines in the [Dashboard Contributing Guide](https://github.com/SigNoz/dashboards/blob/main/CONTRIBUTING.md). In brief:
+
+1. Create a dashboard JSON file.
+2. Add a README file explaining the dashboard, the metrics ingested, and the configurations needed.
+3. Include screenshots of the dashboard in the `assets/` directory.
+4. Submit a pull request for review.
+
 ## Other Ways to Contribute
 
 There are many other ways to get involved with the community and to participate in this project:
@@ -379,7 +391,6 @@ There are many other ways to get involved with the community and to participate
 - Help answer questions on forums such as Stack Overflow and [SigNoz Community Slack Channel](https://signoz.io/slack).
 - Tell others about the project on Twitter, your blog, etc.
 
-
 Again, Feel free to ping us on [`#contributing`](https://signoz-community.slack.com/archives/C01LWQ8KS7M) or [`#contributing-frontend`](https://signoz-community.slack.com/archives/C027134DM8B) on our slack community if you need any help on this :)
 
 Thank You!

frontend/public/locales/en-GB/alerts.json

@@ -53,6 +53,7 @@
 	"option_atleastonce": "at least once",
 	"option_onaverage": "on average",
 	"option_intotal": "in total",
+	"option_last": "last",
 	"option_above": "above",
 	"option_below": "below",
 	"option_equal": "is equal to",

frontend/public/locales/en-GB/rules.json

@@ -40,6 +40,7 @@
 	"option_atleastonce": "at least once",
 	"option_onaverage": "on average",
 	"option_intotal": "in total",
+	"option_last": "last",
 	"option_above": "above",
 	"option_below": "below",
 	"option_equal": "is equal to",

frontend/public/locales/en/alerts.json

@@ -53,6 +53,7 @@
 	"option_atleastonce": "at least once",
 	"option_onaverage": "on average",
 	"option_intotal": "in total",
+	"option_last": "last",
 	"option_above": "above",
 	"option_below": "below",
 	"option_equal": "is equal to",

frontend/public/locales/en/rules.json

@@ -40,6 +40,7 @@
 	"option_atleastonce": "at least once",
 	"option_onaverage": "on average",
 	"option_intotal": "in total",
+	"option_last": "last",
 	"option_above": "above",
 	"option_below": "below",
 	"option_equal": "is equal to",

frontend/src/components/Logs/LogStateIndicator/LogStateIndicator.styles.scss

@@ -22,26 +22,21 @@
 		}
 
 		&.INFO {
-			background-color: var(--bg-slate-400);
+			background-color: var(--bg-robin-500);
 		}
-
 		&.WARNING,
 		&.WARN {
 			background-color: var(--bg-amber-500);
 		}
-
 		&.ERROR {
 			background-color: var(--bg-cherry-500);
 		}
-
 		&.TRACE {
-			background-color: var(--bg-robin-300);
+			background-color: var(--bg-forest-400);
 		}
-
 		&.DEBUG {
-			background-color: var(--bg-forest-500);
+			background-color: var(--bg-aqua-500);
 		}
-
 		&.FATAL {
 			background-color: var(--bg-sakura-500);
 		}

frontend/src/container/FormAlertRules/RuleOptions.tsx

@@ -103,6 +103,7 @@ function RuleOptions({
 			<Select.Option value="2">{t('option_allthetimes')}</Select.Option>
 			<Select.Option value="3">{t('option_onaverage')}</Select.Option>
 			<Select.Option value="4">{t('option_intotal')}</Select.Option>
+			<Select.Option value="5">{t('option_last')}</Select.Option>
 		</InlineSelect>
 	);
 

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

@@ -11,6 +11,7 @@ import { isEqual } from 'lodash-es';
 import isEmpty from 'lodash-es/isEmpty';
 import { useDashboard } from 'providers/Dashboard/Dashboard';
 import { memo, useEffect, useRef, useState } from 'react';
+import { useQueryClient } from 'react-query';
 import { useDispatch, useSelector } from 'react-redux';
 import { UpdateTimeInterval } from 'store/actions';
 import { AppState } from 'store/reducers';
@@ -48,6 +49,7 @@ function GridCardGraph({
 		AppState,
 		GlobalReducer
 	>((state) => state.globalTime);
+	const queryClient = useQueryClient();
 
 	const handleBackNavigation = (): void => {
 		const searchParams = new URLSearchParams(window.location.search);
@@ -136,6 +138,25 @@ function GridCardGraph({
 		};
 	});
 
+	// TODO [vikrantgupta25] remove this useEffect with refactor as this is prone to race condition
+	// this is added to tackle the case of async communication between VariableItem.tsx and GridCard.tsx
+	useEffect(() => {
+		if (variablesToGetUpdated.length > 0) {
+			queryClient.cancelQueries([
+				maxTime,
+				minTime,
+				globalSelectedInterval,
+				variables,
+				widget?.query,
+				widget?.panelTypes,
+				widget.timePreferance,
+				widget.fillSpans,
+				requestData,
+			]);
+		}
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, [variablesToGetUpdated]);
+
 	useEffect(() => {
 		if (!isEqual(updatedQuery, requestData.query)) {
 			setRequestData((prev) => ({

frontend/src/container/ListOfDashboard/DashboardList.styles.scss

@@ -64,9 +64,9 @@
 
 						.dashboard-icon {
 							display: inline-block;
-							margin-top: 4px;
-							margin-right: 4px;
 							line-height: 20px;
+							height: 14px;
+							width: 14px;
 						}
 
 						.dot {
@@ -75,6 +75,12 @@
 							border-radius: 50%;
 						}
 
+						.title-link {
+							display: flex;
+							align-items: center;
+							gap: 8px;
+						}
+
 						.title {
 							color: var(--bg-vanilla-100);
 							font-size: var(--font-size-sm);

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -459,17 +459,19 @@ function DashboardsList(): JSX.Element {
 									placement="left"
 									overlayClassName="title-toolip"
 								>
-									<Typography.Text data-testid={`dashboard-title-${index}`}>
-										<Link to={getLink()} className="title">
-											<img
-												src={dashboard?.image || Base64Icons[0]}
-												style={{ height: '14px', width: '14px' }}
-												alt="dashboard-image"
-												className="dashboard-icon"
-											/>
+									<Link to={getLink()} className="title-link">
+										<img
+											src={dashboard?.image || Base64Icons[0]}
+											alt="dashboard-image"
+											className="dashboard-icon"
+										/>
+										<Typography.Text
+											data-testid={`dashboard-title-${index}`}
+											className="title"
+										>
 											{dashboard.name}
-										</Link>
-									</Typography.Text>
+										</Typography.Text>
+									</Link>
 								</Tooltip>
 							</div>
 

frontend/src/container/LogsExplorerChart/utils.ts

@@ -9,15 +9,18 @@ export function getColorsForSeverityLabels(
 	const lowerCaseLabel = label.toLowerCase();
 
 	if (lowerCaseLabel.includes(`{severity_text="trace"}`)) {
-		return Color.BG_ROBIN_300;
+		return Color.BG_FOREST_400;
 	}
 
 	if (lowerCaseLabel.includes(`{severity_text="debug"}`)) {
-		return Color.BG_FOREST_500;
+		return Color.BG_AQUA_500;
 	}
 
-	if (lowerCaseLabel.includes(`{severity_text="info"}`)) {
-		return Color.BG_SLATE_400;
+	if (
+		lowerCaseLabel.includes(`{severity_text="info"}`) ||
+		lowerCaseLabel.includes(`{severity_text=""}`)
+	) {
+		return Color.BG_ROBIN_500;
 	}
 
 	if (lowerCaseLabel.includes(`{severity_text="warn"}`)) {

frontend/src/container/NewDashboard/DashboardDescription/Description.styles.scss

@@ -130,12 +130,16 @@
 
 		.left-section {
 			display: flex;
-			flex-wrap: wrap;
 
 			align-items: center;
 			gap: 8px;
 			width: 45%;
 
+			.dashboard-img {
+				height: 16px;
+				width: 16px;
+			}
+
 			.dashboard-title {
 				color: #fff;
 				font-family: Inter;

frontend/src/container/NewDashboard/DashboardDescription/index.tsx

@@ -306,16 +306,13 @@ function DashboardDescription(props: DashboardDescriptionProps): JSX.Element {
 			</div>
 			<section className="dashboard-details">
 				<div className="left-section">
+					<img src={image} alt="dashboard-img" className="dashboard-img" />
 					<Tooltip title={title.length > 30 ? title : ''}>
 						<Typography.Text
 							className="dashboard-title"
 							data-testid="dashboard-title"
 						>
-							<img
-								src={image}
-								alt="dashboard-img"
-								style={{ width: '16px', height: '16px' }}
-							/>{' '}
+							{' '}
 							{title}
 						</Typography.Text>
 					</Tooltip>

frontend/src/container/NewDashboard/DashboardVariablesSelection/VariableItem.test.tsx

@@ -1,14 +1,8 @@
 import '@testing-library/jest-dom/extend-expect';
 
-import {
-	act,
-	fireEvent,
-	render,
-	screen,
-	waitFor,
-} from '@testing-library/react';
 import MockQueryClientProvider from 'providers/test/MockQueryClientProvider';
 import React, { useEffect } from 'react';
+import { act, fireEvent, render, screen, waitFor } from 'tests/test-utils';
 import { IDashboardVariable } from 'types/api/dashboard/getAll';
 
 import VariableItem from './VariableItem';