mirror of
https://github.com/SigNoz/signoz.git
synced 2025-12-17 15:36:48 +00:00
chore: some edits
This commit is contained in:
parent
61efbd248c
commit
3540fc7ae2
@ -64,8 +64,9 @@ function ThresholdItem({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const addRecoveryThreshold = (): void => {
|
const addRecoveryThreshold = (): void => {
|
||||||
setShowRecoveryThreshold(true);
|
// Recovery threshold - hidden for now
|
||||||
updateThreshold(threshold.id, 'recoveryThresholdValue', 0);
|
// setShowRecoveryThreshold(true);
|
||||||
|
// updateThreshold(threshold.id, 'recoveryThresholdValue', 0);
|
||||||
};
|
};
|
||||||
|
|
||||||
const removeRecoveryThreshold = (): void => {
|
const removeRecoveryThreshold = (): void => {
|
||||||
@ -128,7 +129,8 @@ function ThresholdItem({
|
|||||||
option?.label?.toLowerCase().includes(input.toLowerCase()) || false
|
option?.label?.toLowerCase().includes(input.toLowerCase()) || false
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
{showRecoveryThreshold && (
|
{/* Recovery threshold - hidden for now */}
|
||||||
|
{/* {showRecoveryThreshold && (
|
||||||
<>
|
<>
|
||||||
<Typography.Text className="sentence-text">recover on</Typography.Text>
|
<Typography.Text className="sentence-text">recover on</Typography.Text>
|
||||||
<Input
|
<Input
|
||||||
@ -149,9 +151,9 @@ function ThresholdItem({
|
|||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
</>
|
</>
|
||||||
)}
|
)} */}
|
||||||
<Button.Group>
|
<Button.Group>
|
||||||
{!showRecoveryThreshold && (
|
{/* {!showRecoveryThreshold && (
|
||||||
<Tooltip title="Add recovery threshold">
|
<Tooltip title="Add recovery threshold">
|
||||||
<Button
|
<Button
|
||||||
type="default"
|
type="default"
|
||||||
@ -160,7 +162,7 @@ function ThresholdItem({
|
|||||||
onClick={addRecoveryThreshold}
|
onClick={addRecoveryThreshold}
|
||||||
/>
|
/>
|
||||||
</Tooltip>
|
</Tooltip>
|
||||||
)}
|
)} */}
|
||||||
{showRemoveButton && (
|
{showRemoveButton && (
|
||||||
<Tooltip title="Remove threshold">
|
<Tooltip title="Remove threshold">
|
||||||
<Button
|
<Button
|
||||||
|
|||||||
@ -81,7 +81,7 @@ function AdvancedOptions(): JSX.Element {
|
|||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<AdvancedOptionItem
|
{/* <AdvancedOptionItem
|
||||||
title="Account for data delay"
|
title="Account for data delay"
|
||||||
description="Shift the evaluation window backwards to account for data processing delays."
|
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."
|
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>
|
</div>
|
||||||
}
|
}
|
||||||
/>
|
/> */}
|
||||||
</Collapse.Panel>
|
</Collapse.Panel>
|
||||||
</Collapse>
|
</Collapse>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -98,13 +98,14 @@ function EvaluationCadence(): JSX.Element {
|
|||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</Input.Group>
|
</Input.Group>
|
||||||
<Button
|
{/* Add custom schedule - hidden for now */}
|
||||||
|
{/* <Button
|
||||||
className="advanced-option-item-button"
|
className="advanced-option-item-button"
|
||||||
onClick={showCustomSchedule}
|
onClick={showCustomSchedule}
|
||||||
>
|
>
|
||||||
<Plus size={12} />
|
<Plus size={12} />
|
||||||
<Typography.Text>Add custom schedule</Typography.Text>
|
<Typography.Text>Add custom schedule</Typography.Text>
|
||||||
</Button>
|
</Button> */}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -3,8 +3,8 @@ import { useMemo } from 'react';
|
|||||||
|
|
||||||
import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
|
import { ADVANCED_OPTIONS_TIME_UNIT_OPTIONS } from '../../context/constants';
|
||||||
import {
|
import {
|
||||||
CUMULATIVE_WINDOW_DESCRIPTION,
|
getCumulativeWindowDescription,
|
||||||
ROLLING_WINDOW_DESCRIPTION,
|
getRollingWindowDescription,
|
||||||
TIMEZONE_DATA,
|
TIMEZONE_DATA,
|
||||||
} from '../constants';
|
} from '../constants';
|
||||||
import TimeInput from '../TimeInput';
|
import TimeInput from '../TimeInput';
|
||||||
@ -116,7 +116,9 @@ function EvaluationWindowDetails({
|
|||||||
if (isCurrentHour) {
|
if (isCurrentHour) {
|
||||||
return (
|
return (
|
||||||
<div className="evaluation-window-details">
|
<div className="evaluation-window-details">
|
||||||
<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
|
<Typography.Text>
|
||||||
|
{getCumulativeWindowDescription('currentHour')}
|
||||||
|
</Typography.Text>
|
||||||
<Typography.Text>{displayText}</Typography.Text>
|
<Typography.Text>{displayText}</Typography.Text>
|
||||||
<div className="select-group">
|
<div className="select-group">
|
||||||
<Typography.Text>STARTING AT MINUTE</Typography.Text>
|
<Typography.Text>STARTING AT MINUTE</Typography.Text>
|
||||||
@ -134,7 +136,9 @@ function EvaluationWindowDetails({
|
|||||||
if (isCurrentDay) {
|
if (isCurrentDay) {
|
||||||
return (
|
return (
|
||||||
<div className="evaluation-window-details">
|
<div className="evaluation-window-details">
|
||||||
<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
|
<Typography.Text>
|
||||||
|
{getCumulativeWindowDescription('currentDay')}
|
||||||
|
</Typography.Text>
|
||||||
<Typography.Text>{displayText}</Typography.Text>
|
<Typography.Text>{displayText}</Typography.Text>
|
||||||
<div className="select-group time-select-group">
|
<div className="select-group time-select-group">
|
||||||
<Typography.Text>STARTING AT</Typography.Text>
|
<Typography.Text>STARTING AT</Typography.Text>
|
||||||
@ -159,7 +163,9 @@ function EvaluationWindowDetails({
|
|||||||
if (isCurrentMonth) {
|
if (isCurrentMonth) {
|
||||||
return (
|
return (
|
||||||
<div className="evaluation-window-details">
|
<div className="evaluation-window-details">
|
||||||
<Typography.Text>{CUMULATIVE_WINDOW_DESCRIPTION}</Typography.Text>
|
<Typography.Text>
|
||||||
|
{getCumulativeWindowDescription('currentMonth')}
|
||||||
|
</Typography.Text>
|
||||||
<Typography.Text>{displayText}</Typography.Text>
|
<Typography.Text>{displayText}</Typography.Text>
|
||||||
<div className="select-group">
|
<div className="select-group">
|
||||||
<Typography.Text>STARTING ON DAY</Typography.Text>
|
<Typography.Text>STARTING ON DAY</Typography.Text>
|
||||||
@ -192,7 +198,11 @@ function EvaluationWindowDetails({
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="evaluation-window-details">
|
<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>Specify custom duration</Typography.Text>
|
||||||
<Typography.Text>{displayText}</Typography.Text>
|
<Typography.Text>{displayText}</Typography.Text>
|
||||||
<div className="select-group">
|
<div className="select-group">
|
||||||
|
|||||||
@ -3,10 +3,10 @@ import classNames from 'classnames';
|
|||||||
import { Check } from 'lucide-react';
|
import { Check } from 'lucide-react';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
CUMULATIVE_WINDOW_DESCRIPTION,
|
getCumulativeWindowDescription,
|
||||||
|
getRollingWindowDescription,
|
||||||
EVALUATION_WINDOW_TIMEFRAME,
|
EVALUATION_WINDOW_TIMEFRAME,
|
||||||
EVALUATION_WINDOW_TYPE,
|
EVALUATION_WINDOW_TYPE,
|
||||||
ROLLING_WINDOW_DESCRIPTION,
|
|
||||||
} from '../constants';
|
} from '../constants';
|
||||||
import {
|
import {
|
||||||
CumulativeWindowTimeframes,
|
CumulativeWindowTimeframes,
|
||||||
@ -96,7 +96,9 @@ function EvaluationWindowPopover({
|
|||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<div className="selection-content">
|
<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>
|
<Button type="link">Read the docs</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -108,7 +110,9 @@ function EvaluationWindowPopover({
|
|||||||
) {
|
) {
|
||||||
return (
|
return (
|
||||||
<div className="selection-content">
|
<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>
|
<Button type="link">Read the docs</Button>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|||||||
@ -62,8 +62,76 @@ export const TIMEZONE_DATA = generateTimezoneData().map((timezone) => ({
|
|||||||
value: timezone.value,
|
value: timezone.value,
|
||||||
}));
|
}));
|
||||||
|
|
||||||
export const CUMULATIVE_WINDOW_DESCRIPTION =
|
export const getCumulativeWindowDescription = (
|
||||||
'A Cumulative Window has a fixed starting point and expands over time.';
|
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 =
|
export const getRollingWindowDescription = (duration?: string): string => {
|
||||||
'A Rolling Window has a fixed size and shifts its starting point over time based on when the rules are evaluated.';
|
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.`;
|
||||||
|
};
|
||||||
@ -57,23 +57,23 @@ function NotificationMessage(): JSX.Element {
|
|||||||
<div className="notification-message-header-content">
|
<div className="notification-message-header-content">
|
||||||
<Typography.Text className="notification-message-header-title">
|
<Typography.Text className="notification-message-header-title">
|
||||||
Notification Message
|
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} />
|
<Info size={16} />
|
||||||
</Tooltip>
|
</Tooltip> */}
|
||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
<Typography.Text className="notification-message-header-description">
|
<Typography.Text className="notification-message-header-description">
|
||||||
Custom message content for alert notifications. Use template variables to
|
Custom message content for alert notifications. Use template variables to
|
||||||
include dynamic information.
|
include dynamic information.
|
||||||
</Typography.Text>
|
</Typography.Text>
|
||||||
</div>
|
</div>
|
||||||
<div className="notification-message-header-actions">
|
{/* <div className="notification-message-header-actions">
|
||||||
<Popover content={templateVariableContent}>
|
<Popover content={templateVariableContent}>
|
||||||
<Button type="text">
|
<Button type="text">
|
||||||
<Info size={12} />
|
<Info size={12} />
|
||||||
Variables
|
Variables
|
||||||
</Button>
|
</Button>
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div> */}
|
||||||
</div>
|
</div>
|
||||||
<TextArea
|
<TextArea
|
||||||
value={notificationSettings.description}
|
value={notificationSettings.description}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user