Skip to content

feat(ui): Add value decoder#6143

Open
saidake wants to merge 14 commits into
redis:mainfrom
saidake:fe/feature/value-decoders
Open

feat(ui): Add value decoder#6143
saidake wants to merge 14 commits into
redis:mainfrom
saidake:fe/feature/value-decoders

Conversation

@saidake

@saidake saidake commented Jul 1, 2026

Copy link
Copy Markdown

What

Add Value Decoders for HASH value tables. The initial implementation only includes a Binary Decoder.

This PR focuses on solving a single problem: making complex Redis values human-readable.

  • Users can create Value Decoders for specific Redis keys by defining a Key Pattern.

  • A Decode (eye) button is displayed in the Value column header when any Key Pattern matches.

  • With the Binary Decoder, users can configure the data type of binary fields in advance. Redis Insight will then decode binary values and display them in a human-readable format in the value preview table.

  • Redis Strings are binary-safe byte arrays, so storing binary data in Redis is a very common practice.

  • The Binary Decoder is especially useful for games and other high-performance systems that store binary data in Redis, making it much easier to inspect and debug binary values directly in Redis Insight.

  • Value Decoder data is stored in Local Storage using the key ·valueDecoderRules_·, allowing each Redis database connection to maintain its own isolated Value Decoders.
    when you delete a Redis instance through the UI, its value decoders are removed from Local Storage
    Currently, this functionality is heavily used in my own system. In the future, the Value Decoders could be extended to support additional formats as needed, such as Protobuf, MessagePack, and BSON.

  • Will this feature have any performance impact?
    No. HashDetailsTable.tsx uses VirtualTable (react-virtualized) to render items, so only visible items are rendered and decoded.

  • Will this feature misdisplay binary data?
    No. The eye toggle icon allows you to switch between the decoded view and the original value at any time.

Usage Example:
image
image
image
Stored Local Storage Data Example:
image

Testing

  1. Start UI and API server.

Start the Redis Insight UI:

yarn dev:ui

Start the Redis Insight API server:

yarn dev:api
  1. Create test data.

Connect to a Redis database A. In a Linux terminal, create a HASH containing binary values:

printf '\x01\x88\x77\x66\x55\x44\x33\x22\x11\x02\x00\x11\x11\x11\x11\x11\x11\x11\x11\x22\x22\x22\x22\x22\x22\x22\x22\x7B\x00\x00\x00\x33\x33\x33\x33\x33\x33\x33\x33\x44\x44\x44\x44\x44\x44\x44\x44\xC8\x01\x00\x00' | redis-cli -x HSET example:hash field1

Connect to a Redis database B. In a Linux terminal, create a HASH containing binary values:

printf '\x01\x05\x00\x52\x65\x64\x69\x73\x18\x2D\x44\x54\xFB\x21\x09\x40\x08\x00\xDE\xAD\xBE\xEF\xCA\xFE\xBA\xBE' | redis-cli -x HSET example:hash field1
  1. In Redis Insight, connect to Redis database A, open the example:hash key, click Value Decoders and create a new decoder with the following configuration:
image
  1. Click the Decode (eye) button for each HASH field. The decoded values should be:
image
  1. In Redis Insight, connect to Redis database B, open the example:hash key, click Value Decoders and create a new decoder with the following configuration:
image
  1. Click the Decode (eye) button for each HASH field. The decoded values should be:
image

Note

Medium Risk
Large new UI surface on hash value rendering and client-side binary parsing; mitigated by feature flag default-off, raw/decoded toggle, and repeat-decode iteration caps.

Overview
Introduces a Value Decoders capability (behind the new valueDecoder feature flag, off by default) for inspecting binary HASH field values using user-defined layouts.

Users can define per-database decoder rules in a modal: glob key patterns, a binary schema (typed fields, dynamic sizes, nested repeat blocks), plus copy/paste of JSON configs. Rules persist in local storage per connection, with legacy global-key migration and cleanup when a database is removed.

In the HASH browser, a Value Decoders header action opens configuration; when a key matches a rule, the Value column gets an eye toggle to switch between the normal formatted value and a decoded field breakdown (DecodedValueDisplay), with virtual-table cache refresh on toggle.

Reviewed by Cursor Bugbot for commit 3fbc0eb. Bugbot is set up for automated code reviews on this repo. Configure here.

@saidake saidake requested a review from a team as a code owner July 1, 2026 21:47
@CLAassistant

CLAassistant commented Jul 1, 2026

Copy link
Copy Markdown

CLA assistant check
All committers have signed the CLA.

@jit-ci

