Skip to content

Hide Performance impact and corresponding sorting criterion #671

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 11, 2024
Merged

Hide Performance impact and corresponding sorting criterion #671

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 43 additions & 55 deletions src/components/Assets/AssetList/AssetEntry/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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);
Expand Down Expand Up @@ -84,37 +76,47 @@ export const AssetEntry = (props: AssetEntryProps) => {
return (
<s.Container>
<s.Header>
{assetTypeInfo?.icon && (
<s.AssetTypeIconContainer>
<assetTypeInfo.icon color={"#7891d0"} size={16} />
</s.AssetTypeIconContainer>
)}
<Tooltip title={name}>
<s.Link onClick={() => handleLinkClick()}>{name}</s.Link>
</Tooltip>
<s.IndicatorsContainer>
{isNew && <Tag type={"success"} value={"New"} />}
{sortedInsights.map((insight) => {
const insightTypeInfo = getInsightTypeInfo(insight.type);
const insightIconColor = getInsightCriticalityColor(
insight.criticality,
theme
);
<s.TitleRow>
{assetTypeInfo?.icon && (
<s.AssetTypeIconContainer>
<assetTypeInfo.icon color={"#7891d0"} size={16} />
</s.AssetTypeIconContainer>
)}
<Tooltip title={name}>
<s.Link onClick={() => handleLinkClick()}>{name}</s.Link>
</Tooltip>
<s.IndicatorsContainer>
{isNew && <Tag type={"success"} value={"New"} />}
{sortedInsights.map((insight) => {
const insightTypeInfo = getInsightTypeInfo(insight.type);
const insightIconColor = getInsightCriticalityColor(
insight.criticality,
theme
);

return (
insightTypeInfo && (
<Tooltip
key={insight.type}
title={insightTypeInfo?.label || insight.type}
>
<s.InsightIconContainer>
<insightTypeInfo.icon color={insightIconColor} size={20} />
</s.InsightIconContainer>
</Tooltip>
)
);
})}
</s.IndicatorsContainer>
return (
insightTypeInfo && (
<Tooltip
key={insight.type}
title={insightTypeInfo?.label || insight.type}
>
<s.InsightIconContainer>
<insightTypeInfo.icon
color={insightIconColor}
size={20}
/>
</s.InsightIconContainer>
</Tooltip>
)
);
})}
</s.IndicatorsContainer>
</s.TitleRow>
{props.entry.instrumentationLibrary && (
<Tooltip title={props.entry.instrumentationLibrary}>
<s.ScopeName>{props.entry.instrumentationLibrary}</s.ScopeName>
</Tooltip>
)}
</s.Header>
<s.StatsContainer>
<s.StatsColumn>
Expand Down Expand Up @@ -164,7 +166,7 @@ export const AssetEntry = (props: AssetEntryProps) => {
</s.ValueContainer>
</s.Stats>
</s.StatsColumn>
{props.entry.impactScores && (
{!props.isImpactHidden && props.entry.impactScores && (
<s.StatsColumn>
<s.Stats>
<span>Performance impact</span>
Expand All @@ -180,7 +182,7 @@ export const AssetEntry = (props: AssetEntryProps) => {
</s.ValueContainer>
</Tooltip>
</s.Stats>
{!isOverallImpactHidden && (
{!props.isOverallImpactHidden && (
<s.Stats>
<span>Overall impact</span>
<Tooltip title={props.entry.impactScores.ScoreExp1000}>
Expand All @@ -198,20 +200,6 @@ export const AssetEntry = (props: AssetEntryProps) => {
)}
</s.StatsColumn>
)}
{props.entry.instrumentationLibrary && (
<s.StatsColumn>
<s.Stats>
<span>Scope</span>
<Tooltip title={props.entry.instrumentationLibrary}>
<s.ValueContainer>
<s.ScopeName>
{props.entry.instrumentationLibrary}
</s.ScopeName>
</s.ValueContainer>
</Tooltip>
</s.Stats>
</s.StatsColumn>
)}
</s.StatsContainer>
</s.Container>
);
Expand Down
17 changes: 15 additions & 2 deletions src/components/Assets/AssetList/AssetEntry/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 }) => {
Expand All @@ -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;
Expand Down Expand Up @@ -164,8 +172,13 @@ export const ImpactScoreIndicator = styled.div<ImpactScoreIndicatorProps>`
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;
`;
2 changes: 2 additions & 0 deletions src/components/Assets/AssetList/AssetEntry/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ export interface AssetEntryProps {
entry: AssetEntry;
onAssetLinkClick: (entry: AssetEntry) => void;
sortingCriterion: SORTING_CRITERION;
isImpactHidden: boolean;
isOverallImpactHidden: boolean;
}

export interface ImpactScoreIndicatorProps {
Expand Down
67 changes: 54 additions & 13 deletions src/components/Assets/AssetList/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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(
Expand All @@ -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);
Expand All @@ -281,6 +301,10 @@ export const AssetList = (props: AssetListProps) => {
};
}, []);

useEffect(() => {
props.setRefresher(refreshData);
}, [refreshData, props.setRefresher]);

useEffect(() => {
if (
(isNumber(previousPage) && previousPage !== page) ||
Expand Down Expand Up @@ -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);
}, [
Expand Down Expand Up @@ -418,6 +457,8 @@ export const AssetList = (props: AssetListProps) => {
entry={entry}
onAssetLinkClick={handleAssetLinkClick}
sortingCriterion={sorting.criterion}
isImpactHidden={isImpactHidden}
isOverallImpactHidden={isOverallImpactHidden}
/>
);
})}
Expand Down
5 changes: 3 additions & 2 deletions src/components/RecentActivity/EnvironmentTypePanel/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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);
Expand Down