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-21 23:14:26 +00:00 · 2021-03-01 09:01:34 +01:00
parent 3c07a186fc
commit 9f417f3957
113 changed files with 2976 additions and 1327 deletions
@@ -6,12 +6,45 @@
 </div>

 <div class="scroll-container" appScrollable (scrollPosition)="scrollHandler($event)">
-    <li class="item change-item-back" *ngFor="let event of data | async">
-        <span class="seq">
-            {{event.changeDate | timestampToDate | localizedDate: 'EEE dd. MMM, HH:mm'}}
-        </span>
-        <span class="editor">{{event.editor}}</span>
-        <span class="desc">{{event?.eventType?.localizedMessage }}</span>
+    <li class="item change-item-back" *ngFor="let hist of data | async; index as histindex">
+        <span *ngIf="hist.values[0].dates[0]" class="date">{{
+            hist.values[0]?.dates[0]| timestampToDate | localizedDate: 'dd. MMMM YYYY' }}</span>
+        <div class="item" *ngFor="let dayelement of hist.values; index as i">
+            <div class="row">
+                <app-avatar matTooltip="{{ dayelement.editorName }}" *ngIf="dayelement.editorName; else spacer"
+                    class="avatar" [name]="dayelement.editorName" [size]="32">
+                </app-avatar>
+                <ng-template #spacer>
+                    <div class="spacer"></div>
+                </ng-template>
+                <div class="actions">
+                    <div class="action" *ngFor="let action of dayelement.eventTypes; index as j">
+                        <button disabled mat-icon-button aria-label="Restore history"
+                            matTooltip="{{ dayelement.dates[j] | timestampToDate | localizedDate: 'dd. MMMM YYYY, HH:mm' }}">
+                            <mat-icon class="icon">schedule</mat-icon>
+                        </button>
+
+                        <span>
+                            <span class="msg">{{ action.localizedMessage }}</span>
+                            <span class="block">{{
+                                dayelement.dates[j] | timestampToDate | localizedDate: 'HH:mm'
+                                }}</span>
+                        </span>
+                        <!-- <span *ngIf="histindex === 0 && i === 0 && j === 0">
+                            <span>current file</span>
+                            <span class="block">{{
+                                dayelement.dates[j] | timestampToDate | localizedDate: 'HH:mm'
+                                }}</span>
+                        </span> -->
+
+                        <!-- <button mat-icon-button disabled>
+                            <mat-icon class="icon red" color="warn">error_outline
+                            </mat-icon>
+                        </button> -->
+                    </div>
+                </div>
+            </div>
+        </div>
    </li>
    <div class="sp-wrapper">
        <mat-spinner *ngIf="loading | async" diameter="25"></mat-spinner>
@@ -21,54 +21,119 @@
 }

