feat: ui integration (#10)

Co-authored-by: Aleksei Moiseev <aliaksei_maiseyeu@epam.com>
data-platform-hq · Apr 10, 2024 · f40f10d · f40f10d
1 parent f1f2e71
commit f40f10d
Show file tree

Hide file tree

Showing 8 changed files with 235 additions and 79 deletions.
diff --git a/...mponents/details/experiment-permission-details/experiment-permission-details.component.ts b/...mponents/details/experiment-permission-details/experiment-permission-details.component.ts
@@ -2,21 +2,19 @@ import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 
+import { GrantUserPermissionsComponent, GrantUserPermissionsModel } from 'src/app/shared/components';
 import {
-  EditPermissionsModalComponent,
-  GrantUserPermissionsComponent,
-  GrantUserPermissionsModel,
-} from 'src/app/shared/components';
-import { ExperimentsDataService, PermissionDataService, UserDataService } from 'src/app/shared/services';
+  ExperimentsDataService,
+  PermissionDataService,
+  SnackBarService,
+  UserDataService,
+} from 'src/app/shared/services';
 import { TableActionEvent, TableActionModel } from 'src/app/shared/components/table/table.interface';
-import { filter, switchMap } from 'rxjs';
+import { filter, switchMap, tap } from 'rxjs';
 import { TableActionEnum } from 'src/app/shared/components/table/table.config';
-import { EntityEnum } from 'src/app/core/configs/core';
 import { COLUMN_CONFIG, TABLE_ACTIONS } from './experiment-permission-details.config';
-import {
-  PermissionsDialogData,
-} from 'src/app/shared/components/modals/edit-permissions-modal/edit-permissions-modal.interface';
 import { PermissionEnum } from 'src/app/core/configs/permissions';
