diff --git a/console/angular.json b/console/angular.json index 3a47200ba2..fdce5a5161 100644 --- a/console/angular.json +++ b/console/angular.json @@ -27,7 +27,6 @@ "src/favicon.ico", "src/assets", "src/manifest.webmanifest", - "src/404.html" ], "styles": [ "src/styles.scss" diff --git a/console/src/404.html b/console/src/404.html deleted file mode 100644 index 48be4daf35..0000000000 --- a/console/src/404.html +++ /dev/null @@ -1,23 +0,0 @@ - - - - - - - caos console - - - - - - - -              -              -              - - - - \ No newline at end of file diff --git a/console/src/app/app.component.html b/console/src/app/app.component.html index 8d939c48b3..552cea5150 100644 --- a/console/src/app/app.component.html +++ b/console/src/app/app.component.html @@ -47,7 +47,6 @@ - diff --git a/console/src/app/app.component.scss b/console/src/app/app.component.scss index eba4bd6d98..2961dce89d 100644 --- a/console/src/app/app.component.scss +++ b/console/src/app/app.component.scss @@ -5,8 +5,8 @@ display: flex; height: 60px; align-items: center; - padding: 0 1rem; - + padding: 0 1rem; + .logo { height: 40px; width: auto; diff --git a/console/src/app/app.component.ts b/console/src/app/app.component.ts index 820ee0f07d..ffd5df62e3 100644 --- a/console/src/app/app.component.ts +++ b/console/src/app/app.component.ts @@ -1,7 +1,8 @@ import { animate, group, query, style, transition, trigger } from '@angular/animations'; import { BreakpointObserver } from '@angular/cdk/layout'; import { OverlayContainer } from '@angular/cdk/overlay'; -import { Component, HostBinding, OnDestroy, ViewChild } from '@angular/core'; +import { ViewportScroller } from '@angular/common'; +import { Component, HostBinding, Inject, OnDestroy, ViewChild } from '@angular/core'; import { MatIconRegistry } from '@angular/material/icon'; import { MatDrawer } from '@angular/material/sidenav'; import { DomSanitizer } from '@angular/platform-browser'; @@ -138,6 +139,8 @@ export class AppComponent implements OnDestroy { private orgSub: Subscription = new Subscription(); constructor( + public viewPortScroller: ViewportScroller, + @Inject('windowObject') public window: Window, public translate: TranslateService, public authService: AuthService, private breakpointObserver: BreakpointObserver, diff --git a/console/src/app/app.module.ts b/console/src/app/app.module.ts index 67f7629a45..53a729a84a 100644 --- a/console/src/app/app.module.ts +++ b/console/src/app/app.module.ts @@ -150,6 +150,7 @@ const authConfig: AuthConfig = { GrpcService, AuthService, AuthUserService, + { provide: 'windowObject', useValue: window }, ], bootstrap: [AppComponent], }) diff --git a/console/src/app/modules/avatar/avatar.component.html b/console/src/app/modules/avatar/avatar.component.html index 1121f8503a..5165194358 100644 --- a/console/src/app/modules/avatar/avatar.component.html +++ b/console/src/app/modules/avatar/avatar.component.html @@ -1,5 +1,5 @@
{{credentials}}
\ No newline at end of file diff --git a/console/src/app/modules/avatar/avatar.component.ts b/console/src/app/modules/avatar/avatar.component.ts index a7cf45019f..49c4479bfc 100644 --- a/console/src/app/modules/avatar/avatar.component.ts +++ b/console/src/app/modules/avatar/avatar.component.ts @@ -30,22 +30,22 @@ export class AvatarComponent implements OnInit { getColor(userName: string): string { const colors = [ - '#e51c23', - '#e91e63', - '#9c27b0', - '#673ab7', - '#3f51b5', - '#5677fc', - '#03a9f4', - '#00bcd4', - '#009688', - '#259b24', - '#8bc34a', - '#afb42b', - '#ff9800', - '#ff5722', - '#795548', - '#607d8b', + '#B44D51', + '#B75073', + '#84498E', + '#705998', + '#5C6598', + '#7F90D3', + '#3E93B9', + '#3494A0', + '#25716A', + '#427E41', + '#89A568', + '#90924D', + '#E2B032', + '#C97358', + '#6D5B54', + '#6B7980', ]; let hash = 0; diff --git a/console/src/app/modules/project-contributors/project-contributors.component.html b/console/src/app/modules/project-contributors/project-contributors.component.html index e4934c6d4d..7bae4c9277 100644 --- a/console/src/app/modules/project-contributors/project-contributors.component.html +++ b/console/src/app/modules/project-contributors/project-contributors.component.html @@ -4,8 +4,8 @@
- -
+
-
-
- - arrow_back - +
+
+ + arrow_back + +
+
+
+

{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}

+

{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}

-
-
-

{{projectName}} {{ 'PROJECT.MEMBER.TITLE' | translate }}

-

{{ 'PROJECT.MEMBER.DESCRIPTION' | translate }}

-
-
-
- - {{'ORG_DETAIL.TABLE.TOTAL' | translate}} - {{dataSource?.membersSubject.value.length}} - - - {{'ORG_DETAIL.TABLE.SELECTION' | translate}} - {{selection?.selected?.length}} - -
- - - - - - - add{{ 'ACTIONS.NEW' | translate }} - - -
+ + + + + + + add{{ 'ACTIONS.NEW' | translate }} + +
-
+
\ No newline at end of file diff --git a/console/src/app/modules/project-members/project-members.component.scss b/console/src/app/modules/project-members/project-members.component.scss index 8225525664..262c440c76 100644 --- a/console/src/app/modules/project-members/project-members.component.scss +++ b/console/src/app/modules/project-members/project-members.component.scss @@ -16,6 +16,7 @@ .right { flex: 1; padding-top: 1rem; + padding-right: 1rem; .head { display: flex; @@ -42,33 +43,12 @@ } } -.table-header-row { - display: flex; - align-items: center; +.icon-button { + margin-right: .5rem; +} - .col { - display: flex; - flex-direction: column; - .desc { - font-size: .8rem; - color: #8795a1; - } - .count { - font-size: 2rem; - } - } - - .fill-space { - flex: 1; - } - - .icon-button { - margin-right: .5rem; - } - - .add-button { - border-radius: .5rem; - } +.add-button { + border-radius: .5rem; } .table-wrapper { diff --git a/console/src/app/modules/project-members/project-members.component.ts b/console/src/app/modules/project-members/project-members.component.ts index ed3df8b80e..057d3c0b60 100644 --- a/console/src/app/modules/project-members/project-members.component.ts +++ b/console/src/app/modules/project-members/project-members.component.ts @@ -170,7 +170,13 @@ export class ProjectMembersComponent { } } - public changePage(event: PageEvent): void { - this.dataSource.loadMembers(this.project.projectId, this.projectType, event.pageIndex, event.pageSize, this.grantId); + public changePage(event?: PageEvent): void { + this.dataSource.loadMembers( + this.project.projectId, + this.projectType, + event?.pageIndex ?? this.paginator.pageIndex, + event?.pageSize ?? this.paginator.pageSize, + this.grantId, + ); } } diff --git a/console/src/app/modules/project-members/project-members.module.ts b/console/src/app/modules/project-members/project-members.module.ts index 157deb33a4..75795d1896 100644 --- a/console/src/app/modules/project-members/project-members.module.ts +++ b/console/src/app/modules/project-members/project-members.module.ts @@ -5,6 +5,7 @@ import { MatAutocompleteModule } from '@angular/material/autocomplete'; import { MatButtonModule } from '@angular/material/button'; import { MatCheckboxModule } from '@angular/material/checkbox'; import { MatChipsModule } from '@angular/material/chips'; +import { MatDialogModule } from '@angular/material/dialog'; import { MatFormFieldModule } from '@angular/material/form-field'; import { MatIconModule } from '@angular/material/icon'; import { MatPaginatorModule } from '@angular/material/paginator'; @@ -17,6 +18,7 @@ import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module'; +import { RefreshTableModule } from '../refresh-table/refresh-table.module'; import { ProjectMembersRoutingModule } from './project-members-routing.module'; import { ProjectMembersComponent } from './project-members.component'; @@ -43,6 +45,8 @@ import { ProjectMembersComponent } from './project-members.component'; FormsModule, TranslateModule, HasRolePipeModule, + RefreshTableModule, + MatDialogModule, ], }) export class ProjectMembersModule { } diff --git a/console/src/app/modules/project-roles/project-roles.component.html b/console/src/app/modules/project-roles/project-roles.component.html index 9a81d15d3e..34907d78bc 100644 --- a/console/src/app/modules/project-roles/project-roles.component.html +++ b/console/src/app/modules/project-roles/project-roles.component.html @@ -1,79 +1,70 @@ -
-
- - {{'ORG_DETAIL.TABLE.TOTAL' | translate}} - {{dataSource?.rolesSubject.value.length}} - - - {{'ORG_DETAIL.TABLE.SELECTION' | translate}} - {{selection?.selected?.length}} - -
- - - - - + add{{ 'ACTIONS.NEW' | translate }} -
-
- \ No newline at end of file + \ No newline at end of file diff --git a/console/src/app/modules/project-roles/project-roles.component.scss b/console/src/app/modules/project-roles/project-roles.component.scss index 8a117e1a3e..59fcdb9065 100644 --- a/console/src/app/modules/project-roles/project-roles.component.scss +++ b/console/src/app/modules/project-roles/project-roles.component.scss @@ -1,31 +1,10 @@ -.table-header-row { - display: flex; - align-items: center; - - .col { - display: flex; - flex-direction: column; - .desc { - font-size: .8rem; - color: #8795a1; - } - .count { - font-size: 2rem; - } - } - - .fill-space { - flex: 1; - } - - .icon-button { - margin-right: .5rem; - } - - .add-button { +.rounded-button { border-radius: .5rem; - } +} + +.icon-button { + margin-right: .5rem; } .table-wrapper { diff --git a/console/src/app/modules/project-roles/project-roles.component.ts b/console/src/app/modules/project-roles/project-roles.component.ts index 40e5edfaea..6b7c7716e0 100644 --- a/console/src/app/modules/project-roles/project-roles.component.ts +++ b/console/src/app/modules/project-roles/project-roles.component.ts @@ -30,10 +30,11 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit { /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ public displayedColumns: string[] = ['select', 'key', 'displayname', 'group', 'creationDate']; - constructor(private projectService: ProjectService, private toast: ToastService, private dialog: MatDialog) { } + constructor(private projectService: ProjectService, private toast: ToastService, private dialog: MatDialog) { + this.dataSource = new ProjectRolesDataSource(this.projectService); + } public ngOnInit(): void { - this.dataSource = new ProjectRolesDataSource(this.projectService); this.dataSource.loadRoles(this.projectId, 0, 25, 'asc'); this.selection.changed.subscribe(() => { @@ -119,4 +120,8 @@ export class ProjectRolesComponent implements AfterViewInit, OnInit { width: '400px', }); } + + public refreshPage(): void { + this.dataSource.loadRoles(this.projectId, this.paginator.pageIndex, this.paginator.pageSize); + } } diff --git a/console/src/app/modules/project-roles/project-roles.module.ts b/console/src/app/modules/project-roles/project-roles.module.ts index 132c9cbd29..92dee97d99 100644 --- a/console/src/app/modules/project-roles/project-roles.module.ts +++ b/console/src/app/modules/project-roles/project-roles.module.ts @@ -18,6 +18,7 @@ import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module'; +import { RefreshTableModule } from '../refresh-table/refresh-table.module'; import { ProjectRoleDetailComponent } from './project-role-detail/project-role-detail.component'; import { ProjectRolesComponent } from './project-roles.component'; @@ -44,6 +45,7 @@ import { ProjectRolesComponent } from './project-roles.component'; TranslateModule, MatMenuModule, TimestampToDatePipeModule, + RefreshTableModule, ], exports: [ ProjectRolesComponent, diff --git a/console/src/app/modules/refresh-table/refresh-table.component.html b/console/src/app/modules/refresh-table/refresh-table.component.html new file mode 100644 index 0000000000..5dd4ade2d5 --- /dev/null +++ b/console/src/app/modules/refresh-table/refresh-table.component.html @@ -0,0 +1,18 @@ +
+
+ + {{'ORG_DETAIL.TABLE.TOTAL' | translate}} + {{dataSize}} + + + {{'ORG_DETAIL.TABLE.SELECTION' | translate}} + {{selection?.selected?.length}} + +
+ + + +
+ \ No newline at end of file diff --git a/console/src/app/modules/refresh-table/refresh-table.component.scss b/console/src/app/modules/refresh-table/refresh-table.component.scss new file mode 100644 index 0000000000..36bdf557a9 --- /dev/null +++ b/console/src/app/modules/refresh-table/refresh-table.component.scss @@ -0,0 +1,26 @@ + +.table-header-row { + display: flex; + align-items: center; + + .col { + display: flex; + flex-direction: column; + + .desc { + font-size: .8rem; + color: #8795a1; + } + .count { + font-size: 2rem; + } + } + + .fill-space { + flex: 1; + } + + .icon-button { + margin-right: .5rem; + } +} diff --git a/console/src/app/modules/refresh-table/refresh-table.component.spec.ts b/console/src/app/modules/refresh-table/refresh-table.component.spec.ts new file mode 100644 index 0000000000..6c429da406 --- /dev/null +++ b/console/src/app/modules/refresh-table/refresh-table.component.spec.ts @@ -0,0 +1,25 @@ +import { async, ComponentFixture, TestBed } from '@angular/core/testing'; + +import { RefreshTableComponent } from './refresh-table.component'; + +describe('RefreshTableComponent', () => { + let component: RefreshTableComponent; + let fixture: ComponentFixture; + + beforeEach(async(() => { + TestBed.configureTestingModule({ + declarations: [RefreshTableComponent], + }) + .compileComponents(); + })); + + beforeEach(() => { + fixture = TestBed.createComponent(RefreshTableComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/console/src/app/modules/refresh-table/refresh-table.component.ts b/console/src/app/modules/refresh-table/refresh-table.component.ts new file mode 100644 index 0000000000..0824f23964 --- /dev/null +++ b/console/src/app/modules/refresh-table/refresh-table.component.ts @@ -0,0 +1,46 @@ +import { animate, animation, keyframes, style, transition, trigger, useAnimation } from '@angular/animations'; +import { SelectionModel } from '@angular/cdk/collections'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +const rotate = animation([ + animate( + '{{time}} cubic-bezier(0.785, 0.135, 0.15, 0.86)', + keyframes([ + style({ + transform: 'rotate(0deg)', + }), + style({ + transform: 'rotate(360deg)', + }), + ]), + ), +]); +@Component({ + selector: 'app-refresh-table', + templateUrl: './refresh-table.component.html', + styleUrls: ['./refresh-table.component.scss'], + animations: [ + trigger('rotate', [ + transition('* => *', [useAnimation(rotate, { params: { time: '1s' } })]), + ]), + ], +}) +export class RefreshTableComponent implements OnInit { + @Input() public selection: SelectionModel = new SelectionModel(true, []); + @Input() public dataSize: number = 0; + @Input() public emitRefreshAfterTimeoutInMs: number = 0; + @Output() public refreshed: EventEmitter = new EventEmitter(); + + ngOnInit(): void { + if (this.emitRefreshAfterTimeoutInMs) { + setTimeout(() => { + this.emitRefresh(); + }, this.emitRefreshAfterTimeoutInMs); + } + } + + emitRefresh(): void { + this.selection.clear(); + return this.refreshed.emit(); + } +} diff --git a/console/src/app/modules/refresh-table/refresh-table.module.ts b/console/src/app/modules/refresh-table/refresh-table.module.ts new file mode 100644 index 0000000000..7f998f1673 --- /dev/null +++ b/console/src/app/modules/refresh-table/refresh-table.module.ts @@ -0,0 +1,27 @@ +import { CommonModule } from '@angular/common'; +import { NgModule } from '@angular/core'; +import { FormsModule } from '@angular/forms'; +import { MatButtonModule } from '@angular/material/button'; +import { MatIconModule } from '@angular/material/icon'; +import { MatTooltipModule } from '@angular/material/tooltip'; +import { TranslateModule } from '@ngx-translate/core'; + +import { RefreshTableComponent } from './refresh-table.component'; + + + +@NgModule({ + declarations: [RefreshTableComponent], + imports: [ + CommonModule, + MatButtonModule, + MatIconModule, + TranslateModule, + FormsModule, + MatTooltipModule, + ], + exports: [ + RefreshTableComponent, + ], +}) +export class RefreshTableModule { } diff --git a/console/src/app/modules/user-grants/user-grants.component.html b/console/src/app/modules/user-grants/user-grants.component.html index 100bab6a44..7a75f36bfb 100644 --- a/console/src/app/modules/user-grants/user-grants.component.html +++ b/console/src/app/modules/user-grants/user-grants.component.html @@ -1,148 +1,119 @@ -
-
- - {{'ORG_DETAIL.TABLE.TOTAL' | translate}} - {{dataSource.grantsSubject.value.length}} - - - {{'ORG_DETAIL.TABLE.SELECTION' | translate}} - {{selection?.selected?.length}} - -
- - - add{{ 'GRANTS.ADD_BTN' | translate }} -
-
- \ No newline at end of file + \ No newline at end of file diff --git a/console/src/app/modules/user-grants/user-grants.component.scss b/console/src/app/modules/user-grants/user-grants.component.scss index 1a69216fbc..3c817ccb62 100644 --- a/console/src/app/modules/user-grants/user-grants.component.scss +++ b/console/src/app/modules/user-grants/user-grants.component.scss @@ -1,31 +1,6 @@ -.table-header-row { - display: flex; - align-items: center; - - .col { - display: flex; - flex-direction: column; - .desc { - font-size: .8rem; - color: #8795a1; - } - .count { - font-size: 2rem; - } - } - - .fill-space { - flex: 1; - } - - .icon-button { - margin-right: .5rem; - } - - .add-button { - border-radius: .5rem; - } +.add-button { + border-radius: .5rem; } .table-wrapper { diff --git a/console/src/app/modules/user-grants/user-grants.component.ts b/console/src/app/modules/user-grants/user-grants.component.ts index c88f17d52d..44cd2eb131 100644 --- a/console/src/app/modules/user-grants/user-grants.component.ts +++ b/console/src/app/modules/user-grants/user-grants.component.ts @@ -176,11 +176,16 @@ export class UserGrantsComponent implements OnInit, AfterViewInit { }); } - public changePage(event: PageEvent): void { - this.dataSource.loadGrants(this.context, event.pageIndex, event.pageSize, { - projectId: this.projectId, - grantId: this.grantId, - userId: this.userId, - }); + public changePage(event?: PageEvent): void { + this.dataSource.loadGrants( + this.context, + event?.pageIndex ?? this.paginator.pageIndex, + event?.pageSize ?? this.paginator.pageSize, + { + projectId: this.projectId, + grantId: this.grantId, + userId: this.userId, + }, + ); } } diff --git a/console/src/app/modules/user-grants/user-grants.module.ts b/console/src/app/modules/user-grants/user-grants.module.ts index bb1534afde..cd123fee7a 100644 --- a/console/src/app/modules/user-grants/user-grants.module.ts +++ b/console/src/app/modules/user-grants/user-grants.module.ts @@ -17,6 +17,7 @@ import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module'; import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe.module'; import { AvatarModule } from '../avatar/avatar.module'; +import { RefreshTableModule } from '../refresh-table/refresh-table.module'; import { UserGrantsComponent } from './user-grants.component'; @@ -41,6 +42,7 @@ import { UserGrantsComponent } from './user-grants.component'; TranslateModule, HasRolePipeModule, TimestampToDatePipeModule, + RefreshTableModule, ], exports: [ UserGrantsComponent, diff --git a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html index b56d0ed19f..7d56f264c2 100644 --- a/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html +++ b/console/src/app/pages/iam/iam-contributors/iam-contributors.component.html @@ -4,8 +4,8 @@
- -
+
- +
+ matTooltip="{{ member.email }} | {{member.rolesList?.join(' ')}}" + [ngStyle]="{'z-index': 100 - i}"> ; + @ViewChild(MatTable) public table!: MatTable; /** Columns displayed in the table. Columns IDs can be added, removed, or reordered. */ public displayedColumns: string[] = ['select', 'firstname', 'lastname', 'username', 'email', 'roles']; diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts index dcffe4b264..fe3eca23f0 100644 --- a/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts +++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/owned-project-detail.module.ts @@ -17,6 +17,7 @@ import { ChangesModule } from 'src/app/modules/changes/changes.module'; import { MetaLayoutModule } from 'src/app/modules/meta-layout/meta-layout.module'; import { ProjectContributorsModule } from 'src/app/modules/project-contributors/project-contributors.module'; import { ProjectRolesModule } from 'src/app/modules/project-roles/project-roles.module'; +import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module'; import { UserGrantsModule } from 'src/app/modules/user-grants/user-grants.module'; import { WarnDialogModule } from 'src/app/modules/warn-dialog/warn-dialog.module'; import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe.module'; @@ -59,6 +60,7 @@ import { ProjectGrantsComponent } from './project-grants/project-grants.componen MatProgressSpinnerModule, ChangesModule, MetaLayoutModule, + RefreshTableModule, ], }) export class OwnedProjectDetailModule { } diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts index 21bea8ee92..bf431e5582 100644 --- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts +++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants-datasource.ts @@ -10,6 +10,7 @@ import { ProjectService } from 'src/app/services/project.service'; * (including sorting, pagination, and filtering). */ export class ProjectGrantsDataSource extends DataSource { + public totalResult: number = 0; public grantsSubject: BehaviorSubject = new BehaviorSubject([]); private loadingSubject: BehaviorSubject = new BehaviorSubject(false); public loading$: Observable = this.loadingSubject.asObservable(); @@ -24,6 +25,7 @@ export class ProjectGrantsDataSource extends DataSource { this.loadingSubject.next(true); from(this.projectService.SearchProjectGrants(projectId, pageSize, offset)).pipe( map(resp => { + this.totalResult = resp.toObject().totalResult; return resp.toObject().resultList; }), catchError(() => of([])), diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html index c109a4403e..0a2582e37a 100644 --- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html +++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.html @@ -1,91 +1,84 @@ -
-
- - {{'ORG_DETAIL.TABLE.TOTAL' | translate}} - {{dataSource.grantsSubject.value.length}} - - - {{'ORG_DETAIL.TABLE.SELECTION' | translate}} - {{selection?.selected?.length}} - -
- - - - - + add{{ 'ACTIONS.NEW' | translate }} -
-
- \ No newline at end of file + \ No newline at end of file diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss index 401ceee490..4f9d5908b7 100644 --- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss +++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.scss @@ -1,30 +1,5 @@ -.table-header-row { - display: flex; - align-items: center; - - .col { - display: flex; - flex-direction: column; - .desc { - font-size: .8rem; - color: #8795a1; - } - .count { - font-size: 2rem; - } - } - - .fill-space { - flex: 1; - } - - .icon-button { - margin-right: .5rem; - } - - .add-button { - border-radius: .5rem; - } +.rounded-button { + border-radius: .5rem; } .table-wrapper { diff --git a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.ts b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.ts index 47b372160c..47012f4a08 100644 --- a/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.ts +++ b/console/src/app/pages/projects/owned-projects/owned-project-detail/project-grants/project-grants.component.ts @@ -52,11 +52,11 @@ export class ProjectGrantsComponent implements OnInit, AfterViewInit { } - private loadGrantsPage(): void { + public loadGrantsPage(pageIndex?: number, pageSize?: number): void { this.dataSource.loadGrants( this.projectId, - this.paginator.pageIndex, - this.paginator.pageSize, + pageIndex ?? this.paginator.pageIndex, + pageSize ?? this.paginator.pageSize, ); } diff --git a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html index 79290b1370..bc03a7d818 100644 --- a/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html +++ b/console/src/app/pages/projects/owned-projects/owned-project-list/owned-project-grid/owned-project-grid.component.html @@ -29,7 +29,7 @@
@@ -57,7 +57,7 @@
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html index 2cfb455fd0..d67c9b4d0a 100644 --- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html +++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-detail.component.html @@ -126,7 +126,7 @@
- +
diff --git a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html index 15372d025e..a5ad9d214f 100644 --- a/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html +++ b/console/src/app/pages/users/user-detail/auth-user-detail/auth-user-mfa/auth-user-mfa.component.html @@ -1,19 +1,37 @@ -
-
- {{'USER.MFA.TYPE.'+ mfa.type | translate}} - - - -
-

{{error}}

-
+ + + + + + + + + + + + + + + + + + + + +
{{ 'USER.MFA.TABLETYPE' | translate }} {{'USER.MFA.TYPE.'+ mfa.type | translate}} {{ 'USER.MFA.TABLESTATE' | translate }} + {{'USER.MFA.STATE.'+ mfa.state | translate}} + + + {{ 'USER.MFA.TABLEACTIONS' | translate }} + +
+
-
- +
\ No newline at end of file diff --git a/console/src/app/pages/users/user-list/user-list.component.scss b/console/src/app/pages/users/user-list/user-list.component.scss index 8c1edac24d..9258bbec72 100644 --- a/console/src/app/pages/users/user-list/user-list.component.scss +++ b/console/src/app/pages/users/user-list/user-list.component.scss @@ -7,34 +7,8 @@ h1 { margin-bottom: 2rem; } -.table-header-row { - display: flex; - align-items: center; - - .col { - display: flex; - flex-direction: column; - - .desc { - font-size: .8rem; - color: #8795a1; - } - .count { - font-size: 2rem; - } - } - - .fill-space { - flex: 1; - } - - .icon-button { - margin-right: .5rem; - } - - .add-button { - border-radius: .5rem; - } +.add-button { + border-radius: .5rem; } .table-wrapper { diff --git a/console/src/app/pages/users/user-list/user-list.component.ts b/console/src/app/pages/users/user-list/user-list.component.ts index 045125b77d..eb4f8b5ce5 100644 --- a/console/src/app/pages/users/user-list/user-list.component.ts +++ b/console/src/app/pages/users/user-list/user-list.component.ts @@ -1,6 +1,6 @@ import { SelectionModel } from '@angular/cdk/collections'; -import { Component, EventEmitter, OnDestroy, Output } from '@angular/core'; -import { PageEvent } from '@angular/material/paginator'; +import { Component, EventEmitter, OnDestroy, Output, ViewChild } from '@angular/core'; +import { MatPaginator, PageEvent } from '@angular/material/paginator'; import { MatTableDataSource } from '@angular/material/table'; import { ActivatedRoute } from '@angular/router'; import { TranslateService } from '@ngx-translate/core'; @@ -15,6 +15,7 @@ import { ToastService } from 'src/app/services/toast.service'; styleUrls: ['./user-list.component.scss'], }) export class UserListComponent implements OnDestroy { + @ViewChild(MatPaginator) public paginator!: MatPaginator; public dataSource: MatTableDataSource = new MatTableDataSource(); public userResult!: UserSearchResponse.AsObject; private loadingSubject: BehaviorSubject = new BehaviorSubject(false); @@ -83,4 +84,8 @@ export class UserListComponent implements OnDestroy { this.loadingSubject.next(false); }); } + + public refreshPage(): void { + this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize); + } } diff --git a/console/src/app/pages/users/user-list/user-list.module.ts b/console/src/app/pages/users/user-list/user-list.module.ts index 6bdc5d8ca8..8504d54511 100644 --- a/console/src/app/pages/users/user-list/user-list.module.ts +++ b/console/src/app/pages/users/user-list/user-list.module.ts @@ -13,13 +13,13 @@ import { TranslateModule } from '@ngx-translate/core'; import { HasRoleModule } from 'src/app/directives/has-role/has-role.module'; import { AvatarModule } from 'src/app/modules/avatar/avatar.module'; import { CardModule } from 'src/app/modules/card/card.module'; +import { RefreshTableModule } from 'src/app/modules/refresh-table/refresh-table.module'; import { SharedModule } from 'src/app/modules/shared/shared.module'; import { UserListRoutingModule } from './user-list-routing.module'; import { UserListComponent } from './user-list.component'; - @NgModule({ declarations: [ UserListComponent, @@ -41,6 +41,7 @@ import { UserListComponent } from './user-list.component'; MatTooltipModule, TranslateModule, SharedModule, + RefreshTableModule, ], exports: [ UserListComponent, diff --git a/console/src/app/services/grpc.service.ts b/console/src/app/services/grpc.service.ts index 91f1492e12..edfc66b6e6 100644 --- a/console/src/app/services/grpc.service.ts +++ b/console/src/app/services/grpc.service.ts @@ -1,6 +1,6 @@ +import { PlatformLocation } from '@angular/common'; import { HttpClient } from '@angular/common/http'; import { Injectable } from '@angular/core'; -import { PlatformLocation } from '@angular/common'; import { AdminServicePromiseClient } from '../proto/generated/admin_grpc_web_pb'; import { AuthServicePromiseClient } from '../proto/generated/auth_grpc_web_pb'; @@ -28,7 +28,10 @@ export class GrpcService { public async loadAppEnvironment(): Promise { return this.http.get('./assets/environment.json') .toPromise().then((data: any) => { + console.log('init grpc'); + if (data && data.authServiceUrl && data.mgmtServiceUrl && data.issuer) { + console.log('init grpc promiseclients'); this.auth = new AuthServicePromiseClient(data.authServiceUrl); this.mgmt = new ManagementServicePromiseClient(data.mgmtServiceUrl); this.admin = new AdminServicePromiseClient(data.adminServiceUrl); diff --git a/console/src/app/services/mgmt-user.service.ts b/console/src/app/services/mgmt-user.service.ts index c7872435f4..d22bea2dbd 100644 --- a/console/src/app/services/mgmt-user.service.ts +++ b/console/src/app/services/mgmt-user.service.ts @@ -217,23 +217,6 @@ export class MgmtUserService { ); } - // public async CreateUserGrant( - // projectId: string, - // userId: string, - // roleNamesList: string[], - // ): Promise { - // const req = new UserGrantCreate(); - // req.setProjectId(projectId); - // req.setUserId(userId); - // req.setRoleKeysList(roleNamesList); - - // return await this.request( - // c => c.createUserGrant, - // req, - // f => f, - // ); - // } - public async CreateProjectUserGrant( projectId: string, userId: string, diff --git a/console/src/assets/i18n/de.json b/console/src/assets/i18n/de.json index 5d87bb40e2..d31742cdd1 100644 --- a/console/src/assets/i18n/de.json +++ b/console/src/assets/i18n/de.json @@ -50,7 +50,8 @@ "FINISH":"Abschliessen", "CHANGE":"Ändern", "REACTIVATE":"Aktivieren", - "DEACTIVATE":"Deaktivieren" + "DEACTIVATE":"Deaktivieren", + "REFRESH":"Aktualisieren" }, "ERRORS": { "REQUIRED": "Bitte fülle alle benötigten Felder aus!" @@ -74,6 +75,9 @@ "DEACTIVATE":"Deaktivieren" }, "MFA": { + "TABLETYPE":"Typ", + "TABLESTATE":"Status", + "TABLEACTIONS":"Aktionen", "TITLE": "Multifaktor-Authentifizierung", "DESCRIPTION": "Füge einen zusätzlichen Faktor hinzu, um deinen Account optimal zu schützen.", "MANAGE_DESCRIPTION": "Verwalte die Multifaktor Merkmale deiner Benutzer.", diff --git a/console/src/assets/i18n/en.json b/console/src/assets/i18n/en.json index b3d6fc6179..e30d06b951 100644 --- a/console/src/assets/i18n/en.json +++ b/console/src/assets/i18n/en.json @@ -49,8 +49,9 @@ "VERIFY":"Verify", "FINISH":"Finish", "CHANGE":"Change", - "REACTIVATE":"Aktivieren", - "DEACTIVATE":"Deaktivieren" + "REACTIVATE":"Reactivate", + "DEACTIVATE":"Deactivate", + "REFRESH":"Refresh" }, "ERRORS": { "REQUIRED": "Some required fields are missing!" @@ -74,6 +75,9 @@ "DEACTIVATE":"Deactivate" }, "MFA": { + "TABLETYPE":"Type", + "TABLESTATE":"Status", + "TABLEACTIONS":"Actions", "TITLE": "Multifactor Authentication", "DESCRIPTION": "Add a second factor to ensure optimal security for your account.", "MANAGE_DESCRIPTION": "Manage the second factor methods of your users.", diff --git a/console/src/index.html b/console/src/index.html index 037d1575af..9e60c65c84 100644 --- a/console/src/index.html +++ b/console/src/index.html @@ -9,7 +9,7 @@ - + @@ -32,4 +32,4 @@ - + \ No newline at end of file diff --git a/console/src/styles.scss b/console/src/styles.scss index 3006849eba..a4b62b445b 100644 --- a/console/src/styles.scss +++ b/console/src/styles.scss @@ -91,16 +91,49 @@ $caos-light-brand: ( A700: white, ) ); + +$caos-accent-color: ( + 50: #ebf4f2, + 100: #cce3de, + 200: #abd1c9, + 300: #89bfb3, + 400: #6fb1a2, + 500: #56a392, + 600: #4f9b8a, + 700: #45917f, + 800: #3c8875, + 900: #2b7763, + A100: #beffed, + A200: #8bffde, + A400: #58ffd0, + A700: #3effc9, + contrast: ( + 50: $black-87-opacity, + 100: $black-87-opacity, + 200: $black-87-opacity, + 300: $black-87-opacity, + 400: $black-87-opacity, + 500: white, + 600: white, + 700: white, + 800: white, + 900: white, + A100: $black-87-opacity, + A200: $black-87-opacity, + A400: $black-87-opacity, + A700: white, + ) +); // Define the palettes for your theme using the Material Design palettes available in palette.scss // (imported above). For each palette, you can optionally specify a default, lighter, and darker // hue. Available color palettes: https://material.io/design/color/ $light-primary: mat-palette($caos-light-brand); -$light-accent: mat-palette($mat-pink); +$light-accent:mat-palette($caos-accent-color); $light-warn: mat-palette($mat-red); $dark-primary: mat-palette($caos-dark-brand); -$dark-accent: mat-palette($mat-pink, 500, 700, A700); +$dark-accent: mat-palette($mat-pink); $dark-warn: mat-palette($mat-red); $light-theme: mat-light-theme($light-primary, $light-accent, $light-warn); @@ -140,8 +173,9 @@ $custom-typography: mat-typography-config( } ::-webkit-scrollbar-thumb { - background-color: #5282c1; + background-color: #737C8850; border-radius: 8px; + cursor: pointer; } } @@ -172,8 +206,9 @@ $custom-typography: mat-typography-config( } ::-webkit-scrollbar-thumb { - background-color: #5282c1; + background-color: #737C8870; border-radius: 8px; + cursor: pointer; } } diff --git a/console/src/styles/sidenav-list.scss b/console/src/styles/sidenav-list.scss index c61afe1324..5e40a454c1 100644 --- a/console/src/styles/sidenav-list.scss +++ b/console/src/styles/sidenav-list.scss @@ -48,9 +48,9 @@ } .root-header { - @include mat-elevation(3); - background: $primary-dark !important; - transition: background .5s ease-in-out; + box-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.1), 0px 1px 1px 0px rgba(0, 0, 0, 0.1), 0px 1px 3px 0px rgba(0, 0, 0, 0.1); + background-color: $primary-dark !important; + transition: background-color .5s ease-in-out; } .admin-line {