Merge pull request #2 from allegroai/v0.16

version 0.16

Author: clearml-bot

src/app/app.component.html

@@ -1,17 +1,17 @@
-<sm-survey *ngIf="!demo && (showSurvey$ | async) && !showNotification" (dismiss)="dismissSurvey()"></sm-survey>
-<sm-update-notifier [availableUpdates]="(updatesAvailable$ | async)"
-  [dismissedVersion]="serverUpdatesService.lastDismissedVersion"
-  (versionDismissed)="versionDismissed($event)"
-  (notifierActive)="notifierActive($event)">
+<sm-survey *ngIf="!demo && !guestUser && (showSurvey$ | async) && !update?.active" (dismiss)="dismissSurvey()"></sm-survey>
+<sm-update-notifier #update
+                    [availableUpdates]="(updatesAvailable$ | async)"
+                    [currentUser]="currentUser"
+                    [dismissedVersion]="serverUpdatesService.lastDismissedVersion"
+                    (versionDismissed)="versionDismissed($event)"
+                    (notifierActive)="notifierActive($event)">
 </sm-update-notifier>
-<div>
-  <sm-color-picker-wrapper id="color-picker-outlet"></sm-color-picker-wrapper>
-  <sm-server-notification-dialog-container></sm-server-notification-dialog-container>
-  <sm-spinner></sm-spinner>
-  <sm-side-nav></sm-side-nav>
-  <div class="app-container" [class.notifier-open]="showNotification || (showSurvey$ | async)">
-    <sm-header [isDashboard]="isDashboardContext"></sm-header>
-    <router-outlet class="main-router"></router-outlet>
-  </div>
+<sm-color-picker-wrapper id="color-picker-outlet"></sm-color-picker-wrapper>
+<sm-server-notification-dialog-container></sm-server-notification-dialog-container>
+<sm-spinner></sm-spinner>
+<sm-side-nav></sm-side-nav>
+<div class="app-container" [class.notifier-open]="update?.active || ((showSurvey$ | async) && !demo && !guestUser)">
+  <sm-header [isDashboard]="isDashboardContext" [isLogin]="isLoginContext"></sm-header>
+  <router-outlet class="main-router"></router-outlet>
 </div>
 <notifier-container></notifier-container>

src/app/app.component.scss

