External/signoz
1
0
Fork 0
mirror of https://github.com/SigNoz/signoz.git synced 2025-12-17 07:26:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: some edits

Browse Source
This commit is contained in:
srikanthccv 2025-09-25 21:27:49 +05:30
parent 61efbd248c
commit 3540fc7ae2
7 changed files with 113 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/container/CreateAlertV2/AlertCondition/ThresholdItem.tsx
View File

@ -64,8 +64,9 @@ function ThresholdItem({
};
const addRecoveryThreshold = (): void => {
setShowRecoveryThreshold(true);
updateThreshold(threshold.id, 'recoveryThresholdValue', 0);
// Recovery threshold - hidden for now
// setShowRecoveryThreshold(true);
// updateThreshold(threshold.id, 'recoveryThresholdValue', 0);
};
const removeRecoveryThreshold = (): void => {
@ -128,7 +129,8 @@ function ThresholdItem({
option?.label?.toLowerCase().includes(input.toLowerCase()) || false
}
/>
{showRecoveryThreshold && (
{/* Recovery threshold - hidden for now */}
{/* {showRecoveryThreshold && (
<>
<Typography.Text className="sentence-text">recover on</Typography.Text>
<Input
@ -149,9 +151,9 @@ function ThresholdItem({
/>
</Tooltip>
</>
)}
)} */}
<Button.Group>
{!showRecoveryThreshold && (
{/* {!showRecoveryThreshold && (
<Tooltip title="Add recovery threshold">
<Button
type="default"
@ -160,7 +162,7 @@ function ThresholdItem({
onClick={addRecoveryThreshold}
/>
</Tooltip>
)}
)} */}
{showRemoveButton && (
<Tooltip title="Remove threshold">
<Button

4
frontend/src/container/CreateAlertV2/EvaluationSettings/AdvancedOptions.tsx
View File

@ -81,7 +81,7 @@ function AdvancedOptions(): JSX.Element {
</div>
}
/>
<AdvancedOptionItem
{/* <AdvancedOptionItem
title="Account for data delay"
description="Shift the evaluation window backwards to account for data processing delays."
tooltipText="Use when your data takes time to arrive on the platform. For example, if logs typically arrive 5 minutes late, set a 5-minute delay so the alert checks the correct time window."
@ -119,7 +119,7 @@ function AdvancedOptions(): JSX.Element {
/>
</div>
}
/>
/> */}
</Collapse.Panel>
</Collapse>
</div>

5
frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationCadence/EvaluationCadence.tsx
View File

@ -98,13 +98,14 @@ function EvaluationCadence(): JSX.Element {
}
/>
</Input.Group>
<Button
{/* Add custom schedule - hidden for now */}
{/* <Button
className="advanced-option-item-button"
onClick={showCustomSchedule}
>
<Plus size={12} />
<Typography.Text>Add custom schedule</Typography.Text>
</Button>
</Button> */}
</div>
)}
</div>

22
frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowDetails.tsx
View File

@ -3,8 +3,8 @@ import { useMemo } from 'react';
import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
import {
CUMULATIVE_WINDOW_DESCRIPTION,
ROLLING_WINDOW_DESCRIPTION,
getCumulativeWindowDescription,
getRollingWindowDescription,
TIMEZONE_DATA,
} from '../constants';
import TimeInput from '../TimeInput';
@ -116,7 +116,9 @@ function EvaluationWindowDetails({
if (isCurrentHour) {
return (
<div className="evaluation-window-details">
<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
<Typography.Text>
{getCumulativeWindowDescription('currentHour')}
</Typography.Text>
<Typography.Text>{displayText}</Typography.Text>
<div className="select-group">
<Typography.Text>STARTING AT MINUTE</Typography.Text>
@ -134,7 +136,9 @@ function EvaluationWindowDetails({
if (isCurrentDay) {
return (
<div className="evaluation-window-details">
<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
<Typography.Text>
{getCumulativeWindowDescription('currentDay')}
</Typography.Text>
<Typography.Text>{displayText}</Typography.Text>
<div className="select-group time-select-group">
<Typography.Text>STARTING AT</Typography.Text>
@ -159,7 +163,9 @@ function EvaluationWindowDetails({
if (isCurrentMonth) {
return (
<div className="evaluation-window-details">
<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
<Typography.Text>
{getCumulativeWindowDescription('currentMonth')}
</Typography.Text>
<Typography.Text>{displayText}</Typography.Text>
<div className="select-group">
<Typography.Text>STARTING ON DAY</Typography.Text>
@ -192,7 +198,11 @@ function EvaluationWindowDetails({
return (
<div className="evaluation-window-details">
<Typography.Text>{ROLLING_WINDOW_DESCRIPTION}</Typography.Text>
<Typography.Text>
{getRollingWindowDescription(
`${evaluationWindow.startingAt.number}${evaluationWindow.startingAt.unit}`,
)}
</Typography.Text>
<Typography.Text>Specify custom duration</Typography.Text>
<Typography.Text>{displayText}</Typography.Text>
<div className="select-group">

12
frontend/src/container/CreateAlertV2/EvaluationSettings/EvaluationWindowPopover/EvaluationWindowPopover.tsx
View File

@ -3,10 +3,10 @@ import classNames from 'classnames';
import { Check } from 'lucide-react';
import {
CUMULATIVE_WINDOW_DESCRIPTION,
getCumulativeWindowDescription,
getRollingWindowDescription,
EVALUATION_WINDOW_TIMEFRAME,
EVALUATION_WINDOW_TYPE,
ROLLING_WINDOW_DESCRIPTION,
} from '../constants';
import {
CumulativeWindowTimeframes,
@ -96,7 +96,9 @@ function EvaluationWindowPopover({
}
return (
<div className="selection-content">
<Typography.Text>{ROLLING_WINDOW_DESCRIPTION}</Typography.Text>
<Typography.Text>
{getRollingWindowDescription(evaluationWindow.timeframe)}
</Typography.Text>
<Button type="link">Read the docs</Button>
</div>
);
@ -108,7 +110,9 @@ function EvaluationWindowPopover({
) {
return (
<div className="selection-content">
<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
<Typography.Text>
{getCumulativeWindowDescription(evaluationWindow.timeframe)}
</Typography.Text>
<Button type="link">Read the docs</Button>
</div>
);

76
frontend/src/container/CreateAlertV2/EvaluationSettings/constants.ts
View File

@ -62,8 +62,76 @@ export const TIMEZONE_DATA = generateTimezoneData().map((timezone) => ({
value: timezone.value,
}));
export const CUMULATIVE_WINDOW_DESCRIPTION =
'A Cumulative Window has a fixed starting point and expands over time.';
export const getCumulativeWindowDescription = (
timeframe?: string,
): string => {
let example = '';
switch (timeframe) {
case 'currentHour':
example =
'An hourly cumulative window for error count alerts when errors exceed 100. Starting at the top of the hour, it tracks: 20 errors by :15, 55 by :30, 105 by :45 (alert fires).';
break;
case 'currentDay':
example =
'A daily cumulative window for sales alerts when total revenue exceeds $10,000. Starting at midnight, it tracks: $2,000 by 9 AM, $5,500 by noon, $11,000 by 3 PM (alert fires).';
break;
case 'currentMonth':
example =
'A monthly cumulative window for expense alerts when spending exceeds $50,000. Starting on the 1st, it tracks: $15,000 by the 7th, $32,000 by the 15th, $51,000 by the 22nd (alert fires).';
break;
default:
example =
'A daily cumulative window for sales alerts when total revenue exceeds $10,000. Starting at midnight, it tracks: $2,000 by 9 AM, $5,500 by noon, $11,000 by 3 PM (alert fires).';
}
return `Monitors data accumulated since a fixed starting point. The window grows over time, keeping all historical data from the start.\n\nExample: ${example}`;
};
export const ROLLING_WINDOW_DESCRIPTION =
'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.';
export const getRollingWindowDescription = (duration?: string): string => {
let timeWindow = '5-minute';
let examples = '14:01:00-14:06:00, 14:02:00-14:07:00';
if (duration) {
const match = duration.match(/^(\d+)([mhs])/);
if (match) {
const value = parseInt(match[1]);
const unit = match[2];
if (unit === 'm' && !isNaN(value)) {
timeWindow = `${value}-minute`;
const endMinutes1 = 1 + value;
const endMinutes2 = 2 + value;
examples = `14:01:00-14:${String(endMinutes1).padStart(2, '0')}:00, 14:02:00-14:${String(endMinutes2).padStart(2, '0')}:00`;
} else if (unit === 'h' && !isNaN(value)) {
timeWindow = `${value}-hour`;
const endHour1 = 14 + value;
const endHour2 = 14 + value;
examples = `14:00:00-${String(endHour1).padStart(2, '0')}:00:00, 14:01:00-${String(endHour2).padStart(2, '0')}:01:00`;
} else if (unit === 's' && !isNaN(value)) {
timeWindow = `${value}-second`;
examples = `14:01:00-14:01:${String(value).padStart(2, '0')}, 14:01:01-14:01:${String(1 + value).padStart(2, '0')}`;
}
} else if (duration === 'custom' || !duration) {
timeWindow = '5-minute';
examples = '14:01:00-14:06:00, 14:02:00-14:07:00';
} else {
if (duration.includes('h')) {
const hours = parseInt(duration);
if (!isNaN(hours)) {
timeWindow = `${hours}-hour`;
const endHour = 14 + hours;
examples = `14:00:00-${String(endHour).padStart(2, '0')}:00:00, 14:01:00-${String(endHour).padStart(2, '0')}:01:00`;
}
} else if (duration.includes('m')) {
const minutes = parseInt(duration);
if (!isNaN(minutes)) {
timeWindow = `${minutes}-minute`;
const endMinutes1 = 1 + minutes;
const endMinutes2 = 2 + minutes;
examples = `14:01:00-14:${String(endMinutes1).padStart(2, '0')}:00, 14:02:00-14:${String(endMinutes2).padStart(2, '0')}:00`;
}
}
}
}
return `Monitors data over a fixed time period that moves forward continuously.\n\nExample: A ${timeWindow} rolling window for error rate alerts with 1 minute evaluation cadence. Unlike fixed windows, this checks continuously: ${examples}, etc.`;
};

8
frontend/src/container/CreateAlertV2/NotificationSettings/NotificationMessage.tsx
View File

@ -57,23 +57,23 @@ function NotificationMessage(): JSX.Element {
<div className="notification-message-header-content">
<Typography.Text className="notification-message-header-title">
Notification Message
<Tooltip title="Customize the message content sent in alert notifications. Template variables like {{alertname}}, {{value}}, and {{threshold}} will be replaced with actual values when the alert fires.">
{/* <Tooltip title="Customize the message content sent in alert notifications. Template variables like {{alertname}}, {{value}}, and {{threshold}} will be replaced with actual values when the alert fires.">
<Info size={16} />
</Tooltip>
</Tooltip> */}
</Typography.Text>
<Typography.Text className="notification-message-header-description">
Custom message content for alert notifications. Use template variables to
include dynamic information.
</Typography.Text>
</div>
<div className="notification-message-header-actions">
{/* <div className="notification-message-header-actions">
<Popover content={templateVariableContent}>
<Button type="text">
<Info size={12} />
Variables
</Button>
</Popover>
</div>
</div> */}
</div>
<TextArea
value={notificationSettings.description}