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.

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

KrumTy · 2025-11-17T07:34:25Z

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

 }

- const columns: ColumnDefinition<Key>[] = [
+ const columns: ColumnDef<Key>[] = [


it is easy to extract columns outside the component - just need to put delimiter in a context or access it by other means

Yes, but lets leave it as is for now, the focus of this PR is visuals

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

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

KrumTy · 2025-11-17T07:43:25Z

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

+.tooltipAnchor {
+ display: inline-flex;
+}


was this style reverted?

Not sure what you mean by reverted, but I needed this style, because without it, the tooltip wrapped content cannot be aligned: center (or otherwise) properly.
In icon that is 20x20 px when wrapped in tooltip, effectively has height of 25 or something like that - the tooltip content container has that size, not the icon, so if it is centerd, it is actually offset by some pixels

- 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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

RI-7707 update the database analysis page #5189

RI-7707 update the database analysis page #5189

Uh oh!

pd-redis commented Nov 14, 2025

KrumTy Nov 17, 2025

pd-redis Nov 18, 2025

Uh oh!

KrumTy Nov 17, 2025

pd-redis Nov 18, 2025

KrumTy Nov 17, 2025

pd-redis Nov 18, 2025

Uh oh!

KrumTy Nov 17, 2025

pd-redis Nov 18, 2025

github-actions bot commented Nov 18, 2025

Labels

3 participants

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

Uh oh!

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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Nov 18, 2025

Code Coverage - Frontend unit tests

Test suite run success

Labels

3 participants