#RI-985, #RI-2460

redisinsight/ui/src/components/database-list-modules/DatabaseListModules.tsx

@@ -1,5 +1,6 @@
+/* eslint-disable sonarjs/no-nested-template-literals */
 import React, { useContext } from 'react'
-import { EuiButton, EuiButtonIcon, EuiToolTip } from '@elastic/eui'
+import { EuiButtonIcon, EuiIcon, EuiTextColor, EuiToolTip } from '@elastic/eui'
 import cx from 'classnames'
 
 import {
@@ -31,16 +32,14 @@ import { RedisModuleDto } from 'apiSrc/modules/instances/dto/database-instance.d
 import styles from './styles.module.scss'
 
 export interface Props {
-  modules: RedisModuleDto[];
-  inCircle?: boolean;
-  dark?: boolean;
+  modules: RedisModuleDto[]
+  inCircle?: boolean
+  dark?: boolean
+  highlight?: boolean
+  maxViewModules?: number
+  tooltipTitle?: React.ReactNode
 }
 
-interface ITooltipProps {
-  icon: any;
-  content: any;
-  abbreviation?: string;
-}
 export const modulesDefaultInit = {
   [RedisDefaultModules.AI]: {
     iconDark: RedisAIDark,
@@ -79,68 +78,104 @@ export const modulesDefaultInit = {
   },
 }
 
-const DatabaseListModules = React.memo(({ modules, inCircle }: Props) => {
+const DatabaseListModules = React.memo(({ modules, inCircle, highlight, tooltipTitle, maxViewModules }: Props) => {
   const { theme } = useContext(ThemeContext)
 
+  const mainContent = []
+
   const handleCopy = (text = '') => {
     navigator?.clipboard?.writeText(text)
   }
 
-  const Tooltip = ({ icon, content, abbreviation }: ITooltipProps) => (
-    <>
-      <EuiToolTip
-        content={content}
-        position="top"
-        display="inlineBlock"
-        anchorClassName={cx({ [styles.anchorCircleIcon]: inCircle })}
-      >
-        {icon ? (
-          <EuiButtonIcon
-            iconType={icon}
-            className={cx(styles.icon, { [styles.circle]: inCircle })}
-            onClick={() => handleCopy(content)}
-            data-testid={`${content}_module`}
-            aria-labelledby={`${content}_module`}
-          />
-        ) : (
-          <EuiButton
-            className={cx(styles.icon, { [styles.circle]: inCircle })}
-            onClick={() => handleCopy(content)}
-            data-testid={`${content}_module`}
-            aria-labelledby={`${content}_module`}
-          >
-            {abbreviation}
-          </EuiButton>
-        )}
-      </EuiToolTip>
-    </>
-  )
-
-  const modulesRender = modules?.map(({ name: propName, semanticVersion = '', version = '' }) => {
+  const newModules = modules?.map(({ name: propName, semanticVersion = '', version = '' }) => {
     const moduleName = modulesDefaultInit[propName]?.text || propName
 
     const { abbreviation = '', name = moduleName } = getModule(moduleName)
 
     const moduleAlias = truncateText(name, 50)
     // eslint-disable-next-line sonarjs/no-nested-template-literals
-    const content = `${moduleAlias}${semanticVersion || version ? ` v. ${semanticVersion || version}` : ''}`
     let icon = modulesDefaultInit[propName]?.[theme === Theme.Dark ? 'iconDark' : 'iconLight']
+    const content = `${moduleAlias}${semanticVersion || version ? ` v. ${semanticVersion || version}` : ''}`
 
     if (!icon && !abbreviation) {
       icon = theme === Theme.Dark ? UnknownDark : UnknownLight
     }
 
-    return (
-      <Tooltip
-        key={moduleName}
-        icon={icon}
-        abbreviation={abbreviation}
-        content={content}
-      />
-    )
+    mainContent.push({ icon, content, abbreviation })
+
+    return {
+      moduleName,
+      icon,
+      abbreviation,
+      content
+    }
   })
 
-  return <>{modulesRender}</>
+  // set count of hidden modules
+  if (maxViewModules && newModules.length > maxViewModules) {
+    newModules.length = maxViewModules
+    newModules.push({
+      icon: null,
+      content: '',
+      moduleName: '',
+      abbreviation: `+${modules.length - maxViewModules}`
+    })
+  }
+
+  const Content = mainContent.map(({ icon, content, abbreviation = '' }) => (
+    <div className={styles.tooltipItem}>
+      {!!icon && (<EuiIcon type={icon} style={{ marginRight: 10 }} />)}
+      {!icon && (
+        <EuiTextColor
+          className={cx(styles.icon, styles.abbr)}
+          style={{ marginRight: 10 }}
+        >
+          {abbreviation}
+        </EuiTextColor>
+      )}
+      {!!content && (<EuiTextColor className={cx(styles.tooltipItemText)}>{content}</EuiTextColor>)}
+      <br />
+    </div>
+  ))
+
+  return (
+    <div className={cx(styles.container, {
+      [styles.highlight]: highlight,
+      [styles.containerCircle]: inCircle,
+    })}
+    >
+      <EuiToolTip
+        position="bottom"
+        title={tooltipTitle ?? undefined}
+        display="inlineBlock"
+        content={Content}
+      >
+        <>
+          {newModules.map(({ icon, content, abbreviation, moduleName }) => (
+            icon ? (
+              <EuiButtonIcon
+                iconType={icon}
+                className={cx(styles.icon, { [styles.circle]: inCircle })}
+                onClick={() => handleCopy(content)}
+                data-testid={`${content}_module`}
+                aria-labelledby={`${content}_module`}
+                key={moduleName}
+              />
+            ) : (
+              <EuiTextColor
+                className={cx(styles.icon, styles.abbr, { [styles.circle]: inCircle })}
+                onClick={() => handleCopy(content)}
+                data-testid={`${content}_module`}
+                aria-labelledby={`${content}_module`}
+                key={moduleName}
+              >
+                {abbreviation}
+              </EuiTextColor>
+            )))}
+        </>
+      </EuiToolTip>
+    </div>
+  )
 })
 
 export default DatabaseListModules

redisinsight/ui/src/components/database-list-modules/styles.module.scss

@@ -1,30 +1,54 @@
-.circle {
-  background-color: var(--moduleBackgroundColor);
-  border: none !important;
-  width: 28px !important;
-  height: 28px !important;
-  border-radius: 14px !important;
-
-  &:hover,
-  &:focus,
-  &:focus-within {
-    background-color: var(--moduleBackgroundColor) !important;
+.container {
+  height: 24px;
+  line-height: 20px;
+
+  &.highlight {
+    background-color: var(--hoverInListColorLight);
+    border-radius: 12px;
+    padding-left: 6px;
+    padding-right: 6px;
   }
-}
 
-button.icon {
-  width: 28px !important;
-  min-width: 28px !important;
-  max-width: 28px !important;
-  height: 28px !important;
-  * {
-    padding: 0 !important;
+  &.containerCircle {
+    height: 28px;
   }
-  :global(.euiButton__text) {
-    font-size: 13px !important;
+
+  .circle {
+    background-color: var(--moduleBackgroundColor);
+    border: none !important;
+    width: 28px !important;
+    max-width: 28px !important;
+    height: 27px !important;
+    border-radius: 50% !important;
+    margin-right: 14px;
+    padding: 4px;
+
+    &:hover,
+    &:focus,
+    &:focus-within {
+      background-color: var(--moduleBackgroundColor) !important;
+    }
   }
 }
 
-.anchorCircleIcon {
-  margin-right: 14px;
+.icon {
+  margin-right: 4px;
+}
+
+.icon img {
+  width: 18px !important;
+  max-width: 18px !important;
+  height: 16px !important;
+}
+
+.tooltipItem:not(:last-of-type) {
+  padding-bottom: 6px;
+}
+
+.tooltipItemText {
+  vertical-align: text-top;
+}
+
+.abbr {
+  vertical-align: text-top;
 }

redisinsight/ui/src/pages/home/components/DatabasesListComponent/DatabasesListWrapper.tsx

@@ -1,6 +1,7 @@
 import {
   EuiButton,
   EuiButtonIcon,
+  EuiIcon,
   EuiPopover,
   EuiTableFieldDataColumnType,
   EuiText,
@@ -9,7 +10,7 @@ import {
 } from '@elastic/eui'
 import { formatDistanceToNow } from 'date-fns'
 import { capitalize } from 'lodash'
-import React, { useEffect, useState } from 'react'
+import React, { useContext, useEffect, useState } from 'react'
 import { useDispatch, useSelector } from 'react-redux'
 import { useHistory, useLocation } from 'react-router-dom'
 import cx from 'classnames'
@@ -28,9 +29,13 @@ import {
 import { resetKeys } from 'uiSrc/slices/keys'
 import { PageNames, Pages } from 'uiSrc/constants'
 import { sendEventTelemetry, TelemetryEvent } from 'uiSrc/telemetry'
+import { ThemeContext } from 'uiSrc/contexts/themeContext'
 import { formatLongName, getDbIndex, Nullable, replaceSpaces } from 'uiSrc/utils'
 import { appContextSelector, setAppContextInitialState } from 'uiSrc/slices/app/context'
 import { resetCliHelperSettings, resetCliSettingsAction } from 'uiSrc/slices/cli/cli-settings'
+import DatabaseListModules, { ModulesListType } from 'uiSrc/components/database-list-modules/DatabaseListModules'
+import RediStackSVG from 'uiSrc/assets/img/modules/RediStack.svg'
+import { RedisModuleDto } from 'apiSrc/modules/instances/dto/database-instance.dto'
 import DatabasesList from './DatabasesList/DatabasesList'
 
 import styles from './styles.module.scss'
@@ -52,6 +57,7 @@ const DatabasesListWrapper = ({
   const dispatch = useDispatch()
   const history = useHistory()
   const { search } = useLocation()
+  const { theme } = useContext(ThemeContext)
 
   const { contextInstanceId, lastPage } = useSelector(appContextSelector)
   const instances = useSelector(instancesSelector)
@@ -208,7 +214,7 @@ const DatabasesListWrapper = ({
       truncateText: true,
       'data-test-subj': 'database-alias-column',
       sortable: ({ name }) => name?.toLowerCase(),
-      width: '50%',
+      width: '30%',
       render: function InstanceCell(name: string = '', { id, db }: Instance) {
         const cellContent = replaceSpaces(name.substring(0, 200))
         return (
@@ -238,23 +244,11 @@ const DatabasesListWrapper = ({
         )
       },
     },
-    {
-      field: 'connectionType',
-      className: 'column_type',
-      name: 'Connection Type',
-      dataType: 'string',
-      sortable: true,
-      width: '180px',
-      truncateText: true,
-      hideForMobile: true,
-      render: (cellData: ConnectionType) =>
-        CONNECTION_TYPE_DISPLAY[cellData] || capitalize(cellData),
-    },
     {
       field: 'host',
       className: 'column_host',
       name: 'Host:Port',
-      width: '18%',
+      width: '35%',
       dataType: 'string',
       truncateText: true,
       sortable: ({ host, port }) => `${host}:${port}`,
@@ -279,6 +273,40 @@ const DatabasesListWrapper = ({
         )
       },
     },
+    {
+      field: 'connectionType',
+      className: 'column_type',
+      name: 'Connection Type',
+      dataType: 'string',
+      sortable: true,
+      width: '180px',
+      truncateText: true,
+      hideForMobile: true,
+      render: (cellData: ConnectionType) =>
+        CONNECTION_TYPE_DISPLAY[cellData] || capitalize(cellData),
+    },
+    {
+      field: 'modules',
+      className: 'column_modules',
+      name: 'Modules',
+      width: '150px',
+      dataType: 'string',
+      render: (cellData, { modules = [], port, isRediStack }: Instance) => {
+        return (
+          <DatabaseListModules
+            highlight={isRediStack}
+            modules={modules}
+            maxViewModules={3}
+            tooltipTitle={isRediStack ? (
+              <>
+                <EuiIcon type={RediStackSVG} className={styles.redistackIcon} />
+                <span style={{ verticalAlign: 'middle' }}>Redis Stack</span>
+              </>
+            ) : ''}
+          />
+        )
+      },
+    },
     {
       field: 'lastConnection',
       className: 'column_lastConnection',
@@ -316,7 +344,7 @@ const DatabasesListWrapper = ({
   ]
 
   const columnsHideForTablet = ['connectionType']
-  const columnsHideForEditing = ['connectionType']
+  const columnsHideForEditing = ['connectionType', 'modules']
   const columnsTablet = columnsFull.filter(
     ({ field = '' }) => columnsHideForTablet.indexOf(field) === -1
   )