@mixin changes-theme($theme) {
-  .scroll-container {
-    max-height: 50vh;
-    overflow-y: scroll;
+    .scroll-container {
+        max-height: 50vh;
+        overflow-y: scroll;
+        border-bottom: 1px solid #ffffff20;
+        margin-bottom: 0.5rem;

-    .item {
-      box-sizing: border-box;
-      padding: .5rem;
-      margin: .25rem 0;
-      border-radius: .5rem;
-      display: flex;
-      flex-direction: column;
+        .date {
+            font-weight: 500;
+            font-size: 0.8rem;
+            display: block;
+            margin-bottom: .5rem;
+        }

-      .editor {
-        color: var(--grey);
-        font-size: 12px;
-        align-self: flex-end;
-      }
+        .item {
+            display: block;
+            padding: 10px 0;
+            font-size: 0.8rem;

-      .seq {
-        color: var(--grey);
-        font-size: 12px;
-        align-self: flex-end;
-      }
+            .row {
+                display: flex;
+                flex-direction: row;

-      .desc {
-        overflow-x: auto;
-        font-size: 14px;
-      }
-      /* stylelint-disable */
-      $primary: map-get($theme, primary);
-      $primary-dark: mat-color($primary, A800);
-      /* stylelint-enable */
+                .spacer {
+                    width: 32px;
+                }
+            
+                .actions {
+                    flex: 1;
+                    display: flex;
+                    flex-direction: column;
+                    margin-top: -0.5rem;

-      &.change-item-back {
-        background-color: rgba($primary-dark, .93);
-        transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
-      }
+                    .action {
+                        display: flex;
+                        flex-direction: row;
+                        align-items: center;
+                        flex: 1;
+
+                        .icon {
+                            width: 32px;
+                            display: inline-block;
+                            height: 1.2rem;
+                            line-height: 1.2rem;
+                            font-size: 1.2rem;
+                            color: var(--grey);
+                        }
+
+                        span {
+                            flex: 1;
+                            font-weight: 500;
+                            font-size: 0.8rem;
+                            overflow-x: hidden;
+                        }
+                        
+                        .msg {
+                            text-overflow: ellipsis;
+                        }
+
+                        .block {
+                            display: block;
+                        }
+
+                        .restore {
+                            visibility: hidden;
+                            display: none;
+                            opacity: 0;
+                            margin-left: 1rem;
+                            transform: opacity 0.2s ease-in-out;
+                        }
+
+                        &:hover {
+                            .restore {
+                                visibility: visible;
+                                display: inline-block;
+                                opacity: 1;
+                                color: #81868a;
+
+                                &[disabled] {
+                                    visibility: hidden;
+                                }
+
+                                &:hover {
+                                    color: white;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                /* stylelint-disable */
+                $primary: map-get($theme, primary);
+                $primary-dark: mat-color($primary, A800);
+                /* stylelint-enable */
+
+                &.change-item-back {
+                    background-color: rgba($primary-dark, .93);
+                    transition: background-color .3s cubic-bezier(.645, .045, .355, 1);
+                }
+            }
+
+            .sp-wrapper {
+                padding: .5rem;
+                display: flex;
+                justify-content: center;
+            }
+
+            .end-container {
+                font-size: 12px;
+                color: var(--grey);
+                font-size: 14px;
+                margin: 1rem 0;
+                color: var(--grey);
+            }
+        }
    }
-
-    .sp-wrapper {
-      padding: .5rem;
-      display: flex;
-      justify-content: center;
-    }
-
-    .end-container {
-      font-size: 12px;
-      color: var(--grey);
-    }
-  }
-}
+}
@@ -4,6 +4,8 @@ import { catchError, debounceTime, scan, take, takeUntil, tap } from 'rxjs/opera
 import { Change, Changes } from 'src/app/proto/generated/management_pb';
 import { GrpcAuthService } from 'src/app/services/grpc-auth.service';
 import { ManagementService } from 'src/app/services/mgmt.service';
+import { Timestamp } from 'google-protobuf/google/protobuf/timestamp_pb';
+import { KeyValue } from '@angular/common';

 export enum ChangeType {
    MYUSER = 'myuser',
@@ -13,6 +15,18 @@ export enum ChangeType {
    APP = 'app',
 }

+export interface MappedChange {
+    key: string,
+    values: Array<{
+        data: any[];
+        dates: Timestamp.AsObject[];
+        editorId: string;
+        editorName: string;
+        eventTypes: Array<{ key: string; localizedMessage: string; }>;
+        sequences: number[];
+    }>;
+}
+
@Component({
    selector: 'app-changes',
    templateUrl: './changes.component.html',
@@ -31,7 +45,7 @@ export class ChangesComponent implements OnInit, OnDestroy {
    private _data: BehaviorSubject<any> = new BehaviorSubject([]);

    loading: Observable<boolean> = this._loading.asObservable();
-    public data!: Observable<Change.AsObject[]>;
+    public data!: Observable<MappedChange[]>;
    public changes!: Changes.AsObject;
    private destroyed$: Subject<void> = new Subject();
    constructor(private mgmtUserService: ManagementService, private authUserService: GrpcAuthService) {
@@ -52,6 +66,7 @@ export class ChangesComponent implements OnInit, OnDestroy {
    }

    public scrollHandler(e: any): void {
+        console.log('bottom');
        if (e === 'bottom') {
            this.more();
        }
@@ -83,6 +98,7 @@ export class ChangesComponent implements OnInit, OnDestroy {

    private more(): void {
        const cursor = this.getCursor();
+        console.log('cursor' + cursor);

        let more: Promise<Changes>;

@@ -105,9 +121,11 @@ export class ChangesComponent implements OnInit, OnDestroy {
    // Determines the snapshot to paginate query
    private getCursor(): number {
        const current = this._data.value;
+
        if (current.length) {
-            return !this.sortDirectionAsc ? current[0].sequence :
-                current[current.length - 1].sequence;
+            const lastElementValues = current[current.length - 1].values;
+            const seq = lastElementValues[lastElementValues.length - 1].sequences;
+            return seq[seq.length - 1];
        }
        return 0;
    }
@@ -125,8 +143,10 @@ export class ChangesComponent implements OnInit, OnDestroy {
                take(1),
                tap((res: Changes) => {
                    const values = res.toObject().changesList;
+                    const mapped = this.mapChanges(values);
                    // update source with new values, done loading
-                    this._data.next(values);
+                    // this._data.next(values);
+                    this._data.next(mapped);

                    this._loading.next(false);

@@ -143,4 +163,85 @@ export class ChangesComponent implements OnInit, OnDestroy {
            ).subscribe();
        }
    }
+
+    mapChanges(changes: Change.AsObject[]) {
+        const splitted: { [editorId: string]: any[]; } = {};
+        changes.forEach((change) => {
+            if (change.changeDate) {
+                const index = `${this.getDateString(change.changeDate)}`;//`${this.getDateString(change.changeDate)}:${change.editorId}`;
+
+                if (index) {
+                    if (splitted[index]) {
+                        const userData: any = {
+                            editor: change.editor,
+                            editorId: change.editorId,
+                            editorName: change.editor,
+
+                            dates: [change.changeDate],
+                            data: [change.data],
+                            eventTypes: [change.eventType],
+                            sequences: [change.sequence],
+                        };
+                        const lastIndex = splitted[index].length - 1;
+                        if (lastIndex > -1 && splitted[index][lastIndex].editor === change.editor) {
+                            splitted[index][lastIndex].dates.push(change.changeDate);
+                            splitted[index][lastIndex].data.push(change.data);
+                            splitted[index][lastIndex].eventTypes.push(change.eventType);
+                            splitted[index][lastIndex].sequences.push(change.sequence);
+                        } else {
+                            splitted[index].push(userData);
+                        }
+                    } else {
+                        splitted[index] = [
+                            {
+                                editor: change.editor,
+                                editorId: change.editorId,
+                                editorName: change.editor,
+
+                                dates: [change.changeDate],
+                                data: [change.data],
+                                eventTypes: [change.eventType],
+                                sequences: [change.sequence],
+                            }
+                        ];
+                    }
+                }
+            }
+        });
+        const arr = Object.keys(splitted).map(key => {
+            return { key: key, values: splitted[key] };
+        });
+
+        arr.sort((a, b) => {
+            return parseFloat(b.key) - parseFloat(a.key);
+        });
+
+        // console.log(arr);
+        return arr;
+    }
+
+    getDateString(ts: Timestamp.AsObject) {
+        const date = new Date(ts.seconds * 1000 + ts.nanos / 1000 / 1000);
+        return date.getUTCFullYear() + this.pad(date.getUTCMonth() + 1) + this.pad(date.getUTCDate());
+    }
+
+    getTimestampIndex(date: any): number {
+        const ts: Date = new Date(date.seconds * 1000 + date.nanos / 1000 / 1000);
+        console.log(ts);
+        return ts.getTime();
+    }
+
+    pad(n: number): string {
+        return n < 10 ? '0' + n : n.toString();
+    }
+
+    // Order by ascending property value
+    valueAscOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
+        return a.value.localeCompare(b.value);
+    };
+
+    // Order by descending property key
+    keyDescOrder = (a: KeyValue<number, string>, b: KeyValue<number, string>): number => {
+        return a.key > b.key ? -1 : (b.key > a.key ? 1 : 0);
+    };
 }
@@ -10,6 +10,7 @@ import { ScrollableModule } from 'src/app/directives/scrollable/scrollable.modul
 import { HasRolePipeModule } from 'src/app/pipes/has-role-pipe/has-role-pipe.module';
 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';
+import { AvatarModule } from '../avatar/avatar.module';

 import { ChangesComponent } from './changes.component';

@@ -30,6 +31,7 @@ import { ChangesComponent } from './changes.component';
        LocalizedDatePipeModule,
        TimestampToDatePipeModule,
        MatTooltipModule,
+        AvatarModule
    ],
    exports: [
        ChangesComponent,