RedisUI.Dashboard 2.3.0

dotnet add package RedisUI.Dashboard --version 2.3.0
                    
NuGet\Install-Package RedisUI.Dashboard -Version 2.3.0
                    
This command is intended to be used within the Package Manager Console in Visual Studio, as it uses the NuGet module's version of Install-Package.
<PackageReference Include="RedisUI.Dashboard" Version="2.3.0" />
                    
For projects that support PackageReference, copy this XML node into the project file to reference the package.
<PackageVersion Include="RedisUI.Dashboard" Version="2.3.0" />
                    
Directory.Packages.props
<PackageReference Include="RedisUI.Dashboard" />
                    
Project file
For projects that support Central Package Management (CPM), copy this XML node into the solution Directory.Packages.props file to version the package.
paket add RedisUI.Dashboard --version 2.3.0
                    
#r "nuget: RedisUI.Dashboard, 2.3.0"
                    
#r directive can be used in F# Interactive and Polyglot Notebooks. Copy this into the interactive tool or source code of the script to reference the package.
#:package RedisUI.Dashboard@2.3.0
                    
#:package directive can be used in C# file-based apps starting in .NET 10 preview 4. Copy this into a .cs file before any lines of code to reference the package.
#addin nuget:?package=RedisUI.Dashboard&version=2.3.0
                    
Install as a Cake Addin
#tool nuget:?package=RedisUI.Dashboard&version=2.3.0
                    
Install as a Cake Tool

RedisUI.Dashboard

A modern Redis UI for ASP.NET Core with enhanced features, built as a fork of RedisUI.

NuGet Codacy Badge


πŸš€ Installation

Install via NuGet:

dotnet add package RedisUI.Dashboard

πŸ”₯ What’s New in RedisUI.Dashboard

UI

image image image image image

Server Statistics image

This project has received major updates focused on interactivity, scalability, and developer control. Key highlights:

  • βœ… AJAX-powered UI actions: Redis key operations (GET, SET, DEL, EXPIRE) are now handled asynchronously using fetch, improving responsiveness without full page reloads.
  • βœ… Bulk key operations: Added mass delete, TTL updates, and key renaming using batch processing with confirmation modals and logging.
  • βœ… Redis FlushDB support: A secure, confirmable button allows full database flush directly from the UI.
  • βœ… Live filtering of keys: Enhanced input-based key filtering using SCAN with client-side prefix grouping (TreeView/ListView).
  • βœ… Logout for Basic Auth: Clear session via a dedicated logout endpoint with UI cleanup and 401 handling.
  • βœ… New icons & visuals: Integrated Bootstrap Icons for each Redis data type, improving UX clarity.
  • βœ… Improved key explorer: TreeView now supports dynamic folders, expandable paths, zebra-style lists, and TTL badges.
  • βœ… Highlighting & JSON viewer: Enhanced JSON inspection with highlight.js and Monokai styling for readability.
  • βœ… Custom configuration system: The RedisUISettings class enables easy override of UI scripts, styles, and layout behavior.
  • βœ… Support for Redis core types: Fully supports String, Hash, List, Set, Sorted Set, and Stream types.
  • βœ… Optimized SCAN performance: Pagination and lazy rendering prevent UI freezes on large datasets.
  • βœ… Extended .NET compatibility: Supports net6.0, net7.0, net8.0, and .NET 9 preview builds.
  • βœ… Security & Auth: Plug-and-play support for Basic, Claims, Role, IP Whitelist, and environment-based filters.

RedisUI.Dashboard is now more modular, responsive, and production-readyβ€”ideal for devs managing modern Redis workloads.

πŸ”§ Custom JS and CSS for RedisUI Viewer

You can customize the appearance, behavior, and integration path of the Redis UI by providing your own configuration. This includes support for custom Bootstrap/CDN links, JSON editor libraries, and even authentication filtering.

Example

