Add ability to run a profile/explain right from the query card tab of

graph/search query.

Author: GnaneshKunal

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,
@@ -43,6 +43,7 @@ export interface Props {
   onQueryDelete: () => void
   onQueryReRun: () => void
   onQueryOpen: () => void
+  onQueryProfile: (type: ProfileQueryType) => void
 }
 
 const getDefaultPlugin = (views: IPluginVisualization[], query: string) =>
@@ -74,6 +75,7 @@ const QueryCard = (props: Props) => {
     createdAt,
     onQueryOpen,
     onQueryDelete,
+    onQueryProfile,
     onQueryReRun,
     loading,
     emptyCommand,
@@ -183,6 +185,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'
@@ -69,6 +69,7 @@ export interface Props {
   setSelectedValue: (type: WBQueryType, value: string) => void
   onQueryDelete: () => void
   onQueryReRun: () => void
+  onQueryProfile: (type: ProfileQueryType) => void
 }
 
 const getExecutionTimeString = (value: number): string => {
@@ -108,6 +109,7 @@ const QueryCardHeader = (props: Props) => {
     setSelectedValue,
     onQueryDelete,
     onQueryReRun,
+    onQueryProfile,
   } = props
 
   const { visualizations = [] } = useSelector(appPluginsSelector)
@@ -235,6 +237,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.split(' ')[0].toLowerCase())
+
   const indexForSeparator = findIndex(pluginsOptions, (option) => !option.internal)
   if (indexForSeparator > -1) {
     modifiedOptions.splice(indexForSeparator + 1, 0, {
@@ -318,6 +344,26 @@ const QueryCardHeader = (props: Props) => {
             </EuiToolTip>
           )}
         </EuiFlexItem>
+        <EuiFlexItem
+          grow={false}
+          className={cx(styles.buttonIcon, styles.viewTypeIcon)}
+          onClick={onDropDownViewClick}
+        >
+          {isOpen && profileOptions.length > 1 && 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/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

@@ -3,6 +3,8 @@ import cx from 'classnames'
 import { EuiIcon, EuiText } from '@elastic/eui'
 
 import { Theme } from 'uiSrc/constants'
+import { ProfileQueryType } from 'uiSrc/pages/workbench/constants'
+import { generateProfileQueryForCommand } from 'uiSrc/pages/workbench/utils'
 import { CodeButtonParams } from 'uiSrc/pages/workbench/components/enablement-area/interfaces'
 import { Nullable } from 'uiSrc/utils'
 import QueryCard from 'uiSrc/components/query-card'
@@ -84,6 +86,16 @@ const WBResults = (props: Props) => {
           activeResultsMode={activeResultsMode}
           resultsMode={resultsMode}
           onQueryOpen={() => onQueryOpen(id)}
+          onQueryProfile={(profileType: ProfileQueryType) => {
+            const profileQuery = generateProfileQueryForCommand(command, profileType)
+            if (profileQuery) {
+              return onQueryReRun(
+                profileQuery,
+                null,
+                { mode, results: resultsMode, clearEditor: false, },
+              )
+            }
+          }}
           onQueryReRun={() => onQueryReRun(
             command,
             null,

redisinsight/ui/src/pages/workbench/components/wb-results/WBResults/WBResults.tsx

@@ -27,6 +27,40 @@ export const VIEW_TYPE_OPTIONS = [
 export const getViewTypeOptions = () =>
   [...VIEW_TYPE_OPTIONS]
 
+
+export const SEARCH_COMMANDS = ['ft.search', 'ft.aggregate']
+export const GRAPH_COMMANDS = ['graph.query']
+
+const ALLOWED_PROFILE_COMMANDS = [...SEARCH_COMMANDS, ...GRAPH_COMMANDS]
+
+export function isCommandAllowedForProfile(cmd: string) {
+  return ALLOWED_PROFILE_COMMANDS.includes(cmd)
+}
+
+export enum ProfileQueryType {
+  Profile = 'Profile',
+  Explain = 'Explain'
+}
+
+const PROFILE_VIEW_TYPE_OPTIONS = [
+  {
+    id: ProfileQueryType.Profile,
+    text: 'Profile the command',
+    name: 'Profile',
+    value: WBQueryType.Text,
+  },
+  {
+    id: ProfileQueryType.Explain,
+    text: 'Explain the command',
+    name: 'Explain',
+    value: WBQueryType.Text,
+  },
+]
+
+export const getProfileViewTypeOptions = () =>
+  [...PROFILE_VIEW_TYPE_OPTIONS]
+
+
 export enum ModuleCommandPrefix {
   RediSearch = 'FT.',
 }

redisinsight/ui/src/pages/workbench/constants.ts

@@ -0,0 +1,30 @@
+import { ProfileQueryType, SEARCH_COMMANDS, GRAPH_COMMANDS } from './constants'
+
+function generateGraphProfileQuery(query: string, type: ProfileQueryType) {
+  return [`graph.${type}`, ...query.split(' ').slice(1)].join(' ')
+}
+
+function generateSearchProfileQuery(query: string, type: ProfileQueryType) {
+  const commandSplit = query.split(' ')
+  const key = commandSplit[0].toLowerCase()
+
+  if (type === ProfileQueryType.Explain) {
+    return [`ft.${type}`, ...commandSplit.slice(1)].join(' ')
+  } else {
+    const index = commandSplit[1]
+    const queryType = key.split('.')[1] // SEARCH / AGGREGATE
+    return [`ft.${type}`, index, queryType, 'QUERY', ...commandSplit.slice(2)].join(' ')
+  }
+}
+
+export function generateProfileQueryForCommand(query: string, type: ProfileQueryType) {
+  const cmd = query.split(' ')[0].toLowerCase()
+
+  if (GRAPH_COMMANDS.includes(cmd)) {
+    return generateGraphProfileQuery(query, type)
+  } else if (SEARCH_COMMANDS.includes(cmd)) {
+    return generateSearchProfileQuery(query, type)
+  }
+
+  return null
+}