diff --git a/src/components/Assets/AssetList/AssetEntry/index.tsx b/src/components/Assets/AssetList/AssetEntry/index.tsx index 41d532696..d78c748f3 100644 --- a/src/components/Assets/AssetList/AssetEntry/index.tsx +++ b/src/components/Assets/AssetList/AssetEntry/index.tsx @@ -1,14 +1,11 @@ -import { useContext } from "react"; import { DefaultTheme, useTheme } from "styled-components"; -import { getFeatureFlagValue } from "../../../../featureFlags"; import { isString } from "../../../../typeGuards/isString"; -import { FeatureFlag, InsightType } from "../../../../types"; +import { InsightType } from "../../../../types"; import { formatTimeDistance } from "../../../../utils/formatTimeDistance"; import { getInsightCriticalityColor } from "../../../../utils/getInsightCriticalityColor"; import { getInsightTypeInfo } from "../../../../utils/getInsightTypeInfo"; import { getInsightTypeOrderPriority } from "../../../../utils/getInsightTypeOrderPriority"; import { InsightImportance } from "../../../Insights/types"; -import { ConfigContext } from "../../../common/App/ConfigContext"; import { ImpactScore } from "../../../common/ImpactScore"; import { Tag } from "../../../common/Tag"; import { Tooltip } from "../../../common/Tooltip"; @@ -33,11 +30,6 @@ 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); @@ -84,37 +76,47 @@ export const AssetEntry = (props: AssetEntryProps) => { return ( - {assetTypeInfo?.icon && ( - - - - )} - - handleLinkClick()}>{name} - - - {isNew && } - {sortedInsights.map((insight) => { - const insightTypeInfo = getInsightTypeInfo(insight.type); - const insightIconColor = getInsightCriticalityColor( - insight.criticality, - theme - ); + + {assetTypeInfo?.icon && ( + + + + )} + + handleLinkClick()}>{name} + + + {isNew && } + {sortedInsights.map((insight) => { + const insightTypeInfo = getInsightTypeInfo(insight.type); + const insightIconColor = getInsightCriticalityColor( + insight.criticality, + theme + ); - return ( - insightTypeInfo && ( - - - - - - ) - ); - })} - + return ( + insightTypeInfo && ( + + + + + + ) + ); + })} + + + {props.entry.instrumentationLibrary && ( + + {props.entry.instrumentationLibrary} + + )} @@ -164,7 +166,7 @@ export const AssetEntry = (props: AssetEntryProps) => { - {props.entry.impactScores && ( + {!props.isImpactHidden && props.entry.impactScores && ( Performance impact @@ -180,7 +182,7 @@ export const AssetEntry = (props: AssetEntryProps) => { - {!isOverallImpactHidden && ( + {!props.isOverallImpactHidden && ( Overall impact @@ -198,20 +200,6 @@ export const AssetEntry = (props: AssetEntryProps) => { )} )} - {props.entry.instrumentationLibrary && ( - - - Scope - - - - {props.entry.instrumentationLibrary} - - - - - - )} ); diff --git a/src/components/Assets/AssetList/AssetEntry/styles.ts b/src/components/Assets/AssetList/AssetEntry/styles.ts index 7aaa73f18..3e22cb9df 100644 --- a/src/components/Assets/AssetList/AssetEntry/styles.ts +++ b/src/components/Assets/AssetList/AssetEntry/styles.ts @@ -1,10 +1,12 @@ import styled from "styled-components"; +import { caption2RegularTypography } from "../../../common/App/typographies"; +import { grayScale } from "../../../common/App/v2colors"; import { ImpactScoreIndicatorProps } from "./types"; export const Container = styled.div` display: flex; flex-direction: column; - gap: 8px; + gap: 12px; padding: 8px; border-radius: 4px; color: ${({ theme }) => { @@ -28,6 +30,12 @@ export const Container = styled.div` `; export const Header = styled.div` + display: flex; + flex-direction: column; + gap: 4px; +`; + +export const TitleRow = styled.div` display: flex; gap: 2px; height: 20px; @@ -164,8 +172,13 @@ export const ImpactScoreIndicator = styled.div` background: hsl(14deg 66% ${({ $score }) => 100 - 50 * $score}%); `; -export const ScopeName = styled.span` +export const ScopeName = styled.div` + ${caption2RegularTypography} + overflow: hidden; text-overflow: ellipsis; white-space: nowrap; + color: ${grayScale[500]}; + opacity: 0.87; + max-width: fit-content; `; diff --git a/src/components/Assets/AssetList/AssetEntry/types.ts b/src/components/Assets/AssetList/AssetEntry/types.ts index 528107a80..031bc1d26 100644 --- a/src/components/Assets/AssetList/AssetEntry/types.ts +++ b/src/components/Assets/AssetList/AssetEntry/types.ts @@ -4,6 +4,8 @@ export interface AssetEntryProps { entry: AssetEntry; onAssetLinkClick: (entry: AssetEntry) => void; sortingCriterion: SORTING_CRITERION; + isImpactHidden: boolean; + isOverallImpactHidden: boolean; } export interface ImpactScoreIndicatorProps { diff --git a/src/components/Assets/AssetList/index.tsx b/src/components/Assets/AssetList/index.tsx index c2bc39f0f..ba3b33a0c 100644 --- a/src/components/Assets/AssetList/index.tsx +++ b/src/components/Assets/AssetList/index.tsx @@ -15,6 +15,7 @@ import { isNumber } from "../../../typeGuards/isNumber"; import { isString } from "../../../typeGuards/isString"; import { FeatureFlag } from "../../../types"; import { ConfigContext } from "../../common/App/ConfigContext"; +import { DeploymentType } from "../../common/App/types"; import { EmptyState } from "../../common/EmptyState"; import { Menu } from "../../common/Menu"; import { NewCircleLoader } from "../../common/NewCircleLoader"; @@ -133,6 +134,22 @@ const getSortingCriterionInfo = ( return sortingCriterionInfoMap[sortingCriterion]; }; +const getSortingCriteria = ( + isImpactHidden: boolean, + isOverallImpactHidden: boolean +) => + Object.values(SORTING_CRITERION).filter( + (x) => + !( + (isImpactHidden && + [ + SORTING_CRITERION.PERFORMANCE_IMPACT, + SORTING_CRITERION.OVERALL_IMPACT + ].includes(x)) || + (isOverallImpactHidden && x === SORTING_CRITERION.OVERALL_IMPACT) + ) + ); + const getData = ( assetTypeId: string, page: number, @@ -242,9 +259,22 @@ export const AssetList = (props: AssetListProps) => { const assetTypeInfo = getAssetTypeInfo(props.assetTypeId); - const isOverallImpactHidden = getFeatureFlagValue( - config, - FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN + const isImpactHidden = useMemo( + () => + Boolean( + config.backendInfo?.deploymentType === DeploymentType.HELM && + config.environment?.type === "shared" + ), + [config.backendInfo?.deploymentType, config.environment?.type] + ); + + const isOverallImpactHidden = Boolean( + getFeatureFlagValue(config, FeatureFlag.IS_ASSETS_OVERALL_IMPACT_HIDDEN) + ); + + const sortingCriteria = getSortingCriteria( + isImpactHidden, + isOverallImpactHidden ); const areAnyFiltersApplied = checkIfAnyFiltersApplied( @@ -254,16 +284,6 @@ export const AssetList = (props: AssetListProps) => { props.searchQuery ); - const sortingCriteria = isOverallImpactHidden - ? Object.values(SORTING_CRITERION).filter( - (x) => x !== SORTING_CRITERION.OVERALL_IMPACT - ) - : Object.values(SORTING_CRITERION); - - useEffect(() => { - props.setRefresher(refreshData); - }, [refreshData]); - useEffect(() => { refreshData(); setIsInitialLoading(true); @@ -281,6 +301,10 @@ export const AssetList = (props: AssetListProps) => { }; }, []); + useEffect(() => { + props.setRefresher(refreshData); + }, [refreshData, props.setRefresher]); + useEffect(() => { if ( (isNumber(previousPage) && previousPage !== page) || @@ -340,6 +364,21 @@ export const AssetList = (props: AssetListProps) => { } }, [previousData, data]); + useEffect(() => { + if ( + isImpactHidden && + [ + SORTING_CRITERION.PERFORMANCE_IMPACT, + SORTING_CRITERION.OVERALL_IMPACT + ].includes(sorting.criterion) + ) { + setSorting({ + criterion: SORTING_CRITERION.CRITICAL_INSIGHTS, + order: SORTING_ORDER.DESC + }); + } + }, [isImpactHidden, sorting]); + useEffect(() => { setPage(0); }, [ @@ -418,6 +457,8 @@ export const AssetList = (props: AssetListProps) => { entry={entry} onAssetLinkClick={handleAssetLinkClick} sortingCriterion={sorting.criterion} + isImpactHidden={isImpactHidden} + isOverallImpactHidden={isOverallImpactHidden} /> ); })} diff --git a/src/components/RecentActivity/EnvironmentTypePanel/index.tsx b/src/components/RecentActivity/EnvironmentTypePanel/index.tsx index 3bcfe2185..223d48657 100644 --- a/src/components/RecentActivity/EnvironmentTypePanel/index.tsx +++ b/src/components/RecentActivity/EnvironmentTypePanel/index.tsx @@ -2,7 +2,7 @@ import { useContext } from "react"; import { openURLInDefaultBrowser } from "../../../utils/openURLInDefaultBrowser"; import { sendTrackingEvent } from "../../../utils/sendTrackingEvent"; import { ConfigContext } from "../../common/App/ConfigContext"; -import { EnvironmentType } from "../../common/App/types"; +import { DeploymentType, EnvironmentType } from "../../common/App/types"; import { IconTag } from "../../common/IconTag"; import { NewButton } from "../../common/NewButton"; import { CodeIcon } from "../../common/icons/16px/CodeIcon"; @@ -15,7 +15,8 @@ const DIGMA_FOR_TEAMS_URL = "https://digma.ai/digma-for-teams/"; export const EnvironmentTypePanel = (props: EnvironmentTypePanelProps) => { const config = useContext(ConfigContext); - const isHelmDeployment = config.backendInfo?.deploymentType === "Helm"; + const isHelmDeployment = + config.backendInfo?.deploymentType === DeploymentType.HELM; const handleEnvironmentTypeButtonClick = (type: EnvironmentType) => { const typeData = environmentTypes.find((x) => x.type === type);