app.UseRedisUI(new RedisUISettings
{
    Path = "/redis-admin",
    ConnectionString = "localhost",
    AuthorizationFilter = new DashboardBasicAuthorizationFilter("admin", "password"),

    // UI Styling and Functionality
    CssLink = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css",
    BootstrapIcons = "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css",
    JsLink = "https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js",

    // Syntax Highlighting (highlight.js)
    HighlightTheme = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/monokai.min.css",
    HighlightJs = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js",
    HighlightJson = "https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/json.min.js",

    // JSON Editor (jsoneditor)
    JsonEditorCss = "https://cdn.jsdelivr.net/npm/jsoneditor@9.10.0/dist/jsoneditor.min.css",
    JsonEditorJs = "https://cdn.jsdelivr.net/npm/jsoneditor@9.10.0/dist/jsoneditor.min.js"
});


## πŸ” Dashboard Authorization Filters

You can protect the Redis dashboard endpoint using different types of authorization filters by configuring the `CacheOptions:Dashboard` section in your `appsettings.json`.

### πŸ“† Supported Authentication Modes

| Mode    | Description                                                               |
| ------- | ------------------------------------------------------------------------- |
| `basic` | Uses HTTP Basic Auth with username/password.                              |
| `jwt`   | Requires the user to have a specific role from a JWT token.               |
| `claim` | Requires a specific claim (type + value) to be present in the user token. |
| `ip`    | Restricts access to specific IP addresses.                                |
| `env`   | Allows access only in Development or Staging environments.                |

### βš™οΈ Example Configuration (`appsettings.json`)

#### βœ… Basic Auth

