feat: added Messaging queue detail page (SigNoz#5690)

* feat: added Messaging queue detail page * feat: added MQDetails - tables - consumer, producer & network latency * feat: added MQConfigOption - with dummy responses * feat: configured query-range and autocomplete against the staging setup * feat: added queryparams and linked config options with graph * feat: added shareable link, cleanup code and connected details table with graph * feat: fixed comments * Messaging queue overview (SigNoz#5782) * feat: added messaging queue overview page * feat: added get-started links * feat: fixed comments * feat: messaging queue misc tasks (SigNoz#5785) * feat: added lightMode styles * feat: misc fix * feat: misc fix * feat: added customer tooltip info text * feat: removed reset btn until the funcitonality is clear * feat: fixed comments * feat: fixed comments and added onDragSelect * feat: added placeholder doc link for get-started for non-cloud
szobov · Aug 29, 2024 · 140533b · 140533b
1 parent 532f274
commit 140533b
Show file tree

Hide file tree

Showing 40 changed files with 1,893 additions and 6 deletions.
diff --git a/frontend/public/locales/en/titles.json b/frontend/public/locales/en/titles.json
@@ -49,5 +49,6 @@
 	"TRACES_SAVE_VIEWS": "SigNoz | Traces Saved Views",
 	"DEFAULT": "Open source Observability Platform | SigNoz",
 	"SHORTCUTS": "SigNoz | Shortcuts",
-	"INTEGRATIONS": "SigNoz | Integrations"
+	"INTEGRATIONS": "SigNoz | Integrations",
+	"MESSAGING_QUEUES": "SigNoz | Messaging Queues"
 }
diff --git a/frontend/src/AppRoutes/pageComponents.ts b/frontend/src/AppRoutes/pageComponents.ts
@@ -204,3 +204,15 @@ export const InstalledIntegrations = Loadable(
 			/* webpackChunkName: "InstalledIntegrations" */ 'pages/IntegrationsModulePage'
 		),
 );
