Merge pull request #1794 from RedisInsight/main

merge main into release/2.20.0

Author: vlad-dargel

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/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

@@ -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/UploadFile.spec.tsx renamed to redisinsight/ui/src/components/upload-file/UploadFile.spec.tsx

@@ -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/components/uploadFile/UploadFile.tsx renamed to redisinsight/ui/src/components/upload-file/UploadFile.tsx

@@ -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
 ```