diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index 825d1dff1..0f15b007c 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 isOverallImpactHidden = getFeatureFlagValue( + config, + FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN + ); const handleLinkClick = () => { props.onAssetLinkClick(props.entry); @@ -159,20 +167,22 @@ export const AssetEntry = (props: AssetEntryProps) => { - - Overall impact - - - - - - + {!isOverallImpactHidden && ( + + Overall impact + + + + + + + )} )} diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index fd7585c63..23f4212e9 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 isOverallImpactHidden = getFeatureFlagValue( + config, + FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN + ); + + const sortingCriteria = isOverallImpactHidden + ? Object.values(SORTING_CRITERION).filter( + (x) => x !== SORTING_CRITERION.OVERALL_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..ee76694bb 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_OVERALL_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..370777605 --- /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_OVERALL_IMPACT_HIDDEN]: "v0.2.181-alpha.1" +}; + +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..d22b74b5b 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_OVERALL_IMPACT_HIDDEN +} + export enum InsightType { TopErrorFlows = "TopErrorFlows", SpanDurationChange = "SpanDurationChange",