+
+export const MessagingQueues = Loadable(
+	() =>
+		import(/* webpackChunkName: "MessagingQueues" */ 'pages/MessagingQueues'),
+);
+
+export const MQDetailPage = Loadable(
+	() =>
+		import(
+			/* webpackChunkName: "MQDetailPage" */ 'pages/MessagingQueues/MQDetailPage'
+		),
+);
diff --git a/frontend/src/AppRoutes/routes.ts b/frontend/src/AppRoutes/routes.ts
@@ -23,6 +23,8 @@ import {
 	LogsExplorer,
 	LogsIndexToFields,
 	LogsSaveViews,
+	MessagingQueues,
+	MQDetailPage,
 	MySettings,
 	NewDashboardPage,
 	OldLogsExplorer,
@@ -351,6 +353,20 @@ const routes: AppRoutes[] = [
 		isPrivate: true,
 		key: 'INTEGRATIONS',
 	},
+	{
+		path: ROUTES.MESSAGING_QUEUES,
+		exact: true,
+		component: MessagingQueues,
+		key: 'MESSAGING_QUEUES',
+		isPrivate: true,
+	},
+	{
+		path: ROUTES.MESSAGING_QUEUES_DETAIL,
+		exact: true,
+		component: MQDetailPage,
+		key: 'MESSAGING_QUEUES_DETAIL',
+		isPrivate: true,
+	},
 ];
 
 export const SUPPORT_ROUTE: AppRoutes = {

diff --git a/frontend/src/constants/query.ts b/frontend/src/constants/query.ts
@@ -32,4 +32,8 @@ export enum QueryParams {
 	relativeTime = 'relativeTime',
 	alertType = 'alertType',
 	ruleId = 'ruleId',
+	consumerGrp = 'consumerGrp',
+	topic = 'topic',
+	partition = 'partition',
+	selectedTimelineQuery = 'selectedTimelineQuery',
 }
diff --git a/frontend/src/constants/reactQueryKeys.ts b/frontend/src/constants/reactQueryKeys.ts
@@ -8,4 +8,5 @@ export const REACT_QUERY_KEY = {
 	GET_FEATURES_FLAGS: 'GET_FEATURES_FLAGS',
 	DELETE_DASHBOARD: 'DELETE_DASHBOARD',
 	LOGS_PIPELINE_PREVIEW: 'LOGS_PIPELINE_PREVIEW',
+	GET_CONSUMER_LAG_DETAILS: 'GET_CONSUMER_LAG_DETAILS',
 };
diff --git a/frontend/src/constants/routes.ts b/frontend/src/constants/routes.ts
@@ -54,6 +54,8 @@ const ROUTES = {
 	WORKSPACE_LOCKED: '/workspace-locked',
 	SHORTCUTS: '/shortcuts',
 	INTEGRATIONS: '/integrations',
+	MESSAGING_QUEUES: '/messaging-queues',
+	MESSAGING_QUEUES_DETAIL: '/messaging-queues/detail',
 } as const;
 
 export default ROUTES;
diff --git a/frontend/src/constants/shortcuts/globalShortcuts.ts b/frontend/src/constants/shortcuts/globalShortcuts.ts
@@ -9,6 +9,7 @@ export const GlobalShortcuts = {
 	NavigateToDashboards: 'd+shift',
 	NavigateToAlerts: 'a+shift',
 	NavigateToExceptions: 'e+shift',
+	NavigateToMessagingQueues: 'm+shift',
 };
 
 export const GlobalShortcutsName = {
@@ -19,6 +20,7 @@ export const GlobalShortcutsName = {
 	NavigateToDashboards: 'shift+d',
 	NavigateToAlerts: 'shift+a',
 	NavigateToExceptions: 'shift+e',
+	NavigateToMessagingQueues: 'shift+m',
 };
 
 export const GlobalShortcutsDescription = {
@@ -29,4 +31,5 @@ export const GlobalShortcutsDescription = {
 	NavigateToDashboards: 'Navigate to dashboards page',
 	NavigateToAlerts: 'Navigate to alerts page',
 	NavigateToExceptions: 'Navigate to Exceptions page',
+	NavigateToMessagingQueues: 'Navigate to Messaging Queues page',
 };
diff --git a/frontend/src/container/AppLayout/index.tsx b/frontend/src/container/AppLayout/index.tsx
@@ -241,6 +241,9 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 	const isTracesView = (): boolean =>
 		routeKey === 'TRACES_EXPLORER' || routeKey === 'TRACES_SAVE_VIEWS';
 
+	const isMessagingQueues = (): boolean =>
+		routeKey === 'MESSAGING_QUEUES' || routeKey === 'MESSAGING_QUEUES_DETAIL';
+
 	const isDashboardListView = (): boolean => routeKey === 'ALL_DASHBOARD';
 	const isDashboardView = (): boolean => {
 		/**
@@ -329,7 +332,8 @@ function AppLayout(props: AppLayoutProps): JSX.Element {
 											isTracesView() ||
 											isDashboardView() ||
 											isDashboardWidgetView() ||
-											isDashboardListView()
+											isDashboardListView() ||
+											isMessagingQueues()
 												? 0
 												: '0 1rem',
 									}}

diff --git a/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx b/frontend/src/container/GridCardLayout/GridCard/WidgetGraphComponent.tsx
@@ -47,6 +47,7 @@ function WidgetGraphComponent({
 	setRequestData,
 	onClickHandler,
 	onDragSelect,
+	customTooltipElement,
 }: WidgetGraphComponentProps): JSX.Element {
 	const [deleteModal, setDeleteModal] = useState(false);
 	const [hovered, setHovered] = useState(false);
@@ -335,6 +336,7 @@ function WidgetGraphComponent({
 						onClickHandler={onClickHandler}
 						onDragSelect={onDragSelect}
 						tableProcessedDataRef={tableProcessedDataRef}
+						customTooltipElement={customTooltipElement}
 					/>
 				</div>
 			)}

diff --git a/frontend/src/container/GridCardLayout/GridCard/index.tsx b/frontend/src/container/GridCardLayout/GridCard/index.tsx
@@ -33,6 +33,7 @@ function GridCardGraph({
 	version,
 	onClickHandler,
 	onDragSelect,
+	customTooltipElement,
 }: GridCardGraphProps): JSX.Element {
 	const dispatch = useDispatch();
 	const [errorMessage, setErrorMessage] = useState<string>();
@@ -215,6 +216,7 @@ function GridCardGraph({
 					setRequestData={setRequestData}
 					onClickHandler={onClickHandler}
 					onDragSelect={onDragSelect}
+					customTooltipElement={customTooltipElement}
 				/>
 			)}
 		</div>

diff --git a/frontend/src/container/GridCardLayout/GridCard/types.ts b/frontend/src/container/GridCardLayout/GridCard/types.ts
@@ -31,6 +31,7 @@ export interface WidgetGraphComponentProps {
 	setRequestData?: Dispatch<SetStateAction<GetQueryResultsProps>>;
 	onClickHandler?: OnClickPluginOpts['onClick'];
 	onDragSelect: (start: number, end: number) => void;
+	customTooltipElement?: HTMLDivElement;
 }
 
 export interface GridCardGraphProps {
@@ -42,6 +43,7 @@ export interface GridCardGraphProps {
 	variables?: Dashboard['data']['variables'];
 	version?: string;
 	onDragSelect: (start: number, end: number) => void;
+	customTooltipElement?: HTMLDivElement;
 }
 
 export interface GetGraphVisibilityStateOnLegendClickProps {

diff --git a/frontend/src/container/PanelWrapper/PanelWrapper.tsx b/frontend/src/container/PanelWrapper/PanelWrapper.tsx
@@ -15,6 +15,7 @@ function PanelWrapper({
 	onDragSelect,
 	selectedGraph,
 	tableProcessedDataRef,
+	customTooltipElement,
 }: PanelWrapperProps): JSX.Element {
 	const Component = PanelTypeVsPanelWrapper[
 		selectedGraph || widget.panelTypes
@@ -37,6 +38,7 @@ function PanelWrapper({
 			onDragSelect={onDragSelect}
 			selectedGraph={selectedGraph}
 			tableProcessedDataRef={tableProcessedDataRef}
+			customTooltipElement={customTooltipElement}
 		/>
 	);
 }

diff --git a/frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx b/frontend/src/container/PanelWrapper/UplotPanelWrapper.tsx
@@ -30,6 +30,7 @@ function UplotPanelWrapper({
 	onClickHandler,
 	onDragSelect,
 	selectedGraph,
+	customTooltipElement,
 }: PanelWrapperProps): JSX.Element {
 	const { toScrollWidgetId, setToScrollWidgetId } = useDashboard();
 	const isDarkMode = useIsDarkMode();
@@ -126,6 +127,7 @@ function UplotPanelWrapper({
 				stackBarChart: widget?.stackedBarChart,
 				hiddenGraph,
 				setHiddenGraph,
+				customTooltipElement,
 			}),
 		[
 			widget?.id,
@@ -147,6 +149,7 @@ function UplotPanelWrapper({
 			selectedGraph,
 			currentQuery,
 			hiddenGraph,
+			customTooltipElement,
 		],
 	);
 

diff --git a/frontend/src/container/PanelWrapper/panelWrapper.types.ts b/frontend/src/container/PanelWrapper/panelWrapper.types.ts
@@ -23,6 +23,7 @@ export type PanelWrapperProps = {
 	onDragSelect: (start: number, end: number) => void;
 	selectedGraph?: PANEL_TYPES;
 	tableProcessedDataRef?: React.MutableRefObject<RowData[]>;
+	customTooltipElement?: HTMLDivElement;
 };
 
 export type TooltipData = {

diff --git a/frontend/src/container/SideNav/SideNav.tsx b/frontend/src/container/SideNav/SideNav.tsx
@@ -347,6 +347,10 @@ function SideNav({
 			onClickHandler(ROUTES.ALL_DASHBOARD, null),
 		);
 
+		registerShortcut(GlobalShortcuts.NavigateToMessagingQueues, () =>
+			onClickHandler(ROUTES.MESSAGING_QUEUES, null),
+		);
+
 		registerShortcut(GlobalShortcuts.NavigateToAlerts, () =>
 			onClickHandler(ROUTES.LIST_ALL_ALERT, null),
 		);
@@ -362,6 +366,7 @@ function SideNav({
 			deregisterShortcut(GlobalShortcuts.NavigateToDashboards);
 			deregisterShortcut(GlobalShortcuts.NavigateToAlerts);
 			deregisterShortcut(GlobalShortcuts.NavigateToExceptions);
+			deregisterShortcut(GlobalShortcuts.NavigateToMessagingQueues);
 		};
 	}, [deregisterShortcut, onClickHandler, onCollapse, registerShortcut]);
 

diff --git a/frontend/src/container/SideNav/config.ts b/frontend/src/container/SideNav/config.ts
@@ -48,4 +48,6 @@ export const routeConfig: Record<string, QueryParams[]> = {
 	[ROUTES.TRACE_EXPLORER]: [QueryParams.resourceAttributes],
 	[ROUTES.LOGS_PIPELINES]: [QueryParams.resourceAttributes],
 	[ROUTES.WORKSPACE_LOCKED]: [QueryParams.resourceAttributes],
+	[ROUTES.MESSAGING_QUEUES]: [QueryParams.resourceAttributes],
+	[ROUTES.MESSAGING_QUEUES_DETAIL]: [QueryParams.resourceAttributes],
 };
diff --git a/frontend/src/container/SideNav/menuItems.tsx b/frontend/src/container/SideNav/menuItems.tsx
@@ -10,6 +10,7 @@ import {
 	FileKey2,
 	Layers2,
 	LayoutGrid,
+	ListMinus,
 	MessageSquare,
 	Receipt,
 	Route,
@@ -86,6 +87,11 @@ const menuItems: SidebarItem[] = [
 		label: 'Dashboards',
 		icon: <LayoutGrid size={16} />,
 	},
+	{
+		key: ROUTES.MESSAGING_QUEUES,
+		label: 'Messaging Queues',
+		icon: <ListMinus size={16} />,
+	},
 	{
 		key: ROUTES.LIST_ALL_ALERT,
 		label: 'Alerts',

diff --git a/frontend/src/container/TopNav/Breadcrumbs/index.tsx b/frontend/src/container/TopNav/Breadcrumbs/index.tsx
@@ -27,6 +27,7 @@ const breadcrumbNameMap: Record<string, string> = {
 	[ROUTES.BILLING]: 'Billing',
 	[ROUTES.SUPPORT]: 'Support',
 	[ROUTES.WORKSPACE_LOCKED]: 'Workspace Locked',
+	[ROUTES.MESSAGING_QUEUES]: 'Messaging Queues',
 };
 
 function ShowBreadcrumbs(props: RouteComponentProps): JSX.Element {

diff --git a/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts b/frontend/src/container/TopNav/DateTimeSelectionV2/config.ts
@@ -208,6 +208,8 @@ export const routesToSkip = [
 	ROUTES.DASHBOARD,
 	ROUTES.DASHBOARD_WIDGET,
 	ROUTES.SERVICE_TOP_LEVEL_OPERATIONS,
+	ROUTES.MESSAGING_QUEUES,
+	ROUTES.MESSAGING_QUEUES_DETAIL,
 ];
 
 export const routesToDisable = [ROUTES.LOGS_EXPLORER, ROUTES.LIVE_LOGS];

diff --git a/frontend/src/lib/uPlotLib/getUplotChartOptions.ts b/frontend/src/lib/uPlotLib/getUplotChartOptions.ts
@@ -53,6 +53,7 @@ export interface GetUPlotChartOptions {
 			[key: string]: boolean;
 		}>
 	>;
+	customTooltipElement?: HTMLDivElement;
 }
 
 /** the function converts series A , series B , series C to
@@ -154,6 +155,7 @@ export const getUPlotChartOptions = ({
 	stackBarChart: stackChart,
 	hiddenGraph,
 	setHiddenGraph,
+	customTooltipElement,
 }: GetUPlotChartOptions): uPlot.Options => {
 	const timeScaleProps = getXAxisScale(minTimeScale, maxTimeScale);
 
@@ -209,9 +211,16 @@ export const getUPlotChartOptions = ({
 			},
 		},
 		plugins: [
-			tooltipPlugin({ apiResponse, yAxisUnit, stackBarChart, isDarkMode }),
+			tooltipPlugin({
+				apiResponse,
+				yAxisUnit,
+				stackBarChart,
+				isDarkMode,
+				customTooltipElement,
+			}),
 			onClickPlugin({
 				onClick: onClickHandler,
+				apiResponse,
 			}),
 		],
 		hooks: {

diff --git a/frontend/src/lib/uPlotLib/plugins/onClickPlugin.ts b/frontend/src/lib/uPlotLib/plugins/onClickPlugin.ts
@@ -1,10 +1,16 @@
+import { MetricRangePayloadProps } from 'types/api/metrics/getQueryRange';
+
 export interface OnClickPluginOpts {
 	onClick: (
 		xValue: number,
 		yValue: number,
 		mouseX: number,
 		mouseY: number,
+		data?: {
+			[key: string]: string;
+		},
 	) => void;
+	apiResponse?: MetricRangePayloadProps;
 }
 
 function onClickPlugin(opts: OnClickPluginOpts): uPlot.Plugin {
@@ -22,9 +28,24 @@ function onClickPlugin(opts: OnClickPluginOpts): uPlot.Plugin {
 				const xValue = u.posToVal(event.offsetX, 'x');
 				const yValue = u.posToVal(event.offsetY, 'y');
 
-				opts.onClick(xValue, yValue, mouseX, mouseY);
-			};
+				let metric = {};
+				const { series } = u;
+				const apiResult = opts.apiResponse?.data?.result || [];
 
+				// this is to get the metric value of the focused series
+				if (Array.isArray(series) && series.length > 0) {
+					series.forEach((item, index) => {
+						// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+						// @ts-ignore
+						if (item?.show && item?._focus) {
+							const { metric: focusedMetric } = apiResult[index - 1] || [];
+							metric = focusedMetric;
+						}
+					});
+				}
+
+				opts.onClick(xValue, yValue, mouseX, mouseY, metric);
+			};
 			u.over.addEventListener('click', handleClick);
 		},
 		destroy: (u: uPlot) => {

diff --git a/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts b/frontend/src/lib/uPlotLib/plugins/tooltipPlugin.ts
@@ -222,6 +222,7 @@ type ToolTipPluginProps = {
 	isMergedSeries?: boolean;
 	stackBarChart?: boolean;
 	isDarkMode: boolean;
+	customTooltipElement?: HTMLDivElement;
 };
 
 const tooltipPlugin = ({
@@ -232,7 +233,9 @@ const tooltipPlugin = ({
 	isMergedSeries,
 	stackBarChart,
 	isDarkMode,
-}: ToolTipPluginProps): any => {
+	customTooltipElement,
+}: // eslint-disable-next-line sonarjs/cognitive-complexity
+ToolTipPluginProps): any => {
 	let over: HTMLElement;
 	let bound: HTMLElement;
 	let bLeft: any;
@@ -298,6 +301,9 @@ const tooltipPlugin = ({
 							isMergedSeries,
 							stackBarChart,
 						);
+						if (customTooltipElement) {
+							content.appendChild(customTooltipElement);
+						}
 						overlay.appendChild(content);
 						placement(overlay, anchor, 'right', 'start', { bound });
 					}