diff --git a/frontend/src/components/facingIssueBtn/util.ts b/frontend/src/components/facingIssueBtn/util.ts new file mode 100644 index 0000000000..1e288cfa09 --- /dev/null +++ b/frontend/src/components/facingIssueBtn/util.ts @@ -0,0 +1,57 @@ +import { PANEL_TYPES } from 'constants/queryBuilder'; +import { AlertDef } from 'types/api/alerts/def'; +import { Dashboard, DashboardData } from 'types/api/dashboard/getAll'; + +export const chartHelpMessage = ( + selectedDashboard: Dashboard | undefined, + graphType: PANEL_TYPES, +): string => ` +Hi Team, + +I need help in creating this chart. Here are my dashboard details + +Name: ${selectedDashboard?.data.title || ''} +Panel type: ${graphType} +Dashboard Id: ${selectedDashboard?.uuid || ''} + +Thanks`; + +export const dashboardHelpMessage = ( + data: DashboardData | undefined, + selectedDashboard: Dashboard | undefined, +): string => ` +Hi Team, + +I need help with this dashboard. Here are my dashboard details + +Name: ${data?.title || ''} +Dashboard Id: ${selectedDashboard?.uuid || ''} + +Thanks`; + +export const dashboardListMessage = `Hi Team, + +I need help with dashboards. + +Thanks`; + +export const listAlertMessage = `Hi Team, + +I need help with managing alerts. + +Thanks`; + +export const alertHelpMessage = ( + alertDef: AlertDef, + ruleId: number, +): string => ` +Hi Team, + +I need help in configuring this alert. Here are my alert rule details + +Name: ${alertDef?.alert || ''} +Alert Type: ${alertDef?.alertType || ''} +State: ${(alertDef as any)?.state || ''} +Alert Id: ${ruleId} + +Thanks`; diff --git a/frontend/src/container/FormAlertRules/index.tsx b/frontend/src/container/FormAlertRules/index.tsx index c5d0356cb0..1aeb312b53 100644 --- a/frontend/src/container/FormAlertRules/index.tsx +++ b/frontend/src/container/FormAlertRules/index.tsx @@ -12,6 +12,7 @@ import { import saveAlertApi from 'api/alerts/save'; import testAlertApi from 'api/alerts/testAlert'; import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn'; +import { alertHelpMessage } from 'components/facingIssueBtn/util'; import { FeatureKeys } from 'constants/features'; import { QueryParams } from 'constants/query'; import { PANEL_TYPES } from 'constants/queryBuilder'; @@ -586,16 +587,7 @@ function FormAlertRules({ className="facing-issue-btn" eventName="Alert: Facing Issues in alert" buttonText="Need help with this alert?" - message={`Hi Team, - -I need help in configuring this alert. Here are my alert rule details - -Name: ${alertDef?.alert || ''} -Alert Type: ${alertDef?.alertType || ''} -State: ${(alertDef as any)?.state || ''} -Alert Id: ${ruleId} - -Thanks`} + message={alertHelpMessage(alertDef, ruleId)} // onHover: Click here to get help with this alert /> diff --git a/frontend/src/container/GridCardLayout/GridCardLayout.tsx b/frontend/src/container/GridCardLayout/GridCardLayout.tsx index 664c5464f5..f032e1f4e4 100644 --- a/frontend/src/container/GridCardLayout/GridCardLayout.tsx +++ b/frontend/src/container/GridCardLayout/GridCardLayout.tsx @@ -5,6 +5,7 @@ import { Flex, Form, Input, Modal, Tooltip, Typography } from 'antd'; import { useForm } from 'antd/es/form/Form'; import cx from 'classnames'; import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn'; +import { dashboardHelpMessage } from 'components/facingIssueBtn/util'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import { QueryParams } from 'constants/query'; import { PANEL_GROUP_TYPES, PANEL_TYPES } from 'constants/queryBuilder'; @@ -493,14 +494,7 @@ function GraphLayout({ onAddPanelHandler }: GraphLayoutProps): JSX.Element { }} eventName="Dashboard: Facing Issues in dashboard" buttonText="Need help with this dashboard?" - message={`Hi Team, - -I need help with this dashboard. Here are my dashboard details - -Name: ${data?.title || ''} -Dashboard Id: ${selectedDashboard?.uuid || ''} - -Thanks`} + message={dashboardHelpMessage(data, selectedDashboard)} // onHover: Click here to get help for this dashboard /> diff --git a/frontend/src/container/ListAlertRules/ListAlert.tsx b/frontend/src/container/ListAlertRules/ListAlert.tsx index 2d52374deb..c8aa1fdfb9 100644 --- a/frontend/src/container/ListAlertRules/ListAlert.tsx +++ b/frontend/src/container/ListAlertRules/ListAlert.tsx @@ -4,6 +4,7 @@ import { Input, Typography } from 'antd'; import type { ColumnsType } from 'antd/es/table/interface'; import saveAlertApi from 'api/alerts/save'; import DropDown from 'components/DropDown/DropDown'; +import { listAlertMessage } from 'components/facingIssueBtn/util'; import { DynamicColumnsKey, TableDataSource, @@ -364,11 +365,7 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element { }, eventName: 'Alert: Facing Issues in alert', buttonText: 'Facing issues with alerts?', - message: `Hi Team, - -I need help with managing alerts. - -Thanks`, + message: listAlertMessage, }} // onHover: Click here to get help with alerts /> diff --git a/frontend/src/container/ListOfDashboard/DashboardsList.tsx b/frontend/src/container/ListOfDashboard/DashboardsList.tsx index 1ff98a8d22..0241f7b88e 100644 --- a/frontend/src/container/ListOfDashboard/DashboardsList.tsx +++ b/frontend/src/container/ListOfDashboard/DashboardsList.tsx @@ -3,6 +3,7 @@ import { Card, Col, Dropdown, Input, Row, TableColumnProps } from 'antd'; import { ItemType } from 'antd/es/menu/hooks/useItems'; import createDashboard from 'api/dashboard/create'; import { AxiosError } from 'axios'; +import { dashboardListMessage } from 'components/facingIssueBtn/util'; import { DynamicColumnsKey, TableDataSource, @@ -391,11 +392,7 @@ function DashboardsList(): JSX.Element { }, eventName: 'Dashboard: Facing Issues in dashboard', buttonText: 'Facing issues with dashboards?', - message: `Hi Team, - -I need help with dashboards. - -Thanks`, + message: dashboardListMessage, // onHover: Click here to get help with dashboards }} /> diff --git a/frontend/src/container/NewWidget/NewWidget.styles.scss b/frontend/src/container/NewWidget/NewWidget.styles.scss new file mode 100644 index 0000000000..737e9c7581 --- /dev/null +++ b/frontend/src/container/NewWidget/NewWidget.styles.scss @@ -0,0 +1,4 @@ +.facing-issue-btn-container { + display: grid; + grid-template-columns: 1fr max-content; +} diff --git a/frontend/src/container/NewWidget/index.tsx b/frontend/src/container/NewWidget/index.tsx index 659dc016ad..2db0f85452 100644 --- a/frontend/src/container/NewWidget/index.tsx +++ b/frontend/src/container/NewWidget/index.tsx @@ -1,7 +1,10 @@ /* eslint-disable sonarjs/cognitive-complexity */ +import './NewWidget.styles.scss'; + import { LockFilled, WarningOutlined } from '@ant-design/icons'; -import { Button, Flex, Modal, Space, Tooltip, Typography } from 'antd'; +import { Button, Modal, Space, Tooltip, Typography } from 'antd'; import FacingIssueBtn from 'components/facingIssueBtn/FacingIssueBtn'; +import { chartHelpMessage } from 'components/facingIssueBtn/util'; import { SOMETHING_WENT_WRONG } from 'constants/api'; import { FeatureKeys } from 'constants/features'; import { QueryParams } from 'constants/query'; @@ -402,7 +405,7 @@ function NewWidget({ selectedGraph }: NewWidgetProps): JSX.Element { return ( - +
@@ -452,7 +447,7 @@ Thanks`} )} - +