#RI-2457 - Update message in Browser for TimeSeries and Graph data types

Author: egor-zalenski

redisinsight/ui/src/constants/keys.ts

@@ -11,8 +11,11 @@ export enum KeyTypes {
 }
 
 export enum UnsupportedKeyTypes {
-  Graph = 'graphdata',
   Stream = 'stream',
+}
+
+export enum ModulesKeyTypes {
+  Graph = 'graphdata',
   TimeSeries = 'TSDB-TYPE',
 }
 
@@ -25,8 +28,8 @@ export const GROUP_TYPES_DISPLAY = Object.freeze({
   [KeyTypes.ReJSON]: 'JSON',
   [KeyTypes.JSON]: 'JSON',
   [UnsupportedKeyTypes.Stream]: 'Stream',
-  [UnsupportedKeyTypes.Graph]: 'GRAPH',
-  [UnsupportedKeyTypes.TimeSeries]: 'TS',
+  [ModulesKeyTypes.Graph]: 'GRAPH',
+  [ModulesKeyTypes.TimeSeries]: 'TS',
   [CommandGroup.Bitmap]: 'Bitmap',
   [CommandGroup.Cluster]: 'Cluster',
   [CommandGroup.Connection]: 'Connection',
@@ -54,8 +57,8 @@ export const GROUP_TYPES_COLORS = Object.freeze({
   [KeyTypes.ReJSON]: 'var(--typeReJSONColor)',
   [KeyTypes.JSON]: 'var(--typeReJSONColor)',
   [UnsupportedKeyTypes.Stream]: 'var(--typeStreamColor)',
-  [UnsupportedKeyTypes.Graph]: 'var(--typeGraphColor)',
-  [UnsupportedKeyTypes.TimeSeries]: 'var(--typeTimeSeriesColor)',
+  [ModulesKeyTypes.Graph]: 'var(--typeGraphColor)',
+  [ModulesKeyTypes.TimeSeries]: 'var(--typeTimeSeriesColor)',
   [CommandGroup.SortedSet]: 'var(--groupSortedSetColor)',
   [CommandGroup.Bitmap]: 'var(--groupBitmapColor)',
   [CommandGroup.Cluster]: 'var(--groupClusterColor)',
@@ -107,7 +110,12 @@ export enum SortOrder {
 }
 
 export const LENGTH_NAMING_BY_TYPE = Object.freeze({
-  [UnsupportedKeyTypes.Graph]: 'Nodes',
-  [UnsupportedKeyTypes.TimeSeries]: 'Samples',
+  [ModulesKeyTypes.Graph]: 'Nodes',
+  [ModulesKeyTypes.TimeSeries]: 'Samples',
   [UnsupportedKeyTypes.Stream]: 'Entries'
 })
+
+export const MODULES_KEY_TYPES_NAMES = Object.freeze({
+  [ModulesKeyTypes.Graph]: 'RedisGraph',
+  [ModulesKeyTypes.TimeSeries]: 'RedisTimeSeries',
+})

redisinsight/ui/src/constants/prop-types/keys.ts

@@ -1,16 +1,16 @@
-import { KeyTypes } from '../keys'
+import { KeyTypes, ModulesKeyTypes } from '../keys'
 
 export interface IKeyPropTypes {
-  name: string;
-  type: KeyTypes;
-  ttl: number;
-  size: number;
-  length: number;
+  name: string
+  type: KeyTypes | ModulesKeyTypes
+  ttl: number
+  size: number
+  length: number
 }
 
 export interface IKeyListPropTypes {
-  nextCursor: string;
-  total: number;
-  scanned: number;
-  keys: IKeyPropTypes[];
+  nextCursor: string
+  total: number
+  scanned: number
+  keys: IKeyPropTypes[]
 }

redisinsight/ui/src/pages/browser/components/filter-key-type/constants.ts

@@ -1,6 +1,7 @@
 import {
   GROUP_TYPES_COLORS,
   KeyTypes,
+  ModulesKeyTypes,
   UnsupportedKeyTypes,
 } from 'uiSrc/constants'
 
@@ -42,12 +43,12 @@ export const FILTER_KEY_TYPE_OPTIONS = [
   },
   {
     text: 'GRAPH',
-    value: UnsupportedKeyTypes.Graph,
-    color: GROUP_TYPES_COLORS[UnsupportedKeyTypes.Graph],
+    value: ModulesKeyTypes.Graph,
+    color: GROUP_TYPES_COLORS[ModulesKeyTypes.Graph],
   },
   {
     text: 'TS',
-    value: UnsupportedKeyTypes.TimeSeries,
-    color: GROUP_TYPES_COLORS[UnsupportedKeyTypes.TimeSeries],
+    value: ModulesKeyTypes.TimeSeries,
+    color: GROUP_TYPES_COLORS[ModulesKeyTypes.TimeSeries],
   },
 ]

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

@@ -6,11 +6,12 @@ import {
 import { isNull } from 'lodash'
 import { useSelector } from 'react-redux'
 import cx from 'classnames'
-import { KeyTypes } from 'uiSrc/constants'
+
 import {
   selectedKeyDataSelector,
   selectedKeySelector,
 } from 'uiSrc/slices/keys'
+import { KeyTypes, ModulesKeyTypes, MODULES_KEY_TYPES_NAMES } from 'uiSrc/constants'
 import { connectedInstanceSelector } from 'uiSrc/slices/instances'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
 import AddHashFields from '../../key-details-add-items/add-hash-fields/AddHashFields'
@@ -26,6 +27,7 @@ import ListDetails from '../../list-details/ListDetails'
 import RejsonDetailsWrapper from '../../rejson-details/RejsonDetailsWrapper'
 import RemoveListElements from '../../key-details-remove-items/remove-list-elements/RemoveListElements'
 import UnsupportedTypeDetails from '../../unsupported-type-details/UnsupportedTypeDetails'
+import ModulesTypeDetails from '../../modules-type-details/ModulesTypeDetails'
 
 import styles from '../styles.module.scss'
 
@@ -149,7 +151,12 @@ const KeyDetails = ({ ...props }: Props) => {
                       <RejsonDetailsWrapper />
                     )}
 
-                    {!(Object.values(KeyTypes).includes(selectedKeyType)) && (
+                    {(Object.values(ModulesKeyTypes).includes(selectedKeyType)) && (
+                      <ModulesTypeDetails moduleName={MODULES_KEY_TYPES_NAMES[selectedKeyType]} />
+                    )}
+
+                    {!(Object.values(KeyTypes).includes(selectedKeyType))
+                    && !(Object.values(ModulesKeyTypes).includes(selectedKeyType)) && (
                       <UnsupportedTypeDetails />
                     )}
                   </div>

redisinsight/ui/src/pages/browser/components/modules-type-details/ModulesTypeDetails.spec.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { ModulesKeyTypes, MODULES_KEY_TYPES_NAMES } from 'uiSrc/constants'
+import { render } from 'uiSrc/utils/test-utils'
+
+import ModulesTypeDetails from './ModulesTypeDetails'
+
+describe('ModulesTypeDetails', () => {
+  it('should render', () => {
+    expect(render(<ModulesTypeDetails moduleName={MODULES_KEY_TYPES_NAMES[ModulesKeyTypes.Graph]} />)).toBeTruthy()
+  })
+})

redisinsight/ui/src/pages/browser/components/modules-type-details/ModulesTypeDetails.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'
+import { useHistory } from 'react-router-dom'
+import { useSelector } from 'react-redux'
+
+import { Pages } from 'uiSrc/constants'
+import { connectedInstanceSelector } from 'uiSrc/slices/instances'
+
+import styles from '../unsupported-type-details/styles.module.scss'
+
+const ModulesTypeDetails = ({ moduleName = 'unsupported' }: { moduleName: string }) => {
+  const history = useHistory()
+  const { id: connectedInstanceId = '' } = useSelector(connectedInstanceSelector)
+
+  const handleGoWorkbenchPage = (e: React.MouseEvent) => {
+    e.preventDefault()
+    history.push(Pages.workbench(connectedInstanceId))
+  }
+
+  return (
+    <div className={styles.container} data-testid="modules-type-details">
+      <EuiFlexGroup alignItems="center" justifyContent="center">
+        <EuiFlexItem className={styles.textWrapper}>
+          <EuiTitle>
+            <h4>{`This is ${moduleName} key.`}</h4>
+          </EuiTitle>
+          <EuiText size="s">
+            {'Use Redis commands in the '}
+            <a
+              tabIndex={0}
+              onClick={handleGoWorkbenchPage}
+              className={styles.link}
+              onKeyDown={() => ({})}
+              role="link"
+              rel="noreferrer"
+            >
+              Workbench
+            </a>
+            {' tool to view the value.'}
+          </EuiText>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+    </div>
+  )
+}
+
+export default ModulesTypeDetails

redisinsight/ui/src/pages/browser/components/unsupported-type-details/UnsupportedTypeDetails.tsx

@@ -4,7 +4,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiText, EuiTitle } from '@elastic/eui'
 import styles from './styles.module.scss'
 
 const UnsupportedTypeDetails = () => (
-  <div className={styles.container}>
+  <div className={styles.container} data-testid="unsupported-type-details">
     <EuiFlexGroup alignItems="center" justifyContent="center">
       <EuiFlexItem className={styles.textWrapper}>
         <EuiTitle>

redisinsight/ui/src/pages/browser/components/unsupported-type-details/styles.module.scss

@@ -9,7 +9,8 @@
   h4 {
     font-size: 18px;
     font-weight: normal;
-    margin-bottom: 16px;
+    margin-bottom: 18px;
+    line-height: 24px;
   }
 }
 
@@ -22,4 +23,5 @@
 .link {
   text-decoration: underline;
   color: currentColor;
+  color: var(--euiColorPrimary);
 }