Skip to content

Commit 1c1d2ea

Browse files
ksmacleod99ksmacleod99
authored
Merge pull request #2 from ronakkaria/f2f_challenge_29_Sept
F2f challenge 29 sept
2 parents 28bc1ce + 96f1fb2 commit 1c1d2ea

14 files changed

+135
-31
lines changed

‎simple-data-txt.txt

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
hmset {uri:url,method:GET,body:"{\"productTypes\":[\"device\",\"software\"],\"pageNumber\":5},anotherKey:anotherValue}" filteredData sameplevalue
2+
13
set BaicUser:1:name "Job Smith"
24
set BaicUser:1:id 1
35
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"
1113
set BaicUser:3:id 3
1214
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
1315

14-
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"
16+
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"
1517

1618
set global-config:config1 1
1719
set global-config:config2 2
@@ -51,4 +53,4 @@ hmset global-map map-key-103 map-value-01
5153
hmset global-map map-key-203 map-value-01
5254

5355

54-
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."
56+
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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
<button mat-icon-button matTooltip="Redis API Document"><i class="material-icons">info</i></button>
1818
<div class="flex1"></div>
1919
<mat-menu #sideMenu="matMenu">
20-
<button mat-menu-item (click)="refreshAndExpand()">Refresh + Expand All Nodes</button>
20+
<button mat-menu-item (click)="onRefresh(true)">Refresh + Expand All Nodes</button>
2121
<button mat-menu-item>Import</button>
2222
<button mat-menu-item>Export</button>
2323
</mat-menu>
@@ -30,6 +30,7 @@
3030
<div class="{{'tree-list ' + ((cli$ | async)?.expanded ? 'cli-expanded':'')}}">
3131
<app-instance-tree *ngFor="let instance of instances$ | async"
3232
(updatePage)="updatePage($event)"
33+
[expandDeep]="expandDeepCommand$"
3334
[instance]="instance"></app-instance-tree>
3435
</div>
3536

‎src/app/app.component.ts

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import {
1313
REQ_REDIS_CONNECT,
1414
SELECT_REDIS
1515
} from './ngrx/actions/redis-actions';
16-
import {Observable} from 'rxjs';
16+
import {Observable, Subject} from 'rxjs';
1717
import {REQ_LOAD_PAGE, REQ_LOAD_ROOT_PAGE} from './ngrx/actions/page-actions';
1818
import {PageModel} from './models/page-model';
1919
import {ADD_COMMAND, CLEAR_HISTORY, TOGGLE_CLI} from './ngrx/actions/cli-actions';
@@ -44,6 +44,7 @@ export class AppComponent implements OnInit {
4444
cli$: Observable<any> = null;
4545
currentInstance = null;
4646
cliInputValue = '';
47+
expandDeepCommand$: Subject<void> = new Subject();
4748

4849
@ViewChild('cliScrollContent') private cliScrollContent: ElementRef;
4950

@@ -59,7 +60,7 @@ export class AppComponent implements OnInit {
5960
constructor(public dialogService: MatDialog,
6061
private redisService: RedisService,
6162
private util: UtilService,
62-
private _store: Store<any>
63+
private _store: Store<any>,
6364
) {
6465
this.instances$ = this._store.select('redis');
6566
this.currentPage$ = this._store.select('page');
@@ -97,7 +98,7 @@ export class AppComponent implements OnInit {
9798
/**
9899
* on refresh event
99100
*/
100-
onRefresh() {
101+
onRefresh(expandNodes = false) {
101102
this.instances$.subscribe(instances => {
102103
const ins = instances.find(i => i.selected === true);
103104
if (!ins) {
@@ -107,8 +108,15 @@ export class AppComponent implements OnInit {
107108
this._store.dispatch({
108109
type: REQ_REDIS_CONNECT, payload: {
109110
instance: ins, scb: () => {
111+
if (expandNodes) {
112+
ins.expanded = true;
113+
}
110114
if (ins.expanded) {
111-
this._store.dispatch({type: REQ_FETCH_TREE, payload: {id: ins.id}});
115+
this._store.dispatch({type: REQ_FETCH_TREE, payload: {id: ins.id, scb: () => {
116+
if (expandNodes) {
117+
setTimeout(() => this.expandDeepCommand$.next(), 0);
118+
}
119+
}}});
112120
}
113121
}
114122
}
@@ -167,9 +175,6 @@ export class AppComponent implements OnInit {
167175
this._store.dispatch({type: REQ_LOAD_PAGE, payload: getNewPage()});
168176
}
169177

170-
refreshAndExpand() {
171-
}
172-
173178
/**
174179
* right page changed
175180
* @param page the page data

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

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
<h1 mat-dialog-title>{{isEditMode()?'Edit value':'Add new value'}}</h1>
22
<div mat-dialog-content>
33
<mat-form-field>
4-
<input matInput placeholder="Key" [readonly]="data.hideType" [(ngModel)]="data.key">
4+
<textarea matInput placeholder="Key"
5+
[readonly]="data.hideType"
6+
[(ngModel)]="data.key"
7+
cdkTextareaAutosize
8+
#autosize="cdkTextareaAutosize"
9+
cdkAutosizeMinRows="1"
10+
cdkAutosizeMaxRows="7"></textarea>
511
</mat-form-field>
612

713

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

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,21 @@
2121
[(ngModel)]="getItemArray()[i].score">
2222
</mat-form-field>
2323

24-
<mat-form-field *ngIf="type === 'Hash Map'">
24+
<mat-form-field *ngIf="type === 'Hash Map'" style="flex-grow:0">
2525
<input matInput placeholder="Key"
2626
[readonly]="isEditMode"
2727
(change)="onValueChange()"
2828
[(ngModel)]="getItemArray()[i].key">
2929
</mat-form-field>
3030

31-
<mat-form-field *ngIf="type === 'Hash Map'">
32-
<input matInput placeholder="Value"
31+
<mat-form-field *ngIf="type === 'Hash Map'" [ngStyle]="{'width': 8 * getItemArray()[i].value.length + 'px'}" style="max-width:70%">
32+
<textarea matInput placeholder="Value"
3333
(change)="onValueChange()"
34-
[(ngModel)]="getItemArray()[i].value">
34+
[(ngModel)]="getItemArray()[i].value"
35+
cdkTextareaAutosize
36+
#autosize="cdkTextareaAutosize"
37+
cdkAutosizeMinRows="1"
38+
cdkAutosizeMaxRows="7"></textarea>
3539
</mat-form-field>
3640

3741
<button mat-icon-button (click)="onRemoveItem(getItemArray(),i)" [disabled]="isEditMode">

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

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,9 +16,18 @@
1616
</button>
1717
</div>
1818

19+
<div class="title">
20+
<span class="key"><span class="t">Key</span>: {{pageData.item.key}}</span>
21+
</div>
22+
23+
<div *ngIf="loadingPageData" class="material-icons" class="loading-data">
24+
<mat-spinner class="loading-spinner"
25+
[diameter]="20"
26+
[strokeWidth]="2"></mat-spinner>
27+
</div>
28+
1929
<div class="string-editor" *ngIf="pageData.item.type === 'string'">
2030

21-
<span class="key"><span class="t">Key</span>: {{pageData.item.key}}</span>
2231
<mat-form-field [style.fontSize]="14">
2332
<mat-label>Value</mat-label>
2433
<textarea matInput

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

Lines changed: 18 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,24 @@
1010
}
1111
}
1212

13+
.title {
14+
margin-top: 16px;
15+
padding: 16px;
16+
.key {
17+
font-size: 14px;
18+
.t {
19+
font-weight: bold;
20+
margin-right: 6px;
21+
}
22+
}
23+
}
24+
25+
.loading-data {
26+
padding: 16px;
27+
display: flex;
28+
align-items: center;
29+
}
30+
1331
.table-content {
1432
margin: 6px 16px 16px 16px;
1533
position: relative;
@@ -29,18 +47,9 @@
2947
}
3048

3149
.string-editor {
32-
margin-top: 16px;
3350
padding: 16px;
3451
display: flex;
3552
flex-direction: column;
36-
.key {
37-
font-size: 14px;
38-
.t {
39-
font-weight: bold;
40-
margin-right: 6px;
41-
}
42-
margin-bottom: 16px;
43-
}
4453
button {
4554
width: 120px;
4655
}

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

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export class DataViewerComponent implements OnInit, OnChanges {
3232
@Input() pageData = null;
3333
@Output() onNewValue = new EventEmitter();
3434
@Output() onDeleteValue = new EventEmitter();
35+
loadingPageData = false;
3536

3637
public page = {
3738
pageIndex: 0,
@@ -165,11 +166,14 @@ export class DataViewerComponent implements OnInit, OnChanges {
165166

166167

167168
if (type === 'list') {
169+
this.loadingPageData = true;
168170
this.redisService.call(instanceId, [['LRANGE', key, start, end]]).subscribe(ret => {
169171
this.data = injectValuesToArray(ret[0]);
172+
this.loadingPageData = false;
170173
}
171174
);
172175
} else if (type === 'zset') {
176+
this.loadingPageData = true;
173177
this.redisService.call(instanceId, [['ZRANGE', key, start, end, 'withscores']]).subscribe(ret => {
174178
this.data = [];
175179
for (let i = 0; i < ret[0].length;) {
@@ -179,20 +183,24 @@ export class DataViewerComponent implements OnInit, OnChanges {
179183
value: ret[0][i],
180184
});
181185
i += 2;
186+
this.loadingPageData = false;
182187
}
183188
}
184189
);
185190
} else if (type === 'set') {
186191
if (!this.setCachedData) {
192+
this.loadingPageData = true;
187193
this.redisService.call(instanceId, [['SMEMBERS', key]]).subscribe(ret => {
188194
this.setCachedData = injectValuesToArray(ret[0]);
189195
this.data = this.setCachedData.slice(start, end);
196+
this.loadingPageData = false;
190197
});
191198
} else {
192199
this.data = this.setCachedData.slice(start, end);
193200
}
194201
} else if (type === 'hash') {
195202
if (!this.hashCachedData) {
203+
this.loadingPageData = true;
196204
this.redisService.call(instanceId, [['HGETALL', key]]).subscribe(ret => {
197205
this.hashCachedData = [];
198206
for (let i = 0; i < ret[0].length;) {
@@ -203,6 +211,7 @@ export class DataViewerComponent implements OnInit, OnChanges {
203211
i += 2;
204212
}
205213
this.data = this.hashCachedData.slice(start, end);
214+
this.loadingPageData = false;
206215
}
207216
);
208217
} else {
@@ -230,7 +239,8 @@ export class DataViewerComponent implements OnInit, OnChanges {
230239
viewMode.isEditMode = true;
231240
}
232241
this.dialogService.open(AddValueDialogComponent, {
233-
width: '480px',
242+
minWidth: Math.min(1000, Math.max(480, (viewMode.key.length / 50) * 480)) + 'px',
243+
minHeight: '400px',
234244
data: viewMode,
235245
}).afterClosed().subscribe(ret => {
236246
if (ret) {

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

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
2+
import {Subject} from 'rxjs';
23
import {RedisInstance} from '../../models/redis-instance';
34
import {RedisService} from '../../services/redis.service';
45
import {Store} from '@ngrx/store';
@@ -13,7 +14,8 @@ import {REQ_FETCH_TREE, TOGGLE_REDIS} from '../../ngrx/actions/redis-actions';
1314
styleUrls: ['./instance-tree.component.scss']
1415
})
1516
export class InstanceTreeComponent implements OnInit {
16-
@Input() instance: RedisInstance = null;
17+
@Input() instance: RedisInstance;
18+
@Input() expandDeep: Subject<void>;
1719
@Output() updatePage = new EventEmitter();
1820
public selectedMap = {};
1921
public expandedMap = {};
@@ -59,6 +61,20 @@ export class InstanceTreeComponent implements OnInit {
5961
});
6062
}
6163

64+
deepExpandItem(item) {
65+
this.expandedMap[item.key] = true;
66+
if (item.children) {
67+
item.children.forEach(child => { this.deepExpandItem(child); });
68+
}
69+
}
70+
6271
ngOnInit() {
72+
this.expandDeep.subscribe(() => {
73+
this.instance.children.forEach(item => {
74+
if (item.children) {
75+
this.deepExpandItem(item);
76+
}
77+
});
78+
});
6379
}
6480
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
{{expandedMap[item.key]?'expand_more':'chevron_right'}}
1616
</i>
1717

18-
<span>{{item.name}}</span>
18+
<span class="name">{{item.displayName || item.name}}</span>
1919
<span class="len" *ngIf="item.len">({{item.len}})</span>
2020
<span class="len" *ngIf="item.type === 'folder'">({{item.children.length}})</span>
2121
</div>
@@ -27,4 +27,3 @@
2727
>
2828
</app-tree-node>
2929
</div>
30-

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

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@
5454
margin-left: 4px;
5555
}
5656

57+
.name {
58+
white-space: nowrap;
59+
}
60+
5761
.expand-icon {
5862
width: 20px;
5963
height: 20px;

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

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
1+
import {Component, EventEmitter, Input, OnInit, Output, OnChanges} from '@angular/core';
22

33
/**
44
* tree node component
@@ -8,7 +8,7 @@ import {Component, EventEmitter, Input, OnInit, Output} from '@angular/core';
88
templateUrl: './tree-node.component.html',
99
styleUrls: ['./tree-node.component.scss']
1010
})
11-
export class TreeNodeComponent implements OnInit {
11+
export class TreeNodeComponent implements OnInit, OnChanges {
1212
@Input() itemNode = null;
1313
@Input() selectedMap = null;
1414
@Input() expandedMap = null;
@@ -18,6 +18,7 @@ export class TreeNodeComponent implements OnInit {
1818
}
1919

2020
ngOnInit() {
21+
this.ngOnChanges();
2122
}
2223

2324

@@ -35,4 +36,34 @@ export class TreeNodeComponent implements OnInit {
3536
};
3637
return typesMap[type];
3738
}
39+
40+
ngOnChanges() {
41+
if (!this.itemNode || !this.itemNode.children || !this.itemNode.key) {
42+
return;
43+
}
44+
45+
const setDisplayName = item => {
46+
if (item.key.indexOf('{') === -1) {
47+
return item.displayName = item.name;
48+
}
49+
50+
if (item.key.indexOf(',') === -1) {
51+
return item.displayName = 'API Request' + '*';
52+
}
53+
54+
const regexResults = item.key.match(/(?<=,|{)[^,{}]+(?=,|{|})/g);
55+
let index = regexResults.length - 1;
56+
item.displayName = regexResults[index];
57+
while (item.displayName.indexOf(':') === -1) {
58+
index -= 1;
59+
item.displayName = regexResults[index] + item.displayName;
60+
}
61+
62+
item.displayName += item.children ? '*' : '';
63+
};
64+
65+
setDisplayName(this.itemNode);
66+
this.itemNode.children.forEach(setDisplayName);
67+
68+
}
3869
}

0 commit comments

Comments
 (0)