chore: updated styles for dashboard creation modal

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.styles.scss

@@ -68,7 +68,7 @@
 				.template-list-item {
 					display: flex;
 					gap: 8px;
-					padding: 4px 12px;
+					padding: 8px 12px;
 					align-items: center;
 					cursor: pointer;
 					height: 32px;
@@ -76,8 +76,10 @@
 
 					.template-icon {
 						display: flex;
-						height: 14px;
-						width: 14px;
+						height: 20px;
+						width: 20px;
+						border-radius: 2px;
+						padding: 4px;
 						align-items: center;
 						justify-content: center;
 					}
@@ -97,6 +99,17 @@
 					&.active {
 						border-radius: 3px;
 						background: rgba(171, 189, 255, 0.08);
+						position: relative;
+
+						&::before {
+							content: '';
+							position: absolute;
+							top: 0;
+							bottom: 0;
+							left: 0;
+							width: 2px;
+							background: var(--bg-robin-500);
+						}
 					}
 				}
 			}
@@ -159,18 +172,38 @@
 				display: flex;
 				justify-content: center;
 				align-items: center;
-				margin: 24px;
+				padding: 16px;
 				height: calc(100% - 144px);
 				position: relative;
 
-				img {
+				&-container {
+					position: relative;
 					width: 100%;
 					max-width: 100%;
-					padding: 24px;
+					padding: 48px 24px;
+					border-radius: 4px;
 					border: 1px solid var(--bg-ink-50);
-					background: var(--bg-ink-300);
+					background: linear-gradient(98.66deg, #7a97fa 4.42%, #f977ff 96.6%);
 					max-height: 100%;
+
+					&::before {
+						content: '';
+						position: absolute;
+						inset: 0;
+						background: url('/public/Images/grains.png');
+						background-size: contain;
+						background-repeat: repeat;
+						opacity: 0.1;
+					}
+				}
+
+				img {
+					position: relative;
+					width: 100%;
+					max-width: 100%;
+					max-height: 540px;
 					object-fit: contain;
+					border-radius: 4px;
 				}
 			}
 		}

frontend/src/container/ListOfDashboard/DashboardTemplates/DashboardTemplatesModal.tsx

@@ -4,6 +4,7 @@
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 import './DashboardTemplatesModal.styles.scss';
 
+import { Color } from '@signozhq/design-tokens';
 import { Button, Input, Modal, Typography } from 'antd';
 import ApacheIcon from 'assets/CustomIcons/ApacheIcon';
 import DockerIcon from 'assets/CustomIcons/DockerIcon';
@@ -16,7 +17,14 @@ import NginxIcon from 'assets/CustomIcons/NginxIcon';
 import PostgreSQLIcon from 'assets/CustomIcons/PostgreSQLIcon';
 import RedisIcon from 'assets/CustomIcons/RedisIcon';
 import cx from 'classnames';
-import { ConciergeBell, DraftingCompass, Drill, Plus, X } from 'lucide-react';
+import {
+	ConciergeBell,
+	DraftingCompass,
+	Drill,
+	Plus,
+	Search,
+	X,
+} from 'lucide-react';
 import { ChangeEvent, useState } from 'react';
 import { DashboardTemplate } from 'types/api/dashboard/getAll';
 
