mirror of
https://github.com/SigNoz/signoz.git
synced 2026-07-15 19:00:34 +01:00
Compare commits
1 Commits
feat/dashb
...
feat/rules
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
6218e27ec2 |
@@ -7415,6 +7415,7 @@ components:
|
||||
queries:
|
||||
items:
|
||||
$ref: '#/components/schemas/Querybuildertypesv5QueryEnvelope'
|
||||
minItems: 1
|
||||
nullable: true
|
||||
type: array
|
||||
queryType:
|
||||
@@ -7601,35 +7602,28 @@ components:
|
||||
type: string
|
||||
disabled:
|
||||
type: boolean
|
||||
evalWindow:
|
||||
type: string
|
||||
evaluation:
|
||||
$ref: '#/components/schemas/RuletypesEvaluationEnvelope'
|
||||
frequency:
|
||||
type: string
|
||||
labels:
|
||||
additionalProperties:
|
||||
type: string
|
||||
type: object
|
||||
notificationSettings:
|
||||
$ref: '#/components/schemas/RuletypesNotificationSettings'
|
||||
preferredChannels:
|
||||
items:
|
||||
type: string
|
||||
type: array
|
||||
ruleType:
|
||||
$ref: '#/components/schemas/RuletypesRuleType'
|
||||
schemaVersion:
|
||||
type: string
|
||||
source:
|
||||
type: string
|
||||
version:
|
||||
enum:
|
||||
- v2alpha1
|
||||
type: string
|
||||
required:
|
||||
- alert
|
||||
- alertType
|
||||
- ruleType
|
||||
- condition
|
||||
- schemaVersion
|
||||
- evaluation
|
||||
- notificationSettings
|
||||
type: object
|
||||
RuletypesQueryType:
|
||||
enum:
|
||||
@@ -7679,12 +7673,8 @@ components:
|
||||
type: string
|
||||
disabled:
|
||||
type: boolean
|
||||
evalWindow:
|
||||
type: string
|
||||
evaluation:
|
||||
$ref: '#/components/schemas/RuletypesEvaluationEnvelope'
|
||||
frequency:
|
||||
type: string
|
||||
id:
|
||||
type: string
|
||||
labels:
|
||||
@@ -7693,15 +7683,11 @@ components:
|
||||
type: object
|
||||
notificationSettings:
|
||||
$ref: '#/components/schemas/RuletypesNotificationSettings'
|
||||
preferredChannels:
|
||||
items:
|
||||
type: string
|
||||
type: array
|
||||
ruleType:
|
||||
$ref: '#/components/schemas/RuletypesRuleType'
|
||||
schemaVersion:
|
||||
type: string
|
||||
source:
|
||||
enum:
|
||||
- v2alpha1
|
||||
type: string
|
||||
state:
|
||||
$ref: '#/components/schemas/RuletypesAlertState'
|
||||
@@ -7710,8 +7696,6 @@ components:
|
||||
type: string
|
||||
updatedBy:
|
||||
type: string
|
||||
version:
|
||||
type: string
|
||||
required:
|
||||
- id
|
||||
- state
|
||||
@@ -7719,6 +7703,9 @@ components:
|
||||
- alertType
|
||||
- ruleType
|
||||
- condition
|
||||
- schemaVersion
|
||||
- evaluation
|
||||
- notificationSettings
|
||||
type: object
|
||||
RuletypesRuleCondition:
|
||||
properties:
|
||||
@@ -7731,10 +7718,6 @@ components:
|
||||
type: string
|
||||
compositeQuery:
|
||||
$ref: '#/components/schemas/RuletypesAlertCompositeQuery'
|
||||
matchType:
|
||||
$ref: '#/components/schemas/RuletypesMatchType'
|
||||
op:
|
||||
$ref: '#/components/schemas/RuletypesCompareOperator'
|
||||
requireMinPoints:
|
||||
type: boolean
|
||||
requiredNumPoints:
|
||||
@@ -7743,16 +7726,12 @@ components:
|
||||
$ref: '#/components/schemas/RuletypesSeasonality'
|
||||
selectedQueryName:
|
||||
type: string
|
||||
target:
|
||||
format: double
|
||||
nullable: true
|
||||
type: number
|
||||
targetUnit:
|
||||
type: string
|
||||
thresholds:
|
||||
$ref: '#/components/schemas/RuletypesRuleThresholdData'
|
||||
required:
|
||||
- compositeQuery
|
||||
- thresholds
|
||||
- selectedQueryName
|
||||
type: object
|
||||
RuletypesRuleThresholdData:
|
||||
discriminator:
|
||||
|
||||
@@ -139,31 +139,21 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
|
||||
</ColumnHeader>
|
||||
),
|
||||
accessorFn: (row): number => row.currentNodes,
|
||||
width: { min: 210 },
|
||||
width: { min: 180 },
|
||||
enableSort: false,
|
||||
enableResize: true,
|
||||
cell: ({ row }): React.ReactNode => (
|
||||
<GroupedStatusCounts
|
||||
items={[
|
||||
{
|
||||
value: row.readyNodes,
|
||||
label: 'Ready',
|
||||
color: Color.BG_FOREST_500,
|
||||
},
|
||||
{
|
||||
value: row.currentNodes,
|
||||
label: 'Current',
|
||||
color: Color.BG_ROBIN_500,
|
||||
color: Color.BG_FOREST_500,
|
||||
},
|
||||
{
|
||||
value: row.desiredNodes,
|
||||
label: 'Desired',
|
||||
color: Color.BG_SAKURA_400,
|
||||
},
|
||||
{
|
||||
value: row.misscheduledNodes,
|
||||
label: 'Misscheduled',
|
||||
color: Color.BG_AMBER_500,
|
||||
color: Color.BG_ROBIN_500,
|
||||
},
|
||||
]}
|
||||
/>
|
||||
@@ -322,30 +312,6 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'ready_nodes',
|
||||
header: (): React.ReactNode => (
|
||||
<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#ready">
|
||||
Ready Nodes
|
||||
</ColumnHeader>
|
||||
),
|
||||
accessorFn: (row): number => row.readyNodes,
|
||||
width: { min: 140 },
|
||||
enableSort: true,
|
||||
defaultVisibility: false,
|
||||
cell: ({ value }): React.ReactNode => {
|
||||
const readyNodes = value as number;
|
||||
return (
|
||||
<ValidateColumnValueWrapper
|
||||
value={readyNodes}
|
||||
entity={InfraMonitoringEntity.DAEMONSETS}
|
||||
attribute="ready node"
|
||||
>
|
||||
<TanStackTable.Text>{readyNodes}</TanStackTable.Text>
|
||||
</ValidateColumnValueWrapper>
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'current_nodes',
|
||||
header: (): React.ReactNode => (
|
||||
@@ -394,28 +360,4 @@ export const k8sDaemonSetsColumnsConfig: DaemonSetTableColumnConfig[] = [
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
id: 'misscheduled_nodes',
|
||||
header: (): React.ReactNode => (
|
||||
<ColumnHeader docPath="/infrastructure-monitoring/kubernetes/daemonsets#misscheduled">
|
||||
Misscheduled Nodes
|
||||
</ColumnHeader>
|
||||
),
|
||||
accessorFn: (row): number => row.misscheduledNodes,
|
||||
width: { min: 140 },
|
||||
enableSort: true,
|
||||
defaultVisibility: false,
|
||||
cell: ({ value }): React.ReactNode => {
|
||||
const misscheduledNodes = value as number;
|
||||
return (
|
||||
<ValidateColumnValueWrapper
|
||||
value={misscheduledNodes}
|
||||
entity={InfraMonitoringEntity.DAEMONSETS}
|
||||
attribute="misscheduled node"
|
||||
>
|
||||
<TanStackTable.Text>{misscheduledNodes}</TanStackTable.Text>
|
||||
</ValidateColumnValueWrapper>
|
||||
);
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
@@ -4,8 +4,6 @@ export function useIntersectionObserver<T extends HTMLElement>(
|
||||
ref: RefObject<T>,
|
||||
options?: IntersectionObserverInit,
|
||||
isObserverOnce?: boolean,
|
||||
/** Defer observation by this many ms to let a transient mount layout settle. */
|
||||
startDelayMs = 0,
|
||||
): boolean {
|
||||
const [isIntersecting, setIntersecting] = useState(false);
|
||||
|
||||
@@ -25,28 +23,16 @@ export function useIntersectionObserver<T extends HTMLElement>(
|
||||
}
|
||||
}, options);
|
||||
|
||||
const startObserving = (): void => {
|
||||
if (currentReference) {
|
||||
observer.observe(currentReference);
|
||||
}
|
||||
};
|
||||
|
||||
let timer: ReturnType<typeof setTimeout> | undefined;
|
||||
if (startDelayMs > 0) {
|
||||
timer = setTimeout(startObserving, startDelayMs);
|
||||
} else {
|
||||
startObserving();
|
||||
if (currentReference) {
|
||||
observer.observe(currentReference);
|
||||
}
|
||||
|
||||
return (): void => {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
if (currentReference) {
|
||||
observer.unobserve(currentReference);
|
||||
}
|
||||
};
|
||||
}, [ref, options, isObserverOnce, startDelayMs]);
|
||||
}, [ref, options, isObserverOnce]);
|
||||
|
||||
return isIntersecting;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,6 @@ import { EQueryType } from 'types/common/dashboard';
|
||||
|
||||
import {
|
||||
buildVariableReferencePattern,
|
||||
containsAnyVariableReference,
|
||||
extractQueryTextStrings,
|
||||
getVariableReferencesInQuery,
|
||||
textContainsVariableReference,
|
||||
@@ -449,25 +448,3 @@ describe('getVariableReferencesInQuery', () => {
|
||||
expect(getVariableReferencesInQuery(query, [])).toStrictEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('containsAnyVariableReference', () => {
|
||||
it.each([
|
||||
['SELECT count() FROM t WHERE service = $service.name', true],
|
||||
['up{env="$deployment_environment"}', true],
|
||||
['{{.service_name}}', true],
|
||||
['{{ service_name }}', true],
|
||||
['[[service_name]]', true],
|
||||
['$_private', true],
|
||||
])('detects a reference in %p', (text, expected) => {
|
||||
expect(containsAnyVariableReference(text)).toBe(expected);
|
||||
});
|
||||
|
||||
it.each([
|
||||
['SELECT count() FROM t WHERE x = 1', false],
|
||||
['rate(http_requests[$__interval])', false],
|
||||
['SELECT $1 FROM t', false],
|
||||
['', false],
|
||||
])('does not falsely match %p', (text, expected) => {
|
||||
expect(containsAnyVariableReference(text)).toBe(expected);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { escapeRegExp, isArray } from 'lodash-es';
|
||||
import { isArray } from 'lodash-es';
|
||||
import { Query, TagFilterItem } from 'types/api/queryBuilder/queryBuilderData';
|
||||
import { EQueryType } from 'types/common/dashboard';
|
||||
|
||||
@@ -33,23 +33,6 @@ export function textContainsVariableReference(
|
||||
return buildVariableReferencePattern(variableName).test(text);
|
||||
}
|
||||
|
||||
/**
|
||||
* Matches *any* variable reference in a recognized syntax without knowing the
|
||||
* name: `{{name}}`, `{{.name}}`, `[[name]]`, or `$name`. The `$` form excludes
|
||||
* `$__…` macros and positional `$1` so built-ins don't read as variables.
|
||||
*/
|
||||
const ANY_VARIABLE_REFERENCE =
|
||||
/\{\{\s*\.?[\w.]+\s*\}\}|\[\[\s*[\w.]+\s*\]\]|\$(?!__)[a-zA-Z_][\w.]*/;
|
||||
|
||||
/**
|
||||
* Returns true if `text` contains a reference to any variable. Use when the set
|
||||
* of variable names isn't known yet (e.g. before the fetch context initializes),
|
||||
* so a name-based {@link textContainsVariableReference} check can't run.
|
||||
*/
|
||||
export function containsAnyVariableReference(text: string): boolean {
|
||||
return !!text && ANY_VARIABLE_REFERENCE.test(text);
|
||||
}
|
||||
|
||||
/**
|
||||
* Extracts all text strings from a widget Query that could contain variable
|
||||
* references. Covers:
|
||||
@@ -151,52 +134,3 @@ export function getVariableReferencesInQuery(
|
||||
texts.some((text) => textContainsVariableReference(text, name)),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Rewrites every reference to `oldName` in `text` to `newName`, preserving the
|
||||
* surrounding syntax for each recognized form ({{.x}}, {{x}}, $x, [[x]]). Used
|
||||
* when a variable is renamed so its usages across queries stay valid.
|
||||
*/
|
||||
export function rewriteVariableReferences(
|
||||
text: string,
|
||||
oldName: string,
|
||||
newName: string,
|
||||
): string {
|
||||
if (!text || !oldName || oldName === newName) {
|
||||
return text;
|
||||
}
|
||||
const name = escapeRegExp(oldName);
|
||||
return text
|
||||
.replace(
|
||||
new RegExp(`(\\{\\{\\s*?\\.)${name}(\\s*?\\}\\})`, 'g'),
|
||||
`$1${newName}$2`,
|
||||
)
|
||||
.replace(new RegExp(`(\\{\\{\\s*)${name}(\\s*\\}\\})`, 'g'), `$1${newName}$2`)
|
||||
.replace(new RegExp(`\\$${name}\\b`, 'g'), `$${newName}`)
|
||||
.replace(
|
||||
new RegExp(`(\\[\\[\\s*)${name}(\\s*\\]\\])`, 'g'),
|
||||
`$1${newName}$2`,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Best-effort removal of the clause that references `variableName` from an
|
||||
* ` AND `-joined filter expression (e.g. a builder query's `filter.expression`).
|
||||
* Any top-level `AND` part that references the variable is dropped. It does not
|
||||
* understand `OR`/nested parentheses, so it is a starting point the user reviews
|
||||
* before applying — never an automatic edit of raw PromQL/ClickHouse.
|
||||
*/
|
||||
export function removeVariableReferenceClause(
|
||||
expression: string,
|
||||
variableName: string,
|
||||
): string {
|
||||
if (!expression) {
|
||||
return expression;
|
||||
}
|
||||
return expression
|
||||
.split(' AND ')
|
||||
.map((part) => part.trim())
|
||||
.filter(Boolean)
|
||||
.filter((part) => !textContainsVariableReference(part, variableName))
|
||||
.join(' AND ');
|
||||
}
|
||||
|
||||
@@ -1,86 +0,0 @@
|
||||
.body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
max-height: 60vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.intro {
|
||||
color: var(--l2-foreground);
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
border: 1px solid var(--l2-border);
|
||||
border-radius: 6px;
|
||||
background: var(--l1-background);
|
||||
}
|
||||
|
||||
.rowHeader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.sourceLabel {
|
||||
color: var(--l1-foreground);
|
||||
font-weight: 600;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.kindTag {
|
||||
color: var(--l2-foreground);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
padding: 2px 8px;
|
||||
border: 1px solid var(--l2-border);
|
||||
border-radius: 4px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.field {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.fieldLabel {
|
||||
color: var(--l2-foreground);
|
||||
font-size: 11px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.textArea {
|
||||
font-family: var(--font-mono, monospace);
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.warning {
|
||||
color: var(--warning-foreground, #d97706);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
.footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 8px;
|
||||
}
|
||||
@@ -1,159 +0,0 @@
|
||||
import { Check, X } from '@signozhq/icons';
|
||||
import { Button } from '@signozhq/ui/button';
|
||||
import { DialogWrapper } from '@signozhq/ui/dialog';
|
||||
import { Typography } from '@signozhq/ui/typography';
|
||||
// eslint-disable-next-line signoz/no-antd-components -- multiline TextArea + Checkbox have no @signozhq/ui equivalent yet
|
||||
import { Checkbox, Input as AntdInput } from 'antd';
|
||||
import cx from 'classnames';
|
||||
import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
|
||||
|
||||
import type { VariableImpactMode, VariableUsage } from '../variableUsages';
|
||||
import { useVariableImpactState } from './useVariableImpactState';
|
||||
import styles from './VariableImpactDialog.module.scss';
|
||||
|
||||
const KIND_LABEL: Record<VariableUsage['kind'], string> = {
|
||||
builder: 'Query builder',
|
||||
promql: 'PromQL',
|
||||
clickhouse: 'ClickHouse',
|
||||
variable: 'Variable',
|
||||
};
|
||||
|
||||
interface VariableImpactDialogProps {
|
||||
open: boolean;
|
||||
mode: VariableImpactMode;
|
||||
/** The variable being renamed/deleted (its current name). */
|
||||
variableName: string;
|
||||
/** The new name (rename mode only). */
|
||||
newName?: string;
|
||||
usages: VariableUsage[];
|
||||
isLoading: boolean;
|
||||
onConfirm: (resolvedUsages: VariableUsage[]) => void;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Blocks a rename/delete of a referenced variable behind a review step: lists
|
||||
* every usage across panel queries (builder / PromQL / ClickHouse) and other
|
||||
* variables, shows the current vs resulting query, and lets the user edit each
|
||||
* result or exclude it before applying.
|
||||
*/
|
||||
function VariableImpactDialog({
|
||||
open,
|
||||
mode,
|
||||
variableName,
|
||||
newName,
|
||||
usages,
|
||||
isLoading,
|
||||
onConfirm,
|
||||
onClose,
|
||||
}: VariableImpactDialogProps): JSX.Element {
|
||||
const { rows, setResultingText, toggleIncluded, resolvedUsages } =
|
||||
useVariableImpactState(usages, open);
|
||||
|
||||
const isRename = mode === 'rename';
|
||||
const count = usages.length;
|
||||
const plural = count === 1 ? '' : 's';
|
||||
const intro = isRename
|
||||
? `$${variableName} is used in ${count} place${plural}. Review the updated queries before renaming to $${newName}.`
|
||||
: `$${variableName} is used in ${count} place${plural}. Edit or remove each usage before deleting.`;
|
||||
|
||||
const footer = (
|
||||
<div className={styles.footer}>
|
||||
<Button
|
||||
variant="solid"
|
||||
color="secondary"
|
||||
onClick={onClose}
|
||||
testId="variable-impact-cancel"
|
||||
>
|
||||
<X size={12} />
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
variant="solid"
|
||||
color={isRename ? 'primary' : 'destructive'}
|
||||
loading={isLoading}
|
||||
onClick={(): void => onConfirm(resolvedUsages)}
|
||||
testId="variable-impact-confirm"
|
||||
>
|
||||
<Check size={12} />
|
||||
{isRename ? 'Rename' : 'Delete'}
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<DialogWrapper
|
||||
open={open}
|
||||
onOpenChange={(isOpen): void => {
|
||||
if (!isOpen) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
title={isRename ? `Rename $${variableName}` : `Delete $${variableName}`}
|
||||
width="wide"
|
||||
showCloseButton={false}
|
||||
// Lift above the settings drawer (z ~1000); overlay off (it would only half-dim).
|
||||
style={{ zIndex: 1100 }}
|
||||
showOverlay={false}
|
||||
footer={footer}
|
||||
>
|
||||
<div className={styles.body}>
|
||||
<Typography.Text className={styles.intro}>{intro}</Typography.Text>
|
||||
<div className={styles.rows}>
|
||||
{rows.map((row) => {
|
||||
const stillReferences =
|
||||
row.included &&
|
||||
textContainsVariableReference(row.resultingText, variableName);
|
||||
return (
|
||||
<div
|
||||
key={row.id}
|
||||
className={styles.row}
|
||||
data-testid={`variable-impact-row-${row.id}`}
|
||||
>
|
||||
<div className={styles.rowHeader}>
|
||||
<Checkbox
|
||||
checked={row.included}
|
||||
onChange={(): void => toggleIncluded(row.id)}
|
||||
data-testid={`variable-impact-include-${row.id}`}
|
||||
>
|
||||
<span className={styles.sourceLabel}>{row.sourceLabel}</span>
|
||||
</Checkbox>
|
||||
<span className={styles.kindTag}>{KIND_LABEL[row.kind]}</span>
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<Typography.Text className={styles.fieldLabel}>
|
||||
Current
|
||||
</Typography.Text>
|
||||
<AntdInput.TextArea
|
||||
className={styles.textArea}
|
||||
value={row.currentText}
|
||||
readOnly
|
||||
autoSize={{ minRows: 1, maxRows: 4 }}
|
||||
/>
|
||||
</div>
|
||||
<div className={styles.field}>
|
||||
<Typography.Text className={styles.fieldLabel}>Result</Typography.Text>
|
||||
<AntdInput.TextArea
|
||||
className={cx(styles.textArea, !row.included && styles.disabled)}
|
||||
value={row.resultingText}
|
||||
disabled={!row.included}
|
||||
autoSize={{ minRows: 1, maxRows: 4 }}
|
||||
onChange={(e): void => setResultingText(row.id, e.target.value)}
|
||||
data-testid={`variable-impact-result-${row.id}`}
|
||||
/>
|
||||
{stillReferences ? (
|
||||
<Typography.Text className={styles.warning}>
|
||||
Still references ${variableName}
|
||||
</Typography.Text>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</DialogWrapper>
|
||||
);
|
||||
}
|
||||
|
||||
export default VariableImpactDialog;
|
||||
@@ -1,52 +0,0 @@
|
||||
import { useCallback, useEffect, useState } from 'react';
|
||||
|
||||
import type { VariableUsage } from '../variableUsages';
|
||||
|
||||
/** A usage row plus whether its edit will be applied on confirm. */
|
||||
export interface EditableVariableUsage extends VariableUsage {
|
||||
included: boolean;
|
||||
}
|
||||
|
||||
interface UseVariableImpactState {
|
||||
rows: EditableVariableUsage[];
|
||||
setResultingText: (id: string, text: string) => void;
|
||||
toggleIncluded: (id: string) => void;
|
||||
/** The included rows, as plain usages, to build the patch from. */
|
||||
resolvedUsages: VariableUsage[];
|
||||
}
|
||||
|
||||
/**
|
||||
* Editable state for the impact dialog: a per-usage copy the user can edit
|
||||
* (`resultingText`) and include/exclude before applying. Resets whenever the
|
||||
* dialog (re)opens for a fresh usage set.
|
||||
*/
|
||||
export function useVariableImpactState(
|
||||
usages: VariableUsage[],
|
||||
open: boolean,
|
||||
): UseVariableImpactState {
|
||||
const [rows, setRows] = useState<EditableVariableUsage[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (open) {
|
||||
setRows(usages.map((usage) => ({ ...usage, included: true })));
|
||||
}
|
||||
}, [open, usages]);
|
||||
|
||||
const setResultingText = useCallback((id: string, text: string): void => {
|
||||
setRows((prev) =>
|
||||
prev.map((row) => (row.id === id ? { ...row, resultingText: text } : row)),
|
||||
);
|
||||
}, []);
|
||||
|
||||
const toggleIncluded = useCallback((id: string): void => {
|
||||
setRows((prev) =>
|
||||
prev.map((row) =>
|
||||
row.id === id ? { ...row, included: !row.included } : row,
|
||||
),
|
||||
);
|
||||
}, []);
|
||||
|
||||
const resolvedUsages: VariableUsage[] = rows.filter((row) => row.included);
|
||||
|
||||
return { rows, setResultingText, toggleIncluded, resolvedUsages };
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
import type { DashboardtypesGettableDashboardV2DTO } from 'api/generated/services/sigNoz.schemas';
|
||||
|
||||
import {
|
||||
emptyVariableFormModel,
|
||||
type VariableFormModel,
|
||||
} from '../variableFormModel';
|
||||
import { findVariableUsages } from '../variableUsages';
|
||||
|
||||
// Identity adapter so `spec.variables` can be plain form models in the test.
|
||||
jest.mock('../variableAdapters', () => ({
|
||||
dtoToFormModel: (dto: unknown): unknown => dto,
|
||||
}));
|
||||
|
||||
function variable(overrides: Partial<VariableFormModel>): VariableFormModel {
|
||||
return { ...emptyVariableFormModel(), ...overrides };
|
||||
}
|
||||
|
||||
function builderPanel(name: string, expression: string): unknown {
|
||||
return {
|
||||
spec: {
|
||||
display: { name },
|
||||
queries: [
|
||||
{
|
||||
spec: {
|
||||
plugin: { kind: 'signoz/BuilderQuery', spec: { filter: { expression } } },
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function promqlPanel(name: string, query: string): unknown {
|
||||
return {
|
||||
spec: {
|
||||
display: { name },
|
||||
queries: [
|
||||
{ spec: { plugin: { kind: 'signoz/PromQLQuery', spec: { query } } } },
|
||||
],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
function dashboard(
|
||||
panels: Record<string, unknown>,
|
||||
variables: VariableFormModel[],
|
||||
): DashboardtypesGettableDashboardV2DTO {
|
||||
return {
|
||||
spec: { panels, variables },
|
||||
} as unknown as DashboardtypesGettableDashboardV2DTO;
|
||||
}
|
||||
|
||||
describe('findVariableUsages', () => {
|
||||
const dash = dashboard(
|
||||
{
|
||||
p1: builderPanel('Panel One', "service IN $svc AND env = 'prod'"),
|
||||
p2: promqlPanel('Panel Two', 'up{s="$svc"}'),
|
||||
p3: builderPanel('Unrelated', "env = 'prod'"),
|
||||
},
|
||||
[
|
||||
variable({ name: 'svc', type: 'QUERY' }),
|
||||
variable({
|
||||
name: 'other',
|
||||
type: 'QUERY',
|
||||
queryValue: 'SELECT x WHERE s = $svc',
|
||||
}),
|
||||
variable({ name: 'plain', type: 'QUERY', queryValue: 'SELECT y' }),
|
||||
],
|
||||
);
|
||||
|
||||
it('finds panel (builder + promql) and variable usages, skipping unrelated ones', () => {
|
||||
const usages = findVariableUsages(dash, 'svc', 'rename', 'zone');
|
||||
const ids = usages.map((u) => u.id).sort();
|
||||
expect(ids).toStrictEqual(['panel:p1:0', 'panel:p2:0', 'variable:other:0']);
|
||||
});
|
||||
|
||||
it('rewrites references for a rename across all kinds', () => {
|
||||
const usages = findVariableUsages(dash, 'svc', 'rename', 'zone');
|
||||
const byId = Object.fromEntries(usages.map((u) => [u.id, u.resultingText]));
|
||||
expect(byId['panel:p1:0']).toBe("service IN $zone AND env = 'prod'");
|
||||
expect(byId['panel:p2:0']).toBe('up{s="$zone"}');
|
||||
expect(byId['variable:other:0']).toBe('SELECT x WHERE s = $zone');
|
||||
});
|
||||
|
||||
it('strips builder clauses on delete but leaves raw/variable queries for review', () => {
|
||||
const usages = findVariableUsages(dash, 'svc', 'delete');
|
||||
const byId = Object.fromEntries(usages.map((u) => [u.id, u.resultingText]));
|
||||
// Builder: the clause referencing $svc is dropped.
|
||||
expect(byId['panel:p1:0']).toBe("env = 'prod'");
|
||||
// Raw PromQL + variable query: unchanged (user edits).
|
||||
expect(byId['panel:p2:0']).toBe('up{s="$svc"}');
|
||||
expect(byId['variable:other:0']).toBe('SELECT x WHERE s = $svc');
|
||||
});
|
||||
|
||||
it('returns nothing for an unreferenced variable', () => {
|
||||
expect(findVariableUsages(dash, 'nope', 'delete')).toStrictEqual([]);
|
||||
});
|
||||
});
|
||||
@@ -17,17 +17,7 @@ import {
|
||||
emptyVariableFormModel,
|
||||
type VariableFormModel,
|
||||
} from './variableFormModel';
|
||||
import {
|
||||
applyVariableQueryEdits,
|
||||
buildVariableImpactPatch,
|
||||
} from './variableImpactPatch';
|
||||
import {
|
||||
findVariableUsages,
|
||||
type VariableImpactMode,
|
||||
type VariableUsage,
|
||||
} from './variableUsages';
|
||||
import VariableForm from './VariableForm/VariableForm';
|
||||
import VariableImpactDialog from './VariableImpactDialog/VariableImpactDialog';
|
||||
import VariablesList from './VariablesList';
|
||||
import styles from './Variables.module.scss';
|
||||
import AddVariableButton from './components/AddVariableButton';
|
||||
@@ -69,16 +59,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
|
||||
null,
|
||||
);
|
||||
const [applyToAllIndex, setApplyToAllIndex] = useState<number | null>(null);
|
||||
// A pending rename/delete that touches other queries — resolved via the impact
|
||||
// dialog before it is applied. `nextVariables` is the array to persist (with the
|
||||
// rename/delete already applied), before any variable-query edits.
|
||||
const [impact, setImpact] = useState<{
|
||||
mode: VariableImpactMode;
|
||||
variableName: string;
|
||||
newName?: string;
|
||||
usages: VariableUsage[];
|
||||
nextVariables: VariableFormModel[];
|
||||
} | null>(null);
|
||||
|
||||
const editingFormModel: VariableFormModel | null = useMemo(() => {
|
||||
if (!isEditing) {
|
||||
@@ -124,38 +104,12 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
|
||||
formModel: VariableFormModel,
|
||||
selectedPanelIds: string[],
|
||||
): void => {
|
||||
const editingIndex = isEditing?.type === 'edit' ? isEditing.index : null;
|
||||
const oldName = editingIndex !== null ? variables[editingIndex].name : null;
|
||||
|
||||
const next = [...variables];
|
||||
if (isEditing?.type === 'new') {
|
||||
next.push(formModel);
|
||||
} else if (editingIndex !== null) {
|
||||
next[editingIndex] = formModel;
|
||||
} else if (isEditing?.type === 'edit') {
|
||||
next[isEditing.index] = formModel;
|
||||
}
|
||||
|
||||
// A rename that other queries/variables reference must be reviewed first, so
|
||||
// the references are rewritten alongside the rename (never left dangling).
|
||||
if (oldName && oldName !== formModel.name) {
|
||||
const usages = findVariableUsages(
|
||||
dashboard,
|
||||
oldName,
|
||||
'rename',
|
||||
formModel.name,
|
||||
);
|
||||
if (usages.length > 0) {
|
||||
setIsEditing(null);
|
||||
setImpact({
|
||||
mode: 'rename',
|
||||
variableName: oldName,
|
||||
newName: formModel.name,
|
||||
usages,
|
||||
nextVariables: next,
|
||||
});
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
setIsEditing(null);
|
||||
setVariables(next);
|
||||
void (async (): Promise<void> => {
|
||||
@@ -195,57 +149,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
|
||||
setConfirmDeleteIndex(null);
|
||||
};
|
||||
|
||||
// Delete requested from the list: if the variable is referenced anywhere, block
|
||||
// and open the impact dialog; otherwise fall through to the simple confirm.
|
||||
const requestDelete = (index: number): void => {
|
||||
const usages = findVariableUsages(dashboard, variables[index].name, 'delete');
|
||||
if (usages.length > 0) {
|
||||
setImpact({
|
||||
mode: 'delete',
|
||||
variableName: variables[index].name,
|
||||
usages,
|
||||
nextVariables: variables.filter((_, i) => i !== index),
|
||||
});
|
||||
return;
|
||||
}
|
||||
setConfirmDeleteIndex(index);
|
||||
};
|
||||
|
||||
// Applies a resolved rename/delete: the variables array (rename/delete + edited
|
||||
// variable queries) and each touched panel's queries, in one atomic patch.
|
||||
const handleImpactConfirm = async (
|
||||
resolvedUsages: VariableUsage[],
|
||||
): Promise<void> => {
|
||||
if (!impact) {
|
||||
return;
|
||||
}
|
||||
const nextVariables = applyVariableQueryEdits(
|
||||
impact.nextVariables,
|
||||
resolvedUsages,
|
||||
);
|
||||
const ops = buildVariableImpactPatch(
|
||||
dashboard,
|
||||
nextVariables,
|
||||
resolvedUsages,
|
||||
);
|
||||
setVariables(nextVariables);
|
||||
try {
|
||||
await patchAsync(ops);
|
||||
toast.success(
|
||||
impact.mode === 'rename'
|
||||
? `Renamed to $${impact.newName}`
|
||||
: `Deleted $${impact.variableName}`,
|
||||
);
|
||||
} catch {
|
||||
toast.error(
|
||||
impact.mode === 'rename'
|
||||
? 'Could not rename the variable'
|
||||
: 'Could not delete the variable',
|
||||
);
|
||||
}
|
||||
setImpact(null);
|
||||
};
|
||||
|
||||
const applyToAllVariable =
|
||||
applyToAllIndex === null ? null : variables[applyToAllIndex];
|
||||
|
||||
@@ -299,7 +202,7 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
|
||||
canEdit={isEditable}
|
||||
confirmingIndex={confirmDeleteIndex}
|
||||
onEdit={(index): void => setIsEditing({ type: 'edit', index })}
|
||||
onRequestDelete={requestDelete}
|
||||
onRequestDelete={(index): void => setConfirmDeleteIndex(index)}
|
||||
onConfirmDelete={handleConfirmDelete}
|
||||
onCancelDelete={(): void => setConfirmDeleteIndex(null)}
|
||||
onMove={handleMove}
|
||||
@@ -317,16 +220,6 @@ function VariablesSettings({ dashboard }: VariablesSettingsProps): JSX.Element {
|
||||
onConfirm={(): void => void handleConfirmApplyToAll()}
|
||||
onClose={(): void => setApplyToAllIndex(null)}
|
||||
/>
|
||||
<VariableImpactDialog
|
||||
open={impact !== null}
|
||||
mode={impact?.mode ?? 'delete'}
|
||||
variableName={impact?.variableName ?? ''}
|
||||
newName={impact?.newName}
|
||||
usages={impact?.usages ?? []}
|
||||
isLoading={isPatching}
|
||||
onConfirm={(resolved): void => void handleImpactConfirm(resolved)}
|
||||
onClose={(): void => setImpact(null)}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,123 +0,0 @@
|
||||
import type {
|
||||
DashboardtypesGettableDashboardV2DTO,
|
||||
DashboardtypesJSONPatchOperationDTO,
|
||||
DashboardtypesQueryDTO,
|
||||
Querybuildertypesv5CompositeQueryDTO,
|
||||
} from 'api/generated/services/sigNoz.schemas';
|
||||
import { cloneDeep } from 'lodash-es';
|
||||
|
||||
import { formModelToDto } from './variableAdapters';
|
||||
import type { VariableFormModel } from './variableFormModel';
|
||||
import { buildVariablesPatch } from './variablePatchOps';
|
||||
import type { VariableUsage, VariableUsageKind } from './variableUsages';
|
||||
|
||||
/** Minimal writable view of an envelope spec's reference-bearing fields. */
|
||||
interface WritableSpec {
|
||||
query?: string;
|
||||
filter?: { expression?: string };
|
||||
}
|
||||
|
||||
/** Writes the resolved text into the spec's builder filter or raw query field. */
|
||||
function writeSpecText(
|
||||
spec: WritableSpec,
|
||||
kind: VariableUsageKind,
|
||||
text: string,
|
||||
): void {
|
||||
if (kind === 'builder') {
|
||||
spec.filter = { ...(spec.filter ?? {}), expression: text };
|
||||
} else {
|
||||
spec.query = text;
|
||||
}
|
||||
}
|
||||
|
||||
/** Applies one panel usage's edited text into a (cloned) queries array in place. */
|
||||
function applyPanelUsage(
|
||||
queries: DashboardtypesQueryDTO[],
|
||||
usage: VariableUsage,
|
||||
): void {
|
||||
const plugin = queries[0]?.spec?.plugin;
|
||||
if (!plugin?.spec) {
|
||||
return;
|
||||
}
|
||||
if (plugin.kind === 'signoz/CompositeQuery') {
|
||||
const composite = plugin.spec as Querybuildertypesv5CompositeQueryDTO;
|
||||
const envelope = (composite.queries ?? [])[usage.envelopeIndex];
|
||||
if (envelope?.spec) {
|
||||
writeSpecText(
|
||||
envelope.spec as WritableSpec,
|
||||
usage.kind,
|
||||
usage.resultingText,
|
||||
);
|
||||
}
|
||||
} else {
|
||||
// Bare BuilderQuery / PromQLQuery / ClickHouseSQL — the plugin spec is the
|
||||
// single envelope (index 0).
|
||||
writeSpecText(plugin.spec as WritableSpec, usage.kind, usage.resultingText);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies the variable-definition usages' edited text back into the matching
|
||||
* variable's `queryValue`, so a renamed/deleted variable's references inside
|
||||
* another query variable are updated alongside the panels.
|
||||
*/
|
||||
export function applyVariableQueryEdits(
|
||||
variables: VariableFormModel[],
|
||||
usages: VariableUsage[],
|
||||
): VariableFormModel[] {
|
||||
const edits = new Map(
|
||||
usages
|
||||
.filter((usage) => usage.sourceType === 'variable')
|
||||
.map((usage) => [usage.sourceId, usage.resultingText]),
|
||||
);
|
||||
if (edits.size === 0) {
|
||||
return variables;
|
||||
}
|
||||
return variables.map((variable) =>
|
||||
edits.has(variable.name)
|
||||
? { ...variable, queryValue: edits.get(variable.name) as string }
|
||||
: variable,
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Builds the atomic JSON-Patch for a variable rename/delete impact: replaces the
|
||||
* whole variables array (which the caller has already updated for the rename/
|
||||
* delete and any variable-query edits) and replaces each touched panel's queries
|
||||
* with the user's resolved text.
|
||||
*/
|
||||
export function buildVariableImpactPatch(
|
||||
dashboard: DashboardtypesGettableDashboardV2DTO,
|
||||
nextVariables: VariableFormModel[],
|
||||
usages: VariableUsage[],
|
||||
): DashboardtypesJSONPatchOperationDTO[] {
|
||||
const ops: DashboardtypesJSONPatchOperationDTO[] = [
|
||||
...buildVariablesPatch(nextVariables.map(formModelToDto)),
|
||||
];
|
||||
|
||||
const panels = dashboard.spec.panels ?? {};
|
||||
const byPanel = new Map<string, VariableUsage[]>();
|
||||
usages
|
||||
.filter((usage) => usage.sourceType === 'panel')
|
||||
.forEach((usage) => {
|
||||
const list = byPanel.get(usage.sourceId) ?? [];
|
||||
list.push(usage);
|
||||
byPanel.set(usage.sourceId, list);
|
||||
});
|
||||
|
||||
byPanel.forEach((list, panelId) => {
|
||||
const panel = panels[panelId];
|
||||
if (!panel?.spec?.queries?.length) {
|
||||
return;
|
||||
}
|
||||
const queries = cloneDeep(panel.spec.queries);
|
||||
list.forEach((usage) => applyPanelUsage(queries, usage));
|
||||
ops.push({
|
||||
op: 'replace' as DashboardtypesJSONPatchOperationDTO['op'],
|
||||
path: `/spec/panels/${panelId}/spec/queries`,
|
||||
value: queries,
|
||||
});
|
||||
});
|
||||
|
||||
return ops;
|
||||
}
|
||||
@@ -1,163 +0,0 @@
|
||||
import type {
|
||||
DashboardtypesGettableDashboardV2DTO,
|
||||
Querybuildertypesv5QueryEnvelopeDTO,
|
||||
} from 'api/generated/services/sigNoz.schemas';
|
||||
import {
|
||||
removeVariableReferenceClause,
|
||||
rewriteVariableReferences,
|
||||
textContainsVariableReference,
|
||||
} from 'lib/dashboardVariables/variableReference';
|
||||
|
||||
import { toQueryEnvelopes } from '../../queryV5/buildQueryRangeRequest';
|
||||
import { dtoToFormModel } from './variableAdapters';
|
||||
|
||||
/** The kind of query text a variable is referenced from. */
|
||||
export type VariableUsageKind =
|
||||
| 'builder'
|
||||
| 'promql'
|
||||
| 'clickhouse'
|
||||
| 'variable';
|
||||
|
||||
/** Whether the impact is a rename (rewrite refs) or a delete (remove refs). */
|
||||
export type VariableImpactMode = 'rename' | 'delete';
|
||||
|
||||
/**
|
||||
* One place a variable is referenced — a panel query's builder filter expression,
|
||||
* a PromQL/ClickHouse query string, or another variable's query definition. Each
|
||||
* usage is a single editable text field: `currentText` is what exists today,
|
||||
* `resultingText` is the proposed rewrite (rename) or removal (delete) the user
|
||||
* can review and edit before applying.
|
||||
*/
|
||||
export interface VariableUsage {
|
||||
/** Stable key: `${sourceType}:${sourceId}:${envelopeIndex}`. */
|
||||
id: string;
|
||||
sourceType: 'panel' | 'variable';
|
||||
/** Panel id or referencing variable's name. */
|
||||
sourceId: string;
|
||||
/** Human label: panel display name or `$variableName`. */
|
||||
sourceLabel: string;
|
||||
kind: VariableUsageKind;
|
||||
/** Index into the panel's query envelopes (0 for a variable definition). */
|
||||
envelopeIndex: number;
|
||||
currentText: string;
|
||||
resultingText: string;
|
||||
}
|
||||
|
||||
/** The reference-bearing text + kind for one query envelope, if any. */
|
||||
function envelopeReferenceText(
|
||||
envelope: Querybuildertypesv5QueryEnvelopeDTO,
|
||||
): { kind: VariableUsageKind; text: string } | null {
|
||||
const spec = envelope.spec as
|
||||
| { query?: string; filter?: { expression?: string } }
|
||||
| undefined;
|
||||
if (envelope.type === 'builder_query') {
|
||||
const text = spec?.filter?.expression;
|
||||
return typeof text === 'string' ? { kind: 'builder', text } : null;
|
||||
}
|
||||
if (envelope.type === 'promql') {
|
||||
return typeof spec?.query === 'string'
|
||||
? { kind: 'promql', text: spec.query }
|
||||
: null;
|
||||
}
|
||||
if (envelope.type === 'clickhouse_sql') {
|
||||
return typeof spec?.query === 'string'
|
||||
? { kind: 'clickhouse', text: spec.query }
|
||||
: null;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
/** The proposed text after a rename (rewrite) or delete (best-effort removal). */
|
||||
function computeResultingText(
|
||||
kind: VariableUsageKind,
|
||||
text: string,
|
||||
variableName: string,
|
||||
mode: VariableImpactMode,
|
||||
newName: string,
|
||||
): string {
|
||||
if (mode === 'rename') {
|
||||
return rewriteVariableReferences(text, variableName, newName);
|
||||
}
|
||||
// delete: only builder filter clauses can be safely auto-stripped; raw PromQL/
|
||||
// ClickHouse and variable queries are left for the user to edit.
|
||||
return kind === 'builder'
|
||||
? removeVariableReferenceClause(text, variableName)
|
||||
: text;
|
||||
}
|
||||
|
||||
/**
|
||||
* Finds every usage of `variableName` across the dashboard's panel queries
|
||||
* (builder / PromQL / ClickHouse) and other variables' query definitions, with a
|
||||
* proposed `resultingText` for the given mode. Consumed by the impact dialog that
|
||||
* blocks a rename/delete until the user resolves each usage.
|
||||
*/
|
||||
export function findVariableUsages(
|
||||
dashboard: DashboardtypesGettableDashboardV2DTO,
|
||||
variableName: string,
|
||||
mode: VariableImpactMode,
|
||||
newName = '',
|
||||
): VariableUsage[] {
|
||||
if (!variableName) {
|
||||
return [];
|
||||
}
|
||||
const usages: VariableUsage[] = [];
|
||||
const spec = dashboard.spec;
|
||||
|
||||
Object.entries(spec.panels ?? {}).forEach(([panelId, panel]) => {
|
||||
const queries = panel?.spec?.queries;
|
||||
if (!queries?.length) {
|
||||
return;
|
||||
}
|
||||
toQueryEnvelopes(queries).forEach((envelope, index) => {
|
||||
const ref = envelopeReferenceText(envelope);
|
||||
if (!ref || !textContainsVariableReference(ref.text, variableName)) {
|
||||
return;
|
||||
}
|
||||
usages.push({
|
||||
id: `panel:${panelId}:${index}`,
|
||||
sourceType: 'panel',
|
||||
sourceId: panelId,
|
||||
sourceLabel: panel.spec?.display?.name || panelId,
|
||||
kind: ref.kind,
|
||||
envelopeIndex: index,
|
||||
currentText: ref.text,
|
||||
resultingText: computeResultingText(
|
||||
ref.kind,
|
||||
ref.text,
|
||||
variableName,
|
||||
mode,
|
||||
newName,
|
||||
),
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
(spec.variables ?? []).map(dtoToFormModel).forEach((variable) => {
|
||||
if (
|
||||
variable.name === variableName ||
|
||||
variable.type !== 'QUERY' ||
|
||||
!variable.queryValue ||
|
||||
!textContainsVariableReference(variable.queryValue, variableName)
|
||||
) {
|
||||
return;
|
||||
}
|
||||
usages.push({
|
||||
id: `variable:${variable.name}:0`,
|
||||
sourceType: 'variable',
|
||||
sourceId: variable.name,
|
||||
sourceLabel: `$${variable.name}`,
|
||||
kind: 'variable',
|
||||
envelopeIndex: 0,
|
||||
currentText: variable.queryValue,
|
||||
resultingText: computeResultingText(
|
||||
'variable',
|
||||
variable.queryValue,
|
||||
variableName,
|
||||
mode,
|
||||
newName,
|
||||
),
|
||||
});
|
||||
});
|
||||
|
||||
return usages;
|
||||
}
|
||||
@@ -92,7 +92,6 @@ function Panel({
|
||||
panelId={panelId}
|
||||
data={data}
|
||||
isFetching={isFetching}
|
||||
isVisible={isVisible}
|
||||
isPreviousData={isPreviousData}
|
||||
error={error}
|
||||
refetch={refetch}
|
||||
|
||||
@@ -23,8 +23,6 @@ interface PanelBodyProps {
|
||||
panelId: string;
|
||||
data: PanelQueryData;
|
||||
isFetching: boolean;
|
||||
/** Panel not yet scrolled into view — its fetch is deferred, so show the loader rather than NoData. */
|
||||
isVisible?: boolean;
|
||||
/** Showing a prior page's data while the next loads; forwarded so list renderers can show skeletons. */
|
||||
isPreviousData?: boolean;
|
||||
error: Error | null;
|
||||
@@ -56,7 +54,6 @@ function PanelBody({
|
||||
panelId,
|
||||
data,
|
||||
isFetching,
|
||||
isVisible,
|
||||
isPreviousData,
|
||||
error,
|
||||
refetch,
|
||||
@@ -108,9 +105,9 @@ function PanelBody({
|
||||
);
|
||||
}
|
||||
|
||||
// Full-panel loader on first fetch or while the fetch is deferred (off-screen); a refetch
|
||||
// over existing data keeps the renderer mounted, empty data loads via NoData.
|
||||
if ((isFetching || isVisible === false) && !hasData) {
|
||||
// Full-panel loader only on first fetch; a refetch over existing data keeps the renderer
|
||||
// mounted (e.g. list page change). A refetch over empty data loads via NoData.
|
||||
if (isFetching && !hasData) {
|
||||
return <PanelLoader />;
|
||||
}
|
||||
|
||||
|
||||
@@ -79,21 +79,6 @@ describe('PanelBody', () => {
|
||||
expect(screen.queryByTestId('mock-renderer')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('shows the loader while the fetch is deferred (panel not yet scrolled into view)', () => {
|
||||
render(
|
||||
<PanelBody
|
||||
{...baseProps}
|
||||
panel={runnablePanel()}
|
||||
data={{} as PanelQueryData}
|
||||
isFetching={false}
|
||||
isVisible={false}
|
||||
/>,
|
||||
);
|
||||
|
||||
expect(screen.getByTestId('panel-loading')).toBeInTheDocument();
|
||||
expect(screen.queryByTestId('mock-renderer')).not.toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('keeps the renderer mounted during a refetch over existing data (e.g. list page change)', () => {
|
||||
render(
|
||||
<PanelBody
|
||||
|
||||
@@ -113,8 +113,8 @@ function ViewPanelModalHeader({
|
||||
/>
|
||||
<Button
|
||||
size="icon"
|
||||
variant="outlined"
|
||||
color="secondary"
|
||||
variant="solid"
|
||||
color="primary"
|
||||
onClick={onRefresh}
|
||||
disabled={isFetching}
|
||||
aria-label="Refresh"
|
||||
|
||||
@@ -22,7 +22,6 @@ function SectionGrid({
|
||||
sections,
|
||||
}: SectionGridProps): JSX.Element {
|
||||
const isEditable = useDashboardStore((s) => s.isEditable);
|
||||
|
||||
const rglLayout = useMemo<Layout[]>(
|
||||
() =>
|
||||
items.map((item) => ({
|
||||
|
||||
@@ -10,10 +10,6 @@ const VIEWPORT_OBSERVER_OPTIONS: IntersectionObserverInit = {
|
||||
rootMargin: '200px',
|
||||
};
|
||||
|
||||
// Start observing after RGL's mount unfold settles, so a panel that only
|
||||
// transiently overlaps the viewport during layout doesn't fire a throwaway fetch.
|
||||
const OBSERVER_START_DELAY_MS = 350;
|
||||
|
||||
interface SectionGridItemProps {
|
||||
panel: DashboardtypesPanelDTO;
|
||||
panelId: string;
|
||||
@@ -21,9 +17,9 @@ interface SectionGridItemProps {
|
||||
}
|
||||
|
||||
/**
|
||||
* Lazy-loads a single panel: tracks its live viewport intersection and passes it to
|
||||
* the presentational Panel as `isVisible`, so a board of many panels only fetches
|
||||
* (and refetches on time change / auto-refresh) what's on screen.
|
||||
* Lazy-loads a single panel: watches its own viewport intersection (latched) and
|
||||
* passes it to the presentational Panel as `isVisible`, so a board of many panels
|
||||
* only fetches what's on screen.
|
||||
*/
|
||||
function SectionGridItem({
|
||||
panel,
|
||||
@@ -34,10 +30,7 @@ function SectionGridItem({
|
||||
const isVisible = useIntersectionObserver(
|
||||
containerRef,
|
||||
VIEWPORT_OBSERVER_OPTIONS,
|
||||
// Not once: track the live viewport so a time change / auto-refresh only
|
||||
// refetches on-screen panels (off-screen ones stay query-disabled).
|
||||
false,
|
||||
OBSERVER_START_DELAY_MS,
|
||||
true,
|
||||
);
|
||||
useScrollIntoView(panelId, containerRef);
|
||||
|
||||
|
||||
@@ -23,7 +23,7 @@ describe('useScrollIntoView', () => {
|
||||
|
||||
expect(scrollIntoView).toHaveBeenCalledWith({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
block: 'start',
|
||||
});
|
||||
expect(useScrollIntoViewStore.getState().scrollTargetId).toBeNull();
|
||||
});
|
||||
@@ -38,7 +38,7 @@ describe('useScrollIntoView', () => {
|
||||
|
||||
expect(scrollIntoView).toHaveBeenCalledWith({
|
||||
behavior: 'smooth',
|
||||
block: 'center',
|
||||
block: 'start',
|
||||
});
|
||||
expect(useScrollIntoViewStore.getState().scrollTargetId).toBeNull();
|
||||
});
|
||||
|
||||
@@ -9,7 +9,7 @@ import { useScrollIntoViewStore } from '../../../store/useScrollIntoViewStore';
|
||||
export function useScrollIntoView(
|
||||
id: string,
|
||||
ref: RefObject<HTMLElement>,
|
||||
block: ScrollLogicalPosition = 'center',
|
||||
block: ScrollLogicalPosition = 'start',
|
||||
): void {
|
||||
const scrollTargetId = useScrollIntoViewStore((s) => s.scrollTargetId);
|
||||
const setScrollTargetId = useScrollIntoViewStore((s) => s.setScrollTargetId);
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
import { useMemo } from 'react';
|
||||
import { SolidInfoCircle } from '@signozhq/icons';
|
||||
import { Typography } from '@signozhq/ui/typography';
|
||||
// eslint-disable-next-line signoz/no-antd-components -- lightweight description tooltip, matches V1
|
||||
import { Tooltip } from 'antd';
|
||||
import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
|
||||
|
||||
import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
|
||||
import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
|
||||
import CustomSelector from './selectors/CustomSelector';
|
||||
import DynamicSelector from './selectors/DynamicSelector';
|
||||
import QuerySelector from './selectors/QuerySelector';
|
||||
import TextSelector from './selectors/TextSelector';
|
||||
import VariableValueControl from './selectors/VariableValueControl';
|
||||
import { useVariableFetchState } from './useVariableFetchState';
|
||||
import styles from './VariablesBar.module.scss';
|
||||
import VariableTooltip from './VariableTooltip';
|
||||
|
||||
interface VariableSelectorProps {
|
||||
variable: VariableFormModel;
|
||||
@@ -34,63 +32,50 @@ function VariableSelector({
|
||||
onChange,
|
||||
onAutoSelect,
|
||||
}: VariableSelectorProps): JSX.Element {
|
||||
// Dependency links shown in the hover tooltip: variables this one's query
|
||||
// references (dependsOn) and query variables that reference this one (usedBy).
|
||||
const { dependsOn, usedBy } = useMemo(() => {
|
||||
const references = (text: string | undefined, name: string): boolean =>
|
||||
!!text && !!name && textContainsVariableReference(text, name);
|
||||
return {
|
||||
dependsOn:
|
||||
variable.type === 'QUERY'
|
||||
? variables
|
||||
.filter(
|
||||
(v) =>
|
||||
v.name !== variable.name && references(variable.queryValue, v.name),
|
||||
)
|
||||
.map((v) => v.name)
|
||||
: [],
|
||||
usedBy: variables
|
||||
.filter(
|
||||
(v) =>
|
||||
v.type === 'QUERY' &&
|
||||
v.name !== variable.name &&
|
||||
references(v.queryValue, variable.name),
|
||||
)
|
||||
.map((v) => v.name),
|
||||
};
|
||||
}, [variable, variables]);
|
||||
|
||||
const hasTooltip =
|
||||
!!variable.description || dependsOn.length > 0 || usedBy.length > 0;
|
||||
|
||||
// Surface the fetch on the bar itself: a bar flush along the control's bottom
|
||||
// edge while a QUERY/DYNAMIC variable is loading (or waiting on a parent), so the
|
||||
// user sees options are being fetched without opening the dropdown.
|
||||
const { isVariableFetching, isVariableWaiting } = useVariableFetchState(
|
||||
variable.name,
|
||||
);
|
||||
const isFetchingOptions =
|
||||
(variable.type === 'QUERY' || variable.type === 'DYNAMIC') &&
|
||||
(isVariableFetching || isVariableWaiting);
|
||||
|
||||
const renderControl = (): JSX.Element =>
|
||||
variable.type === 'TEXT' ? (
|
||||
<TextSelector
|
||||
selection={selection}
|
||||
defaultValue={variable.textValue}
|
||||
onChange={onChange}
|
||||
testId={`variable-input-${variable.name}`}
|
||||
/>
|
||||
) : (
|
||||
<VariableValueControl
|
||||
variable={variable}
|
||||
variables={variables}
|
||||
selections={selections}
|
||||
selection={selection}
|
||||
onChange={onChange}
|
||||
onAutoSelect={onAutoSelect}
|
||||
/>
|
||||
);
|
||||
const renderControl = (): JSX.Element => {
|
||||
switch (variable.type) {
|
||||
case 'TEXT':
|
||||
return (
|
||||
<TextSelector
|
||||
selection={selection}
|
||||
defaultValue={variable.textValue}
|
||||
onChange={onChange}
|
||||
testId={`variable-input-${variable.name}`}
|
||||
/>
|
||||
);
|
||||
case 'QUERY':
|
||||
return (
|
||||
<QuerySelector
|
||||
variable={variable}
|
||||
selections={selections}
|
||||
selection={selection}
|
||||
onChange={onChange}
|
||||
onAutoSelect={onAutoSelect}
|
||||
/>
|
||||
);
|
||||
case 'DYNAMIC':
|
||||
return (
|
||||
<DynamicSelector
|
||||
variable={variable}
|
||||
variables={variables}
|
||||
selections={selections}
|
||||
selection={selection}
|
||||
onChange={onChange}
|
||||
onAutoSelect={onAutoSelect}
|
||||
/>
|
||||
);
|
||||
case 'CUSTOM':
|
||||
default:
|
||||
return (
|
||||
<CustomSelector
|
||||
variable={variable}
|
||||
selection={selection}
|
||||
onChange={onChange}
|
||||
onAutoSelect={onAutoSelect}
|
||||
/>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -99,29 +84,14 @@ function VariableSelector({
|
||||
>
|
||||
<Typography.Text className={styles.variableName}>
|
||||
${variable.name}
|
||||
{hasTooltip ? (
|
||||
<Tooltip
|
||||
title={
|
||||
<VariableTooltip
|
||||
description={variable.description}
|
||||
dependsOn={dependsOn}
|
||||
usedBy={usedBy}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{variable.description ? (
|
||||
<Tooltip title={variable.description}>
|
||||
<SolidInfoCircle className={styles.infoIcon} size={14} />
|
||||
</Tooltip>
|
||||
) : null}
|
||||
</Typography.Text>
|
||||
|
||||
<div className={styles.variableValue}>{renderControl()}</div>
|
||||
|
||||
{isFetchingOptions ? (
|
||||
<span
|
||||
className={styles.loadingBar}
|
||||
data-testid={`variable-loading-${variable.name}`}
|
||||
/>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,67 +0,0 @@
|
||||
import cx from 'classnames';
|
||||
|
||||
import styles from './VariablesBar.module.scss';
|
||||
|
||||
interface VariableTooltipProps {
|
||||
description?: string;
|
||||
/** Variables this one references (its query depends on their values). */
|
||||
dependsOn: string[];
|
||||
/** Variables whose queries reference this one. */
|
||||
usedBy: string[];
|
||||
}
|
||||
|
||||
/** Hover-tooltip body for a variable: its description plus its dependencies. */
|
||||
function VariableTooltip({
|
||||
description,
|
||||
dependsOn,
|
||||
usedBy,
|
||||
}: VariableTooltipProps): JSX.Element {
|
||||
const hasDependencies = dependsOn.length > 0 || usedBy.length > 0;
|
||||
|
||||
return (
|
||||
<div className={styles.tooltipContent}>
|
||||
{description ? (
|
||||
<div className={styles.tooltipDescription}>{description}</div>
|
||||
) : null}
|
||||
|
||||
{hasDependencies ? (
|
||||
<>
|
||||
{description ? <div className={styles.tooltipDivider} /> : null}
|
||||
{dependsOn.length > 0 ? (
|
||||
<div className={styles.tooltipSection}>
|
||||
<div className={cx(styles.tooltipLabel, styles.dependsColor)}>
|
||||
Depends on
|
||||
</div>
|
||||
<div className={styles.tooltipRefs}>
|
||||
{dependsOn.map((name) => (
|
||||
<span
|
||||
key={name}
|
||||
className={cx(styles.tooltipRef, styles.dependsColor)}
|
||||
>
|
||||
${name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{usedBy.length > 0 ? (
|
||||
<div className={styles.tooltipSection}>
|
||||
<div className={cx(styles.tooltipLabel, styles.usedByColor)}>
|
||||
Used by
|
||||
</div>
|
||||
<div className={styles.tooltipRefs}>
|
||||
{usedBy.map((name) => (
|
||||
<span key={name} className={cx(styles.tooltipRef, styles.usedByColor)}>
|
||||
${name}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default VariableTooltip;
|
||||
@@ -73,57 +73,10 @@
|
||||
}
|
||||
|
||||
.variableItem {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Loading indicator: an indeterminate bar flush along the control's bottom edge,
|
||||
// full width and overlaying the border so it reads as the input's own edge rather
|
||||
// than a separate element. Non-interactive so the name/description stays hoverable.
|
||||
.loadingBar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 2px;
|
||||
overflow: hidden;
|
||||
border-radius: 0 0 2px 2px;
|
||||
background: color-mix(in srgb, var(--bg-robin-500) 20%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.loadingBar::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 40%;
|
||||
border-radius: 2px;
|
||||
background: var(--bg-robin-500);
|
||||
animation: variable-loading-slide 1.1s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes variable-loading-slide {
|
||||
0% {
|
||||
left: -40%;
|
||||
}
|
||||
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.loadingBar::after {
|
||||
left: 0;
|
||||
width: 100%;
|
||||
animation: none;
|
||||
opacity: 0.7;
|
||||
}
|
||||
}
|
||||
|
||||
.variableName {
|
||||
display: flex;
|
||||
min-width: 56px;
|
||||
@@ -134,7 +87,7 @@
|
||||
border: 1px solid var(--l3-border);
|
||||
border-radius: 2px 0 0 2px;
|
||||
background: var(--l3-background);
|
||||
color: var(--bg-robin-400);
|
||||
color: var(--bg-robin-300);
|
||||
font-family: Inter;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
@@ -144,63 +97,11 @@
|
||||
|
||||
.infoIcon {
|
||||
display: inline-flex;
|
||||
margin-left: 6px;
|
||||
margin-left: 2px;
|
||||
color: var(--l2-foreground);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.tooltipContent {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
max-width: 240px;
|
||||
}
|
||||
|
||||
.tooltipDescription {
|
||||
font-size: 12px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
// Divider and labels use the tooltip's own text color at reduced opacity so they
|
||||
// read on the tooltip surface in either theme without hard-coding a palette.
|
||||
.tooltipDivider {
|
||||
height: 1px;
|
||||
background: currentColor;
|
||||
opacity: 0.16;
|
||||
}
|
||||
|
||||
.tooltipSection {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tooltipLabel {
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.tooltipRefs {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.tooltipRef {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
// Directional colors: parents (Depends on) in forest, children (Used by) in amber.
|
||||
.dependsColor {
|
||||
color: var(--bg-forest-500);
|
||||
}
|
||||
|
||||
.usedByColor {
|
||||
color: var(--bg-amber-500);
|
||||
}
|
||||
|
||||
.variableValue {
|
||||
display: flex;
|
||||
min-width: 120px;
|
||||
|
||||
@@ -1,153 +0,0 @@
|
||||
import {
|
||||
emptyVariableFormModel,
|
||||
type VariableFormModel,
|
||||
} from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import {
|
||||
configuredDefaultValue,
|
||||
reconcileWithOptions,
|
||||
resolveDefaultSelection,
|
||||
} from '../resolveVariableSelection';
|
||||
|
||||
function model(overrides: Partial<VariableFormModel>): VariableFormModel {
|
||||
return { ...emptyVariableFormModel(), ...overrides };
|
||||
}
|
||||
|
||||
describe('resolveDefaultSelection', () => {
|
||||
it('TEXT: uses defaultValue, then textValue, else empty string', () => {
|
||||
expect(
|
||||
resolveDefaultSelection(model({ type: 'TEXT', defaultValue: 'd' })),
|
||||
).toStrictEqual({ value: 'd', allSelected: false });
|
||||
expect(
|
||||
resolveDefaultSelection(model({ type: 'TEXT', textValue: 't' })),
|
||||
).toStrictEqual({ value: 't', allSelected: false });
|
||||
expect(resolveDefaultSelection(model({ type: 'TEXT' }))).toStrictEqual({
|
||||
value: '',
|
||||
allSelected: false,
|
||||
});
|
||||
});
|
||||
|
||||
it('list: ALL when allowAll (multi + showAllOption) and no default', () => {
|
||||
expect(
|
||||
resolveDefaultSelection(
|
||||
model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
|
||||
),
|
||||
).toStrictEqual({ value: null, allSelected: true });
|
||||
});
|
||||
|
||||
it('list: ALL sentinel default → ALL', () => {
|
||||
expect(
|
||||
resolveDefaultSelection(
|
||||
model({ type: 'CUSTOM', multiSelect: true, defaultValue: '__ALL__' }),
|
||||
),
|
||||
).toStrictEqual({ value: null, allSelected: true });
|
||||
});
|
||||
|
||||
it('list: configured default wins over ALL default', () => {
|
||||
expect(
|
||||
resolveDefaultSelection(
|
||||
model({
|
||||
type: 'QUERY',
|
||||
multiSelect: true,
|
||||
showAllOption: true,
|
||||
defaultValue: 'x',
|
||||
}),
|
||||
),
|
||||
).toStrictEqual({ value: ['x'], allSelected: false });
|
||||
});
|
||||
|
||||
it('list: no default and no allowAll → empty placeholder (filled after fetch)', () => {
|
||||
expect(resolveDefaultSelection(model({ type: 'QUERY' }))).toStrictEqual({
|
||||
value: '',
|
||||
allSelected: false,
|
||||
});
|
||||
expect(
|
||||
resolveDefaultSelection(model({ type: 'QUERY', multiSelect: true })),
|
||||
).toStrictEqual({ value: [], allSelected: false });
|
||||
});
|
||||
});
|
||||
|
||||
describe('reconcileWithOptions', () => {
|
||||
it('leaves a valid single selection untouched (local-first)', () => {
|
||||
expect(
|
||||
reconcileWithOptions(
|
||||
model({ type: 'QUERY' }),
|
||||
{ value: 'b', allSelected: false },
|
||||
['a', 'b'],
|
||||
),
|
||||
).toBeNull();
|
||||
});
|
||||
|
||||
it('materializes query ALL to the full option array', () => {
|
||||
expect(
|
||||
reconcileWithOptions(
|
||||
model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
|
||||
{ value: null, allSelected: true },
|
||||
['a', 'b'],
|
||||
),
|
||||
).toStrictEqual({ value: ['a', 'b'], allSelected: true });
|
||||
});
|
||||
|
||||
it('does not materialize dynamic ALL (sends __all__)', () => {
|
||||
expect(
|
||||
reconcileWithOptions(
|
||||
model({ type: 'DYNAMIC', multiSelect: true, showAllOption: true }),
|
||||
{ value: null, allSelected: true },
|
||||
['a', 'b'],
|
||||
),
|
||||
).toBeNull();
|
||||
});
|
||||
|
||||
it('keeps the still-valid subset when options re-scope', () => {
|
||||
expect(
|
||||
reconcileWithOptions(
|
||||
model({ type: 'QUERY', multiSelect: true }),
|
||||
{ value: ['a', 'b', 'c'], allSelected: false },
|
||||
['a', 'b', 'd'],
|
||||
),
|
||||
).toStrictEqual({ value: ['a', 'b'], allSelected: false });
|
||||
});
|
||||
|
||||
it('falls back to the configured default (else first) when invalid', () => {
|
||||
expect(
|
||||
reconcileWithOptions(
|
||||
model({ type: 'QUERY', defaultValue: 'b' }),
|
||||
{ value: '', allSelected: false },
|
||||
['a', 'b', 'c'],
|
||||
),
|
||||
).toStrictEqual({ value: 'b', allSelected: false });
|
||||
expect(
|
||||
reconcileWithOptions(
|
||||
model({ type: 'QUERY' }),
|
||||
{ value: '', allSelected: false },
|
||||
['a', 'b'],
|
||||
),
|
||||
).toStrictEqual({ value: 'a', allSelected: false });
|
||||
});
|
||||
|
||||
it('does nothing while options are empty', () => {
|
||||
expect(
|
||||
reconcileWithOptions(
|
||||
model({ type: 'QUERY' }),
|
||||
{ value: '', allSelected: false },
|
||||
[],
|
||||
),
|
||||
).toBeNull();
|
||||
});
|
||||
});
|
||||
|
||||
describe('configuredDefaultValue', () => {
|
||||
it('TEXT: textValue fallback; list: defaultValue only (no ALL synthesis)', () => {
|
||||
expect(configuredDefaultValue(model({ type: 'TEXT', textValue: 't' }))).toBe(
|
||||
't',
|
||||
);
|
||||
expect(
|
||||
configuredDefaultValue(model({ type: 'QUERY', defaultValue: 'x' })),
|
||||
).toBe('x');
|
||||
// ALL-by-default list variable is not expanded here (options unknown).
|
||||
expect(
|
||||
configuredDefaultValue(
|
||||
model({ type: 'QUERY', multiSelect: true, showAllOption: true }),
|
||||
),
|
||||
).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,31 @@
|
||||
import { withVariablesSearch } from '../variablesUrlState';
|
||||
|
||||
jest.mock('nuqs', () => ({
|
||||
parseAsJson: (): unknown => ({ withOptions: (): unknown => ({}) }),
|
||||
}));
|
||||
|
||||
describe('withVariablesSearch', () => {
|
||||
const current = `?compositeQuery=abc&variables=${encodeURIComponent(
|
||||
'{"env":"prod"}',
|
||||
)}`;
|
||||
|
||||
it('returns the base unchanged when the current search has no variables', () => {
|
||||
expect(withVariablesSearch('', '?compositeQuery=abc')).toBe('');
|
||||
expect(withVariablesSearch('?panelKind=signoz/TablePanel', '')).toBe(
|
||||
'?panelKind=signoz/TablePanel',
|
||||
);
|
||||
});
|
||||
|
||||
it('carries only the variables param onto an empty base', () => {
|
||||
const result = withVariablesSearch('', current);
|
||||
expect(new URLSearchParams(result).get('variables')).toBe('{"env":"prod"}');
|
||||
expect(new URLSearchParams(result).get('compositeQuery')).toBeNull();
|
||||
});
|
||||
|
||||
it('appends the variables param to existing base params', () => {
|
||||
const result = withVariablesSearch('?panelKind=signoz/TablePanel', current);
|
||||
const params = new URLSearchParams(result);
|
||||
expect(params.get('panelKind')).toBe('signoz/TablePanel');
|
||||
expect(params.get('variables')).toBe('{"env":"prod"}');
|
||||
});
|
||||
});
|
||||
@@ -1,183 +0,0 @@
|
||||
import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
|
||||
import type {
|
||||
SelectedVariableValue,
|
||||
VariableSelection,
|
||||
} from './selectionTypes';
|
||||
import { ALL_SELECTED } from './variablesUrlState';
|
||||
|
||||
/**
|
||||
* Single source of truth for "what value does this variable hold?", shared by the
|
||||
* three surfaces that used to each own a divergent copy of the rule:
|
||||
* - {@link resolveDefaultSelection} — the seed-time default (no options yet).
|
||||
* - {@link reconcileWithOptions} — the post-fetch reconcile (options known).
|
||||
* - {@link configuredDefaultValue} — the payload fallback when nothing is picked.
|
||||
*
|
||||
* Keeping them here means the variable bar, the fetch gate and the panel-query
|
||||
* payload can never disagree about a variable's default (the previous split
|
||||
* produced "bar shows ALL while the query omits the variable").
|
||||
*/
|
||||
|
||||
/** An "every option selected" (ALL) selection. */
|
||||
const ALL_SELECTION: VariableSelection = { value: null, allSelected: true };
|
||||
|
||||
/** The `defaultValue` reduced to a single string, or undefined when unset. */
|
||||
function firstConfiguredDefault(model: VariableFormModel): string | undefined {
|
||||
const def = model.defaultValue;
|
||||
if (Array.isArray(def)) {
|
||||
return def.length > 0 ? String(def[0]) : undefined;
|
||||
}
|
||||
if (typeof def === 'string' && def !== '') {
|
||||
return def;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
/** Whether the configured default marks the ALL sentinel. */
|
||||
function isAllDefault(def: VariableFormModel['defaultValue']): boolean {
|
||||
return (
|
||||
def === ALL_SELECTED ||
|
||||
(Array.isArray(def) && def.length === 1 && def[0] === ALL_SELECTED)
|
||||
);
|
||||
}
|
||||
|
||||
function isValidSingle(
|
||||
value: SelectedVariableValue,
|
||||
options: string[],
|
||||
): boolean {
|
||||
return (
|
||||
!Array.isArray(value) &&
|
||||
value !== '' &&
|
||||
value !== null &&
|
||||
value !== undefined &&
|
||||
options.includes(String(value))
|
||||
);
|
||||
}
|
||||
|
||||
/** The configured default (or first option) as a fresh selection. */
|
||||
function fillDefault(
|
||||
model: VariableFormModel,
|
||||
options: string[],
|
||||
): VariableSelection {
|
||||
const fallback = firstConfiguredDefault(model);
|
||||
const initial = fallback && options.includes(fallback) ? fallback : options[0];
|
||||
return {
|
||||
value: model.multiSelect ? [initial] : initial,
|
||||
allSelected: false,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* For an ALL selection, the value to materialize (or null when unchanged).
|
||||
* Dynamic ALL travels as the `__all__` wire sentinel and renders ALL from the
|
||||
* flag, so it needs no materialized value. Query/custom ALL must carry the full
|
||||
* option array (the payload builder cannot expand it) — keep it in sync.
|
||||
*/
|
||||
function materializeAll(
|
||||
model: VariableFormModel,
|
||||
options: string[],
|
||||
current: SelectedVariableValue,
|
||||
): VariableSelection | null {
|
||||
if (!model.multiSelect || model.type === 'DYNAMIC') {
|
||||
return null;
|
||||
}
|
||||
const alreadyFull =
|
||||
Array.isArray(current) &&
|
||||
current.length === options.length &&
|
||||
current.every((c) => options.includes(String(c)));
|
||||
return alreadyFull ? null : { value: options, allSelected: true };
|
||||
}
|
||||
|
||||
/**
|
||||
* The seed-time default for a variable, before any options are fetched.
|
||||
* - TEXT: the configured default (`defaultValue` → `textValue`), else empty.
|
||||
* - CUSTOM/QUERY/DYNAMIC: the configured default; else ALL when allowAll is on;
|
||||
* else a placeholder that {@link reconcileWithOptions} fills with the first
|
||||
* option once the options resolve.
|
||||
*/
|
||||
export function resolveDefaultSelection(
|
||||
model: VariableFormModel,
|
||||
): VariableSelection {
|
||||
if (model.type === 'TEXT') {
|
||||
return {
|
||||
value: firstConfiguredDefault(model) ?? model.textValue ?? '',
|
||||
allSelected: false,
|
||||
};
|
||||
}
|
||||
|
||||
const def = model.defaultValue;
|
||||
if (isAllDefault(def)) {
|
||||
return ALL_SELECTION;
|
||||
}
|
||||
if (Array.isArray(def) && def.length > 0) {
|
||||
return { value: def, allSelected: false };
|
||||
}
|
||||
if (typeof def === 'string' && def !== '') {
|
||||
return { value: model.multiSelect ? [def] : def, allSelected: false };
|
||||
}
|
||||
if (model.multiSelect && model.showAllOption) {
|
||||
return ALL_SELECTION;
|
||||
}
|
||||
return { value: model.multiSelect ? [] : '', allSelected: false };
|
||||
}
|
||||
|
||||
/**
|
||||
* Reconciles a variable's current selection against its freshly-fetched options.
|
||||
* Returns the next selection, or null when nothing should change (a valid pick is
|
||||
* left untouched — local-first). Behaviour, in order:
|
||||
* - materialize ALL to the full option set (query/custom);
|
||||
* - keep a still-valid multi-select subset, dropping only invalid entries;
|
||||
* - otherwise auto-pick the default (or first option) so dependent variables and
|
||||
* panels always resolve against a usable value.
|
||||
*/
|
||||
export function reconcileWithOptions(
|
||||
model: VariableFormModel,
|
||||
current: VariableSelection,
|
||||
options: string[],
|
||||
): VariableSelection | null {
|
||||
if (options.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (current.allSelected) {
|
||||
return materializeAll(model, options, current.value);
|
||||
}
|
||||
|
||||
if (
|
||||
model.multiSelect &&
|
||||
Array.isArray(current.value) &&
|
||||
current.value.length > 0
|
||||
) {
|
||||
const valid = current.value.map(String).filter((c) => options.includes(c));
|
||||
if (valid.length === current.value.length) {
|
||||
return null;
|
||||
}
|
||||
return valid.length > 0
|
||||
? { value: valid, allSelected: false }
|
||||
: fillDefault(model, options);
|
||||
}
|
||||
|
||||
if (!model.multiSelect && isValidSingle(current.value, options)) {
|
||||
return null;
|
||||
}
|
||||
return fillDefault(model, options);
|
||||
}
|
||||
|
||||
/**
|
||||
* The value to send for a variable when the user has made no selection yet
|
||||
* (the payload fallback). Mirrors the configured default only — an ALL-by-default
|
||||
* list variable resolves to `undefined` here (its concrete values are carried by
|
||||
* the materialized selection once options are known), so it is omitted until then
|
||||
* rather than sent wrong.
|
||||
*/
|
||||
export function configuredDefaultValue(
|
||||
model: VariableFormModel,
|
||||
): SelectedVariableValue | undefined {
|
||||
if (model.type === 'TEXT') {
|
||||
return firstConfiguredDefault(model) ?? model.textValue ?? undefined;
|
||||
}
|
||||
const def = model.defaultValue;
|
||||
if (Array.isArray(def)) {
|
||||
return def.length > 0 ? def : undefined;
|
||||
}
|
||||
return def || undefined;
|
||||
}
|
||||
@@ -1,4 +1,3 @@
|
||||
import type { VariableType } from '../DashboardSettings/Variables/variableFormModel';
|
||||
import type {
|
||||
SelectedVariableValue,
|
||||
VariableSelection,
|
||||
@@ -20,32 +19,6 @@ export function isResolved(selection?: VariableSelection): boolean {
|
||||
return value !== '' && value !== null && value !== undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether a selection carries a value usable when scheduling a dependent
|
||||
* variable/panel fetch. Unlike {@link isResolved}, a QUERY/CUSTOM ALL counts only
|
||||
* once materialized into the concrete array (an unmaterialized ALL isn't usable),
|
||||
* while a DYNAMIC ALL is usable immediately via the `__all__` sentinel.
|
||||
*/
|
||||
export function hasUsableValue(
|
||||
selection: VariableSelection | undefined,
|
||||
type: VariableType | undefined,
|
||||
): boolean {
|
||||
if (!selection) {
|
||||
return false;
|
||||
}
|
||||
if (selection.allSelected) {
|
||||
if (type === 'DYNAMIC') {
|
||||
return true;
|
||||
}
|
||||
return Array.isArray(selection.value) && selection.value.length > 0;
|
||||
}
|
||||
const { value } = selection;
|
||||
if (Array.isArray(value)) {
|
||||
return value.length > 0;
|
||||
}
|
||||
return value !== '' && value !== null && value !== undefined;
|
||||
}
|
||||
|
||||
/** Flatten the selection map into the `{ name: value }` payload a query expects. */
|
||||
export function selectionToPayload(
|
||||
selection: VariableSelectionMap,
|
||||
|
||||
@@ -0,0 +1,50 @@
|
||||
import { useMemo } from 'react';
|
||||
import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
|
||||
|
||||
import { sortValuesByOrder } from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import type { VariableSelection } from '../selectionTypes';
|
||||
import { useAutoSelect } from '../useAutoSelect';
|
||||
import ValueSelector from './ValueSelector';
|
||||
|
||||
interface CustomSelectorProps {
|
||||
variable: VariableFormModel;
|
||||
selection: VariableSelection;
|
||||
onChange: (selection: VariableSelection) => void;
|
||||
onAutoSelect: (selection: VariableSelection) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Custom-variable options come from the comma-separated `customValue` (no fetch),
|
||||
* but still auto-select a default/first option so the variable is never left blank.
|
||||
*/
|
||||
function CustomSelector({
|
||||
variable,
|
||||
selection,
|
||||
onChange,
|
||||
onAutoSelect,
|
||||
}: CustomSelectorProps): JSX.Element {
|
||||
const options = useMemo(
|
||||
() =>
|
||||
sortValuesByOrder(
|
||||
commaValuesParser(variable.customValue),
|
||||
variable.sort,
|
||||
).map(String),
|
||||
[variable.customValue, variable.sort],
|
||||
);
|
||||
|
||||
useAutoSelect(variable, options, selection, onAutoSelect);
|
||||
|
||||
return (
|
||||
<ValueSelector
|
||||
options={options}
|
||||
multiSelect={variable.multiSelect}
|
||||
showAllOption={variable.showAllOption}
|
||||
selection={selection}
|
||||
onChange={onChange}
|
||||
testId={`variable-select-${variable.name}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default CustomSelector;
|
||||
@@ -0,0 +1,140 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { useSelector } from 'react-redux';
|
||||
import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
|
||||
import {
|
||||
DASHBOARD_CACHE_TIME,
|
||||
DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
|
||||
} from 'constants/queryCacheTime';
|
||||
import type { AppState } from 'store/reducers';
|
||||
import type { GlobalReducer } from 'types/reducer/globalTime';
|
||||
|
||||
import {
|
||||
signalForApi,
|
||||
sortValuesByOrder,
|
||||
} from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import { useDashboardStore } from '../../store/useDashboardStore';
|
||||
import { buildExistingDynamicVariableQuery } from '../dynamicFilter';
|
||||
import type {
|
||||
VariableSelection,
|
||||
VariableSelectionMap,
|
||||
} from '../selectionTypes';
|
||||
import { useAutoSelect } from '../useAutoSelect';
|
||||
import { useVariableFetchState } from '../useVariableFetchState';
|
||||
import ValueSelector from './ValueSelector';
|
||||
|
||||
interface DynamicSelectorProps {
|
||||
variable: VariableFormModel;
|
||||
/** All variables + current selections, to scope options by sibling dynamics. */
|
||||
variables: VariableFormModel[];
|
||||
selections: VariableSelectionMap;
|
||||
selection: VariableSelection;
|
||||
onChange: (selection: VariableSelection) => void;
|
||||
/** Batched auto-selection fill applied when options resolve. */
|
||||
onAutoSelect: (selection: VariableSelection) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Dynamic-variable options sourced from live telemetry field values for the
|
||||
* chosen signal + attribute, scoped by the other dynamic variables' selections
|
||||
* (so e.g. `pod` narrows to the chosen `namespace`). WHEN to fetch is owned by
|
||||
* the runtime fetch engine: dynamics fetch together once the query variables have
|
||||
* values, and refetch (via a `cycleId` bump) whenever any variable value changes.
|
||||
*/
|
||||
function DynamicSelector({
|
||||
variable,
|
||||
variables,
|
||||
selections,
|
||||
selection,
|
||||
onChange,
|
||||
onAutoSelect,
|
||||
}: DynamicSelectorProps): JSX.Element {
|
||||
const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
|
||||
AppState,
|
||||
GlobalReducer
|
||||
>((state) => state.globalTime);
|
||||
|
||||
const existingQuery = useMemo(
|
||||
() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
|
||||
[variables, selections, variable.name],
|
||||
);
|
||||
|
||||
const {
|
||||
variableFetchCycleId,
|
||||
isVariableFetching,
|
||||
isVariableSettled,
|
||||
isVariableWaiting,
|
||||
hasVariableFetchedOnce,
|
||||
} = useVariableFetchState(variable.name);
|
||||
const onVariableFetchComplete = useDashboardStore(
|
||||
(s) => s.onVariableFetchComplete,
|
||||
);
|
||||
const onVariableFetchFailure = useDashboardStore(
|
||||
(s) => s.onVariableFetchFailure,
|
||||
);
|
||||
|
||||
const { data, isFetching, error, refetch } = useQuery(
|
||||
[
|
||||
'dashboard-variable-dynamic',
|
||||
variable.name,
|
||||
variable.dynamicSignal,
|
||||
variable.dynamicAttribute,
|
||||
existingQuery,
|
||||
minTime,
|
||||
maxTime,
|
||||
variableFetchCycleId,
|
||||
],
|
||||
() =>
|
||||
getFieldValues(
|
||||
signalForApi(variable.dynamicSignal),
|
||||
variable.dynamicAttribute,
|
||||
undefined,
|
||||
minTime,
|
||||
maxTime,
|
||||
existingQuery || undefined,
|
||||
),
|
||||
{
|
||||
enabled:
|
||||
!!variable.dynamicAttribute &&
|
||||
(isVariableFetching || (isVariableSettled && hasVariableFetchedOnce)),
|
||||
refetchOnWindowFocus: false,
|
||||
// Each cycle mints a fresh key; 0 under auto-refresh so entries don't pile up (V1 parity).
|
||||
cacheTime: isAutoRefreshDisabled
|
||||
? DASHBOARD_CACHE_TIME
|
||||
: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
|
||||
onSettled: (_, error) =>
|
||||
error
|
||||
? onVariableFetchFailure(variable.name)
|
||||
: onVariableFetchComplete(variable.name),
|
||||
},
|
||||
);
|
||||
|
||||
const options = useMemo(() => {
|
||||
const payload = data?.data;
|
||||
const values =
|
||||
payload?.normalizedValues ?? payload?.values?.StringValues ?? [];
|
||||
return sortValuesByOrder(values, variable.sort).map(String);
|
||||
}, [data, variable.sort]);
|
||||
|
||||
useAutoSelect(variable, options, selection, onAutoSelect);
|
||||
|
||||
return (
|
||||
<ValueSelector
|
||||
options={options}
|
||||
multiSelect={variable.multiSelect}
|
||||
showAllOption={variable.showAllOption}
|
||||
loading={isFetching || isVariableWaiting}
|
||||
errorMessage={error ? (error as Error).message || null : null}
|
||||
onRetry={(): void => {
|
||||
void refetch();
|
||||
}}
|
||||
selection={selection}
|
||||
onChange={onChange}
|
||||
testId={`variable-select-${variable.name}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default DynamicSelector;
|
||||
@@ -0,0 +1,127 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { useSelector } from 'react-redux';
|
||||
import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
|
||||
import {
|
||||
DASHBOARD_CACHE_TIME,
|
||||
DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
|
||||
} from 'constants/queryCacheTime';
|
||||
import type { AppState } from 'store/reducers';
|
||||
import type { GlobalReducer } from 'types/reducer/globalTime';
|
||||
|
||||
import { sortValuesByOrder } from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import { useDashboardStore } from '../../store/useDashboardStore';
|
||||
import type {
|
||||
VariableSelection,
|
||||
VariableSelectionMap,
|
||||
} from '../selectionTypes';
|
||||
import { selectionToPayload } from '../selectionUtils';
|
||||
import { useAutoSelect } from '../useAutoSelect';
|
||||
import { useVariableFetchState } from '../useVariableFetchState';
|
||||
import ValueSelector from './ValueSelector';
|
||||
|
||||
interface QuerySelectorProps {
|
||||
variable: VariableFormModel;
|
||||
/** All current selections, fed to the query as `{ name: value }`. */
|
||||
selections: VariableSelectionMap;
|
||||
selection: VariableSelection;
|
||||
onChange: (selection: VariableSelection) => void;
|
||||
/** Batched auto-selection fill applied when options resolve. */
|
||||
onAutoSelect: (selection: VariableSelection) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* Query-driven options. WHEN to fetch is owned by the runtime fetch engine
|
||||
* (`variableFetchSlice`): the query is `enabled` while this variable is fetching
|
||||
* (or settled-after-a-first-fetch, so a cycle bump re-runs it), and the engine's
|
||||
* per-variable `cycleId` keys the request — so a parent's value change refetches
|
||||
* only the dependent variables, in dependency order. The current selections feed
|
||||
* the request payload but are deliberately NOT in the key (V1 parity).
|
||||
*/
|
||||
function QuerySelector({
|
||||
variable,
|
||||
selections,
|
||||
selection,
|
||||
onChange,
|
||||
onAutoSelect,
|
||||
}: QuerySelectorProps): JSX.Element {
|
||||
const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
|
||||
AppState,
|
||||
GlobalReducer
|
||||
>((state) => state.globalTime);
|
||||
const payload = useMemo(() => selectionToPayload(selections), [selections]);
|
||||
|
||||
const {
|
||||
variableFetchCycleId,
|
||||
isVariableFetching,
|
||||
isVariableSettled,
|
||||
isVariableWaiting,
|
||||
hasVariableFetchedOnce,
|
||||
} = useVariableFetchState(variable.name);
|
||||
const onVariableFetchComplete = useDashboardStore(
|
||||
(s) => s.onVariableFetchComplete,
|
||||
);
|
||||
const onVariableFetchFailure = useDashboardStore(
|
||||
(s) => s.onVariableFetchFailure,
|
||||
);
|
||||
|
||||
const { data, isFetching, error, refetch } = useQuery(
|
||||
[
|
||||
'dashboard-variable',
|
||||
variable.name,
|
||||
variable.queryValue,
|
||||
minTime,
|
||||
maxTime,
|
||||
variableFetchCycleId,
|
||||
],
|
||||
() =>
|
||||
dashboardVariablesQuery({
|
||||
query: variable.queryValue,
|
||||
variables: payload,
|
||||
}),
|
||||
{
|
||||
enabled: isVariableFetching || (isVariableSettled && hasVariableFetchedOnce),
|
||||
refetchOnWindowFocus: false,
|
||||
// Each cycle mints a fresh key; 0 under auto-refresh so entries don't pile up (V1 parity).
|
||||
cacheTime: isAutoRefreshDisabled
|
||||
? DASHBOARD_CACHE_TIME
|
||||
: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
|
||||
onSettled: (_, error) =>
|
||||
error
|
||||
? onVariableFetchFailure(variable.name)
|
||||
: onVariableFetchComplete(variable.name),
|
||||
},
|
||||
);
|
||||
|
||||
const options = useMemo(() => {
|
||||
if (!data || data.statusCode !== 200 || !data.payload) {
|
||||
return [] as string[];
|
||||
}
|
||||
return sortValuesByOrder(
|
||||
data.payload.variableValues ?? [],
|
||||
variable.sort,
|
||||
).map(String);
|
||||
}, [data, variable.sort]);
|
||||
|
||||
useAutoSelect(variable, options, selection, onAutoSelect);
|
||||
|
||||
return (
|
||||
<ValueSelector
|
||||
options={options}
|
||||
multiSelect={variable.multiSelect}
|
||||
showAllOption={variable.showAllOption}
|
||||
loading={isFetching || isVariableWaiting}
|
||||
errorMessage={error ? (error as Error).message || null : null}
|
||||
onRetry={(): void => {
|
||||
void refetch();
|
||||
}}
|
||||
selection={selection}
|
||||
onChange={onChange}
|
||||
testId={`variable-select-${variable.name}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default QuerySelector;
|
||||
@@ -1,59 +0,0 @@
|
||||
import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import type {
|
||||
VariableSelection,
|
||||
VariableSelectionMap,
|
||||
} from '../selectionTypes';
|
||||
import { useAutoSelect } from '../useAutoSelect';
|
||||
import ValueSelector from './ValueSelector';
|
||||
import { useVariableOptions } from './useVariableOptions';
|
||||
|
||||
interface VariableValueControlProps {
|
||||
variable: VariableFormModel;
|
||||
/** All variables (Dynamic scopes its options by sibling selections). */
|
||||
variables: VariableFormModel[];
|
||||
/** All current selections (fed to the Query request payload). */
|
||||
selections: VariableSelectionMap;
|
||||
selection: VariableSelection;
|
||||
onChange: (selection: VariableSelection) => void;
|
||||
/** Batched auto-selection fill applied when options resolve. */
|
||||
onAutoSelect: (selection: VariableSelection) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The single value picker for QUERY / CUSTOM / DYNAMIC variables. Options + fetch
|
||||
* state come from {@link useVariableOptions}; this component only reconciles the
|
||||
* selection against the options and renders — the view is decoupled from how the
|
||||
* options are sourced (Container/Presentational).
|
||||
*/
|
||||
function VariableValueControl({
|
||||
variable,
|
||||
variables,
|
||||
selections,
|
||||
selection,
|
||||
onChange,
|
||||
onAutoSelect,
|
||||
}: VariableValueControlProps): JSX.Element {
|
||||
const { options, loading, errorMessage, onRetry } = useVariableOptions(
|
||||
variable,
|
||||
variables,
|
||||
selections,
|
||||
);
|
||||
|
||||
useAutoSelect(variable, options, selection, onAutoSelect);
|
||||
|
||||
return (
|
||||
<ValueSelector
|
||||
options={options}
|
||||
multiSelect={variable.multiSelect}
|
||||
showAllOption={variable.showAllOption}
|
||||
loading={loading}
|
||||
errorMessage={errorMessage}
|
||||
onRetry={onRetry}
|
||||
selection={selection}
|
||||
onChange={onChange}
|
||||
testId={`variable-select-${variable.name}`}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
export default VariableValueControl;
|
||||
@@ -1,213 +0,0 @@
|
||||
import { useEffect, useMemo } from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
// eslint-disable-next-line no-restricted-imports
|
||||
import { useSelector } from 'react-redux';
|
||||
import dashboardVariablesQuery from 'api/dashboard/variables/dashboardVariablesQuery';
|
||||
import { getFieldValues } from 'api/dynamicVariables/getFieldValues';
|
||||
import {
|
||||
DASHBOARD_CACHE_TIME,
|
||||
DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED,
|
||||
} from 'constants/queryCacheTime';
|
||||
import { commaValuesParser } from 'lib/dashboardVariables/customCommaValuesParser';
|
||||
import type { AppState } from 'store/reducers';
|
||||
import type { GlobalReducer } from 'types/reducer/globalTime';
|
||||
|
||||
import {
|
||||
signalForApi,
|
||||
sortValuesByOrder,
|
||||
} from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import type { VariableFormModel } from '../../DashboardSettings/Variables/variableFormModel';
|
||||
import { useDashboardStore } from '../../store/useDashboardStore';
|
||||
import { buildExistingDynamicVariableQuery } from '../dynamicFilter';
|
||||
import type { VariableSelectionMap } from '../selectionTypes';
|
||||
import { selectionToPayload } from '../selectionUtils';
|
||||
import { useVariableFetchState } from '../useVariableFetchState';
|
||||
|
||||
export interface VariableOptions {
|
||||
options: string[];
|
||||
loading: boolean;
|
||||
errorMessage: string | null;
|
||||
onRetry?: () => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* The option list for a list variable (QUERY / CUSTOM / DYNAMIC), plus its loading
|
||||
* and error state — the single place the three list types get their options.
|
||||
* QUERY/DYNAMIC fetch via react-query (WHEN owned by the fetch engine: `enabled`
|
||||
* gated on the variable's fetch state, keyed by `cycleId`, never by the current
|
||||
* selections or time — those feed the fetchers (which read the current time at
|
||||
* call), so the debounced fetch cycle drives refetches). CUSTOM is parsed
|
||||
* synchronously from its comma list. TEXT never reaches here (it has no options).
|
||||
*/
|
||||
export function useVariableOptions(
|
||||
variable: VariableFormModel,
|
||||
variables: VariableFormModel[],
|
||||
selections: VariableSelectionMap,
|
||||
): VariableOptions {
|
||||
const { minTime, maxTime, isAutoRefreshDisabled } = useSelector<
|
||||
AppState,
|
||||
GlobalReducer
|
||||
>((state) => state.globalTime);
|
||||
// Bound cache churn: 0 under auto-refresh so entries don't pile up (V1 parity).
|
||||
const cacheTime = isAutoRefreshDisabled
|
||||
? DASHBOARD_CACHE_TIME
|
||||
: DASHBOARD_CACHE_TIME_ON_REFRESH_ENABLED;
|
||||
const {
|
||||
variableFetchCycleId,
|
||||
isVariableFetching,
|
||||
isVariableSettled,
|
||||
isVariableWaiting,
|
||||
hasVariableFetchedOnce,
|
||||
} = useVariableFetchState(variable.name);
|
||||
const onVariableFetchComplete = useDashboardStore(
|
||||
(s) => s.onVariableFetchComplete,
|
||||
);
|
||||
const onVariableFetchFailure = useDashboardStore(
|
||||
(s) => s.onVariableFetchFailure,
|
||||
);
|
||||
const setVariableResolvedEmpty = useDashboardStore(
|
||||
(s) => s.setVariableResolvedEmpty,
|
||||
);
|
||||
|
||||
// Fetch while this variable is actively fetching, or once settled after a first
|
||||
// fetch (so a `cycleId` bump re-runs it). Combined with a per-type guard below.
|
||||
const canFetch =
|
||||
isVariableFetching || (isVariableSettled && hasVariableFetchedOnce);
|
||||
|
||||
// QUERY — options from the test-run endpoint; selections feed the payload, not the key.
|
||||
const payload = useMemo(() => selectionToPayload(selections), [selections]);
|
||||
const queryResult = useQuery(
|
||||
[
|
||||
'dashboard-variable',
|
||||
variable.name,
|
||||
variable.queryValue,
|
||||
variableFetchCycleId,
|
||||
],
|
||||
() =>
|
||||
dashboardVariablesQuery({
|
||||
query: variable.queryValue,
|
||||
variables: payload,
|
||||
}),
|
||||
{
|
||||
enabled: variable.type === 'QUERY' && canFetch,
|
||||
refetchOnWindowFocus: false,
|
||||
cacheTime,
|
||||
onSettled: (_, error) =>
|
||||
error
|
||||
? onVariableFetchFailure(variable.name)
|
||||
: onVariableFetchComplete(variable.name),
|
||||
},
|
||||
);
|
||||
|
||||
// DYNAMIC — telemetry field values scoped by sibling dynamics via `existingQuery`
|
||||
// (fed to the fetcher only, not the key — see DynamicSelector history).
|
||||
const existingQuery = useMemo(
|
||||
() => buildExistingDynamicVariableQuery(variables, selections, variable.name),
|
||||
[variables, selections, variable.name],
|
||||
);
|
||||
const dynamicResult = useQuery(
|
||||
[
|
||||
'dashboard-variable-dynamic',
|
||||
variable.name,
|
||||
variable.dynamicSignal,
|
||||
variable.dynamicAttribute,
|
||||
variableFetchCycleId,
|
||||
],
|
||||
() =>
|
||||
getFieldValues(
|
||||
signalForApi(variable.dynamicSignal),
|
||||
variable.dynamicAttribute,
|
||||
undefined,
|
||||
minTime,
|
||||
maxTime,
|
||||
existingQuery || undefined,
|
||||
),
|
||||
{
|
||||
enabled:
|
||||
variable.type === 'DYNAMIC' && !!variable.dynamicAttribute && canFetch,
|
||||
refetchOnWindowFocus: false,
|
||||
cacheTime,
|
||||
onSettled: (_, error) =>
|
||||
error
|
||||
? onVariableFetchFailure(variable.name)
|
||||
: onVariableFetchComplete(variable.name),
|
||||
},
|
||||
);
|
||||
|
||||
const queryOptions = useMemo(() => {
|
||||
const data = queryResult.data;
|
||||
if (!data || data.statusCode !== 200 || !data.payload) {
|
||||
return [] as string[];
|
||||
}
|
||||
return sortValuesByOrder(
|
||||
data.payload.variableValues ?? [],
|
||||
variable.sort,
|
||||
).map(String);
|
||||
}, [queryResult.data, variable.sort]);
|
||||
|
||||
const dynamicOptions = useMemo(() => {
|
||||
const data = dynamicResult.data?.data;
|
||||
const values = data?.normalizedValues ?? data?.values?.StringValues ?? [];
|
||||
return sortValuesByOrder(values, variable.sort).map(String);
|
||||
}, [dynamicResult.data, variable.sort]);
|
||||
|
||||
const customOptions = useMemo(
|
||||
() =>
|
||||
variable.type === 'CUSTOM'
|
||||
? sortValuesByOrder(
|
||||
commaValuesParser(variable.customValue),
|
||||
variable.sort,
|
||||
).map(String)
|
||||
: ([] as string[]),
|
||||
[variable.type, variable.customValue, variable.sort],
|
||||
);
|
||||
|
||||
// Flag a variable that settled with zero options so dependent panels fall through
|
||||
// to "no data" instead of waiting forever. hasFetchedOnce excludes the pre-fetch state.
|
||||
const effectiveOptions =
|
||||
variable.type === 'DYNAMIC' ? dynamicOptions : queryOptions;
|
||||
useEffect(() => {
|
||||
if (variable.type !== 'QUERY' && variable.type !== 'DYNAMIC') {
|
||||
return;
|
||||
}
|
||||
setVariableResolvedEmpty(
|
||||
variable.name,
|
||||
hasVariableFetchedOnce &&
|
||||
!isVariableFetching &&
|
||||
effectiveOptions.length === 0,
|
||||
);
|
||||
}, [
|
||||
variable.type,
|
||||
variable.name,
|
||||
hasVariableFetchedOnce,
|
||||
isVariableFetching,
|
||||
effectiveOptions.length,
|
||||
setVariableResolvedEmpty,
|
||||
]);
|
||||
|
||||
if (variable.type === 'CUSTOM') {
|
||||
return { options: customOptions, loading: false, errorMessage: null };
|
||||
}
|
||||
if (variable.type === 'DYNAMIC') {
|
||||
return {
|
||||
options: dynamicOptions,
|
||||
loading: dynamicResult.isFetching || isVariableWaiting,
|
||||
errorMessage: dynamicResult.error
|
||||
? (dynamicResult.error as Error).message || null
|
||||
: null,
|
||||
onRetry: (): void => {
|
||||
void dynamicResult.refetch();
|
||||
},
|
||||
};
|
||||
}
|
||||
return {
|
||||
options: queryOptions,
|
||||
loading: queryResult.isFetching || isVariableWaiting,
|
||||
errorMessage: queryResult.error
|
||||
? (queryResult.error as Error).message || null
|
||||
: null,
|
||||
onRetry: (): void => {
|
||||
void queryResult.refetch();
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -1,14 +1,61 @@
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
|
||||
import { reconcileWithOptions } from './resolveVariableSelection';
|
||||
import type { VariableSelection } from './selectionTypes';
|
||||
import type {
|
||||
SelectedVariableValue,
|
||||
VariableSelection,
|
||||
} from './selectionTypes';
|
||||
|
||||
/** The variable's default (or first option) as a fresh selection. */
|
||||
function fillDefault(
|
||||
variable: VariableFormModel,
|
||||
options: string[],
|
||||
): VariableSelection {
|
||||
const dv = variable.defaultValue;
|
||||
const fallback = Array.isArray(dv) ? dv[0] : dv;
|
||||
const initial = fallback && options.includes(fallback) ? fallback : options[0];
|
||||
return {
|
||||
value: variable.multiSelect ? [initial] : initial,
|
||||
allSelected: false,
|
||||
};
|
||||
}
|
||||
|
||||
/** For an all-selected variable, the value to materialize (or null if unchanged). */
|
||||
function reconcileAllSelected(
|
||||
variable: VariableFormModel,
|
||||
options: string[],
|
||||
current: SelectedVariableValue,
|
||||
): VariableSelection | null {
|
||||
// Dynamic ALL travels as the `__all__` wire sentinel and shows ALL from the
|
||||
// flag, so it needs no materialized value. Query/custom ALL must carry the full
|
||||
// option array (the payload builder can't expand it) — keep it in sync.
|
||||
if (!variable.multiSelect || variable.type === 'DYNAMIC') {
|
||||
return null;
|
||||
}
|
||||
const alreadyFull =
|
||||
Array.isArray(current) &&
|
||||
current.length === options.length &&
|
||||
current.every((c) => options.includes(String(c)));
|
||||
return alreadyFull ? null : { value: options, allSelected: true };
|
||||
}
|
||||
|
||||
function isValidSingle(
|
||||
current: SelectedVariableValue,
|
||||
options: string[],
|
||||
): boolean {
|
||||
return (
|
||||
!Array.isArray(current) &&
|
||||
current !== '' &&
|
||||
current !== null &&
|
||||
current !== undefined &&
|
||||
options.includes(String(current))
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Reconciles a variable's selection with its freshly-fetched options and fires
|
||||
* `onAutoSelect` only when the value must change. The reconcile rule lives in
|
||||
* {@link reconcileWithOptions} (shared with seed + payload defaulting) so the bar
|
||||
* and the panel query can never disagree about a variable's default.
|
||||
* Reconciles a variable's selection with its freshly-fetched options: materialize
|
||||
* ALL to the full set, keep a still-valid multi-select subset, else auto-pick the
|
||||
* default (or first option) so dependent children always have a usable value.
|
||||
*/
|
||||
export function useAutoSelect(
|
||||
variable: VariableFormModel,
|
||||
@@ -17,10 +64,36 @@ export function useAutoSelect(
|
||||
onAutoSelect: (selection: VariableSelection) => void,
|
||||
): void {
|
||||
useEffect(() => {
|
||||
const next = reconcileWithOptions(variable, selection, options);
|
||||
if (next) {
|
||||
onAutoSelect(next);
|
||||
if (options.length === 0) {
|
||||
return;
|
||||
}
|
||||
const current = selection.value;
|
||||
|
||||
if (selection.allSelected) {
|
||||
const next = reconcileAllSelected(variable, options, current);
|
||||
if (next) {
|
||||
onAutoSelect(next);
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
if (variable.multiSelect && Array.isArray(current) && current.length > 0) {
|
||||
const valid = current.map(String).filter((c) => options.includes(c));
|
||||
if (valid.length === current.length) {
|
||||
return;
|
||||
}
|
||||
onAutoSelect(
|
||||
valid.length > 0
|
||||
? { value: valid, allSelected: false }
|
||||
: fillDefault(variable, options),
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!variable.multiSelect && isValidSingle(current, options)) {
|
||||
return;
|
||||
}
|
||||
onAutoSelect(fillDefault(variable, options));
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [options]);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,6 @@ import { dtoToFormModel } from '../DashboardSettings/Variables/variableAdapters'
|
||||
import type { VariableFormModel } from '../DashboardSettings/Variables/variableFormModel';
|
||||
import { selectVariableValues } from '../store/slices/variableSelectionSlice';
|
||||
import { useDashboardStore } from '../store/useDashboardStore';
|
||||
import { resolveDefaultSelection } from './resolveVariableSelection';
|
||||
import type {
|
||||
SelectedVariableValue,
|
||||
VariableSelection,
|
||||
@@ -18,6 +17,26 @@ import {
|
||||
} from './variableDependencies';
|
||||
import { ALL_SELECTED, variablesUrlParser } from './variablesUrlState';
|
||||
|
||||
function defaultSelection(model: VariableFormModel): VariableSelection {
|
||||
const def = model.defaultValue;
|
||||
if (
|
||||
def === ALL_SELECTED ||
|
||||
(Array.isArray(def) && def.length === 1 && def[0] === ALL_SELECTED)
|
||||
) {
|
||||
return { value: null, allSelected: true };
|
||||
}
|
||||
if (Array.isArray(def) && def.length > 0) {
|
||||
return { value: def, allSelected: false };
|
||||
}
|
||||
if (typeof def === 'string' && def !== '') {
|
||||
return { value: model.multiSelect ? [def] : def, allSelected: false };
|
||||
}
|
||||
if (model.multiSelect && model.showAllOption) {
|
||||
return { value: null, allSelected: true };
|
||||
}
|
||||
return { value: model.multiSelect ? [] : '', allSelected: false };
|
||||
}
|
||||
|
||||
// The `__ALL__` sentinel only means "ALL" for variables that support it — a
|
||||
// legitimate value of "__ALL__" (e.g. a text var) is taken literally.
|
||||
function fromUrlValue(
|
||||
@@ -69,20 +88,12 @@ export function useSeedVariableSelection(
|
||||
const seeded: VariableSelectionMap = {};
|
||||
variables.forEach((variable) => {
|
||||
const urlValue = urlValues?.[variable.name];
|
||||
const stored = selection[variable.name];
|
||||
if (urlValue !== undefined) {
|
||||
const fromUrl = fromUrlValue(urlValue, variable);
|
||||
// When the URL carries only the ALL sentinel but the store already holds
|
||||
// the materialized full-option array, reuse it — avoids the re-fetch +
|
||||
// re-materialize round-trip (and its dependent-refetch cascade) on load.
|
||||
seeded[variable.name] =
|
||||
fromUrl.allSelected && stored?.allSelected && Array.isArray(stored.value)
|
||||
? stored
|
||||
: fromUrl;
|
||||
} else if (stored) {
|
||||
seeded[variable.name] = stored;
|
||||
seeded[variable.name] = fromUrlValue(urlValue, variable);
|
||||
} else if (selection[variable.name]) {
|
||||
seeded[variable.name] = selection[variable.name];
|
||||
} else {
|
||||
seeded[variable.name] = resolveDefaultSelection(variable);
|
||||
seeded[variable.name] = defaultSelection(variable);
|
||||
}
|
||||
});
|
||||
setVariableValues(dashboardId, seeded);
|
||||
@@ -105,10 +116,8 @@ export function useSeedVariableSelection(
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps -- seed once per dashboard/variable set; the URL is read as of that moment
|
||||
}, [dashboardId, variables]);
|
||||
|
||||
// Always init the context (even with no variables) so panels can tell "ready, none"
|
||||
// from "not ready yet"; also clears it when the last variable is removed.
|
||||
useEffect(() => {
|
||||
if (!dashboardId) {
|
||||
if (!dashboardId || variables.length === 0) {
|
||||
return;
|
||||
}
|
||||
const names = variables
|
||||
|
||||
@@ -11,14 +11,9 @@ import { selectVariableValues } from '../store/slices/variableSelectionSlice';
|
||||
import { useDashboardStore } from '../store/useDashboardStore';
|
||||
import type { VariableSelection, VariableSelectionMap } from './selectionTypes';
|
||||
import { useSeedVariableSelection } from './useSeedVariableSelection';
|
||||
import { doAllQueryVariablesHaveValues } from './variableDependencies';
|
||||
import { ALL_SELECTED, variablesUrlParser } from './variablesUrlState';
|
||||
|
||||
/**
|
||||
* Debounce for the fetch cycle, so the on-load time-range settle (default → saved)
|
||||
* and rapid time-picker changes collapse into one cycle instead of double-fetching.
|
||||
*/
|
||||
const FETCH_CYCLE_DEBOUNCE_MS = 250;
|
||||
|
||||
interface UseVariableSelection {
|
||||
variables: VariableFormModel[];
|
||||
selection: VariableSelectionMap;
|
||||
@@ -53,10 +48,9 @@ export function useVariableSelection(
|
||||
(s) => s.enqueueDescendantsBatch,
|
||||
);
|
||||
|
||||
const { minTime, maxTime, selectedTime } = useSelector<
|
||||
AppState,
|
||||
GlobalReducer
|
||||
>((state) => state.globalTime);
|
||||
const { minTime, maxTime } = useSelector<AppState, GlobalReducer>(
|
||||
(state) => state.globalTime,
|
||||
);
|
||||
|
||||
// Latest selection, read by the fetch-cycle effect without subscribing to it
|
||||
// (so a value change doesn't re-trigger a full fetch cycle).
|
||||
@@ -68,39 +62,20 @@ export function useVariableSelection(
|
||||
variablesUrlParser.withOptions({ history: 'replace' }),
|
||||
);
|
||||
|
||||
// Start a full fetch cycle on load / dependency-order / time change, debounced so
|
||||
// the initial time-window settle (and rapid time changes) collapse into ONE cycle
|
||||
// instead of double-fetching every variable. Variables stay disabled until the
|
||||
// cycle runs, so the transient window is never fetched. A value change instead
|
||||
// goes through `enqueueDescendants` — immediate, not this effect.
|
||||
// Start a full fetch cycle on load / dependency-order / time change. A value
|
||||
// change instead goes through `enqueueDescendants`, not this effect.
|
||||
const orderKey = `${fetchContext.queryVariableOrder.join(
|
||||
',',
|
||||
)}|${fetchContext.dynamicVariableOrder.join(',')}`;
|
||||
// Key on the time *selection*, not raw min/max: a relative range recomputes those
|
||||
// as `now` drifts, which shouldn't refetch. The fetchers still read current time.
|
||||
const timeKey =
|
||||
selectedTime === 'custom' ? `custom:${minTime}-${maxTime}` : selectedTime;
|
||||
// A re-mount re-runs this effect with the same key, which enqueueFetchAll skips.
|
||||
const fetchCycleKey = `${dashboardId}|${orderKey}|${timeKey}`;
|
||||
const fetchCycleTimer = useRef<ReturnType<typeof setTimeout>>();
|
||||
useEffect(() => {
|
||||
if (!dashboardId || variables.length === 0) {
|
||||
return undefined;
|
||||
return;
|
||||
}
|
||||
if (fetchCycleTimer.current) {
|
||||
clearTimeout(fetchCycleTimer.current);
|
||||
}
|
||||
fetchCycleTimer.current = setTimeout(
|
||||
() => enqueueFetchAll(fetchCycleKey),
|
||||
FETCH_CYCLE_DEBOUNCE_MS,
|
||||
enqueueFetchAll(
|
||||
doAllQueryVariablesHaveValues(variables, selectionRef.current),
|
||||
);
|
||||
return (): void => {
|
||||
if (fetchCycleTimer.current) {
|
||||
clearTimeout(fetchCycleTimer.current);
|
||||
}
|
||||
};
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [dashboardId, fetchCycleKey]);
|
||||
}, [dashboardId, orderKey, minTime, maxTime]);
|
||||
|
||||
const setSelection = useCallback(
|
||||
(name: string, next: VariableSelection): void => {
|
||||
|
||||
@@ -4,6 +4,8 @@ import type {
|
||||
VariableFormModel,
|
||||
VariableType,
|
||||
} from '../DashboardSettings/Variables/variableFormModel';
|
||||
import type { VariableSelectionMap } from './selectionTypes';
|
||||
import { isResolved } from './selectionUtils';
|
||||
|
||||
/**
|
||||
* Inter-variable dependency graph for runtime selection. A QUERY variable
|
||||
@@ -240,3 +242,17 @@ export function deriveFetchContext(
|
||||
dynamicVariableOrder,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether every QUERY variable already has a usable selection — decides at load
|
||||
* time whether dynamic variables may fetch immediately or must wait for the
|
||||
* query variables to settle first (V1 parity).
|
||||
*/
|
||||
export function doAllQueryVariablesHaveValues(
|
||||
variables: VariableFormModel[],
|
||||
selection: VariableSelectionMap,
|
||||
): boolean {
|
||||
return variables
|
||||
.filter((v) => v.type === 'QUERY')
|
||||
.every((v) => isResolved(selection[v.name]));
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { QueryParams } from 'constants/query';
|
||||
import { parseAsJson } from 'nuqs';
|
||||
|
||||
import type { SelectedVariableValue } from './selectionTypes';
|
||||
@@ -13,3 +14,21 @@ export const variablesUrlParser = parseAsJson<
|
||||
? (v as Record<string, SelectedVariableValue>)
|
||||
: null,
|
||||
);
|
||||
|
||||
/**
|
||||
* Extends a search string with the current `?variables=` param (unchanged when
|
||||
* absent), so the dashboard ↔ editor handoff keeps the selection in the URL and
|
||||
* it survives a refresh (V1 parity).
|
||||
*/
|
||||
export function withVariablesSearch(
|
||||
base: string,
|
||||
currentSearch: string,
|
||||
): string {
|
||||
const value = new URLSearchParams(currentSearch).get(QueryParams.variables);
|
||||
if (!value) {
|
||||
return base;
|
||||
}
|
||||
const params = new URLSearchParams(base);
|
||||
params.set(QueryParams.variables, value);
|
||||
return `?${params.toString()}`;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
import { useCallback, useState } from 'react';
|
||||
import { generatePath } from 'react-router-dom';
|
||||
import { generatePath, useLocation } from 'react-router-dom';
|
||||
import ROUTES from 'constants/routes';
|
||||
import { useSafeNavigate } from 'hooks/useSafeNavigate';
|
||||
|
||||
import { newPanelSearch, NEW_PANEL_ID } from '../PanelEditor/newPanelRoute';
|
||||
import type { PanelKind } from '../Panels/types/panelKind';
|
||||
import { useDashboardStore } from '../store/useDashboardStore';
|
||||
import { withVariablesSearch } from '../VariablesBar/variablesUrlState';
|
||||
|
||||
interface UseCreatePanelResult {
|
||||
isPickerOpen: boolean;
|
||||
@@ -25,6 +26,7 @@ interface UseCreatePanelResult {
|
||||
*/
|
||||
export function useCreatePanel(): UseCreatePanelResult {
|
||||
const { safeNavigate } = useSafeNavigate();
|
||||
const { search } = useLocation();
|
||||
const dashboardId = useDashboardStore((s) => s.dashboardId);
|
||||
|
||||
const [isPickerOpen, setIsPickerOpen] = useState(false);
|
||||
@@ -48,10 +50,11 @@ export function useCreatePanel(): UseCreatePanelResult {
|
||||
panelId: NEW_PANEL_ID,
|
||||
});
|
||||
const target = targetIndex ?? layoutIndex;
|
||||
// Variable selection is read from the persisted store, not the URL.
|
||||
safeNavigate(`${path}${newPanelSearch(panelKind, target)}`);
|
||||
safeNavigate(
|
||||
`${path}${withVariablesSearch(newPanelSearch(panelKind, target), search)}`,
|
||||
);
|
||||
},
|
||||
[safeNavigate, dashboardId, layoutIndex],
|
||||
[safeNavigate, dashboardId, layoutIndex, search],
|
||||
);
|
||||
|
||||
return {
|
||||
|
||||
@@ -57,8 +57,5 @@ export function useGetQueryRangeV5({
|
||||
retry: retryUnlessClientError,
|
||||
keepPreviousData,
|
||||
cacheTime,
|
||||
// A resolved window is immutable per key, so a panel scrolled back into view
|
||||
// serves cache instead of refetching; a key change or manual refetch still runs.
|
||||
staleTime: Infinity,
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,51 +1,23 @@
|
||||
import { hasUsableValue } from '../VariablesBar/selectionUtils';
|
||||
import { VariableFetchState } from '../store/slices/variableFetchSlice';
|
||||
import { isResolved } from '../VariablesBar/selectionUtils';
|
||||
import { selectVariableValues } from '../store/slices/variableSelectionSlice';
|
||||
import { useDashboardStore } from '../store/useDashboardStore';
|
||||
|
||||
/**
|
||||
* Whether a panel should stay loading because a QUERY/DYNAMIC variable it references
|
||||
* isn't ready to substitute. A concrete pick (not ALL) and a DYNAMIC ALL are ready
|
||||
* immediately; an unselected value or a QUERY/CUSTOM ALL waits while it's still
|
||||
* resolving, then until it settles with a value — so a panel on a chain holds until
|
||||
* the last variable it depends on resolves. A fetch error or a settled-empty variable
|
||||
* releases it (no value is coming — render rather than hang).
|
||||
* True while a panel should stay in its loading state because a variable it
|
||||
* references is still loading/waiting and has no usable value yet — i.e. the
|
||||
* first load. Once the variable has a value, a later change no longer blocks the
|
||||
* panel (it refetches over stale data instead). V1 parity with
|
||||
* `useIsPanelWaitingOnVariable`.
|
||||
*/
|
||||
export function useIsPanelWaitingOnVariable(names: string[]): boolean {
|
||||
const dashboardId = useDashboardStore((s) => s.dashboardId);
|
||||
const variableTypes = useDashboardStore(
|
||||
(s) => s.variableFetchContext?.variableTypes,
|
||||
);
|
||||
const fetchStates = useDashboardStore((s) => s.variableFetchStates);
|
||||
const resolvedEmpty = useDashboardStore((s) => s.variableResolvedEmpty);
|
||||
const states = useDashboardStore((s) => s.variableFetchStates);
|
||||
const selection = useDashboardStore(selectVariableValues(dashboardId));
|
||||
|
||||
return names.some((name) => {
|
||||
const type = variableTypes?.[name];
|
||||
if (type !== 'QUERY' && type !== 'DYNAMIC') {
|
||||
return false;
|
||||
}
|
||||
const value = selection[name];
|
||||
// A concrete pick is authoritative; a DYNAMIC ALL is the stable `__all__`
|
||||
// sentinel — both ready without waiting.
|
||||
if (value && !value.allSelected && hasUsableValue(value, type)) {
|
||||
return false;
|
||||
}
|
||||
if (type === 'DYNAMIC' && value?.allSelected) {
|
||||
return false;
|
||||
}
|
||||
// Unselected, or a QUERY/CUSTOM ALL whose array the fetch produces: wait while
|
||||
// resolving, then until it settles with a usable value.
|
||||
const state = fetchStates[name];
|
||||
if (
|
||||
state === VariableFetchState.Waiting ||
|
||||
state === VariableFetchState.Loading
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
if (hasUsableValue(value, type)) {
|
||||
return false;
|
||||
}
|
||||
return state !== VariableFetchState.Error && !resolvedEmpty[name];
|
||||
const state = states[name];
|
||||
const inFlight =
|
||||
state === 'loading' || state === 'revalidating' || state === 'waiting';
|
||||
return isResolved(selection[name]) ? false : inFlight;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
import { useCallback } from 'react';
|
||||
import { generatePath } from 'react-router-dom';
|
||||
import { generatePath, useLocation } from 'react-router-dom';
|
||||
import ROUTES from 'constants/routes';
|
||||
import { useSafeNavigate } from 'hooks/useSafeNavigate';
|
||||
|
||||
import type { PanelEditorHandoffState } from '../PanelEditor/panelEditorHandoff';
|
||||
import { useDashboardStore } from '../store/useDashboardStore';
|
||||
import { withVariablesSearch } from '../VariablesBar/variablesUrlState';
|
||||
|
||||
/**
|
||||
* Returns a callback that opens the V2 panel editor by navigating to its full-page route
|
||||
* (`/dashboard/:dashboardId/panel/:panelId`). The dashboard id comes from the store, so any
|
||||
* caller can open the editor with just the panel id. Variable selection is read from the
|
||||
* persisted store (localStorage), not carried in the URL. The optional `handoffState` is
|
||||
* caller can open the editor with just the panel id. The `?variables=` selection is carried
|
||||
* along (V1 parity) so it survives a refresh of the editor. The optional `handoffState` is
|
||||
* passed as router location state — the View modal uses it to hand its drilldown-edited spec
|
||||
* off to the editor (view → edit) so the editor opens on those edits rather than the saved
|
||||
* panel.
|
||||
@@ -20,15 +21,19 @@ export function useOpenPanelEditor(): (
|
||||
handoffState?: PanelEditorHandoffState,
|
||||
) => void {
|
||||
const { safeNavigate } = useSafeNavigate();
|
||||
const { search } = useLocation();
|
||||
const dashboardId = useDashboardStore((s) => s.dashboardId);
|
||||
|
||||
return useCallback(
|
||||
(panelId: string, handoffState?: PanelEditorHandoffState): void => {
|
||||
safeNavigate(
|
||||
generatePath(ROUTES.DASHBOARD_PANEL_EDITOR, { dashboardId, panelId }),
|
||||
`${generatePath(ROUTES.DASHBOARD_PANEL_EDITOR, {
|
||||
dashboardId,
|
||||
panelId,
|
||||
})}${withVariablesSearch('', search)}`,
|
||||
handoffState ? { state: handoffState } : undefined,
|
||||
);
|
||||
},
|
||||
[safeNavigate, dashboardId],
|
||||
[safeNavigate, dashboardId, search],
|
||||
);
|
||||
}
|
||||
|
||||
@@ -19,10 +19,7 @@ import {
|
||||
} from '../queryV5/buildQueryRangeRequest';
|
||||
import type { PanelPagination, PanelQueryData } from '../queryV5/types';
|
||||
import { getRawResults } from '../queryV5/v5ResponseData';
|
||||
import {
|
||||
getReferencedVariables,
|
||||
queryReferencesAnyVariable,
|
||||
} from '../queryV5/getReferencedVariables';
|
||||
import { getReferencedVariables } from '../queryV5/getReferencedVariables';
|
||||
import { getBuilderQueries } from '../Panels/utils/getBuilderQueries';
|
||||
import { PANEL_KIND_TO_PANEL_TYPE } from '../Panels/types/panelKind';
|
||||
import { selectResolvedVariables } from '../store/slices/variableSelectionSlice';
|
||||
@@ -60,9 +57,9 @@ export interface PanelQueryTimeOverride {
|
||||
export interface UsePanelQueryResult {
|
||||
/** Raw V5 fetch result — response + the request that produced it. */
|
||||
data: PanelQueryData;
|
||||
/** First fetch only (no cached data yet), OR waiting on an unresolved referenced variable — drives the full-panel loader. A background refetch does NOT set this; use `isFetching`. */
|
||||
/** First fetch only (no cached data yet) — drives the full-panel loader. A background refetch does NOT set this; use `isFetching`. */
|
||||
isLoading: boolean;
|
||||
/** Any request in flight (including a background refetch over stale data), OR waiting on an unresolved referenced variable — drives the loader / "refreshing" affordance, never a blank panel. */
|
||||
/** Any request in flight, including a background refetch over stale data — drives a "refreshing" affordance, never a blank panel. */
|
||||
isFetching: boolean;
|
||||
/** Showing a prior page's data (keepPreviousData) while the next page loads — list renderers swap in skeleton rows. */
|
||||
isPreviousData: boolean;
|
||||
@@ -134,13 +131,6 @@ export function usePanelQuery({
|
||||
return getReferencedVariables(queries, allNames);
|
||||
}, [queries, fetchContext]);
|
||||
|
||||
// Detected without the fetch context, so the gate below can hold even before it
|
||||
// initializes.
|
||||
const hasVariableReference = useMemo(
|
||||
() => queryReferencesAnyVariable(queries),
|
||||
[queries],
|
||||
);
|
||||
|
||||
const scopedVariables = useMemo(() => {
|
||||
const scoped: typeof variables = {};
|
||||
referencedVariableNames.forEach((name) => {
|
||||
@@ -151,11 +141,11 @@ export function usePanelQuery({
|
||||
return scoped;
|
||||
}, [variables, referencedVariableNames]);
|
||||
|
||||
// Hold until referenced variables resolve; also hold before the context is ready
|
||||
// (we can't yet know which variables to substitute, so firing would drop `$var`s).
|
||||
const isWaitingOnVariable =
|
||||
useIsPanelWaitingOnVariable(referencedVariableNames) ||
|
||||
(hasVariableReference && !fetchContext);
|
||||
// First-load gate: hold the panel in its loading state until every referenced
|
||||
// variable has resolved a value.
|
||||
const isWaitingOnVariable = useIsPanelWaitingOnVariable(
|
||||
referencedVariableNames,
|
||||
);
|
||||
|
||||
// `visualization` exists only on variants that declare it — read via `in` narrowing over the
|
||||
// generated union (no cast). `fillSpans` (TimeSeries/Bar only) → formatOptions.fillGaps.
|
||||
@@ -319,10 +309,8 @@ export function usePanelQuery({
|
||||
|
||||
return {
|
||||
data,
|
||||
// A disabled (waiting-on-variable) query reports neither loading nor fetching, so
|
||||
// fold the wait in — else the panel body falls through to "No data" mid-load.
|
||||
isLoading: isWaitingOnVariable || response.isLoading,
|
||||
isFetching: isWaitingOnVariable || response.isFetching,
|
||||
isLoading: response.isLoading,
|
||||
isFetching: response.isFetching,
|
||||
isPreviousData: response.isPreviousData,
|
||||
error: response.error ?? null,
|
||||
refetch: response.refetch,
|
||||
|
||||
@@ -33,11 +33,6 @@ function DashboardContainer({
|
||||
document.title = name;
|
||||
}, [name]);
|
||||
|
||||
// Store is app-level and outlives the page: clear transient variable fetch state on
|
||||
// unmount so the next visit doesn't inherit stale states / climbing cycle ids.
|
||||
const resetVariableFetch = useDashboardStore((s) => s.resetVariableFetch);
|
||||
useEffect(() => resetVariableFetch, [resetVariableFetch]);
|
||||
|
||||
const fullScreenHandle = useFullScreenHandle();
|
||||
|
||||
const { isLocked, canEditDashboard } = useDashboardEditGuard(dashboard);
|
||||
|
||||
@@ -1,69 +0,0 @@
|
||||
import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
|
||||
|
||||
import {
|
||||
getReferencedVariables,
|
||||
queryReferencesAnyVariable,
|
||||
} from '../getReferencedVariables';
|
||||
|
||||
// Test fixtures are cast at the outer boundary; the perses-generated query
|
||||
// plugin unions are too verbose to construct field-typed inline.
|
||||
function clickhouseQuery(query: string): DashboardtypesQueryDTO[] {
|
||||
return [
|
||||
{
|
||||
kind: 'ScalarQuery',
|
||||
spec: {
|
||||
plugin: {
|
||||
kind: 'signoz/CompositeQuery',
|
||||
spec: {
|
||||
queries: [{ type: 'clickhouse_sql', spec: { name: 'A', query } }],
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
] as unknown as DashboardtypesQueryDTO[];
|
||||
}
|
||||
|
||||
describe('getReferencedVariables', () => {
|
||||
it('returns only the variables the query references', () => {
|
||||
const queries = clickhouseQuery(
|
||||
'SELECT count() FROM t WHERE service = $service.name',
|
||||
);
|
||||
expect(
|
||||
getReferencedVariables(queries, [
|
||||
'service.name',
|
||||
'deployment.environment',
|
||||
'dyn_service',
|
||||
]),
|
||||
).toStrictEqual(['service.name']);
|
||||
});
|
||||
|
||||
it('returns empty when no known name matches', () => {
|
||||
const queries = clickhouseQuery('SELECT 1');
|
||||
expect(getReferencedVariables(queries, ['service.name'])).toStrictEqual([]);
|
||||
});
|
||||
});
|
||||
|
||||
describe('queryReferencesAnyVariable', () => {
|
||||
it('is true when the query references a variable, even with no known names', () => {
|
||||
const queries = clickhouseQuery(
|
||||
'SELECT count() FROM t WHERE service = $service.name',
|
||||
);
|
||||
expect(queryReferencesAnyVariable(queries)).toBe(true);
|
||||
});
|
||||
|
||||
it('is false for a query with no variable reference', () => {
|
||||
expect(queryReferencesAnyVariable(clickhouseQuery('SELECT 1'))).toBe(false);
|
||||
});
|
||||
|
||||
it('does not treat $__ macros as variable references', () => {
|
||||
expect(
|
||||
queryReferencesAnyVariable(
|
||||
clickhouseQuery('SELECT toStartOfInterval(ts, INTERVAL $__interval)'),
|
||||
),
|
||||
).toBe(false);
|
||||
});
|
||||
|
||||
it('is false for an empty query list', () => {
|
||||
expect(queryReferencesAnyVariable([])).toBe(false);
|
||||
});
|
||||
});
|
||||
@@ -8,8 +8,8 @@ import type {
|
||||
VariableFormModel,
|
||||
VariableType,
|
||||
} from '../DashboardSettings/Variables/variableFormModel';
|
||||
import { configuredDefaultValue } from '../VariablesBar/resolveVariableSelection';
|
||||
import type {
|
||||
SelectedVariableValue,
|
||||
VariableSelection,
|
||||
VariableSelectionMap,
|
||||
} from '../VariablesBar/selectionTypes';
|
||||
@@ -33,6 +33,21 @@ const VARIABLE_TYPE_TO_DTO: Record<
|
||||
DYNAMIC: Querybuildertypesv5VariableTypeDTO.dynamic,
|
||||
};
|
||||
|
||||
/** The variable's configured default, used when nothing is selected yet. */
|
||||
function configuredDefault(
|
||||
definition: VariableFormModel,
|
||||
): SelectedVariableValue | undefined {
|
||||
if (definition.type === 'TEXT') {
|
||||
return definition.textValue || undefined;
|
||||
}
|
||||
// `defaultValue` is `string | string[]` on the wire — use it directly.
|
||||
const def = definition.defaultValue;
|
||||
if (Array.isArray(def)) {
|
||||
return def.length > 0 ? def : undefined;
|
||||
}
|
||||
return def || undefined;
|
||||
}
|
||||
|
||||
/**
|
||||
* Resolves the wire value for one variable: the dynamic "ALL" sentinel, else the
|
||||
* user's selection, else the configured default. Returns `undefined` when there
|
||||
@@ -59,7 +74,7 @@ function resolveValue(
|
||||
return selected as Querybuildertypesv5VariableItemDTOValue;
|
||||
}
|
||||
|
||||
const fallback = configuredDefaultValue(definition);
|
||||
const fallback = configuredDefault(definition);
|
||||
return fallback == null
|
||||
? undefined
|
||||
: (fallback as Querybuildertypesv5VariableItemDTOValue);
|
||||
|
||||
@@ -1,8 +1,5 @@
|
||||
import type { DashboardtypesQueryDTO } from 'api/generated/services/sigNoz.schemas';
|
||||
import {
|
||||
containsAnyVariableReference,
|
||||
textContainsVariableReference,
|
||||
} from 'lib/dashboardVariables/variableReference';
|
||||
import { textContainsVariableReference } from 'lib/dashboardVariables/variableReference';
|
||||
|
||||
import { toQueryEnvelopes } from './buildQueryRangeRequest';
|
||||
|
||||
@@ -48,18 +45,3 @@ export function getReferencedVariables(
|
||||
texts.some((text) => textContainsVariableReference(text, name)),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether a panel's queries reference *any* variable, independent of the known
|
||||
* variable set. Used to hold the panel until the variable fetch context is ready:
|
||||
* before then the variable names aren't known, so firing would substitute nothing
|
||||
* (dropping every `$var`) and the query would fail.
|
||||
*/
|
||||
export function queryReferencesAnyVariable(
|
||||
queries: DashboardtypesQueryDTO[],
|
||||
): boolean {
|
||||
if (queries.length === 0) {
|
||||
return false;
|
||||
}
|
||||
return extractQueryTexts(queries).some(containsAnyVariableReference);
|
||||
}
|
||||
|
||||
@@ -12,25 +12,14 @@ function model(overrides: Partial<VariableFormModel>): VariableFormModel {
|
||||
return { ...emptyVariableFormModel(), ...overrides };
|
||||
}
|
||||
|
||||
const DASH = 'test-dash';
|
||||
|
||||
function store(): ReturnType<typeof useDashboardStore.getState> {
|
||||
return useDashboardStore.getState();
|
||||
}
|
||||
function states(): Record<string, string> {
|
||||
return store().variableFetchStates;
|
||||
}
|
||||
/** Commit a value for a variable (what a parent must have before a child fetches). */
|
||||
function resolve(name: string): void {
|
||||
store().setVariableValue(DASH, name, {
|
||||
value: `${name}-v`,
|
||||
allSelected: false,
|
||||
});
|
||||
}
|
||||
function reset(names: string[], context: VariableFetchContext): void {
|
||||
useDashboardStore.setState({
|
||||
dashboardId: DASH,
|
||||
variableValues: {},
|
||||
variableFetchStates: {},
|
||||
variableLastUpdated: {},
|
||||
variableCycleIds: {},
|
||||
@@ -58,37 +47,28 @@ describe('variableFetchSlice', () => {
|
||||
});
|
||||
});
|
||||
|
||||
it('loads query roots + dynamics immediately and waits query dependents', () => {
|
||||
store().enqueueFetchAll();
|
||||
// Dynamics fetch immediately (not gated on the query chain); the query
|
||||
// dependent q2 waits for its parent q1.
|
||||
it('enqueueFetchAll loads roots, waits dependents and (ungated) dynamics', () => {
|
||||
store().enqueueFetchAll(false);
|
||||
expect(states()).toMatchObject({
|
||||
q1: 'loading',
|
||||
q2: 'waiting',
|
||||
d1: 'loading',
|
||||
d2: 'loading',
|
||||
d1: 'waiting',
|
||||
d2: 'waiting',
|
||||
});
|
||||
});
|
||||
|
||||
it('a completed parent alone does not unblock the child; its committed value does', () => {
|
||||
store().enqueueFetchAll();
|
||||
store().onVariableFetchComplete('q1');
|
||||
// q1 finished fetching but has not auto-selected a value yet, so q2 holds
|
||||
// rather than fetching with q1 unresolved. Dynamics load regardless.
|
||||
expect(states()).toMatchObject({ q1: 'idle', q2: 'waiting', d1: 'loading' });
|
||||
// q1's value commits → the value cascade unblocks q2.
|
||||
resolve('q1');
|
||||
store().enqueueDescendants('q1');
|
||||
expect(states().q2).not.toBe('waiting');
|
||||
it('enqueueFetchAll loads dynamics immediately when query values exist', () => {
|
||||
store().enqueueFetchAll(true);
|
||||
expect(states().d1).toBe('loading');
|
||||
});
|
||||
|
||||
it('unblocks a query child immediately when its parent already has a value', () => {
|
||||
// Persisted/pre-seeded selection: q1 has a value before it even fetches, so
|
||||
// completing its fetch unblocks q2 straight away (a single fetch, no cascade).
|
||||
resolve('q1');
|
||||
store().enqueueFetchAll();
|
||||
it('completing a parent unblocks its query child, then unlocks dynamics', () => {
|
||||
store().enqueueFetchAll(false);
|
||||
store().onVariableFetchComplete('q1');
|
||||
expect(states().q2).not.toBe('waiting');
|
||||
expect(states()).toMatchObject({ q1: 'idle', q2: 'loading', d1: 'waiting' });
|
||||
|
||||
store().onVariableFetchComplete('q2');
|
||||
expect(states()).toMatchObject({ q2: 'idle', d1: 'loading', d2: 'loading' });
|
||||
});
|
||||
|
||||
it('ignores a settle for a variable that is not actively fetching', () => {
|
||||
@@ -99,14 +79,8 @@ describe('variableFetchSlice', () => {
|
||||
});
|
||||
|
||||
it('changing a query variable revalidates query descendants but NOT dynamics', () => {
|
||||
// Drive the chain to a fully settled state: q1 fetched + valued, q2 fetched.
|
||||
store().enqueueFetchAll();
|
||||
store().onVariableFetchComplete('q1');
|
||||
resolve('q1');
|
||||
store().enqueueDescendants('q1');
|
||||
store().onVariableFetchComplete('q2');
|
||||
resolve('q2');
|
||||
['d1', 'd2'].forEach((n) => store().onVariableFetchComplete(n));
|
||||
store().enqueueFetchAll(true);
|
||||
['q1', 'q2', 'd1', 'd2'].forEach((n) => store().onVariableFetchComplete(n));
|
||||
const before = { ...store().variableCycleIds };
|
||||
|
||||
store().enqueueDescendants('q1');
|
||||
@@ -117,7 +91,7 @@ describe('variableFetchSlice', () => {
|
||||
});
|
||||
|
||||
it('changing a dynamic refreshes the OTHER dynamics, never itself or query vars', () => {
|
||||
store().enqueueFetchAll();
|
||||
store().enqueueFetchAll(true);
|
||||
['q1', 'q2', 'd1', 'd2'].forEach((n) => store().onVariableFetchComplete(n));
|
||||
const before = { ...store().variableCycleIds };
|
||||
|
||||
@@ -128,29 +102,13 @@ describe('variableFetchSlice', () => {
|
||||
});
|
||||
|
||||
it('a failed parent idles its query descendants', () => {
|
||||
store().enqueueFetchAll();
|
||||
store().enqueueFetchAll(false);
|
||||
store().onVariableFetchFailure('q1');
|
||||
expect(states().q1).toBe('error');
|
||||
expect(states().q2).toBe('idle');
|
||||
});
|
||||
});
|
||||
|
||||
describe('variableFetchSlice — query depends on a dynamic', () => {
|
||||
// qd (query) references $dyn (a dynamic variable).
|
||||
const dyn = model({ name: 'dyn', type: 'DYNAMIC', dynamicAttribute: 'pod' });
|
||||
const qd = model({ name: 'qd', type: 'QUERY', queryValue: 'SELECT $dyn' });
|
||||
const context = deriveFetchContext([dyn, qd]);
|
||||
|
||||
beforeEach(() => reset(['dyn', 'qd'], context));
|
||||
|
||||
it('does not wait for a dynamic parent — both load immediately', () => {
|
||||
store().enqueueFetchAll();
|
||||
// A dynamic's selected value is already in the selection, so the dependent
|
||||
// query never waits on the dynamic's option fetch; both start together.
|
||||
expect(states()).toMatchObject({ dyn: 'loading', qd: 'loading' });
|
||||
});
|
||||
});
|
||||
|
||||
describe('variableFetchSlice — diamond dependencies', () => {
|
||||
// qA, qB (roots) → qC (references both $qA and $qB).
|
||||
const qA = model({ name: 'qA', type: 'QUERY', queryValue: 'SELECT 1' });
|
||||
@@ -160,19 +118,15 @@ describe('variableFetchSlice — diamond dependencies', () => {
|
||||
|
||||
beforeEach(() => reset(['qA', 'qB', 'qC'], context));
|
||||
|
||||
it('unblocks the child only once BOTH parents have committed values', () => {
|
||||
store().enqueueFetchAll();
|
||||
it('unblocks the child only once BOTH parents are settled', () => {
|
||||
store().enqueueFetchAll(false);
|
||||
expect(states().qC).toBe('waiting');
|
||||
|
||||
store().onVariableFetchComplete('qA');
|
||||
resolve('qA');
|
||||
store().enqueueDescendants('qA');
|
||||
expect(states().qC).toBe('waiting'); // qB has no value yet
|
||||
expect(states().qC).toBe('waiting'); // qB still loading
|
||||
|
||||
store().onVariableFetchComplete('qB');
|
||||
resolve('qB');
|
||||
store().enqueueDescendants('qB');
|
||||
expect(states().qC).not.toBe('waiting'); // both valued → fetches
|
||||
expect(states().qC).not.toBe('waiting'); // both settled → fetches
|
||||
});
|
||||
});
|
||||
|
||||
@@ -185,7 +139,7 @@ describe('variableFetchSlice — dependency cycle', () => {
|
||||
beforeEach(() => reset(['qX', 'qY'], context));
|
||||
|
||||
it('enqueues cyclic query variables as best-effort roots (not silently idle)', () => {
|
||||
store().enqueueFetchAll();
|
||||
store().enqueueFetchAll(false);
|
||||
expect(states().qX).not.toBe('idle');
|
||||
expect(states().qY).not.toBe('idle');
|
||||
});
|
||||
|
||||
@@ -1,42 +1,23 @@
|
||||
import type { StateCreator } from 'zustand';
|
||||
|
||||
import { hasUsableValue } from '../../VariablesBar/selectionUtils';
|
||||
import type { VariableSelectionMap } from '../../VariablesBar/selectionTypes';
|
||||
import type { VariableFetchContext } from '../../VariablesBar/variableDependencies';
|
||||
import type { DashboardStore } from '../useDashboardStore';
|
||||
import { selectVariableValues } from './variableSelectionSlice';
|
||||
import {
|
||||
areAllQueryVariablesSettled,
|
||||
type FetchMaps,
|
||||
isSettled,
|
||||
isVariableInActiveFetchState,
|
||||
resolveFetchState,
|
||||
unlockWaitingDynamicVariables,
|
||||
VariableFetchState,
|
||||
} from './variableFetchSlice.utils';
|
||||
|
||||
/**
|
||||
* Whether every QUERY parent of `name` holds a committed value. Gating a child on its
|
||||
* parents' *values* (not their settled fetch state) makes it fetch once, after the
|
||||
* values commit — not prematurely on fetch-complete and again on value-commit.
|
||||
*/
|
||||
function queryParentsHaveValues(
|
||||
name: string,
|
||||
context: VariableFetchContext,
|
||||
selection: VariableSelectionMap,
|
||||
): boolean {
|
||||
const parents = context.dependencyData.parentGraph[name] || [];
|
||||
return parents.every(
|
||||
(p) =>
|
||||
context.variableTypes[p] !== 'QUERY' ||
|
||||
hasUsableValue(selection[p], context.variableTypes[p]),
|
||||
);
|
||||
}
|
||||
|
||||
export { VariableFetchState } from './variableFetchSlice.utils';
|
||||
|
||||
/**
|
||||
* Runtime fetch orchestration for dashboard variables — native port of V1's
|
||||
* `variableFetchStore`. Decides WHEN each variable's options fetch: query
|
||||
* variables in dependency order, dynamics immediately (they are scoped only by
|
||||
* sibling dynamic selections, never by query variables, so nothing gates them),
|
||||
* variables in dependency order, dynamics together once query values exist,
|
||||
* text/custom never. `cycleIds` is a per-variable request nonce keyed into each
|
||||
* selector's react-query key (bump = fresh fetch, auto-cancel stale). Transient.
|
||||
* `enqueueFetchAll` = load/time change; `enqueueDescendants` = one value changed.
|
||||
@@ -45,35 +26,13 @@ export interface VariableFetchSlice {
|
||||
variableFetchStates: Record<string, VariableFetchState>;
|
||||
variableLastUpdated: Record<string, number>;
|
||||
variableCycleIds: Record<string, number>;
|
||||
/**
|
||||
* Whether a QUERY/DYNAMIC variable settled its fetch with zero options (so it
|
||||
* will never get a value). Lets a dependent panel fall through to "no data"
|
||||
* instead of waiting forever on a value that isn't coming.
|
||||
*/
|
||||
variableResolvedEmpty: Record<string, boolean>;
|
||||
/** Static dependency context, set by `initVariableFetch` (null before init). */
|
||||
variableFetchContext: VariableFetchContext | null;
|
||||
/**
|
||||
* Signature (dashboard + time + variable order) of the last full fetch cycle.
|
||||
* A repeat `enqueueFetchAll` with the same signature is skipped, so a component
|
||||
* re-mount can't redo the cycle and double every variable's fetch.
|
||||
*/
|
||||
lastFetchAllKey: string | null;
|
||||
|
||||
/** Seed state entries for the current variable set and store the context. */
|
||||
initVariableFetch: (names: string[], context: VariableFetchContext) => void;
|
||||
/**
|
||||
* Clear all transient fetch state on dashboard-page unmount, so a later visit
|
||||
* starts clean instead of inheriting stale state from this app-level store.
|
||||
*/
|
||||
resetVariableFetch: () => void;
|
||||
/** Record whether a variable settled with no options (drives the panel gate). */
|
||||
setVariableResolvedEmpty: (name: string, isEmpty: boolean) => void;
|
||||
/**
|
||||
* Start a full fetch cycle for every fetchable variable (load / time change).
|
||||
* A repeat call with the same signature `key` is a no-op (idempotent re-mount).
|
||||
*/
|
||||
enqueueFetchAll: (key?: string) => void;
|
||||
/** Start a full fetch cycle for every fetchable variable (load / time change). */
|
||||
enqueueFetchAll: (doAllQueryVariablesHaveValuesSelected: boolean) => void;
|
||||
/** Mark a variable's fetch as done; unblock its waiting children / dynamics. */
|
||||
onVariableFetchComplete: (name: string) => void;
|
||||
/** Mark a variable's fetch as failed; idle its query descendants. */
|
||||
@@ -106,32 +65,10 @@ export const createVariableFetchSlice: StateCreator<
|
||||
variableFetchStates: {},
|
||||
variableLastUpdated: {},
|
||||
variableCycleIds: {},
|
||||
variableResolvedEmpty: {},
|
||||
variableFetchContext: null,
|
||||
lastFetchAllKey: null,
|
||||
|
||||
resetVariableFetch: (): void => {
|
||||
set({
|
||||
variableFetchStates: {},
|
||||
variableLastUpdated: {},
|
||||
variableCycleIds: {},
|
||||
variableResolvedEmpty: {},
|
||||
variableFetchContext: null,
|
||||
lastFetchAllKey: null,
|
||||
});
|
||||
},
|
||||
|
||||
setVariableResolvedEmpty: (name, isEmpty): void => {
|
||||
const current = get().variableResolvedEmpty;
|
||||
if ((current[name] ?? false) === isEmpty) {
|
||||
return;
|
||||
}
|
||||
set({ variableResolvedEmpty: { ...current, [name]: isEmpty } });
|
||||
},
|
||||
|
||||
initVariableFetch: (names, context): void => {
|
||||
const maps = cloneMaps(get());
|
||||
const resolvedEmpty = { ...get().variableResolvedEmpty };
|
||||
// Initialize new variables to idle, preserving existing states.
|
||||
names.forEach((name) => {
|
||||
if (!maps.states[name]) {
|
||||
@@ -145,23 +82,17 @@ export const createVariableFetchSlice: StateCreator<
|
||||
delete maps.states[name];
|
||||
delete maps.lastUpdated[name];
|
||||
delete maps.cycleIds[name];
|
||||
delete resolvedEmpty[name];
|
||||
}
|
||||
});
|
||||
set({
|
||||
variableFetchStates: maps.states,
|
||||
variableLastUpdated: maps.lastUpdated,
|
||||
variableCycleIds: maps.cycleIds,
|
||||
variableResolvedEmpty: resolvedEmpty,
|
||||
variableFetchContext: context,
|
||||
});
|
||||
},
|
||||
|
||||
enqueueFetchAll: (key): void => {
|
||||
// Skip a redundant re-run (re-mount with identical inputs) — else it doubles.
|
||||
if (key && key === get().lastFetchAllKey) {
|
||||
return;
|
||||
}
|
||||
enqueueFetchAll: (doAllQueryVariablesHaveValuesSelected): void => {
|
||||
const { variableFetchContext } = get();
|
||||
if (!variableFetchContext) {
|
||||
return;
|
||||
@@ -174,11 +105,7 @@ export const createVariableFetchSlice: StateCreator<
|
||||
} = variableFetchContext;
|
||||
const maps = cloneMaps(get());
|
||||
|
||||
// Query variables wait only for their QUERY parents. A DYNAMIC parent does not
|
||||
// gate: its option fetch feeds only its own dropdown, while its selected value
|
||||
// (ALL → `__all__`, or a concrete pick) is already in the selection, so a
|
||||
// dependent query substitutes it immediately and refetches via the cascade if
|
||||
// it later changes. Text/custom parents resolve synchronously, so nothing waits.
|
||||
// Query variables: roots start immediately, dependents wait for parents.
|
||||
queryVariableOrder.forEach((name) => {
|
||||
maps.cycleIds[name] = (maps.cycleIds[name] || 0) + 1;
|
||||
const parents = dependencyData.parentGraph[name] || [];
|
||||
@@ -189,8 +116,8 @@ export const createVariableFetchSlice: StateCreator<
|
||||
});
|
||||
|
||||
// Query variables dropped from the dependency order (part of a cycle) would
|
||||
// otherwise never fetch — start them as best-effort roots so they surface
|
||||
// data/an error instead of sitting empty.
|
||||
// otherwise never fetch and would stall waiting dynamics — start them as
|
||||
// best-effort roots so they surface data/an error instead of sitting empty.
|
||||
const orderedQuery = new Set(queryVariableOrder);
|
||||
Object.keys(variableTypes).forEach((name) => {
|
||||
if (variableTypes[name] === 'QUERY' && !orderedQuery.has(name)) {
|
||||
@@ -199,21 +126,19 @@ export const createVariableFetchSlice: StateCreator<
|
||||
}
|
||||
});
|
||||
|
||||
// Dynamic variables fetch immediately, in parallel with the query variables:
|
||||
// their options are scoped only by sibling dynamic selections (never by query
|
||||
// variables), so there is nothing to wait for. Starting early lets them
|
||||
// populate fast even when query variables are slow; a sibling selection change
|
||||
// later refetches them via `enqueueDescendantsBatch`.
|
||||
// Dynamic variables: start now if query variables already have values,
|
||||
// otherwise wait until the query variables settle.
|
||||
dynamicVariableOrder.forEach((name) => {
|
||||
maps.cycleIds[name] = (maps.cycleIds[name] || 0) + 1;
|
||||
maps.states[name] = resolveFetchState(maps, name);
|
||||
maps.states[name] = doAllQueryVariablesHaveValuesSelected
|
||||
? resolveFetchState(maps, name)
|
||||
: VariableFetchState.Waiting;
|
||||
});
|
||||
|
||||
set({
|
||||
variableFetchStates: maps.states,
|
||||
variableLastUpdated: maps.lastUpdated,
|
||||
variableCycleIds: maps.cycleIds,
|
||||
lastFetchAllKey: key ?? get().lastFetchAllKey,
|
||||
});
|
||||
},
|
||||
|
||||
@@ -229,11 +154,10 @@ export const createVariableFetchSlice: StateCreator<
|
||||
maps.lastUpdated[name] = Date.now();
|
||||
|
||||
if (variableFetchContext) {
|
||||
const { dependencyData, variableTypes } = variableFetchContext;
|
||||
const selection = selectVariableValues(get().dashboardId)(get());
|
||||
// Release a waiting child only if its parents are already valued (e.g. a
|
||||
// persisted selection). For a just-fetched parent whose value hasn't committed
|
||||
// yet, the value cascade (enqueueDescendantsBatch) unblocks it instead.
|
||||
const { dependencyData, variableTypes, dynamicVariableOrder } =
|
||||
variableFetchContext;
|
||||
// Unblock a waiting query child only once ALL its parents are settled —
|
||||
// otherwise it would fetch against a not-yet-resolved parent.
|
||||
(dependencyData.graph[name] || []).forEach((child) => {
|
||||
if (
|
||||
variableTypes[child] !== 'QUERY' ||
|
||||
@@ -241,10 +165,18 @@ export const createVariableFetchSlice: StateCreator<
|
||||
) {
|
||||
return;
|
||||
}
|
||||
if (queryParentsHaveValues(child, variableFetchContext, selection)) {
|
||||
const parents = dependencyData.parentGraph[child] || [];
|
||||
if (parents.every((p) => isSettled(maps.states[p]))) {
|
||||
maps.states[child] = resolveFetchState(maps, child);
|
||||
}
|
||||
});
|
||||
// Once all query variables settle, unlock any waiting dynamics.
|
||||
if (
|
||||
variableTypes[name] === 'QUERY' &&
|
||||
areAllQueryVariablesSettled(maps.states, variableTypes)
|
||||
) {
|
||||
unlockWaitingDynamicVariables(maps, dynamicVariableOrder);
|
||||
}
|
||||
}
|
||||
|
||||
set({
|
||||
@@ -263,14 +195,20 @@ export const createVariableFetchSlice: StateCreator<
|
||||
maps.states[name] = VariableFetchState.Error;
|
||||
|
||||
if (variableFetchContext) {
|
||||
const { dependencyData, variableTypes } = variableFetchContext;
|
||||
// Idle query descendants only when a QUERY parent fails (they need its
|
||||
// value); a DYNAMIC failure doesn't block them (they used its selection).
|
||||
const { dependencyData, variableTypes, dynamicVariableOrder } =
|
||||
variableFetchContext;
|
||||
// Query descendants can't proceed without this parent — idle them.
|
||||
(dependencyData.transitiveDescendants[name] || []).forEach((desc) => {
|
||||
if (variableTypes[name] === 'QUERY' && variableTypes[desc] === 'QUERY') {
|
||||
if (variableTypes[desc] === 'QUERY') {
|
||||
maps.states[desc] = VariableFetchState.Idle;
|
||||
}
|
||||
});
|
||||
if (
|
||||
variableTypes[name] === 'QUERY' &&
|
||||
areAllQueryVariablesSettled(maps.states, variableTypes)
|
||||
) {
|
||||
unlockWaitingDynamicVariables(maps, dynamicVariableOrder);
|
||||
}
|
||||
}
|
||||
|
||||
set({
|
||||
@@ -293,11 +231,9 @@ export const createVariableFetchSlice: StateCreator<
|
||||
variableFetchContext;
|
||||
const maps = cloneMaps(get());
|
||||
const changed = new Set(names);
|
||||
// Callers commit values before this runs, so the gate sees the new parent values.
|
||||
const selection = selectVariableValues(get().dashboardId)(get());
|
||||
|
||||
// Query descendants of the changed vars (not the changed ones): fetch once all
|
||||
// their query parents have a value, else hold until the rest land.
|
||||
// Union of the changed variables' query descendants (never the changed ones
|
||||
// themselves), refreshed once each: refetch when all parents are settled.
|
||||
const queryDescendants = new Set<string>();
|
||||
names.forEach((name) => {
|
||||
(dependencyData.transitiveDescendants[name] || []).forEach((desc) => {
|
||||
@@ -308,24 +244,27 @@ export const createVariableFetchSlice: StateCreator<
|
||||
});
|
||||
queryDescendants.forEach((desc) => {
|
||||
maps.cycleIds[desc] = (maps.cycleIds[desc] || 0) + 1;
|
||||
maps.states[desc] = queryParentsHaveValues(
|
||||
desc,
|
||||
variableFetchContext,
|
||||
selection,
|
||||
)
|
||||
const parents = dependencyData.parentGraph[desc] || [];
|
||||
const allParentsSettled = parents.every((p) => isSettled(maps.states[p]));
|
||||
maps.states[desc] = allParentsSettled
|
||||
? resolveFetchState(maps, desc)
|
||||
: VariableFetchState.Waiting;
|
||||
});
|
||||
|
||||
// A dynamic's options depend only on its sibling DYNAMIC selections, so only a
|
||||
// dynamic change affects them — refresh the *other* dynamics immediately
|
||||
// (never the one that changed, which would refetch its own identical options).
|
||||
// dynamic change affects them — refresh the *other* dynamics (never the one
|
||||
// that changed, which would refetch its own identical options).
|
||||
if (names.some((name) => variableTypes[name] === 'DYNAMIC')) {
|
||||
dynamicVariableOrder
|
||||
.filter((dynName) => !changed.has(dynName))
|
||||
.forEach((dynName) => {
|
||||
maps.cycleIds[dynName] = (maps.cycleIds[dynName] || 0) + 1;
|
||||
maps.states[dynName] = resolveFetchState(maps, dynName);
|
||||
maps.states[dynName] = areAllQueryVariablesSettled(
|
||||
maps.states,
|
||||
variableTypes,
|
||||
)
|
||||
? resolveFetchState(maps, dynName)
|
||||
: VariableFetchState.Waiting;
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import type { VariableType } from '../../DashboardSettings/Variables/variableFormModel';
|
||||
|
||||
/** Per-variable fetch lifecycle (ported from V1's `variableFetchStore`). */
|
||||
export enum VariableFetchState {
|
||||
Idle = 'idle',
|
||||
@@ -14,6 +16,11 @@ export interface FetchMaps {
|
||||
cycleIds: Record<string, number>;
|
||||
}
|
||||
|
||||
/** Settled = can make no further progress (idle or error). */
|
||||
export function isSettled(state: VariableFetchState | undefined): boolean {
|
||||
return state === VariableFetchState.Idle || state === VariableFetchState.Error;
|
||||
}
|
||||
|
||||
/** Active = a fetch is in flight; only then should a settle be applied. */
|
||||
export function isVariableInActiveFetchState(
|
||||
state: VariableFetchState | undefined,
|
||||
@@ -30,3 +37,25 @@ export function resolveFetchState(
|
||||
? VariableFetchState.Revalidating
|
||||
: VariableFetchState.Loading;
|
||||
}
|
||||
|
||||
/** True once every QUERY variable is settled. */
|
||||
export function areAllQueryVariablesSettled(
|
||||
states: Record<string, VariableFetchState>,
|
||||
variableTypes: Record<string, VariableType>,
|
||||
): boolean {
|
||||
return Object.entries(variableTypes)
|
||||
.filter(([, type]) => type === 'QUERY')
|
||||
.every(([name]) => isSettled(states[name]));
|
||||
}
|
||||
|
||||
/** Move any `waiting` dynamic variables into loading/revalidating. */
|
||||
export function unlockWaitingDynamicVariables(
|
||||
maps: FetchMaps,
|
||||
dynamicVariableOrder: string[],
|
||||
): void {
|
||||
dynamicVariableOrder.forEach((dynName) => {
|
||||
if (maps.states[dynName] === VariableFetchState.Waiting) {
|
||||
maps.states[dynName] = resolveFetchState(maps, dynName);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -26,6 +26,7 @@ import { useSyncVariablesForSuggestions } from '../DashboardContainer/hooks/useS
|
||||
import { createDefaultPanel } from '../DashboardContainer/patchOps';
|
||||
import { useDashboardStore } from '../DashboardContainer/store/useDashboardStore';
|
||||
import { useSeedVariableSelection } from '../DashboardContainer/VariablesBar/useSeedVariableSelection';
|
||||
import { withVariablesSearch } from '../DashboardContainer/VariablesBar/variablesUrlState';
|
||||
import styles from './PanelEditorPage.module.scss';
|
||||
|
||||
/**
|
||||
@@ -95,10 +96,15 @@ function PanelEditorPage(): JSX.Element {
|
||||
const layoutIndex = parseNewPanelLayoutIndex(search);
|
||||
|
||||
const backToDashboard = useCallback((): void => {
|
||||
// Drop editor-only URL state (chiefly `compositeQuery`); the dashboard reads its
|
||||
// variable selection from the persisted store, and time lives in Redux.
|
||||
safeNavigate(generatePath(ROUTES.DASHBOARD, { dashboardId }));
|
||||
}, [safeNavigate, dashboardId]);
|
||||
// Carry only dashboard params; drop editor-only URL state (chiefly
|
||||
// `compositeQuery`) so it doesn't leak into the dashboard. Time lives in Redux.
|
||||
safeNavigate(
|
||||
`${generatePath(ROUTES.DASHBOARD, { dashboardId })}${withVariablesSearch(
|
||||
'',
|
||||
search,
|
||||
)}`,
|
||||
);
|
||||
}, [safeNavigate, dashboardId, search]);
|
||||
|
||||
if (isLoading) {
|
||||
return <Spinner tip="Loading dashboard..." />;
|
||||
|
||||
@@ -107,9 +107,6 @@ export function ContextMenu({
|
||||
}
|
||||
}}
|
||||
trigger="click"
|
||||
// Anchor to body (like the backdrop), not the host container: a modal's
|
||||
// transformed dialog would break `position: fixed` and trap the menu below it.
|
||||
getPopupContainer={(): HTMLElement => document.body}
|
||||
overlayStyle={{
|
||||
position: 'fixed',
|
||||
left: position.left,
|
||||
|
||||
@@ -77,11 +77,6 @@
|
||||
color: var(--muted-foreground);
|
||||
}
|
||||
|
||||
// Body-portaled overlay: stay clickable when a modal sets `body { pointer-events: none }`.
|
||||
.context-menu {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.context-menu .ant-popover-inner {
|
||||
padding: 0;
|
||||
border-radius: 6px;
|
||||
|
||||
2
go.mod
2
go.mod
@@ -83,7 +83,7 @@ require (
|
||||
go.uber.org/zap v1.27.1
|
||||
golang.org/x/crypto v0.52.0
|
||||
golang.org/x/exp v0.0.0-20260312153236-7ab1446f8b90
|
||||
golang.org/x/net v0.55.0
|
||||
golang.org/x/net v0.54.0
|
||||
golang.org/x/oauth2 v0.36.0
|
||||
golang.org/x/sync v0.20.0
|
||||
golang.org/x/text v0.37.0
|
||||
|
||||
4
go.sum
4
go.sum
@@ -1488,8 +1488,8 @@ golang.org/x/net v0.0.0-20220325170049-de3da57026de/go.mod h1:CfG3xpIq0wQ8r1q4Su
|
||||
golang.org/x/net v0.0.0-20220412020605-290c469a71a5/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
|
||||
golang.org/x/net v0.0.0-20220425223048-2871e0cb64e4/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
|
||||
golang.org/x/net v0.0.0-20220520000938-2e3eb7b945c2/go.mod h1:CfG3xpIq0wQ8r1q4Su4UZFWDARRcnwPjda9FqA0JpMk=
|
||||
golang.org/x/net v0.55.0 h1:bcvxaJn3e1U6InsFWt1JUq1aSjnRxLzT2rtD2KfkDF8=
|
||||
golang.org/x/net v0.55.0/go.mod h1:L5U2KuzuOe1lY7Z+aWVIKK6qEeJXnXV9yzGA+WCHJww=
|
||||
golang.org/x/net v0.54.0 h1:2zJIZAxAHV/OHCDTCOHAYehQzLfSXuf/5SoL/Dv6w/w=
|
||||
golang.org/x/net v0.54.0/go.mod h1:Sj4oj8jK6XmHpBZU/zWHw3BV3abl4Kvi+Ut7cQcY+cQ=
|
||||
golang.org/x/oauth2 v0.0.0-20180821212333-d2e6202438be/go.mod h1:N/0e6XlmueqKjAGxoOufVs8QHGRruUQn6yWY3a++T0U=
|
||||
golang.org/x/oauth2 v0.0.0-20190226205417-e64efc72b421/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
|
||||
golang.org/x/oauth2 v0.0.0-20190604053449-0f29369cfe45/go.mod h1:gOpvHmFTYa4IltrdGE7lF6nIHvwfUNPOp7c8zoXwtLw=
|
||||
|
||||
@@ -20,21 +20,21 @@ func (c Compiled) IsEmpty() bool {
|
||||
// Compile always returns a non-nil *Compiled. An empty query (or one that
|
||||
// produces no SQL) yields a Compiled with an empty SQL — callers gate on
|
||||
// SQL != "" rather than a nil check.
|
||||
//
|
||||
// A `key OP value` term compiles to a DSL predicate; a bare word is a
|
||||
// case-insensitive substring search over the dashboard name, description, and tag
|
||||
// keys/values. They compose through AND/OR/NOT, so `prod payment` matches both
|
||||
// words (implicit AND) and `prod OR name = 'x'` mixes free text with a filter. A
|
||||
// quoted token matches literally, e.g. `"prod payment"`.
|
||||
func Compile(query string, formatter sqlstore.SQLFormatter) (*Compiled, error) {
|
||||
if len(strings.TrimSpace(query)) == 0 {
|
||||
if len(query) == 0 {
|
||||
return &Compiled{}, nil
|
||||
}
|
||||
|
||||
sql, args, errs := newVisitor(formatter).compile(query)
|
||||
if len(errs) > 0 {
|
||||
queryVisitor := newVisitor(formatter)
|
||||
sql, args, syntaxErrs := queryVisitor.compile(query)
|
||||
|
||||
if len(syntaxErrs) > 0 {
|
||||
return nil, errors.NewInvalidInputf(dashboardtypes.ErrCodeDashboardListFilterInvalid,
|
||||
"invalid filter query: %s", strings.Join(errs, "; "))
|
||||
"invalid filter query: %s", strings.Join(syntaxErrs, "; "))
|
||||
}
|
||||
if len(queryVisitor.errors) > 0 {
|
||||
return nil, errors.NewInvalidInputf(dashboardtypes.ErrCodeDashboardListFilterInvalid,
|
||||
"invalid filter query: %s", strings.Join(queryVisitor.errors, "; "))
|
||||
}
|
||||
|
||||
return &Compiled{
|
||||
|
||||
@@ -460,83 +460,6 @@ func TestCompile_ComplexExamples(t *testing.T) {
|
||||
})
|
||||
}
|
||||
|
||||
func TestCompile_FreeText(t *testing.T) {
|
||||
// freeTextSQL is the predicate every free-text query compiles to; only the
|
||||
// bound pattern differs.
|
||||
freeTextSQL := `
|
||||
(
|
||||
lower(COALESCE(json_extract("dashboard"."data", '$.spec.display.name'), '')) LIKE LOWER(?) ESCAPE '\'
|
||||
OR lower(COALESCE(json_extract("dashboard"."data", '$.spec.display.description'), '')) LIKE LOWER(?) ESCAPE '\'
|
||||
OR EXISTS (
|
||||
SELECT 1 FROM tag_relation tr
|
||||
JOIN tag t ON t.id = tr.tag_id
|
||||
WHERE tr.kind = ? AND tr.resource_id = dashboard.id
|
||||
AND (lower(COALESCE(t.key, '')) LIKE LOWER(?) ESCAPE '\' OR lower(COALESCE(t.value, '')) LIKE LOWER(?) ESCAPE '\')
|
||||
))`
|
||||
freeTextArgs := func(pattern string) []any {
|
||||
return []any{pattern, pattern, kindArg, pattern, pattern}
|
||||
}
|
||||
|
||||
runCompileCases(t, []compileCase{
|
||||
{
|
||||
subtestName: "single bare word",
|
||||
dslQueryToCompile: `payment`,
|
||||
expectedSQL: freeTextSQL,
|
||||
expectedArgs: freeTextArgs("%payment%"),
|
||||
},
|
||||
{
|
||||
// consecutive words are implicit-AND per the grammar, so each is its
|
||||
// own term; `"prod payment"` (below) is the way to match the phrase
|
||||
subtestName: "words are separate terms AND'd together",
|
||||
dslQueryToCompile: `prod payment`,
|
||||
expectedSQL: "(" + freeTextSQL + " AND " + freeTextSQL + ")",
|
||||
expectedArgs: append(freeTextArgs("%prod%"), freeTextArgs("%payment%")...),
|
||||
},
|
||||
{
|
||||
subtestName: "a quoted token matches the whole phrase",
|
||||
dslQueryToCompile: `"prod payment"`,
|
||||
expectedSQL: freeTextSQL,
|
||||
expectedArgs: freeTextArgs("%prod payment%"),
|
||||
},
|
||||
{
|
||||
subtestName: "quoting is the escape hatch for a DSL-like literal",
|
||||
dslQueryToCompile: `"team = prod"`,
|
||||
expectedSQL: freeTextSQL,
|
||||
expectedArgs: freeTextArgs("%team = prod%"),
|
||||
},
|
||||
{
|
||||
subtestName: "LIKE wildcards in the term are escaped to match literally",
|
||||
dslQueryToCompile: `"50%"`,
|
||||
expectedSQL: freeTextSQL,
|
||||
expectedArgs: freeTextArgs(`%50\%%`),
|
||||
},
|
||||
{
|
||||
subtestName: "surrounding whitespace is trimmed",
|
||||
dslQueryToCompile: ` payment `,
|
||||
expectedSQL: freeTextSQL,
|
||||
expectedArgs: freeTextArgs("%payment%"),
|
||||
},
|
||||
{
|
||||
subtestName: "free-text term composes with a comparison via AND",
|
||||
dslQueryToCompile: `prod AND name CONTAINS 'signoz'`,
|
||||
expectedSQL: "(" + freeTextSQL + ` AND json_extract("dashboard"."data", '$.spec.display.name') LIKE ? ESCAPE '\')`,
|
||||
expectedArgs: append(freeTextArgs("%prod%"), "%signoz%"),
|
||||
},
|
||||
{
|
||||
subtestName: "free-text words compose with a comparison via OR",
|
||||
dslQueryToCompile: `prod payment OR name = 'x'`,
|
||||
expectedSQL: "((" + freeTextSQL + " AND " + freeTextSQL + `) OR json_extract("dashboard"."data", '$.spec.display.name') = ?)`,
|
||||
expectedArgs: append(append(freeTextArgs("%prod%"), freeTextArgs("%payment%")...), "x"),
|
||||
},
|
||||
{
|
||||
subtestName: "NOT negates a free-text term",
|
||||
dslQueryToCompile: `NOT payment`,
|
||||
expectedSQL: "NOT (" + freeTextSQL + ")",
|
||||
expectedArgs: freeTextArgs("%payment%"),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
func TestCompile_Rejections(t *testing.T) {
|
||||
runCompileCases(t, []compileCase{
|
||||
{
|
||||
|
||||
@@ -32,19 +32,13 @@ func newVisitor(formatter sqlstore.SQLFormatter) *visitor {
|
||||
}
|
||||
}
|
||||
|
||||
// compile builds `?`-placeholder WHERE SQL + args for bun. Each term is either a
|
||||
// `key OP value` comparison or a bare token that becomes a free-text search; the
|
||||
// two compose through the boolean grammar (AND/OR/NOT). Malformed input is
|
||||
// returned as errors.
|
||||
// compile turns the parse tree into `?`-placeholder WHERE SQL + arguments for bun.
|
||||
func (v *visitor) compile(query string) (string, []any, []string) {
|
||||
tree, _, collector := filterquery.Parse(query)
|
||||
if len(collector.Errors) > 0 {
|
||||
return "", nil, collector.Errors
|
||||
}
|
||||
condition, _ := v.visit(tree).(string)
|
||||
if len(v.errors) > 0 {
|
||||
return "", nil, v.errors
|
||||
}
|
||||
if condition == "" {
|
||||
return "", nil, nil
|
||||
}
|
||||
@@ -125,10 +119,10 @@ func (v *visitor) VisitPrimary(ctx *grammar.PrimaryContext) any {
|
||||
if ctx.Comparison() != nil {
|
||||
return v.visit(ctx.Comparison())
|
||||
}
|
||||
// A lone key/value/full-text token is a free-text term, composed with any
|
||||
// comparisons through the boolean grammar. A quoted token matches its contents
|
||||
// literally — the escape hatch for a phrase or a term that looks like DSL.
|
||||
return v.buildFreeTextTerm(trimQuotes(ctx.GetText()))
|
||||
// Bare keys, values, full text, and function calls are not part of the
|
||||
// dashboard list DSL.
|
||||
v.addError("unsupported expression %q — every term must be of the form `key OP value`", ctx.GetText())
|
||||
return ""
|
||||
}
|
||||
|
||||
// VisitComparison dispatches a single `key OP value` term. A key that matches
|
||||
@@ -407,50 +401,6 @@ func buildSubqueryForTagKeyAndValue(subqueryBuilder *sqlbuilder.SelectBuilder, t
|
||||
return buildSubqueryForTagKey(subqueryBuilder, tagKey).Where(valuePredicate)
|
||||
}
|
||||
|
||||
// ─── free-text search ────────────────────────────────────────────────────────
|
||||
|
||||
// buildFreeTextTerm matches value as a case-insensitive substring of the
|
||||
// dashboard name, description, or any tag key/value.
|
||||
func (v *visitor) buildFreeTextTerm(value string) string {
|
||||
nameColumn := string(v.formatter.JSONExtractString("dashboard.data", "$.spec.display.name"))
|
||||
descriptionColumn := string(v.formatter.JSONExtractString("dashboard.data", "$.spec.display.description"))
|
||||
namePredicate := v.buildFreeTextContains(v.selectBuilder, nameColumn, value)
|
||||
descriptionPredicate := v.buildFreeTextContains(v.selectBuilder, descriptionColumn, value)
|
||||
|
||||
subqueryBuilder := sqlbuilder.NewSelectBuilder()
|
||||
keyPredicate := v.buildFreeTextContains(subqueryBuilder, "t.key", value)
|
||||
valuePredicate := v.buildFreeTextContains(subqueryBuilder, "t.value", value)
|
||||
buildSubqueryForFreeTextTag(subqueryBuilder, keyPredicate, valuePredicate)
|
||||
tagPredicate := v.selectBuilder.Exists(subqueryBuilder)
|
||||
|
||||
return v.selectBuilder.Or(namePredicate, descriptionPredicate, tagPredicate)
|
||||
}
|
||||
|
||||
// buildFreeTextContains emits a case-insensitive contains as
|
||||
// LOWER(COALESCE(col, '')) LIKE LOWER(?), identical on SQLite and Postgres.
|
||||
// COALESCE keeps a NULL column (an absent description) false rather than NULL —
|
||||
// otherwise `NOT (…)` goes NULL and drops every description-less dashboard. The
|
||||
// value's % and _ are escaped, and ESCAPE pins backslash as the escape char.
|
||||
func (v *visitor) buildFreeTextContains(builder *sqlbuilder.SelectBuilder, columnExpression, value string) string {
|
||||
lowerColumn := string(v.formatter.LowerExpression("COALESCE(" + columnExpression + ", '')"))
|
||||
pattern := "%" + v.formatter.EscapeLikePattern(value) + "%"
|
||||
return fmt.Sprintf("%s LIKE LOWER(%s) ESCAPE '\\'", lowerColumn, builder.Var(pattern))
|
||||
}
|
||||
|
||||
func buildSubqueryForFreeTextTag(subqueryBuilder *sqlbuilder.SelectBuilder, keyPredicate, valuePredicate string) *sqlbuilder.SelectBuilder {
|
||||
const dashboardTagKind = `"dashboard"`
|
||||
|
||||
return subqueryBuilder.
|
||||
Select("1").
|
||||
From("tag_relation tr").
|
||||
Join("tag t", "t.id = tr.tag_id").
|
||||
Where(
|
||||
subqueryBuilder.Equal("tr.kind", dashboardTagKind),
|
||||
"tr.resource_id = dashboard.id",
|
||||
subqueryBuilder.Or(keyPredicate, valuePredicate),
|
||||
)
|
||||
}
|
||||
|
||||
// ─── value extraction helpers ───────────────────────────────────────────────
|
||||
|
||||
func (v *visitor) addError(format string, arguments ...any) {
|
||||
|
||||
@@ -98,7 +98,7 @@ func (s *store) CreateOrGet(ctx context.Context, tags []*tagtypes.Tag) ([]*tagty
|
||||
BunDBCtx(ctx).
|
||||
NewInsert().
|
||||
Model(&tags).
|
||||
On("CONFLICT (org_id, kind, (LOWER(key)), (LOWER(value))) DO UPDATE").
|
||||
// On("CONFLICT (org_id, kind, (LOWER(key)), (LOWER(value))) DO UPDATE").
|
||||
Set("key = tag.key").
|
||||
Returning("*").
|
||||
Scan(ctx)
|
||||
|
||||
@@ -88,60 +88,62 @@ func TestStore_Create_PopulatesIDsOnFreshInsert(t *testing.T) {
|
||||
assert.Equal(t, preIDB, stored["team\x00blr"].ID)
|
||||
}
|
||||
|
||||
func TestStore_Create_ConflictReturnsExistingRowID(t *testing.T) {
|
||||
ctx := context.Background()
|
||||
sqlstore := newTestStore(t)
|
||||
s := NewStore(sqlstore)
|
||||
// todo (@namanverma): uncomment once unique index is there.
|
||||
//
|
||||
// func TestStore_Create_ConflictReturnsExistingRowID(t *testing.T) {
|
||||
// ctx := context.Background()
|
||||
// sqlstore := newTestStore(t)
|
||||
// s := NewStore(sqlstore)
|
||||
|
||||
orgID := valuer.GenerateUUID()
|
||||
// orgID := valuer.GenerateUUID()
|
||||
|
||||
// Simulate a concurrent insert: someone else has already inserted "tag:Database".
|
||||
winner := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
|
||||
_, err := s.CreateOrGet(ctx, []*tagtypes.Tag{winner})
|
||||
require.NoError(t, err)
|
||||
winnerID := winner.ID
|
||||
// // Simulate a concurrent insert: someone else has already inserted "tag:Database".
|
||||
// winner := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
|
||||
// _, err := s.CreateOrGet(ctx, []*tagtypes.Tag{winner})
|
||||
// require.NoError(t, err)
|
||||
// winnerID := winner.ID
|
||||
|
||||
// Now our request runs with a different pre-generated ID for the same
|
||||
// (key, value) — case differs but the functional unique index collapses
|
||||
// them. RETURNING should overwrite our stale ID with winner's ID.
|
||||
loser := tagtypes.NewTag(orgID, dashboardKind, "TAG", "DATABASE")
|
||||
loserPreID := loser.ID
|
||||
require.NotEqual(t, winnerID, loserPreID, "pre-generated IDs must differ for this test to be meaningful")
|
||||
// // Now our request runs with a different pre-generated ID for the same
|
||||
// // (key, value) — case differs but the functional unique index collapses
|
||||
// // them. RETURNING should overwrite our stale ID with winner's ID.
|
||||
// loser := tagtypes.NewTag(orgID, dashboardKind, "TAG", "DATABASE")
|
||||
// loserPreID := loser.ID
|
||||
// require.NotEqual(t, winnerID, loserPreID, "pre-generated IDs must differ for this test to be meaningful")
|
||||
|
||||
got, err := s.CreateOrGet(ctx, []*tagtypes.Tag{loser})
|
||||
require.NoError(t, err)
|
||||
require.Len(t, got, 1)
|
||||
// got, err := s.CreateOrGet(ctx, []*tagtypes.Tag{loser})
|
||||
// require.NoError(t, err)
|
||||
// require.Len(t, got, 1)
|
||||
|
||||
assert.Equal(t, winnerID, got[0].ID, "returned slice should carry the existing row's ID, not our stale one")
|
||||
assert.Equal(t, winnerID, loser.ID, "input slice element is mutated in place")
|
||||
// assert.Equal(t, winnerID, got[0].ID, "returned slice should carry the existing row's ID, not our stale one")
|
||||
// assert.Equal(t, winnerID, loser.ID, "input slice element is mutated in place")
|
||||
|
||||
// And the DB still has exactly one row for that (lower(key), lower(value)) — winner's, with winner's casing.
|
||||
stored := tagsByLowerKeyValue(t, sqlstore.BunDB())
|
||||
require.Len(t, stored, 1)
|
||||
assert.Equal(t, winnerID, stored["tag\x00database"].ID)
|
||||
assert.Equal(t, "tag", stored["tag\x00database"].Key, "winner's casing preserved in key")
|
||||
assert.Equal(t, "Database", stored["tag\x00database"].Value, "winner's casing preserved in value")
|
||||
}
|
||||
// // And the DB still has exactly one row for that (lower(key), lower(value)) — winner's, with winner's casing.
|
||||
// stored := tagsByLowerKeyValue(t, sqlstore.BunDB())
|
||||
// require.Len(t, stored, 1)
|
||||
// assert.Equal(t, winnerID, stored["tag\x00database"].ID)
|
||||
// assert.Equal(t, "tag", stored["tag\x00database"].Key, "winner's casing preserved in key")
|
||||
// assert.Equal(t, "Database", stored["tag\x00database"].Value, "winner's casing preserved in value")
|
||||
// }
|
||||
|
||||
func TestStore_Create_MixedFreshAndConflict(t *testing.T) {
|
||||
ctx := context.Background()
|
||||
sqlstore := newTestStore(t)
|
||||
s := NewStore(sqlstore)
|
||||
// func TestStore_Create_MixedFreshAndConflict(t *testing.T) {
|
||||
// ctx := context.Background()
|
||||
// sqlstore := newTestStore(t)
|
||||
// s := NewStore(sqlstore)
|
||||
|
||||
orgID := valuer.GenerateUUID()
|
||||
pre := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
|
||||
_, err := s.CreateOrGet(ctx, []*tagtypes.Tag{pre})
|
||||
require.NoError(t, err)
|
||||
preExistingID := pre.ID
|
||||
// orgID := valuer.GenerateUUID()
|
||||
// pre := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
|
||||
// _, err := s.CreateOrGet(ctx, []*tagtypes.Tag{pre})
|
||||
// require.NoError(t, err)
|
||||
// preExistingID := pre.ID
|
||||
|
||||
conflict := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
|
||||
fresh := tagtypes.NewTag(orgID, dashboardKind, "team", "BLR")
|
||||
freshPreID := fresh.ID
|
||||
// conflict := tagtypes.NewTag(orgID, dashboardKind, "tag", "Database")
|
||||
// fresh := tagtypes.NewTag(orgID, dashboardKind, "team", "BLR")
|
||||
// freshPreID := fresh.ID
|
||||
|
||||
got, err := s.CreateOrGet(ctx, []*tagtypes.Tag{conflict, fresh})
|
||||
require.NoError(t, err)
|
||||
require.Len(t, got, 2)
|
||||
// got, err := s.CreateOrGet(ctx, []*tagtypes.Tag{conflict, fresh})
|
||||
// require.NoError(t, err)
|
||||
// require.Len(t, got, 2)
|
||||
|
||||
assert.Equal(t, preExistingID, got[0].ID, "conflicting row's ID overwritten with the existing row's")
|
||||
assert.Equal(t, freshPreID, got[1].ID, "fresh row's pre-generated ID is preserved")
|
||||
}
|
||||
// assert.Equal(t, preExistingID, got[0].ID, "conflicting row's ID overwritten with the existing row's")
|
||||
// assert.Equal(t, freshPreID, got[1].ID, "fresh row's pre-generated ID is preserved")
|
||||
// }
|
||||
|
||||
@@ -219,7 +219,6 @@ func NewSQLMigrationProviderFactories(
|
||||
sqlmigration.NewAddMetricReductionRulesFactory(sqlstore, sqlschema),
|
||||
sqlmigration.NewRemoveOrganizationTuplesFactory(sqlstore),
|
||||
sqlmigration.NewAddRoleTransactionGroupsFactory(sqlstore, sqlschema),
|
||||
sqlmigration.NewAddTagUniqueIndexFactory(sqlstore, sqlschema),
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -1,59 +0,0 @@
|
||||
package sqlmigration
|
||||
|
||||
import (
|
||||
"context"
|
||||
|
||||
"github.com/SigNoz/signoz/pkg/factory"
|
||||
"github.com/SigNoz/signoz/pkg/sqlschema"
|
||||
"github.com/SigNoz/signoz/pkg/sqlstore"
|
||||
"github.com/uptrace/bun"
|
||||
"github.com/uptrace/bun/migrate"
|
||||
)
|
||||
|
||||
type addTagUniqueIndex struct {
|
||||
sqlstore sqlstore.SQLStore
|
||||
sqlschema sqlschema.SQLSchema
|
||||
}
|
||||
|
||||
func NewAddTagUniqueIndexFactory(sqlstore sqlstore.SQLStore, sqlschema sqlschema.SQLSchema) factory.ProviderFactory[SQLMigration, Config] {
|
||||
return factory.NewProviderFactory(factory.MustNewName("add_tag_unique_index"), func(ctx context.Context, ps factory.ProviderSettings, c Config) (SQLMigration, error) {
|
||||
return &addTagUniqueIndex{
|
||||
sqlstore: sqlstore,
|
||||
sqlschema: sqlschema,
|
||||
}, nil
|
||||
})
|
||||
}
|
||||
|
||||
func (migration *addTagUniqueIndex) Register(migrations *migrate.Migrations) error {
|
||||
return migrations.Register(migration.Up, migration.Down)
|
||||
}
|
||||
|
||||
func (migration *addTagUniqueIndex) Up(ctx context.Context, db *bun.DB) error {
|
||||
tx, err := db.BeginTx(ctx, nil)
|
||||
if err != nil {
|
||||
return err
|
||||
}
|
||||
|
||||
defer func() {
|
||||
_ = tx.Rollback()
|
||||
}()
|
||||
|
||||
sqls := migration.sqlschema.Operator().CreateIndex(
|
||||
&sqlschema.UniqueIndexWithExpressions{
|
||||
TableName: "tag",
|
||||
Expressions: []string{"org_id", "kind", "LOWER(key)", "LOWER(value)"},
|
||||
},
|
||||
)
|
||||
|
||||
for _, sql := range sqls {
|
||||
if _, err := tx.ExecContext(ctx, string(sql)); err != nil {
|
||||
return err
|
||||
}
|
||||
}
|
||||
|
||||
return tx.Commit()
|
||||
}
|
||||
|
||||
func (migration *addTagUniqueIndex) Down(_ context.Context, _ *bun.DB) error {
|
||||
return nil
|
||||
}
|
||||
@@ -100,7 +100,7 @@ func (QueryType) Enum() []any {
|
||||
}
|
||||
|
||||
type AlertCompositeQuery struct {
|
||||
Queries []qbtypes.QueryEnvelope `json:"queries" required:"true"`
|
||||
Queries []qbtypes.QueryEnvelope `json:"queries" required:"true" minItems:"1"`
|
||||
|
||||
PanelType PanelType `json:"panelType" required:"true"`
|
||||
QueryType QueryType `json:"queryType" required:"true"`
|
||||
|
||||
46
pkg/types/ruletypes/jsonschema.go
Normal file
46
pkg/types/ruletypes/jsonschema.go
Normal file
@@ -0,0 +1,46 @@
|
||||
package ruletypes
|
||||
|
||||
import (
|
||||
"github.com/swaggest/jsonschema-go"
|
||||
)
|
||||
|
||||
var (
|
||||
_ jsonschema.Preparer = (*PostableRule)(nil)
|
||||
_ jsonschema.Preparer = (*RuleCondition)(nil)
|
||||
)
|
||||
|
||||
// PrepareJSONSchema restricts the published rule schema to the v2alpha1
|
||||
// contract: the v1-only fields (evalWindow, frequency, preferredChannels) and
|
||||
// the query version (always "v5", defaulted by the server) are omitted, and
|
||||
// the fields the server requires for schemaVersion v2alpha1 are marked
|
||||
// required. Runtime JSON handling is unchanged and continues to load stored
|
||||
// v1 rules until schemaVersion v1 is removed.
|
||||
//
|
||||
// Rule and GettableRule embed PostableRule, so this also applies to the
|
||||
// published read models through method promotion.
|
||||
func (r *PostableRule) PrepareJSONSchema(schema *jsonschema.Schema) error {
|
||||
for _, name := range []string{"evalWindow", "frequency", "preferredChannels", "version", "source"} {
|
||||
delete(schema.Properties, name)
|
||||
}
|
||||
|
||||
schema.Required = append(schema.Required, "schemaVersion", "evaluation", "notificationSettings")
|
||||
|
||||
if prop, ok := schema.Properties["schemaVersion"]; ok && prop.TypeObject != nil {
|
||||
prop.TypeObject.WithEnum(SchemaVersionV2Alpha1)
|
||||
}
|
||||
|
||||
return nil
|
||||
}
|
||||
|
||||
// PrepareJSONSchema removes the v1-only condition fields (target, op,
|
||||
// matchType, targetUnit — expressed per threshold entry in v2alpha1) from the
|
||||
// published schema and marks thresholds and selectedQueryName required.
|
||||
func (rc *RuleCondition) PrepareJSONSchema(schema *jsonschema.Schema) error {
|
||||
for _, name := range []string{"target", "op", "matchType", "targetUnit"} {
|
||||
delete(schema.Properties, name)
|
||||
}
|
||||
|
||||
schema.Required = append(schema.Required, "thresholds", "selectedQueryName")
|
||||
|
||||
return nil
|
||||
}
|
||||
@@ -723,74 +723,7 @@ def test_dashboard_v2_lifecycle( # pylint: disable=too-many-locals,too-many-sta
|
||||
assert response.status_code == HTTPStatus.OK, response.text
|
||||
assert {d["spec"]["display"]["name"] for d in response.json()["data"]["dashboards"]} == expected, query
|
||||
|
||||
# ── stage 5: free-text search (bare-word terms) ──────────────────────────
|
||||
# A bare word is a case-insensitive substring search over the name and every
|
||||
# tag key/value. Consecutive words are separate terms AND'd together (implicit
|
||||
# AND); a quoted token matches the whole phrase; and a term composes with
|
||||
# comparisons via AND/OR.
|
||||
free_text_cases = [
|
||||
# name substring, matched case-insensitively
|
||||
("overview", {"Alpha Overview", "Beta Overview", "Zeta Overview"}),
|
||||
# matches a name substring on some rows and a tag value on the same rows
|
||||
("storage", {"Gamma Storage", "Delta Storage"}),
|
||||
# tag value only (no name contains "pulse")
|
||||
("pulse", {"Alpha Overview", "Beta Overview", "Zeta Overview"}),
|
||||
# tag value only
|
||||
("critical", {"Delta Storage", "Epsilon Metrics"}),
|
||||
# tag key only
|
||||
("tier", {"Delta Storage", "Epsilon Metrics"}),
|
||||
# tag key present on every dashboard
|
||||
(
|
||||
"env",
|
||||
{
|
||||
"Alpha Overview",
|
||||
"Beta Overview",
|
||||
"Gamma Storage",
|
||||
"Delta Storage",
|
||||
"Epsilon Metrics",
|
||||
"Zeta Overview",
|
||||
},
|
||||
),
|
||||
# two words AND'd: only Delta matches both "delta" and "storage"
|
||||
("delta storage", {"Delta Storage"}),
|
||||
# two words AND'd with no dashboard matching both
|
||||
("overview storage", set()),
|
||||
# a quoted token matches the whole phrase
|
||||
('"Alpha Overview"', {"Alpha Overview"}),
|
||||
# a free-text term AND'd with a comparison (the reviewer's case)
|
||||
("pulse AND env = 'prod'", {"Alpha Overview"}),
|
||||
# a free-text term OR'd with a comparison
|
||||
(
|
||||
"storage OR env = 'staging'",
|
||||
{"Gamma Storage", "Delta Storage", "Epsilon Metrics", "Zeta Overview"},
|
||||
),
|
||||
# no match anywhere
|
||||
("nonexistent", set()),
|
||||
# NOT over a term nothing matches returns everything — including these
|
||||
# description-less dashboards, which a negated search must not exclude.
|
||||
(
|
||||
"NOT payment",
|
||||
{
|
||||
"Alpha Overview",
|
||||
"Beta Overview",
|
||||
"Gamma Storage",
|
||||
"Delta Storage",
|
||||
"Epsilon Metrics",
|
||||
"Zeta Overview",
|
||||
},
|
||||
),
|
||||
]
|
||||
for query, expected in free_text_cases:
|
||||
response = requests.get(
|
||||
signoz.self.host_configs["8080"].get("/api/v2/users/me/dashboards"),
|
||||
params={"query": query, "limit": 200},
|
||||
headers={"Authorization": f"Bearer {token}"},
|
||||
timeout=5,
|
||||
)
|
||||
assert response.status_code == HTTPStatus.OK, response.text
|
||||
assert {d["spec"]["display"]["name"] for d in response.json()["data"]["dashboards"]} == expected, query
|
||||
|
||||
# ── stage 6: name sort honours order ─────────────────────────────────────
|
||||
# ── stage 5: name sort honours order ─────────────────────────────────────
|
||||
response = requests.get(
|
||||
signoz.self.host_configs["8080"].get("/api/v2/users/me/dashboards"),
|
||||
params={"sort": "name", "order": "asc", "limit": 200},
|
||||
@@ -820,7 +753,7 @@ def test_dashboard_v2_lifecycle( # pylint: disable=too-many-locals,too-many-sta
|
||||
"Alpha Overview",
|
||||
]
|
||||
|
||||
# ── stage 7: pinning floats a dashboard to the top of any ordering ───────
|
||||
# ── stage 6: pinning floats a dashboard to the top of any ordering ───────
|
||||
assert (
|
||||
requests.put(
|
||||
signoz.self.host_configs["8080"].get(f"/api/v2/users/me/dashboards/{ids['lc-gamma']}/pins"),
|
||||
@@ -858,7 +791,7 @@ def test_dashboard_v2_lifecycle( # pylint: disable=too-many-locals,too-many-sta
|
||||
]
|
||||
assert all("pinned" not in d for d in response.json()["data"]["dashboards"])
|
||||
|
||||
# ── stage 8: unpinning restores the natural ordering ─────────────────────
|
||||
# ── stage 7: unpinning restores the natural ordering ─────────────────────
|
||||
assert (
|
||||
requests.delete(
|
||||
signoz.self.host_configs["8080"].get(f"/api/v2/users/me/dashboards/{ids['lc-gamma']}/pins"),
|
||||
@@ -882,7 +815,7 @@ def test_dashboard_v2_lifecycle( # pylint: disable=too-many-locals,too-many-sta
|
||||
"Zeta Overview",
|
||||
]
|
||||
|
||||
# ── stage 9: update mutates the spec but keeps the immutable name ────────
|
||||
# ── stage 8: update mutates the spec but keeps the immutable name ────────
|
||||
update_body = {
|
||||
"schemaVersion": "v6",
|
||||
"name": "lc-alpha",
|
||||
@@ -907,18 +840,7 @@ def test_dashboard_v2_lifecycle( # pylint: disable=too-many-locals,too-many-sta
|
||||
)
|
||||
assert response.json()["data"]["spec"]["display"]["description"] == "now with a description"
|
||||
|
||||
# free-text search also matches the description (only Alpha has one now);
|
||||
# quoted so the phrase matches as one substring rather than per-word
|
||||
response = requests.get(
|
||||
signoz.self.host_configs["8080"].get("/api/v2/users/me/dashboards"),
|
||||
params={"query": '"now with a description"', "limit": 200},
|
||||
headers={"Authorization": f"Bearer {token}"},
|
||||
timeout=5,
|
||||
)
|
||||
assert response.status_code == HTTPStatus.OK, response.text
|
||||
assert {d["spec"]["display"]["name"] for d in response.json()["data"]["dashboards"]} == {"Alpha Overview"}
|
||||
|
||||
# ── stage 10: a locked dashboard rejects updates until unlocked ──────────
|
||||
# ── stage 9: a locked dashboard rejects updates until unlocked ───────────
|
||||
assert (
|
||||
requests.put(
|
||||
signoz.self.host_configs["8080"].get(f"{BASE_URL}/{ids['lc-beta']}/lock"),
|
||||
@@ -958,7 +880,7 @@ def test_dashboard_v2_lifecycle( # pylint: disable=too-many-locals,too-many-sta
|
||||
== HTTPStatus.OK
|
||||
)
|
||||
|
||||
# ── stage 11: delete removes the dashboard from get and list ─────────────
|
||||
# ── stage 10: delete removes the dashboard from get and list ─────────────
|
||||
assert (
|
||||
requests.delete(
|
||||
signoz.self.host_configs["8080"].get(f"{BASE_URL}/{ids['lc-gamma']}"),
|
||||
@@ -990,7 +912,7 @@ def test_dashboard_v2_lifecycle( # pylint: disable=too-many-locals,too-many-sta
|
||||
"Zeta Overview",
|
||||
}
|
||||
|
||||
# ── stage 12: clone suffixes the display name and mints a new, retrievable one ─
|
||||
# ── stage 11: clone suffixes the display name and mints a new, retrievable one ─
|
||||
response = requests.post(
|
||||
signoz.self.host_configs["8080"].get(f"{BASE_URL}/{ids['lc-alpha']}/clone"),
|
||||
headers={"Authorization": f"Bearer {token}"},
|
||||
|
||||
Reference in New Issue
Block a user