fix(console): refactoring (#197)

* return error from changes

* project member context, org-policies, state

* project type seperation

* chore(deps): bump grpc from 1.24.2 to 1.24.3 in /console (#183)

Bumps [grpc](https://github.com/grpc/grpc-node) from 1.24.2 to 1.24.3.
- [Release notes](https://github.com/grpc/grpc-node/releases)
- [Commits](https://github.com/grpc/grpc-node/compare/grpc@1.24.2...grpc@1.24.3)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps): bump google-proto-files from 1.1.2 to 2.1.0 in /console (#176)

Bumps [google-proto-files](https://github.com/googleapis/nodejs-proto-files) from 1.1.2 to 2.1.0.
- [Release notes](https://github.com/googleapis/nodejs-proto-files/releases)
- [Changelog](https://github.com/googleapis/nodejs-proto-files/blob/master/CHANGELOG.md)
- [Commits](googleapis/nodejs-proto-files@v1.1.2...v2.1.0)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* chore(deps-dev): bump karma-coverage-istanbul-reporter in /console (#169)

Bumps [karma-coverage-istanbul-reporter](https://github.com/mattlewis92/karma-coverage-istanbul-reporter) from 3.0.2 to 3.0.3.
- [Release notes](https://github.com/mattlewis92/karma-coverage-istanbul-reporter/releases)
- [Changelog](https://github.com/mattlewis92/karma-coverage-istanbul-reporter/blob/master/CHANGELOG.md)
- [Commits](mattlewis92/karma-coverage-istanbul-reporter@v3.0.2...v3.0.3)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* update packages

* update deps

* lint

* replace assets

* add key, creationdate for roles

* project grant members

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

console/package.json

@@ -14,53 +14,53 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.1.0",
-    "@angular/cdk": "~9.0.1",
-    "@angular/common": "~9.1.0",
-    "@angular/compiler": "~9.1.0",
-    "@angular/core": "~9.1.0",
-    "@angular/forms": "~9.1.0",
-    "@angular/material": "^9.0.1",
-    "@angular/platform-browser": "~9.1.0",
-    "@angular/platform-browser-dynamic": "~9.1.0",
-    "@angular/router": "~9.1.0",
-    "@angular/service-worker": "~9.1.0",
+    "@angular/animations": "~9.1.10",
+    "@angular/cdk": "~9.2.4",
+    "@angular/common": "~9.1.10",
+    "@angular/compiler": "~9.1.10",
+    "@angular/core": "~9.1.10",
+    "@angular/forms": "~9.1.10",
+    "@angular/material": "^9.2.4",
+    "@angular/platform-browser": "~9.1.10",
+    "@angular/platform-browser-dynamic": "~9.1.10",
+    "@angular/router": "~9.1.10",
+    "@angular/service-worker": "~9.1.10",
     "@ngx-translate/core": "^12.1.2",
     "@ngx-translate/http-loader": "^4.0.0",
     "@types/google-protobuf": "^3.7.2",
     "@types/uuid": "^8.0.0",
-    "angular-oauth2-oidc": "^8.0.4",
-    "angularx-qrcode": "^2.1.0",
+    "angular-oauth2-oidc": "^9.2.2",
+    "angularx-qrcode": "^2.3.4",
     "cors": "^2.8.5",
-    "google-proto-files": "^1.1.1",
-    "google-protobuf": "^3.12.0",
-    "grpc": "^1.24.2",
+    "google-proto-files": "^2.1.0",
+    "google-protobuf": "^3.12.2",
+    "grpc": "^1.24.3",
     "grpc-web": "^1.1.0",
     "hammerjs": "^2.0.8",
-    "moment": "^2.24.0",
+    "moment": "^2.26.0",
     "ngx-moment": "^3.5.0",
     "prettier-stylelint": "^0.4.2",
     "rxjs": "~6.5.5",
     "ts-protoc-gen": "^0.12.0",
-    "tslib": "^1.13.0",
-    "uuid": "^7.0.1",
+    "tslib": "^2.0.0",
+    "uuid": "^8.1.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
     "@angular-devkit/build-angular": "~0.901.7",
-    "@angular/cli": "~9.1.0",
-    "@angular/compiler-cli": "~9.1.0",
-    "@angular/language-service": "~9.1.9",
+    "@angular/cli": "~9.1.7",
+    "@angular/compiler-cli": "~9.1.10",
+    "@angular/language-service": "~9.1.10",
     "@types/jasmine": "~3.5.10",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^14.0.11",
-    "codelyzer": "^5.1.2",
+    "@types/node": "^14.0.13",
+    "codelyzer": "^5.2.2",
     "jasmine-core": "~3.5.0",
-    "karma": "^5.0.9",
     "jasmine-spec-reporter": "~5.0.2",
+    "karma": "^5.0.9",
     "karma-chrome-launcher": "~3.1.0",
-    "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~3.1.1",
+    "karma-coverage-istanbul-reporter": "~3.0.3",
+    "karma-jasmine": "^3.3.1",
     "karma-jasmine-html-reporter": "^1.5.4",
     "prettier": "^2.0.5",
     "protractor": "^7.0.0",

console/src/app/app.component.html

@@ -39,10 +39,11 @@
     <div (clickOutside)="closeAccountCard()" class="icon-container">
         <div class="avatar-wrapper dontcloseonclick" (click)="showAccount = !showAccount">
             <div class="avatar-circle dontcloseonclick" [ngClass]="{'active': showAccount}">
-                <img class="avatar dontcloseonclick" *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
-                    src="../assets/images/account-circle-outline.png" />
+                <i *ngIf="componentCssClass == 'dark-theme'; else lighttheme"
+                    class="avatar dontcloseonclick las la-user-circle"></i>
+
                 <ng-template #lighttheme>
-                    <img class="avatar dontcloseonclick" src="../assets/images/account-circle-outline-dark.png" />
+                    <i class="avatar las la-user-circle"></i>
                 </ng-template>
             </div>
         </div>
@@ -58,31 +59,31 @@
             <div class="list">
                 <a *ngIf="authService.authenticationChanged | async" class="nav-item" [routerLinkActive]="['active']"
                     [routerLinkActiveOptions]="{ exact: true }" [routerLink]="['/user/me']">
-                    <mat-icon class="icon" svgIcon="mdi_account_circle_outline"></mat-icon>
+                    <i class="icon las la-user-circle"></i>
                     <span class="label">{{ 'MENU.PERSONAL_INFO' | translate }}</span>
                 </a>
 
                 <a *ngIf="showOrgSection && org?.id" class="nav-item" [routerLinkActive]="['active']"
                     [routerLink]="[ '/orgs', org.id]">
-                    <mat-icon class="icon">business</mat-icon>
+                    <i class="icon las la-archway"></i>
                     <span class="label">{{org?.name ? org.name : 'MENU.ORGANIZATION' | translate}}</span>
                 </a>
 
                 <a *ngIf="showProjectSection" class="nav-item" [routerLinkActive]="['active']"
                     [routerLink]="[ '/projects']">
-                    <mat-icon class="icon">folder_open</mat-icon>
+                    <i class="icon las la-layer-group"></i>
                     <span class="label">{{ 'MENU.PROJECT' | translate }}</span>
                 </a>
 
                 <a *ngIf="showUserSection" class="nav-item" [routerLinkActive]="['active']" [routerLink]="[ '/users']"
                     [routerLinkActiveOptions]="{ exact: true }">
-                    <mat-icon class="icon">people_outline</mat-icon>
+                    <i class="icon las la-users"></i>
                     <span class="label">{{ 'MENU.USER' | translate }}</span>
                 </a>
 
                 <span class="fill-space"></span>
                 <a class="nav-item" (click)="authService.signout()">
-                    <mat-icon class="icon" svgIcon="mdi_logout"></mat-icon>
+                    <i class="icon las la-sign-out-alt"></i>
                     <span class="label">{{ 'MENU.LOGOUT' | translate }}</span>
                 </a>
 

console/src/app/app.component.scss

@@ -54,33 +54,28 @@
 		.avatar-wrapper {
 			display: flex;
             align-items: center;
-            color: white;
 
             .avatar-circle {
-                height: 35px;
-                width: 35px;
+                height: 30px;
+                width: 30px;
+                font-size: 30px;
                 background-color: transparent;
                 border-radius: 50%;
                 animation: background-color .2s ease-in;
                 display: flex;
                 flex-direction: column;
                 align-items: center;
+                margin-left: .5rem;
 
                 .avatar {
                     display: block;
                     margin: auto auto;
                     height: 30px;
                     width: 30px;
-                    line-height: 35px;
+                    line-height: 30px;
                     font-size: 30px;
                     border-radius: 50%;
                     text-align: center;
-                    fill: white;
-
-                    * {
-                        fill: white;
-                        color: white;
-                    }
                 }
 
                 &:hover, &.active {

console/src/app/app.component.ts

@@ -170,11 +170,6 @@ export class AppComponent implements OnDestroy {
             this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/account-cancel-outline.svg'),
         );
 
-        this.matIconRegistry.addSvgIcon(
-            'mdi_logout',
-            this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/logout.svg'),
-        );
-
         this.matIconRegistry.addSvgIcon(
             'mdi_light_on',
             this.domSanitizer.bypassSecurityTrustResourceUrl('assets/mdi/lightbulb-on-outline.svg'),

console/src/app/modules/card/card.component.scss

@@ -19,7 +19,7 @@
                 margin: 0;
                 font-weight: 400;
                 font-family: 'Rubik';
-                font-size: 1.2rem;
+                font-size: 18px;
                 // margin-top: .3rem;
             }
 

console/src/app/modules/changes/changes.component.html

@@ -10,4 +10,5 @@
     <div class="sp-wrapper">
         <mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>
     </div>
+    <span class="err-container" *ngIf="errorMessage">{{errorMessage}}</span>
 </div>

console/src/app/modules/changes/changes.component.scss

@@ -2,7 +2,6 @@
     display: block;
     margin-bottom: 1rem;
     font-weight: 400;
-    color: #81868a;
     margin-top: 1rem;
 }
 
@@ -37,4 +36,9 @@
         display: flex;
         justify-content: center;
     }
+
+    .err-container {
+        font-size: 14px;
+        color: rgb(201,51,71);
+    }
 }

console/src/app/modules/changes/changes.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
-import { BehaviorSubject, from, Observable } from 'rxjs';
-import { scan, take, tap } from 'rxjs/operators';
+import { BehaviorSubject, from, Observable, of } from 'rxjs';
+import { catchError, scan, take, tap } from 'rxjs/operators';
 import { Change, Changes } from 'src/app/proto/generated/management_pb';
 import { MgmtUserService } from 'src/app/services/mgmt-user.service';
 
@@ -19,6 +19,7 @@ export enum ChangeType {
 export class ChangesComponent implements OnInit {
     @Input() public changeType: ChangeType = ChangeType.USER;
     @Input() public id: string = '';
+    public errorMessage: string = '';
 
     // Source data
     private _done: BehaviorSubject<any> = new BehaviorSubject(false);
@@ -50,7 +51,6 @@ export class ChangesComponent implements OnInit {
                 break;
             case ChangeType.ORG: first = this.mgmtUserService.OrgChanges(this.id, 10, 0);
                 break;
-
         }
 
         this.mapAndUpdate(first);
@@ -100,6 +100,7 @@ export class ChangesComponent implements OnInit {
         // Map snapshot with doc ref (needed for cursor)
         return from(col).pipe(
             tap((res: Changes) => {
+                console.log('more cahnge');
                 let values = res.toObject().changesList;
                 // If prepending, reverse the batch order
                 values = false ? values.reverse() : values;
@@ -114,7 +115,14 @@ export class ChangesComponent implements OnInit {
                     this._done.next(true);
                 }
             }),
-            take(1)).subscribe();
+            catchError(err => {
+                console.error(err);
+                this._loading.next(false);
+                this.errorMessage = err.message;
+                return of([]);
+            }),
+            take(1),
+        ).subscribe();
     }
 
     public dateFromTimestamp(date: Timestamp.AsObject): any {

console/src/app/modules/project-roles/project-roles-datasource.ts

@@ -31,6 +31,7 @@ export class ProjectRolesDataSource extends DataSource<ProjectRole.AsObject> {
             catchError(() => of([])),
             finalize(() => this.loadingSubject.next(false)),
         ).subscribe(roles => {
+            console.log(roles);
             this.rolesSubject.next(roles);
         });
     }

console/src/app/modules/project-roles/project-roles.component.html

@@ -44,9 +44,9 @@
             </td>
         </ng-container>
 
-        <ng-container matColumnDef="name">
-            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.NAME' | translate }} </th>
-            <td mat-cell *matCellDef="let role"> {{role.name}} </td>
+        <ng-container matColumnDef="key">
+            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.KEY' | translate }} </th>
+            <td mat-cell *matCellDef="let role"> {{role.key}} </td>
         </ng-container>
 
         <ng-container matColumnDef="displayname">
@@ -63,6 +63,15 @@
             </td>
         </ng-container>
 
+        <ng-container matColumnDef="creationDate">
+            <th mat-header-cell *matHeaderCellDef> {{ 'PROJECT.ROLE.CREATIONDATE' | translate }} </th>
+            <td mat-cell *matCellDef="let role">
+                <span>{{dateFromTimestamp(role.creationDate) | date: 'dd. MMM, HH:mm' }}</span>
+            </td>
+        </ng-container>
+
+
+
         <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
     </table>

console/src/app/modules/project-roles/project-roles.component.ts

@@ -2,6 +2,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { AfterViewInit, Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatTable } from '@angular/material/table';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
 import { tap } from 'rxjs/operators';
 import { ProjectRole } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
@@ -26,7 +27,7 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
     @Output() public changedSelection: EventEmitter<Array<ProjectRole.AsObject>> = new EventEmitter();
 
     /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */
-    public displayedColumns: string[] = ['select', 'name', 'displayname', 'group'];
+    public displayedColumns: string[] = ['select', 'key', 'displayname', 'group', 'creationDate'];
 
     constructor(private projectService: ProjectService, private toast: ToastService) { }
 
@@ -107,4 +108,9 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit {
                 this.toast.showError(data.message);
             });
     }
+
+    public dateFromTimestamp(date: Timestamp.AsObject): any {
+        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000);
+        return ts;
+    }
 }

console/src/app/modules/search-project-autocomplete/search-project-autocomplete.component.ts

@@ -12,7 +12,6 @@ import {
     SearchMethod,
 } from 'src/app/proto/generated/management_pb';
 import { ProjectService } from 'src/app/services/project.service';
-import { ToastService } from 'src/app/services/toast.service';
 
 @Component({
     selector: 'app-search-project-autocomplete',
@@ -33,7 +32,7 @@ export class SearchProjectAutocompleteComponent {
     @ViewChild('auto') public matAutocomplete!: MatAutocomplete;
     @Input() public singleOutput: boolean = false;
     @Output() public selectionChanged: EventEmitter<Project.AsObject[] | Project.AsObject> = new EventEmitter();
-    constructor(private projectService: ProjectService, private toast: ToastService) {
+    constructor(private projectService: ProjectService) {
         this.myControl.valueChanges
             .pipe(
                 debounceTime(200),

console/src/app/pages/apps/app-create/app-create.component.ts

@@ -107,6 +107,7 @@ export class AppCreateComponent implements OnInit, OnDestroy {
                 this.showSavedDialog(data.toObject());
             })
             .catch(data => {
+                console.error(data);
                 this.toast.showError(data.message);
             });
     }

console/src/app/pages/apps/app-detail/app-detail.component.html

@@ -8,16 +8,18 @@ <h1>{{ 'APP.PAGES.TITLE' | translate }} {{app?.name}}</h1>
         <p class="desc">{{ 'APP.PAGES.DESCRIPTION' | translate }}</p>
     </div>
 
+    <span *ngIf="errorMessage" class="err-container">{{errorMessage}}</span>
+
     <app-card title="{{ 'APP.PAGES.DETAIL.TITLE' | translate }}" *ngIf="app">
         <form [formGroup]="appNameForm" (ngSubmit)="saveOIDCApp()">
             <div class="content">
                 <mat-button-toggle-group formControlName="state" class="toggle" (change)="changeState($event)">
                     <mat-button-toggle [value]="AppState.APPSTATE_INACTIVE" matTooltip="Deactivate Org">
-                        <mat-icon svgIcon="mdi_light_off"></mat-icon>
+                        <i class="las la-toggle-off"></i>
                         {{'APP.PAGES.DETAIL.STATE.'+AppState.APPSTATE_INACTIVE | translate}}
                     </mat-button-toggle>
                     <mat-button-toggle [value]="AppState.APPSTATE_ACTIVE" matTooltip="Activate Org">
-                        <mat-icon svgIcon="mdi_light_on"></mat-icon>
+                        <i class="las la-toggle-on"></i>
                         {{'APP.PAGES.DETAIL.STATE.'+AppState.APPSTATE_ACTIVE | translate}}
                     </mat-button-toggle>
                 </mat-button-toggle-group>