Merge pull request #669 from RedisInsight/feature/bugfix

#RI-2909, #RI-2910, #RI-2908, #RI-2926, #RI-2292, #RI-2805

Author: egor-zalenski

redisinsight/ui/src/components/notifications/success-messages.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { EXTERNAL_LINKS } from 'uiSrc/constants/links'
 import { formatNameShort, Maybe } from 'uiSrc/utils'
 import styles from './styles.module.scss'
 
@@ -110,8 +111,12 @@ export default {
   },
   INSTALLED_NEW_UPDATE: (updateDownloadedVersion: string) => ({
     title: 'Application updated',
-    message: `Your application has been updated to ${updateDownloadedVersion}. Find more
-    information in Release Notes.`,
+    message: (
+      <>
+        <span>{`Your application has been updated to ${updateDownloadedVersion}. Find more information in `}</span>
+        <a href={EXTERNAL_LINKS.releaseNotes} className="link-underline" target="_blank" rel="noreferrer">Release Notes.</a>
+      </>
+    ),
     group: 'upgrade'
   }),
 }

redisinsight/ui/src/constants/links.ts

@@ -1,5 +1,5 @@
 export const EXTERNAL_LINKS = {
   githubRepo: 'https://github.com/RedisInsight/RedisInsight',
   githubIssues: 'https://github.com/RedisInsight/RedisInsight/issues',
-  releaseNotes: 'https://docs.redis.com/staging/release-ri-v2.0/ri/release-notes/',
+  releaseNotes: 'https://github.com/RedisInsight/RedisInsight/releases',
 }

