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

feat: added helper text, learn-more and doc-link (#5024)

Browse Source 
* feat: added helper text, learn-more and doc-link

* feat: added collapse and uncollapse text on hover

* feat: added learn-more doc link for trace & logs explorer

* feat: added learn-more doc link

* feat: added learn-more doc link

* chore: added alert links and minor updates

* feat: added learn-more doc link

---------

Co-authored-by: makeavish <makeavish786@gmail.com>
This commit is contained in:
SagarRajput-7 2024-05-22 16:00:49 +05:30 committed by GitHub
parent f2b0387a1b
commit 4887a1d8dd
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 217 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/container/ExplorerOptions/ExplorerOptions.styles.scss
View File

@ -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);
}
}
}

23
frontend/src/container/ExplorerOptions/ExplorerOptions.tsx
View File

@ -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({
</Button>
</div>
<div className="actions">
<Tooltip
title={
<div>
{sourcepage === DataSource.LOGS
? 'Learn more about Logs explorer '
: 'Learn more about Traces explorer '}
<Typography.Link
href={
sourcepage === DataSource.LOGS
? 'https://signoz.io/docs/product-features/logs-explorer/?utm_source=product&utm_medium=logs-explorer-toolbar'
: 'https://signoz.io/docs/product-features/trace-explorer/?utm_source=product&utm_medium=trace-explorer-toolbar'
}
target="_blank"
>
{' '}
here
</Typography.Link>{' '}
</div>
}
>
<InfoCircleOutlined className="info-icon" />
</Tooltip>
<Tooltip title="Hide">
<Button
disabled={disabled}

2
frontend/src/container/FormAlertRules/UserGuide/index.tsx
View File

@ -147,7 +147,7 @@ function UserGuide({ queryType }: UserGuideProps): JSX.Element {
<Col flex="none">
<TextToolTip
text={t('user_tooltip_more_help')}
url="https://signoz.io/docs/userguide/alerts-management/#create-alert-rules"
url="https://signoz.io/docs/userguide/alerts-management/?utm_source=product&utm_medium=create-alert#creating-a-new-alert-in-signoz"
/>
</Col>
</Row>

3
frontend/src/container/ListAlertRules/ListAlert.tsx
View File

@ -338,7 +338,8 @@ function ListAlert({ allAlertRules, refetch }: ListAlertProps): JSX.Element {
<TextToolTip
{...{
text: `More details on how to create alerts`,
url: 'https://signoz.io/docs/userguide/alerts-management/',
url:
'https://signoz.io/docs/alerts/?utm_source=product&utm_medium=list-alerts',
}}
/>

3
frontend/src/container/ListOfDashboard/DashboardsList.tsx
View File

@ -322,7 +322,8 @@ function DashboardsList(): JSX.Element {
<TextToolTip
{...{
text: `More details on how to create dashboards`,
url: 'https://signoz.io/docs/userguide/dashboards',
url:
'https://signoz.io/docs/userguide/dashboards?utm_source=product&utm_medium=list-dashboard',
}}
/>
</ButtonContainer>

5
frontend/src/container/NewWidget/LeftContainer/QuerySection/index.tsx
View File

@ -235,7 +235,10 @@ function QuerySection({
onChange={handleQueryCategoryChange}
tabBarExtraContent={
<span style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
<TextToolTip text="This will temporarily save the current query and graph state. This will persist across tab change" />
<TextToolTip
text="This will temporarily save the current query and graph state. This will persist across tab change"
url="https://signoz.io/docs/userguide/query-builder?utm_source=product&utm_medium=query-builder"
/>
<Button
loading={queryResponse.isFetching}
type="primary"

2
frontend/src/container/PipelinePage/Layouts/Pipeline/CreatePipelineButton.tsx
View File

@ -43,7 +43,7 @@ function CreatePipelineButton({
<ButtonContainer>
<TextToolTip
text={t('learn_more')}
url="https://signoz.io/docs/logs-pipelines/introduction/"
url="https://signoz.io/docs/logs-pipelines/introduction/?utm_source=product&utm_medium=pipelines-tab"
/>
{isAddNewPipelineVisible && (
<CustomButton

2
frontend/src/container/PipelinePage/PipelineListsView/PipelineListsView.tsx
View File

@ -66,7 +66,7 @@ function PipelinesListEmptyState(): JSX.Element {
<Typography>
{t('learn_more')}&nbsp;
<a
href="https://signoz.io/docs/logs-pipelines/introduction/"
href="https://signoz.io/docs/logs-pipelines/introduction/?utm_source=product&utm_medium=pipelines-tab"
target="_blank"
rel="noreferrer"
>

2
frontend/src/container/PipelinePage/tests/__snapshots__/PipelinePageLayout.test.tsx.snap
View File

@ -119,7 +119,7 @@ exports[`PipelinePage container test should render PipelinePageLayout section 1`
>
learn_more 
<a
href="https://signoz.io/docs/logs-pipelines/introduction/"
href="https://signoz.io/docs/logs-pipelines/introduction/?utm_source=product&utm_medium=pipelines-tab"
rel="noreferrer"
target="_blank"
>

36
frontend/src/container/QueryBuilder/QueryBuilder.tsx
View File

@ -1,6 +1,6 @@
import './QueryBuilder.styles.scss';
import { Button, Col, Divider, Row, Tooltip } from 'antd';
import { Button, Col, Divider, Row, Tooltip, Typography } from 'antd';
import {
MAX_FORMULAS,
MAX_QUERIES,
@ -133,13 +133,43 @@ export const QueryBuilder = memo(function QueryBuilder({
{!isListViewPanel && (
<div className="new-query-formula-buttons-container">
<Button.Group>
<Tooltip title="Add Query">
<Tooltip
title={
<div style={{ textAlign: 'center' }}>
Add New Query
<Typography.Link
href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#multiple-queries-and-functions"
target="_blank"
style={{ textDecoration: 'underline' }}
>
{' '}
<br />
Learn more
</Typography.Link>
</div>
}
>
<Button disabled={isDisabledQueryButton} onClick={addNewBuilderQuery}>
<DatabaseZap size={12} />
</Button>
</Tooltip>
<Tooltip title="Add Formula">
<Tooltip
title={
<div style={{ textAlign: 'center' }}>
Add New Formula
<Typography.Link
href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#multiple-queries-and-functions"
target="_blank"
style={{ textDecoration: 'underline' }}
>
{' '}
<br />
Learn more
</Typography.Link>
</div>
}
>
<Button disabled={isDisabledFormulaButton} onClick={addNewFormula}>
<Sigma size={12} />
</Button>

4
frontend/src/container/QueryBuilder/components/QBEntityOptions/QBEntityOptions.tsx
View File

@ -66,6 +66,7 @@ export default function QBEntityOptions({
<div className="left-col-items">
<div className="options periscope-btn-group">
<Button.Group>
<Tooltip title={isCollapsed ? 'Uncollapse' : 'Collapse'}>
<Button
value="search"
className="periscope-btn collapse"
@ -73,6 +74,8 @@ export default function QBEntityOptions({
>
{isCollapsed ? <ChevronRight size={16} /> : <ChevronDown size={16} />}
</Button>
</Tooltip>
<Tooltip title={entityData.disabled ? 'Show' : 'Hide'}>
<Button
value="query-builder"
className="periscope-btn visibility-toggle"
@ -81,6 +84,7 @@ export default function QBEntityOptions({
>
{entityData.disabled ? <EyeOff size={16} /> : <Eye size={16} />}
</Button>
</Tooltip>
{entityType === 'query' && (
<Tooltip title={`Clone Query ${entityData.queryName}`}>

73
frontend/src/container/QueryBuilder/components/Query/Query.tsx
View File

@ -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({
<Row gutter={[11, 5]}>
{version && version === 'v3' && (
<Col flex="5.93rem">
<Tooltip
title={
<div style={{ textAlign: 'center' }}>
Select Aggregate Operator
<Typography.Link
className="learn-more"
href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
target="_blank"
style={{ textDecoration: 'underline' }}
>
{' '}
<br />
Learn more
</Typography.Link>
</div>
}
>
<OperatorsSelect
value={query.aggregateOperator}
onChange={handleChangeOperator}
operators={operators}
/>
</Tooltip>
</Col>
)}
@ -388,12 +406,30 @@ export const Query = memo(function Query({
Array.isArray(operators) &&
operators.length > 0 && (
<Col flex="5.93rem">
<Tooltip
title={
<div style={{ textAlign: 'center' }}>
Select Aggregate Operator
<Typography.Link
className="learn-more"
href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
target="_blank"
style={{ textDecoration: 'underline' }}
>
{' '}
<br />
Learn more
</Typography.Link>
</div>
}
>
<OperatorsSelect
value={query.aggregateOperator}
onChange={handleChangeOperator}
operators={operators}
disabled={disableOperatorSelector}
/>
</Tooltip>
</Col>
)}
</Row>
@ -422,11 +458,28 @@ export const Query = memo(function Query({
<Col span={11}>
<Row gutter={[11, 5]}>
<Col flex="5.93rem">
<Tooltip
title={
<div style={{ textAlign: 'center' }}>
Select Aggregate Operator
<Typography.Link
href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#aggregation"
target="_blank"
style={{ textDecoration: 'underline' }}
>
{' '}
<br />
Learn more
</Typography.Link>
</div>
}
>
<OperatorsSelect
value={query.aggregateOperator}
onChange={handleChangeOperator}
operators={operators}
/>
</Tooltip>
</Col>
<Col flex="1 1 12.5rem">
<AggregatorFilter
@ -520,12 +573,30 @@ export const Query = memo(function Query({
)}
{panelType !== PANEL_TYPES.LIST && panelType !== PANEL_TYPES.TRACE && (
<Row style={{ width: '100%' }}>
<Tooltip
placement="right"
title={
<div style={{ textAlign: 'center' }}>
Name of legend
<Typography.Link
style={{ textDecoration: 'underline' }}
href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#legend-format"
target="_blank"
>
{' '}
<br />
Learn more
</Typography.Link>
</div>
}
>
<Input
onChange={handleChangeQueryLegend}
size="middle"
value={query.legend}
addonBefore="Legend Format"
/>
</Tooltip>
</Row>
)}
</Row>

21
frontend/src/container/QueryBuilder/components/QueryFunctions/QueryFunctions.tsx
View File

@ -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({
<Tooltip
title={
functions && functions.length >= 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.'
) : (
<div style={{ textAlign: 'center' }}>
Add new function
<Typography.Link
style={{ textDecoration: 'underline' }}
href="https://signoz.io/docs/userguide/query-builder/?utm_source=product&utm_medium=query-builder#functions-for-extended-data-analysis"
target="_blank"
>
{' '}
<br />
Learn more
</Typography.Link>
</div>
)
}
placement="right"
>

3
frontend/src/pages/SaveView/SaveView.styles.scss
View File

@ -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;

9
frontend/src/pages/SaveView/index.tsx
View File

@ -282,7 +282,14 @@ function SaveView(): JSX.Element {
<div className="save-view-content">
<Typography.Title className="title">Views</Typography.Title>
<Typography.Text className="subtitle">
Manage your saved views for {ROUTES_VS_SOURCEPAGE[pathname]}.
Manage your saved views for {ROUTES_VS_SOURCEPAGE[pathname]}.{' '}
<Typography.Link
className="learn-more"
href="https://signoz.io/docs/product-features/saved-view/?utm_source=product&utm_medium=views-tab"
target="_blank"
>
Learn more
</Typography.Link>
</Typography.Text>
<Input
placeholder="Search for views..."