F2f challenge 29 sept

simple-data-txt.txt

@@ -1,3 +1,5 @@
+hmset {uri:url,method:GET,body:"{\"productTypes\":[\"device\",\"software\"],\"pageNumber\":5},anotherKey:anotherValue}" filteredData sameplevalue
+
 set BaicUser:1:name "Job Smith"
 set BaicUser:1:id 1
 lpush user:1:role Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7
@@ -11,7 +13,7 @@ set BaicUser:3:name "New-User"
 set BaicUser:3:id 3
 lpush BaicUser:3:role Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7 Admin1 Admin2 Admin3 Admin4 Admin5 Admin6 Admin7
 
-lpush WhitePermissionList "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" 
+lpush WhitePermissionList "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert" "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"  "http://127.0.0.1:4200/" "https://redis.io/topics/mass-insert"
 
 set global-config:config1 1
 set global-config:config2 2
@@ -51,4 +53,4 @@ hmset global-map map-key-103 map-value-01
 hmset global-map map-key-203 map-value-01
 
 
-set global-string "Note: The Redis Documentation is also available in raw (computer friendly) format in the redis-doc github repository. The Redis Documentation is released under the Creative Commons Attribution-ShareAlike 4.0 International license."
+set global-string "Note: The Redis Documentation is also available in raw (computer friendly) format in the redis-doc github repository. The Redis Documentation is released under the Creative Commons Attribution-ShareAlike 4.0 International license."

src/app/app.component.html

@@ -17,7 +17,7 @@
         <button mat-icon-button matTooltip="Redis API Document"><i class="material-icons">info</i></button>
         <div class="flex1"></div>
         <mat-menu #sideMenu="matMenu">
-          <button mat-menu-item (click)="refreshAndExpand()">Refresh + Expand All Nodes</button>
+          <button mat-menu-item (click)="onRefresh(true)">Refresh + Expand All Nodes</button>
           <button mat-menu-item>Import</button>
           <button mat-menu-item>Export</button>
         </mat-menu>
@@ -30,6 +30,7 @@
       <div class="{{'tree-list ' + ((cli$ | async)?.expanded ? 'cli-expanded':'')}}">
         <app-instance-tree *ngFor="let instance of instances$ | async"
                            (updatePage)="updatePage($event)"
+                           [expandDeep]="expandDeepCommand$"
                            [instance]="instance"></app-instance-tree>
       </div>
 

src/app/app.component.ts

@@ -13,7 +13,7 @@ import {
   REQ_REDIS_CONNECT,
   SELECT_REDIS
 } from './ngrx/actions/redis-actions';
-import {Observable} from 'rxjs';
+import {Observable, Subject} from 'rxjs';
 import {REQ_LOAD_PAGE, REQ_LOAD_ROOT_PAGE} from './ngrx/actions/page-actions';
 import {PageModel} from './models/page-model';
 import {ADD_COMMAND, CLEAR_HISTORY, TOGGLE_CLI} from './ngrx/actions/cli-actions';
@@ -44,6 +44,7 @@ export class AppComponent implements OnInit {
   cli$: Observable<any> = null;
   currentInstance = null;
   cliInputValue = '';
+  expandDeepCommand$: Subject<void> = new Subject();
 
   @ViewChild('cliScrollContent') private cliScrollContent: ElementRef;
 
@@ -59,7 +60,7 @@ export class AppComponent implements OnInit {
   constructor(public dialogService: MatDialog,
               private redisService: RedisService,
               private util: UtilService,
-              private _store: Store<any>
+              private _store: Store<any>,
   ) {
     this.instances$ = this._store.select('redis');
     this.currentPage$ = this._store.select('page');
@@ -97,7 +98,7 @@ export class AppComponent implements OnInit {
   /**
    * on refresh event
    */
-  onRefresh() {
+  onRefresh(expandNodes = false) {
     this.instances$.subscribe(instances => {
       const ins = instances.find(i => i.selected === true);
       if (!ins) {
@@ -107,8 +108,15 @@ export class AppComponent implements OnInit {
       this._store.dispatch({
         type: REQ_REDIS_CONNECT, payload: {
           instance: ins, scb: () => {
+            if (expandNodes) {
+              ins.expanded = true;
+            }
             if (ins.expanded) {
-              this._store.dispatch({type: REQ_FETCH_TREE, payload: {id: ins.id}});
+              this._store.dispatch({type: REQ_FETCH_TREE, payload: {id: ins.id, scb: () => {
+                if (expandNodes) {
+                  setTimeout(() => this.expandDeepCommand$.next(), 0);
+                }
+              }}});
             }
           }
         }
@@ -167,9 +175,6 @@ export class AppComponent implements OnInit {
     this._store.dispatch({type: REQ_LOAD_PAGE, payload: getNewPage()});
   }
 
-  refreshAndExpand() {
-  }
-
   /**
    * right page changed
    * @param page the page data

src/app/components/add-value-dialog/add-value-dialog.component.html

@@ -1,7 +1,13 @@
 <h1 mat-dialog-title>{{isEditMode()?'Edit value':'Add new value'}}</h1>
 <div mat-dialog-content>
   <mat-form-field>
-    <input matInput placeholder="Key" [readonly]="data.hideType" [(ngModel)]="data.key">
+    <textarea matInput placeholder="Key"
+            [readonly]="data.hideType"
+            [(ngModel)]="data.key"
+            cdkTextareaAutosize
+            #autosize="cdkTextareaAutosize"
+            cdkAutosizeMinRows="1"
+            cdkAutosizeMaxRows="7"></textarea>
   </mat-form-field>
 
 

src/app/components/add-value-form/add-value-form.component.html

@@ -21,17 +21,21 @@
              [(ngModel)]="getItemArray()[i].score">
     </mat-form-field>
 
-    <mat-form-field *ngIf="type === 'Hash Map'">
+    <mat-form-field *ngIf="type === 'Hash Map'" style="flex-grow:0">
       <input matInput placeholder="Key"
              [readonly]="isEditMode"
              (change)="onValueChange()"
              [(ngModel)]="getItemArray()[i].key">
     </mat-form-field>
 
-    <mat-form-field *ngIf="type === 'Hash Map'">
-      <input matInput placeholder="Value"
+    <mat-form-field *ngIf="type === 'Hash Map'" [ngStyle]="{'width': 8 * getItemArray()[i].value.length + 'px'}" style="max-width:70%">
+      <textarea matInput placeholder="Value"
              (change)="onValueChange()"
-             [(ngModel)]="getItemArray()[i].value">
+             [(ngModel)]="getItemArray()[i].value"
+             cdkTextareaAutosize
+             #autosize="cdkTextareaAutosize"
+             cdkAutosizeMinRows="1"
+             cdkAutosizeMaxRows="7"></textarea>
     </mat-form-field>
 
     <button mat-icon-button (click)="onRemoveItem(getItemArray(),i)" [disabled]="isEditMode">

src/app/components/data-viewer/data-viewer.component.html

@@ -16,9 +16,18 @@
     </button>
   </div>
 
+  <div class="title">
+    <span class="key"><span class="t">Key</span>: {{pageData.item.key}}</span>
+  </div>
+
+  <div *ngIf="loadingPageData" class="material-icons" class="loading-data">
+    <mat-spinner class="loading-spinner"
+                 [diameter]="20"
+                 [strokeWidth]="2"></mat-spinner>
+  </div>
+
   <div class="string-editor" *ngIf="pageData.item.type === 'string'">
 
-    <span class="key"><span class="t">Key</span>: {{pageData.item.key}}</span>
     <mat-form-field [style.fontSize]="14">
       <mat-label>Value</mat-label>
       <textarea matInput

src/app/components/data-viewer/data-viewer.component.scss

@@ -10,6 +10,24 @@
     }
   }
 
+  .title {
+    margin-top: 16px;
+    padding: 16px;
+    .key {
+      font-size: 14px;
+      .t {
+        font-weight: bold;
+        margin-right: 6px;
+      }
+    }
+  }
+
+  .loading-data {
+    padding: 16px;
+    display: flex;
+    align-items: center;
+  }
+
   .table-content {
     margin: 6px 16px 16px 16px;
     position: relative;
@@ -29,18 +47,9 @@
   }
 
   .string-editor {
-    margin-top: 16px;
     padding: 16px;
     display: flex;
     flex-direction: column;
-    .key {
-      font-size: 14px;
-      .t {
-        font-weight: bold;
-        margin-right: 6px;
-      }
-      margin-bottom: 16px;
-    }
     button {
       width: 120px;
     }

src/app/components/data-viewer/data-viewer.component.ts

@@ -32,6 +32,7 @@ export class DataViewerComponent implements OnInit, OnChanges {
   @Input() pageData = null;
   @Output() onNewValue = new EventEmitter();
   @Output() onDeleteValue = new EventEmitter();
+  loadingPageData = false;
 
   public page = {
     pageIndex: 0,
@@ -165,11 +166,14 @@ export class DataViewerComponent implements OnInit, OnChanges {
 
 
     if (type === 'list') {
+      this.loadingPageData = true;
       this.redisService.call(instanceId, [['LRANGE', key, start, end]]).subscribe(ret => {
           this.data = injectValuesToArray(ret[0]);
+          this.loadingPageData = false;
         }
       );
     } else if (type === 'zset') {
+      this.loadingPageData = true;
       this.redisService.call(instanceId, [['ZRANGE', key, start, end, 'withscores']]).subscribe(ret => {
           this.data = [];
           for (let i = 0; i < ret[0].length;) {
@@ -179,20 +183,24 @@ export class DataViewerComponent implements OnInit, OnChanges {
               value: ret[0][i],
             });
             i += 2;
+            this.loadingPageData = false;
           }
         }
       );
     } else if (type === 'set') {
       if (!this.setCachedData) {
+        this.loadingPageData = true;
         this.redisService.call(instanceId, [['SMEMBERS', key]]).subscribe(ret => {
           this.setCachedData = injectValuesToArray(ret[0]);
           this.data = this.setCachedData.slice(start, end);
+          this.loadingPageData = false;
         });
       } else {
         this.data = this.setCachedData.slice(start, end);
       }
     } else if (type === 'hash') {
       if (!this.hashCachedData) {
+        this.loadingPageData = true;
         this.redisService.call(instanceId, [['HGETALL', key]]).subscribe(ret => {
             this.hashCachedData = [];
             for (let i = 0; i < ret[0].length;) {
@@ -203,6 +211,7 @@ export class DataViewerComponent implements OnInit, OnChanges {
               i += 2;
             }
             this.data = this.hashCachedData.slice(start, end);
+            this.loadingPageData = false;
           }
         );
       } else {
@@ -230,7 +239,8 @@ export class DataViewerComponent implements OnInit, OnChanges {
       viewMode.isEditMode = true;
     }
     this.dialogService.open(AddValueDialogComponent, {
-      width: '480px',
+      minWidth: Math.min(1000, Math.max(480, (viewMode.key.length / 50) * 480)) + 'px',
+      minHeight: '400px',
       data: viewMode,
     }).afterClosed().subscribe(ret => {
       if (ret) {

src/app/components/instance-tree/instance-tree.component.ts

@@ -1,4 +1,5 @@
 import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Subject} from 'rxjs';
 import {RedisInstance} from '../../models/redis-instance';
 import {RedisService} from '../../services/redis.service';
 import {Store} from '@ngrx/store';
@@ -13,7 +14,8 @@ import {REQ_FETCH_TREE, TOGGLE_REDIS} from '../../ngrx/actions/redis-actions';
   styleUrls: ['./instance-tree.component.scss']
 })
 export class InstanceTreeComponent implements OnInit {
-  @Input() instance: RedisInstance = null;
+  @Input() instance: RedisInstance;
+  @Input() expandDeep: Subject<void>;
   @Output() updatePage = new EventEmitter();
   public selectedMap = {};
   public expandedMap = {};
@@ -59,6 +61,20 @@ export class InstanceTreeComponent implements OnInit {
     });
   }
 
+  deepExpandItem(item) {
+    this.expandedMap[item.key] = true;
+    if (item.children) {
+      item.children.forEach(child => { this.deepExpandItem(child); });
+    }
+  }
+
   ngOnInit() {
+    this.expandDeep.subscribe(() => {
+      this.instance.children.forEach(item => {
+        if (item.children) {
+          this.deepExpandItem(item);
+        }
+      });
+    });
   }
 }

src/app/components/tree-node/tree-node.component.html

@@ -15,7 +15,7 @@
       {{expandedMap[item.key]?'expand_more':'chevron_right'}}
     </i>
 
-    <span>{{item.name}}</span>
+    <span class="name">{{item.displayName || item.name}}</span>
     <span class="len" *ngIf="item.len">({{item.len}})</span>
     <span class="len" *ngIf="item.type === 'folder'">({{item.children.length}})</span>
   </div>
@@ -27,4 +27,3 @@
   >
   </app-tree-node>
 </div>
-

src/app/components/tree-node/tree-node.component.scss

@@ -54,6 +54,10 @@
         margin-left: 4px;
       }
 
+      .name {
+        white-space: nowrap;
+      }
+
       .expand-icon {
         width: 20px;
         height: 20px;

src/app/components/tree-node/tree-node.component.ts

@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
+import {Component, EventEmitter, Input, OnInit, Output, OnChanges} from '@angular/core';
 
 /**
  * tree node component
@@ -8,7 +8,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
   templateUrl: './tree-node.component.html',
   styleUrls: ['./tree-node.component.scss']
 })
-export class TreeNodeComponent implements OnInit {
+export class TreeNodeComponent implements OnInit, OnChanges {
   @Input() itemNode = null;
   @Input() selectedMap = null;
   @Input() expandedMap = null;
@@ -18,6 +18,7 @@ export class TreeNodeComponent implements OnInit {
   }
 
   ngOnInit() {
+    this.ngOnChanges();
   }
 
 
@@ -35,4 +36,34 @@ export class TreeNodeComponent implements OnInit {
     };
     return typesMap[type];
   }
+
+  ngOnChanges() {
+    if (!this.itemNode || !this.itemNode.children || !this.itemNode.key) {
+      return;
+    }
+
+    const setDisplayName = item => {
+      if (item.key.indexOf('{') === -1) {
+        return item.displayName = item.name;
+      }
+
+      if (item.key.indexOf(',') === -1) {
+        return item.displayName = 'API Request' + '*';
+      }
+
+      const regexResults = item.key.match(/(?<=,|{)[^,{}]+(?=,|{|})/g);
+      let index = regexResults.length - 1;
+      item.displayName = regexResults[index];
+      while (item.displayName.indexOf(':') === -1) {
+        index -= 1;
+        item.displayName = regexResults[index] + item.displayName;
+      }
+
+      item.displayName += item.children ? '*' : '';
+    };
+
+    setDisplayName(this.itemNode);
+    this.itemNode.children.forEach(setDisplayName);
+
+  }
 }

src/app/ngrx/effects/redis-effect.ts

@@ -63,6 +63,9 @@ export class RedisEffect {
         const id = action['payload'].id;
         return this.redisService.fetchTree({id}).pipe(
           map(data => {
+            if (action['payload'].scb) {
+              action['payload'].scb(data);
+            }
             return {type: FETCHED_TREE, payload: {id, data}};
           }),
           catchError(() => {

src/styles.scss

@@ -16,3 +16,8 @@ html, body {
 mat-form-field {
   width: 100%;
 }
+
+.cdk-overlay-pane {
+  resize: both;
+  overflow: hidden;
+}