redisinsight/ui/src/pages/browser/components/auto-refresh/AutoRefresh.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { EuiButtonIcon, EuiPopover, EuiSwitch, EuiTextColor, EuiToolTip } from '@elastic/eui'
+import { EuiButtonIcon, EuiIcon, EuiPopover, EuiSwitch, EuiTextColor, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
 
 import {
@@ -216,6 +216,7 @@ const AutoRefresh = ({
               data-testid="refresh-rate"
             >
               {`${refreshRate} s`}
+              <div className={styles.refreshRatePencil}><EuiIcon type="pencil" /></div>
             </EuiTextColor>
           )}
           {editingRate && (

redisinsight/ui/src/pages/browser/components/auto-refresh/styles.module.scss

@@ -1,5 +1,6 @@
 .container {
   position: relative;
+  white-space: nowrap;
 }
 
 .btn {
@@ -116,6 +117,21 @@
   }
 }
 
+.refreshRatePencil {
+  display: none;
+  right: 61px;
+  margin-bottom: 3px;
+  background-color: var(--browserTableRowEven);
+  width: 26px !important;
+  height: 28px !important;
+  padding: 5px;
+  position: absolute;
+
+  svg {
+    margin-top: -16px !important;
+  }
+}
+
 .refreshRateText {
   display: inline-block;
   width: 80px;
@@ -126,5 +142,9 @@
   &:hover {
     padding-left: 5px;
     border-color: var(--controlsBorderColor);
+
+    .refreshRatePencil {
+      display: inline-block !important;
+    }
   }
 }

redisinsight/ui/src/pages/browser/components/key-details-header/KeyDetailsHeader.tsx

@@ -54,7 +54,7 @@ const initialKeyInfo = {
 }
 
 const PADDING_WRAPPER_SIZE = 36
-const HIDE_LAST_REFRESH = 770 - PADDING_WRAPPER_SIZE
+const HIDE_LAST_REFRESH = 750 - PADDING_WRAPPER_SIZE
 const MIDDLE_SCREEN_RESOLUTION = 640 - PADDING_WRAPPER_SIZE
 
 const KeyDetailsHeader = ({

redisinsight/ui/src/pages/slowLog/components/SlowLogConfig/SlowLogConfig.tsx

@@ -11,7 +11,7 @@ import {
 import { toNumber } from 'lodash'
 import React, { ChangeEvent, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
-import { useHistory, useParams } from 'react-router-dom'
+import { useParams } from 'react-router-dom'
 import cx from 'classnames'
 import {
   DEFAULT_SLOWLOG_DURATION_UNIT,
@@ -20,15 +20,13 @@ import {
   DurationUnits,
   DURATION_UNITS,
   MINUS_ONE,
-  Pages
 } from 'uiSrc/constants'
 import { ConnectionType } from 'uiSrc/slices/interfaces'
 import { ConfigDBStorageItem } from 'uiSrc/constants/storage'
 import { setDBConfigStorageField } from 'uiSrc/services'
 import { patchSlowLogConfigAction, slowLogConfigSelector, slowLogSelector } from 'uiSrc/slices/slowlog/slowlog'
 import { errorValidateNegativeInteger, validateNumber } from 'uiSrc/utils'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances/instances'
-import { openCli } from 'uiSrc/slices/cli/cli-settings'
 import { numberWithSpaces } from 'uiSrc/utils/numbers'
 import { convertNumberByUnits } from '../../utils'
 import styles from './styles.module.scss'
@@ -40,7 +38,6 @@ export interface Props {
 
 const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
   const options = DURATION_UNITS
-  const history = useHistory()
   const { instanceId } = useParams<{ instanceId: string }>()
   const { connectionType } = useSelector(connectedInstanceSelector)
   const { loading, durationUnit: durationUnitStore } = useSelector(slowLogSelector)
@@ -99,46 +96,18 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
     closePopover()
   }
 
-  const handleGoWorkbenchPage = (e: React.MouseEvent) => {
-    e.preventDefault()
-    history.push(Pages.workbench(instanceId))
-  }
-
-  const handleOpenCli = (e: React.MouseEvent) => {
-    e.preventDefault()
-    dispatch(openCli())
-  }
-
-  const disabledApplyBtn = () => errorValidateNegativeInteger(`${slowerThan}`)
+  const disabledApplyBtn = () => errorValidateNegativeInteger(`${slowerThan}`) || loading
 
   const clusterContent = () => (
     <>
       <EuiText color="subdued" className={styles.clusterText}>
-        {'Each node can have different Slow Log configuration in a clustered database. Use '}
-        <a
-          tabIndex={0}
-          onClick={handleOpenCli}
-          className={styles.link}
-          data-testid="internal-cli-link"
-          onKeyDown={() => ({})}
-          role="link"
-          rel="noreferrer"
-        >
-          CLI
-        </a>
+        Each node can have different Slow Log configuration in a clustered database.
+        <EuiSpacer size="s" />
+        {'Use '}
+        <code>CONFIG SET slowlog-log-slower-than</code>
         {' or '}
-        <a
-          tabIndex={0}
-          onClick={handleGoWorkbenchPage}
-          className={styles.link}
-          data-testid="internal-workbench-link"
-          onKeyDown={() => ({})}
-          role="link"
-          rel="noreferrer"
-        >
-          Workbench
-        </a>
-        {' to configure it.'}
+        <code>CONFIG SET slowlog-max-len</code>
+        {' specific node in redis-cli to configure it.'}
       </EuiText>
 
       <EuiSpacer size="xs" />
@@ -186,7 +155,6 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
                   onChange={(e: ChangeEvent<HTMLInputElement>) => {
                     setSlowerThan(validateNumber(e.target.value.trim(), Infinity, -1))
                   }}
-                  isLoading={loading}
                   autoComplete="off"
                   data-testid="slower-than-input"
                 />
@@ -219,12 +187,11 @@ const SlowLogConfig = ({ closePopover, onRefresh }: Props) => {
                   placeholder={`${slowlogMaxLen}`}
                   value={maxLen}
                   onChange={(e: ChangeEvent<HTMLInputElement>) => { setMaxLen(validateNumber(e.target.value.trim())) }}
-                  isLoading={loading}
                   autoComplete="off"
                   data-testid="max-len-input"
                 />
                 <div className={styles.helpText}>
-                  The length of the Slow Log.When a new command is logged the oldest
+                  The length of the Slow Log. When a new command is logged the oldest
                   <br />
                   one is removed from the queue of logged commands.
                 </div>

redisinsight/ui/src/pages/slowLog/components/SlowLogConfig/styles.module.scss

@@ -7,7 +7,7 @@
 
 .containerCluster {
   width: 394px;
-  height: 88px;
+  height: 150px;
 }
 
 .selectWrapper {
@@ -105,6 +105,18 @@
   a {
     color: var(--euiColorFullShade) !important;
   }
+
+  code {
+    font-size: 13px;
+    line-height: 18px;
+    padding-left: 4px;
+    padding-right: 4px;
+    color: var(--inputTextColor);
+
+    &:last-of-type {
+      padding-left: 0 !important;
+    }
+  }
 }
 
 .clusterBtn {

redisinsight/ui/src/utils/validations.ts

@@ -91,7 +91,7 @@ export const validateRefreshRateNumber = (initValue: string) => {
     return MAX_REFRESH_RATE.toString()
   }
 
-  if (+value < 0 || (+value === 0 && initValue !== '0')) {
+  if (+value < 0) {
     return ''
   }