feat: tooltip is added (#501)

* tooltip is added

* fix: tooltip component is updated

* Tooltip component is updated

* settings tooltip is updated

* tooltip size is updated

frontend/src/components/TextToolTip/index.tsx

@@ -0,0 +1,27 @@
+import { QuestionCircleFilled } from '@ant-design/icons';
+import { Tooltip } from 'antd';
+import React from 'react';
+
+const TextToolTip = ({ text, url }: TextToolTipProps) => (
+	<Tooltip
+		overlay={() => {
+			return (
+				<div>
+					{`${text} `}
+					<a href={url} target={'_blank'}>
+						here
+					</a>
+				</div>
+			);
+		}}
+	>
+		<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
+	</Tooltip>
+);
+
+interface TextToolTipProps {
+	url: string;
+	text: string;
+}
+
+export default TextToolTip;

frontend/src/container/AllAlertChannels/index.tsx

@@ -1,7 +1,8 @@
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, Typography } from 'antd';
+import { Typography } from 'antd';
 import getAll from 'api/channels/getAll';
 import Spinner from 'components/Spinner';
+import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useFetch from 'hooks/useFetch';
 import history from 'lib/history';
@@ -9,7 +10,7 @@ import React, { useCallback } from 'react';
 const { Paragraph } = Typography;
 
 import AlertChannlesComponent from './AlertChannels';
