diff --git a/frontend/src/components/TextToolTip/index.tsx b/frontend/src/components/TextToolTip/index.tsx index 7e6c04c6f1..64a9cd053a 100644 --- a/frontend/src/components/TextToolTip/index.tsx +++ b/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( + () => ( +
+ {`${text} `} + {url && ( + + here + + )} +
+ ), + [text, url], + ); + + const iconStyle = useMemo( + () => ({ + ...style, + color: isDarkMode ? themeColors.whiteCream : grey[0], + }), + [isDarkMode], + ); + return ( - ( -
- {`${text} `} - {url && ( - - here - - )} -
- )} - > - + + ); } diff --git a/frontend/src/components/TextToolTip/styles.ts b/frontend/src/components/TextToolTip/styles.ts new file mode 100644 index 0000000000..bb2532182d --- /dev/null +++ b/frontend/src/components/TextToolTip/styles.ts @@ -0,0 +1 @@ +export const style = { fontSize: '1.3125rem' }; diff --git a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx b/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx index e6c87998ad..3c208b621d 100644 --- a/frontend/src/container/ResourceAttributesFilter/ResourceAttributesFilter.tsx +++ b/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 ? ( - Loading...{' '} + Loading... ) : ( @@ -74,4 +77,12 @@ function ResourceAttributesFilter(): JSX.Element | null { ); } +interface ResourceAttributesFilterProps { + suffixIcon?: React.ReactNode; +} + +ResourceAttributesFilter.defaultProps = { + suffixIcon: undefined, +}; + export default ResourceAttributesFilter; diff --git a/frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx b/frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx index 848a7c3ca0..11b298074e 100644 --- a/frontend/src/hooks/useResourceAttribute/ResourceProvider.tsx +++ b/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, ], ); diff --git a/frontend/src/hooks/useResourceAttribute/config.ts b/frontend/src/hooks/useResourceAttribute/config.ts new file mode 100644 index 0000000000..f15a8ccf60 --- /dev/null +++ b/frontend/src/hooks/useResourceAttribute/config.ts @@ -0,0 +1,5 @@ +export const whilelistedKeys = [ + 'resource_deployment_environment', + 'resource_k8s_cluster_name', + 'resource_k8s_cluster_namespace', +]; diff --git a/frontend/src/hooks/useResourceAttribute/machine.typegen.ts b/frontend/src/hooks/useResourceAttribute/machine.typegen.ts index d4cbd6752b..f2019aaa26 100644 --- a/frontend/src/hooks/useResourceAttribute/machine.typegen.ts +++ b/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; - } - \ No newline at end of file +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; +} diff --git a/frontend/src/hooks/useResourceAttribute/utils.ts b/frontend/src/hooks/useResourceAttribute/utils.ts index f51211f733..c76cf534e3 100644 --- a/frontend/src/hooks/useResourceAttribute/utils.ts +++ b/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; +}; diff --git a/frontend/src/modules/Servicemap/Map.tsx b/frontend/src/modules/Servicemap/Map.tsx index e9125c84f5..42c8a3d61e 100644 --- a/frontend/src/modules/Servicemap/Map.tsx +++ b/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); diff --git a/frontend/src/modules/Servicemap/ServiceMap.tsx b/frontend/src/modules/Servicemap/ServiceMap.tsx index 5e92bdbb37..21b43c3733 100644 --- a/frontend/src/modules/Servicemap/ServiceMap.tsx +++ b/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 ( - + + } + /> + );