```json
"CacheOptions": {
  "Provider": "Redis",
  "RedisConnection": "localhost:6379",
  "Dashboard": {
    "Enabled": true,
    "Path": "/redis-admin",
    "AuthenticationMode": "basic",
    "Username": "admin",
    "Password": "secret"
  }
}
βœ… Claim-based Authorization
"Dashboard": {
  "Enabled": true,
  "AuthenticationMode": "claim",
  "ClaimType": "role",
  "ClaimValue": "Admin"
}
βœ… IP Whitelist
"Dashboard": {
  "Enabled": true,
  "AuthenticationMode": "ip",
  "AllowedIps": [ "127.0.0.1", "::1", "192.168.0.100" ]
}
βœ… JWT Role Check
"Dashboard": {
  "Enabled": true,
  "AuthenticationMode": "jwt",
  "Role": "Administrator"
}
βœ… Environment-based (Dev/Staging only)
"Dashboard": {
  "Enabled": true,
  "AuthenticationMode": "env"
}

🧩 Custom Filter Injection

If you want to plug in a fully custom implementation, you can manually assign your own IRedisAuthorizationFilter in Program.cs:

app.UseRedisUI(new RedisUISettings
{
    Path = "/redis-admin",
    AuthorizationFilter = new MyCustomRedisAuthFilter()
});

🌐 Authorization Filter Factory (Automatic Selection)

To make filter setup easier and based on configuration, you can use the built-in factory to instantiate the correct filter automatically:

public static class DashboardAuthorizationFactory
{
    public static IRedisAuthorizationFilter Create(CacheDashboardOptions options, IWebHostEnvironment env)
    {
        return options.AuthenticationMode?.ToLower() switch
        {
            "basic" => new DashboardBasicAuthorizationFilter(options.Username, options.Password),
            "jwt"   => new DashboardJwtAuthorizationFilter(options.Role),
            "claim" => new DashboardClaimAuthorizationFilter(options.ClaimType, options.ClaimValue),
            "ip"    => new DashboardIpWhitelistAuthorizationFilter(options.AllowedIps),
            "env"   => new DashboardEnvironmentAuthorizationFilter(env),
            _       => new DashboardBasicAuthorizationFilter(options.Username, options.Password)
        };
    }
}

Usage inside UseCacheDashboard extension:

public static IApplicationBuilder UseCacheDashboard(this IApplicationBuilder app, IConfiguration configuration)
{
    var options = configuration.GetSection("CacheOptions").Get<CacheOptions>();

    if (options is { Provider: "Redis", Dashboard.Enabled: true })
    {
        var env = app.ApplicationServices.GetRequiredService<IWebHostEnvironment>();

        app.UseRedisUI(new RedisUISettings
        {
            Path = options.Dashboard.Path,
            ConnectionString = options.RedisConnection,
            AuthorizationFilter = DashboardAuthorizationFactory.Create(options.Dashboard, env)
        });
    }

    return app;
}

Extra: Example mapping CacheOptions

using System.Globalization;

public class CacheOptions : IAppOptions
{
    public string Provider { get; set; } = "Redis";
    public string RedisConnection { get; set; } = string.Empty;
    public string SqlConnection { get; set; } = string.Empty;
    public string Prefix { get; set; } = string.Empty;
    public Dictionary<string, string> ExpirationTimes { get; set; } = new();
    public CacheDashboardOptions Dashboard { get; set; } = new();

    public TimeSpan GetExpiration(string key)
    {
        key = key.Replace(":", "__");
        return ExpirationTimes.TryGetValue(key, out var value) && 
               TimeSpan.TryParse(value, CultureInfo.InvariantCulture, out var timeSpan)
            ? timeSpan
            : TimeSpan.FromMinutes(30);
    }
}

public class CacheDashboardOptions
{
    public bool Enabled { get; set; } = false;
    public string Path { get; set; } = "/redis-admin";
    public string Role { get; set; } = "Admin";
    public string Username { get; set; } = "admin";
    public string Password { get; set; } = "secret";
    public string AuthenticationMode { get; set; } = "basic"; // basic, jwt, claim, ip, env
    public string ClaimType { get; set; } = string.Empty;
    public string ClaimValue { get; set; } = string.Empty;
    public List<string> AllowedIps { get; set; } = new();
}

Extra: Example auto register Options:


public static IServiceCollection AddAllConfigurations(this IServiceCollection services, IConfiguration configuration)
{
    var assembly = typeof(IAppOptions).Assembly;

    var optionsTypes = assembly.GetTypes()
        .Where(t => typeof(IAppOptions).IsAssignableFrom(t) && t.IsClass && !t.IsAbstract);

    foreach (var type in optionsTypes)
    {
        var method = typeof(OptionsConfigurationServiceCollectionExtensions)
            .GetMethods(BindingFlags.Static | BindingFlags.Public)
            .First(m => m.Name == "Configure" && m.GetParameters().Length == 2)
            .MakeGenericMethod(type);

        method.Invoke(null, new object[] { services, configuration.GetSection(type.Name) });
    }

    return services;
}

These filters give you flexibility to secure your Redis UI in the way that best matches your application's security model.

πŸ‘‰ You can review the updated source and commits at github.com/frankyjquintero/RedisUI

Redis Integrated UI

NuGet Codacy Badge

Redis Integrated UI is a .NET project designed to simplify the integration of a Redis User Interface (UI) page into your web applications. With this project, users can easily incorporate a Redis UI page, enabling them to interact with Redis keys and view Redis server statistics seamlessly.

Features

  • Integration Ease: Simplifies the process of integrating a Redis UI page into web applications.

  • Redis Key Management: Provides functionality to interact with Redis keys conveniently.

    image

  • Server Statistics: Displays statistics related to the Redis server for monitoring and analysis purposes.

    image

Getting Started

To integrate the Redis UI into your application, follow these steps:

  • Install RedisUI from the NuGet Gallery.
PM> Install-Package RedisUI
  • Add the middleware to your project.
using RedisUI;

app.UseRedisUI();
  • Run your project and browse /redis path. easy peasy!

Settings

  • The Path is "/redis" by default, set a new path.
app.UseRedisUI(new RedisUISettings
{
    Path = "/myredisui",
});
  • The ConnectionString is "localhost" by default, set the connection string.
app.UseRedisUI(new RedisUISettings
{
    ConnectionString = "1.1.1.1:6379",
});
  • Use ConfigurationOptions for detailed settings.
ConfigurationOptions options = new ConfigurationOptions
{
    EndPoints = { { "my-redis.cloud.redislabs.com", 6379 } },
    User = "default",  // use your Redis user. More info https://redis.io/docs/management/security/acl/
    Password = "secret", // use your Redis password
    Ssl = true,
    SslProtocols = System.Security.Authentication.SslProtocols.Tls12                
};
app.UseRedisUI(new RedisUISettings
{
    ConfigurationOptions = options
});
  • The UI is using Bootstrap 5.3.2 version from CDN, you can get it from locally via setting properties below:
app.UseRedisUI(new RedisUISettings
{
    CssLink = "..\\mypath\\bootstrap.min.cs",
    JsLink = "..\\mypath\\bootstrap.js"
});

Authorization

You can limit access to Redis data in the production environment.

  • Add a new authorization filter and implement IRedisAuthorizationFilter
using RedisUI;

public class MyAuthorizationFilter : IRedisAuthorizationFilter
{
    private readonly bool _isDevelopment;

    public MyAuthorizationFilter(bool isDevelopment)
    {
        _isDevelopment = isDevelopment;
    }

    public bool Authorize(HttpContext context)
    {
        return _isDevelopment || (context.User.Identity != null && context.User.Identity.IsAuthenticated);
    }
}
app.UseRedisUI(new RedisUISettings
{
    AuthorizationFilter = new MyAuthorizationFilter(app.Environment.IsDevelopment())
});

Contributing

Contributions are welcome! If you'd like to contribute to Redis Integrated UI, please follow these guidelines:

  1. Fork the repository.
  2. Create your feature branch (git checkout -b feature/YourFeature).
  3. Commit your changes (git commit -am 'Add some feature').
  4. Push to the branch (git push origin feature/YourFeature).
  5. Create a new Pull Request.

License

This project is licensed under the MIT License.

Contact

For any inquiries or support regarding Redis Integrated UI, feel free to contact the project maintainer:

Product Compatible and additional computed target framework versions.
.NET net6.0 is compatible.  net6.0-android was computed.  net6.0-ios was computed.  net6.0-maccatalyst was computed.  net6.0-macos was computed.  net6.0-tvos was computed.  net6.0-windows was computed.  net7.0 is compatible.  net7.0-android was computed.  net7.0-ios was computed.  net7.0-maccatalyst was computed.  net7.0-macos was computed.  net7.0-tvos was computed.  net7.0-windows was computed.  net8.0 is compatible.  net8.0-android was computed.  net8.0-browser was computed.  net8.0-ios was computed.  net8.0-maccatalyst was computed.  net8.0-macos was computed.  net8.0-tvos was computed.  net8.0-windows was computed.  net9.0 is compatible.  net9.0-android was computed.  net9.0-browser was computed.  net9.0-ios was computed.  net9.0-maccatalyst was computed.  net9.0-macos was computed.  net9.0-tvos was computed.  net9.0-windows was computed.  net10.0 was computed.  net10.0-android was computed.  net10.0-browser was computed.  net10.0-ios was computed.  net10.0-maccatalyst was computed.  net10.0-macos was computed.  net10.0-tvos was computed.  net10.0-windows was computed. 
Compatible target framework(s)
Included target framework(s) (in package)
Learn more about Target Frameworks and .NET Standard.

NuGet packages

This package is not used by any NuGet packages.

GitHub repositories

This package is not used by any popular GitHub repositories.

<PackageReleaseNotes>
 🚀 AJAX-based UI rendering:
β€’ Migrated legacy form posts to fetch-based asynchronous calls for key operations (GET, SET, DEL, EXPIRE)
β€’ Improved responsiveness and reduced full page reloads

 🧱 Bulk Operations Toolkit:
β€’ Added support for deleting multiple keys via pattern-matching and confirmation modal
β€’ TTL and rename batch processing with unified modal-based UX
β€’ Middleware-level operation logging for mass operations

 🔐 Authentication Enhancements:
β€’ Logout flow integrated for Basic Auth with 401 redirect and UI cleanup
β€’ DashboardBasicAuthorizationFilter improved for consistent challenge handling

 📦 Redis Core Features:
β€’ FlushDB button with async confirmation
β€’ Key TTL inspection and modification
β€’ TreeView/ListView toggle with prefix-based grouping and client-side rendering

 🎨 UI/UX - Asset Improvements:
β€’ Integrated Bootstrap Icons for visual clarity (types: string, list, set, zset, hash, stream)
β€’ Refactored JS loading order and modularization
β€’ Added Monokai-style JSON editor with highlight.js for better value inspection

 📊 Redis Key Statistics:
β€’ SCAN pagination optimized using async fetch with memory-efficient iteration
β€’ Key type and TTL hints embedded in result cards

 🛠️ Configuration - Extensibility:
β€’ Added `RedisUISettings` class for runtime configuration of assets (js/css)
β€’ Exposed `BuildTreeView()` option and customizable display format
β€’ Fully targets .NET 6.0, 7.0, 8.0, and 9.0 in `TargetFrameworks`

 👥 Contributors: Franky J. Quintero, Emrah Kondur
</PackageReleaseNotes>