feat: keys for the service map is updated (#2525)

frontend/src/components/TextToolTip/index.tsx

@@ -1,23 +1,40 @@
-/* eslint-disable react/no-unstable-nested-components */
+import { grey } from '@ant-design/colors';
 import { QuestionCircleFilled } from '@ant-design/icons';
 import { Tooltip } from 'antd';
-import React from 'react';
+import { themeColors } from 'constants/theme';
+import { useIsDarkMode } from 'hooks/useDarkMode';
+import React, { useMemo } from 'react';
+
+import { style } from './styles';
 
 function TextToolTip({ text, url }: TextToolTipProps): JSX.Element {
+	const isDarkMode = useIsDarkMode();
+
+	const overlay = useMemo(
+		() => (
+			<div>
+				{`${text} `}
+				{url && (
+					<a href={url} rel="noopener noreferrer" target="_blank">
+						here
+					</a>
+				)}
+			</div>
+		),
+		[text, url],
+	);
+
+	const iconStyle = useMemo(
+		() => ({
+			...style,
+			color: isDarkMode ? themeColors.whiteCream : grey[0],
+		}),
+		[isDarkMode],
+	);
+
 	return (
-		<Tooltip
-			overlay={(): JSX.Element => (
-				<div>
-					{`${text} `}
-					{url && (
-						<a href={url} rel="noopener noreferrer" target="_blank">
-							here
-						</a>
-					)}
-				</div>
-			)}
-		>
-			<QuestionCircleFilled style={{ fontSize: '1.3125rem' }} />
+		<Tooltip overlay={overlay}>
+			<QuestionCircleFilled style={iconStyle} />
 		</Tooltip>
 	);
 }

frontend/src/components/TextToolTip/styles.ts

@@ -0,0 +1 @@
+export const style = { fontSize: '1.3125rem' };

frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx

@@ -10,7 +10,9 @@ import { v4 as uuid } from 'uuid';
 import QueryChip from './components/QueryChip';
 import { QueryChipItem, SearchContainer } from './styles';
 
-function ResourceAttributesFilter(): JSX.Element | null {
+function ResourceAttributesFilter({
+	suffixIcon,
+}: ResourceAttributesFilterProps): JSX.Element | null {
 	const {
 		queries,
 		staging,
@@ -49,14 +51,15 @@ function ResourceAttributesFilter(): JSX.Element | null {
 				style={{ flex: 1 }}
 				options={optionsData.options}
 				mode={optionsData?.mode}
-				showArrow={false}
+				showArrow={!!suffixIcon}
 				onClick={handleFocus}
 				onBlur={handleBlur}
 				onClear={handleClearAll}
+				suffixIcon={suffixIcon}
 				notFoundContent={
 					loading ? (
 						<span>
-							<Spin size="small" /> Loading...{' '}
+							<Spin size="small" /> Loading...
 						</span>
 					) : (
 						<span>
@@ -74,4 +77,12 @@ function ResourceAttributesFilter(): JSX.Element | null {
 	);
 }
 
+interface ResourceAttributesFilterProps {
+	suffixIcon?: React.ReactNode;
+}
+
+ResourceAttributesFilter.defaultProps = {
+	suffixIcon: undefined,
+};
+
 export default ResourceAttributesFilter;

frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx

@@ -1,9 +1,11 @@
 import { useMachine } from '@xstate/react';
+import ROUTES from 'constants/routes';
 import { encode } from 'js-base64';
 import history from 'lib/history';
 import React, { useCallback, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 
+import { whilelistedKeys } from './config';
 import { ResourceContext } from './context';
 import { ResourceAttributesFilterMachine } from './machine';
 import {
@@ -16,6 +18,7 @@ import {
 	getResourceAttributeQueriesFromURL,
 	GetTagKeys,
 	GetTagValues,
+	mappingWithRoutesAndKeys,
 	OperatorSchema,
 } from './utils';
 
@@ -59,7 +62,12 @@ function ResourceProvider({ children }: Props): JSX.Element {
 			onSelectTagKey: () => {
 				handleLoading(true);
 				GetTagKeys()
-					.then((tagKeys) => setOptionsData({ options: tagKeys, mode: undefined }))
+					.then((tagKeys) =>
+						setOptionsData({
+							options: mappingWithRoutesAndKeys(pathname, tagKeys),
+							mode: undefined,
+						}),
+					)
 					.finally(() => {
 						handleLoading(false);
 					});
@@ -134,9 +142,16 @@ function ResourceProvider({ children }: Props): JSX.Element {
 		setOptionsData({ mode: undefined, options: [] });
 	}, [dispatchQueries, send]);
 
+	const getVisibleQueries = useMemo(() => {
+		if (pathname === ROUTES.SERVICE_MAP) {
+			return queries.filter((query) => whilelistedKeys.includes(query.tagKey));
+		}
+		return queries;
+	}, [queries, pathname]);
+
 	const value: IResourceAttributeProps = useMemo(
 		() => ({
-			queries,
+			queries: getVisibleQueries,
 			staging,
 			handleClearAll,
 			handleClose,
@@ -154,10 +169,10 @@ function ResourceProvider({ children }: Props): JSX.Element {
 			handleClose,
 			handleFocus,
 			loading,
-			queries,
 			staging,
 			selectedQuery,
 			optionsData,
+			getVisibleQueries,
 		],
 	);
 

frontend/src/hooks/useResourceAttribute/config.ts

@@ -0,0 +1,5 @@
+export const whilelistedKeys = [
+	'resource_deployment_environment',
+	'resource_k8s_cluster_name',
+	'resource_k8s_cluster_namespace',
+];

frontend/src/hooks/useResourceAttribute/machine.typegen.ts

@@ -1,37 +1,32 @@
+// This file was automatically generated. Edits will be overwritten
 
-  // This file was automatically generated. Edits will be overwritten
-
-  export interface Typegen0 {
-        '@@xstate/typegen': true;
-        internalEvents: {
-          "xstate.init": { type: "xstate.init" };
-        };
-        invokeSrcNameMap: {
-          
-        };
-        missingImplementations: {
-          actions: "onBlurPurge" | "onSelectOperator" | "onSelectTagKey" | "onSelectTagValue" | "onValidateQuery";
-          delays: never;
-          guards: never;
-          services: never;
-        };
-        eventsCausingActions: {
-          "onBlurPurge": "onBlur";
-"onSelectOperator": "NEXT";
-"onSelectTagKey": "NEXT";
-"onSelectTagValue": "NEXT";
-"onValidateQuery": "onBlur";
-        };
-        eventsCausingDelays: {
-          
-        };
-        eventsCausingGuards: {
-          
-        };
-        eventsCausingServices: {
-          
-        };
-        matchesStates: "Idle" | "Operator" | "TagKey" | "TagValue";
-        tags: never;
-      }
-  
+export interface Typegen0 {
+	'@@xstate/typegen': true;
+	internalEvents: {
+		'xstate.init': { type: 'xstate.init' };
+	};
+	invokeSrcNameMap: {};
+	missingImplementations: {
+		actions:
+			| 'onBlurPurge'
+			| 'onSelectOperator'
+			| 'onSelectTagKey'
+			| 'onSelectTagValue'
+			| 'onValidateQuery';
+		delays: never;
+		guards: never;
+		services: never;
+	};
+	eventsCausingActions: {
+		onBlurPurge: 'onBlur';
+		onSelectOperator: 'NEXT';
+		onSelectTagKey: 'NEXT';
+		onSelectTagValue: 'NEXT';
+		onValidateQuery: 'onBlur';
+	};
+	eventsCausingDelays: {};
+	eventsCausingGuards: {};
+	eventsCausingServices: {};
+	matchesStates: 'Idle' | 'Operator' | 'TagKey' | 'TagValue';
+	tags: never;
+}

frontend/src/hooks/useResourceAttribute/utils.ts

@@ -3,6 +3,7 @@ import {
 	getResourceAttributesTagValues,
 } from 'api/metrics/getResourceAttributes';
 import { OperatorConversions } from 'constants/resourceAttributes';
+import ROUTES from 'constants/routes';
 import {
 	IOption,
 	IResourceAttribute,
@@ -14,6 +15,8 @@ import { IQueryBuilderTagFilterItems } from 'types/api/dashboard/getAll';
 import { OperatorValues, Tags } from 'types/reducer/trace';
 import { v4 as uuid } from 'uuid';
 
+import { whilelistedKeys } from './config';
+
 /**
  * resource_x_y -> x.y
  */
@@ -139,3 +142,13 @@ export const isResourceEmpty = (
 	staging: IResourceAttributeProps['staging'],
 	selectedQuery: IResourceAttributeProps['selectedQuery'],
 ): boolean => !!(queries.length || staging.length || selectedQuery.length);
+
+export const mappingWithRoutesAndKeys = (
+	pathname: string,
+	filters: IOption[],
+): IOption[] => {
+	if (ROUTES.SERVICE_MAP === pathname) {
+		return filters.filter((filter) => whilelistedKeys.includes(filter.value));
+	}
+	return filters;
+};

frontend/src/modules/Servicemap/Map.tsx

@@ -6,7 +6,7 @@ import { ForceGraph2D } from 'react-force-graph';
 
 import { getGraphData, getTooltip, transformLabel } from './utils';
 
-function Map({ fgRef, serviceMap }: any): JSX.Element {
+function ServiceMap({ fgRef, serviceMap }: any): JSX.Element {
 	const isDarkMode = useIsDarkMode();
 
 	const { nodes, links } = getGraphData(serviceMap, isDarkMode);
@@ -53,4 +53,4 @@ function Map({ fgRef, serviceMap }: any): JSX.Element {
 	);
 }
 
-export default memo(Map);
+export default memo(ServiceMap);

frontend/src/modules/Servicemap/ServiceMap.tsx

@@ -3,8 +3,10 @@
 
 import { Card } from 'antd';
 import Spinner from 'components/Spinner';
+import TextToolTip from 'components/TextToolTip';
 import ResourceAttributesFilter from 'container/ResourceAttributesFilter';
 import useResourceAttribute from 'hooks/useResourceAttribute';
+import { whilelistedKeys } from 'hooks/useResourceAttribute/config';
 import { IResourceAttribute } from 'hooks/useResourceAttribute/types';
 import React, { useEffect, useRef } from 'react';
 import { connect } from 'react-redux';
@@ -94,7 +96,18 @@ function ServiceMap(props: ServiceMapProps): JSX.Element {
 	}
 	return (
 		<Container>
-			<ResourceAttributesFilter />
+			<ResourceAttributesFilter
+				suffixIcon={
+					<TextToolTip
+						{...{
+							text: `Currently, service map supports filtering of ${whilelistedKeys.join(
+								', ',
+							)} only, in resource attributes`,
+						}}
+					/>
+				}
+			/>
+
 			<Map fgRef={fgRef} serviceMap={serviceMap} />
 		</Container>
 	);