+import { PermissionModalService } from '../../../../../shared/services/permission-modal.service';
 
 @Component({
   selector: 'ml-experiment-permission-details',
@@ -35,6 +33,8 @@ export class ExperimentPermissionDetailsComponent implements OnInit {
     private readonly permissionDataService: PermissionDataService,
     private readonly userDataService: UserDataService,
     private readonly route: ActivatedRoute,
+    private readonly permissionModalService: PermissionModalService,
+    private readonly snackBarService: SnackBarService,
   ) { }
 
   ngOnInit(): void {
@@ -47,27 +47,15 @@ export class ExperimentPermissionDetailsComponent implements OnInit {
       });
   }
 
-  handleUserEdit(event: { permission: string; username: string }) {
-    const data: PermissionsDialogData = {
-      userName: event.username,
-      entityName: this.experimentId,
-      entityType: EntityEnum.EXPERIMENT,
-      permission: event.permission as PermissionEnum,
-    };
-
-    this.dialog
-      .open<EditPermissionsModalComponent, PermissionsDialogData>(EditPermissionsModalComponent, { data })
-      .afterClosed()
+  handleUserEdit(event: { permission: PermissionEnum; username: string }) {
+    this.permissionModalService.openEditUserPermissionsForExperimentModal(this.experimentId, event.username, event.permission)
       .pipe(
-        switchMap((data) => this.permissionDataService.updateExperimentPermission({
-          user_name: event.username,
-          experiment_id: this.experimentId,
-          new_permission: data.permission,
-        }))
+        tap(() => this.snackBarService.openSnackBar('Permissions updated successfully')),
+        switchMap(() => this.experimentDataService.getUsersForExperiment(this.experimentId)),
       )
-      .subscribe((data) => {
-        console.log(data)
-      })
+      .subscribe((users) => {
+        this.userDataSource = users;
+      });
   }
 
   handleActions($event: TableActionEvent<{ permission: string; username: string }>) {
@@ -85,7 +73,11 @@ export class ExperimentPermissionDetailsComponent implements OnInit {
   revokePermissionForUser(item: any) {
     this.permissionDataService.deleteExperimentPermission(
       { experiment_id: this.experimentId, user_name: item.username })
-      .subscribe(console.log);
+      .pipe(
+        tap(() => this.snackBarService.openSnackBar('Permission revoked successfully')),
+        switchMap(() => this.loadUsersForExperiment(this.experimentId)),
+      )
+      .subscribe((users) => this.userDataSource = users);
   }
 
   addUser() {
@@ -102,9 +94,7 @@ export class ExperimentPermissionDetailsComponent implements OnInit {
         })),
         switchMap(() => this.loadUsersForExperiment(this.experimentId)),
       )
-      .subscribe((users) => {
-        this.userDataSource = users;
-      });
+      .subscribe((users) => this.userDataSource = users);
   }
 
   loadUsersForExperiment(experimentId: string) {

diff --git a/...-page/components/details/model-permission-details/model-permission-details.component.html b/...-page/components/details/model-permission-details/model-permission-details.component.html
@@ -1,6 +1,6 @@
 <div class="my-3">
   <div class="header-section">
-    <h3>Experiment Access</h3>
+    <h3>Model Access</h3>
     <button mat-button (click)="addUser()">
       <mat-icon>add</mat-icon>
       <span>Add</span>

diff --git a/...in-page/components/details/model-permission-details/model-permission-details.component.ts b/...in-page/components/details/model-permission-details/model-permission-details.component.ts
@@ -2,20 +2,13 @@ import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { filter, switchMap, tap } from 'rxjs';
 
-import {
-  EditPermissionsModalComponent,
-  GrantUserPermissionsComponent,
-  GrantUserPermissionsModel,
-} from 'src/app//shared/components';
+import { GrantUserPermissionsComponent, GrantUserPermissionsModel } from 'src/app//shared/components';
 import { MatDialog } from '@angular/material/dialog';
 import { TableActionEvent, TableActionModel } from 'src/app/shared/components/table/table.interface';
 import { ModelsDataService, PermissionDataService, SnackBarService, UserDataService } from 'src/app//shared/services';
 import { COLUMN_CONFIG, TABLE_ACTIONS } from './model-permission-details.config';
 import { TableActionEnum } from 'src/app/shared/components/table/table.config';
-import {
-  PermissionsDialogData,
-} from 'src/app/shared/components/modals/edit-permissions-modal/edit-permissions-modal.interface';
-import { EntityEnum } from 'src/app/core/configs/core';
+import { PermissionModalService } from '../../../../../shared/services/permission-modal.service';
 
 
 @Component({
@@ -37,6 +30,7 @@ export class ModelPermissionDetailsComponent implements OnInit {
     private readonly permissionDataService: PermissionDataService,
     private readonly userDataService: UserDataService,
     private readonly snackService: SnackBarService,
+    private readonly permissionModalService: PermissionModalService
   ) {
   }
 
@@ -49,30 +43,17 @@ export class ModelPermissionDetailsComponent implements OnInit {
   }
 
   revokePermissionForUser(item: any) {
-    this.permissionDataService.deleteModelPermission(
-      { model_name: this.modelId, user_name: item.username }
-    )
-      .subscribe(console.log);
+    this.permissionDataService.deleteModelPermission({ model_name: this.modelId, user_name: item.username })
+      .pipe(
+        tap(() => this.snackService.openSnackBar('Permission revoked successfully')),
+        switchMap(() => this.loadUsersForModel(this.modelId)),
+      )
+      .subscribe((users) => this.userDataSource = users);
   }
 
   editPermissionForUser({ username, permission }: any) {
-    const data: PermissionsDialogData = {
-      userName: username,
-      entityName: this.modelId,
-      entityType: EntityEnum.MODEL,
-      permission,
-    };
-
-    this.dialog
-      .open<EditPermissionsModalComponent, PermissionsDialogData>(EditPermissionsModalComponent, { data })
-      .afterClosed()
+    this.permissionModalService.openEditUserPermissionsForModelModal(this.modelId, username, permission)
       .pipe(
-        filter(Boolean),
-        switchMap(({ permission }) => this.permissionDataService.updateModelPermission({
-          model_name: this.modelId,
-          new_permission: permission,
-          user_name: username,
-        })),
         tap(() => this.snackService.openSnackBar('Permission updated')),
         switchMap(() => this.loadUsersForModel(this.modelId)),
       )

diff --git a/...in-page/components/details/user-permission-details/user-permission-details.component.html b/...in-page/components/details/user-permission-details/user-permission-details.component.html
@@ -13,6 +13,8 @@
               [columnConfig]="experimentsColumnConfig"
               [data]="experimentsDataSource"
               *ngIf="experimentsDataSource.length"
+              [actions]="experimentsActions"
+              (action)="handleExperimentActions($event)"
       ></ml-table>
     </div>
   </mat-tab>
@@ -31,6 +33,8 @@
               [columnConfig]="modelsColumnConfig"
               [data]="modelsDataSource"
               *ngIf="modelsDataSource.length"
+              [actions]="modelsActions"
+              (action)="handleModelActions($event)"
       ></ml-table>
     </div>
   </mat-tab>

diff --git a/...dmin-page/components/details/user-permission-details/user-permission-details.component.ts b/...dmin-page/components/details/user-permission-details/user-permission-details.component.ts
@@ -1,15 +1,28 @@
 import { Component, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { filter, forkJoin, switchMap } from 'rxjs';
+import { filter, forkJoin, switchMap, tap } from 'rxjs';
 import { ActivatedRoute } from '@angular/router';
 
 import { GrantPermissionModalComponent } from 'src/app/shared/components';
-import { ExperimentsDataService, ModelsDataService, PermissionDataService } from 'src/app/shared/services';
-import { EXPERIMENT_COLUMN_CONFIG, MODEL_COLUMN_CONFIG } from './user-permission-details.config';
+import {
+  ExperimentsDataService,
+  ModelsDataService,
+  PermissionDataService,
+  SnackBarService,
+} from 'src/app/shared/services';
+import {
+  EXPERIMENT_ACTIONS,
+  EXPERIMENT_COLUMN_CONFIG,
+  MODEL_ACTIONS,
+  MODEL_COLUMN_CONFIG,
+} from './user-permission-details.config';
 import { EntityEnum } from 'src/app/core/configs/core';
 import {
   GrantPermissionModalData,
 } from 'src/app/shared/components/modals/grant-permissoin-modal/grant-permission-modal.inteface';
+import { TableActionEvent, TableActionModel } from 'src/app/shared/components/table/table.interface';
+import { PermissionModalService } from 'src/app/shared/services/permission-modal.service';
+import { TableActionEnum } from 'src/app/shared/components/table/table.config';
 
 @Component({
   selector: 'ml-user-permission-details',
@@ -23,13 +36,17 @@ export class UserPermissionDetailsComponent implements OnInit {
 
   experimentsDataSource: any[] = [];
   modelsDataSource: any[] = [];
+  experimentsActions: TableActionModel[] = EXPERIMENT_ACTIONS;
+  modelsActions: TableActionModel[] = MODEL_ACTIONS;
 
   constructor(
     private readonly dialog: MatDialog,
     private readonly expDataService: ExperimentsDataService,
     private readonly modelDataService: ModelsDataService,
     private readonly permissionDataService: PermissionDataService,
     private readonly route: ActivatedRoute,
+    private readonly permissionModalService: PermissionModalService,
+    private readonly snackBarService: SnackBarService
   ) {
   }
 
@@ -48,24 +65,18 @@ export class UserPermissionDetailsComponent implements OnInit {
   }
 
   addModelPermissionToUser() {
-    this.modelDataService.getAllModels()
+    this.permissionModalService.openGrantModelPermissionModal(this.userId)
       .pipe(
-        switchMap((models) => this.dialog.open<GrantPermissionModalComponent, GrantPermissionModalData>(GrantPermissionModalComponent, {
-          data: {
-            entityType: EntityEnum.MODEL,
-            entities: models.map(({ name }) => name),
-            userName: this.userId,
-          }
-        }).afterClosed()
-        ),
         filter(Boolean),
-        switchMap(({ entity, permission, user }) => this.permissionDataService.createModelPermission({
+        switchMap(({ entity, permission }) => this.permissionDataService.createModelPermission({
           user_name: this.userId,
           model_name: entity,
           new_permission: permission,
         })),
+        tap(() => this.snackBarService.openSnackBar('Permission granted successfully')),
+        switchMap(() => this.modelDataService.getModelsForUser(this.userId)),
       )
-      .subscribe();
+      .subscribe((models) => this.modelsDataSource = models);
   }
 
   addExperimentPermissionToUser() {
@@ -80,14 +91,77 @@ export class UserPermissionDetailsComponent implements OnInit {
         }).afterClosed()
         ),
         filter(Boolean),
-        switchMap(({ entity, permission, user }) => {
+        switchMap(({ entity, permission }) => {
           return this.permissionDataService.createExperimentPermission({
             user_name: this.userId,
             experiment_name: entity,
             new_permission: permission,
           })
         }),
+        tap(() => this.snackBarService.openSnackBar('Permission granted successfully')),
+        switchMap(() => this.expDataService.getExperimentsForUser(this.userId)),
+      )
+      .subscribe((experiments) => this.experimentsDataSource = experiments);
+  }
+
+  handleExperimentActions(event: TableActionEvent<any>) {
+    const actionMapping: { [key: string]: any } = {
+      [TableActionEnum.EDIT]: this.handleEditUserPermissionForExperiment.bind(this),
+      [TableActionEnum.REVOKE]: this.revokeExperimentPermissionForUser.bind(this),
+    }
+
+    const selectedAction = actionMapping[event.action.action];
+    if (selectedAction) {
+      selectedAction(event.item);
+    }
+  }
+
+  revokeExperimentPermissionForUser(item: {id: string}) {
+    this.permissionDataService.deleteExperimentPermission({experiment_id: item.id, user_name: this.userId})
+      .pipe(
+        tap(() => this.snackBarService.openSnackBar('Permission revoked successfully')),
+        switchMap(() => this.expDataService.getExperimentsForUser(this.userId)),
+      )
+      .subscribe((experiments) => this.experimentsDataSource = experiments);
+
+  }
+
+  revokeModelPermissionForUser({name}: any) {
+    this.permissionDataService.deleteModelPermission({model_name: name, user_name: this.userId})
+      .pipe(
+        tap(() => this.snackBarService.openSnackBar('Permission revoked successfully')),
+        switchMap(() => this.modelDataService.getModelsForUser(this.userId)),
+      )
+      .subscribe((models) => this.modelsDataSource = models);
+  }
+
+  handleModelActions({ action, item }: TableActionEvent<any>) {
+    const actionMapping: { [key: string]: any } = {
+      [TableActionEnum.EDIT]: this.handleEditUserPermissionForModel.bind(this),
+      [TableActionEnum.REVOKE]: this.revokeModelPermissionForUser.bind(this),
+    }
+
+    const selectedAction = actionMapping[action.action];
+    if (selectedAction) {
+      selectedAction(item);
+    }
+  }
+
+  handleEditUserPermissionForModel({ name, permissions }: any) {
+    this.permissionModalService.openEditUserPermissionsForModelModal(name, this.userId, permissions)
+      .pipe(
+        tap(() => this.snackBarService.openSnackBar('Permissions updated successfully')),
+        switchMap(() => this.modelDataService.getModelsForUser(this.userId)),
+      )
+      .subscribe((models) => this.modelsDataSource = models);
+  }
+
+  handleEditUserPermissionForExperiment({ id, permissions }: any) {
+    this.permissionModalService.openEditUserPermissionsForExperimentModal(id, this.userId, permissions)
+      .pipe(
+        tap(() => this.snackBarService.openSnackBar('Permissions updated successfully')),
+        switchMap(() => this.expDataService.getExperimentsForUser(this.userId)),
       )
-      .subscribe();
+      .subscribe((experiments) => this.experimentsDataSource = experiments);
   }
 }
diff --git a/...s/admin-page/components/details/user-permission-details/user-permission-details.config.ts b/...s/admin-page/components/details/user-permission-details/user-permission-details.config.ts
@@ -1,3 +1,5 @@
+import { TABLE_ACTION_CONFIG } from 'src/app/shared/components/table/table.config';
+
 export const MODEL_COLUMN_CONFIG = [
   { title: 'Model name', key: 'name' },
   { title: 'Permissions', key: 'permissions' },
@@ -7,3 +9,13 @@ export const EXPERIMENT_COLUMN_CONFIG = [
   { title: 'Experiment Name', key: 'name' },
   { title: 'Permission', key: 'permissions' },
 ];
+
+export const EXPERIMENT_ACTIONS = [
+  TABLE_ACTION_CONFIG.EDIT,
+  TABLE_ACTION_CONFIG.REVOKE,
+];
+
+export const MODEL_ACTIONS = [
+  TABLE_ACTION_CONFIG.EDIT,
+  TABLE_ACTION_CONFIG.REVOKE,
+];