-import { ButtonContainer } from './styles';
+import { ButtonContainer, Button } from './styles';
 
 const AlertChannels = (): JSX.Element => {
 	const onToggleHandler = useCallback(() => {
@@ -33,9 +34,16 @@ const AlertChannels = (): JSX.Element => {
 					The latest added channel is used as the default channel for sending alerts
 				</Paragraph>
 
-				<Button onClick={onToggleHandler} icon={<PlusOutlined />}>
-					New Alert Channel
-				</Button>
+				<div>
+					<TextToolTip
+						text={`More details on how to setting notification channels`}
+						url="https://signoz.io/docs/userguide/alerts-management/#setting-notification-channel"
+					/>
+
+					<Button onClick={onToggleHandler} icon={<PlusOutlined />}>
+						New Alert Channel
+					</Button>
+				</div>
 			</ButtonContainer>
 
 			<AlertChannlesComponent allChannels={payload} />

frontend/src/container/AllAlertChannels/styles.ts

@@ -1,4 +1,5 @@
 import styled from 'styled-components';
+import { Button as ButtonComponent } from 'antd';
 
 export const ButtonContainer = styled.div`
 	&&& {
@@ -9,3 +10,9 @@ export const ButtonContainer = styled.div`
 		margin-bottom: 1rem;
 	}
 `;
+
+export const Button = styled(ButtonComponent)`
+	&&& {
+		margin-left: 1rem;
+	}
+`;

frontend/src/container/GeneralSettings/index.tsx

@@ -2,6 +2,7 @@ import { Button, Modal, notification, Typography } from 'antd';
 import getRetentionperoidApi from 'api/settings/getRetention';
 import setRetentionApi from 'api/settings/setRetention';
 import Spinner from 'components/Spinner';
+import TextToolTip from 'components/TextToolTip';
 import useFetch from 'hooks/useFetch';
 import convertIntoHr from 'lib/convertIntoHr';
 import getSettingsPeroid from 'lib/getSettingsPeroid';
@@ -14,6 +15,7 @@ import {
 	Container,
 	ErrorText,
 	ErrorTextContainer,
+	ToolTipContainer,
 } from './styles';
 
 const GeneralSettings = (): JSX.Element => {
@@ -182,10 +184,26 @@ const GeneralSettings = (): JSX.Element => {
 		<Container>
 			{Element}
 
-			{errorText && (
+			{errorText ? (
 				<ErrorTextContainer>
 					<ErrorText>{errorText}</ErrorText>
+
+					<TextToolTip
+						{...{
+							text: `More details on how to set retention period`,
+							url: 'https://signoz.io/docs/userguide/retention-period/',
+						}}
+					/>
 				</ErrorTextContainer>
+			) : (
+				<ToolTipContainer>
+					<TextToolTip
+						{...{
+							text: `More details on how to set retention period`,
+							url: 'https://signoz.io/docs/userguide/retention-period/',
+						}}
+					/>
+				</ToolTipContainer>
 			)}
 
 			<Retention

frontend/src/container/GeneralSettings/styles.ts

@@ -64,6 +64,23 @@ export const ErrorTextContainer = styled.div`
 	&&& {
 		margin-top: 2rem;
 		margin-bottom: 2rem;
+		display: flex;
+		align-items: center;
+
+		> article {
+			margin-right: 1rem;
+		}
+	}
+`;
+
+export const ToolTipContainer = styled.div`
+	&&& {
+		margin-top: 2rem;
+		margin-bottom: 2rem;
+		display: flex;
+		align-items: center;
+		width: 50%;
+		justify-content: flex-end;
 	}
 `;
 

frontend/src/container/ListAlertRules/ListAlert.tsx

@@ -1,8 +1,9 @@
 /* eslint-disable react/display-name */
 import { PlusOutlined } from '@ant-design/icons';
-import { Button, notification, Tag, Typography } from 'antd';
+import { notification, Tag, Typography } from 'antd';
 import Table, { ColumnsType } from 'antd/lib/table';
 import getAll from 'api/alerts/getAll';
+import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import useInterval from 'hooks/useInterval';
 import history from 'lib/history';
@@ -11,7 +12,7 @@ import { generatePath } from 'react-router';
 import { Alerts } from 'types/api/alerts/getAll';
 
 import DeleteAlert from './DeleteAlert';
-import { ButtonContainer } from './styles';
+import { ButtonContainer, Button } from './styles';
 import Status from './TableComponents/Status';
 
 const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
@@ -128,6 +129,13 @@ const ListAlert = ({ allAlertRules }: ListAlertProps): JSX.Element => {
 			{Element}
 
 			<ButtonContainer>
+				<TextToolTip
+					{...{
+						text: `More details on how to create alerts`,
+						url: 'https://signoz.io/docs/userguide/alerts-management/',
+					}}
+				/>
+
 				<Button onClick={onClickNewAlertHandler} icon={<PlusOutlined />}>
 					New Alert
 				</Button>

frontend/src/container/ListAlertRules/styles.ts

@@ -1,9 +1,17 @@
 import styled from 'styled-components';
+import { Button as ButtonComponent } from 'antd';
 
 export const ButtonContainer = styled.div`
 	&&& {
 		display: flex;
 		justify-content: flex-end;
 		margin-bottom: 2rem;
+		align-items: center;
+	}
+`;
+
+export const Button = styled(ButtonComponent)`
+	&&& {
+		margin-left: 1rem;
 	}
 `;

frontend/src/container/ListOfDashboard/index.tsx

@@ -2,6 +2,7 @@ import { PlusOutlined } from '@ant-design/icons';
 import { Row, Table, TableColumnProps, Typography } from 'antd';
 import createDashboard from 'api/dashboard/create';
 import { AxiosError } from 'axios';
+import TextToolTip from 'components/TextToolTip';
 import ROUTES from 'constants/routes';
 import React, { useCallback, useState } from 'react';
 import { useSelector } from 'react-redux';
@@ -10,7 +11,7 @@ import { AppState } from 'store/reducers';
 import DashboardReducer from 'types/reducer/dashboards';
 import { v4 } from 'uuid';
 
-import { NewDashboardButton, TableContainer } from './styles';
+import { NewDashboardButton, TableContainer, ButtonContainer } from './styles';
 import Createdby from './TableComponents/CreatedBy';
 import DateComponent from './TableComponents/Date';
 import DeleteButton from './TableComponents/DeleteButton';
@@ -150,15 +151,25 @@ const ListOfAllDashboard = (): JSX.Element => {
 					return (
 						<Row justify="space-between">
 							<Typography>Dashboard List</Typography>
-							<NewDashboardButton
-								onClick={onNewDashboardHandler}
-								icon={<PlusOutlined />}
-								type="primary"
-								loading={newDashboardState.loading}
-								danger={newDashboardState.error}
-							>
-								{getText()}
-							</NewDashboardButton>
+
+							<ButtonContainer>
+								<TextToolTip
+									{...{
+										text: `More details on how to create dashboards`,
+										url: 'https://signoz.io/docs/userguide/metrics-dashboard',
+									}}
+								/>
+
+								<NewDashboardButton
+									onClick={onNewDashboardHandler}
+									icon={<PlusOutlined />}
+									type="primary"
+									loading={newDashboardState.loading}
+									danger={newDashboardState.error}
+								>
+									{getText()}
+								</NewDashboardButton>
+							</ButtonContainer>
 						</Row>
 					);
 				}}

frontend/src/container/ListOfDashboard/styles.ts

@@ -6,6 +6,8 @@ export const NewDashboardButton = styled(Button)`
 		display: flex;
 		justify-content: center;
 		align-items: center;
+
+		margin-left: 1rem;
 	}
 `;
 
@@ -14,3 +16,10 @@ export const TableContainer = styled(Row)`
 		margin-top: 1rem;
 	}
 `;
+
+export const ButtonContainer = styled.div`
+	&&& {
+		display: flex;
+		align-items: center;
+	}
+`;

frontend/src/container/NewWidget/LeftContainer/QuerySection/Query.tsx

@@ -1,5 +1,6 @@
 import { Button, Divider } from 'antd';
 import Input from 'components/Input';
+import TextToolTip from 'components/TextToolTip';
 import { timePreferance } from 'container/NewWidget/RightContainer/timeItems';
 import React, { useCallback, useState } from 'react';
 import { connect } from 'react-redux';
@@ -14,7 +15,12 @@ import {
 import AppActions from 'types/actions';
 import { DeleteQueryProps } from 'types/actions/dashboard';
 
-import { Container, InputContainer, QueryWrapper } from './styles';
+import {
+	Container,
+	InputContainer,
+	QueryWrapper,
+	ButtonContainer,
+} from './styles';
 
 const Query = ({
 	currentIndex,
@@ -82,7 +88,15 @@ const Query = ({
 					</InputContainer>
 				</QueryWrapper>
 
-				<Button onClick={onDeleteQueryHandler}>Delete</Button>
+				<ButtonContainer>
+					<Button onClick={onDeleteQueryHandler}>Delete</Button>
+					<TextToolTip
+						{...{
+							text: `More details on how to plot metrics graphs`,
+							url: 'https://signoz.io/docs/userguide/prometheus-metrics/',
+						}}
+					/>
+				</ButtonContainer>
 			</Container>
 
 			<Divider />

frontend/src/container/NewWidget/LeftContainer/QuerySection/styles.ts

@@ -24,3 +24,15 @@ export const QueryWrapper = styled.div`
 		width: 95%; // each child is taking 95% of the parent
 	}
 `;
+
+export const ButtonContainer = styled.div`
+	&&& {
+		display: flex;
+		align-items: center;
+		flex-direction: column;
+
+		> button {
+			margin-bottom: 1rem;
+		}
+	}
+`;

frontend/src/modules/Traces/TraceGanttChart/TraceGanttChart.tsx

@@ -8,6 +8,7 @@ import {
 	Table as TableComponent,
 	Tabs,
 } from 'antd';
+import TextToolTip from 'components/TextToolTip';
 import { has, isEmpty, max } from 'lodash-es';
 import traverseTreeData from 'modules/Traces/TraceGanttChart/TraceGanttChartHelpers';
 import React, { useEffect, useRef, useState } from 'react';
@@ -22,6 +23,8 @@ const StyledButton = styled(Button)`
 	color: #f2f2f2;
 	font-size: 14px;
 	line-height: 20px;
+	margin-right: 0.5rem;
+	margin-left: 0.5rem;
 `;
 
 const Table = styled(TableComponent)`
@@ -332,18 +335,23 @@ const TraceGanttChart = ({
 			{id !== 'empty' && (
 				<>
 					<Row
-						justify="end"
+						justify="space-between"
+						align="middle"
 						gutter={32}
 						style={{
 							marginBottom: '24px',
 						}}
 					>
+						<Col>
+							<TextToolTip
+								text={`More details on how to understand trace details`}
+								url="https://signoz.io/docs/userguide/trace-details/"
+							/>
+						</Col>
 						<Col>
 							<StyledButton onClick={handleFocusOnSelectedPath}>
 								Focus on selected path
 							</StyledButton>
-						</Col>
-						<Col>
 							<StyledButton onClick={handleResetFocus}> Reset Focus </StyledButton>
 						</Col>
 					</Row>