show commit version under info popup; fix #SNRGY-2829

.github/workflows/dev.yml

@@ -33,6 +33,8 @@ jobs:
           context: .
           file: ./Dockerfile
           platforms: linux/amd64
+          build-args: |
+            COMMIT=${{ github.sha }}
           push: true
           tags: |
             smartenergyplatform/web-ui:dev

.github/workflows/prod.yml

@@ -33,6 +33,8 @@ jobs:
           context: .
           file: ./Dockerfile
           platforms: linux/amd64
+          build-args: |
+            COMMIT=${{ github.sha }}
           push: true
           tags: |
             smartenergyplatform/web-ui:prod

Dockerfile

@@ -16,6 +16,8 @@ RUN node --max_old_space_size=8192 $(npm bin)/ng build --configuration productio
 
 ## STAGE 2: Run nginx to serve application ##
 FROM nginx
+ARG COMMIT="no commit provided"
+ENV COMMIT=${COMMIT}
 RUN apt-get update && apt-get install -y curl
 ADD build-env.sh /
 COPY --from=builder /tmp/workspace/dist/senergy-web-ui/ /usr/share/nginx/html/

src/app/core/components/sidenav/sidenav.component.ts

@@ -23,6 +23,7 @@ import { SidenavService } from './shared/sidenav.service';
 import { SidenavSectionModel } from './shared/sidenav-section.model';
 import { ResponsiveService } from '../../services/responsive.service';
 import { fadeInAnimation } from '../../../animations/fade-in.animation';
+import { environment } from 'src/environments/environment';
 
 @Component({
     selector: 'senergy-sidenav',

src/app/core/components/toolbar/toolbar.component.html

@@ -43,6 +43,11 @@
             Settings
         </button>
         <mat-divider></mat-divider>
+        <button mat-menu-item (click)="info()">
+            <mat-icon>info</mat-icon>
+            Info
+        </button>
+        <mat-divider></mat-divider>
         <button mat-menu-item (click)="logout()">
             <mat-icon>power_settings_new</mat-icon>
             Logout

src/app/core/components/toolbar/toolbar.component.ts

@@ -23,6 +23,7 @@ import { SettingsDialogService } from '../../../modules/settings/shared/settings
 import { NotificationService } from './notification/shared/notification.service';
 import { NotificationModel } from './notification/shared/notification.model';
 import { ThemingService } from '../../services/theming.service';
+import { InfoService } from 'src/app/modules/info/shared/info.service';
 
 @Component({
     selector: 'senergy-toolbar',
@@ -45,6 +46,7 @@ export class ToolbarComponent implements OnInit {
         private settingsDialogService: SettingsDialogService,
         private themingService: ThemingService,
         private notificationService: NotificationService,
+        private infoService: InfoService
     ) {}
 
     ngOnInit() {
@@ -80,6 +82,10 @@ export class ToolbarComponent implements OnInit {
         this.settingsDialogService.openSettingsDialog();
     }
 
+    info(): void {
+        this.infoService.openInfoDialog();
+    }
+
     private initUser() {
         this.authorizationService.getUserName().then((userName) => (this.userName = userName));
     }

src/app/modules/info/dialogs/info/info.component.css

@@ -0,0 +1,7 @@
+#container {
+    min-width: 500px;
+}
+
+mat-form-field {
+    width: 100%
+}

src/app/modules/info/dialogs/info/info.component.html

@@ -0,0 +1,14 @@
+<div id="container">
+    <h2 mat-dialog-title>Info</h2>
+
+    <mat-dialog-content>
+        <mat-form-field class="full-width" color="accent">
+            <mat-label>Version</mat-label>
+            <input type="text" matInput placeholder="Version" [value]="commit" readonly>
+        </mat-form-field>
+    </mat-dialog-content>
+
+    <mat-dialog-actions fxLayoutAlign="end center">
+        <button mat-raised-button color="primary" (click)="close()">Cancel</button>
+    </mat-dialog-actions>
+</div>

src/app/modules/info/dialogs/info/info.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InfoComponent } from './info.component';
+
+describe('InfoComponent', () => {
+  let component: InfoComponent;
+  let fixture: ComponentFixture<InfoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ InfoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(InfoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/modules/info/dialogs/info/info.component.ts

@@ -0,0 +1,22 @@
+import { Component } from '@angular/core';
+import { MatDialogRef } from '@angular/material/dialog';
+import { environment } from 'src/environments/environment';
+
+@Component({
+  selector: 'app-info',
+  templateUrl: './info.component.html',
+  styleUrls: ['./info.component.css']
+})
+export class InfoDialogComponent {
+  commit: string = ""
+
+  constructor(
+    private dialogRef: MatDialogRef<InfoDialogComponent>,
+  ) {
+    this.commit = environment.commit
+  }
+
+  close(): void {
+    this.dialogRef.close();
+  }
+}

src/app/modules/info/info.module.ts

@@ -0,0 +1,26 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { InfoDialogComponent } from './dialogs/info/info.component';
+import { MatDialogModule } from '@angular/material/dialog';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FormsModule } from '@angular/forms';
+import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { FlexLayoutModule } from '@angular/flex-layout';
+
+
+
+@NgModule({
+  declarations: [
+    InfoDialogComponent
+  ],
+  imports: [
+    CommonModule,
+    MatDialogModule,
+    MatFormFieldModule,
+    MatInputModule,
+    MatButtonModule,
+    FlexLayoutModule
+  ]
+})
+export class InfoModule { }

src/app/modules/info/shared/info.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { InfoService } from './info.service';
+
+describe('InfoService', () => {
+  let service: InfoService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(InfoService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/modules/info/shared/info.service.ts

@@ -0,0 +1,25 @@
+import { Injectable } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material/dialog';
+import { InfoDialogComponent } from '../dialogs/info/info.component';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class InfoService {
+
+  constructor(
+    private dialog: MatDialog
+  ) { }
+
+  openInfoDialog() {
+    const dialogConfig = new MatDialogConfig();
+    dialogConfig.disableClose = false;
+    // dialogConfig.data = {
+    //     name: name,
+    //     permissions: permissionsIn,
+    // };
+    const editDialogRef = this.dialog.open(InfoDialogComponent, dialogConfig);
+
+    editDialogRef.afterClosed().subscribe(() => {});
+}
+}

src/environments/environment.ts

@@ -29,6 +29,7 @@ export const environment = {
     configUrl: env.configUrl || 'http://localhost',
     theme: env.theme || 'senergy',
     title: env.title || 'SENERGY',
+    commit: env.commit || '',
     /** URLs **/
     processIoUrl: '',
     smartServiceRepoUrl: '',