Merge pull request #141 from Hydrospheredata/feature/build_info

added build Infromation

src/modules/core/components/_index.ts

@@ -1,2 +1,3 @@
 export * from './navbar/navbar.component';
 export * from './page-not-found/page-not-found.component';
+export * from './dialogs';

src/modules/core/components/dialogs/build-information-dialog.component.html

@@ -0,0 +1,25 @@
+<div class='build-info'>
+    <div class='build-info__title'>Build information</div>
+    <div class='service-info build-info__service-info' *ngFor='let serviceInfo of buildInfo$ | async'>
+        <div class='service-info__title'>
+            {{ serviceInfo.name }}
+        </div>
+        <div class='service-info__container'>
+            <div class='service-info__keys'>
+                <div class='service-info__key' *ngFor='let item of serviceInfo | keyvalue'>
+                        <span >{{item.key}}</span>
+                </div>
+            </div>
+            <div class='service-info__values'>
+                <div class='service-info__value' *ngFor='let item of serviceInfo | keyvalue'>
+                    <ng-container *ngIf='item.value; else na'>
+                        <span >{{item.value}}</span>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
+
+<ng-template #na>n/a</ng-template>

src/modules/core/components/dialogs/build-information-dialog.component.scss

@@ -0,0 +1,37 @@
+.build-info {
+    &__title {
+        text-transform: uppercase;
+        text-align: center;
+        font-size: 18px;
+        letter-spacing: 1px;
+        color: #35495a;
+        margin-bottom: 24px
+    }
+
+    &__service-info {
+        margin-bottom: 24px;
+    }
+}
+
+.service-info {
+    &__title {
+        text-transform: uppercase;
+        letter-spacing: 1px;
+        color: #213f48;
+        font-weight: 700;
+        margin-bottom: 8px
+    }
+    &__container {
+        display: flex;
+    }
+    &__key, &__value {
+        min-height: 24px;
+    }
+    &__key {
+        color: #787d82;
+        font-size: 12px;
+        letter-spacing: 1px;
+        text-align: right;
+        padding-right: 4px;
+    }
+}

src/modules/core/components/dialogs/build-information-dialog.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { BuildInformationService } from '@core/services/build-information.service';
+import { Observable } from 'rxjs';
+
+@Component({
+    templateUrl: './build-information-dialog.component.html',
+    styleUrls: ['./build-information-dialog.component.scss'],
+})
+export class BuildInformationDialogComponent {
+    buildInfo$: Observable<any>;
+    constructor(
+        buildInfo: BuildInformationService
+    ) {
+        this.buildInfo$ = buildInfo.getBuildInformation();
+     }
+}

src/modules/core/components/dialogs/index.ts

@@ -0,0 +1 @@
+export * from './build-information-dialog.component';

src/modules/core/components/navbar/navbar.component.html

@@ -12,7 +12,12 @@
             <span class="services-link-label">Applications</span>
         </a>
     </nav>
-    <a class="hydro-navbar__documentation" target="_blank" rel="noopener noreferrer" href="https://hydrosphere.io/serving-docs/index.html">
-        Documentation
-    </a>
+    <div class='hydro-navbar__support-info'>
+        <a class="hydro-navbar__documentation" target="_blank" rel="noopener noreferrer" href="https://hydrosphere.io/serving-docs/index.html">
+            documentation
+        </a>
+        <a class="hydro-navbar__build-info" hsBuildInformation>
+            build information
+        </a>
+    </div>
 </header>

src/modules/core/components/navbar/navbar.component.scss

@@ -57,13 +57,22 @@ $active-color: white;
     }
   }
 
-  &__documentation {
+  &__support-info {
+    position: absolute;
+    right: 24px;
+  }
+  &__documentation, &__build-info {
     cursor: pointer;
     color: rgba(255, 255, 255, 0.5);
     transition: color .3s ease;
-    position: absolute;
-    right: 24px;
     text-decoration: none;
+    text-transform: uppercase;
+    font-weight: 100;
+    font-size: 10px;
+    padding-left: 12px;
+    letter-spacing: 1px;
+    color: #b6b9bfe6;
+
     &:hover {
       color: rgba(255, 255, 255, .8);
     }

src/modules/core/core.module.ts

@@ -40,13 +40,18 @@ import {
 import { StoreModule } from '@ngrx/store';
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 
+import { BuildInformationDialogComponent } from '@core/components/_index';
 import { reducers, CustomRouterStateSerializer } from '@core/reducers';
 import { MetricsService } from '@core/services/metrics/metrics.service';
 import { ReqstoreService } from '@core/services/reqstore.service';
 import { RouterStateSerializer, StoreRouterConnectingModule } from '@ngrx/router-store';
 import { SharedModule } from '@shared/shared.module';
+import { BuildInformationService } from '@core/services/build-information.service';
 
 @NgModule({
+    entryComponents: [
+        BuildInformationDialogComponent,
+    ],
     imports: [
         CommonModule,
         RouterModule,
@@ -88,6 +93,7 @@ import { SharedModule } from '@shared/shared.module';
     declarations: [
         NavbarComponent,
         PageNotFoundComponent,
+        BuildInformationDialogComponent,
     ],
     providers: [
         ModelBuilder,
@@ -104,6 +110,7 @@ import { SharedModule } from '@shared/shared.module';
         { provide: RouterStateSerializer, useClass: CustomRouterStateSerializer },
         SvgSpriteService,
         ReqstoreService,
+        BuildInformationService,
     ],
 })
 export class CoreModule { }

src/modules/core/services/build-information.service.ts

@@ -0,0 +1,21 @@
+import { Injectable } from '@angular/core';
+import { HttpService } from '@core/services/http';
+import { Observable } from 'rxjs';
+import { combineLatest } from 'rxjs';
+
+@Injectable()
+export class BuildInformationService {
+    private buildInfoApi = '/api/buildinfo';
+    private gatewayInfoApi = '/gateway/buildinfo';
+
+    constructor(
+       private http: HttpService
+    ) {}
+
+    getBuildInformation(): Observable<any> {
+        return combineLatest(
+            this.http.get(this.buildInfoApi),
+            this.http.get(this.gatewayInfoApi)
+        );
+    }
+}

src/modules/shared/directives/_index.ts

@@ -1,2 +1,3 @@
 export * from './model-version-status.directive';
 export * from './copy-to-buffer.directive';
+export * from './build-information.directive';

src/modules/shared/directives/build-information.directive.ts

@@ -0,0 +1,23 @@
+import { Directive, HostListener } from '@angular/core';
+import { BuildInformationDialogComponent } from '@core/_index';
+import { DialogService } from '@dialog/dialog.service';
+
+@Directive({
+    selector: '[hsBuildInformation]',
+})
+export class BuildInformationDirective {
+    constructor(
+        private dialog: DialogService
+    ) {
+    }
+
+     @HostListener('click')
+     onclick() {
+         this.dialog.createDialog({
+             component: BuildInformationDialogComponent,
+             styles: {
+                 width: '600px',
+             },
+         });
+     }
+}

src/modules/shared/shared.module.ts

@@ -47,7 +47,8 @@ import {
 // Directives
 import {
     ModelVersionStatusDirective,
-    CopyToBufferDirective
+    CopyToBufferDirective,
+    BuildInformationDirective,
 } from './directives/_index';
 
 const PIPES = [
@@ -86,6 +87,7 @@ const COMPONENTS = [
 const DIRECTIVES = [
     ModelVersionStatusDirective,
     CopyToBufferDirective,
+    BuildInformationDirective,
 ];
 
 @NgModule({