Merge branch 'feature/RI-3942_rts_recommendation' of https://github.com/RedisInsight/RedisInsight into feature/RI-3942_rts_recommendation

Author: AmirAllayarovSofteq

redisinsight/ui/src/constants/dbAnalysisRecommendations.json

@@ -467,5 +467,41 @@
       }
     ],
     "badges": ["configuration_changes"]
+  },
+  "RTS": {
+    "id": "RTS",
+    "title":"Optimize the use of time series",
+    "redisStack": true,
+    "content": [
+      {
+        "id": "1",
+        "type": "paragraph",
+        "value": "If you are using sorted sets to work with time series data, consider using RedisTimeSeries to optimize the memory usage while having extraordinary query performance and small overhead during ingestion."
+      },
+      {
+        "id": "2",
+        "type": "spacer",
+        "value": "l"
+      },
+      {
+        "id": "3",
+        "type": "span",
+        "value": "Create a "
+      },
+      {
+        "id": "4",
+        "type": "link",
+        "value": {
+          "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight_recommendations/",
+          "name": "free Redis Stack database"
+        }
+      },
+      {
+        "id": "5",
+        "type": "span",
+        "value": " to use modern data models and processing engines."
+      }
+    ],
+    "badges": ["configuration_changes"]
   }
 }

redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx

@@ -1,17 +1,22 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import { useSelector } from 'react-redux'
 import { useParams } from 'react-router-dom'
-import { isNull } from 'lodash'
+import { isNull, sortBy } from 'lodash'
 import {
   EuiAccordion,
   EuiPanel,
   EuiText,
   EuiFlexGroup,
   EuiFlexItem,
+  EuiIcon,
 } from '@elastic/eui'
+import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { dbAnalysisSelector } from 'uiSrc/slices/analytics/dbAnalysis'
 import recommendationsContent from 'uiSrc/constants/dbAnalysisRecommendations.json'
+import { Theme } from 'uiSrc/constants'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import RediStackDarkMin from 'uiSrc/assets/img/modules/redistack/RediStackDark-min.svg'
+import RediStackLightMin from 'uiSrc/assets/img/modules/redistack/RediStackLight-min.svg'
 
 import { renderContent, renderBadges, renderBadgesLegend } from './utils'
 import styles from './styles.module.scss'
@@ -20,6 +25,7 @@ const Recommendations = () => {
   const { data, loading } = useSelector(dbAnalysisSelector)
   const { recommendations = [] } = data ?? {}
 
+  const { theme } = useContext(ThemeContext)
   const { instanceId } = useParams<{ instanceId: string }>()
 
   const handleToggle = (isOpen: boolean, id: string) => sendEventTelemetry({
@@ -32,6 +38,31 @@ const Recommendations = () => {
     }
   })
 
+  const sortedRecommendations = sortBy(recommendations, ({ name }) =>
+    (recommendationsContent[name]?.redisStack ? -1 : 0))
+
+  const renderButtonContent = (redisStack: boolean, title: string, badges: string[]) => (
+    <EuiFlexGroup className={styles.accordionButton} responsive={false} alignItems="center" justifyContent="spaceBetween">
+      <EuiFlexGroup alignItems="center">
+        <EuiFlexItem grow={false}>
+          {redisStack && (
+            <EuiIcon
+              type={theme === Theme.Dark ? RediStackDarkMin : RediStackLightMin}
+              className={styles.redisStack}
+              data-testid="redis-stack-icon"
+            />
+          )}
+        </EuiFlexItem>
+        <EuiFlexItem grow={false}>
+          {title}
+        </EuiFlexItem>
+      </EuiFlexGroup>
+      <EuiFlexItem grow={false}>
+        {renderBadges(badges)}
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  )
+
   if (loading) {
     return (
       <div className={styles.loadingWrapper} data-testid="recommendations-loader" />
@@ -52,23 +83,21 @@ const Recommendations = () => {
         {renderBadgesLegend()}
       </div>
       <div className={styles.recommendationsContainer}>
-        {recommendations.map(({ name }) => {
-          const { id = '', title = '', content = '', badges = [] } = recommendationsContent[name]
+        {sortedRecommendations.map(({ name }) => {
+          const {
+            id = '',
+            title = '',
+            content = '',
+            badges = [],
+            redisStack = false
+          } = recommendationsContent[name]
 
-          const buttonContent = (
-            <EuiFlexGroup className={styles.accordionButton} responsive={false} alignItems="center" justifyContent="spaceBetween">
-              <EuiFlexItem grow={false}>{title}</EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                {renderBadges(badges)}
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          )
           return (
             <div key={id} className={styles.recommendation}>
               <EuiAccordion
                 id={name}
                 arrowDisplay="right"
-                buttonContent={buttonContent}
+                buttonContent={renderButtonContent(redisStack, title, badges)}
                 buttonClassName={styles.accordionBtn}
                 buttonProps={{ 'data-test-subj': `${id}-button` }}
                 className={styles.accordion}

redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/styles.module.scss

@@ -115,4 +115,10 @@
   .span {
     display: inline;
   }
+
+  .redisStack {
+    width: 20px;
+    height: 20px;
+    margin-right: 16px;
+  }
 }