merge main into release/2.20.0

configs/webpack.config.web.prod.babel.js

@@ -25,9 +25,10 @@ export default merge(commonConfig, {
   target: 'web',
   entry: ['regenerator-runtime/runtime', './index.tsx'],
   output: {
-    filename: 'js/bundle.[fullhash].min.js',
+    filename: 'js/bundle.[name].min.js',
     path: resolve(__dirname, '../redisinsight/ui/dist'),
     publicPath: '/',
+    chunkFilename: '[id].[chunkhash].js'
   },
   optimization: {
     minimize: true,
@@ -37,6 +38,34 @@ export default merge(commonConfig, {
       }),
       new CssMinimizerPlugin(),
     ],
+    runtimeChunk: 'single',
+    splitChunks: {
+      chunks: 'all',
+      maxInitialRequests: Infinity,
+      minSize: 0,
+      cacheGroups: {
+        reactVendor: {
+          test: /[\\/]node_modules[\\/](react|react-dom)[\\/]/,
+          name: "reactVendor"
+        },
+        elasticVendor: {
+          test: /[\\/]node_modules[\\/](@elastic)[\\/]/,
+          name: "elasticVendor"
+        },
+        monacoVendor: {
+          test: /[\\/]node_modules[\\/](monaco-editor)[\\/]/,
+          name: "monacoVendor"
+        },
+        utilityVendor: {
+          test: /[\\/]node_modules[\\/](lodash)[\\/]/,
+          name: "utilityVendor"
+        },
+        vendor: {
+          test: /[\\/]node_modules[\\/](!@elastic)(!monaco-editor)(!lodash)[\\/]/,
+          name: "vendor"
+        },
+      },
+    },
   },
   plugins: [
     new MiniCssExtractPlugin({

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>
+        {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/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/components/uploadFile/UploadFile.tsx → redisinsight/ui/src/components/upload-file/UploadFile.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { EuiButtonEmpty, EuiText } from '@elastic/eui'
+import { EuiButtonEmpty, EuiText, EuiIcon } from '@elastic/eui'
 
 import styles from './styles.module.scss'
 
@@ -10,18 +10,18 @@ export interface Props {
 
 const UploadFile = ({ onFileChange, onClick }: Props) => (
   <EuiButtonEmpty
-    iconType="folderOpen"
     className={styles.emptyBtn}
+    onClick={onClick}
   >
     <label htmlFor="upload-input-file" className={styles.uploadBtn}>
+      <EuiIcon className={styles.icon} type="folderOpen" />
       <EuiText className={styles.label}>Upload</EuiText>
       <input
         type="file"
         id="upload-input-file"
         data-testid="upload-input-file"
         accept="application/json, text/plain"
         onChange={onFileChange}
-        onClick={onClick}
         className={styles.fileDrop}
         aria-label="Select file"
       />

redisinsight/ui/src/components/uploadFile/styles.module.scss → redisinsight/ui/src/components/upload-file/styles.module.scss

@@ -5,6 +5,7 @@
 .uploadBtn {
   display: flex;
   cursor: pointer;
+  padding: 4px 12px;
 }
 
 .emptyBtn:global(.euiButtonEmpty) {
@@ -13,7 +14,14 @@
 }
 
 .emptyBtn:global(.euiButtonEmpty .euiButtonEmpty__content) {
-  padding: 0 12px;
+  padding: 0;
+}
+
+.emptyBtn .icon {
+  width: 14px;
+  height: 14px;
+  margin: 2px 4px 0 0;
+  color: var(--inputTextColor);
 }
 
 :global(.euiButtonEmpty.euiButtonEmpty--primary).emptyBtn .label {

redisinsight/ui/src/packages/clients-list/README.md

@@ -20,6 +20,9 @@ This command will generate the `vendor` folder with styles and fonts of the core
 inside the folder for your plugin and include appropriate styles to the `index.html` file.
 
 ```
+yarn
+yarn --cwd redisinsight/api/ install
+
 yarn build:statics - for Linux or MacOs
 yarn build:statics:win - for Windows
 ```

redisinsight/ui/src/packages/clients-list/package.json

@@ -45,16 +45,13 @@
   ],
   "devDependencies": {
     "@babel/core": "^7.12.0",
-    "@parcel/compressor-brotli": "^2.0.0",
-    "@parcel/compressor-gzip": "^2.0.0",
-    "@parcel/transformer-sass": "^2.0.0",
-    "@parcel/transformer-typescript-tsc": "^2.3.2",
+    "@parcel/transformer-sass": "2.3.2",
     "@types/node": "^17.0.21",
     "@types/react": "^17.0.40",
     "@types/react-dom": "^17.0.13",
     "concurrently": "^6.3.0",
     "cross-env": "^7.0.3",
-    "parcel": "^2.0.0",
+    "parcel": "2.3.2",
     "rimraf": "^3.0.2",
     "terser": "^5.9.0",
     "typescript": ">=3.0.0"

redisinsight/ui/src/packages/clients-list/src/index.html

@@ -5,13 +5,13 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Client list plugin</title>
-  <link rel="stylesheet" href="../../../RedisInsight/vendor/global_styles.css" />
-  <link rel="stylesheet" href="../../../RedisInsight/vendor/dark_theme.css" />
-  <!-- <link rel="stylesheet" href="../../../RedisInsight/vendor/light_theme.css" /> -->
+  <link rel="stylesheet" href="../../../../../../vendor/global_styles.css" type="text/css" />
+  <link rel="stylesheet" href="../../../../../../vendor/dark_theme.css" type="text/css" />
+  <!-- <link rel="stylesheet" href="../../../../../../vendor/light_theme.css" /> -->
   <link rel="stylesheet" href="./styles/styles.scss" />
 </head>
 <body>
   <div id="app"></div>
-  <script src="./main.tsx"></script>
+  <script type="module" src="./main.tsx"></script>
 </body>
 </html>

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

@@ -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/src/App.tsx

@@ -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/constants/constants.ts

@@ -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/ri-explain/README.md

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