Merge branch 'feature/RI-3942_rts_recommendation' of https://github.com/RedisInsight/RedisInsight into be/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" />
@@ -51,37 +82,37 @@ const Recommendations = () => {
       <div>
         {renderBadgesLegend()}
       </div>
-      {recommendations.map(({ name }) => {
-        const { id = '', title = '', content = '', badges = [] } = recommendationsContent[name]
+      <div className={styles.recommendationsContainer}>
+        {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}
-              buttonClassName={styles.accordionBtn}
-              buttonProps={{ 'data-test-subj': `${id}-button` }}
-              className={styles.accordion}
-              initialIsOpen
-              onToggle={(isOpen) => handleToggle(isOpen, id)}
-              data-testid={`${id}-accordion`}
-            >
-              <EuiPanel className={styles.accordionContent} color="subdued">
-                {renderContent(content)}
-              </EuiPanel>
-            </EuiAccordion>
-          </div>
-        )
-      })}
+          return (
+            <div key={id} className={styles.recommendation}>
+              <EuiAccordion
+                id={name}
+                arrowDisplay="right"
+                buttonContent={renderButtonContent(redisStack, title, badges)}
+                buttonClassName={styles.accordionBtn}
+                buttonProps={{ 'data-test-subj': `${id}-button` }}
+                className={styles.accordion}
+                initialIsOpen
+                onToggle={(isOpen) => handleToggle(isOpen, id)}
+                data-testid={`${id}-accordion`}
+              >
+                <EuiPanel className={styles.accordionContent} color="subdued">
+                  {renderContent(content)}
+                </EuiPanel>
+              </EuiAccordion>
+            </div>
+          )
+        })}
+      </div>
     </div>
   )
 }

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

@@ -3,14 +3,10 @@
 @import "@elastic/eui/src/global_styling/index";
 
 .wrapper {
-  @include euiScrollBar;
-  overflow-y: auto;
-  overflow-x: hidden;
-  max-height: 100%;
-  padding-top: 30px;
+  height: 100%;
 
   .badgesLegend {
-    margin: 0 22px 14px 0 !important;
+    margin: 20px 22px 14px 0 !important;
 
     .badgeWrapper {
       margin-right: 0;
@@ -34,6 +30,13 @@
     align-items: center;
     margin-right: 24px;
   }
+}
+
+.recommendationsContainer {
+  @include euiScrollBar;
+  overflow-y: auto;
+  overflow-x: hidden;
+  max-height: 100%;
 
   .accordionButton :global(.euiFlexItem) {
     margin: 0;
@@ -112,4 +115,10 @@
   .span {
     display: inline;
   }
+
+  .redisStack {
+    width: 20px;
+    height: 20px;
+    margin-right: 16px;
+  }
 }