diff --git a/redisinsight/ui/src/constants/dbAnalysisRecommendations.json b/redisinsight/ui/src/constants/dbAnalysisRecommendations.json index 1d419d20de..b55c1169fc 100644 --- a/redisinsight/ui/src/constants/dbAnalysisRecommendations.json +++ b/redisinsight/ui/src/constants/dbAnalysisRecommendations.json @@ -282,6 +282,7 @@ "bigSets": { "id": "bigSets", "title": "Switch to Bloom filter, cuckoo filter, or HyperLogLog", + "redisStack": true, "content": [ { "id": "1", @@ -409,6 +410,29 @@ "href": "https://docs.redis.com/latest/ri/memory-optimizations/", "name": "Read more" } + }, + { + "id": "11", + "type": "spacer", + "value": "l" + }, + { + "id": "12", + "type": "span", + "value": "Create a " + }, + { + "id": "13", + "type": "link", + "value": { + "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight/", + "name": "free Redis Stack database" + } + }, + { + "id": "14", + "type": "span", + "value": " to use modern data models and processing engines." } ], "badges": ["configuration_changes"] @@ -492,7 +516,7 @@ "id": "4", "type": "link", "value": { - "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight_recommendations/", + "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight/", "name": "free Redis Stack database" } }, diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.spec.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.spec.tsx index f386fd446e..7bb6bde41a 100644 --- a/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.spec.tsx +++ b/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.spec.tsx @@ -330,4 +330,18 @@ describe('Recommendations', () => { expect(screen.queryByTestId('badges-legend')).toBeInTheDocument() }) + + it('should render redisstack link', () => { + (dbAnalysisSelector as jest.Mock).mockImplementation(() => ({ + ...mockdbAnalysisSelector, + data: { + recommendations: [{ name: 'bigSets' }] + } + })) + + render() + + expect(screen.queryByTestId('bigSets-redis-stack-link')).toBeInTheDocument() + expect(screen.queryByTestId('bigSets-redis-stack-link')).toHaveAttribute('href', 'https://redis.io/docs/stack/') + }) }) diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx b/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx index d675772682..6b0b37d417 100644 --- a/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx +++ b/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx @@ -6,9 +6,11 @@ import { EuiAccordion, EuiPanel, EuiText, + EuiToolTip, EuiFlexGroup, EuiFlexItem, EuiIcon, + EuiLink, } from '@elastic/eui' import { ThemeContext } from 'uiSrc/contexts/themeContext' import { dbAnalysisSelector } from 'uiSrc/slices/analytics/dbAnalysis' @@ -38,19 +40,36 @@ const Recommendations = () => { } }) + const onRedisStackClick = (event: React.MouseEvent) => event.stopPropagation() + const sortedRecommendations = sortBy(recommendations, ({ name }) => (recommendationsContent[name]?.redisStack ? -1 : 0)) - const renderButtonContent = (redisStack: boolean, title: string, badges: string[]) => ( + const renderButtonContent = (redisStack: boolean, title: string, badges: string[], id: string) => ( - + {redisStack && ( - + + + + + )} @@ -97,7 +116,7 @@ const Recommendations = () => {