[Plugin] EXPLAIN/PROFILE Visualization

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

@@ -4,7 +4,7 @@ import cx from 'classnames'
 import { EuiLoadingContent, keys } from '@elastic/eui'
 import { useParams } from 'react-router-dom'
 
-import { WBQueryType } from 'uiSrc/pages/workbench/constants'
+import { WBQueryType, ProfileQueryType } from 'uiSrc/pages/workbench/constants'
 import { RunQueryMode, ResultsMode, ResultsSummary } from 'uiSrc/slices/interfaces/workbench'
 import {
   getWBQueryType,
@@ -44,6 +44,7 @@ export interface Props {
   onQueryDelete: () => void
   onQueryReRun: () => void
   onQueryOpen: () => void
+  onQueryProfile: (type: ProfileQueryType) => void
 }
 
 const getDefaultPlugin = (views: IPluginVisualization[], query: string) =>
@@ -75,6 +76,7 @@ const QueryCard = (props: Props) => {
     createdAt,
     onQueryOpen,
     onQueryDelete,
+    onQueryProfile,
     onQueryReRun,
     loading,
     emptyCommand,
@@ -186,6 +188,7 @@ const QueryCard = (props: Props) => {
           setSelectedValue={changeViewTypeSelected}
           onQueryDelete={onQueryDelete}
           onQueryReRun={onQueryReRun}
+          onQueryProfile={onQueryProfile}
         />
         {isOpen && (
           <>

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

@@ -32,7 +32,7 @@ import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { appPluginsSelector } from 'uiSrc/slices/app/plugins'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
-import { getViewTypeOptions, WBQueryType } from 'uiSrc/pages/workbench/constants'
+import { getViewTypeOptions, WBQueryType, getProfileViewTypeOptions, ProfileQueryType, isCommandAllowedForProfile } from 'uiSrc/pages/workbench/constants'
 import { IPluginVisualization } from 'uiSrc/slices/interfaces'
 import { RunQueryMode, ResultsMode, ResultsSummary } from 'uiSrc/slices/interfaces/workbench'
 import { appRedisCommandsSelector } from 'uiSrc/slices/app/redis-commands'
@@ -70,6 +70,7 @@ export interface Props {
   setSelectedValue: (type: WBQueryType, value: string) => void
   onQueryDelete: () => void
   onQueryReRun: () => void
+  onQueryProfile: (type: ProfileQueryType) => void
 }
 
 const getExecutionTimeString = (value: number): string => {
@@ -109,6 +110,7 @@ const QueryCardHeader = (props: Props) => {
     setSelectedValue,
     onQueryDelete,
     onQueryReRun,
+    onQueryProfile,
     db,
   } = props
 
@@ -237,6 +239,30 @@ const QueryCardHeader = (props: Props) => {
     }
   })
 
+  const profileOptions: EuiSuperSelectOption<any>[] = (getProfileViewTypeOptions() as any[]).map((item) => {
+    const { value, id, text } = item
+    return {
+      value: id ?? value,
+      inputDisplay: (
+        <div className={cx(styles.dropdownOption, styles.dropdownProfileOption)}>
+          <EuiIcon
+            className={styles.iconDropdownOption}
+            type="visTagCloud"
+            data-testid={`view-type-selected-${value}-${id}`}
+          />
+        </div>
+      ),
+      dropdownDisplay: (
+        <div className={cx(styles.dropdownOption, styles.dropdownProfileOption)}>
+          <span>{truncateText(text, 20)}</span>
+        </div>
+      ),
+      'data-test-subj': `profile-type-option-${value}-${id}`,
+    }
+  })
+
+  const canCommandProfile = isCommandAllowedForProfile(query)
+
   const indexForSeparator = findIndex(pluginsOptions, (option) => !option.internal)
   if (indexForSeparator > -1) {
     modifiedOptions.splice(indexForSeparator + 1, 0, {
@@ -320,6 +346,26 @@ const QueryCardHeader = (props: Props) => {
             </EuiToolTip>
           )}
         </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+          className={cx(styles.buttonIcon, styles.viewTypeIcon)}
+          onClick={onDropDownViewClick}
+        >
+          {isOpen && canCommandProfile && !summaryText && (
+            <div className={styles.dropdownWrapper}>
+              <div className={styles.dropdown}>
+                <EuiSuperSelect
+                  options={profileOptions}
+                  itemClassName={cx(styles.changeViewItem, styles.dropdownProfileItem)}
+                  className={cx(styles.changeView, styles.dropdownProfileIcon)}
+                  valueOfSelected={ProfileQueryType.Profile}
+                  onChange={(value: ProfileQueryType) => onQueryProfile(value)}
+                  data-testid="run-profile-type"
+                />
+              </div>
+            </div>
+          )}
+        </EuiFlexItem>
         <EuiFlexItem
           grow={false}
           className={cx(styles.buttonIcon, styles.viewTypeIcon)}

redisinsight/ui/src/components/query-card/QueryCardHeader/styles.module.scss

@@ -127,6 +127,27 @@ $marginIcon: 12px;
   height: 40px;
 }
 
+.dropdownProfileIcon {
+  padding: inherit !important;
+  :global {
+    .euiSuperSelectControl.euiFormControlLayoutIcons {
+      display: none !important;
+    }
+  }
+}
+
+.dropdownProfileOption {
+  display: inherit !important;
+}
+
+.dropdownProfileItem {
+  :global {
+    .euiContextMenu__icon {
+      display: none !important;
+    }
+  }
+}
+
 .dropdown {
   width: 168px;
   position: absolute;

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": "support@redis.com",
+    "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
+}