diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss index 7f6ac6a4dd..8af1e4ad0a 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss @@ -64,6 +64,10 @@ .view-options, .actions { + .info-icon { + padding: 8px; + } + .hidden { display: none; } @@ -252,6 +256,10 @@ color: var(--bg-ink-200); background-color: var(--bg-vanilla-300); } + + .info-icon { + color: var(--bg-ink-200); + } } } diff --git a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx index 0e9fd3704b..7253b45b94 100644 --- a/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx +++ b/frontend/src/container/ExplorerOptions/ExplorerOptions.tsx @@ -1,6 +1,7 @@ /* eslint-disable react/jsx-props-no-spreading */ import './ExplorerOptions.styles.scss'; +import { InfoCircleOutlined } from '@ant-design/icons'; import { Color } from '@signozhq/design-tokens'; import { Button, @@ -402,6 +403,28 @@ function ExplorerOptions({
+ + {sourcepage === DataSource.LOGS + ? 'Learn more about Logs explorer ' + : 'Learn more about Traces explorer '} + + {' '} + here + {' '} +
+ } + > + + - + + Add New Formula + + {' '} +
+ Learn more +
+ + } + > diff --git a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx index a2ec473921..652518f50d 100644 --- a/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx +++ b/frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx @@ -66,21 +66,25 @@ export default function QBEntityOptions({
- - + + + + + + {entityType === 'query' && ( diff --git a/frontend/src/container/QueryBuilder/components/Query/Query.tsx b/frontend/src/container/QueryBuilder/components/Query/Query.tsx index fb8b0e1561..074443364e 100644 --- a/frontend/src/container/QueryBuilder/components/Query/Query.tsx +++ b/frontend/src/container/QueryBuilder/components/Query/Query.tsx @@ -1,7 +1,7 @@ /* eslint-disable sonarjs/cognitive-complexity */ import './Query.styles.scss'; -import { Col, Input, Row } from 'antd'; +import { Col, Input, Row, Tooltip, Typography } from 'antd'; import { ENTITY_VERSION_V4 } from 'constants/app'; // ** Constants import { ATTRIBUTE_TYPES, PANEL_TYPES } from 'constants/queryBuilder'; @@ -367,11 +367,29 @@ export const Query = memo(function Query({ {version && version === 'v3' && ( - + + Select Aggregate Operator + + {' '} +
+ Learn more +
+
+ } + > + + )} @@ -388,12 +406,30 @@ export const Query = memo(function Query({ Array.isArray(operators) && operators.length > 0 && ( - + + Select Aggregate Operator + + {' '} +
+ Learn more +
+
+ } + > + +
)} @@ -422,11 +458,28 @@ export const Query = memo(function Query({ - + + Select Aggregate Operator + + {' '} +
+ Learn more +
+ + } + > + +
- + + Name of legend + + {' '} +
+ Learn more +
+ + } + > + +
)} diff --git a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx index 7dfdd99c9c..017047b507 100644 --- a/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx +++ b/frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx @@ -1,6 +1,6 @@ import './QueryFunctions.styles.scss'; -import { Button, Tooltip } from 'antd'; +import { Button, Tooltip, Typography } from 'antd'; import cx from 'classnames'; import { useIsDarkMode } from 'hooks/useDarkMode'; import { cloneDeep, pullAt } from 'lodash-es'; @@ -180,9 +180,22 @@ export default function QueryFunctions({ = 3 - ? 'Functions are in early access. You can add a maximum of 3 function as of now.' - : '' + functions && functions.length >= 3 ? ( + 'Functions are in early access. You can add a maximum of 3 function as of now.' + ) : ( +
+ Add new function + + {' '} +
+ Learn more +
+
+ ) } placement="right" > diff --git a/frontend/src/pages/SaveView/SaveView.styles.scss b/frontend/src/pages/SaveView/SaveView.styles.scss index 292a0b8d06..1e4b7bf0f6 100644 --- a/frontend/src/pages/SaveView/SaveView.styles.scss +++ b/frontend/src/pages/SaveView/SaveView.styles.scss @@ -25,6 +25,9 @@ line-height: 20px; /* 142.857% */ letter-spacing: -0.07px; } + .learn-more { + font-size: 14px; + } .ant-input-affix-wrapper { margin-top: 16px; diff --git a/frontend/src/pages/SaveView/index.tsx b/frontend/src/pages/SaveView/index.tsx index 2ba5535fc4..86a511291e 100644 --- a/frontend/src/pages/SaveView/index.tsx +++ b/frontend/src/pages/SaveView/index.tsx @@ -282,7 +282,14 @@ function SaveView(): JSX.Element {
Views - Manage your saved views for {ROUTES_VS_SOURCEPAGE[pathname]}. + Manage your saved views for {ROUTES_VS_SOURCEPAGE[pathname]}.{' '} + + Learn more +