GitHub-Proxy/signoz
1
0
Fork 0
mirror of https://git.mirrors.martin98.com/https://github.com/SigNoz/signoz synced 2025-08-16 14:25:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: added link for example alerts (#5216)

Browse Source
This commit is contained in:
SagarRajput-7 2024-06-13 23:50:47 +05:30 committed by GitHub
parent 313fa4ae23
commit 191a2a319d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
7 changed files with 129 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
frontend/public/locales/en-GB/alerts.json
View File

@ -108,7 +108,7 @@
"user_tooltip_more_help": "More details on how to create alerts",
"choose_alert_type": "Choose a type for the alert",
"metric_based_alert": "Metric based Alert",
"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data",
"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data.",
"log_based_alert": "Log-based Alert",
"log_based_alert_desc": "Send a notification when a condition occurs in the logs data.",
"traces_based_alert": "Trace-based Alert",

2
frontend/public/locales/en/alerts.json
View File

@ -108,7 +108,7 @@
"user_tooltip_more_help": "More details on how to create alerts",
"choose_alert_type": "Choose a type for the alert",
"metric_based_alert": "Metric based Alert",
"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data",
"metric_based_alert_desc": "Send a notification when a condition occurs in the metric data.",
"log_based_alert": "Log-based Alert",
"log_based_alert_desc": "Send a notification when a condition occurs in the logs data.",
"traces_based_alert": "Trace-based Alert",

14
frontend/src/components/facingIssueBtn/FacingIssueBtn.style.scss
View File

@ -2,12 +2,24 @@
color: var(--bg-amber-500);
border-color: var(--bg-amber-500);
.ant-btn:hover {
> .ant-btn:hover {
color: var(--bg-amber-400) !important;
border-color: var(--bg-amber-300) !important;
}
}
.lightMode {
.facing-issue-button {
color: var(--bg-vanilla-500);
border-color: var(--bg-vanilla-300);
> .ant-btn:hover {
color: var(--bg-vanilla-500) !important;
border-color: var(--bg-vanilla-300) !important;
}
}
}
.tooltip-overlay {
text-wrap: nowrap;
.ant-tooltip-inner {

35
frontend/src/container/CreateAlertRule/SelectAlertType/index.tsx
View File

@ -12,6 +12,30 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
const optionList = getOptionList(t);
function handleRedirection(option: AlertTypes): void {
let url = '';
switch (option) {
case AlertTypes.METRICS_BASED_ALERT:
url =
'https://signoz.io/docs/alerts-management/metrics-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
break;
case AlertTypes.LOGS_BASED_ALERT:
url =
'https://signoz.io/docs/alerts-management/log-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
break;
case AlertTypes.TRACES_BASED_ALERT:
url =
'https://signoz.io/docs/alerts-management/trace-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#examples';
break;
case AlertTypes.EXCEPTIONS_BASED_ALERT:
url =
'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-source-selection-page#example';
break;
default:
break;
}
window.open(url, '_blank');
}
const renderOptions = useMemo(
() => (
<>
@ -23,7 +47,16 @@ function SelectAlertType({ onSelect }: SelectAlertTypeProps): JSX.Element {
onSelect(option.selection);
}}
>
{option.description}
{option.description}{' '}
<Typography.Link
onClick={(e): void => {
e.preventDefault();
e.stopPropagation();
handleRedirection(option.selection);
}}
>
Click here to see how to create a sample alert.
</Typography.Link>{' '}
</AlertTypeCard>
))}
</>

26
frontend/src/container/FormAlertRules/FormAlertRules.styles.scss
View File

@ -21,6 +21,22 @@
}
}
.info-help-btns {
display: grid;
grid-template-columns: auto auto;
gap: 12px;
margin-top: 20px;
.doc-redirection-btn {
color: var(--bg-aqua-500) !important;
border-color: var(--bg-aqua-500) !important;
}
.facing-issue-btn {
width: 100% !important;
}
}
.lightMode {
.main-container {
.plot-tag {
@ -47,9 +63,11 @@
}
}
}
}
.facing-issue-btn {
margin-top: 20px;
width: 100%;
.info-help-btns {
.doc-redirection-btn {
color: var(--bg-aqua-600) !important;
border-color: var(--bg-aqua-600) !important;
}
}
}

