#RI-2719 - Search dabases list

#RI-3039 - Database index info overview
#RI-2989 - About 2021

Author: egor-zalenski

redisinsight/ui/src/assets/img/dark_logo.svg

@@ -17,7 +17,7 @@ interface IProps { windowDimensions: number }
 const DatabaseOverviewWrapper = ({ windowDimensions } :IProps) => {
   let interval: NodeJS.Timeout
   const { theme } = useContext(ThemeContext)
-  const { id: connectedInstanceId = '', modules = [], isRediStack } = useSelector(connectedInstanceSelector)
+  const { id: connectedInstanceId = '', modules = [], isRediStack, db } = useSelector(connectedInstanceSelector)
   const overview = useSelector(connectedInstanceOverviewSelector)
 
   const dispatch = useDispatch()
@@ -38,7 +38,7 @@ const DatabaseOverviewWrapper = ({ windowDimensions } :IProps) => {
   return (
     <DatabaseOverview
       modules={modules}
-      metrics={getOverviewMetrics({ theme, items: overview })}
+      metrics={getOverviewMetrics({ theme, items: overview, db })}
       windowDimensions={windowDimensions}
       isRediStack={isRediStack}
     />

redisinsight/ui/src/assets/img/light_logo.svg

@@ -1,6 +1,6 @@
 import React, { ReactNode } from 'react'
 import { EuiLoadingSpinner } from '@elastic/eui'
-import { isArray, isUndefined } from 'lodash'
+import { isArray, isUndefined, toNumber } from 'lodash'
 
 import { formatBytes, Nullable, truncateNumberToRange, truncatePercentage } from 'uiSrc/utils'
 import { Theme } from 'uiSrc/constants'
@@ -25,46 +25,49 @@ import {
 import styles from './styles.module.scss'
 
 interface Props {
-  theme: string;
+  theme: string
+  db?: number
   items: {
     version: string,
-    usedMemory?: Nullable<number>;
-    totalKeys?: Nullable<number>;
-    connectedClients?: Nullable<number>;
-    opsPerSecond?: Nullable<number>;
-    networkInKbps?: Nullable<number>;
-    networkOutKbps?: Nullable<number>;
-    cpuUsagePercentage?: Nullable<number>;
-  };
+    usedMemory?: Nullable<number>
+    totalKeys?: Nullable<number>
+    connectedClients?: Nullable<number>
+    opsPerSecond?: Nullable<number>
+    networkInKbps?: Nullable<number>
+    networkOutKbps?: Nullable<number>
+    cpuUsagePercentage?: Nullable<number>
+    totalKeysPerDb?: Nullable<{ [key: string]: number }>
+  }
 }
 
 export interface IMetric {
-  id: string;
-  content: ReactNode;
-  value: any;
-  unavailableText: string;
-  title: string;
+  id: string
+  content: ReactNode
+  value: any
+  unavailableText: string
+  title: string
   tooltip: {
-    title?: string;
-    icon: Nullable<string>;
-    content: ReactNode | string;
-  };
-  loading?: boolean;
-  groupId?: string;
-  icon?: Nullable<string>;
-  className?: string;
+    title?: string
+    icon: Nullable<string>
+    content: ReactNode | string
+  }
+  loading?: boolean
+  groupId?: string
+  icon?: Nullable<string>
+  className?: string
   children?: Array<IMetric>
 }
 
-export const getOverviewMetrics = ({ theme, items }: Props): Array<IMetric> => {
+export const getOverviewMetrics = ({ theme, items, db = 0 }: Props): Array<IMetric> => {
   const {
     usedMemory,
     totalKeys,
     connectedClients,
     cpuUsagePercentage,
     opsPerSecond,
     networkInKbps,
-    networkOutKbps
+    networkOutKbps,
+    totalKeysPerDb = {},
   } = items
 
   const availableItems: Array<IMetric> = []
@@ -208,7 +211,7 @@ export const getOverviewMetrics = ({ theme, items }: Props): Array<IMetric> => {
   })
 
   // Total keys
-  availableItems.push({
+  const totalKeysItem: any = {
     id: 'overview-total-keys',
     value: totalKeys,
     unavailableText: 'Total Keys are not available',
@@ -220,7 +223,38 @@ export const getOverviewMetrics = ({ theme, items }: Props): Array<IMetric> => {
     },
     icon: theme === Theme.Dark ? KeyDarkIcon : KeyLightIcon,
     content: truncateNumberToRange(totalKeys || 0),
-  })
+  }
+
+  // keys in the logical database
+  const dbKeysCount = totalKeysPerDb?.[`db${db || 0}`]
+  if (!isUndefined(dbKeysCount) && dbKeysCount < toNumber(totalKeys)) {
+    totalKeysItem.children = [
+      {
+        id: 'total-keys-tip',
+        value: totalKeys,
+        unavailableText: 'Total Keys are not available',
+        title: 'Total Keys',
+        tooltip: {
+          title: 'Total Keys',
+          content: (<b>{numberWithSpaces(totalKeys || 0)}</b>),
+        },
+        content: truncateNumberToRange(totalKeys || 0),
+      },
+      {
+        id: 'overview-db-total-keys',
+        title: 'Keys',
+        value: dbKeysCount,
+        content: (
+          <>
+            <span style={{ fontWeight: 200, paddingRight: 1 }}>db{db || 0}:</span>
+            <b>{numberWithSpaces(dbKeysCount || 0)}</b>
+          </>
+        ),
+      },
+    ]
+  }
+
+  availableItems.push(totalKeysItem)
 
   const getConnectedClient = (connectedClients: number = 0) =>
     (Number.isInteger(connectedClients) ? connectedClients : `~${Math.round(connectedClients)}`)

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

@@ -267,7 +267,7 @@ const NavigationMenu = () => {
           position="right"
         >
           <span className={cx(styles.iconNavItem, styles.homeIcon)}>
-            <EuiLink {...getRouterLinkProps(Pages.home)} data-test-subj="home-page-btn">
+            <EuiLink {...getRouterLinkProps(Pages.home)} className={styles.logo} data-test-subj="home-page-btn">
               <EuiIcon aria-label="redisinsight home page" type={LogoSVG} />
             </EuiLink>
           </span>

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

@@ -196,3 +196,12 @@ $sideBarWidth: 60px;
   font-size: 13px !important;
   line-height: 1.35 !important;
 }
+
+.logo {
+  &:hover {
+    transform: translateY(-1px);
+  }
+  &:active {
+    transform: translateY(1px);
+  }
+}

redisinsight/ui/src/components/navigation-menu/NavigationMenu.tsx

@@ -1,25 +1,24 @@
-@import '@elastic/eui/src/global_styling/index';
+@import "@elastic/eui/src/global_styling/index";
 
 .pageHeader {
-  background-color: var(--euiColorEmptyShade);
-  border-bottom: 1px solid var(--euiColorLightShade);
 }
 
 .pageHeaderTop {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
-  padding: 8px 16px;
-  @include euiBreakpoint('s', 'xs') {
-    flex-direction: column-reverse;
-    > div {
-      width: 100%;
-    }
-    .pageHeaderLogo {
-      display: flex;
-      justify-content: center;
-    }
+  padding: 12px 4px 4px 18px;
+
+  @include euiBreakpoint("m", "l", "xl") {
+    padding: 8px 14px;
+  }
+}
+
+.title {
+  font-size: 24px;
+  @include euiBreakpoint("m", "l", "xl") {
+    padding-left: 12px;
   }
 }
 

redisinsight/ui/src/components/navigation-menu/styles.module.scss

@@ -41,7 +41,7 @@ const PageHeader = ({ title, subtitle, children }: Props) => {
     <div className={styles.pageHeader}>
       <div className={styles.pageHeaderTop}>
         <div>
-          <EuiTitle size="s">
+          <EuiTitle size="s" className={styles.title}>
             <h1>
               <b>{title}</b>
             </h1>

redisinsight/ui/src/components/page-header/PageHeader.module.scss

@@ -21,7 +21,7 @@ import { sendEventTelemetry, sendPageViewTelemetry, TelemetryEvent, TelemetryPag
 import AddDatabaseContainer from './components/AddDatabases/AddDatabasesContainer'
 import DatabasesList from './components/DatabasesListComponent/DatabasesListWrapper'
 import WelcomeComponent from './components/WelcomeComponent/WelcomeComponent'
-import AddInstanceControls from './components/AddInstanceControls/AddInstanceControls'
+import HomeHeader from './components/HomeHeader'
 
 import './styles.scss'
 import styles from './styles.module.scss'
@@ -180,9 +180,9 @@ const HomePage = () => {
       <div />
       <EuiResizeObserver onResize={onResize}>
         {(resizeRef) => (
-          <EuiPage>
+          <EuiPage className={styles.page}>
             <EuiPageBody component="div">
-              <AddInstanceControls
+              <HomeHeader
                 key="instance-controls"
                 onAddInstance={handleAddInstance}
                 direction="row"