@@ -162,7 +170,9 @@ export default function DashboardTemplatesModal({
 					<div className="new-dashboard-templates-list">
 						<Input
 							className="new-dashboard-templates-search"
-							placeholder="🔍 Search..."
+							placeholder="Search..."
+							size="middle"
+							prefix={<Search size={12} color={Color.TEXT_VANILLA_400} />}
 							onChange={handleDashboardTemplateSearch}
 						/>
 
@@ -212,10 +222,12 @@ export default function DashboardTemplatesModal({
 						</div>
 
 						<div className="template-preview-image">
-							<img
-								src={selectedDashboardTemplate.previewImage}
-								alt={`${selectedDashboardTemplate.name}-preview`}
-							/>
+							<div className="template-preview-image-container">
+								<img
+									src={selectedDashboardTemplate.previewImage}
+									alt={`${selectedDashboardTemplate.name}-preview`}
+								/>
+							</div>
 						</div>
 					</div>
 				</div>

frontend/src/container/ListOfDashboard/DashboardsList.tsx

@@ -7,10 +7,9 @@ import './DashboardList.styles.scss';
 import { Color } from '@signozhq/design-tokens';
 import {
 	Button,
-	Dropdown,
 	Flex,
 	Input,
-	MenuProps,
+	// MenuProps,
 	Modal,
 	Popover,
 	Skeleton,
@@ -47,14 +46,14 @@ import {
 	Ellipsis,
 	EllipsisVertical,
 	Expand,
-	ExternalLink,
+	// ExternalLink,
 	FileJson,
-	Github,
+	// Github,
 	HdmiPort,
-	LayoutGrid,
+	// LayoutGrid,
 	Link2,
 	Plus,
-	Radius,
+	// Radius,
 	RotateCw,
 	Search,
 	SquareArrowOutUpRight,
@@ -71,7 +70,6 @@ import {
 	Key,
 	useCallback,
 	useEffect,
-	useMemo,
 	useRef,
 	useState,
 } from 'react';
@@ -597,61 +595,61 @@ function DashboardsList(): JSX.Element {
 		},
 	];
 
-	const getCreateDashboardItems = useMemo(() => {
-		const menuItems: MenuProps['items'] = [
-			{
-				label: (
-					<div
-						className="create-dashboard-menu-item"
-						onClick={(): void => onModalHandler(false)}
-					>
-						<Radius size={14} /> Import JSON
-					</div>
-				),
-				key: '1',
-			},
-			{
-				label: (
-					<a
-						href="https://signoz.io/docs/dashboards/dashboard-templates/overview/"
-						target="_blank"
-						rel="noopener noreferrer"
-					>
-						<Flex
-							justify="space-between"
-							align="center"
-							style={{ width: '100%' }}
-							gap="small"
-						>
-							<div className="create-dashboard-menu-item">
-								<Github size={14} /> View templates
-							</div>
-							<ExternalLink size={14} />
-						</Flex>
-					</a>
-				),
-				key: '2',
-			},
-		];
+	// const getCreateDashboardItems = useMemo(() => {
+	// 	const menuItems: MenuProps['items'] = [
+	// 		{
+	// 			label: (
+	// 				<div
+	// 					className="create-dashboard-menu-item"
+	// 					onClick={(): void => onModalHandler(false)}
+	// 				>
+	// 					<Radius size={14} /> Import JSON
+	// 				</div>
+	// 			),
+	// 			key: '1',
+	// 		},
+	// 		{
+	// 			label: (
+	// 				<a
+	// 					href="https://signoz.io/docs/dashboards/dashboard-templates/overview/"
+	// 					target="_blank"
+	// 					rel="noopener noreferrer"
+	// 				>
+	// 					<Flex
+	// 						justify="space-between"
+	// 						align="center"
+	// 						style={{ width: '100%' }}
+	// 						gap="small"
+	// 					>
+	// 						<div className="create-dashboard-menu-item">
+	// 							<Github size={14} /> View templates
+	// 						</div>
+	// 						<ExternalLink size={14} />
+	// 					</Flex>
+	// 				</a>
+	// 			),
+	// 			key: '2',
+	// 		},
+	// 	];
 
-		if (createNewDashboard) {
-			menuItems.unshift({
-				label: (
-					<div
-						className="create-dashboard-menu-item"
-						onClick={(): void => {
-							onNewDashboardHandler();
-						}}
-					>
-						<LayoutGrid size={14} /> Create dashboard
-					</div>
-				),
-				key: '0',
-			});
-		}
+	// 	if (createNewDashboard) {
+	// 		menuItems.unshift({
+	// 			label: (
+	// 				<div
+	// 					className="create-dashboard-menu-item"
+	// 					onClick={(): void => {
+	// 						onNewDashboardHandler();
+	// 					}}
+	// 				>
+	// 					<LayoutGrid size={14} /> Create dashboard
+	// 				</div>
+	// 			),
+	// 			key: '0',
+	// 		});
+	// 	}
 
-		return menuItems;
-	}, [createNewDashboard, onNewDashboardHandler]);
+	// 	return menuItems;
+	// }, [createNewDashboard, onNewDashboardHandler]);
 
 	const showPaginationItem = (total: number, range: number[]): JSX.Element => (
 		<>
@@ -763,23 +761,16 @@ function DashboardsList(): JSX.Element {
 
 						{createNewDashboard && (
 							<section className="actions">
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
-									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+								<Button
+									type="text"
+									className="new-dashboard"
+									icon={<Plus size={14} />}
+									onClick={(): void => {
+										logEvent('Dashboard List: New dashboard clicked', {});
+									}}
 								>
-									<Button
-										type="text"
-										className="new-dashboard"
-										icon={<Plus size={14} />}
-										onClick={(): void => {
-											logEvent('Dashboard List: New dashboard clicked', {});
-										}}
-									>
-										New Dashboard
-									</Button>
-								</Dropdown>
+									New Dashboard
+								</Button>
 								<Button
 									type="text"
 									className="learn-more"
@@ -807,23 +798,17 @@ function DashboardsList(): JSX.Element {
 								onChange={handleSearch}
 							/>
 							{createNewDashboard && (
-								<Dropdown
-									overlayClassName="new-dashboard-menu"
-									menu={{ items: getCreateDashboardItems }}
-									placement="bottomRight"
-									trigger={['click']}
+								<Button
+									type="primary"
+									className="periscope-btn primary btn"
+									icon={<Plus size={14} />}
+									onClick={(): void => {
+										logEvent('Dashboard List: New dashboard clicked', {});
+										setShowNewDashboardTemplatesModal(true);
+									}}
 								>
-									<Button
-										type="primary"
-										className="periscope-btn primary btn"
-										icon={<Plus size={14} />}
-										onClick={(): void => {
-											logEvent('Dashboard List: New dashboard clicked', {});
-										}}
-									>
-										New dashboard
-									</Button>
-								</Dropdown>
+									New dashboard
+								</Button>
 							)}
 						</div>
 

pkg/querier/promql_query.go

@@ -16,6 +16,7 @@ import (
 	qbv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
 	"github.com/SigNoz/signoz/pkg/types/telemetrytypes"
 	"github.com/prometheus/prometheus/promql"
+	"github.com/prometheus/prometheus/promql/parser"
 )
 
 type promqlQuery struct {
@@ -59,8 +60,50 @@ func (q *promqlQuery) Window() (uint64, uint64) {
 	return q.tr.From, q.tr.To
 }
 
+// removeAllVarMatchers removes label matchers from a PromQL query that reference variables with __all__ value.
+// This method parses the query, walks the AST to remove matching matchers, and returns the modified query string.
+// If parsing or walking fails, it returns an error.
+func (q *promqlQuery) removeAllVarMatchers(query string, vars map[string]qbv5.VariableItem) (string, error) {
+	// Find all variables that have __all__ value
+	allVars := make(map[string]bool)
+	for k, v := range vars {
+		if v.Type == qbv5.DynamicVariableType {
+			if allVal, ok := v.Value.(string); ok && allVal == "__all__" {
+				allVars[k] = true
+			}
+		}
+	}
+
+	// If no variables have __all__ value, return the query unchanged
+	if len(allVars) == 0 {
+		return query, nil
+	}
+
+	expr, err := parser.ParseExpr(query)
+	if err != nil {
+		return "", errors.NewInvalidInputf(errors.CodeInvalidInput, "invalid promql query %q", query)
+	}
+
+	// Create visitor and walk the AST
+	visitor := &allVarRemover{allVars: allVars}
+	if err := parser.Walk(visitor, expr, nil); err != nil {
+		q.logger.ErrorContext(context.TODO(), "unexpected error while removing __all__ variable matchers", "error", err, "query", query)
+		return "", errors.WrapInternalf(err, errors.CodeInternal, "error while removing __all__ variable matchers")
+	}
+
+	// Convert the modified AST back to a string
+	return expr.String(), nil
+}
+
 // TODO(srikanthccv): cleanup the templating logic
 func (q *promqlQuery) renderVars(query string, vars map[string]qbv5.VariableItem, start, end uint64) (string, error) {
+	// First, remove label matchers that use variables with __all__ value.
+	// This must happen before variable substitution so we can detect variable references
+	// in their original form ($var, {{var}}, [[var]]).
+	query, err := q.removeAllVarMatchers(query, vars)
+	if err != nil {
+		return "", err
+	}
 	varsData := map[string]any{}
 	for k, v := range vars {
 		varsData[k] = formatValueForProm(v.Value)
@@ -83,7 +126,7 @@ func (q *promqlQuery) renderVars(query string, vars map[string]qbv5.VariableItem
 	}
 
 	tmpl := template.New("promql-query")
-	tmpl, err := tmpl.Parse(query)
+	tmpl, err = tmpl.Parse(query)
 	if err != nil {
 		return "", errors.WrapInternalf(err, errors.CodeInternal, "error while replacing template variables")
 	}

pkg/querier/promql_query_parser.go

@@ -0,0 +1,66 @@
+package querier
+
+import (
+	"strings"
+
+	"github.com/prometheus/prometheus/model/labels"
+	"github.com/prometheus/prometheus/promql/parser"
+)
+
+// allVarRemover is a visitor that removes label matchers referencing variables with __all__ value.
+// This must run before variable substitution so it can detect variable references in their original form.
+type allVarRemover struct {
+	allVars map[string]bool // map of variable names that have __all__ value
+}
+
+// Visit implements the parser.Visitor interface to traverse and modify the PromQL AST.
+func (v *allVarRemover) Visit(node parser.Node, path []parser.Node) (parser.Visitor, error) {
+	if node == nil {
+		return v, nil
+	}
+	switch n := node.(type) {
+	case *parser.VectorSelector:
+		// Remove matchers that reference variables with __all__ value
+		var keptMatchers []*labels.Matcher
+		for _, matcher := range n.LabelMatchers {
+			if !v.shouldRemoveMatcher(matcher.Value) {
+				keptMatchers = append(keptMatchers, matcher)
+			}
+		}
+		// Update the label matchers
+		n.LabelMatchers = keptMatchers
+	}
+	return v, nil
+}
+
+// shouldRemoveMatcher checks if a matcher value contains a variable reference that has __all__ value.
+func (v *allVarRemover) shouldRemoveMatcher(value string) bool {
+
+	// Check for $var pattern
+	if strings.Contains(value, "$") {
+		keyValue := strings.TrimPrefix(value, "$")
+		if _, ok := v.allVars[keyValue]; ok {
+			return true
+		}
+	}
+
+	// Check for {{var}} pattern
+	if strings.Contains(value, "{{") {
+		keyValue := strings.TrimPrefix(value, "{{")
+		keyValue = strings.TrimSuffix(keyValue, "}}")
+		if _, ok := v.allVars[keyValue]; ok {
+			return true
+		}
+	}
+
+	// Check for [[var]] pattern
+	if strings.Contains(value, "[[") {
+		keyValue := strings.TrimPrefix(value, "[[")
+		keyValue = strings.TrimSuffix(keyValue, "]]")
+		if _, ok := v.allVars[keyValue]; ok {
+			return true
+		}
+	}
+
+	return false
+}

pkg/querier/promql_query_parser_test.go

@@ -0,0 +1,85 @@
+package querier
+
+import (
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func TestShouldRemoveMatcher(t *testing.T) {
+	tests := []struct {
+		name     string
+		value    string
+		allVars  map[string]bool
+		expected bool
+	}{
+		{
+			name:     "$var pattern match",
+			value:    "$host.name",
+			allVars:  map[string]bool{"host.name": true},
+			expected: true,
+		},
+		{
+			name:     "{{var}} pattern match",
+			value:    "{{host.name}}",
+			allVars:  map[string]bool{"host.name": true},
+			expected: true,
+		},
+		{
+			name:     "[[var]] pattern match",
+			value:    "[[host.name]]",
+			allVars:  map[string]bool{"host.name": true},
+			expected: true,
+		},
+		{
+			name:     "variable not in allVars",
+			value:    "$other.var",
+			allVars:  map[string]bool{"host.name": true},
+			expected: false,
+		},
+		{
+			name:     "no variable pattern in value",
+			value:    "host.name",
+			allVars:  map[string]bool{"host.name": true},
+			expected: false,
+		},
+		{
+			name:     "variable in middle of string (not at start, won't match)",
+			value:    "prefix$host.namesuffix",
+			allVars:  map[string]bool{"host.name": true},
+			expected: false, // TrimPrefix only works if $ is at the start
+		},
+		{
+			name:     "empty allVars",
+			value:    "$host.name",
+			allVars:  map[string]bool{},
+			expected: false,
+		},
+		{
+			name:     "incomplete {{var}} pattern (missing closing, still matches)",
+			value:    "{{host.name",
+			allVars:  map[string]bool{"host.name": true},
+			expected: true, // TrimPrefix removes {{, TrimSuffix does nothing, checks "host.name"
+		},
+		{
+			name:     "mixed patterns (only first pattern at start matches)",
+			value:    "$host.name{{env}}",
+			allVars:  map[string]bool{"host.name": true},
+			expected: false, // TrimPrefix removes $, checks "host.name{{env}}" which is not in allVars
+		},
+		{
+			name:     "partial match should not match for {{var}}",
+			value:    "{{host.name.suffix}}",
+			allVars:  map[string]bool{"host.name": true},
+			expected: false,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			remover := &allVarRemover{allVars: tt.allVars}
+			result := remover.shouldRemoveMatcher(tt.value)
+			assert.Equal(t, tt.expected, result, "shouldRemoveMatcher(%q) with allVars=%v", tt.value, tt.allVars)
+		})
+	}
+}

pkg/querier/promql_query_test.go

@@ -0,0 +1,174 @@
+package querier
+
+import (
+	"log/slog"
+	"testing"
+
+	qbv5 "github.com/SigNoz/signoz/pkg/types/querybuildertypes/querybuildertypesv5"
+	"github.com/stretchr/testify/assert"
+)
+
+func TestRemoveAllVarMatchers(t *testing.T) {
+	logger := slog.Default()
+	q := &promqlQuery{logger: logger}
+
+	tests := []struct {
+		name      string
+		query     string
+		vars      map[string]qbv5.VariableItem
+		expected  string
+		expectErr bool
+	}{
+		{
+			name:  "remove $var pattern with __all__",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "__all__",
+				},
+			},
+			expected:  `sum(rate({__name__="system.cpu.time"}[5m]))`,
+			expectErr: false,
+		},
+		{
+			name:  "remove {{var}} pattern with __all__",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"{{host.name}}"}[5m]))`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "__all__",
+				},
+			},
+			expected:  `sum(rate({__name__="system.cpu.time"}[5m]))`,
+			expectErr: false,
+		},
+		{
+			name:  "remove [[var]] pattern with __all__",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"[[host.name]]"}[5m]))`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "__all__",
+				},
+			},
+			expected:  `sum(rate({__name__="system.cpu.time"}[5m]))`,
+			expectErr: false,
+		},
+		{
+			name:  "multiple variables, one with __all__",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name", "env"="$env"}[5m]))`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "__all__",
+				},
+				"env": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "production",
+				},
+			},
+			expected:  `sum(rate({__name__="system.cpu.time",env="$env"}[5m]))`,
+			expectErr: false,
+		},
+		{
+			name:  "no __all__ variables, query unchanged",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "host1",
+				},
+			},
+			expected:  `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			expectErr: false,
+		},
+		{
+			name:  "non-dynamic variable type, not removed",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.QueryVariableType,
+					Value: "__all__",
+				},
+			},
+			expected:  `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			expectErr: false,
+		},
+		{
+			name:  "invalid PromQL query",
+			query: `invalid promql query syntax {`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "__all__",
+				},
+			},
+			expected:  "",
+			expectErr: true,
+		},
+		{
+			name:  "invalid PromQL query with mismatched brackets",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "__all__",
+				},
+			},
+			expected:  "",
+			expectErr: true,
+		},
+		{
+			name:      "empty vars map",
+			query:     `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			vars:      map[string]qbv5.VariableItem{},
+			expected:  `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			expectErr: false,
+		},
+		{
+			name:  "multiple matchers with __all__ variable",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name", "env"="$env", "region"=~"$region"}[5m]))`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "__all__",
+				},
+				"env": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "__all__",
+				},
+				"region": {
+					Type:  qbv5.DynamicVariableType,
+					Value: "us-east",
+				},
+			},
+			expected:  `sum(rate({__name__="system.cpu.time",region=~"$region"}[5m]))`,
+			expectErr: false,
+		},
+		{
+			name:  "__all__ value not string type",
+			query: `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			vars: map[string]qbv5.VariableItem{
+				"host.name": {
+					Type:  qbv5.DynamicVariableType,
+					Value: 123, // Not a string
+				},
+			},
+			expected:  `sum(rate({__name__="system.cpu.time", "host.name"=~"$host.name"}[5m]))`,
+			expectErr: false,
+		},
+	}
+
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			result, err := q.removeAllVarMatchers(tt.query, tt.vars)
+			if tt.expectErr {
+				assert.Error(t, err)
+			} else {
+				assert.NoError(t, err)
+				assert.Equal(t, tt.expected, result, "removeAllVarMatchers(%q) with vars=%v", tt.query, tt.vars)
+			}
+		})
+	}
+}