RI-7707 update the database analysis page #5189

pd-redis · 2025-11-14T13:56:53Z

What

This PR migrates the database analysis page components from SCSS modules to styled-components, adds comprehensive Storybook stories, and resolves circular dependency issues.

Key Changes:

1. Styled-components Migration

Charts: Migrated BarChart and DonutChart from SCSS to styled-components with theme integration
Database Analysis Components: Converted TopNamespace, TopKeys, TableLoader, SummaryPerData, ExpirationGroupsView, GroupBadge, and TableTextBtn to styled-components
Theme Integration: Replaced CSS custom properties with theme values (theme.semantic.color.*, theme.core.space.*)

2. Storybook Stories

Added comprehensive interactive stories for:

TopNamespace - 11 stories covering loading, empty states, data views, extrapolation, and custom delimiters
TopKeys - 11 stories covering loading, various key types, TTL values, big keys, and custom delimiters
GroupBadge - 8 stories covering key types, command groups, compressed mode, delete functionality
ExpirationGroupsView - Stories for bar chart TTL visualization
DatabaseAnalysisPageView - Full page component stories
BarChart and DonutChart - Enhanced existing stories

3. Styled-components Infrastructure

Created global styles (globalStyles.ts) with CSS variables for Redis data types and command groups
Added reusable mixins in styles/mixins/styledComponents.ts:
- truncateText - Text overflow handling
- breakpoint - Responsive media queries
- scrollbarStyles - Custom scrollbar styling
- insightsOpen - Insights panel responsive states
Made CellText component props overridable while maintaining defaults

4. TypeScript & Testing Improvements

Fixed type errors in TopNamespace.spec.tsx by creating createMockedDatabaseAnalysis helper
Fixed type errors in TopKeysTable.spec.tsx by properly typing Key arrays
Updated component props with proper TypeScript interfaces
Renamed components for clarity: Table → TopKeysTable and TopNamespacesTable

Testing

Manual Testing

Open a database with some content, go to Analysis tab, click on New Report button

Visual Verification

analysis-demo.mov

…rybook stories - Migrate BarChart, DonutChart, and database-analysis components to styled-components - Add comprehensive Storybook stories for all major components - Integrate theme system and create reusable styled-components mixins - Fix circular dependencies and TypeScript errors - Remove SCSS modules and barrel exports causing issues

KrumTy · 2025-11-17T07:26:28Z

redisinsight/ui/src/styles/globalStyles.ts

