Merge pull request #914 from palash-signoz/tsc-fix

chore: tsc fix are updated over frontend

frontend/src/components/Graph/Plugin/Legend.ts

@@ -1,5 +1,6 @@
 import { Chart, ChartType, Plugin } from 'chart.js';
 import { colors } from 'lib/getRandomColor';
+import { get } from 'lodash-es';
 
 const getOrCreateLegendList = (
 	chart: Chart,
@@ -40,9 +41,20 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
 			}
 
 			// Reuse the built-in legendItems generator
-			const items = chart?.options?.plugins?.legend?.labels?.generateLabels(chart);
+			const items = get(chart, [
+				'options',
+				'plugins',
+				'legend',
+				'labels',
+				'generateLabels',
+			])
+				? get(chart, ['options', 'plugins', 'legend', 'labels', 'generateLabels'])(
+						chart,
+				  )
+				: null;
 
-			items?.forEach((item, index) => {
+			// eslint-disable-next-line @typescript-eslint/no-explicit-any
+			items?.forEach((item: Record<any, any>, index: number) => {
 				const li = document.createElement('li');
 				li.style.alignItems = 'center';
 				li.style.cursor = 'pointer';
@@ -66,8 +78,8 @@ export const legend = (id: string, isLonger: boolean): Plugin<ChartType> => {
 
 				// Color box
 				const boxSpan = document.createElement('span');
-				boxSpan.style.background = item.strokeStyle || colors[0];
+				boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`;
-				boxSpan.style.borderColor = item?.strokeStyle;
+				boxSpan.style.borderColor = `${item?.strokeStyle}`;
 				boxSpan.style.borderWidth = `${item.lineWidth}px`;
 				boxSpan.style.display = 'inline-block';
 				boxSpan.style.minHeight = '20px';

frontend/src/components/NotFound/NotFound.test.tsx

@@ -1,3 +1,4 @@
+import { expect } from '@jest/globals';
 import { render } from '@testing-library/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';

frontend/src/components/Styled/index.ts

@@ -6,8 +6,8 @@ import styled, { FlattenSimpleInterpolation } from 'styled-components';
 
 import { IStyledClass } from './types';
 
-const styledClass = (props: IStyledClass): FlattenSimpleInterpolation =>
+const styledClass = (props: IStyledClass): FlattenSimpleInterpolation | null =>
-	props.styledclass;
+	props.styledclass || null;
 
 type TStyledCol = AntD.ColProps & IStyledClass;
 const StyledCol = styled(AntD.Col)<TStyledCol>`

frontend/src/components/Styled/styles.ts

@@ -1,6 +1,7 @@
 import { css, FlattenSimpleInterpolation } from 'styled-components';
 
-const cssProprty = (key: string, value): FlattenSimpleInterpolation =>
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const cssProperty = (key: any, value: any): FlattenSimpleInterpolation =>
 	key &&
 	value &&
 	css`
@@ -15,8 +16,8 @@ export const Flex = ({
 	flexDirection,
 	flex,
 }: IFlexProps): FlattenSimpleInterpolation => css`
-	${cssProprty('flex-direction', flexDirection)}
+	${cssProperty('flex-direction', flexDirection)}
-	${cssProprty('flex', flex)}
+	${cssProperty('flex', flex)}
 `;
 
 interface IDisplayProps {
@@ -25,7 +26,7 @@ interface IDisplayProps {
 export const Display = ({
 	display,
 }: IDisplayProps): FlattenSimpleInterpolation => css`
-	${cssProprty('display', display)}
+	${cssProperty('display', display)}
 `;
 
 interface ISpacingProps {
@@ -36,6 +37,6 @@ export const Spacing = ({
 	margin,
 	padding,
 }: ISpacingProps): FlattenSimpleInterpolation => css`
-	${cssProprty('margin', margin)}
+	${cssProperty('margin', margin)}
-	${cssProprty('padding', padding)}
+	${cssProperty('padding', padding)}
 `;

frontend/src/container/AllAlertChannels/Delete.tsx

@@ -30,7 +30,7 @@ function Delete({ notifications, setChannels, id }: DeleteProps): JSX.Element {
 		} catch (error) {
 			notifications.error({
 				message: 'Error',
-				description: error.toString() || 'Something went wrong',
+				description: error instanceof Error ? error.toString() : 'Something went wrong',
 			});
 			setLoading(false);
 		}

frontend/src/container/GantChart/SpanLength/index.tsx

@@ -33,7 +33,7 @@ function SpanLength(props: SpanLengthProps): JSX.Element {
 				leftOffset={leftOffset}
 				width={width}
 			/>
-			<SpanText leftOffset={leftOffset}>{`${toFixed(
+			<SpanText isDarkMode={isDarkMode} leftOffset={leftOffset}>{`${toFixed(
 				resolveTimeFromInterval(inMsCount, intervalUnit),
 				2,
 			)} ${intervalUnit.name}`}</SpanText>

frontend/src/container/GridGraphLayout/Graph/FullView/EmptyGraph.tsx

@@ -60,6 +60,7 @@ function EmptyGraph({
 
 	return (
 		<Graph
+			name=""
 			{...{
 				type: 'line',
 				onClickHandler,

frontend/src/container/GridGraphLayout/index.tsx

@@ -154,7 +154,8 @@ function GridGraph(): JSX.Element {
 					});
 				} catch (error) {
 					notification.error({
-						message: error.toString() || 'Something went wrong',
+						message:
+							error instanceof Error ? error.toString() : 'Something went wrong',
 					});
 				}
 			}

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

@@ -2,8 +2,8 @@ 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 React, { useCallback, useMemo, useState } from 'react';
-import { connect } from 'react-redux';
+import { connect, useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import { bindActionCreators, Dispatch } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -12,8 +12,11 @@ import {
 	UpdateQuery,
 	UpdateQueryProps,
 } from 'store/actions/dashboard/updateQuery';
+import { AppState } from 'store/reducers';
 import AppActions from 'types/actions';
 import { DeleteQueryProps } from 'types/actions/dashboard';
+import { Widgets } from 'types/api/dashboard/getAll';
+import DashboardReducer from 'types/reducer/dashboards';
 
 import {
 	ButtonContainer,
@@ -32,10 +35,27 @@ function Query({
 	const [promqlQuery, setPromqlQuery] = useState(preQuery);
 	const [legendFormat, setLegendFormat] = useState(preLegend);
 	const { search } = useLocation();
+	const { dashboards } = useSelector<AppState, DashboardReducer>(
+		(state) => state.dashboards,
+	);
+
+	const [selectedDashboards] = dashboards;
+	const { widgets } = selectedDashboards.data;
 
 	const query = new URLSearchParams(search);
 	const widgetId = query.get('widgetId') || '';
 
+	const urlQuery = useMemo(() => {
+		return new URLSearchParams(search);
+	}, [search]);
+
+	const getWidget = useCallback(() => {
+		const widgetId = urlQuery.get('widgetId');
+		return widgets?.find((e) => e.id === widgetId);
+	}, [widgets, urlQuery]);
+
+	const selectedWidget = getWidget() as Widgets;
+
 	const onChangeHandler = useCallback(
 		(setFunc: React.Dispatch<React.SetStateAction<string>>, value: string) => {
 			setFunc(value);
@@ -49,6 +69,7 @@ function Query({
 			legend: legendFormat,
 			query: promqlQuery,
 			widgetId,
+			yAxisUnit: selectedWidget.yAxisUnit,
 		});
 	};
 

frontend/src/container/NewWidget/RightContainer/YAxisUnitSelector.tsx

@@ -19,11 +19,11 @@ function YAxisUnitSelector({
 	fieldLabel,
 }: {
 	defaultValue: string;
-	onSelect: (e: string | undefined) => void;
+	onSelect: React.Dispatch<React.SetStateAction<string>>;
 	fieldLabel: string;
 }): JSX.Element {
 	const onSelectHandler = (selectedValue: string): void => {
-		onSelect(findCategoryByName(selectedValue)?.id);
+		onSelect(findCategoryByName(selectedValue)?.id || '');
 	};
 	const options = flattenedCategories.map((options) => ({
 		value: options.name,

frontend/src/container/Timeline/index.tsx

@@ -1,4 +1,5 @@
 import { StyledDiv } from 'components/Styled';
+import { ITraceMetaData } from 'container/GantChart';
 import { IIntervalUnit, INTERVAL_UNITS } from 'container/TraceDetail/utils';
 import useThemeMode from 'hooks/useThemeMode';
 import React, { useEffect, useRef, useState } from 'react';
@@ -74,10 +75,9 @@ function Timeline({
 				{intervals &&
 					intervals.map((interval, index) => (
 						<TimelineInterval
-							transform={`translate(${
+							transform={`translate(${TimelineHSpacing +
-								TimelineHSpacing +
 								(interval.percentage * (width - 2 * TimelineHSpacing)) / 100
-							},0)`}
+								},0)`}
 							key={`${interval.label + interval.percentage + index}`}
 						>
 							<text y={13} fill={isDarkMode ? 'white' : 'black'}>
@@ -104,7 +104,7 @@ interface TimelineProps {
 		totalSpans: number;
 		levels: number;
 	};
-	globalTraceMetadata: Record<string, number>;
+	globalTraceMetadata: ITraceMetaData;
 	setIntervalUnit: React.Dispatch<React.SetStateAction<IIntervalUnit>>;
 }
 

frontend/src/container/Timeline/utils.ts

@@ -1,3 +1,4 @@
+import { ITraceMetaData } from 'container/GantChart';
 import {
 	IIntervalUnit,
 	resolveTimeFromInterval,
@@ -7,14 +8,12 @@ import { toFixed } from 'utils/toFixed';
 
 import { Interval } from './types';
 
-type TMetaDataType = Record<string, never>;
-
 export const getIntervalSpread = ({
 	localTraceMetaData,
 	globalTraceMetadata,
 }: {
-	localTraceMetaData: TMetaDataType;
+	localTraceMetaData: ITraceMetaData;
-	globalTraceMetadata: TMetaDataType;
+	globalTraceMetadata: ITraceMetaData;
 }): {
 	baseInterval: number;
 	baseSpread: number;

frontend/src/container/Trace/Graph/config.ts

@@ -69,6 +69,8 @@ export const getChartDataforGroupBy = (
 	const allGroupBy = Object.keys(items).map((e) => items[e].groupBy);
 
 	keys(allGroupBy).forEach((e: string): void => {
+		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+		// @ts-ignore
 		const { length } = keys(allGroupBy[e]);
 
 		if (length >= max) {

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

@@ -43,7 +43,7 @@ function TraceGraph(): JSX.Element {
 	}
 
 	return (
-		<Container ref={ref}>
+		<Container ref={ref as never}>
 			<Graph
 				animate={false}
 				data={ChartData}

frontend/src/container/TraceDetail/index.tsx

@@ -9,7 +9,7 @@ import {
 	StyledTypography,
 } from 'components/Styled';
 import * as StyledStyles from 'components/Styled/styles';
-import GanttChart from 'container/GantChart';
+import GanttChart, { ITraceMetaData } from 'container/GantChart';
 import { getNodeById } from 'container/GantChart/utils';
 import Timeline from 'container/Timeline';
 import TraceFlameGraph from 'container/TraceFlameGraph';
@@ -55,7 +55,7 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 		/* eslint-enable */
 	}, [treeData, spanServiceColors]);
 
-	const [globalTraceMetadata] = useState<Record<string, number>>({
+	const [globalTraceMetadata] = useState<ITraceMetaData>({
 		...traceMetaData,
 	});
 
@@ -129,7 +129,6 @@ function TraceDetail({ response }: TraceDetailProps): JSX.Element {
 						<Timeline
 							globalTraceMetadata={globalTraceMetadata}
 							traceMetaData={traceMetaData}
-							intervalUnit={intervalUnit}
 							setIntervalUnit={setIntervalUnit}
 						/>
 					</StyledCol>

frontend/src/container/TraceFlameGraph/__tests__/TraceFlameGraph.test.tsx

@@ -1,9 +1,42 @@
 import { expect } from '@jest/globals';
 import { render } from '@testing-library/react';
 import TraceFlameGraph from 'container/TraceFlameGraph';
-import React from 'react';
+import React, { useState } from 'react';
 
-test('loads and displays greeting', async () => {
+test('loads and displays greeting', () => {
-	const { asFragment } = render(<TraceFlameGraph />);
+	const onSpanHover = useState('');
+
+	const { asFragment } = render(
+		<TraceFlameGraph
+			{...{
+				hoveredSpanId: '',
+				intervalUnit: { multiplier: 0, name: 'm' },
+				onSpanHover: onSpanHover[1],
+				onSpanSelect: (): void => {},
+				selectedSpanId: '',
+				traceMetaData: {
+					globalEnd: 0,
+					globalStart: 0,
+					levels: 0,
+					spread: 0,
+					totalSpans: 0,
+				},
+				treeData: {
+					children: [],
+					id: '',
+					name: '',
+					serviceColour: '',
+					serviceName: '',
+					startTime: 0,
+					tags: [],
+					time: 0,
+					value: 0,
+					event: [],
+					hasError: false,
+					parent: undefined,
+				},
+			}}
+		/>,
+	);
 	expect(asFragment()).toMatchSnapshot();
 });

frontend/src/container/TraceFlameGraph/index.tsx

@@ -173,6 +173,8 @@ function TraceFlameGraph(props: {
 				onSpanSelect={onSpanSelect}
 				hoveredSpanId={hoveredSpanId}
 				selectedSpanId={selectedSpanId}
+				level={0}
+				parentLeftOffset={0}
 			/>
 		</TraceFlameGraphContainer>
 	);

frontend/src/hooks/useFetch.ts

@@ -56,7 +56,7 @@ function useFetch<PayloadProps, FunctionParams>(
 				loading: false,
 				success: false,
 				error: true,
-				errorMessage: error,
+				errorMessage: error as string,
 			});
 		}
 		return (): void => {

frontend/src/lib/__tests__/getStep.test.ts

@@ -1,3 +1,4 @@
+import { expect } from '@jest/globals';
 import dayjs from 'dayjs';
 import getStep, { DefaultStepSize } from 'lib/getStep';
 

frontend/src/modules/Usage/UsageExplorer.tsx

@@ -5,6 +5,7 @@ import { Select, Space } from 'antd';
 import Graph from 'components/Graph';
 import React, { useEffect, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
+import { withRouter } from 'react-router-dom';
 import { GetService, getUsageData, UsageDataItem } from 'store/actions';
 import { AppState } from 'store/reducers';
 import { GlobalTime } from 'types/actions/globalTime';
@@ -213,7 +214,9 @@ const mapStateToProps = (
 	};
 };
 
-export const UsageExplorer = connect(mapStateToProps, {
+export const UsageExplorer = withRouter(
-	getUsageData,
+	connect(mapStateToProps, {
-	getServicesList: GetService,
+		getUsageData,
-})(_UsageExplorer);
+		getServicesList: GetService,
+	})(_UsageExplorer),
+);

frontend/src/pages/DashboardWidget/index.tsx

@@ -74,7 +74,12 @@ function DashboardWidget({ getDashboard }: NewDashboardProps): JSX.Element {
 		);
 	}
 
-	return <NewWidget selectedGraph={selectedGraph} />;
+	return (
+		<NewWidget
+			yAxisUnit={selectedWidget.yAxisUnit}
+			selectedGraph={selectedGraph}
+		/>
+	);
 }
 
 export interface DashboardWidgetPageParams {

frontend/src/store/actions/dashboard/deleteDashboard.ts

@@ -31,7 +31,8 @@ export const DeleteDashboard = ({
 			dispatch({
 				type: 'DELETE_DASHBOARD_ERROR',
 				payload: {
-					errorMessage: error.toString() || 'Something went wrong',
+					errorMessage:
+						error instanceof Error ? error.toString() : 'Something went wrong',
 				},
 			});
 		}

frontend/src/store/actions/dashboard/getDashboard.ts

@@ -64,7 +64,8 @@ export const GetDashboard = ({
 			dispatch({
 				type: 'GET_DASHBOARD_ERROR',
 				payload: {
-					errorMessage: error.toString() || 'Something went wrong',
+					errorMessage:
+						error instanceof Error ? error.toString() : 'Something went wrong',
 				},
 			});
 		}

frontend/src/store/actions/dashboard/updateDashboardTitle.ts

@@ -42,7 +42,8 @@ export const UpdateDashboardTitleDescriptionTags = ({
 			dispatch({
 				type: 'UPDATE_TITLE_DESCRIPTION_TAGS_ERROR',
 				payload: {
-					errorMessage: error.toString() || 'Something went wrong',
+					errorMessage:
+						error instanceof Error ? error.toString() : 'Something went wrong',
 				},
 			});
 		}

frontend/src/store/actions/trace/selectTraceFilter.ts

@@ -46,6 +46,7 @@ export const SelectedTraceFilter = (props: {
 			traces.selectedTags,
 			traces.filter,
 			traces.isFilterExclude,
+			traces.userSelectedFilter,
 		);
 	};
 };