@@ -4,29 +4,33 @@
 $notifier-height: 30px;
 
 .app-container {
+  height: 100%;
   margin-left: $side-bar-close-width;
+
+  &.notifier-open {
+    height: calc(100% - #{$notifier-height});
+    .main-router + * {
+      height: calc(100% - #{$top-bar-height});
+    }
+  }
 }
 
 .main-router + * {
   display: block;
-  height: calc(100vh - #{$top-bar-height});
+  height: calc(100% - #{$top-bar-height});
 }
 
-.notifier-open {
-  .main-router + * {
-    height: calc(100vh - #{$top-bar-height + $notifier-height});
-  }
-}
 
 sm-side-nav {
+  display: block;
+  position: fixed;
+  top: 0;
   z-index: 999;
+  height: 100%;
 }
 
 #color-picker-outlet {
   position: absolute;
   visibility: hidden;
 }
 
-
-
-

src/app/app.component.ts

@@ -1,6 +1,6 @@
 import {ApiUsersService} from './business-logic/api-services/users.service';
 import {selectCurrentUser} from './webapp-common/core/reducers/users-reducer';
-import {Component, OnDestroy, OnInit, ViewEncapsulation, HostListener} from '@angular/core';
+import {Component, OnDestroy, OnInit, ViewEncapsulation, HostListener, Renderer2} from '@angular/core';
 import {ActivatedRoute, NavigationEnd, Router, Params} from '@angular/router';
 import {Title} from '@angular/platform-browser';
 import {selectLoggedOut} from './webapp-common/core/reducers/view-reducer';
@@ -11,12 +11,17 @@ import {ApiProjectsService} from './business-logic/api-services/projects.service
 import {Project} from './business-logic/model/projects/project';
 import {GetAllProjects, SetSelectedProjectId, UpdateProject} from './webapp-common/core/actions/projects.actions';
 import {selectSelectedProject} from './webapp-common/core/reducers/projects.reducer';
-import {selectS3BucketCredentialsBucketCredentials, selectS3PopUpDetails, selectShowLocalFilesPopUp, selectShowS3PopUp} from './webapp-common/core/reducers/common-auth-reducer';
+import {
+  selectS3BucketCredentialsBucketCredentials,
+  selectS3PopUpDetails,
+  selectShowLocalFilesPopUp,
+  selectShowS3PopUp
+} from './webapp-common/core/reducers/common-auth-reducer';
 import {MatDialog, MatDialogRef} from '@angular/material/dialog';
 import {S3AccessResolverComponent} from './webapp-common/layout/s3-access-resolver/s3-access-resolver.component';
 import {cancelS3Credentials, getTutorialBucketCredentials} from './webapp-common/core/actions/common-auth.actions';
 import {FetchCurrentUser} from './webapp-common/core/actions/users.actions';
-import {filter, map, take, withLatestFrom} from 'rxjs/operators';
+import {distinct, distinctUntilChanged, filter, map, take, withLatestFrom} from 'rxjs/operators';
 import * as routerActions from './webapp-common/core/actions/router.actions';
 import {combineLatest, Observable, Subscription} from 'rxjs';
 import {selectBreadcrumbsStrings} from './webapp-common/layout/layout.reducer';
@@ -25,17 +30,19 @@ import {formatStaticCrumb} from './webapp-common/layout/breadcrumbs/breadcrumbs-
 import {ServerUpdatesService} from './webapp-common/shared/services/server-updates.service';
 import {selectAvailableUpdates, selectShowSurvey} from './core/reducers/view-reducer';
 import {UPDATE_SERVER_PATH} from './app.constants';
-import {VisibilityChanged} from './webapp-common/core/actions/layout.actions';
+import {setScaleFactor, VisibilityChanged} from './webapp-common/core/actions/layout.actions';
 import {UiUpdatesService} from './webapp-common/shared/services/ui-updates.service';
 import {UsageStatsService} from './core/Services/usage-stats.service';
 import {UiUpdateDialogComponent} from './webapp-common/layout/ui-update-dialog/ui-update-dialog.component';
 import {dismissSurvey} from './core/Actions/layout.actions';
 import {environment} from '../environments/environment';
+import {getScaleFactor} from './webapp-common/shared/utils/shared-utils';
+import {User} from './business-logic/model/users/user';
 
 @Component({
-  selector     : 'sm-root',
-  templateUrl  : 'app.component.html',
-  styleUrls    : ['app.component.scss'],
+  selector: 'sm-root',
+  templateUrl: 'app.component.html',
+  styleUrls: ['app.component.scss'],
   encapsulation: ViewEncapsulation.None
 })
 export class AppComponent implements OnInit, OnDestroy {
@@ -57,12 +64,14 @@ export class AppComponent implements OnInit, OnDestroy {
   public showNotification: boolean = true;
   public showSurvey$: Observable<boolean>;
   public demo = environment.demo;
+  public isLoginContext: boolean;
+  public currentUser: User;
 
   @HostListener('document:visibilitychange') onVisibilityChange() {
     this.store.dispatch(new VisibilityChanged(!document.hidden));
   }
 
-  constructor (
+  constructor(
     private router: Router,
     private route: ActivatedRoute,
     private titleService: Title,
@@ -72,15 +81,16 @@ export class AppComponent implements OnInit, OnDestroy {
     public serverUpdatesService: ServerUpdatesService,
     private uiUpdatesService: UiUpdatesService,
     private matDialog: MatDialog,
-    private userStats: UsageStatsService
+    private userStats: UsageStatsService,
+    private renderer: Renderer2
   ) {
-    this.showS3Popup$            = this.store.select(selectShowS3PopUp);
-    this.showLocalFilePopup$     = this.store.pipe(select(selectShowLocalFilesPopUp));
-    this.loggedOut$              = store.select(selectLoggedOut);
-    this.selectedProject$        = this.store.select(selectSelectedProject);
-    this.updatesAvailable$       = this.store.select(selectAvailableUpdates);
-    this.showSurvey$       = this.store.select(selectShowSurvey);
-    this.selectedCurrentUser$    = this.store.select(selectCurrentUser);
+    this.showS3Popup$ = this.store.select(selectShowS3PopUp);
+    this.showLocalFilePopup$ = this.store.pipe(select(selectShowLocalFilesPopUp));
+    this.loggedOut$ = store.select(selectLoggedOut);
+    this.selectedProject$ = this.store.select(selectSelectedProject);
+    this.updatesAvailable$ = this.store.select(selectAvailableUpdates);
+    this.showSurvey$ = this.store.select(selectShowSurvey);
+    this.selectedCurrentUser$ = this.store.select(selectCurrentUser);
     this.selectedProjectFromUrl$ = this.store.select(selectRouterParams)
       .pipe(
         filter((params: Params) => !!params),
@@ -100,8 +110,11 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store.dispatch(new FetchCurrentUser());
     this.selectedCurrentUser$.pipe(
       filter( user => !!user),
-      take(1))
-      .subscribe(() => this.serverUpdatesService.checkForUpdates(UPDATE_SERVER_PATH));
+      distinctUntilChanged())
+      .subscribe((user) => {
+        this.currentUser = user;
+        this.serverUpdatesService.checkForUpdates(UPDATE_SERVER_PATH);
+      } );
 
     this.selectedProjectFromUrl$.subscribe((projectId: string) => {
       this.store.dispatch(new SetSelectedProjectId(projectId));
@@ -116,7 +129,7 @@ export class AppComponent implements OnInit, OnDestroy {
         )
           .subscribe(([data, bucketCredentials, popupDetails]) => {
             if (!(data && data.success)) {
-              const emptyCredentials          = bucketCredentials.find((cred => cred.Bucket === popupDetails.credentials.Bucket)) === undefined;
+              const emptyCredentials = bucketCredentials.find((cred => cred.Bucket === popupDetails.credentials.Bucket)) === undefined;
               const dontAskAgainForBucketName = emptyCredentials ? '' : popupDetails.credentials.Bucket + popupDetails.credentials.Endpoint;
               this.store.dispatch(cancelS3Credentials({dontAskAgainForBucketName}));
             }
@@ -126,9 +139,10 @@ export class AppComponent implements OnInit, OnDestroy {
 
     this.urlSubscription = combineLatest([this.store.select(selectRouterUrl), this.store.select(selectRouterParams)])
       .subscribe(([url, params]) => {
-        this.projectId          = get('projectId', params);
+        this.projectId = get('projectId', params);
         this.isDashboardContext = url && url.includes('dashboard');
-        this.isWorkersContext   = url && url.includes('workers-and-queues');
+        this.isLoginContext = url && url.includes('login');
+        this.isWorkersContext = url && url.includes('workers-and-queues');
         if (this.projectId) {
           try { // TODO: refactor to a better solution after all navbar are declared...
             this.activeFeature = url.split(this.projectId)[1].split('/')[1];
@@ -147,13 +161,26 @@ export class AppComponent implements OnInit, OnDestroy {
         this.updateTitle();
       }
     );
+    if (window.localStorage.getItem('disableHidpi') !== 'true') {
+      this.setScale();
+    }
 
     // TODO: move to somewhere else...
     this.store.dispatch(new GetAllProjects());
     this.store.dispatch(getTutorialBucketCredentials());
     this.uiUpdatesService.checkForUiUpdate();
   }
 
+  private setScale() {
+    const dimensionRatio = getScaleFactor();
+    this.store.dispatch(setScaleFactor({scale: dimensionRatio}));
+    const scale = 100 / dimensionRatio;
+    this.renderer.setStyle(document.body, 'transform', `scale(${scale})`);
+    this.renderer.setStyle(document.body, 'transform-origin', '0 0');
+    this.renderer.setStyle(document.body, 'height', `${dimensionRatio}vh`);
+    this.renderer.setStyle(document.body, 'width', `${dimensionRatio}vw`);
+  }
+
   nameChanged(name) {
     this.store.dispatch(new UpdateProject({id: this.projectId, changes: {name: name}}));
   }
@@ -172,13 +199,13 @@ export class AppComponent implements OnInit, OnDestroy {
   }
 
   updateTitle() {
-    let route       = this.route.snapshot.firstChild;
+    let route = this.route.snapshot.firstChild;
     let routeConfig = [];
 
     while (route) {
-      const path  = route.routeConfig.path.split('/').filter((item) => !!item);
+      const path = route.routeConfig.path.split('/').filter((item) => !!item);
       routeConfig = routeConfig.concat(path);
-      route       = route.firstChild;
+      route = route.firstChild;
     }
     const crumbs = routeConfig
       .reduce((acc, config) => {
@@ -201,5 +228,9 @@ export class AppComponent implements OnInit, OnDestroy {
     this.store.dispatch(dismissSurvey());
 
   }
+
+  get guestUser(): boolean {
+    return !this.currentUser || this.currentUser?.role === 'guest';
+  }
 }
 

src/app/app.constants.ts

@@ -256,7 +256,7 @@ export const NAVIGATION_ACTIONS = {
 
 
 
-export const ENVIRONMENT = {API_VERSION: '/v2.8'};
+export const ENVIRONMENT = {API_VERSION: '/v2.9'};
 const url                = window.location.origin;
 let apiBaseUrl: string;
 if (environment.apiBaseUrl) {

src/app/app.module.ts

@@ -16,39 +16,42 @@ import {ApiUsersService} from './business-logic/api-services/users.service';
 import {loadUserAndPreferences} from './webapp-common/user-preferences';
 import {AdminModule} from './webapp-common/admin/admin.module';
 import {AngularSplitModule} from 'angular-split';
-import {NotifierModule} from 'angular-notifier';
+import {NotifierModule} from './webapp-common/angular-notifier';
 import {LayoutModule} from './layout/layout.module';
 import {ColorHashService} from './webapp-common/shared/services/color-hash/color-hash.service';
-import {LoginModule} from './webapp-common/login/login.module';
 import {LoginService} from './webapp-common/shared/services/login.service';
 import {Store} from '@ngrx/store';
-import {TitleCasePipe} from '@angular/common';
+import {SharedModule} from './shared/shared.module';
 
 @NgModule({
   declarations   : [AppComponent],
-  imports        : [
+  imports: [
     FormsModule,
     BrowserAnimationsModule,
     BrowserModule,
     SMCoreModule,
     BusinessLogicModule,
     SMSharedModule,
-    LoginModule,
     AngularSplitModule.forRoot(),
-    RouterModule.forRoot(routes, {preloadingStrategy: PreloadAllModules, scrollPositionRestoration: 'top', onSameUrlNavigation: 'reload'}),
+    RouterModule.forRoot(routes, {
+      preloadingStrategy: PreloadAllModules,
+      scrollPositionRestoration: 'top',
+      onSameUrlNavigation: 'reload'
+    }),
     AdminModule,
     NotifierModule.withConfig({
-      theme    : 'material',
+      theme: 'material',
       behaviour: {
         autoHide: {default: 5000, error: false}
       },
-      position : {
-        vertical  : {position: 'top', distance: 12, gap: 10},
+      position: {
+        vertical: {position: 'top', distance: 12, gap: 10},
         horizontal: {position: 'right', distance: 12}
       }
     }),
     CommonLayoutModule,
     LayoutModule,
+    SharedModule,
   ],
   providers      : [
     {
@@ -65,19 +68,4 @@ import {TitleCasePipe} from '@angular/common';
   exports        : []
 })
 
-export class AppModule {
-
-  constructor() {
-
-    // store.select(selectRouter)
-    // // .filter(state => !state.skipNextNavigation)
-    //   .subscribe(state => {
-    //     this.store.dispatch(new ResetDontShowAgainForBucketEndpoint());
-    //     (!state.params || !state.url) ?
-    //       this.router.navigateByUrl(state.url, { queryParams: { unGuard: state.unGuard } }) :
-    //       this.router.navigate([state.url, state.params], { queryParams: { unGuard: state.unGuard } });
-    //   });
-
-  }
-
-}
+export class AppModule {}

src/app/business-logic/api-services/auth.service.ts

@@ -2,7 +2,7 @@
  * auth
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.

src/app/business-logic/api-services/events.service.ts

@@ -2,7 +2,7 @@
  * events
  * No description provided (generated by Openapi Generator https://github.com/openapitools/openapi-generator)
  *
- * OpenAPI spec version: 2.7
+ * OpenAPI spec version: 2.9
  *
  *
  * NOTE: This class is auto generated by the swagger code generator program.
@@ -540,7 +540,7 @@ export class ApiEventsService {
 
     /**
      * 
-     * Get all \'log\' events for this task
+     * Get \'log\' events for this task
      * @param request request body
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.