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

Feature/ri 3726 profile explain

Author: vlad-dargel

redisinsight/ui/src/assets/img/workbench/vis_tag_cloud.svg

@@ -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/QueryCard.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>
+        {isOpen && canCommandProfile && !summaryText && (
+          <EuiFlexItem
+            grow={false}
+            className={cx(styles.buttonIcon, styles.viewTypeIcon)}
+            onClick={onDropDownViewClick}
+          >
+            <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/QueryCardHeader.tsx

@@ -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/components/query-card/QueryCardHeader/styles.module.scss

@@ -43,6 +43,18 @@
       "iconLight": "./dist/table_view_icon_light.svg",
       "description": "RediSearch default plugin",
       "default": true
+    },
+    {
+      "id": "redisearch-profile",
+      "name": "Table",
+      "activationMethod": "renderRediSearch",
+      "matchCommands": [
+        "FT.PROFILE"
+      ],
+      "iconDark": "./dist/table_view_icon_dark.svg",
+      "iconLight": "./dist/table_view_icon_light.svg",
+      "description": "RediSearch default plugin",
+      "default": false
     }
   ],
   "devDependencies": {

redisinsight/ui/src/packages/redisearch/package.json

@@ -9,7 +9,7 @@ import {
   parseSearchRawResponse,
   parseAggregateRawResponse
 } from './utils'
-import { Command } from './constants'
+import { Command, ProfileType } from './constants'
 import { TableInfoResult, TableResult } from './components'
 
 interface Props {
@@ -35,16 +35,25 @@ const App = (props: Props) => {
     return <TableInfoResult query={command} result={result} />
   }
 
-  if (commandUpper.startsWith(Command.Aggregate)) {
-    const [matched, ...arrayResponse] = response
+  const isProfileCommand = commandUpper.startsWith(Command.Profile)
+  const profileQueryType = command?.split(' ')?.[2]
+
+  if (
+    commandUpper.startsWith(Command.Aggregate)
+    || (isProfileCommand && profileQueryType.toUpperCase() === ProfileType.Aggregate)
+  ) {
+    const [matched, ...arrayResponse] = isProfileCommand ? response[0] : response
     setHeaderText(`Matched:${matched}`)
 
     const result = parseAggregateRawResponse(arrayResponse)
     return <TableResult query={command} result={result} matched={matched} />
   }
 
-  if (commandUpper.startsWith(Command.Search)) {
-    const [matched, ...arrayResponse] = response
+  if (
+    commandUpper.startsWith(Command.Search)
+    || (isProfileCommand && profileQueryType.toUpperCase() === ProfileType.Search)
+  ) {
+    const [matched, ...arrayResponse] = isProfileCommand ? response[0] : response
     setHeaderText(`Matched:${matched}`)
 
     const result = parseSearchRawResponse(command, arrayResponse)

redisinsight/ui/src/packages/redisearch/src/App.tsx

@@ -4,6 +4,12 @@ export enum Command {
   Search = 'FT.SEARCH',
   Aggregate = 'FT.AGGREGATE',
   Info = 'FT.INFO',
+  Profile = 'FT.PROFILE',
+}
+
+export enum ProfileType {
+  Search = 'SEARCH',
+  Aggregate = 'AGGREGATE',
 }
 
 export enum CommandArgument {

redisinsight/ui/src/packages/redisearch/src/constants/constants.ts

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

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

@@ -0,0 +1,72 @@
+{
+  "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",
+    "redisinsight-plugin-sdk": "^1.1.0",
+    "uuid": "^9.0.0"
+  }
+}

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

@@ -0,0 +1,25 @@
+import React from 'react'
+import Explain from './Explain'
+
+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%', overflow: 'hidden'}}>
+      <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
+}