feat: dashboard variables (SigNoz#1552)

* feat: dashboard variables
* fix: variable wipe on few instances
* feat: error handling states
* feat: eslint and tsc fixes

frontend/src/api/dashboard/variables/query.ts

@@ -0,0 +1,26 @@
+import axios from 'api';
+import { ErrorResponseHandler } from 'api/ErrorResponseHandler';
+import { AxiosError } from 'axios';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import { PayloadProps, Props } from 'types/api/dashboard/variables/query';
+
+const query = async (
+	props: Props,
+): Promise<SuccessResponse<PayloadProps> | ErrorResponse> => {
+	try {
+		const response = await axios.get(
+			`/variables/query?query=${encodeURIComponent(props.query)}`,
+		);
+
+		return {
+			statusCode: 200,
+			error: null,
+			message: response.data.status,
+			payload: response.data.data,
+		};
+	} catch (error) {
+		return ErrorResponseHandler(error as AxiosError);
+	}
+};
+
+export default query;

frontend/src/container/GridGraphLayout/Graph/FullView/index.metricsBuilder.tsx

@@ -7,6 +7,7 @@ import {
 	timeItems,
 	timePreferance,
 } from 'container/NewWidget/RightContainer/timeItems';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import getChartData from 'lib/getChartData';
 import React, { useCallback, useState } from 'react';
 import { useQuery } from 'react-query';
@@ -52,6 +53,7 @@ function FullView({
 				graphType: widget.panelTypes,
 				query: widget.query,
 				globalSelectedInterval: globalSelectedTime,
+				variables: getDashboardVariables(),
 			}),
 	);
 

frontend/src/container/GridGraphLayout/Graph/index.tsx

@@ -3,6 +3,7 @@ import { AxiosError } from 'axios';
 import { ChartData } from 'chart.js';
 import Spinner from 'components/Spinner';
 import GridGraphComponent from 'container/GridGraphComponent';
+import { getDashboardVariables } from 'lib/dashbaordVariables/getDashboardVariables';
 import getChartData from 'lib/getChartData';
 import isEmpty from 'lodash-es/isEmpty';
 import React, { memo, useCallback, useEffect, useState } from 'react';
