feat(vm-logs): real time button position (#1387)

* feat(vm-logs): VM logs plugin (#1330)

* vm logs mock

* vm logs

* feat(vm-logs): show vm logs

* vm logs

* add tests

* fix action name

* fix selector name

* fix monospace text in column header

* feat(vm-logs): replace show logs icon button with text button

* feat(vm-logs): keyword filtering

* feat(vm-logs): save vm log keywords in query params

* feat(vm-logs): filter by dates

* feat(vm-logs): filter by dates

* v1.10.1

* fix tests

* fix version

* fix package.json

* sort by timestamp

* fix timestamp

* feat(vm-logs): filter vms by account

* refactor date picker label

* refactor labels

* refactor labels

* fix IE

* feat(vm-logs): newest first (#1346)

* vm logs mock

* vm logs

* feat(vm-logs): show vm logs

* vm logs

* add tests

* fix action name

* fix selector name

* fix monospace text in column header

* feat(vm-logs): replace show logs icon button with text button

* feat(vm-logs): keyword filtering

* feat(vm-logs): save vm log keywords in query params

* feat(vm-logs): filter by dates

* feat(vm-logs): filter by dates

* v1.10.1

* fix tests

* fix version

* fix package.json

* sort by timestamp

* fix timestamp

* feat(vm-logs): filter vms by account

* refactor date picker label

* refactor labels

* refactor labels

* fix IE

* feat(vm-logs): newest first sorting

* add types

* add types

* fix newest first

* fix typings

* fix typings

* fix typings

* feat(vm-logs): log files (#1351)

* feat(vm-logs): log files

* feat(vm-logs): log files

* code style

* feat(vm-logs): realtime logs

* feat(vm-logs): disable auto update on show logs click

* VM logs (#1362)

* refactor(vm): get rid of BaseModel for VM model (#1180)

PR close #1104

* build(code-coverage): enable source-maps by default (#1347)

This is a workaround to fix code coverage mapping

* Update README.md

* Create version

* Update README.md

* Update README.md

* feat(navigation): rework navigation menu (#1333)

PR close #1235

* feat(config-validation): add config validators (#1309)

* feat(config-validation): add config validators

* revert security group template interface

* add more validation

* remove allowReorderingSidenav validation, use uniqueItems

* Update vm-colors.scheme.json

* style: update app code style (#1359)

* Add prettier

* Prettier formatted

* Work in progress

* Fix tsc errors and lint errors

* Ann few more rules and changes to codebase

* Add precommit hook

* Run prettier on entire codebase

* Run prettier

* Fix lint error

* fix bug about grouping

* Fix bugs

* Remove unused files

* fix(misc): semantic errors

* fix(lint)

* Vm logs (#1363)

* refactor(vm): get rid of BaseModel for VM model (#1180)

PR close #1104

* build(code-coverage): enable source-maps by default (#1347)

This is a workaround to fix code coverage mapping

* Update README.md

* Create version

* Update README.md

* Update README.md

* feat(navigation): rework navigation menu (#1333)

PR close #1235

* feat(config-validation): add config validators (#1309)

* feat(config-validation): add config validators

* revert security group template interface

* add more validation

* remove allowReorderingSidenav validation, use uniqueItems

* Update vm-colors.scheme.json

* style: update app code style (#1359)

* Add prettier

* Prettier formatted

* Work in progress

* Fix tsc errors and lint errors

* Ann few more rules and changes to codebase

* Add precommit hook

* Run prettier on entire codebase

* Run prettier

* Fix lint error

* fix bug about grouping

* Fix bugs

* Remove unused files

* fix(misc): semantic errors

* fix(lint)

* update to master

* vm logs

* vm logs

* simplify nav menu reducer

* Update virtual-machines-subroutes.ts

* Update accounts-subroutes.ts

* nav menu

* fix current route is not defined

* remove view logs from context menu

* fix event emitter names

* feat(vm-logs): real time button position

* remove unused import

* add resize observer polyfill

package.json

@@ -55,6 +55,7 @@
     "ng-dynamic-component": "^3.0.0",
     "ng2-dragula": "1.5.0",
     "ngx-clipboard": "^11.1.7",
+    "resize-observer-polyfill": "^1.5.0",
     "ngx-infinite-scroll": "^6.0.1",
     "rxjs": "^6.3.2",
     "showdown": "^1.8.4",

src/app/shared/components/loader/loader.component.ts

@@ -2,7 +2,11 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
 
 @Component({
   selector: 'cs-loader',
-  template: '<mat-spinner class="spinner" [diameter]="50" [strokeWidth]="5"></mat-spinner>',
+  template: `
+    <div class="container">
+      <mat-spinner class="spinner" [diameter]="50" [strokeWidth]="5"></mat-spinner>
+    </div>
+  `,
   styles: [
     `
       cs-loader {
@@ -12,7 +16,11 @@ import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/
       cs-loader .spinner {
         width: 40px;
         height: 40px;
-        margin: 20px auto;
+        margin: 0 auto;
+      }
+
+      cs-loader .container {
+        padding: 20px 0;
       }
     `,
   ],

src/app/shared/components/no-results/no-results.component.scss

@@ -1,4 +1,4 @@
 .no-results {
-  margin: 16px;
+  padding: 16px;
   font-size: 15px;
 }

src/app/vm-logs/containers/vm-logs.container.ts

@@ -5,13 +5,15 @@ import * as fromVmLogsAutoUpdate from '../redux/vm-logs-auto-update.reducers';
 import * as fromVmLogsVm from '../redux/vm-logs-vm.reducers';
 import * as vmLogsActions from '../redux/vm-logs.actions';
 import { debounceTime } from 'rxjs/internal/operators';
+import * as fromVmLogs from '../redux/vm-logs.reducers';
 
 @Component({
   selector: 'cs-vm-logs-container',
   template: `
     <cs-vm-logs
       [isAutoUpdateEnabled]="isAutoUpdateEnabled$ | async"
       [selectedVmId]="selectedVmId$ | async"
+      [newestFirst]="newestFirst$ | async"
       (autoUpdateStarted)="onAutoUpdate()"
       (autoUpdateStopped)="onAutoUpdateStop()"
     ></cs-vm-logs>
@@ -25,6 +27,10 @@ export class VmLogsContainerComponent {
     select(fromVmLogsVm.filterSelectedVmId),
     debounceTime(0),
   );
+  readonly newestFirst$ = this.store.pipe(
+    select(fromVmLogs.filterNewestFirst),
+    debounceTime(0),
+  );
 
   constructor(private store: Store<State>) {}
 

src/app/vm-logs/vm-logs/vm-logs.component.html

@@ -1,26 +1,28 @@
 <!-- todo: refactor scrollContainer -->
 <cs-list
+  class="list-container"
   infiniteScroll
   (scrolled)="onScroll()"
   [infiniteScrollContainer]="scrollContainerSelector"
   [immediateCheck]="true"
   [scrollWindow]="false"
   [creationEnabled]="false"
 >
-  <ng-container cs-panels>
+  <div #filterContainer cs-panels>
     <cs-top-bar>
       <cs-vm-logs-filter-container></cs-vm-logs-filter-container>
     </cs-top-bar>
-  </ng-container>
+  </div>
 
-  <ng-container cs-list>
+  <div class="table-container" #tableContainer cs-list>
     <cs-vm-logs-table-container></cs-vm-logs-table-container>
-  </ng-container>
+  </div>
 </cs-list>
 
 <div
   *ngIf="!isAutoUpdateEnabled"
   class="fab"
+  [style.top.px]="fabPosition$ | async"
   [matTooltip]="'LOGS_PAGE.FAB.FOLLOW_LOG' | translate"
   [matTooltipPosition]="'left'"
 >
@@ -29,13 +31,21 @@
     [disabled]="!selectedVmId"
     (click)="autoUpdateStarted.emit()"
   >
-    <mat-icon class="mdi-format-vertical-align-bottom"></mat-icon>
+    <mat-icon
+      *ngIf="newestFirst"
+      class="mdi-format-vertical-align-top"
+    ></mat-icon>
+    <mat-icon
+      *ngIf="!newestFirst"
+      class="mdi-format-vertical-align-bottom"
+    ></mat-icon>
   </button>
 </div>
 
 <div
   *ngIf="isAutoUpdateEnabled"
   class="fab"
+  [style.top.px]="fabPosition$ | async"
   [matTooltip]="'LOGS_PAGE.FAB.STOP_FOLLOWING' | translate"
   [matTooltipPosition]="'left'"
 >

src/app/vm-logs/vm-logs/vm-logs.component.scss

@@ -18,12 +18,3 @@
 /deep/ .mat-fab .mat-button-wrapper {
   padding: 14px 0 !important;
 }
-
-/deep/ .mat-mini-fab {
-  width: 36px;
-  height: 36px;
-}
-
-/deep/ .mat-mini-fab .mat-button-wrapper {
-  padding: 7px 0 !important;
-}

src/app/vm-logs/vm-logs/vm-logs.component.ts

@@ -1,4 +1,16 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {
+  AfterViewInit,
+  Component,
+  ElementRef,
+  EventEmitter,
+  Input,
+  Output,
+  ViewChild,
+  OnChanges,
+} from '@angular/core';
+import { BehaviorSubject, fromEvent, merge } from 'rxjs';
+import { map, filter } from 'rxjs/operators';
+import { default as ResizeObserver } from 'resize-observer-polyfill';
 import { Store } from '@ngrx/store';
 import { State } from '../../root-store';
 import * as vmLogsActions from '../redux/vm-logs.actions';
@@ -9,20 +21,55 @@ import { listScrollContainerId } from '../../shared/components';
   templateUrl: 'vm-logs.component.html',
   styleUrls: ['vm-logs.component.scss'],
 })
-export class VmLogsComponent {
+export class VmLogsComponent implements AfterViewInit, OnChanges {
   readonly scrollContainerSelector = `#${listScrollContainerId}`;
 
+  public updateFabPosition = new BehaviorSubject<void>(null);
+  public resizeObserver = new ResizeObserver(() => {
+    this.updateFabPosition.next(null);
+  });
+  public fabPosition$ = merge(
+    this.updateFabPosition.asObservable(),
+    fromEvent(document, 'scroll', {
+      capture: true,
+    }).pipe(filter(() => this.newestFirst)),
+  ).pipe(
+    map(() => {
+      if (!this.newestFirst) {
+        return null;
+      }
+
+      const rect = this.tableContainer.nativeElement.getBoundingClientRect();
+      const top = rect.top > 0 ? rect.top : 0;
+      return top + 32;
+    }),
+  );
+
   @Input()
   public isAutoUpdateEnabled: boolean;
   @Input()
   public selectedVmId: string;
+  @Input()
+  public newestFirst: boolean;
   @Output()
   public autoUpdateStarted = new EventEmitter<void>();
   @Output()
   public autoUpdateStopped = new EventEmitter<void>();
+  @ViewChild('tableContainer')
+  private tableContainer: ElementRef<HTMLDivElement>;
+  @ViewChild('filterContainer')
+  private filterContainer: ElementRef<HTMLDivElement>;
 
   constructor(private store: Store<State>) {}
 
+  public ngAfterViewInit() {
+    this.resizeObserver.observe(this.filterContainer.nativeElement);
+  }
+
+  public ngOnChanges() {
+    this.updateFabPosition.next(null);
+  }
+
   public onScroll() {
     this.store.dispatch(new vmLogsActions.ScrollVmLogs());
   }

yarn.lock

@@ -6809,6 +6809,11 @@ requires-port@^1.0.0:
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
   integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+  integrity sha512-M2AelyJDVR/oLnToJLtuDJRBBWUGUvvGigj1411hXhAdyFWqMaqHp7TixW3FpiLuVaikIcR1QL+zqoJoZlOgpg==
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"