Skip to content
This repository was archived by the owner on Aug 29, 2022. It is now read-only.

Commit eb65734

Browse files
saikiran2603saikiran2603
authored
Merge pull request #210 from navigateconsulting/ui-minor-tweaks
Ui minor tweaks
2 parents da753b2 + 1899373 commit eb65734

File tree

9 files changed

+55
-115
lines changed

9 files changed

+55
-115
lines changed

‎RELEASE.md‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,9 @@ Bug fixes
3030

3131
## Major Features and Improvements
3232

33-
* 207 <https://github.com/navigateconsulting/eva/pull/207> changes to UI
33+
* 207 <https://github.com/navigateconsulting/eva/pull/207> changes to UI
3434
* 209 <https://github.com/navigateconsulting/eva/pull/209> Rasa version upgrade to 1.10.3
35+
* 210 <https://github.com/navigateconsulting/eva/pull/210> Spinner issue on Manage Project Page has now been resolved, earlier there was a delay in showing the spinner. Conversations Chat was not displaying the slot values earlier, now the issue is fixed.
3536

3637
## Bug Fixes and Other Changes
3738

‎ui-trainer/src/app/common/services/apis.service.ts‎

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -143,16 +143,11 @@ export class ApiService {
143143
);
144144
}
145145

146-
forceConversationsCacheReload(type: string) {
147-
if (type === 'reset') {
146+
forceConversationsCacheReload() {
148147
// Calling next will complete the current cache instance
149148
this.reloadConversations$.next();
150149
// Setting the cache to null will create a new cache the
151150
this.conversationsCache$ = null;
152-
} else if (type === 'finish') {
153-
// Calling next will complete the current cache instance
154-
this.reloadConversations$.next();
155-
}
156151
}
157152
// Conversations API End
158153

‎ui-trainer/src/app/conversation-chat/conversation-chat.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@
1313

1414
.try-now-frame {
1515
border-top: 1px solid #DDD;
16-
height: 112vh;
16+
height: 102vh;
1717
overflow-y: auto;
1818
}
1919
.end-try-now {

‎ui-trainer/src/app/conversations/conversations.component.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ export class ConversationsComponent implements OnInit, OnDestroy {
2323
conversationsDataSource: any;
2424
conversations_json: Array<object>;
2525
conversations_json_backup: Array<object>;
26-
filterConversationText: string;
26+
filterConversationText = '';
2727

2828
@ViewChild(MatPaginator) paginator: MatPaginator;
2929

@@ -38,7 +38,8 @@ export class ConversationsComponent implements OnInit, OnDestroy {
3838
getConversations() {
3939
this.apiService.requestConversations().subscribe(conversations => {
4040
if (conversations) {
41-
this.conversations_json = this.conversations_json_backup = conversations;
41+
this.conversations_json = conversations.slice();
42+
this.conversations_json_backup = JSON.parse(JSON.stringify(this.conversations_json));
4243
this.conversationsDataSource = new MatTableDataSource(this.conversations_json);
4344
this.conversationsDataSource.paginator = this.paginator;
4445
this.applyConversationsFilter(this.filterConversationText);
@@ -72,7 +73,7 @@ export class ConversationsComponent implements OnInit, OnDestroy {
7273

7374
openConversationChat(conversation_id: string) {
7475
// tslint:disable-next-line: max-line-length
75-
this.sharedDataService.setSharedData('conversation_json', this.conversations_json.filter(conversations => conversations['sender_id'] === conversation_id), constant.MODULE_COMMON);
76+
this.sharedDataService.setSharedData('conversation_json', this.conversations_json_backup.filter(conversations => conversations['sender_id'] === conversation_id), constant.MODULE_COMMON);
7677
this._router.navigate(['/home/conversations/' + conversation_id]);
7778
}
7879

@@ -81,7 +82,7 @@ export class ConversationsComponent implements OnInit, OnDestroy {
8182
}
8283

8384
ngOnDestroy(): void {
84-
this.apiService.forceConversationsCacheReload('finish');
85+
this.apiService.forceConversationsCacheReload();
8586
}
8687

8788
}

‎ui-trainer/src/app/deploy/deploy.component.html‎

Lines changed: 1 addition & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -32,27 +32,11 @@
3232
<th mat-header-cell *matHeaderCellDef> Model Name </th>
3333
<td mat-cell *matCellDef="let project"> {{project.model_name}} </td>
3434
</ng-container>
35-
36-
<ng-container matColumnDef="state">
37-
<th mat-header-cell *matHeaderCellDef> State </th>
38-
<td mat-cell *matCellDef="let project">
39-
<mat-spinner *ngIf="project.state==='Training'" class="train-project" [diameter]="30"></mat-spinner>
40-
</td>
41-
</ng-container>
42-
43-
<ng-container matColumnDef="train">
44-
<th mat-header-cell *matHeaderCellDef> Train </th>
45-
<td mat-cell *matCellDef="let project" class="train">
46-
<button mat-icon-button class="text-center project-icons" (click)="trainModel(project._id.$oid)">
47-
<mat-icon>model_training</mat-icon>
48-
</button>
49-
</td>
50-
</ng-container>
5135

5236
<ng-container matColumnDef="deploy">
5337
<th mat-header-cell *matHeaderCellDef> Deploy </th>
5438
<td mat-cell *matCellDef="let project" class="deploy">
55-
<button mat-icon-button class="text-center project-icons" [disabled]="project.state === 'Training'||project.model_name===''" (click)="deployModel(project._id.$oid)">
39+
<button mat-icon-button class="text-center project-icons" [disabled]="project.state === 'Training'||project.model_name===''" (click)="deployModel(project.model_name)">
5640
<mat-icon>cloud_done</mat-icon>
5741
</button>
5842
</td>

‎ui-trainer/src/app/deploy/deploy.component.ts‎

Lines changed: 3 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export class DeployComponent implements OnInit, OnDestroy {
2626
public sharedDataService: SharedDataService,
2727
public notificationsService: NotificationsService) {}
2828

29-
projectsModelDisplayedColumns: string[] = ['icon', 'project_name', 'source', 'model_name', 'state', 'train', 'deploy'];
29+
projectsModelDisplayedColumns: string[] = ['icon', 'project_name', 'source', 'model_name', 'deploy'];
3030
projectsModelDataSource: any;
3131

3232
@ViewChild(MatPaginator) paginator: MatPaginator;
@@ -52,62 +52,12 @@ export class DeployComponent implements OnInit, OnDestroy {
5252
this.projectsModelDataSource.filter = filterValue.trim().toLowerCase();
5353
}
5454

55-
trainModel(projectObjectId: string) {
56-
this.apiService.requestModelTraining(projectObjectId).subscribe(response => {
57-
if (response['status'] === 'Success' && response['message'] === 'PENDING') {
58-
this.notificationsService.showToast({status: 'Info', message: 'Model Is Getting Trained.'});
59-
this.checkModelTrainStatus(projectObjectId, response['task_id']);
60-
} else if (response['status'] === 'Error') {
61-
const dialogRef = this.dialog.open(ShowTrainErrorComponent, {
62-
width: '700px',
63-
data: {errorMessage: response['message']}
64-
});
65-
dialogRef.afterClosed().subscribe(response => {});
66-
}
67-
},
68-
err => console.error('Observer got an error: ' + err),
69-
() => console.log('Observer got a complete notification'));
70-
}
71-
72-
checkModelTrainStatus(projectObjectId: string, taskId: string) {
73-
this.apiService.forceModelTrainingCacheReload('reset');
74-
this.apiService.checkModelTrainStatus(taskId).subscribe(response => {
75-
if (response['Status'] === 'SUCCESS') {
76-
this.getModelTrainResult(projectObjectId, taskId);
77-
}
78-
},
79-
err => console.error('Observer got an error: ' + err),
80-
() => console.log('Observer got a complete notification'));
81-
}
82-
83-
getModelTrainResult(projectObjectId: string, taskId: string) {
84-
this.apiService.getModelTrainingResult(taskId).subscribe(response => {
85-
if (response['Status'] === 'Success') {
86-
sessionStorage.setItem(projectObjectId, response['Message']);
87-
this.notificationsService.showToast({status: response['Status'], message: 'Model Training Complete.'});
88-
} else if (response['Status'] === 'Error') {
89-
const dialogRef = this.dialog.open(ShowTrainErrorComponent, {
90-
width: '700px',
91-
data: {errorMessage: response['Message']}
92-
});
93-
dialogRef.afterClosed().subscribe(response => {});
94-
}
95-
this.finishTraining();
96-
},
97-
err => console.error('Observer got an error: ' + err),
98-
() => console.log('Observer got a complete notification'));
99-
}
100-
101-
deployModel(projectObjectId: string) {
102-
if (!sessionStorage.getItem(projectObjectId)) {
103-
this.notificationsService.showToast({status: 'Error', message: 'Model Has Not Been Trained For This Project'});
104-
return;
105-
}
55+
deployModel(projectModelName: string) {
10656
const dialogRef = this.dialog.open(DeployModelComponent);
10757
dialogRef.afterClosed().subscribe(response => {
10858
if (response) {
10959
this.overlayService.spin$.next(true);
110-
this.apiService.deployTrainedModel(sessionStorage.getItem(projectObjectId)).subscribe(result => {
60+
this.apiService.deployTrainedModel(projectModelName).subscribe(result => {
11161
this.overlayService.spin$.next(false);
11262
this.notificationsService.showToast({status: 'Success', message: 'Model Deployed Successfully'});
11363
this.apiService.forceProjectsCacheReload('reset');

‎ui-trainer/src/app/manage-projects/manage-projects.component.html‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -92,14 +92,14 @@
9292

9393
<ng-container matColumnDef="state">
9494
<th mat-header-cell *matHeaderCellDef>State</th>
95-
<td mat-cell *matCellDef="let project">
96-
<mat-spinner *ngIf="project.state==='Training'" class="train-project" [diameter]="30"></mat-spinner>
95+
<td mat-cell *matCellDef="let project; let i = index;">
96+
<mat-spinner *ngIf="showSpinner[i] || project.state==='Training'" class="train-project" [diameter]="30"></mat-spinner>
9797
</td>
9898
</ng-container>
9999

100100
<ng-container matColumnDef="edit">
101101
<th mat-header-cell *matHeaderCellDef>Edit</th>
102-
<td mat-cell *matCellDef="let project">
102+
<td mat-cell *matCellDef="let project; let i = index;">
103103
<button class="project-icons" mat-icon-button
104104
(click)="
105105
editProject(
@@ -108,7 +108,7 @@
108108
project.project_description
109109
)
110110
"
111-
[disabled]="project.state === 'Training'"
111+
[disabled]="showSpinner[i] || project.state === 'Training'"
112112
>
113113
<mat-icon>edit</mat-icon>
114114
</button>
@@ -117,12 +117,12 @@
117117

118118
<ng-container matColumnDef="delete">
119119
<th mat-header-cell *matHeaderCellDef>Delete</th>
120-
<td mat-cell *matCellDef="let project">
120+
<td mat-cell *matCellDef="let project; let i = index;">
121121
<button
122122
class="project-icons"
123123
mat-icon-button
124124
(click)="deleteProject(project._id.$oid)"
125-
[disabled]="project.state === 'Training'"
125+
[disabled]="showSpinner[i] || project.state === 'Training'"
126126
>
127127
<mat-icon>delete</mat-icon>
128128
</button>
@@ -131,12 +131,12 @@
131131

132132
<ng-container matColumnDef="copy">
133133
<th mat-header-cell *matHeaderCellDef>Copy</th>
134-
<td mat-cell *matCellDef="let project">
134+
<td mat-cell *matCellDef="let project; let i = index;">
135135
<button
136136
class="project-icons"
137137
mat-icon-button
138138
(click)="copyProject(project._id.$oid, project.project_name)"
139-
[disabled]="project.state === 'Training'"
139+
[disabled]="showSpinner[i] || project.state === 'Training'"
140140
>
141141
<mat-icon>file_copy</mat-icon>
142142
</button>
@@ -145,35 +145,35 @@
145145

146146
<ng-container matColumnDef="train">
147147
<th mat-header-cell *matHeaderCellDef>Train</th>
148-
<td mat-cell *matCellDef="let project">
149-
<button mat-icon-button class="project-icons" [disabled]="project.state === 'Training'" (click)="trainProject(project._id.$oid)">
148+
<td mat-cell *matCellDef="let project; let i = index;">
149+
<button mat-icon-button class="project-icons" [disabled]="showSpinner[i] || project.state === 'Training'" (click)="trainProject(project._id.$oid, i)">
150150
<mat-icon>model_training</mat-icon>
151151
</button>
152152
</td>
153153
</ng-container>
154154

155155
<ng-container matColumnDef="try_now">
156156
<th mat-header-cell *matHeaderCellDef>Try Now</th>
157-
<td mat-cell *matCellDef="let project">
158-
<button mat-icon-button class="project-icons" [disabled]="project.state === 'Training'||project.model_name===''" (click)="tryNowProject(project)">
157+
<td mat-cell *matCellDef="let project; let i = index;">
158+
<button mat-icon-button class="project-icons" [disabled]="showSpinner[i] || project.state === 'Training'||project.model_name===''" (click)="tryNowProject(project)">
159159
<mat-icon>play_circle_outline</mat-icon>
160160
</button>
161161
</td>
162162
</ng-container>
163163

164164
<ng-container matColumnDef="properties">
165165
<th mat-header-cell *matHeaderCellDef>Properties</th>
166-
<td mat-cell *matCellDef="let project">
167-
<button mat-icon-button class="project-icons" [disabled]="project.state === 'Training'" (click)="openProjectProperties(project._id.$oid, project.configuration)">
166+
<td mat-cell *matCellDef="let project; let i = index;">
167+
<button mat-icon-button class="project-icons" [disabled]="showSpinner[i] || project.state === 'Training'" (click)="openProjectProperties(project._id.$oid, project.configuration)">
168168
<mat-icon>settings</mat-icon>
169169
</button>
170170
</td>
171171
</ng-container>
172172

173173
<ng-container matColumnDef="export">
174174
<th mat-header-cell *matHeaderCellDef>Export</th>
175-
<td mat-cell *matCellDef="let project">
176-
<button mat-icon-button class="project-icons" [disabled]="project.state === 'Training'" (click)="exportProject(project.project_name)">
175+
<td mat-cell *matCellDef="let project; let i = index;">
176+
<button mat-icon-button class="project-icons" [disabled]="showSpinner[i] || project.state === 'Training'" (click)="exportProject(project.project_name)">
177177
<mat-icon>unarchive</mat-icon>
178178
</button>
179179
</td>

‎ui-trainer/src/app/manage-projects/manage-projects.component.ts‎

Lines changed: 25 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export class ManageProjectsComponent implements OnInit, OnDestroy {
3737
openIntentORStoryORResponseFile: string;
3838
propertyPanel: string;
3939
projects_json: Array<object>;
40+
showSpinner: Array<boolean>;
4041

4142
@Output() selectedProject = new EventEmitter<object>();
4243

@@ -50,6 +51,11 @@ export class ManageProjectsComponent implements OnInit, OnDestroy {
5051
getProjects() {
5152
this.apiService.requestProjects().subscribe(projects => {
5253
this.projects_json = projects;
54+
this.showSpinner = new Array<boolean>();
55+
for (let i = 0; i < this.projects_json.length; i ++) {
56+
this.showSpinner.push(false);
57+
}
58+
console.log(this.showSpinner);
5359
this.projectsDataSource = new MatTableDataSource(this.projects_json);
5460
this.projectsDataSource.paginator = this.paginator;
5561
},
@@ -133,53 +139,56 @@ export class ManageProjectsComponent implements OnInit, OnDestroy {
133139
});
134140
}
135141

136-
trainProject(projectObjectId: string) {
142+
trainProject(projectObjectId: string, index: number) {
143+
console.log(index);
144+
this.showSpinner[index] = true;
137145
this.apiService.requestModelTraining(projectObjectId).subscribe(response => {
138146
if (response['status'] === 'Success' && response['message'] === 'PENDING') {
139147
this.notificationsService.showToast({status: 'Info', message: 'Model Is Getting Trained.'});
140-
this.checkModelTrainStatus(projectObjectId, response['task_id']);
148+
this.checkModelTrainStatus(projectObjectId, response['task_id'], index);
141149
} else if (response['status'] === 'Error') {
142150
const dialogRef = this.dialog.open(ShowTrainErrorComponent, {
143151
width: '700px',
144152
data: {errorMessage: response['message']}
145153
});
146-
dialogRef.afterClosed().subscribe(response => {});
154+
dialogRef.afterClosed().subscribe(() => {});
147155
}
148156
},
149157
err => console.error('Observer got an error: ' + err),
150158
() => console.log('Observer got a complete notification'));
151159
}
152160

153-
checkModelTrainStatus(projectObjectId: string, taskId: string) {
161+
checkModelTrainStatus(projectObjectId: string, taskId: string, index: number) {
154162
this.apiService.forceModelTrainingCacheReload('reset');
155163
this.apiService.checkModelTrainStatus(taskId).subscribe(response => {
156164
if (response['Status'] === 'SUCCESS') {
157-
this.getModelTrainResult(projectObjectId, taskId);
165+
this.getModelTrainResult(projectObjectId, taskId, index);
158166
}
159167
},
160168
err => console.error('Observer got an error: ' + err),
161169
() => console.log('Observer got a complete notification'));
162170
}
163171

164-
getModelTrainResult(projectObjectId: string, taskId: string) {
172+
getModelTrainResult(projectObjectId: string, taskId: string, index: number) {
165173
this.apiService.getModelTrainingResult(taskId).subscribe(response => {
166174
if (response['Status'] === 'Success') {
167175
sessionStorage.setItem(projectObjectId, response['Message']);
168176
this.notificationsService.showToast({status: response['Status'], message: 'Model Training Complete.'});
177+
this.showSpinner[index] = false;
169178
} else if (response['Status'] === 'Error') {
170179
const dialogRef = this.dialog.open(ShowTrainErrorComponent, {
171180
width: '700px',
172181
data: {errorMessage: response['Message']}
173182
});
174-
dialogRef.afterClosed().subscribe(response => {});
183+
dialogRef.afterClosed().subscribe(() => {});
175184
}
176-
this.finishTraining();
185+
this.finishTraining(index);
177186
},
178187
err => console.error('Observer got an error: ' + err),
179188
() => console.log('Observer got a complete notification'));
180189
}
181190

182-
finishTraining() {
191+
finishTraining(index: number) {
183192
this.apiService.forceModelTrainingCacheReload('finish');
184193
}
185194

@@ -214,13 +223,13 @@ export class ManageProjectsComponent implements OnInit, OnDestroy {
214223

215224
importProject(file: File) {
216225
const fileReader = new FileReader();
217-
fileReader.readAsText(file, "UTF-8");
226+
fileReader.readAsText(file, 'UTF-8');
218227
fileReader.onload = () => {
219228
this.apiService.importProject(JSON.parse(fileReader.result.toString())).subscribe(result => {
220229
if (result) {
221-
this.notificationsService.showToast(result);
230+
this.notificationsService.showToast(result);
222231
this.forceReload();
223-
}
232+
}
224233
},
225234
err => console.error('Observer got an error: ' + err),
226235
() => console.log('Observer got a complete notification'));
@@ -232,10 +241,10 @@ export class ManageProjectsComponent implements OnInit, OnDestroy {
232241

233242
exportProject(projectName: any) {
234243
this.apiService.exportProject(projectName).subscribe(result => {
235-
var sJson = JSON.stringify(result);
236-
var element = document.createElement('a');
237-
element.setAttribute('href', "data:text/json;charset=UTF-8," + encodeURIComponent(sJson));
238-
element.setAttribute('download', projectName + ".json");
244+
let sJson = JSON.stringify(result);
245+
let element = document.createElement('a');
246+
element.setAttribute('href', 'data:text/json;charset=UTF-8,' + encodeURIComponent(sJson));
247+
element.setAttribute('download', projectName + '.json');
239248
element.style.display = 'none';
240249
document.body.appendChild(element);
241250
element.click(); // simulate click

0 commit comments

Comments
 (0)