Changing intro text and adding error messages

src/app/app.component.html

 <div class="container">
 
-<h1>All subsystems with methods and WSDL descriptions for instance "EE"</h1>
-<h3>How is this report generated?</h3>
-<br>
-<p>This report is generated by making getWsdl requests from RIA's Monitoring Security Server to all X-Road subsystems in the X-Road instance.</p>
-<p>Subsystems with the <span class="badge badge-secondary">Empty</span> icon have no X-Road services available.</p>
-<p>Subsystems with the <span class="badge badge-danger">Error</span> icon either could not be reached by RIA's Monitoring Security Server or there was some other error during the request.</p>
-<p>Support: <a href="mailto:help@ria.ee">help@ria.ee</a></p>
-
 <router-outlet></router-outlet>
-<!--<app-search></app-search>
-
-<app-subsystem-list></app-subsystem-list>-->
 
 </div>
\ No newline at end of file

src/app/app.module.ts

@@ -10,6 +10,7 @@ import { SearchComponent } from './search/search.component';
 import { SubsystemItemComponent } from './subsystem-list/subsystem-item/subsystem-item.component';
 import { AppRoutingModule } from './app-routing.module';
 import { SubsystemComponent } from './subsystem/subsystem.component';
+import { MessageComponent } from './message/message.component';
 
 @NgModule({
   declarations: [
@@ -17,7 +18,8 @@ import { SubsystemComponent } from './subsystem/subsystem.component';
     SubsystemListComponent,
     SearchComponent,
     SubsystemItemComponent,
-    SubsystemComponent
+    SubsystemComponent,
+    MessageComponent
   ],
   imports: [
     BrowserModule,

src/app/message/message.component.html

+<div class="alert alert-warning" role="alert" *ngIf="message">
+  {{message}}
+</div>
\ No newline at end of file

src/app/message/message.component.spec.ts

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

src/app/message/message.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MethodsService } from '../methods.service';
+
+@Component({
+  selector: 'app-message',
+  templateUrl: './message.component.html',
+  styleUrls: ['./message.component.css']
+})
+export class MessageComponent implements OnInit {
+
+  message: string = ''
+
+  constructor(private methodsService: MethodsService) { }
+
+  ngOnInit() {
+    this.message = this.methodsService.getMessage();
+    // Service will tell when updated data is available!
+    this.methodsService.newMessage.subscribe(signal => {
+      this.message = signal;
+    });
+  }
+
+}

src/app/methods.service.ts

@@ -22,9 +22,11 @@ export class MethodsService {
   private apiUrl = this.apiUrlBase + this.apiService;
   private subsystems: Subsystem[] = [];
   private loadingDone: boolean = false;
+  private lastMessage: string = '';
 
   @Output() subsystemsUpdated: EventEmitter<any> = new EventEmitter();
   @Output() hideDetails: EventEmitter<boolean> = new EventEmitter();
+  @Output() newMessage: EventEmitter<string> = new EventEmitter();
 
   constructor(private http: HttpClient) {
     this.http.get<Subsystem[]>(this.apiUrl)
@@ -176,6 +178,10 @@ export class MethodsService {
     }
   }
 
+  getMessage(): string {
+    return this.lastMessage
+  }
+
   /**
    * Handle Http operation that failed.
    * Let the app continue.
@@ -185,8 +191,9 @@ export class MethodsService {
   private handleError<T> (operation = 'operation', result?: T) {
     return (error: any): Observable<T> => {
 
-      // TODO: send the error to remote logging infrastructure
-      console.error(error); // log to console instead
+      //console.error(error); // log to console for debuging
+      this.lastMessage = 'Error loading data!'
+      this.newMessage.emit(this.lastMessage);
 
       // Let the app keep running by returning an empty result.
       return of(result as T);

src/app/subsystem-list/subsystem-list.component.html

+<h3>All subsystems with methods and WSDL descriptions for X-tee instance "EE"</h3>
+<p>This report is generated by making getWsdl requests from RIA's Monitoring Security Server
+  to all X-tee subsystems in the "EE" instance.</p>
+<p>Subsystems with the <span class="badge badge-secondary">Empty</span> icon have no X-Tee
+  services available.</p>
+<p>Subsystems with the <span class="badge badge-danger">Error</span> icon either could not be
+  reached by RIA's Monitoring Security Server or there was some other error during the request.</p>
+<p>Support: <a href="mailto:help@ria.ee">help@ria.ee</a></p>
+
+<app-message></app-message>
+
 <app-search></app-search>
 
 <div *ngFor="let subsystem of subsystems">

src/app/subsystem/subsystem.component.html

+<h3>Subsystem {{subsystemId}} with methods and WSDL descriptions for
+  X-tee instance "EE"</h3>
+<p>Support: <a href="mailto:help@ria.ee">help@ria.ee</a></p>
+
+<app-message></app-message>
+
 <div *ngIf="loadingDone() && subsystem">
   <div class="card">
     <div class="card-header">