Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat!: display dsp release number (DEV-420) (#644)
* feat(config)!: new config with dsp release number (DEV-420)

* feat(main): display dsp release number

* refactor(main): new dasch name

* refactor(config): dspconfig as own service definition

* test: bug fix in tests

* style: display release and environment incl. color highlight

* fix(main): add link to release notes on jira

* chore(deps): add js-lib from npm

* test(main): update tests in app-init

* refactor: clean up code

* refactor(main): clean up code
  • Loading branch information
kilchenmann committed Feb 2, 2022
1 parent 13c6f2a commit b6c9f1c
Show file tree
Hide file tree
Showing 19 changed files with 185 additions and 30 deletions.
5 changes: 5 additions & 0 deletions src/app/app-init.service.spec.ts
Expand Up @@ -8,6 +8,7 @@ describe('TestService', () => {
let service: AppInitService;

const config: IConfig = {
dspRelease: '2022.01.01',
apiProtocol: 'http',
apiHost: '0.0.0.0',
apiPort: 3333,
Expand Down Expand Up @@ -74,6 +75,10 @@ describe('TestService', () => {
});

it('should process the fully specified config', async () => {
expect(service.dspConfig.release).toEqual('2022.01.01');
expect(service.dspConfig.environment).toEqual('dev');
expect(service.dspConfig.color).toEqual('accent');
expect(service.dspConfig.production).toEqual(false);
expect(service.dspApiConfig.apiProtocol).toEqual('http');
expect(service.dspApiConfig.apiHost).toEqual('0.0.0.0');
expect(service.dspApiConfig.apiPort).toEqual(3333);
Expand Down
31 changes: 28 additions & 3 deletions src/app/app-init.service.ts
@@ -1,16 +1,23 @@
import { Inject, Injectable } from '@angular/core';
import { KnoraApiConfig } from '@dasch-swiss/dsp-js';
import { DspInstrumentationConfig, DspRollbarConfig, DspDataDogConfig } from './main/declarations/dsp-instrumentation-config';
import { DspIiifConfig } from './main/declarations/dsp-iiif-config';
import { DspAppConfig } from './main/declarations/dsp-app-config';
import { IConfig } from './main/declarations/app-config';
import { APP_CONFIG } from './main/declarations/dsp-api-tokens';
import { DspAppConfig } from './main/declarations/dsp-app-config';
import { DspConfig } from './main/declarations/dsp-config';
import { DspIiifConfig } from './main/declarations/dsp-iiif-config';
import { DspDataDogConfig, DspInstrumentationConfig, DspRollbarConfig } from './main/declarations/dsp-instrumentation-config';

@Injectable({
providedIn: 'root'
})
export class AppInitService {

private _dspConfig: DspConfig;

get dspConfig(): DspConfig {
return this._dspConfig;
}

private _dspApiConfig: KnoraApiConfig;

get dspApiConfig(): KnoraApiConfig {
Expand Down Expand Up @@ -43,6 +50,24 @@ export class AppInitService {
throw new Error('config misses required members: apiProtocol and/or apiHost');
}

const prodMode = (this._config.instrumentation.environment === ('prod' || 'production'));

let color = 'primary';
if (!prodMode) {
if (this._config.instrumentation.environment.includes('staging') || this._config.instrumentation.environment.includes('dev')) {
color = 'accent';
} else if (this._config.instrumentation.environment.includes('test')){
color = 'warn';
}
}

this._dspConfig = new DspConfig(
this._config.dspRelease,
this._config.instrumentation.environment,
prodMode,
color
);

// make input type safe
const apiPort = (typeof this._config.apiPort === 'number' ? this._config.apiPort : null);
const apiPath = (typeof this._config.apiPath === 'string' ? this._config.apiPath : '');
Expand Down
1 change: 1 addition & 0 deletions src/app/main/declarations/app-config.ts
@@ -1,4 +1,5 @@
export interface IConfig {
dspRelease: string;
apiProtocol: 'http' | 'https';
apiHost: string;
apiPort: number;
Expand Down
11 changes: 11 additions & 0 deletions src/app/main/declarations/dsp-config.ts
@@ -0,0 +1,11 @@
/**
* main DSP (DaSCH Service Platform) config
*/
export class DspConfig {
constructor(
public release: string,
public environment: string,
public production: boolean,
public color: string
){ }
}
2 changes: 1 addition & 1 deletion src/app/main/footer/footer.component.html
Expand Up @@ -19,7 +19,7 @@
</p>
</div>
<div class="box contact">
<a mat-button href="https://dasch.swiss" target="_blank">Data and Service Center for the Humanities</a>
<a mat-button href="https://dasch.swiss" target="_blank">Swiss National Data and Service Center for the Humanities</a>
<a mat-button href="https://www.google.com/maps/place/Gewerbestrasse+24,+4123+Allschwil" target="_blank">
<mat-icon>location_on</mat-icon> Gewerbestrasse 24, 4123 Allschwil
</a>
Expand Down
2 changes: 1 addition & 1 deletion src/app/main/grid/grid.component.scss
Expand Up @@ -9,7 +9,7 @@
justify-items: stretch;
align-items: stretch;
align-content: space-evenly;
margin: 90px -15px 0 0;
margin: 48px -15px 0 0;
padding: 0;
list-style: none;

Expand Down
13 changes: 12 additions & 1 deletion src/app/main/header/header.component.html
Expand Up @@ -4,7 +4,13 @@
<mat-icon matPrefix svgIcon="dasch_icon_black" class="small"></mat-icon>
<h1 class="mat-headline desktop-only">DaSCH Service Platform</h1>
<h1 class="mat-headline phone-tablet-only">DSP</h1>
<p class="mat-caption right app-version">{{appVersion}}</p>
<p class="mat-caption right app-version">
<span *ngIf="dsp.production">{{dsp.release}}</span>
<span *ngIf="!dsp.production" class="development badge">
<span class="environment">{{dsp.environment}}</span>
<span class="release {{dsp.color}}">{{dsp.release}}</span>
</span>
</p>
</button>
</span>

Expand Down Expand Up @@ -43,3 +49,8 @@ <h1 class="mat-headline phone-tablet-only">DSP</h1>
</span>

</mat-toolbar>
<mat-progress-bar *ngIf="!dsp.production"
[color]="dsp.color"
mode="determinate"
value="100">
</mat-progress-bar>
6 changes: 5 additions & 1 deletion src/app/main/header/header.component.scss
Expand Up @@ -9,10 +9,11 @@
.home-button {
display: inline-block;
.mat-icon {
margin: 6px 6px 6px 0;
margin: 0 6px 6px 0;
min-width: 40px;
height: auto;
max-height: 40px;
padding-bottom: 6px;

&.small {
width: 40px;
Expand Down Expand Up @@ -40,6 +41,9 @@
}
}
@media (max-width: 1024px) {
.development.badge {
font-weight: normal;
}
.desktop-only {
display: none;
}
Expand Down
10 changes: 10 additions & 0 deletions src/app/main/header/header.component.spec.ts
Expand Up @@ -63,6 +63,12 @@ describe('HeaderComponent', () => {

let componentCommsService: ComponentCommunicationEventService;

const appInitSpy = {
dspConfig: {
release: '2022.01.01'
}
};

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
Expand Down Expand Up @@ -94,6 +100,10 @@ describe('HeaderComponent', () => {
provide: DspApiConnectionToken,
useValue: new KnoraApiConnection(TestConfig.ApiConfig)
},
{
provide: AppInitService,
useValue: appInitSpy
},
ComponentCommunicationEventService
]
}).compileComponents();
Expand Down
10 changes: 7 additions & 3 deletions src/app/main/header/header.component.ts
Expand Up @@ -4,14 +4,14 @@ import { MatIconRegistry } from '@angular/material/icon';
import { DomSanitizer } from '@angular/platform-browser';
import { NavigationStart, Router } from '@angular/router';
import { Subscription } from 'rxjs';
import { AppInitService } from 'src/app/app-init.service';
import { DialogComponent } from 'src/app/main/dialog/dialog.component';
import { ComponentCommunicationEventService, Events } from 'src/app/main/services/component-communication-event.service';
import { SearchParams } from 'src/app/workspace/results/list-view/list-view.component';
import { DspConfig } from '../declarations/dsp-config';
import { NotificationService } from '../services/notification.service';
import { SessionService } from '../services/session.service';

const { version: appVersion } = require('../../../../package.json');

@Component({
selector: 'app-header',
templateUrl: './header.component.html',
Expand All @@ -23,11 +23,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
show = false;
searchParams: SearchParams;

appVersion: string = 'v' + appVersion;
dsp: DspConfig;

componentCommsSubscription: Subscription;

constructor(
private _appInitService: AppInitService,
private _componentCommsService: ComponentCommunicationEventService,
private _dialog: MatDialog,
private _domSanitizer: DomSanitizer,
Expand All @@ -51,6 +52,9 @@ export class HeaderComponent implements OnInit, OnDestroy {
});
}
});

this.dsp = this._appInitService.dspConfig;

}

ngOnInit() {
Expand Down
21 changes: 15 additions & 6 deletions src/app/main/help/help.component.html
@@ -1,27 +1,36 @@
<div class="help-page">
<section *ngIf="!dsp.production" class="info">
<div class="content medium middle development hint {{dsp.color}}">
<p class="mat-subheading-2 content medium middle">This is a development version of DSP (release <strong>{{dsp.release}}</strong>) running in the environment <strong>{{dsp.environment}}</strong></p>
</div>
</section>

<section>
<div class="content large middle">
<h1 class="mat-display-1">Need help?</h1>
<h3 class="mat-subheading-2">Read the user guide: Explore by topic</h3>
<h2 class="mat-title">Read the user guide: Explore by topic</h2>

<app-grid id="app-grid-documentation" [list]="docs"></app-grid>
</div>
</section>

<section class="darken-bg">
<div class="content large middle">
<h3 class="mat-subheading-2">Explore our software products</h3>
<p class="mat-body-1">The web application and the tools for data storage and long-term access are developed
by the DaSCH team in Switzerland.</p>

<h2 class="mat-title">Explore our software products</h2>
<p class="mat-subheading-2 content medium middle">The DaSCH Service Platform (DSP) is our main product within release <strong>{{dsp.release}}</strong>
&rarr; <a [href]="releaseNotesUrl">here you will get the latest news about this main version <mat-icon class="suffix">launch</mat-icon></a>
<br><br>
If you are interested in more details about the individual applications of DSP,
take a look at the following software products &mdash; all developed by the DaSCH team in Switzerland.
</p>
<app-grid id="app-grid-tools" [list]="tools"></app-grid>

</div>
</section>

<section>
<div class="content large middle">
<h3 class="mat-subheading-2">Get more support or help to improve</h3>
<h3 class="mat-title">Get more support or help to improve</h3>

<app-grid id="app-grid-tools" [list]="support"></app-grid>
</div>
Expand Down
4 changes: 4 additions & 0 deletions src/app/main/help/help.component.scss
Expand Up @@ -8,6 +8,10 @@ section {
text-align: center;
padding: 24px 0;

&.info {
min-height: auto;
}

.content {
img.logo {
max-width: 400px;
Expand Down
10 changes: 10 additions & 0 deletions src/app/main/help/help.component.spec.ts
Expand Up @@ -19,6 +19,12 @@ describe('HelpComponent', () => {
let component: HelpComponent;
let fixture: ComponentFixture<HelpComponent>;

const appInitSpy = {
dspConfig: {
release: '2022.01.01'
}
};

beforeEach(waitForAsync(() => {
TestBed.configureTestingModule({
declarations: [
Expand All @@ -45,6 +51,10 @@ describe('HelpComponent', () => {
{
provide: DspApiConnectionToken,
useValue: new KnoraApiConnection(TestConfig.ApiConfig)
},
{
provide: AppInitService,
useValue: appInitSpy
}
]
})
Expand Down
29 changes: 21 additions & 8 deletions src/app/main/help/help.component.ts
@@ -1,11 +1,13 @@
import { Component, Inject, OnInit } from '@angular/core';
import { ApiResponseData, ApiResponseError, HealthResponse, KnoraApiConnection, VersionResponse } from '@dasch-swiss/dsp-js';
import { AppInitService } from 'src/app/app-init.service';
import { DspApiConnectionToken } from '../declarations/dsp-api-tokens';
import { DspConfig } from '../declarations/dsp-config';
import { ErrorHandlerService } from '../error/error-handler.service';
import { GridItem } from '../grid/grid.component';

declare let require: any;
const { version: appVersion, name: appName } = require('../../../../package.json');
const { version: appVersion } = require('../../../../package.json');

@Component({
selector: 'app-help',
Expand All @@ -16,9 +18,12 @@ export class HelpComponent implements OnInit {

loading = true;

dsp: DspConfig;
releaseNotesUrl: string;

appVersion: string = appVersion;
apiStatus: HealthResponse;
dspVersion: VersionResponse;
apiVersion: VersionResponse;

docs: GridItem[] = [
{
Expand Down Expand Up @@ -74,7 +79,7 @@ export class HelpComponent implements OnInit {
},
{
title: 'DaSCH Infrastructure',
text: 'Wondering what the Data and Service Center for the Humanities DaSCH exactly is? Get more information on our Website:',
text: 'Wondering what the Swiss National Data and Service Center for the Humanities DaSCH exactly is? Get more information on our Website:',
url: 'https://dasch.swiss',
urlText: 'dasch.swiss'
},
Expand All @@ -88,26 +93,34 @@ export class HelpComponent implements OnInit {

constructor(
@Inject(DspApiConnectionToken) private _dspApiConnection: KnoraApiConnection,
private _appInitService: AppInitService,
private _errorHandler: ErrorHandlerService) {
}

ngOnInit() {

this.dsp = this._appInitService.dspConfig;

// quick solution; todo: has to be done in a better way
// to go directly to the page e.g. https://dasch.atlassian.net/wiki/spaces/changelog/pages/25067546/Releasenews+2022.01.02
// or https://dasch.atlassian.net/wiki/spaces/changelog/pages/21266446/Releasenews+2022.01.01
this.releaseNotesUrl = 'https://dasch.atlassian.net/wiki/search?text=' + this.dsp.release;

this._dspApiConnection.system.versionEndpoint.getVersion().subscribe(
(response: ApiResponseData<VersionResponse>) => {
this.dspVersion = response.body;
this.apiVersion = response.body;

// set dsp-app version
this.tools[0].title += ' v' + this.appVersion;
this.tools[0].url += this.appVersion;

// set dsp-api version
this.tools[1].title += this.dspVersion.webapi;
this.tools[1].url += this.dspVersion.webapi;
this.tools[1].title += this.apiVersion.webapi;
this.tools[1].url += this.apiVersion.webapi;

// set dsp-sipi version
this.tools[2].title += ' v' + this.dspVersion.sipi;
this.tools[2].url += this.dspVersion.sipi;
this.tools[2].title += ' v' + this.apiVersion.sipi;
this.tools[2].url += this.apiVersion.sipi;
},
(error: ApiResponseError) => {
this._errorHandler.showMessage(error);
Expand Down

0 comments on commit b6c9f1c

Please sign in to comment.