Merge pull request #1629 from RedisInsight/feature/RI-3726_profile_explain

Feature/ri 3726 profile explain

Author: vlad-dargel

redisinsight/ui/src/components/query-card/QueryCardHeader/QueryCardHeader.tsx

@@ -109,6 +109,7 @@ const QueryCardHeader = (props: Props) => {
     setSelectedValue,
     onQueryDelete,
     onQueryReRun,
+    onQueryProfile,
     db,
   } = props
 

redisinsight/ui/src/packages/ri-explain/README.md

@@ -0,0 +1 @@
+# RI-Explain plugin

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

@@ -0,0 +1,71 @@
+{
+  "author": {
+    "name": "Redis Ltd.",
+    "email": "[email protected]",
+    "url": "https://redis.com/redis-enterprise/redis-insight"
+  },
+  "bugs": {
+    "url": "https://github.com/"
+  },
+  "description": "Show Profile/Explain Visualization",
+  "source": "./src/main.tsx",
+  "styles": "./dist/styles.css",
+  "main": "./dist/index.js",
+  "name": "explain-plugin",
+  "version": "0.0.1",
+  "scripts": {
+    "start": "cross-env NODE_ENV=development parcel serve src/index.html",
+    "build": "rimraf dist && cross-env NODE_ENV=production concurrently \"yarn build:js && yarn minify:js\" \"yarn build:css\" \"yarn build:assets\"",
+    "build-lite": "rm dist/*.js && cross-env NODE_ENV=production concurrently \"yarn build:js && yarn minify:js\"",
+    "build:js": "parcel build src/main.tsx --dist-dir dist",
+    "build:css": "parcel build src/styles/styles.less --dist-dir dist",
+    "build:assets": "parcel build src/assets/**/* --dist-dir dist",
+    "minify:js": "terser -- dist/main.js > dist/index.js && rimraf dist/main.js"
+  },
+  "targets": {
+    "main": false,
+    "module": {
+      "includeNodeModules": true
+    }
+  },
+  "visualizations": [
+    {
+      "id": "profile-explain-viz",
+      "name": "Visualization",
+      "activationMethod": "renderCore",
+      "matchCommands": [
+        "FT.EXPLAIN",
+        "FT.EXPLAINCLI",
+        "FT.PROFILE",
+        "GRAPH.EXPLAIN",
+        "GRAPH.PROFILE"
+      ],
+      "iconDark": "./dist/profile_icon_dark.svg",
+      "iconLight": "./dist/profile_icon_light.svg",
+      "description": "Profile/Explain plugin Visualization",
+      "default": true
+    }
+  ],
+  "devDependencies": {
+    "@parcel/compressor-brotli": "^2.0.0",
+    "@parcel/compressor-gzip": "^2.0.0",
+    "@parcel/transformer-less": "^2.3.2",
+    "concurrently": "^6.3.0",
+    "cross-env": "^7.0.3",
+    "parcel": "^2.0.0",
+    "rimraf": "^3.0.2",
+    "terser": "^5.9.0"
+  },
+  "dependencies": {
+    "@antv/hierarchy": "^0.6.8",
+    "@antv/x6": "^2.1.3",
+    "@antv/x6-react-shape": "^2.1.0",
+    "@elastic/eui": "34.6.0",
+    "@emotion/react": "^11.7.1",
+    "classnames": "^2.3.1",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "uuid": "^9.0.0"
+  }
+}

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

@@ -0,0 +1,27 @@
+import React from 'react'
+import Explain from './Explain'
+
+const isDarkTheme = document.body.classList.contains('theme_DARK')
+
+export function App(props: { command?: string, data: any }) {
+
+  const ErrorResponse = HandleError(props)
+
+  if (ErrorResponse !== null) return ErrorResponse
+
+  return (
+    <div id="mainApp" style={{ height: "100%", width: '100%', overflowX: 'auto' }}>
+      <Explain command={props.command || ''} data={props.data}/>
+    </div>
+  )
+}
+
+function HandleError(props: { command?: string, data: any }): JSX.Element  | null {
+  const { data: [{ response = '', status = '' } = {}] = [] } = props
+
+  if (status === 'fail') {
+    return <div className="responseFail">{JSON.stringify(response)}</div>
+  }
+
+  return null
+}