Hide Overall Impact score

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) => {
                 </s.ValueContainer>
               </Tooltip>
             </s.Stats>
-            <s.Stats>
-              <span>Overall impact</span>
-              <Tooltip title={props.entry.impactScores.ScoreExp1000}>
-                <s.ValueContainer>
-                  <ImpactScore
-                    score={props.entry.impactScores.ScoreExp1000}
-                    showIndicator={
-                      props.sortingCriterion ===
-                      SORTING_CRITERION.OVERALL_IMPACT
-                    }
-                  />
-                </s.ValueContainer>
-              </Tooltip>
-            </s.Stats>
+            {!isOverallImpactHidden && (
+              <s.Stats>
+                <span>Overall impact</span>
+                <Tooltip title={props.entry.impactScores.ScoreExp1000}>
+                  <s.ValueContainer>
+                    <ImpactScore
+                      score={props.entry.impactScores.ScoreExp1000}
+                      showIndicator={
+                        props.sortingCriterion ===
+                        SORTING_CRITERION.OVERALL_IMPACT
+                      }
+                    />
+                  </s.ValueContainer>
+                </Tooltip>
+              </s.Stats>
+            )}
           </s.StatsColumn>
         )}
       </s.StatsContainer>

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) => {
             <PopoverContent className={"Popover"}>
               <Menu
                 title={"Sort by"}
-                items={Object.values(SORTING_CRITERION).map((x) => ({
+                items={sortingCriteria.map((x) => ({
                   value: x,
                   label: getSortingCriterionInfo(x).label
                 }))}

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({

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;

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) => {
     <Tooltip title={props.score}>
       <s.Container>
         {indicatorPosition === "start" && renderIndicator(props.score)}
-        {getImpactScoreLabel(props.score)}
+        {getImpactScoreLabel(props.score, config)}
         {indicatorPosition === "end" && renderIndicator(props.score)}
       </s.Container>
     </Tooltip>

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, string> = {
+  [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])))
+  );
+};

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",