fix: tsc fixes

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.borderColor = item?.strokeStyle;
+				boxSpan.style.background = `${item.strokeStyle}` || `${colors[0]}`;
+				boxSpan.style.borderColor = `${item?.strokeStyle}`;
 				boxSpan.style.borderWidth = `${item.lineWidth}px`;
 				boxSpan.style.display = 'inline-block';
 				boxSpan.style.minHeight = '20px';

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 =>
-	props.styledclass;
+const styledClass = (props: IStyledClass): FlattenSimpleInterpolation | null =>
+	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)}
-	${cssProprty('flex', flex)}
+	${cssProperty('flex-direction', flexDirection)}
+	${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)}
-	${cssProprty('padding', padding)}
+	${cssProperty('margin', margin)}
+	${cssProperty('padding', padding)}
 `;

frontend/src/components/Styled/types.ts

@@ -1,5 +1,5 @@
 import { FlattenSimpleInterpolation } from 'styled-components';
 
 export interface IStyledClass {
-	styledclass: FlattenSimpleInterpolation[];
+	styledclass?: FlattenSimpleInterpolation[];
 }

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/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/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(${
-								TimelineHSpacing +
+							transform={`translate(${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;
-	globalTraceMetadata: TMetaDataType;
+	localTraceMetaData: ITraceMetaData;
+	globalTraceMetadata: ITraceMetaData;
 }): {
 	baseInterval: number;
 	baseSpread: number;

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/index.tsx

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

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/tsconfig.json

@@ -19,7 +19,8 @@
 		"noEmit": true,
 		"baseUrl": "./src",
 		"downlevelIteration": true,
-		"plugins": [{ "name": "typescript-plugin-css-modules" }]
+		"plugins": [{ "name": "typescript-plugin-css-modules" }],
+		"suppressImplicitAnyIndexErrors": true
 	},
 	"exclude": ["node_modules"],
 	"include": ["./src"]