fix: Merge master (#1373)

* feat(console): app infos, api apps, fix redirects on create, fix role update, redesign idps, policy, prettier history (#1310) * idp fixes * idp cleanup and rehaul, complexity policy preview * policy fixes, orthodox redirect * link component, add links to policies * redirect pipe, state labels * Cnsl map changes (#1315) * map changes to different format * fix changes layout, cursor * set asc values * fix user appearance in changes, index * changes * app create with api * api app create * auth method for api config * authmethods, app card for api, authmethod in dev create * move machine keys to own module * jwt method for oidc * fix app edit * save toast * fix changes, change det in app detail * regenerate secret * chore(deps-dev): bump @angular-devkit/build-angular in /console (#1324) Bumps [@angular-devkit/build-angular](https://github.com/angular/angular-cli) from 0.1102.0 to 0.1102.1. - [Release notes](https://github.com/angular/angular-cli/releases) - [Commits](https://github.com/angular/angular-cli/commits) Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix policy backlink Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> (cherry picked from commit 40a7e958d712f83585e25f18f4fff620de5e3269) * fix: i18n refs, unnecessary logs (#1343) (cherry picked from commit 2e04c977eba295cab6aa533379f6075d2e27ab42) * fix: tos link (#1345) (cherry picked from commit 5333ef10c169e3656e3ca8dfb8edf7f738fa0a26) * fix: reactivate/deactivate idp, remove idp provider (#1348) * fix: reactivate/deactivate idp, remove idp provider * fix build * fix(console): add jwt to selection, idp deactivate reactivate (#1347) * fix: log error on idp change * add jwt to method selection Co-authored-by: Max Peintner <[email protected]> (cherry picked from commit c8b9888427f4ea6b513d370f9fed555208594edf) * fix: reactivate/deactivate idp (#1351) (cherry picked from commit 54f395e2e05d4adb29321e9597d049800c033b61) Co-authored-by: Max Peintner <[email protected]>
2026-10-27 17:52:14 +00:00 · 2021-03-01 09:01:34 +01:00
parent 3c07a186fc
commit 9f417f3957
113 changed files with 2976 additions and 1327 deletions
@@ -0,0 +1,66 @@
+<app-refresh-table [loading]="loading$ | async" (refreshed)="refreshPage()" [dataSize]="dataSource.data.length"
+    [timestamp]="keyResult?.viewTimestamp" [selection]="selection">
+    <div actions>
+        <button color="warn"
+            [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) == false"
+            (click)="deleteSelectedKeys()" matTooltip="{{'ACTIONS.DELETE' | translate}}" class="icon-button"
+            mat-icon-button *ngIf="selection.hasValue()">
+            <i class="las la-trash"></i>
+        </button>
+        <a [disabled]="([('project.app.write:' + projectId), 'project.app.write'] | hasRole | async) == false"
+            color="primary" mat-raised-button (click)="openAddKey()">
+            <mat-icon class="icon">add</mat-icon>{{ 'ACTIONS.NEW' | translate }}
+        </a>
+    </div>
+
+    <div class="table-wrapper">
+        <table class="table" mat-table [dataSource]="dataSource">
+            <ng-container matColumnDef="select">
+                <th mat-header-cell *matHeaderCellDef>
+                    <mat-checkbox color="primary" (change)="$event ? masterToggle() : null"
+                        [checked]="selection.hasValue() && isAllSelected()"
+                        [indeterminate]="selection.hasValue() && !isAllSelected()">
+                    </mat-checkbox>
+                </th>
+                <td mat-cell *matCellDef="let key">
+                    <mat-checkbox color="primary" (click)="$event.stopPropagation()"
+                        (change)="$event ? selection.toggle(key) : null" [checked]="selection.isSelected(key)">
+                    </mat-checkbox>
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="id">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.ID' | translate }} </th>
+                <td mat-cell *matCellDef="let key"> {{key?.id}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="type">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.TYPE' | translate }} </th>
+                <td mat-cell *matCellDef="let key"> {{'USER.MACHINE.KEYTYPES.'+key?.type | translate}} </td>
+            </ng-container>
+
+            <ng-container matColumnDef="creationDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.CREATIONDATE' | translate }} </th>
+                <td mat-cell *matCellDef="let key">
+                    {{key.creationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
+                </td>
+            </ng-container>
+
+            <ng-container matColumnDef="expirationDate">
+                <th mat-header-cell *matHeaderCellDef> {{ 'USER.MACHINE.EXPIRATIONDATE' | translate }} </th>
+                <td mat-cell *matCellDef="let key">
+                    {{key.expirationDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
+                </td>
+            </ng-container>
+
+
+            <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+            <tr class="highlight" mat-row *matRowDef="let key; columns: displayedColumns;"
+                (click)="selection.toggle(key);">
+            </tr>
+
+        </table>
+        <mat-paginator #paginator class="paginator" [length]="keyResult?.totalResult || 0" [pageSize]="10"
+            [pageSizeOptions]="[5, 10, 20]" (page)="changePage($event)"></mat-paginator>
+    </div>
+</app-refresh-table>
@@ -0,0 +1,27 @@
+
+.table-wrapper {
+  overflow: auto;
+
+  .table,
+  .paginator {
+    width: 100%;
+
+    td,
+    th {
+      padding: 0 1rem;
+
+      &:first-child {
+        padding-left: 0;
+        padding-right: 1rem;
+      }
+
+      &:last-child {
+        padding-right: 0;
+      }
+    }
+  }
+}
+
+tr {
+  outline: none;
+}
@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+
+import { ClientKeysComponent } from './client-keys.component';
+
+describe('ClientKeysComponent', () => {
+    let component: ClientKeysComponent;
+    let fixture: ComponentFixture<ClientKeysComponent>;
+
+    beforeEach(waitForAsync(() => {
+        TestBed.configureTestingModule({
+            declarations: [ClientKeysComponent],
+        })
+            .compileComponents();
+    }));
+
+    beforeEach(() => {
+        fixture = TestBed.createComponent(ClientKeysComponent);
+        component = fixture.componentInstance;
+        fixture.detectChanges();
+    });
+
+    it('should create', () => {
+        expect(component).toBeTruthy();
+    });
+});
@@ -0,0 +1,141 @@
+import { SelectionModel } from '@angular/cdk/collections';
+import { Component, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core';
+import { MatDialog } from '@angular/material/dialog';
+import { MatPaginator, PageEvent } from '@angular/material/paginator';
+import { MatTableDataSource } from '@angular/material/table';
+import { TranslateService } from '@ngx-translate/core';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { Moment } from 'moment';
+import { BehaviorSubject, Observable } from 'rxjs';
+import { AuthNKeyType, ClientKeySearchResponse, ClientKeyView, MachineKeySearchResponse, MachineKeyType, MachineKeyView } from 'src/app/proto/generated/management_pb';
+import { ManagementService } from 'src/app/services/mgmt.service';
+import { ToastService } from 'src/app/services/toast.service';
+
+import { AddKeyDialogComponent, AddKeyDialogType } from 'src/app/modules/add-key-dialog/add-key-dialog.component';
+import { ShowKeyDialogComponent } from 'src/app/modules/show-key-dialog/show-key-dialog.component';
+
+@Component({
+    selector: 'app-client-keys',
+    templateUrl: './client-keys.component.html',
+    styleUrls: ['./client-keys.component.scss'],
+})
+export class ClientKeysComponent implements OnInit {
+    @Input() projectId!: string;
+    @Input() appId!: string;
+
+    @ViewChild(MatPaginator) public paginator!: MatPaginator;
+    public dataSource: MatTableDataSource<ClientKeyView.AsObject> = new MatTableDataSource<ClientKeyView.AsObject>();
+    public selection: SelectionModel<ClientKeyView.AsObject> = new SelectionModel<ClientKeyView.AsObject>(true, []);
+    public keyResult!: MachineKeySearchResponse.AsObject | ClientKeySearchResponse.AsObject;
+    private loadingSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+    public loading$: Observable<boolean> = this.loadingSubject.asObservable();
+    @Input() public displayedColumns: string[] = ['select', 'id', 'type', 'creationDate', 'expirationDate'];
+
+    @Output() public changedSelection: EventEmitter<Array<ClientKeyView.AsObject>> = new EventEmitter();
+
+    constructor(public translate: TranslateService, private mgmtService: ManagementService, private dialog: MatDialog,
+        private toast: ToastService) {
+        this.selection.changed.subscribe(() => {
+            this.changedSelection.emit(this.selection.selected);
+        });
+    }
+
+    public ngOnInit(): void {
+        this.getData(10, 0);
+    }
+
+
+    public isAllSelected(): boolean {
+        const numSelected = this.selection.selected.length;
+        const numRows = this.dataSource.data.length;
+        return numSelected === numRows;
+    }
+
+    public masterToggle(): void {
+        this.isAllSelected() ?
+            this.selection.clear() :
+            this.dataSource.data.forEach(row => this.selection.select(row));
+    }
+
+
+    public changePage(event: PageEvent): void {
+        this.getData(event.pageSize, event.pageIndex * event.pageSize);
+    }
+
+    public deleteSelectedKeys(): void {
+        const mappedDeletions = this.selection.selected.map(value => {
+            return this.mgmtService.DeleteClientKey(value.id, this.projectId, this.appId);
+        });
+        Promise.all(mappedDeletions).then(() => {
+            this.selection.clear();
+            this.toast.showInfo('USER.TOAST.SELECTEDKEYSDELETED', true);
+            this.getData(10, 0);
+        }).catch(error => {
+            this.toast.showError(error);
+        });
+    }
+
+    public openAddKey(): void {
+        const dialogRef = this.dialog.open(AddKeyDialogComponent, {
+            data: {},
+            width: '400px',
+        });
+
+        dialogRef.afterClosed().subscribe(resp => {
+            if (resp) {
+                const type: AuthNKeyType = resp.type;
+
+                let date: Timestamp | undefined;
+
+                if (resp.date as Moment) {
+                    const ts = new Timestamp();
+                    console.log(resp.date.toDate());
+                    const milliseconds = resp.date.toDate().getTime();
+                    const seconds = Math.abs(milliseconds / 1000);
+                    const nanos = (milliseconds - seconds * 1000) * 1000 * 1000;
+                    ts.setSeconds(seconds);
+                    ts.setNanos(nanos);
+                    date = ts;
+                }
+
+                if (type) {
+                    return this.mgmtService.addClientKey(this.projectId, this.appId, type, date).then((response) => {
+                        if (response) {
+                            setTimeout(() => {
+                                this.refreshPage();
+                            }, 1000);
+
+                            this.dialog.open(ShowKeyDialogComponent, {
+                                data: {
+                                    key: response.toObject(),
+                                    type: AddKeyDialogType.AUTHNKEY
+                                },
+                                width: '400px',
+                            });
+                        }
+                    }).catch((error: any) => {
+                        this.toast.showError(error);
+                    });
+                }
+            }
+        });
+    }
+
+    private async getData(limit: number, offset: number): Promise<void> {
+        this.loadingSubject.next(true);
+        if (this.projectId && this.appId) {
+            this.mgmtService.SearchClientKeys(this.projectId, this.appId, limit, offset).then(resp => {
+                this.keyResult = resp.toObject();
+                this.dataSource.data = this.keyResult.resultList;
+                this.loadingSubject.next(false);
+            }).catch((error: any) => {
+                this.toast.showError(error);
+                this.loadingSubject.next(false);
+            });
+        }
+    }
+
+    public refreshPage(): void {
+        this.getData(this.paginator.pageSize, this.paginator.pageIndex * this.paginator.pageSize);
+    }
+}
@@ -0,0 +1,58 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCheckboxModule } from '@angular/material/checkbox';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { MatPaginatorModule } from '@angular/material/paginator';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatTableModule } from '@angular/material/table';
+import { MatTooltipModule } from '@angular/material/tooltip';
+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/has-role-pipe.module';
+import { CardModule } from '../card/card.module';
+import { InputModule } from '../input/input.module';
+import { RefreshTableModule } from '../refresh-table/refresh-table.module';
+
+import { ClientKeysComponent } from './client-keys.component';
+import { ShowKeyDialogModule } from '../show-key-dialog/show-key-dialog.module';
+import { AddKeyDialogModule } from 'src/app/modules/add-key-dialog/add-key-dialog.module';
+import { RouterModule } from '@angular/router';
+import { LocalizedDatePipeModule } from 'src/app/pipes/localized-date-pipe/localized-date-pipe.module';
+import { TimestampToDatePipeModule } from 'src/app/pipes/timestamp-to-date-pipe/timestamp-to-date-pipe.module';
+
+
+@NgModule({
+    declarations: [
+        ClientKeysComponent,
+    ],
+    imports: [
+        CommonModule,
+        RouterModule,
+        FormsModule,
+        MatButtonModule,
+        MatDialogModule,
+        HasRoleModule,
+        CardModule,
+        MatTableModule,
+        MatPaginatorModule,
+        MatIconModule,
+        MatProgressSpinnerModule,
+        MatCheckboxModule,
+        MatTooltipModule,
+        HasRolePipeModule,
+        TimestampToDatePipeModule,
+        LocalizedDatePipeModule,
+        TranslateModule,
+        RefreshTableModule,
+        InputModule,
+        ShowKeyDialogModule,
+        AddKeyDialogModule,
+    ],
+    exports: [
+        ClientKeysComponent,
+    ],
+})
+export class ClientKeysModule { }