@@ -104,11 +105,18 @@ function GridCardGraph({
 	useEffect(() => {
 		(async (): Promise<void> => {
 			try {
+				setState((state) => ({
+					...state,
+					error: false,
+					errorMessage: '',
+					loading: true,
+				}));
 				const response = await GetMetricQueryRange({
 					selectedTime: widget.timePreferance,
 					graphType: widget.panelTypes,
 					query: widget.query,
 					globalSelectedInterval,
+					variables: getDashboardVariables(),
 				});
 
 				const isError = response.error;
@@ -144,6 +152,11 @@ function GridCardGraph({
 					errorMessage: (error as AxiosError).toString(),
 					loading: false,
 				}));
+			} finally {
+				setState((state) => ({
+					...state,
+					loading: false,
+				}));
 			}
 		})();
 	}, [widget, maxTime, minTime, globalSelectedInterval]);

frontend/src/container/GridGraphLayout/index.tsx

@@ -121,6 +121,7 @@ function GridGraph(props: Props): JSX.Element {
 						name: data.name,
 						tags: data.tags,
 						widgets: data.widgets,
+						variables: data.variables,
 						layout,
 					},
 					uuid: selectedDashboard.uuid,
@@ -157,6 +158,7 @@ function GridGraph(props: Props): JSX.Element {
 			data.name,
 			data.tags,
 			data.title,
+			data.variables,
 			data.widgets,
 			dispatch,
 			saveLayoutPermission,

frontend/src/container/GridGraphLayout/utils.ts

@@ -27,6 +27,7 @@ export const UpdateDashboard = async ({
 			description: data.description,
 			name: data.name,
 			tags: data.tags,
+			variables: data.variables,
 			widgets: [
 				...(data.widgets || []),
 				{

frontend/src/container/ListOfDashboard/SearchFilter/__tests__/utils.test.ts

@@ -12,6 +12,7 @@ describe('executeSearchQueries', () => {
 		updated_at: '',
 		data: {
 			title: 'first dashboard',
+			variables: {},
 		},
 	};
 	const secondDashboard: Dashboard = {
@@ -21,6 +22,7 @@ describe('executeSearchQueries', () => {
 		updated_at: '',
 		data: {
 			title: 'second dashboard',
+			variables: {},
 		},
 	};
 	const thirdDashboard: Dashboard = {
@@ -30,6 +32,7 @@ describe('executeSearchQueries', () => {
 		updated_at: '',
 		data: {
 			title: 'third dashboard (with special characters +?\\)',
+			variables: {},
 		},
 	};
 	const dashboards = [firstDashboard, secondDashboard, thirdDashboard];

frontend/src/container/NewDashboard/DashboardSettings/General/index.tsx

@@ -0,0 +1,112 @@
+import { SaveOutlined } from '@ant-design/icons';
+import { Col, Divider, Input, Space, Typography } from 'antd';
+import AddTags from 'container/NewDashboard/DashboardSettings/General/AddTags';
+import React, { useCallback, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { connect, useSelector } from 'react-redux';
+import { bindActionCreators, Dispatch } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
+import {
+	UpdateDashboardTitleDescriptionTags,
+	UpdateDashboardTitleDescriptionTagsProps,
+} from 'store/actions';
+import { AppState } from 'store/reducers';
+import AppActions from 'types/actions';
+import DashboardReducer from 'types/reducer/dashboards';
+
+import { Button } from './styles';
+
+function GeneralDashboardSettings({
+	updateDashboardTitleDescriptionTags,
+}: DescriptionOfDashboardProps): JSX.Element {
+	const { dashboards } = useSelector<AppState, DashboardReducer>(
+		(state) => state.dashboards,
+	);
+
+	const [selectedDashboard] = dashboards;
+	const selectedData = selectedDashboard.data;
+	const { title } = selectedData;
+	const { tags } = selectedData;
+	const { description } = selectedData;
+
+	const [updatedTitle, setUpdatedTitle] = useState<string>(title);
+	const [updatedTags, setUpdatedTags] = useState<string[]>(tags || []);
+	const [updatedDescription, setUpdatedDescription] = useState(
+		description || '',
+	);
+
+	const { t } = useTranslation('common');
+
+	const onSaveHandler = useCallback(() => {
+		const dashboard = selectedDashboard;
+		// @TODO need to update this function to take title,description,tags only
+		updateDashboardTitleDescriptionTags({
+			dashboard: {
+				...dashboard,
+				data: {
+					...dashboard.data,
+					description: updatedDescription,
+					tags: updatedTags,
+					title: updatedTitle,
+				},
+			},
+		});
+	}, [
+		updatedTitle,
+		updatedTags,
+		updatedDescription,
+		selectedDashboard,
+		updateDashboardTitleDescriptionTags,
+	]);
+
+	return (
+		<Col>
+			<Space direction="vertical" style={{ width: '100%' }}>
+				<div>
+					<Typography style={{ marginBottom: '0.5rem' }}>Name</Typography>
+					<Input
+						value={updatedTitle}
+						onChange={(e): void => setUpdatedTitle(e.target.value)}
+					/>
+				</div>
+
+				<div>
+					<Typography style={{ marginBottom: '0.5rem' }}>Description</Typography>
+					<Input.TextArea
+						value={updatedDescription}
+						onChange={(e): void => setUpdatedDescription(e.target.value)}
+					/>
+				</div>
+				<div>
+					<Typography style={{ marginBottom: '0.5rem' }}>Tags</Typography>
+					<AddTags tags={updatedTags} setTags={setUpdatedTags} />
+				</div>
+				<div>
+					<Divider />
+					<Button icon={<SaveOutlined />} onClick={onSaveHandler} type="primary">
+						{t('save')}
+					</Button>
+				</div>
+			</Space>
+		</Col>
+	);
+}
+
+interface DispatchProps {
+	updateDashboardTitleDescriptionTags: (
+		props: UpdateDashboardTitleDescriptionTagsProps,
+	) => (dispatch: Dispatch<AppActions>) => void;
+}
+
+const mapDispatchToProps = (
+	dispatch: ThunkDispatch<unknown, unknown, AppActions>,
+): DispatchProps => ({
+	updateDashboardTitleDescriptionTags: bindActionCreators(
+		UpdateDashboardTitleDescriptionTags,
+		dispatch,
+	),
+});
+
+type DescriptionOfDashboardProps = DispatchProps;
+
+export default connect(null, mapDispatchToProps)(GeneralDashboardSettings);

frontend/src/container/NewDashboard/DashboardSettings/General/styles.ts

@@ -0,0 +1,20 @@
+import { Button as ButtonComponent, Drawer } from 'antd';
+import styled from 'styled-components';
+
+export const Container = styled.div`
+	margin-top: 0.5rem;
+`;
+
+export const Button = styled(ButtonComponent)`
+	&&& {
+		display: flex;
+		align-items: center;
+	}
+`;
+
+export const DrawerContainer = styled(Drawer)`
+	.ant-drawer-header {
+		padding: 0;
+		border: none;
+	}
+`;