Merge pull request #417 from RedisInsight/bugfix/RI-2589

#RI-2589 - fix sorting of modules for overview tooltip

Author: rsergeenko

redisinsight/ui/src/components/database-overview/DatabaseOverview.tsx

@@ -4,6 +4,7 @@ import { EuiFlexGroup, EuiFlexItem, EuiIcon, EuiToolTip } from '@elastic/eui'
 import MoreInfoPopover from 'uiSrc/components/database-overview/components/MoreInfoPopover'
 import { Theme } from 'uiSrc/constants'
 import { ThemeContext } from 'uiSrc/contexts/themeContext'
+import { sortModulesByName } from 'uiSrc/utils/modules'
 
 import RediStackDark from 'uiSrc/assets/img/modules/redistack/RediStackDark.svg'
 import RediStackDarkLogo from 'uiSrc/assets/img/modules/redistack/RediStackDark-min.svg'
@@ -21,7 +22,7 @@ interface Props {
   windowDimensions: number
   metrics?: Array<IMetric>
   modules?: Array<RedisModuleDto>
-  isRediStack: boolean
+  isRediStack?: boolean
 }
 
 interface IState<T> {
@@ -56,9 +57,11 @@ const DatabaseOverview = (props: Props) => {
       }
     })
     setMetrics(metricsState)
+
+    const sortedModules = sortModulesByName(modulesProps)
     setModules({
-      visible: modulesProps.slice(0, resolutionLimits.modules),
-      hidden: modulesProps.slice(resolutionLimits.modules)
+      visible: sortedModules.slice(0, resolutionLimits.modules),
+      hidden: sortedModules.slice(resolutionLimits.modules)
     })
   }, [windowDimensions, metricsProps, modulesProps])
 

redisinsight/ui/src/utils/modules.ts

@@ -1,4 +1,5 @@
 import { DATABASE_LIST_MODULES_TEXT, RedisDefaultModules } from 'uiSrc/slices/interfaces'
+import { RedisModuleDto } from 'apiSrc/modules/instances/dto/database-instance.dto'
 
 export interface IDatabaseModule {
   abbreviation: string
@@ -8,16 +9,19 @@ export interface IDatabaseModule {
   [key: string]: any
 }
 
-const PREDEFINED_MODULES_ORDER = [
-  DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Search],
-  DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.ReJSON],
-  DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Graph],
-  DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.TimeSeries],
-  DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Bloom],
-  DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.Gears],
-  DATABASE_LIST_MODULES_TEXT[RedisDefaultModules.AI]
+const PREDEFINED_MODULE_NAMES_ORDER: string[] = [
+  RedisDefaultModules.Search,
+  RedisDefaultModules.ReJSON,
+  RedisDefaultModules.Graph,
+  RedisDefaultModules.TimeSeries,
+  RedisDefaultModules.Bloom,
+  RedisDefaultModules.Gears,
+  RedisDefaultModules.AI
 ]
 
+// @ts-ignore
+const PREDEFINED_MODULES_ORDER = PREDEFINED_MODULE_NAMES_ORDER.map(module => DATABASE_LIST_MODULES_TEXT[module])
+
 export const sortModules = (modules: IDatabaseModule[]) => {
   return modules.sort((a, b) => {
     if (!a.moduleName && !a.abbreviation) return 1
@@ -27,3 +31,11 @@ export const sortModules = (modules: IDatabaseModule[]) => {
     return PREDEFINED_MODULES_ORDER.indexOf(a.moduleName) - PREDEFINED_MODULES_ORDER.indexOf(b.moduleName)
   })
 }
+
+export const sortModulesByName = (modules: RedisModuleDto[]) => {
+  return [...modules].sort((a, b) => {
+    if (PREDEFINED_MODULE_NAMES_ORDER.indexOf(a.name) === -1) return 1
+    if (PREDEFINED_MODULE_NAMES_ORDER.indexOf(b.name) === -1) return -1
+    return PREDEFINED_MODULE_NAMES_ORDER.indexOf(a.name) - PREDEFINED_MODULE_NAMES_ORDER.indexOf(b.name)
+  })
+}