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