From 7aef85359c036d8200b4d5d1f7a1230aa8bfd101 Mon Sep 17 00:00:00 2001
From: Amir Allayarov <amir.allayarov@softeq.com>
Date: Fri, 23 Dec 2022 11:57:25 +0400
Subject: [PATCH 1/3] #RI-3942 - add rts recommendation

---
 .../constants/dbAnalysisRecommendations.json  | 36 ++++++++
 .../recommendations-view/Recommendations.tsx  | 91 ++++++++++++-------
 .../recommendations-view/styles.module.scss   |  6 ++
 3 files changed, 101 insertions(+), 32 deletions(-)

diff --git a/redisinsight/ui/src/constants/dbAnalysisRecommendations.json b/redisinsight/ui/src/constants/dbAnalysisRecommendations.json
index f9269b8562..9074620fca 100644
--- a/redisinsight/ui/src/constants/dbAnalysisRecommendations.json
+++ b/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/",
+          "name": "free Redis Stack database"
+        }
+      },
+      {
+        "id": "5",
+        "type": "span",
+        "value": " to use modern data models and processing engines."
+      }
+    ],
+    "badges": ["configuration_changes"]
   }
 }
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 c8dec8bf53..6ff1b2796b 100644
--- a/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx
+++ b/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({
@@ -51,37 +57,58 @@ const Recommendations = () => {
       <div>
         {renderBadgesLegend()}
       </div>
-      {recommendations.map(({ name }) => {
-        const { id = '', title = '', content = '', badges = [] } = recommendationsContent[name]
+      {sortBy(recommendations, ({ name }) =>
+        (recommendationsContent[name]?.redisStack ? -1 : 0))
+        ?.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>
-        )
-      })}
+          const buttonContent = (
+            <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>
+          )
+          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>
+          )
+        })}
     </div>
   )
 }
diff --git a/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/styles.module.scss b/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/styles.module.scss
index 46ec75adb3..32de0b16c5 100644
--- a/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/styles.module.scss
+++ b/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/styles.module.scss
@@ -112,4 +112,10 @@
   .span {
     display: inline;
   }
+
+  .redisStack {
+    width: 20px;
+    height: 20px;
+    margin-right: 16px;
+  }
 }

From 979a0ea47868799464f8f69a55d8d2b56e6481f7 Mon Sep 17 00:00:00 2001
From: Amir Allayarov <amir.allayarov@softeq.com>
Date: Wed, 28 Dec 2022 13:06:04 +0400
Subject: [PATCH 2/3] #RI-3942 - update link

---
 redisinsight/ui/src/constants/dbAnalysisRecommendations.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/redisinsight/ui/src/constants/dbAnalysisRecommendations.json b/redisinsight/ui/src/constants/dbAnalysisRecommendations.json
index 9074620fca..1d419d20de 100644
--- a/redisinsight/ui/src/constants/dbAnalysisRecommendations.json
+++ b/redisinsight/ui/src/constants/dbAnalysisRecommendations.json
@@ -492,7 +492,7 @@
         "id": "4",
         "type": "link",
         "value": {
-          "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight/",
+          "href": "https://redis.com/try-free/?utm_source=redis&utm_medium=app&utm_campaign=redisinsight_recommendations/",
           "name": "free Redis Stack database"
         }
       },

From 5307ba835b0c3c059c12fe94c755583e5f5a3b61 Mon Sep 17 00:00:00 2001
From: Amir Allayarov <amir.allayarov@softeq.com>
Date: Thu, 29 Dec 2022 11:45:37 +0400
Subject: [PATCH 3/3] #RI-3942 - resolve comments

---
 .../recommendations-view/Recommendations.tsx  | 104 +++++++++---------
 1 file changed, 53 insertions(+), 51 deletions(-)

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 6ff1b2796b..4d7c9344c4 100644
--- a/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx
+++ b/redisinsight/ui/src/pages/databaseAnalysis/components/recommendations-view/Recommendations.tsx
@@ -38,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" />
@@ -57,58 +82,35 @@ const Recommendations = () => {
       <div>
         {renderBadgesLegend()}
       </div>
-      {sortBy(recommendations, ({ name }) =>
-        (recommendationsContent[name]?.redisStack ? -1 : 0))
-        ?.map(({ name }) => {
-          const {
-            id = '',
-            title = '',
-            content = '',
-            badges = [],
-            redisStack = false
-          } = 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">
-              <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>
-          )
-          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>
   )
 }