From 1780fae022dcf949f76af126ba43985e052beb94 Mon Sep 17 00:00:00 2001 From: Jaanus Sellin Date: Thu, 14 Mar 2024 14:52:57 +0200 Subject: [PATCH] fix: now issue count under application will show correctly (#6553) Previously if multiple environments had same missing SDK, it was counted multiple times. Now it will take only unique. --- .../application/ApplicationChart.tsx | 4 +- .../ApplicationIssues.test.tsx | 36 ++++++++++ .../ApplicationIssues/ApplicationIssues.tsx | 65 ++++++++++--------- .../DashboardHeader/DashboardHeader.tsx | 3 +- 4 files changed, 72 insertions(+), 36 deletions(-) diff --git a/frontend/src/component/application/ApplicationChart.tsx b/frontend/src/component/application/ApplicationChart.tsx index 6dc156080d..b36a4537c0 100644 --- a/frontend/src/component/application/ApplicationChart.tsx +++ b/frontend/src/component/application/ApplicationChart.tsx @@ -14,7 +14,7 @@ import Flag from '@mui/icons-material/Flag'; import WarningAmberRounded from '@mui/icons-material/WarningAmberRounded'; import TimeAgo from 'react-timeago'; import { usePlausibleTracker } from 'hooks/usePlausibleTracker'; -import { getApplicationIssueMode } from './ApplicationIssues/ApplicationIssues'; +import { getApplicationIssues } from './ApplicationIssues/ApplicationIssues'; const StyledTable = styled('table')(({ theme }) => ({ fontSize: theme.fontSizes.smallerBody, @@ -196,7 +196,7 @@ export const ApplicationChart = ({ data }: IApplicationChartProps) => { const navigate = useNavigate(); const theme = useTheme(); - const mode = getApplicationIssueMode(data); + const mode = getApplicationIssues(data); return ( diff --git a/frontend/src/component/application/ApplicationIssues/ApplicationIssues.test.tsx b/frontend/src/component/application/ApplicationIssues/ApplicationIssues.test.tsx index 4ca41fed2b..f6e2e0603b 100644 --- a/frontend/src/component/application/ApplicationIssues/ApplicationIssues.test.tsx +++ b/frontend/src/component/application/ApplicationIssues/ApplicationIssues.test.tsx @@ -35,4 +35,40 @@ test('Display all application issues', async () => { ); await screen.findByText(`We detected the following outdated SDKs`); await screen.findByText(`unleash-client-php:1.13.0`); + await screen.findByText(`We detected 4 issues in this application`); +}); + +test('Each SDK version should be displayed once', async () => { + const application: ApplicationOverviewSchema = { + projects: ['default'], + featureCount: 0, + environments: [ + { + issues: { + missingFeatures: [], + outdatedSdks: ['unleash-client-php:1.13.0'], + }, + sdks: [], + instanceCount: 0, + lastSeen: new Date().toISOString(), + name: 'development', + }, + { + issues: { + missingFeatures: [], + outdatedSdks: ['unleash-client-php:1.13.0'], + }, + sdks: [], + instanceCount: 0, + lastSeen: new Date().toISOString(), + name: 'production', + }, + ], + issues: { + missingStrategies: [], + }, + }; + render(); + + await screen.findByText(`We detected 1 issue in this application`); }); diff --git a/frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx b/frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx index 4447db2469..6baa027daa 100644 --- a/frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx +++ b/frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx @@ -95,6 +95,17 @@ interface IOutdatedSDKsProps { sdks: string[]; } +type ApplicationIssues = + | { + applicationMode: 'success'; + } + | { + applicationMode: 'warning'; + issueCount: number; + outdatedSdks: string[]; + missingFeatures: string[]; + }; + const FeaturesMissing = ({ features }: IFeaturesMissingProps) => { const { hasAccess } = useContext(AccessContext); const length = features.length; @@ -186,38 +197,9 @@ const OutdatedSDKs = ({ sdks }: IOutdatedSDKsProps) => { ); }; -export const getApplicationIssueMode = ( +export const getApplicationIssues = ( application: ApplicationOverviewSchema, -): - | { - applicationMode: 'success'; - } - | { - applicationMode: 'warning'; - issueCount: number; - } => { - const issueCount = - application.issues.missingStrategies.length + - application.environments - .map( - (env) => - env.issues.missingFeatures.length + - env.issues.outdatedSdks.length, - ) - .reduce((sum, num) => sum + num, 0); - - return { - issueCount, - applicationMode: issueCount > 0 ? 'warning' : 'success', - }; -}; - -export const ApplicationIssues = ({ application }: IApplicationIssuesProps) => { - const mode = getApplicationIssueMode(application); - - if (mode.applicationMode === 'success') { - return null; - } +): ApplicationIssues => { const outdatedSdks = [ ...new Set( application.environments.flatMap((env) => env.issues.outdatedSdks), @@ -230,7 +212,26 @@ export const ApplicationIssues = ({ application }: IApplicationIssuesProps) => { ), ), ]; - const issueCount = mode.issueCount; + const issueCount = + outdatedSdks.length + + missingFeatures.length + + application.issues.missingStrategies.length; + + return { + issueCount, + outdatedSdks, + missingFeatures, + applicationMode: issueCount > 0 ? 'warning' : 'success', + }; +}; + +export const ApplicationIssues = ({ application }: IApplicationIssuesProps) => { + const mode = getApplicationIssues(application); + + if (mode.applicationMode === 'success') { + return null; + } + const { issueCount, outdatedSdks, missingFeatures } = mode; return ( diff --git a/frontend/src/component/executiveDashboard/components/DashboardHeader/DashboardHeader.tsx b/frontend/src/component/executiveDashboard/components/DashboardHeader/DashboardHeader.tsx index e6b53b045b..2ee3f9560d 100644 --- a/frontend/src/component/executiveDashboard/components/DashboardHeader/DashboardHeader.tsx +++ b/frontend/src/component/executiveDashboard/components/DashboardHeader/DashboardHeader.tsx @@ -1,4 +1,4 @@ -import { ReactNode, VFC, useState } from 'react'; +import { ReactNode, VFC } from 'react'; import { useUiFlag } from 'hooks/useUiFlag'; import { useFeedback } from 'component/feedbackNew/useFeedback'; import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined'; @@ -8,7 +8,6 @@ import { styled, useMediaQuery, useTheme, - Box, } from '@mui/material'; import { PageHeader } from 'component/common/PageHeader/PageHeader'; import { Badge } from 'component/common/Badge/Badge';