69
frontend/src/container/FormAlertRules/index.tsx
View File

@ -2,6 +2,7 @@ import './FormAlertRules.styles.scss';
import { ExclamationCircleOutlined, SaveOutlined } from '@ant-design/icons';
import {
Button,
Col,
FormInstance,
Modal,
@ -511,6 +512,31 @@ function FormAlertRules({
const isRuleCreated = !ruleId || ruleId === 0;
function handleRedirection(option: AlertTypes): void {
let url = '';
switch (option) {
case AlertTypes.METRICS_BASED_ALERT:
url =
'https://signoz.io/docs/alerts-management/metrics-based-alerts/?utm_source=product&utm_medium=alert-creation-page#examples';
break;
case AlertTypes.LOGS_BASED_ALERT:
url =
'https://signoz.io/docs/alerts-management/log-based-alerts/?utm_source=product&utm_medium=alert-creation-page#examples';
break;
case AlertTypes.TRACES_BASED_ALERT:
url =
'https://signoz.io/docs/alerts-management/trace-based-alerts/?utm_source=product&utm_medium=alert-creation-page#examples';
break;
case AlertTypes.EXCEPTIONS_BASED_ALERT:
url =
'https://signoz.io/docs/alerts-management/exceptions-based-alerts/?utm_source=product&utm_medium=alert-creation-page#examples';
break;
default:
break;
}
window.open(url, '_blank');
}
return (
<>
{Element}
@ -594,22 +620,33 @@ function FormAlertRules({
</StyledLeftContainer>
<Col flex="1 1 300px">
<UserGuide queryType={currentQuery.queryType} />
<FacingIssueBtn
attributes={{
alert: alertDef?.alert,
alertType: alertDef?.alertType,
id: ruleId,
ruleType: alertDef?.ruleType,
state: (alertDef as any)?.state,
panelType,
screen: isRuleCreated ? 'Edit Alert' : 'New Alert',
}}
className="facing-issue-btn"
eventName="Alert: Facing Issues in alert"
buttonText="Need help with this alert?"
message={alertHelpMessage(alertDef, ruleId)}
onHoverText="Click here to get help with this alert"
/>
<div className="info-help-btns">
<Button
style={{ height: 32 }}
onClick={(): void =>
handleRedirection(alertDef?.alertType as AlertTypes)
}
className="doc-redirection-btn"
>
Check an example alert
</Button>
<FacingIssueBtn
attributes={{
alert: alertDef?.alert,
alertType: alertDef?.alertType,
id: ruleId,
ruleType: alertDef?.ruleType,
state: (alertDef as any)?.state,
panelType,
screen: isRuleCreated ? 'Edit Alert' : 'New Alert',
}}
className="facing-issue-btn"
eventName="Alert: Facing Issues in alert"
buttonText="Need help with this alert?"
message={alertHelpMessage(alertDef, ruleId)}
onHoverText="Click here to get help with this alert"
/>
</div>
</Col>
</PanelContainer>
</>

10
frontend/src/pages/TracesExplorer/Filter/filterUtils.ts
View File

@ -328,17 +328,17 @@ export function unionTagFilterItems(
): TagFilterItem[] {
const unionMap = new Map<string, TagFilterItem>();
items1.forEach((item) => {
const keyOp = `${item?.key?.key}_${item.op}`;
items1?.forEach((item) => {
const keyOp = `${item?.key?.key}_${item?.op}`;
unionMap.set(keyOp, item);
});
items2.forEach((item) => {
const keyOp = `${item?.key?.key}_${item.op}`;
items2?.forEach((item) => {
const keyOp = `${item?.key?.key}_${item?.op}`;
unionMap.set(keyOp, item);
});
return Array.from(unionMap.values());
return Array.from(unionMap?.values());
}
export interface HandleRunProps {