jit-ci Bot commented Jul 1, 2026

Copy link
Copy Markdown

Hi, I’m Jit, a friendly security platform designed to help developers build secure applications from day zero with an MVS (Minimal viable security) mindset.

In case there are security findings, they will be communicated to you as a comment inside the PR.

Hope you’ll enjoy using Jit.

Questions? Comments? Want to learn more? Get in touch with us.

@saidake saidake force-pushed the fe/feature/value-decoders branch from d964a24 to f5ee9ea Compare July 1, 2026 21:52

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: d964a24cb8

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts Outdated
Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts Outdated
Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/schemaUtils.ts Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: f5ee9ea996

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts Outdated
Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/schemaUtils.ts Outdated
@saidake saidake force-pushed the fe/feature/value-decoders branch from f5ee9ea to 6a0fa3e Compare July 2, 2026 14:17
Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 6a0fa3e190

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/ValueDecoderModal.tsx Outdated
@saidake saidake force-pushed the fe/feature/value-decoders branch from 6a0fa3e to abea19d Compare July 2, 2026 14:27

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: abea19d674

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/schemaUtils.ts Outdated
Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts Outdated
@saidake saidake force-pushed the fe/feature/value-decoders branch from abea19d to 86ba331 Compare July 2, 2026 14:41

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 86ba331b5c

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

@saidake saidake force-pushed the fe/feature/value-decoders branch from 86ba331 to 8ce011f Compare July 2, 2026 14:53

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 8ce011f9ec

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts
@saidake saidake force-pushed the fe/feature/value-decoders branch from 8ce011f to af370f8 Compare July 2, 2026 15:13

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: af370f8194

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/schemaUtils.ts Outdated
@saidake saidake force-pushed the fe/feature/value-decoders branch from af370f8 to 3c7e169 Compare July 2, 2026 15:21

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3c7e16952c

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/FieldsSchemaEditor.tsx Outdated
Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts Outdated
@saidake saidake force-pushed the fe/feature/value-decoders branch from 3c7e169 to 5a2da08 Compare July 2, 2026 16:10

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 5a2da08a16

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/ValueDecoderModal.tsx Outdated
@saidake saidake force-pushed the fe/feature/value-decoders branch from 5a2da08 to 463fbb2 Compare July 2, 2026 17:46

@pawelangelow pawelangelow left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks a lot for this, @saidake - really nice piece of work. 🙏 The design is careful in the ways that matter: it's off by default, the raw value is always one toggle away, the parser is defensive (bounds-checked, repeat caps, regex wrapped in try/catch), and it's cleanly isolated so it doesn't touch any other key type.

Before we can ship it, there are a few things that need to be in place. None of these are hard blockers on the idea - they're about fitting it into how RedisInsight works at large:

  • Feature flag (required for shipping). Every other optional action in the key header is wrapped in a FeatureFlagComponent, and we need the same here so the feature can be rolled out gradually and disabled remotely if anything goes wrong in production. This is the one true blocker.

  • Per-database storage, not a global key. Right now the rules live in a single global valueDecoderRules localStorage entry, so a decoder created for one database silently applies to every connection with matching key names. These need to be scoped per database so rules don't leak across connections.

  • UI treatment. The current "Value Decoders" primary button shows for every hash key for every user, which is a lot of visual weight for an optional tool. We'd like to experiment here to match the existing header style - likely a lighter/secondary or icon button, and/or only surfacing it when the feature is enabled for that database.

In terms of next steps, there are two ways we can go:

  • You keep ownership and work on these - in which case we'd just ask that you try to scope them into small, focused PRs. That speeds up the review process a lot and gets things merged faster.
  • We handle them on our side - happy to, though we can't guarantee you an exact timeline for when we'd get to it.

Either way works for us. Really appreciate the contribution - the core is in good shape, this is mostly about integration. Let us know which direction you'd prefer!

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: cb2f5e7a8c

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts Outdated

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 511f8db0f3

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts

@cursor cursor Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.

Fix All in Cursor

Reviewed by Cursor Bugbot for commit b0c207e. Configure here.

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts
@saidake

saidake commented Jul 6, 2026

Copy link
Copy Markdown
Author

hi @pawelangelow
I'm happy to keep ownership of these. I've updated the PR. Please take another look when you have a chance.

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: e1142987e1

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts

@chatgpt-codex-connector chatgpt-codex-connector Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 3fbc0ebe34

ℹ️ About Codex in GitHub

Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".

Comment thread redisinsight/ui/src/pages/browser/components/value-decoder/utils.ts
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants