Redis Vue is a simple, lightweight, versatile Redis Admin UI developed using Vue and ServiceStack .NET Core Web Apps. It supports Redis's core Strings, Lists, Sets, Sorted Sets and Hash data structures and custom Redis commands with its entire functionality contained in a single /app/index.html using the dynamic ServiceStack Templates language, making it easy to customize and further enhance.
Run as a Desktop App (Windows only):
$ dotnet tool install -g app
$ app install redis
$ cd redis && app
Run as a .NET Core Web App (Windows, macOS, Linux):
$ dotnet tool install -g web
$ web install redis
$ cd redis && web
Requires .NET Core 2.1.
Redis React is a simple user-friendly UI for browsing data in Redis servers that leverages the navigation and deep-linking benefits of a Web-based UI, the productivity and responsiveness of the React framework and the deep Integration possible from a Native App.
The Redis React App has been packaged for multiple platforms inc. the ASP.NET Live Demo redisreact.servicestack.net deployed on AWS which you can use to preview Redis React browsing a redis server populated with the Northwind Dataset persisted as JSON following the Complex Type Conventions built into the C# ServiceStack.Redis Client.
Downloads available from Redis React Home Page
Confident that I’ve optimized ServiceStack’s JSON web services performance enough with the adoption of my latest efforts developing .NET’s fastest JSON Serializer, I’m now turning my attention towards creating apps that take advantage of it.
I’m a firm believer that performance is one of, if not the most important feature in developing an App that most users will love and use on a regular basis. It’s the common trait amongst all the apps and websites I regularly use and is why I’m continually seeking software components and/or techniques that can help make my software run faster; or whenever there is no alternative to develop them myself. Although having said this I’m not a complete perf maniac and find that its important to strike a balance between productivity, utility and performance – which is what has effectively kept me tied to C# language for all my server development.
One of the exciting movements that have occurred in recent times is the introduction of NoSQL suite of data persistence solutions. There are numerous impressive NoSQL solutions out there but the one that I have been most interested in is Redis which from the projects website:
is an advanced key-value store. It is similar to memcached but the dataset is not volatile, and values can be strings, exactly like in memcached, but also lists, sets, and ordered sets. All this data types can be manipulated with atomic operations to push/pop elements, add/remove elements, perform server side union, intersection, difference between sets, and so forth. I found this fascinating since it provides an extremely fast data-store (that gets routinely persisted) supporting rich data-structures that can be safely accessed by multiple app servers concurrently since all operations are atomic. Sweet just what I always wanted – although to make it productive I developed a C# Redis Client that apart from supporting Redis’s entire feature-set also provides a high-level typed API that can persist any .NET POCO Type which gets persisted as JSON in Redis.
One of the disadvantages that comes with making use of a shiny new tech is that there is sometimes not a lot of tooling available for it. Despite its vibrant community this is also true for Redis where although it sports a rich command-line interface (Unix software is good like this) the GUI admin tools are somewhat lacking. Not to worry, I actually needed a project to work on to learn about Google’s closure-library anyway so this ended up being a pretty good fit.
Before we get into more detail its probably a good idea to showcase some of screenshots of where its currently at: Note: You can also try it out live: http://redisadminui.servicestack.net/
Admin tab showing redis instance info
Aggregate view of complex types
View single complex type
In order to be able to access Redis from a web page some JSON web services are in order. I could’ve just implemented the services required by the Admin UI although I wanted to flex some ServiceStack muscle so decided to create web services for all of Redis’s operations which on final count totalled near 100 web services that I ended up knocking out over a single weekend. One of the benefits of using ServiceStack to develop your web services is that you get SOAP, XML, JSON and JSV endpoints for free. So after spending the next couple of days creating unit tests to provide 100% coverage, the back-end was complete – thus giving Redis CouchDB-like powers by allowing it to be accessed from any HTTP client.
Those interested in the Redis Web Services component can check out a live preview – with the complete list of available web services are available here:
http://redisadminui.servicestack.net/Metadata
And some examples on how to call them:
http://redisadminui.servicestack.net/json/reply/GetServerInfo (JSON)
http://redisadminui.servicestack.net/json/reply/SearchKeys?Pattern=urn:c* (XML)
With the web services in place, it is now possible to build pure static html/js/css ajax apps talking directly to the servers’ JSON data services – with no other web framework required! The closure-library although not as terse or as initially productive as jQuery really shines in building large applications. It has a good framework for developing and re-using JavaScript classes and modules and comes with a set of rich, well-tested, cross-browser-compatible widgets. So within a couple of weeks of hacking on the client I was able to churn out a fairly useful featureset:
- A TreeView displaying a heirachal view of the filtered redis keyset
- Deep linking support so you can refresh, save or send a link of the entry you’re looking at
- Back and forward button support
- A tabular, aggregate view of all your ‘grouped keys’
- An auto-complete filter to filter the tabular data
- Updating and deleting of string values
- Identifying the type, viewing and deleting of all keys
- An admin interface to view redis server stats and the ability to destroy and rebuild the entire redis instance
In order to provide a useful Generic UI I’ve had to make a few assumptions on conventions used. Coincidentally these also happen to be the same conventions that the ServiceStack’s C# Redis Client uses when storing data :-) .
- Keys parts should be separated with a ‘:’
- Keys within the same group are expected to be of the same type
- Complex types are stored as JSON
There are likely to be others I’ve subconsciously used so I’ll make an effort to keep this list of assumptions live.
Like the rest of ServiceStack the Redis Admin UI is Open source released under the liberal new BSD licence.
In keeping with tradition with most of my software, the Redis Admin UI works cross-platform on Windows with .NET and Linux and OSX using Mono (Live demo is hosted on CentOS/Nginx). I’ve had an attempt at some basic installation instructions that are included in the downloaded and viewable online.
The latest version is hosted on Service Stacks code project site at the following url:
https://github.com/downloads/mythz/ServiceStack.RedisWebServices/RedisAdminUI.zip
The Admin UI is highly customizable and very hackable since its written all in JavaScript, so if you are interested in customizing the UI for your own purposes I invite you get started by downloading the development version from svn trunk.