add datePipe to providers

src/app/shared/navbar/navbar.component.css

@@ -160,3 +160,8 @@
   text-decoration: none;
   cursor: pointer;
 }
+
+.navbar-logout {
+  margin-top: 15px;
+  margin-right: 10px;
+}

src/app/shared/navbar/navbar.component.html

@@ -19,6 +19,10 @@
                         [routerLink]="['/instances']">{{ 'NAVBAR.INSTANCES' | translate }}</a></li>
             </ul>
             <ul *ngIf="authService.isLogged()" class="nav navbar-nav navbar-right">
+                <li *ngIf="showClock" class="">
+                    <div class="navbar-logout">{{'NAVBAR.EXPIRED_TIME' | translate}}: {{time}}</div>
+                </li>
+                <li *ngIf="showClock" class="divider-vertical"></li>
                 <li *ngIf="checkUserRole()" class="drop-domain">
                     <nmaas-domain-filter class="drop-domain"></nmaas-domain-filter>
                 </li>

src/app/shared/navbar/navbar.component.ts

@@ -6,6 +6,7 @@ import {AuthService} from '../../auth/auth.service';
 import {DomainService} from '../../service';
 import {InternationalizationService} from '../../service/internationalization.service';
 import {ModalNotificationSendComponent} from '../modal/modal-notification-send/modal-notification-send.component';
+import {DatePipe} from '@angular/common';
 
 @Component({
     selector: 'app-navbar',
@@ -21,9 +22,14 @@ export class NavbarComponent implements OnInit, OnChanges {
     public refresh: Subscription;
     public isServiceAvailable: boolean;
 
+    public time: string;
+    private intervalId: any;
+    public showClock = false;
+
     constructor(public router: Router,
                 public authService: AuthService,
                 private translate: TranslateService,
+                private datePipe: DatePipe,
                 private languageService: InternationalizationService,
                 private domainService: DomainService) {
     }
@@ -52,6 +58,14 @@ export class NavbarComponent implements OnInit, OnChanges {
                 });
             }
         }
+        this.intervalId = setInterval(() => {
+            const expiredTimeText: string = localStorage.getItem('_expiredTime')
+            if (parseInt(expiredTimeText, 10) > Date.now()) {
+                this.time = this.datePipe.transform(new Date(parseInt(expiredTimeText, 10) - Date.now()), 'mm:ss')
+                console.debug('Autologout in', this.time);
+            }
+            this.showClock = parseInt(expiredTimeText, 10) - Date.now() < 180000 && parseInt(expiredTimeText, 10) - Date.now() >= 0;
+        }, 1000);
     }
 
     ngOnChanges(changes: SimpleChanges): void {

src/app/shared/shared.module.ts

@@ -2,7 +2,7 @@ import {DefaultLogo} from '../directive/defaultlogo.directive';
 import {RolesDirective} from '../directive/roles.directive';
 import {NgModule} from '@angular/core';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {CommonModule} from '@angular/common';
+import {CommonModule, DatePipe} from '@angular/common';
 
 import {CommentsComponent} from './comments/index';
 import {FooterComponent} from './footer/index';
@@ -119,6 +119,7 @@ import {TooltipModule} from 'primeng/tooltip';
         UserDataService,
         NotificationService,
         AppConfigService,
+        DatePipe,
         {
             provide: RECAPTCHA_V3_SITE_KEY,
             useFactory: function (appConfigService: AppConfigService) {