Redis Manager Bug Fix F2F

Greetings Topcoders! Our client has had the chance to play with the Redis Manager you have built and is very pleased! In this F2F challenge, we need to tweak some of the existing features.

For folks who didn’t get the chance to compete in the past two challenges, our client has asked for us to build a clone of  Redis Commander  and  Medis, only in Angular6 so they can add some custom components as needed.  The intent is to open source this project once it is complete and winners will be added to the contrib.md

If you are new to Redis, it is an in-memory data store that is most commonly used to support web apps that need fast and frequent access to key-value pairs. This technique commonly known as data caching leverages Redis, however, to manage Redis users must become familiar with the Redis command line interface (CLI). Since the end users do not use Redis enough to become proficient with the CLI, we’ve been asked to make a management app for them.

Final Submission Guidelines

Requirements

There are 8 issues we need our crowd to tackle for this challenge. All of them are in scope.

1.The UI should determine that the value has a large content and provide me with a dialog that has an expandable multi-line entry widget - and the dialog is resizeable.

2.When drilling down a key tree, when I finally get to a value, I need to see the full key path in the detail pain, otherwise I get lost as to what I am looking at deeply nested key

 

3. The dialog is not resizeable so the path gets cut off.

4. Responsive display makes a mess of long keys when display is narrow. Client would like the long keys to be hidden to the right behind right detail panel, as in Redis Commander. Then when a node is selected, the detail panel will show the full key path as a label at the top - like a window bar.

 

RedisCommander for reference:

 

5. When I get down to a leaf, can we combine the key part with the parent - it will read nicer to see the leaf node key listed as :
{…}  “pageSize”:4 (5)
this is a matter of algorithms on how we interpret the key format and break into tree. nodes.  I would like to make this more user friendly (albeit more algorithm complex)

 

 

 

 6. A key for a uri is:
{
  uri: <url>,
  method:<[POST|GET]>,
  body:{
     "productTypes": [<string>,...],
     "pageNumber":<n>,
     "pageSize":<n>
  }
}

it is just a json object, so the nodes would be
• uri: <url>
  • method: <method>
     • body: *
         • “productTypes”:[<string>,…]  
            • “pageSize”:<n>
               • “pageNumber”:<n> (edited)
this would put each json key:value together as a tree node name
   
7. Refresh + Expand All Nodes does nothing  

8. When I click on a node that takes a few moments to load the content from the redis server to the UI I need a loading signal. It could be a progress bar or a spinner, or a “Loading” label.

 

Technology Stack

Frontend

• Angular 6
• Angular Material https://material.angular.io/
• Material Icons https://material.io/tools/icons/?style=baseline

Backend

• ioredis https://github.com/luin/ioredis
• Currently Express (see major requirements)
• NodeJS

Submission

• Please clone : https://github.com/topcoderinc/TC-redis-manager The winner will be asked to submit a pull request.
• Also, please submit your source files in a zip for review.
• Please update the README.md file to include the commands you have added