Use redisinsight-plugin-sdk's formatReply to show not support for

cluster message

Author: GnaneshKunal

redisinsight/ui/src/packages/ri-explain/package.json

@@ -66,6 +66,7 @@
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "redisinsight-plugin-sdk": "^1.1.0",
     "uuid": "^9.0.0"
   }
 }

redisinsight/ui/src/packages/ri-explain/src/Explain.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef } from 'react'
 import { Model, Graph } from '@antv/x6'
 import { register} from '@antv/x6-react-shape'
 import Hierarchy from '@antv/hierarchy'
+import { formatRedisReply } from 'redisinsight-plugin-sdk'
 
 import {
   EuiButtonIcon,
@@ -72,6 +73,18 @@ export default function Explain(props: IExplain): JSX.Element {
 
   const module = ModuleType.Search
 
+  const [parsedRedisReply, setParsedRedisReply] = useState('')
+
+  useEffect(() => {
+    if (command == 'ft.profile') {
+      const getParsedResponse = async () => {
+        const formattedResponse = await formatRedisReply(props.data[0].response, props.command)
+        setParsedRedisReply(formattedResponse)
+      }
+      getParsedResponse()
+    }
+  })
+
   if (command == 'ft.profile') {
     const info = props.data[0].response[1]
 
@@ -82,7 +95,12 @@ export default function Explain(props: IExplain): JSX.Element {
       let [cluster, entityInfo] = ParseProfileCluster(info)
       cluster['Coordinator'].forEach((kv: [string, string]) => profilingTime[kv[0]] = kv[1])
       data = entityInfo
-      return <div className="responseFail">Visualization of FT.PROFILE on cluster is not yet supported.</div>
+      return (
+        <>
+          <div className="responseFail">Visualization is not supported for a clustered database.</div>
+          <div className="parsedRedisReply">{parsedRedisReply}</div>
+        </>
+      )
     } else if (typeof info[0] === 'string' && info[0].toLowerCase().startsWith('coordinator')) {
       const resultsProfile = info[2]
       data = ParseProfile(resultsProfile)
@@ -92,7 +110,12 @@ export default function Explain(props: IExplain): JSX.Element {
         'Parsing time': resultsProfile[1][1],
         'Pipeline creation time': resultsProfile[2][1],
       }
-      return <div className="responseFail">Visualization of FT.PROFILE on cluster is not yet supported.</div>
+      return (
+        <>
+          <div className="responseFail">Visualization is not supported for a clustered database.</div>
+          <div className="parsedRedisReply">{parsedRedisReply}</div>
+        </>
+      )
     } else {
       data = ParseProfile(info)
       profilingTime = {

redisinsight/ui/src/packages/ri-explain/src/styles/styles.less

@@ -84,6 +84,14 @@ body {
   font-family: monospace !important;
 }
 
+.parsedRedisReply {
+  white-space: pre-wrap;
+  word-break: break-all;
+  font: normal normal normal 14px/17px Inconsolata !important;
+  padding: 4px 12px !important;
+  color: var(--info-color);
+}
+
 .responseInfo {
   color: var(--info-color);
   padding: 12px !important;

redisinsight/ui/src/packages/ri-explain/yarn.lock

@@ -2513,6 +2513,11 @@ react@^18.2.0:
   dependencies:
     loose-envify "^1.1.0"
 
+redisinsight-plugin-sdk@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/redisinsight-plugin-sdk/-/redisinsight-plugin-sdk-1.1.0.tgz#5ac39dc5398b1f73f2357e67ce51e1875fbece4f"
+  integrity sha512-TtPYfpxVZlwASkO8WFEB8+l6H9N9SVGwVxU0hRGzkEdXZyeQ+Xm/1WwnkGKMaeJyvfpIGrPWVl+lN4pDQ3iqbA==
+
 redux@^4.0.0, redux@^4.0.4:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"