Merge branch 'main' into fix-anomaly

SigNoz · Jan 29, 2025 · 89b34ce · 89b34ce
2 parents df813c5 + 42a5d71
commit 89b34ce
Show file tree

Hide file tree

Showing 74 changed files with 4,929 additions and 117 deletions.
diff --git a/frontend/package.json b/frontend/package.json
@@ -44,6 +44,7 @@
 		"@sentry/webpack-plugin": "2.22.6",
 		"@signozhq/design-tokens": "1.1.4",
 		"@tanstack/react-table": "8.20.6",
+		"@tanstack/react-virtual": "3.11.2",
 		"@uiw/react-md-editor": "3.23.5",
 		"@visx/group": "3.3.0",
 		"@visx/shape": "3.5.0",

diff --git a/frontend/public/Icons/construction.svg b/frontend/public/Icons/construction.svg
diff --git a/frontend/public/Icons/no-data.svg b/frontend/public/Icons/no-data.svg
diff --git a/frontend/src/AppRoutes/pageComponents.ts b/frontend/src/AppRoutes/pageComponents.ts
@@ -43,7 +43,10 @@ export const TraceFilter = Loadable(
 );
 
 export const TraceDetail = Loadable(
-	() => import(/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetail'),
+	() =>
+		import(
+			/* webpackChunkName: "TraceDetail Page" */ 'pages/TraceDetailV2/index'
+		),
 );
 
 export const UsageExplorerPage = Loadable(

diff --git a/frontend/src/api/trace/getTraceFlamegraph.tsx b/frontend/src/api/trace/getTraceFlamegraph.tsx
@@ -0,0 +1,27 @@
+import { ApiV2Instance as axios } from 'api';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceFlamegraphPayloadProps,
+	GetTraceFlamegraphSuccessResponse,
+} from 'types/api/trace/getTraceFlamegraph';
+
+const getTraceFlamegraph = async (
+	props: GetTraceFlamegraphPayloadProps,
+): Promise<
+	SuccessResponse<GetTraceFlamegraphSuccessResponse> | ErrorResponse
+> => {
+	const response = await axios.post<GetTraceFlamegraphSuccessResponse>(
+		`/traces/flamegraph/${props.traceId}`,
+		omit(props, 'traceId'),
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: response.data,
+	};
+};
+
+export default getTraceFlamegraph;
diff --git a/frontend/src/api/trace/getTraceV2.tsx b/frontend/src/api/trace/getTraceV2.tsx
@@ -0,0 +1,35 @@
+import { ApiV2Instance as axios } from 'api';
+import { omit } from 'lodash-es';
+import { ErrorResponse, SuccessResponse } from 'types/api';
+import {
+	GetTraceV2PayloadProps,
+	GetTraceV2SuccessResponse,
+} from 'types/api/trace/getTraceV2';
+
+const getTraceV2 = async (
+	props: GetTraceV2PayloadProps,
+): Promise<SuccessResponse<GetTraceV2SuccessResponse> | ErrorResponse> => {
+	let uncollapsedSpans = [...props.uncollapsedSpans];
+	if (!props.isSelectedSpanIDUnCollapsed) {
+		uncollapsedSpans = uncollapsedSpans.filter(
+			(node) => node !== props.selectedSpanId,
+		);
+	}
+	const postData: GetTraceV2PayloadProps = {
+		...props,
+		uncollapsedSpans,
+	};
+	const response = await axios.post<GetTraceV2SuccessResponse>(
+		`/traces/waterfall/${props.traceId}`,
+		omit(postData, 'traceId'),
+	);
+
+	return {
+		statusCode: 200,
+		error: null,
+		message: 'Success',
+		payload: response.data,
+	};
+};
+
+export default getTraceV2;
diff --git a/frontend/src/assets/CustomIcons/EmptyQuickFilterIcon.tsx b/frontend/src/assets/CustomIcons/EmptyQuickFilterIcon.tsx
@@ -0,0 +1,90 @@
+interface EmptyQuickFilterIconProps {
+	width?: number;
+	height?: number;
+	className?: string;
+}
+
+function EmptyQuickFilterIcon({
+	width = 32,
+	height = 32,
+	className,
+}: EmptyQuickFilterIconProps): JSX.Element {
+	return (
+		<svg
+			width={width}
+			height={height}
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+			className={className}
+		>
+			<path
+				d="M17.948 6.906h-6.62V6.24h6.62v.667ZM17.948 10.293h-6.62v-.667h6.62v.667Z"
+				fill="#616161"
+			/>
+			<path
+				d="M16.175 29.403H13.62V3.442s.238-.554 1.278-.554 1.278.554 1.278.554v25.96h-.002Z"
+				fill="#9E9E9E"
+			/>
+			<path
+				d="M15.52 2.971v20.974H13.62v1.91c.323.001.614.04.876.097a1.3 1.3 0 0 1 1.024 1.269v2.182h.656V3.442c-.002 0-.14-.318-.658-.471Z"
+				fill="#757575"
+			/>
+			<path
+				d="M22.363 2.737a5.382 5.382 0 0 0-5.382 5.402 5.365 5.365 0 0 0 5.382 5.382 5.378 5.378 0 0 0 5.382-5.382c0-2.975-2.407-5.402-5.382-5.402Z"
+				fill="#2196F3"
+			/>
+			<path
+				d="M24.714 4.749c-.338-.085-1.01-.174-2.349-.174-1.337 0-2.01.087-2.348.174-.2.05-.87.328-.87 1.077v4.618c0 .253.205.46.46.46h.17v.51c0 .15.12.27.268.27h.545c.149 0 .269-.12.269-.27v-.51h3.008v.51c0 .15.12.27.27.27h.544c.149 0 .269-.12.269-.27v-.51h.173a.46.46 0 0 0 .46-.46V5.826c0-.717-.669-1.029-.869-1.077Zm-3.802.366c0-.113.091-.204.205-.204h2.493c.113 0 .204.09.204.204v.362a.204.204 0 0 1-.204.205h-2.493a.204.204 0 0 1-.205-.205v-.362Zm.042 4.864a.138.138 0 0 1-.137.138h-.55a.469.469 0 0 1-.468-.469v-.246c0-.076.062-.138.138-.138h.548c.258 0 .47.209.47.469v.246Zm3.973-.33a.469.469 0 0 1-.468.468h-.55a.138.138 0 0 1-.137-.138v-.246c0-.258.209-.47.469-.47h.549c.075 0 .137.063.137.139v.246Zm.125-2.007c0 .297-.645.817-2.689.817-2.046 0-2.689-.482-2.689-.817V6.277c0-.089.09-.31.311-.31h4.791c.223 0 .276.224.276.31v1.365Z"
+				fill="#fff"
+			/>
+			<path
+				d="M18.861 24.652h-7.926a.506.506 0 0 1-.507-.507V14.99c0-.28.227-.507.507-.507h7.924c.28 0 .507.227.507.507v9.155c0 .28-.227.507-.505.507Z"
+				fill="#F5F5F5"
+			/>
+			<path
+				opacity=".8"
+				d="M18.006 23.139H11.79l-.017-7.236h6.217l.016 7.236Z"
+				fill="#82AEC0"
+			/>
+			<path d="M14.66 23.234v-7.33h.444v7.33h-.445Z" fill="#F5F5F5" />
+			<path d="M14.66 15.903h-2.887v.605h2.886v-.605Z" fill="#616161" />
+			<path
+				d="M18.03 21.878h-6.264v-.222h6.264v.223ZM18.03 20.412h-6.264v-.222h6.264v.222ZM17.99 18.945h-6.217v-.222h6.217v.222ZM17.99 17.481h-6.224v-.222h6.224v.222Z"
+				fill="#F5F5F5"
+			/>
+			<path
+				d="M17.988 18.534H15.1v.605h2.887v-.605ZM14.672 19.999h-2.877v.604h2.877V20Z"
+				fill="#616161"
+			/>
+			<path
+				d="M10.935 14.817a.173.173 0 0 0-.173.173v9.155c0 .096.077.174.173.174h7.926a.173.173 0 0 0 .171-.174V14.99a.173.173 0 0 0-.173-.173h-7.924Zm-.84.173a.84.84 0 0 1 .84-.84h7.924a.84.84 0 0 1 .84.84v9.155a.84.84 0 0 1-.838.84h-7.926a.84.84 0 0 1-.84-.84V14.99Z"
+				fill="#9E9E9E"
+			/>
+			<path
+				d="M10.968 24.323c-.344.031-.344-.195-.344-.258V15.1c0-.251.204-.455.455-.455h7.693c.21 0 .305.126.262.384 0 0-.026-.165-.226-.165h-7.726a.237.237 0 0 0-.236.236v8.968c0 .21.122.256.122.256Z"
+				fill="#757575"
+			/>
+			<path d="M12.268 4.933H4.695v6.577h7.573V4.933Z" fill="#FFCA28" />
+			<path
+				d="M11.846 4.933c.233 0 .422.189.422.422v5.733a.422.422 0 0 1-.422.422H5.12a.422.422 0 0 1-.423-.422V5.355c0-.233.19-.422.423-.422h6.726Zm0-.445H5.12a.868.868 0 0 0-.867.867v5.733c0 .478.389.867.867.867h6.726a.868.868 0 0 0 .867-.867V5.355a.866.866 0 0 0-.867-.867Z"
+				fill="#9E9E9E"
+			/>
+			<path
+				d="M12.27 7.308H4.696v-.444h7.575v.444ZM12.27 9.579H4.696v-.444h7.575v.444Z"
+				fill="#FFFDE7"
+			/>
+			<path
+				d="M7.066 5.664H5.162v.502h1.904v-.502ZM6.597 10.27H5.162v.503h1.435v-.502ZM11.648 10.27h-1.435v.503h1.435v-.502ZM11.648 5.664h-1.435v.502h1.435v-.502ZM10.302 7.968h-.827v.502h.827v-.502ZM11.648 7.968h-.826v.502h.826v-.502ZM7.802 7.968h-2.64v.502h2.64v-.502Z"
+				fill="#757575"
+			/>
+		</svg>
+	);
+}
+
+EmptyQuickFilterIcon.defaultProps = {
+	width: 32,
+	height: 32,
+	className: '',
+};
+
+export default EmptyQuickFilterIcon;
diff --git a/frontend/src/assets/TraceDetail/Flamegraph.tsx b/frontend/src/assets/TraceDetail/Flamegraph.tsx
@@ -0,0 +1,25 @@
+import { Color } from '@signozhq/design-tokens';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+
+function FlamegraphImg(): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+	return (
+		<svg
+			width="14"
+			height="14"
+			viewBox="0 0 24 24"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M8 3c1 3 2.5 3.5 3.5 4.5A5 5 0 0113 11a5 5 0 11-10 0c0-.3 0-.6.1-.9a2 2 0 103.3-2C4 5.5 7 3 8 3zM21 4h-8M20 14.5h-3M20 9.5h-3M21 20H4"
+				stroke={isDarkMode ? Color.BG_VANILLA_100 : Color.BG_INK_500}
+				strokeWidth="2"
+				strokeLinecap="round"
+				strokeLinejoin="round"
+			/>
+		</svg>
+	);
+}
+
+export default FlamegraphImg;
diff --git a/frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss b/frontend/src/components/DetailsDrawer/DetailsDrawer.styles.scss
@@ -0,0 +1,134 @@
+.details-drawer {
+	.ant-drawer-wrapper-body {
+		border-left: 1px solid var(--bg-slate-500);
+	}
+	.ant-drawer-header {
+		background: var(--bg-ink-400);
+		border-bottom: 1px solid var(--bg-slate-500);
+
+		.ant-drawer-header-title {
+			display: flex;
+			align-items: center;
+
+			.ant-drawer-close {
+				margin-inline-end: 0px;
+				padding: 0px;
+				padding-right: 16px;
+				border-right: 1px solid var(--bg-slate-500);
+			}
+
+			.ant-drawer-title {
+				padding-left: 16px;
+				color: var(--bg-vanilla-400);
+				font-family: Inter;
+				font-size: 14px;
+				font-style: normal;
+				font-weight: 400;
+				line-height: 20px; /* 142.857% */
+				letter-spacing: -0.07px;
+			}
+		}
+	}
+	.ant-drawer-body {
+		padding: 16px;
+		background: var(--bg-ink-400);
+
+		&::-webkit-scrollbar {
+			width: 0.1rem;
+		}
+	}
+
+	.details-drawer-tabs {
+		margin-top: 32px;
+
+		.ant-tabs-tab {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			width: 114px;
+			height: 32px;
+			flex-shrink: 0;
+			padding: 7px 20px;
+			border-radius: 2px 0px 0px 2px;
+			border: 1px solid var(--bg-slate-400);
+			background: var(--bg-ink-400);
+			box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
+
+			color: #fff;
+			font-family: Inter;
+			font-size: 12px;
+			font-style: normal;
+			font-weight: 400;
+			line-height: 18px; /* 150% */
+			letter-spacing: -0.06px;
+
+			.ant-btn {
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				padding: 0px;
+			}
+
+			.ant-btn:hover {
+				background: unset;
+			}
+		}
+
+		.ant-tabs-tab-active {
+			background: var(--bg-slate-400);
+		}
+
+		.ant-tabs-tab + .ant-tabs-tab {
+			margin-left: 0px;
+		}
+
+		.ant-tabs-nav::before {
+			border-bottom: 0px;
+		}
+
+		.ant-tabs-ink-bar {
+			background: none;
+		}
+	}
+}
+
+.lightMode {
+	.details-drawer {
+		.ant-drawer-wrapper-body {
+			border-left: 1px solid var(--bg-vanilla-300);
+		}
+		.ant-drawer-header {
+			background: var(--bg-vanilla-200);
+			border-bottom: 1px solid var(--bg-vanilla-300);
+
+			.ant-drawer-header-title {
+				.ant-drawer-close {
+					border-right: 1px solid var(--bg-vanilla-300);
+				}
+
+				.ant-drawer-title {
+					color: var(--bg-ink-400);
+				}
+			}
+		}
+		.ant-drawer-body {
+			background: var(--bg-vanilla-200);
+		}
+
+		.details-drawer-tabs {
+			.ant-tabs-tab {
+				border: 1px solid var(--bg-vanilla-300);
+				background: var(--bg-vanilla-300);
+				color: var(--bg-ink-400);
+			}
+
+			.ant-tabs-tab-active {
+				background: var(--bg-vanilla-200);
+			}
+
+			.ant-tabs-tab + .ant-tabs-tab {
+				border-left: none;
+			}
+		}
+	}
+}