Merge pull request #197 from Vafilor/feat/onepanelio.core.373-permissions

feat: added error page and centralized permissions logic into a service.

Author: rushtehrani

src/app/app-routing.module.ts

@@ -21,6 +21,7 @@ import { ServiceListComponent } from './services/service-list/service-list.compo
 import { ServiceViewComponent } from './services/service-view/service-view.component';
 import { DashboardComponent } from './dashboard/dashboard.component';
 import { WorkflowComponent } from './workflow/workflow.component';
+import { ErrorComponent } from './error/error.component';
 
 const routes: Routes = [
   {
@@ -115,6 +116,10 @@ const routes: Routes = [
     component: ServiceViewComponent,
     canActivate: [AuthGuard],
   },
+  {
+    path: ':namespace/error/:code',
+    component: ErrorComponent,
+  },
   {
     path: '**',
     component: NamespaceSelectComponent,

src/app/app.module.ts

@@ -129,6 +129,7 @@ import { WorkspaceListComponent } from './workspace/workspace-list/workspace-lis
 import { WorkspacesComponent } from './workspace/workspaces/workspaces.component';
 import { WorkStatusComponent } from './ui-tools/work-status/work-status.component';
 import { ListFilterComponent } from './list-filter/list-filter.component';
+import { ErrorComponent } from './error/error.component';
 
 @NgModule({
     declarations: [
@@ -227,7 +228,8 @@ import { ListFilterComponent } from './list-filter/list-filter.component';
         WorkspaceListComponent,
         WorkspacesComponent,
         WorkStatusComponent,
-        ListFilterComponent
+        ListFilterComponent,
+        ErrorComponent,
     ],
     entryComponents: [
         WorkflowExecuteDialogComponent,

src/app/error/error.component.html

@@ -0,0 +1,4 @@
+<div class="error d-flex justify-content-center align-items-center font-roboto">
+    {{errorMessage}}
+</div>
+

src/app/error/error.component.scss

@@ -0,0 +1,7 @@
+@import '../../styles/colors';
+
+.error {
+  height: calc(100vh - 50px); // 50 for header bar
+  font-size: 42px;
+  color: $danger;
+}

src/app/error/error.component.spec.ts

@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ErrorComponent } from './error.component';
+
+describe('ErrorComponent', () => {
+  let component: ErrorComponent;
+  let fixture: ComponentFixture<ErrorComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ErrorComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ErrorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/error/error.component.ts

@@ -0,0 +1,31 @@
+import { Component, OnInit } from '@angular/core';
+import { ActivatedRoute } from '@angular/router';
+
+@Component({
+  selector: 'app-error',
+  templateUrl: './error.component.html',
+  styleUrls: ['./error.component.scss']
+})
+export class ErrorComponent implements OnInit {
+  errorCode = '';
+  errorMessage = '';
+
+  constructor(private activatedRoute: ActivatedRoute) { }
+
+  ngOnInit() {
+    this.activatedRoute.paramMap.subscribe(next => {
+      this.errorCode = next.get('code');
+      console.log(this.errorCode);
+
+      switch (this.errorCode) {
+        case '403':
+          this.errorMessage = 'You do not have permission to view this page';
+          break;
+        default:
+          this.errorMessage = 'Unknown error';
+      }
+
+    });
+  }
+
+}

src/app/permissions/permission.service.ts

@@ -0,0 +1,97 @@
+import { Injectable } from '@angular/core';
+import { AuthServiceService } from '../../api';
+import { combineLatest } from 'rxjs';
+import { map } from 'rxjs/operators';
+import { Permissions } from '../auth/models';
+
+export type PermissionVerb = 'create' | 'get' | 'watch' | 'list' | 'delete' | 'update';
+
+@Injectable({
+    providedIn: 'root'
+})
+export class PermissionService {
+    constructor(private authServiceService: AuthServiceService) {}
+
+    /**
+     * Combines requests into one call and maps the result into a Permissions object.
+     * requests and verbs are expected to be in the same order.
+     * That is, the request for verb i is as index i.
+     */
+    private getPermissionsRequest(requests: any[], verbs: PermissionVerb[]) {
+        if (verbs.length === 0) {
+           throw new Error('No verbs');
+        }
+
+        return combineLatest(requests).pipe(
+            map(items => {
+                    if (!items) {
+                        return new Permissions();
+                    }
+
+                    const result = new Permissions();
+
+                    for (let i = 0; i < items.length; i++) {
+                        const resItem: any = items[i];
+                        const verb = verbs[i];
+                        result[verb] = resItem.authorized;
+                    }
+
+                    return result;
+                }
+            ));
+    }
+
+    getWorkflowPermissions(namespace: string, resourceName: string, ...verbs: PermissionVerb[]) {
+        const requests = [];
+
+        for (const verb of verbs) {
+            requests.push(
+                this.authServiceService.isAuthorized({
+                    namespace: name,
+                    verb,
+                    resource: 'workflows',
+                    resourceName,
+                    group: 'argoproj.io',
+                })
+            );
+        }
+
+        return this.getPermissionsRequest(requests, verbs);
+    }
+
+    getWorkspaceTemplatePermissions(namespace: string, resourceName: string, ...verbs: PermissionVerb[]) {
+        const requests = [];
+
+        for (const verb of verbs) {
+            requests.push(
+                this.authServiceService.isAuthorized({
+                    namespace: name,
+                    verb,
+                    resource: 'workflowtemplates',
+                    resourceName,
+                    group: 'argoproj.io',
+                })
+            );
+        }
+
+        return this.getPermissionsRequest(requests, verbs);
+    }
+
+    getWorkspacePermissions(namespace: string, resourceName: string, ...verbs: PermissionVerb[]) {
+        const requests = [];
+
+        for (const verb of verbs) {
+            requests.push(
+                this.authServiceService.isAuthorized({
+                    namespace: name,
+                    verb,
+                    resource: 'workspaces',
+                    resourceName,
+                    group: 'onepanel.io',
+                })
+            );
+        }
+
+        return this.getPermissionsRequest(requests, verbs);
+    }
+}

src/app/permissions/permissions.service.spec.ts

@@ -0,0 +1,12 @@
+import { TestBed } from '@angular/core/testing';
+
+import { PermissionService } from './permission.service';
+
+describe('PermissionsService', () => {
+  beforeEach(() => TestBed.configureTestingModule({}));
+
+  it('should be created', () => {
+    const service: PermissionService = TestBed.get(PermissionService);
+    expect(service).toBeTruthy();
+  });
+});

src/app/router/app-router.service.ts

@@ -188,4 +188,8 @@ export class AppRouter {
   public navigateToWorkflowsExecutions(namespace: string) {
     return this.router.navigate(['/', namespace, 'workflows']);
   }
+
+  public navigateToError(namespace: string, code: string) {
+    return this.router.navigate(['/', namespace, 'error', code]);
+  }
 }

src/app/workflow/workflow-executions-list/workflow-executions-list.component.html

@@ -114,7 +114,7 @@
                 <i class="far fa-play-circle mr-1 workflow-menu-icon"></i>
                 Rerun
             </button>
-            <button *ngIf="workflowExecutionPermissions.get(workflow.uid).delete" mat-menu-item (click)="onDelete(workflow)" [disabled]="!(workflow | workflowIsActive)">
+            <button *ngIf="workflowExecutionPermissions.get(workflow.uid).update" mat-menu-item (click)="onDelete(workflow)" [disabled]="!(workflow | workflowIsActive)">
                 <i class="fas fa-trash mr-1 workflow-menu-icon"></i>
                 Terminate
             </button>