RI-7707 update the database analysis page

.storybook/preview.tsx

@@ -20,6 +20,7 @@ import { Provider } from 'react-redux'
 import { store } from 'uiSrc/slices/store'
 import Router from 'uiSrc/Router'
 import { StyledContainer } from './helpers/styles'
+import { GlobalStyles } from 'uiSrc/styles/globalStyles'
 
 const parameters: Parameters = {
   parameters: {
@@ -67,6 +68,7 @@ const preview: Preview = {
             <TooltipProvider>
               <RootStoryLayout storyContext={useStoryContext()}>
                 <CommonStyles />
+                <GlobalStyles />
                 <StyledContainer>
                   <Story />
                 </StyledContainer>

redisinsight/ui/src/components/base/forms/buttons/EmptyButton.tsx

@@ -22,22 +22,26 @@ export const EmptyButton = ({
   ...rest
 }: ButtonProps) => (
   <TextButton {...rest}>
-    <Row justify={justify} gap="m" align="center">
-      <ButtonIcon
-        buttonSide="left"
-        icon={icon}
-        iconSide={iconSide}
-        loading={loading}
-        size={size}
-      />
-      {children}
-      <ButtonIcon
-        buttonSide="right"
-        icon={icon}
-        iconSide={iconSide}
-        loading={loading}
-        size={size}
-      />
-    </Row>
+    {icon ? (
+      <Row justify={justify} gap="m" align="center">
+        <ButtonIcon
+          buttonSide="left"
+          icon={icon}
+          iconSide={iconSide}
+          loading={loading}
+          size={size}
+        />
+        {children}
+        <ButtonIcon
+          buttonSide="right"
+          icon={icon}
+          iconSide={iconSide}
+          loading={loading}
+          size={size}
+        />
+      </Row>
+    ) : (
+      children
+    )}
   </TextButton>
 )

redisinsight/ui/src/components/base/layout/loading-content/LoadingContent.spec.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { render } from '@testing-library/react'
+import { render } from 'uiSrc/utils/test-utils'
 import LoadingContent from './LoadingContent'
 
 describe('LoadingContent', () => {

redisinsight/ui/src/components/base/layout/loading-content/loading-content.styles.ts

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react'
 import styled, { keyframes } from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
 
 export type LineRange = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10
 
@@ -25,29 +26,29 @@ export const StyledLoadingContent = styled.span<
 `
 
 export const SingleLine = styled.span<
-  React.HtmlHTMLAttributes<HTMLSpanElement>
+  React.HtmlHTMLAttributes<HTMLSpanElement> & { theme: Theme }
 >`
   display: block;
   width: 100%;
-  height: var(--base);
-  margin-bottom: var(--size-s);
-  border-radius: var(--size-xs);
+  height: ${({ theme }) => theme.core.space.space200};
+  margin-bottom: ${({ theme }) => theme.core.space.space100};
+  border-radius: ${({ theme }) => theme.core.space.space050};
   overflow: hidden;
 
   &:last-child:not(:only-child) {
     width: 75%;
   }
 `
 
-export const SingleLineBackground = styled.span`
+export const SingleLineBackground = styled.span<{ theme: Theme }>`
   display: block;
   width: 220%;
   height: 100%;
   background: linear-gradient(
     137deg,
-    var(--loadingContentColor) 45%,
-    var(--loadingContentLightestShade) 50%,
-    var(--loadingContentColor) 55%
+    ${({ theme }) => theme.semantic.color.background.neutral200} 45%,
+    ${({ theme }) => theme.semantic.color.background.neutral300} 50%,
+    ${({ theme }) => theme.semantic.color.background.neutral200} 55%
   );
   animation: ${loadingAnimation} 1.5s ease-in-out infinite;
 `

redisinsight/ui/src/components/base/utils/pluginsThemeContext.tsx

@@ -4,6 +4,7 @@ import { CommonStyles, themeLight, themeDark } from '@redis-ui/styles'
 import 'modern-normalize/modern-normalize.css'
 import '@redis-ui/styles/normalized-styles.css'
 import '@redis-ui/styles/fonts.css'
+import { GlobalStyles } from 'uiSrc/styles/globalStyles'
 
 interface Props {
   children: React.ReactNode
@@ -31,6 +32,7 @@ export const ThemeProvider = ({ children }: Props) => {
     <PluginsThemeContext.Provider value={{ theme }}>
       <StyledThemeProvider theme={theme}>
         <CommonStyles />
+        <GlobalStyles />
         {children}
       </StyledThemeProvider>
     </PluginsThemeContext.Provider>

redisinsight/ui/src/components/charts/bar-chart/BarChart.stories.tsx

@@ -1,31 +1,54 @@
+import React from 'react'
 import type { Meta, StoryObj } from '@storybook/react-vite'
 
-import BarChart from './BarChart'
+import BarChart, { BarChartDataType } from './BarChart'
+import { formatBytes } from 'uiSrc/utils'
 
-const barCharMeta = {
+const barChartMeta: Meta<typeof BarChart> = {
   component: BarChart,
+  decorators: [
+    (Story) => (
+      <div style={{ padding: '20px' }}>
+        <Story />
+      </div>
+    ),
+  ],
+}
+
+export default barChartMeta
+
+type Story = StoryObj<typeof barChartMeta>
+
+export const Default: Story = {
   args: {
     width: 600,
-    height: 200,
-    name: 'test',
+    height: 300,
+    name: 'default',
     data: [
-      { x: 1, y: 0, xlabel: 'one', ylabel: 'zero' },
-      { x: 5, y: 0.1, xlabel: 'five', ylabel: 'point one' },
-      { x: 10, y: 20, xlabel: '', ylabel: '' },
-      { x: 2, y: 30, xlabel: '', ylabel: '' },
-      { x: 30, y: 40, xlabel: '', ylabel: '' },
-      { x: 15, y: 500, xlabel: '', ylabel: '' },
+      { x: 1, y: 100, xlabel: 'A', ylabel: '' },
+      { x: 2, y: 200, xlabel: 'B', ylabel: '' },
+      { x: 3, y: 150, xlabel: 'C', ylabel: '' },
+      { x: 4, y: 300, xlabel: 'D', ylabel: '' },
+      { x: 5, y: 250, xlabel: 'E', ylabel: '' },
     ],
   },
-} satisfies Meta<typeof BarChart>
-
-export default barCharMeta
-
-type Story = StoryObj<typeof barCharMeta>
+}
 
-export const Default: Story = {}
-export const ThinnerBars: Story = {
+export const BytesDataType: Story = {
   args: {
-    barWidth: 10,
+    width: 700,
+    height: 350,
+    name: 'memory-usage',
+    dataType: BarChartDataType.Bytes,
+    data: [
+      { x: 3600, y: 1024 * 512, xlabel: '<1 hr', ylabel: '' },
+      { x: 14400, y: 1024 * 1024 * 2, xlabel: '1-4 Hrs', ylabel: '' },
+      { x: 43200, y: 1024 * 1024 * 5, xlabel: '4-12 Hrs', ylabel: '' },
+      { x: 86400, y: 1024 * 1024 * 10, xlabel: '12-24 Hrs', ylabel: '' },
+      { x: 604800, y: 1024 * 1024 * 3, xlabel: '1-7 Days', ylabel: '' },
+      { x: 2592000, y: 1024 * 1024, xlabel: '>7 Days', ylabel: '' },
+    ],
+    tooltipValidation: (val) => formatBytes(val, 3) as string,
+    leftAxiosValidation: (val, i) => (i % 2 ? '' : formatBytes(val, 1)),
   },
 }

redisinsight/ui/src/components/charts/bar-chart/BarChart.styles.ts

@@ -0,0 +1,77 @@
+import styled, { createGlobalStyle } from 'styled-components'
+import { Theme } from 'uiSrc/components/base/theme/types'
+import React from 'react'
+
+export const Wrapper = styled.div<React.HTMLAttributes<HTMLDivElement>>`
+  margin: 0 auto;
+`
+
+export const StyledSVG = styled.svg<
+  React.SVGProps<SVGSVGElement> & {
+    ref?: React.Ref<SVGSVGElement>
+    theme: Theme
+  }
+>`
+  --bar-fill: ${({ theme }) => theme.semantic.color.background.notice500};
+  --bar-stroke: ${({ theme }) =>
+    theme.semantic.color.background.informative700};
+
+  width: 100%;
+  height: 100%;
+  /* D3-created bar elements */
+  .bar-chart-bar {
+    fill: rgb(from var(--bar-fill) r g b / 0.1);
+    stroke: var(--bar-stroke);
+    stroke-width: 1.5px;
+  }
+
+  /* D3-created scatter point elements */
+  .bar-chart-scatter-points {
+    fill: var(--bar-stroke);
+    cursor: pointer;
+  }
+
+  /* D3-created dashed line elements */
+  .bar-chart-dashed-line {
+    stroke: ${({ theme }) => theme.semantic.color.text.neutral800};
+    stroke-width: 1px;
+    stroke-dasharray: 5, 3;
+  }
+
+  /* D3-created tick lines */
+  .tick line {
+    stroke: ${({ theme }) => theme.semantic.color.text.neutral800};
+    opacity: 0.1;
+  }
+
+  /* D3-created domain */
+  .domain {
+    opacity: 0;
+  }
+
+  /* D3-created text elements */
+  text {
+    color: ${({ theme }) => theme.semantic.color.text.neutral800};
+  }
+`
+
+// Tooltip is appended to body by D3, so needs global styles
+export const TooltipGlobalStyles = createGlobalStyle<{ theme: Theme }>`
+  .bar-chart-tooltip {
+    position: fixed;
+    min-width: 50px;
+    background: ${({ theme }) => theme.semantic.color.background.neutral600};
+    color: ${({ theme }) => theme.semantic.color.text.primary600} !important;
+    z-index: 10;
+    border-radius: ${({ theme }) => theme.core.space.space100};
+    pointer-events: none;
+    font-weight: 400;
+    font-size: 12px !important;
+    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.2) !important;
+    bottom: 0;
+    height: 36px;
+    min-height: 36px;
+    padding: ${({ theme }) => theme.core.space.space100};
+    line-height: 16px;
+  }
+`

redisinsight/ui/src/components/charts/bar-chart/BarChart.tsx

@@ -4,7 +4,11 @@
 import { curryRight, flow, toNumber } from 'lodash'
 
 import { formatBytes, toBytes } from 'uiSrc/utils'
-import styles from './styles.module.scss'
+import {
+  Wrapper,
+  StyledSVG,
+  TooltipGlobalStyles,
+} from './BarChart.styles'
 
 export interface BarChartData {
   y: number
@@ -88,7 +92,7 @@
     const tooltip = d3
       .select('body')
       .append('div')
-      .attr('class', cx(styles.tooltip, classNames?.tooltip || ''))
+      .attr('class', cx('bar-chart-tooltip', classNames?.tooltip || ''))
       .style('opacity', 0)
 
     d3.select(svgRef.current).select('g').remove()
@@ -140,14 +144,14 @@
       .range([height, 0])
 
     // divider for last column
     if (divideLastColumn) {
       svg
         .append('line')
-        .attr('class', cx(styles.dashedLine, classNames?.dashedLine))
+        .attr('class', cx('bar-chart-dashed-line', classNames?.dashedLine))
         .attr('x1', xAxis(cleanedData.length - 2.3))
         .attr('x2', xAxis(cleanedData.length - 2.3))
         .attr('y1', 0)
         .attr('y2', height)
     }
 
     // squared background for Y axis
@@ -198,7 +202,7 @@
       .data(cleanedData)
       .enter()
       .append('rect')
-      .attr('class', cx(styles.bar, classNames?.bar))
+      .attr('class', cx('bar-chart-bar', classNames?.bar))
       .attr('x', (d) => xAxis(d.index))
       .attr('width', barWidth)
       // set minimal height for Bar
@@ -236,12 +240,12 @@
   }
 
   return (
-    <div
-      className={styles.wrapper}
-      style={{ width: propWidth, height: propHeight }}
-    >
-      <svg ref={svgRef} className={styles.svg} />
-    </div>
+    <>
+      <TooltipGlobalStyles />
+      <Wrapper style={{ width: propWidth, height: propHeight }}>
+        <StyledSVG ref={svgRef} />
+      </Wrapper>
+    </>
   )
 }