+/**
+ * Global styles for the application
+ * These styles are applied to the entire application using styled-components
+ */
+export const GlobalStyles = createGlobalStyle<{ theme: Theme }>`
+  :root {
+    // todo: replace with theme colors at some point
+    /* Type colors for Redis data types */
+    --typeHashColor: #364cff;
+    --typeListColor: #008556;
+    --typeSetColor: #9c5c2b;
+    --typeZSetColor: #a00a6b;
+    --typeStringColor: #6a1dc3;
+    --typeReJSONColor: #3f4b5f;
+    --typeStreamColor: #6a741b;
+    --typeGraphColor: #14708d;
+    --typeTimeSeriesColor: #6e6e6e;
+


new patterns, affecting the whole app, should be ideally introduced in a separate PR with explanation.

Can't we use @ArtemHoruzhenko 's suggestion about extending theme with custom colors instead?

Ideally these should not be custom, but I have not gotten a list of theme colors to use.

My suggestion for using css properties instead of even theme overrides is simply practical.

example:

--bg-color-neutral100: ${({ theme }) => theme.semantic.color.background.neutral100}; // .... background-color: ${({ theme }) => theme.semantic.color.background.neutral100}; // vs background-color: var(--bg-color-neutral100);

If --var is defined at root level, it is accessible everywhere and is a lot shorter to type.

In this case, the colors defined are used in most if not all "key" related components.
In case of theme changes, this can be the single place where we need to apply the changes.
If we use the approach to override the theme, we should not override it but define our theme based on redis-ui theme. Why? Because in case that redis-ui decides to change the structure from theme.semantic.color.background.neutral100 to just theme.components.page.background, it will not be just matter of changing the override, but also everywhere the old path is used.

Of course this is just an opinion, the team can decide if we want to use any sort of override at all.

@pd-redis I would prefer to use theme here so it will be aligned with everything else

For me it looks like we must extend existing theme with another semantic component (e.g. keyType.color = 'json' | 'hash' | ...)

I agree with you @ArtemHoruzhenko on both comments. But the colors in the designs are from the update we're supposed to do next. This will for sure be migrated to the theme once we're on the same page as designers
cc. @KrumTy cc @DimoHG

redisinsight/ui/src/pages/database-analysis/components/top-namespace/TopNamespace.spec.tsx

redisinsight/ui/src/pages/database-analysis/components/top-keys/TopKeysTable.tsx

KrumTy · 2025-11-17T07:37:13Z

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

+    {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


why is this change needed? Can't you conditionally render just the buttons instead? Also why are both the same?

Its ugly, but allows not to have extra wrapper if you don't pass an icon.
I don't like it as well, maybe we should use different approach.
Right now I need it in order to have "real" text like look of the button

does it make sense that both left and right icons are the same though?

The idea is (and was since this component exists) to be able to put icon on either side of the button. That is what iconSide prop does

The change here is not related to how icons are hadled when they are present, it is about what to do when there is no icon

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

Line 25 in 9d31cba

<Row justify={justify} gap="m" align="center">

redisinsight/ui/src/pages/database-analysis/DatabaseAnalysisPageView.tsx

redisinsight/ui/src/pages/database-analysis/components/header/styles.module.scss

- Create DatabaseAnalysisFactory using Fishery and Faker for consistent test data generation - Refactor TopKeys.spec.tsx to use factory instead of plain mock objects - Ensures all DatabaseAnalysis properties are properly set in tests

github-actions · 2025-11-18T15:44:24Z

Code Coverage - Frontend unit tests

St.^❔	Category	Percentage	Covered / Total
🟢	Statements	82.64%	20706/25055
🟡	Branches	67.82%	8804/12982
🟡	Functions	77.47%	5608/7239
🟢	Lines	83.05%	20275/24414

Test suite run success

5280 tests passing in 689 suites.

Report generated by 🧪jest coverage report action from a9b84ea

pd-redis added 10 commits November 13, 2025 12:43

add key to AppNavigation.tsx

1184afa

abstract display to view component

74c305f

fix Header.tsx

fb95d87

fix DatabaseAnalysisTabs.tsx

37f23da

update SummaryPerData.tsx

2df52a5

update DonutChart.tsx

664e733

update ExpirationGroupsView.tsx

67ea39a

refactor(ui): migrate BarChart from SCSS to styled-components

3a95cd2

add TopNamespace.stories.tsx

8e8655d

pd-redis requested review from ArtemHoruzhenko, DimoHG, KrumTy, dantovska, pawelangelow and valkirilov as code owners November 14, 2025 13:56

KrumTy reviewed Nov 17, 2025

View reviewed changes

pd-redis added 9 commits November 18, 2025 13:57

improve tests

1f87e18

add DatabaseAnalysisFactory and refactor TopKeys tests

14a4e39

simplify stories

79eb771

simplify stories further

8deff91

simplify TopNamespace.stories.tsx, DatabaseAnalysisPageView.stories.tsx

636fd47

simplify TopNamespace.stories.tsx, DatabaseAnalysisPageView.stories.tsx

f4eb43c

moved MainContainer to styles.ts

88ab860

fix render import

a9b84ea

pd-redis requested a review from KrumTy November 19, 2025 10:35

RI-7707 update the database analysis page #5189

Are you sure you want to change the base?

RI-7707 update the database analysis page #5189

Conversation

pd-redis commented Nov 14, 2025

What

Key Changes:

1. Styled-components Migration

2. Storybook Stories

3. Styled-components Infrastructure

4. TypeScript & Testing Improvements

Testing

Manual Testing

Visual Verification

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Nov 18, 2025

Code Coverage - Frontend unit tests

Test suite run success

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants