From 95d487520513da37299afa21f9d02dc2d0d89cdb Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Tue, 5 Dec 2023 10:41:37 +0100 Subject: [PATCH 1/2] Hide Performance Impact score --- .../Assets/AssetList/AssetEntry/index.tsx | 40 ++++++++++++------- src/components/Assets/AssetList/index.tsx | 15 ++++++- src/components/Assets/index.tsx | 13 +++--- src/components/Dashboard/index.tsx | 13 +++--- src/components/common/ImpactScore/index.tsx | 25 ++++++++++-- src/featureFlags.ts | 24 +++++++++++ src/types.ts | 6 +++ 7 files changed, 102 insertions(+), 34 deletions(-) create mode 100644 src/featureFlags.ts diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index 825d1dff1..428bd5a9e 100644 --- a/src/components/Assets/AssetList/AssetEntry/index.tsx +++ b/src/components/Assets/AssetList/AssetEntry/index.tsx @@ -1,9 +1,12 @@ +import { useContext } from "react"; import { DefaultTheme, useTheme } from "styled-components"; -import { InsightType } from "../../../../types"; +import { getFeatureFlagValue } from "../../../../featureFlags"; +import { FeatureFlag, InsightType } from "../../../../types"; import { formatTimeDistance } from "../../../../utils/formatTimeDistance"; import { getInsightImportanceColor } from "../../../../utils/getInsightImportanceColor"; import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; import { getInsightTypeOrderPriority } from "../../../../utils/getInsightTypeOrderPriority"; +import { ConfigContext } from "../../../common/App/ConfigContext"; import { ImpactScore } from "../../../common/ImpactScore"; import { Tooltip } from "../../../common/Tooltip"; import { GlobeIcon } from "../../../common/icons/GlobeIcon"; @@ -25,6 +28,11 @@ const getServiceIconColor = (theme: DefaultTheme) => { export const AssetEntry = (props: AssetEntryProps) => { const theme = useTheme(); const serviceIconColor = getServiceIconColor(theme); + const config = useContext(ConfigContext); + const isPerformanceImpactHidden = getFeatureFlagValue( + config, + FeatureFlag.IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN + ); const handleLinkClick = () => { props.onAssetLinkClick(props.entry); @@ -145,20 +153,22 @@ export const AssetEntry = (props: AssetEntryProps) => { {props.entry.impactScores && ( - - Performance impact - - - - - - + {!isPerformanceImpactHidden && ( + + Performance impact + + + + + + + )} Overall impact diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index fd7585c63..bd71885bf 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -1,10 +1,12 @@ import { ChangeEvent, useContext, useEffect, useRef, useState } from "react"; import { DefaultTheme, useTheme } from "styled-components"; import { dispatcher } from "../../../dispatcher"; +import { getFeatureFlagValue } from "../../../featureFlags"; import { useDebounce } from "../../../hooks/useDebounce"; import { usePrevious } from "../../../hooks/usePrevious"; import { isNumber } from "../../../typeGuards/isNumber"; import { isString } from "../../../typeGuards/isString"; +import { FeatureFlag } from "../../../types"; import { ConfigContext } from "../../common/App/ConfigContext"; import { EmptyState } from "../../common/EmptyState"; import { Menu } from "../../common/Menu"; @@ -165,6 +167,17 @@ export const AssetList = (props: AssetListProps) => { const assetTypeInfo = getAssetTypeInfo(props.assetTypeId); + const isPerformanceImpactHidden = getFeatureFlagValue( + config, + FeatureFlag.IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN + ); + + const sortingCriteria = isPerformanceImpactHidden + ? Object.values(SORTING_CRITERION).filter( + (x) => x !== SORTING_CRITERION.PERFORMANCE_IMPACT + ) + : Object.values(SORTING_CRITERION); + useEffect(() => { window.sendMessageToDigma({ action: actions.GET_DATA, @@ -444,7 +457,7 @@ export const AssetList = (props: AssetListProps) => { ({ + items={sortingCriteria.map((x) => ({ value: x, label: getSortingCriterionInfo(x).label }))} diff --git a/src/components/Assets/index.tsx b/src/components/Assets/index.tsx index 5e792a616..463b39170 100644 --- a/src/components/Assets/index.tsx +++ b/src/components/Assets/index.tsx @@ -5,11 +5,12 @@ import { useMemo, useState } from "react"; -import { gte, valid } from "semver"; import { dispatcher } from "../../dispatcher"; +import { getFeatureFlagValue } from "../../featureFlags"; import { usePrevious } from "../../hooks/usePrevious"; import { isNumber } from "../../typeGuards/isNumber"; import { isString } from "../../typeGuards/isString"; +import { FeatureFlag } from "../../types"; import { ConfigContext } from "../common/App/ConfigContext"; import { NewPopover } from "../common/NewPopover"; import { ChevronIcon } from "../common/icons/ChevronIcon"; @@ -45,12 +46,10 @@ export const Assets = () => { const config = useContext(ConfigContext); const previousEnvironment = usePrevious(config.environment); - const backendVersion = config.backendInfo?.applicationVersion; - - const isServiceFilterVisible = - backendVersion && - (backendVersion === "unknown" || - (valid(backendVersion) && gte(backendVersion, "v0.2.174"))); + const isServiceFilterVisible = getFeatureFlagValue( + config, + FeatureFlag.IS_ASSETS_SERVICE_FILTER_VISIBLE + ); useLayoutEffect(() => { window.sendMessageToDigma({ diff --git a/src/components/Dashboard/index.tsx b/src/components/Dashboard/index.tsx index 7fa6512b7..750b18097 100644 --- a/src/components/Dashboard/index.tsx +++ b/src/components/Dashboard/index.tsx @@ -1,11 +1,12 @@ import { useContext, useEffect, useLayoutEffect, useState } from "react"; import { Helmet } from "react-helmet"; -import { gte, valid } from "semver"; import { useTheme } from "styled-components"; import { actions as globalActions } from "../../actions"; import { dispatcher } from "../../dispatcher"; +import { getFeatureFlagValue } from "../../featureFlags"; import { platform } from "../../platform"; import { isString } from "../../typeGuards/isString"; +import { FeatureFlag } from "../../types"; import { openURLInDefaultBrowser } from "../../utils/openURLInDefaultBrowser"; import { ConfigContext } from "../common/App/ConfigContext"; import { getThemeKind } from "../common/App/styles"; @@ -46,12 +47,10 @@ export const Dashboard = () => { platform === "Web" ? "" : formatEnvironmentName(environment) ); - const backendVersion = config.backendInfo?.applicationVersion; - - const isClientSpansOverallImpactEnabled = - backendVersion && - (backendVersion === "unknown" || - (valid(backendVersion) && gte(backendVersion, "v0.2.172-alpha.8"))); + const isClientSpansOverallImpactEnabled = getFeatureFlagValue( + config, + FeatureFlag.IS_DASHBOARD_CLIENT_SPANS_OVERALL_IMPACT_ENABLED + ); const handleOpenInBrowserLinkClick = () => { const hostname = new URL(config.digmaApiUrl).hostname; diff --git a/src/components/common/ImpactScore/index.tsx b/src/components/common/ImpactScore/index.tsx index 84bab561c..c8e019347 100644 --- a/src/components/common/ImpactScore/index.tsx +++ b/src/components/common/ImpactScore/index.tsx @@ -1,10 +1,26 @@ +import { useContext } from "react"; +import { getFeatureFlagValue } from "../../../featureFlags"; +import { FeatureFlag } from "../../../types"; +import { ConfigContext } from "../App/ConfigContext"; +import { ConfigContextData } from "../App/types"; import { Tooltip } from "../Tooltip"; import * as s from "./styles"; import { ImpactScoreProps } from "./types"; -const getImpactScoreLabel = (score: number) => { - if (score < 0) { - return "No data"; +const getImpactScoreLabel = (score: number, config: ConfigContextData) => { + const isWaitingForDataLabel = getFeatureFlagValue( + config, + FeatureFlag.IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN + ); + + if (isWaitingForDataLabel) { + if (score <= 0) { + return "Waiting for data"; + } + } else { + if (score < 0) { + return "No data"; + } } if (score < 0.4) { @@ -25,6 +41,7 @@ const renderIndicator = (score: number) => ( ); export const ImpactScore = (props: ImpactScoreProps) => { + const config = useContext(ConfigContext); let indicatorPosition: "start" | "end" | undefined; if (props.score >= 0 && props.showIndicator) { @@ -39,7 +56,7 @@ export const ImpactScore = (props: ImpactScoreProps) => { {indicatorPosition === "start" && renderIndicator(props.score)} - {getImpactScoreLabel(props.score)} + {getImpactScoreLabel(props.score, config)} {indicatorPosition === "end" && renderIndicator(props.score)} diff --git a/src/featureFlags.ts b/src/featureFlags.ts new file mode 100644 index 000000000..34bef593a --- /dev/null +++ b/src/featureFlags.ts @@ -0,0 +1,24 @@ +import { gte, valid } from "semver"; +import { ConfigContextData } from "./components/common/App/types"; +import { FeatureFlag } from "./types"; + +const featureFlagMinBackendVersions: Record = { + [FeatureFlag.IS_DASHBOARD_CLIENT_SPANS_OVERALL_IMPACT_ENABLED]: + "v0.2.172-alpha.8", + [FeatureFlag.IS_ASSETS_SERVICE_FILTER_VISIBLE]: "v0.2.174", + [FeatureFlag.IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN]: "v0.2.181" +}; + +export const getFeatureFlagValue = ( + config: ConfigContextData, + featureFlag: FeatureFlag +) => { + const backendVersion = config.backendInfo?.applicationVersion; + + return ( + backendVersion && + (backendVersion === "unknown" || + (valid(backendVersion) && + gte(backendVersion, featureFlagMinBackendVersions[featureFlag]))) + ); +}; diff --git a/src/types.ts b/src/types.ts index c4eb124bb..ed557eb25 100644 --- a/src/types.ts +++ b/src/types.ts @@ -1,5 +1,11 @@ import { Duration } from "./globals"; +export enum FeatureFlag { + IS_DASHBOARD_CLIENT_SPANS_OVERALL_IMPACT_ENABLED, + IS_ASSETS_SERVICE_FILTER_VISIBLE, + IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN +} + export enum InsightType { TopErrorFlows = "TopErrorFlows", SpanDurationChange = "SpanDurationChange", From ba084985cf2680c71f1bd8581bb56457cc50e6ae Mon Sep 17 00:00:00 2001 From: Kyrylo Shmidt Date: Wed, 6 Dec 2023 15:13:32 +0100 Subject: [PATCH 2/2] Hide Overall impact --- .../Assets/AssetList/AssetEntry/index.tsx | 42 +++++++++---------- src/components/Assets/AssetList/index.tsx | 8 ++-- src/components/common/ImpactScore/index.tsx | 2 +- src/featureFlags.ts | 2 +- src/types.ts | 2 +- 5 files changed, 28 insertions(+), 28 deletions(-) diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index 428bd5a9e..0f15b007c 100644 --- a/src/components/Assets/AssetList/AssetEntry/index.tsx +++ b/src/components/Assets/AssetList/AssetEntry/index.tsx @@ -29,9 +29,9 @@ export const AssetEntry = (props: AssetEntryProps) => { const theme = useTheme(); const serviceIconColor = getServiceIconColor(theme); const config = useContext(ConfigContext); - const isPerformanceImpactHidden = getFeatureFlagValue( + const isOverallImpactHidden = getFeatureFlagValue( config, - FeatureFlag.IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN + FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN ); const handleLinkClick = () => { @@ -153,36 +153,36 @@ export const AssetEntry = (props: AssetEntryProps) => { {props.entry.impactScores && ( - {!isPerformanceImpactHidden && ( + + Performance impact + + + + + + + {!isOverallImpactHidden && ( - Performance impact - + Overall impact + )} - - Overall impact - - - - - - )} diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index bd71885bf..23f4212e9 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -167,14 +167,14 @@ export const AssetList = (props: AssetListProps) => { const assetTypeInfo = getAssetTypeInfo(props.assetTypeId); - const isPerformanceImpactHidden = getFeatureFlagValue( + const isOverallImpactHidden = getFeatureFlagValue( config, - FeatureFlag.IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN + FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN ); - const sortingCriteria = isPerformanceImpactHidden + const sortingCriteria = isOverallImpactHidden ? Object.values(SORTING_CRITERION).filter( - (x) => x !== SORTING_CRITERION.PERFORMANCE_IMPACT + (x) => x !== SORTING_CRITERION.OVERALL_IMPACT ) : Object.values(SORTING_CRITERION); diff --git a/src/components/common/ImpactScore/index.tsx b/src/components/common/ImpactScore/index.tsx index c8e019347..ee76694bb 100644 --- a/src/components/common/ImpactScore/index.tsx +++ b/src/components/common/ImpactScore/index.tsx @@ -10,7 +10,7 @@ import { ImpactScoreProps } from "./types"; const getImpactScoreLabel = (score: number, config: ConfigContextData) => { const isWaitingForDataLabel = getFeatureFlagValue( config, - FeatureFlag.IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN + FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN ); if (isWaitingForDataLabel) { diff --git a/src/featureFlags.ts b/src/featureFlags.ts index 34bef593a..370777605 100644 --- a/src/featureFlags.ts +++ b/src/featureFlags.ts @@ -6,7 +6,7 @@ const featureFlagMinBackendVersions: Record = { [FeatureFlag.IS_DASHBOARD_CLIENT_SPANS_OVERALL_IMPACT_ENABLED]: "v0.2.172-alpha.8", [FeatureFlag.IS_ASSETS_SERVICE_FILTER_VISIBLE]: "v0.2.174", - [FeatureFlag.IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN]: "v0.2.181" + [FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN]: "v0.2.181-alpha.1" }; export const getFeatureFlagValue = ( diff --git a/src/types.ts b/src/types.ts index ed557eb25..d22b74b5b 100644 --- a/src/types.ts +++ b/src/types.ts @@ -3,7 +3,7 @@ import { Duration } from "./globals"; export enum FeatureFlag { IS_DASHBOARD_CLIENT_SPANS_OVERALL_IMPACT_ENABLED, IS_ASSETS_SERVICE_FILTER_VISIBLE, - IS_ASSETS_PERFORMANCE_IMPACT_HIDDEN + IS_ASSETS_OVERALL_IMPACT_HIDDEN } export enum InsightType {