feat: signoz ui color hex support is added (#2560)

frontend/src/lib/__fixtures__/getRandomColor.ts

@@ -0,0 +1,50 @@
+import { themeColors } from 'constants/theme';
+import { SIGNOZ_UI_COLOR_HEX } from 'lib/getRandomColor';
+import { Span } from 'types/api/trace/getTraceItem';
+
+const spans: Span[] = [
+	[
+		1,
+		'span1',
+		'trace1',
+		'serviceA',
+		'op1',
+		'100',
+		'200',
+		[SIGNOZ_UI_COLOR_HEX],
+		[themeColors.chartcolors.turquoise],
+		[''],
+		[''],
+		false,
+	],
+	[
+		2,
+		'span2',
+		'trace2',
+		'serviceB',
+		'op2',
+		'200',
+		'300',
+		[SIGNOZ_UI_COLOR_HEX],
+		[themeColors.chartcolors.turquoise],
+		[''],
+		[''],
+		false,
+	],
+	[
+		3,
+		'span3',
+		'trace3',
+		'serviceC',
+		'op3',
+		'300',
+		'400',
+		[],
+		[],
+		[''],
+		[''],
+		false,
+	],
+];
+
+export default spans;

frontend/src/lib/getRandomColor.test.ts

@@ -0,0 +1,29 @@
+import { themeColors } from 'constants/theme';
+import { Span } from 'types/api/trace/getTraceItem';
+
+import spans from './__fixtures__/getRandomColor';
+import { colors, spanServiceNameToColorMapping } from './getRandomColor';
+
+describe('spanServiceNameToColorMapping', () => {
+	test('should map span services to colors', () => {
+		const expectedServiceToColorMap = {
+			serviceA: themeColors.chartcolors.turquoise,
+			serviceB: themeColors.chartcolors.turquoise,
+			serviceC: colors[2], // 2 is because we have already used 0 and 1 in the above services,
+		};
+
+		const result = spanServiceNameToColorMapping(spans);
+
+		expect(result).toEqual(expectedServiceToColorMap);
+	});
+
+	test('should return an empty object when input is an empty array', () => {
+		const spans: Span[] = [];
+
+		const expectedServiceToColorMap = {};
+
+		const result = spanServiceNameToColorMapping(spans);
+
+		expect(result).toEqual(expectedServiceToColorMap);
+	});
+});

frontend/src/lib/getRandomColor.ts

@@ -13,17 +13,33 @@ const getRandomColor = (): string => {
 	return colors[index];
 };
 
+export const SIGNOZ_UI_COLOR_HEX = 'signoz_ui_color_hex';
+
 export const spanServiceNameToColorMapping = (
 	spans: Span[],
 ): { [key: string]: string } => {
-	const serviceNameSet = new Set();
+	const allServiceMap = new Map<string, string | undefined>();
+
 	spans.forEach((spanItem) => {
-		serviceNameSet.add(spanItem[3]);
+		const signozUiColorKeyIndex = spanItem[7].findIndex(
+			(span) => span === SIGNOZ_UI_COLOR_HEX,
+		);
+
+		allServiceMap.set(
+			spanItem[3],
+			signozUiColorKeyIndex === -1
+				? undefined
+				: spanItem[8][signozUiColorKeyIndex],
+		);
 	});
+
 	const serviceToColorMap: { [key: string]: string } = {};
-	Array.from(serviceNameSet).forEach((serviceName, idx) => {
-		serviceToColorMap[`${serviceName}`] = colors[idx % colors.length];
+
+	Array.from(allServiceMap).forEach(([serviceName, signozColor], idx) => {
+		serviceToColorMap[`${serviceName}`] =
+			signozColor || colors[idx % colors.length];
 	});
+
 	return serviceToColorMap;
 };