diff --git a/frontend/public/locales/en-GB/rules.json b/frontend/public/locales/en-GB/rules.json index 0602d7393c..e67bd35273 100644 --- a/frontend/public/locales/en-GB/rules.json +++ b/frontend/public/locales/en-GB/rules.json @@ -59,5 +59,27 @@ "option_critical": "Critical", "option_error": "Error", "option_warning": "Warning", - "option_info": "Info" + "option_info": "Info", + "user_guide_headline": "Steps to create an Alert", + "user_guide_qb_step1": "Step 1 - Define the metric", + "user_guide_qb_step1a": "Choose a metric which you want to create an alert on", + "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed", + "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric", + "user_guide_qb_step1d": "Create a formula based on Queries if needed", + "user_guide_qb_step2": "Step 2 - Define Alert Conditions", + "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value", + "user_guide_qb_step2b": "Enter the Alert threshold", + "user_guide_qb_step3": "Step 3 -Alert Configuration", + "user_guide_qb_step3a": "Set alert severity, name and descriptions", + "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed", + "user_guide_pql_step1": "Step 1 - Define the metric", + "user_guide_pql_step1a": "Write a PromQL query for the metric", + "user_guide_pql_step1b": "Format the legends based on labels you want to highlight", + "user_guide_pql_step2": "Step 2 - Define Alert Conditions", + "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value", + "user_guide_pql_step2b": "Enter the Alert threshold", + "user_guide_pql_step3": "Step 3 -Alert Configuration", + "user_guide_pql_step3a": "Set alert severity, name and descriptions", + "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed", + "user_tooltip_more_help": "More details on how to create alerts" } \ No newline at end of file diff --git a/frontend/public/locales/en/rules.json b/frontend/public/locales/en/rules.json index 0602d7393c..e67bd35273 100644 --- a/frontend/public/locales/en/rules.json +++ b/frontend/public/locales/en/rules.json @@ -59,5 +59,27 @@ "option_critical": "Critical", "option_error": "Error", "option_warning": "Warning", - "option_info": "Info" + "option_info": "Info", + "user_guide_headline": "Steps to create an Alert", + "user_guide_qb_step1": "Step 1 - Define the metric", + "user_guide_qb_step1a": "Choose a metric which you want to create an alert on", + "user_guide_qb_step1b": "Filter it based on WHERE field or GROUPBY if needed", + "user_guide_qb_step1c": "Apply an aggregatiion function like COUNT, SUM, etc. or choose NOOP to plot the raw metric", + "user_guide_qb_step1d": "Create a formula based on Queries if needed", + "user_guide_qb_step2": "Step 2 - Define Alert Conditions", + "user_guide_qb_step2a": "Select the evaluation interval, threshold type and whether you want to alert above/below a value", + "user_guide_qb_step2b": "Enter the Alert threshold", + "user_guide_qb_step3": "Step 3 -Alert Configuration", + "user_guide_qb_step3a": "Set alert severity, name and descriptions", + "user_guide_qb_step3b": "Add tags to the alert in the Label field if needed", + "user_guide_pql_step1": "Step 1 - Define the metric", + "user_guide_pql_step1a": "Write a PromQL query for the metric", + "user_guide_pql_step1b": "Format the legends based on labels you want to highlight", + "user_guide_pql_step2": "Step 2 - Define Alert Conditions", + "user_guide_pql_step2a": "Select the threshold type and whether you want to alert above/below a value", + "user_guide_pql_step2b": "Enter the Alert threshold", + "user_guide_pql_step3": "Step 3 -Alert Configuration", + "user_guide_pql_step3a": "Set alert severity, name and descriptions", + "user_guide_pql_step3b": "Add tags to the alert in the Label field if needed", + "user_tooltip_more_help": "More details on how to create alerts" } \ No newline at end of file diff --git a/frontend/src/container/FormAlertRules/UserGuide/index.tsx b/frontend/src/container/FormAlertRules/UserGuide/index.tsx new file mode 100644 index 0000000000..105ca80786 --- /dev/null +++ b/frontend/src/container/FormAlertRules/UserGuide/index.tsx @@ -0,0 +1,132 @@ +import { Col, Row, Typography } from 'antd'; +import TextToolTip from 'components/TextToolTip'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { EQueryType } from 'types/common/dashboard'; + +import { + StyledList, + StyledListItem, + StyledMainContainer, + StyledTopic, +} from './styles'; + +function UserGuide({ queryType }: UserGuideProps): JSX.Element { + // init namespace for translations + const { t } = useTranslation('rules'); + + const renderStep1QB = (): JSX.Element => { + return ( + <> + {t('user_guide_qb_step1')} + + {t('user_guide_qb_step1a')} + {t('user_guide_qb_step1b')} + {t('user_guide_qb_step1c')} + {t('user_guide_qb_step1d')} + + + ); + }; + const renderStep2QB = (): JSX.Element => { + return ( + <> + {t('user_guide_qb_step2')} + + {t('user_guide_qb_step2a')} + {t('user_guide_qb_step2b')} + + + ); + }; + + const renderStep3QB = (): JSX.Element => { + return ( + <> + {t('user_guide_qb_step3')} + + {t('user_guide_qb_step3a')} + {t('user_guide_qb_step3b')} + + + ); + }; + + const renderGuideForQB = (): JSX.Element => { + return ( + <> + {renderStep1QB()} + {renderStep2QB()} + {renderStep3QB()} + + ); + }; + const renderStep1PQL = (): JSX.Element => { + return ( + <> + {t('user_guide_pql_step1')} + + {t('user_guide_pql_step1a')} + {t('user_guide_pql_step1b')} + + + ); + }; + const renderStep2PQL = (): JSX.Element => { + return ( + <> + {t('user_guide_pql_step2')} + + {t('user_guide_pql_step2a')} + {t('user_guide_pql_step2b')} + + + ); + }; + + const renderStep3PQL = (): JSX.Element => { + return ( + <> + {t('user_guide_pql_step3')} + + {t('user_guide_pql_step3a')} + {t('user_guide_pql_step3b')} + + + ); + }; + + const renderGuideForPQL = (): JSX.Element => { + return ( + <> + {renderStep1PQL()} + {renderStep2PQL()} + {renderStep3PQL()} + + ); + }; + + return ( + + + + {t('user_guide_headline')} + + + + + + {queryType === EQueryType.QUERY_BUILDER && renderGuideForQB()} + {queryType === EQueryType.PROM && renderGuideForPQL()} + + ); +} + +interface UserGuideProps { + queryType: EQueryType; +} + +export default UserGuide; diff --git a/frontend/src/container/FormAlertRules/UserGuide/styles.ts b/frontend/src/container/FormAlertRules/UserGuide/styles.ts new file mode 100644 index 0000000000..d4292f32d8 --- /dev/null +++ b/frontend/src/container/FormAlertRules/UserGuide/styles.ts @@ -0,0 +1,17 @@ +import { Card, Typography } from 'antd'; +import styled from 'styled-components'; + +export const StyledMainContainer = styled(Card)``; + +export const StyledTopic = styled(Typography.Paragraph)` + font-weight: 600; +`; + +export const StyledList = styled.ul` + padding-left: 18px; +`; + +export const StyledListItem = styled.li` + font-style: italic; + padding-bottom: 0.5rem; +`; diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx index 1a1615fe52..6d8bd32cf0 100644 --- a/frontend/src/container/FormAlertRules/index.tsx +++ b/frontend/src/container/FormAlertRules/index.tsx @@ -25,8 +25,16 @@ import BasicInfo from './BasicInfo'; import ChartPreview from './ChartPreview'; import QuerySection from './QuerySection'; import RuleOptions from './RuleOptions'; -import { ActionButton, ButtonContainer, MainFormContainer } from './styles'; +import { + ActionButton, + ButtonContainer, + MainFormContainer, + PanelContainer, + StyledLeftContainer, + StyledRightContainer, +} from './styles'; import useDebounce from './useDebounce'; +import UserGuide from './UserGuide'; import { prepareBuilderQueries, prepareStagedQuery, @@ -309,50 +317,57 @@ function FormAlertRules({ return ( <> {Element} - - {queryCategory === EQueryType.QUERY_BUILDER && renderQBChartPreview()} - {queryCategory === EQueryType.PROM && renderPromChartPreview()} - - - - - {renderBasicInfo()} - - } + + + - {ruleId > 0 ? t('button_savechanges') : t('button_createrule')} - - - {ruleId === 0 && t('button_cancelchanges')} - {ruleId > 0 && t('button_discard')} - - - + {queryCategory === EQueryType.QUERY_BUILDER && renderQBChartPreview()} + {queryCategory === EQueryType.PROM && renderPromChartPreview()} + + + + + {renderBasicInfo()} + + } + > + {ruleId > 0 ? t('button_savechanges') : t('button_createrule')} + + + {ruleId === 0 && t('button_cancelchanges')} + {ruleId > 0 && t('button_discard')} + + + + + + + + ); } diff --git a/frontend/src/container/FormAlertRules/styles.ts b/frontend/src/container/FormAlertRules/styles.ts index 1626becfa6..3c64414cbe 100644 --- a/frontend/src/container/FormAlertRules/styles.ts +++ b/frontend/src/container/FormAlertRules/styles.ts @@ -1,11 +1,24 @@ -import { Button, Card, Form, Input, InputNumber, Select } from 'antd'; +import { Button, Card, Col, Form, Input, InputNumber, Row, Select } from 'antd'; import TextArea from 'antd/lib/input/TextArea'; import styled from 'styled-components'; -export const MainFormContainer = styled(Form)` - max-width: 900px; +export const PanelContainer = styled(Row)` + flex-wrap: nowrap; `; +export const StyledRightContainer = styled(Col)` + &&& { + } +`; + +export const StyledLeftContainer = styled(Col)` + &&& { + margin-right: 1rem; + } +`; + +export const MainFormContainer = styled(Form)``; + export const ButtonContainer = styled.div` &&& { display: flex;