Adding router, creating subsystem view

src/app/app-routing.module.ts

+import { NgModule } from '@angular/core';
+import { RouterModule, Routes } from '@angular/router';
+import { MethodListComponent } from './method-list/method-list.component';
+import { SubsystemComponent } from './subsystem/subsystem.component';
+
+const routes: Routes = [
+  { path: '', redirectTo: '/list', pathMatch: 'full' },
+  { path: 'list', component: MethodListComponent },
+  { path: 'subsystem/:id', component: SubsystemComponent },
+];
+
+@NgModule({
+  imports: [ RouterModule.forRoot(routes, {scrollPositionRestoration: 'enabled'}) ],
+  exports: [ RouterModule ]
+})
+export class AppRoutingModule {}
\ No newline at end of file

src/app/app.component.html

@@ -8,8 +8,9 @@
 <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-search></app-search>
+<router-outlet></router-outlet>
+<!--<app-search></app-search>
 
-<app-method-list></app-method-list>
+<app-method-list></app-method-list>-->
 
 </div>
\ No newline at end of file

src/app/app.module.ts

@@ -8,18 +8,22 @@ import { AppComponent } from './app.component';
 import { MethodListComponent } from './method-list/method-list.component';
 import { SearchComponent } from './search/search.component';
 import { SubsystemItemComponent } from './method-list/subsystem-item/subsystem-item.component';
+import { AppRoutingModule } from './app-routing.module';
+import { SubsystemComponent } from './subsystem/subsystem.component';
 
 @NgModule({
   declarations: [
     AppComponent,
     MethodListComponent,
     SearchComponent,
-    SubsystemItemComponent
+    SubsystemItemComponent,
+    SubsystemComponent
   ],
   imports: [
     BrowserModule,
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    AppRoutingModule
   ],
   providers: [],
   bootstrap: [AppComponent]

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

-<div class="card" *ngFor="let subsystem of subsystems">
+<app-search></app-search>
+
+<div *ngFor="let subsystem of subsystems">
   <app-subsystem-item [subsystem]="subsystem"></app-subsystem-item>
 </div>

src/app/method-list/method-list.component.ts

@@ -13,6 +13,7 @@ export class MethodListComponent implements OnInit {
   constructor(private methodsService: MethodsService) { }
 
   ngOnInit() {
+    this.getMethods();
     // Service will tell when updated data is available!
     this.methodsService.subsystemsUpdated.subscribe(signal => {
       this.getMethods();

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

-<div class="card-header pointerCursor" (click)="isHidden = !isHidden">
+<div class="card">
+  <div class="card-header pointerCursor" (click)="showDetail()">
     {{subsystem.fullSubsystemName}}
     <span class="badge badge-secondary" *ngIf="!subsystem.methods.length && subsystem.subsystemStatus == 'OK'">Empty</span>
     <span class="badge badge-danger" *ngIf="subsystem.subsystemStatus == 'ERROR'">Error</span>
   </div>
-  <div class="card-body" [hidden]="isHidden" *ngIf="!subsystem.methods.length">
-    <p>No services found</p>
+  <div class="card-body" *ngIf="subsystem.subsystemStatus == 'ERROR'">
+    <p>Subsystem either could not be reached by RIA's Monitoring Security Server
+      or there was some other error during the request.</p>
   </div>
-  <div class="card-body" [hidden]="isHidden" *ngIf="subsystem.methods.length">
-    <p *ngFor="let method of subsystem.methods">
+  <div class="card-body" *ngIf="subsystem.subsystemStatus == 'OK' && !subsystem.methods.length">
+    <p>Subsystem does not have any methods.</p>
+  </div>
+  <div class="card-body" *ngIf="subsystem.subsystemStatus == 'OK' && subsystem.methods.length">
+    <p *ngFor="let method of getMethodsPreview()">
       {{method.fullMethodName}}
       <a href="{{methodsService.apiUrlBase}}{{method.wsdl}}" class="badge badge-success"
-        *ngIf="method.wsdl">WSDL</a>
+        *ngIf="method.wsdl" [target]="'_blank'">WSDL</a>
       <span class="badge badge-danger" *ngIf="!method.wsdl">Error while downloading or parsing of WSDL</span>
     </p>
+    <p *ngIf="getNotInPreview() > 0" class="pointerCursor" (click)="showDetail()">
+      {{getNotInPreview()}} more methods...
+    </p>
   </div>
+</div>
\ No newline at end of file

src/app/method-list/subsystem-item/subsystem-item.component.ts

 import { Component, OnInit, Input } from '@angular/core';
 import { Subsystem } from '../../subsystem';
+import { Method } from '../../method';
 import { MethodsService } from '../../methods.service';
+import { Router } from '@angular/router';
 
 @Component({
   selector: 'app-subsystem-item',
@@ -9,26 +11,29 @@ import { MethodsService } from '../../methods.service';
 })
 export class SubsystemItemComponent implements OnInit {
 
-  @Input() subsystem: Subsystem;
-  isHidden: boolean = true;
+  @Input() subsystem: Subsystem
+  private previewSize: number = 5
 
-  constructor(private methodsService: MethodsService) {
-    // Service will tell when detail should be opened or closed
-    this.methodsService.hideDetails.subscribe(signal => {
-      if (signal) {
-        this.isHidden = true
-      } else if (this.subsystem.methods.length) {
-        // Force opening only subsystems with methods
-        this.isHidden = false
-      }
-    });
-  }
+  constructor(
+    private methodsService: MethodsService,
+    private router: Router
+  ) { }
 
   ngOnInit() {
-    // New component asks service if detail should be opened or closed
-    if (this.subsystem.methods.length) {
-      // Force opening only subsystems with methods
-      this.isHidden = this.methodsService.getHideDetails()
+  }
+
+  getMethodsPreview(): Method[] {
+    return this.subsystem.methods.length ? this.subsystem.methods.slice(0, this.previewSize) : []
+  }
+
+  getNotInPreview(): number {
+    if (this.subsystem.methods.length - this.previewSize < 0) {
+      return 0
     }
+    return this.subsystem.methods.length - this.previewSize
+  }
+
+  showDetail() {
+    this.router.navigateByUrl('/subsystem/' + encodeURIComponent(this.subsystem.fullSubsystemName))
   }
 }

src/app/methods.service.ts

@@ -5,6 +5,8 @@ import { catchError } from 'rxjs/operators';
 import { Subsystem } from './subsystem';
 import { Method } from './method';
 
+const MAX_LIMIT: number = 1000000;
+
 @Injectable({
   providedIn: 'root'
 })
@@ -18,7 +20,8 @@ export class MethodsService {
   private filter: string = "";
   private apiService = 'index.json';
   private apiUrl = this.apiUrlBase + this.apiService;
-  private subsystems: Subsystem[];
+  private subsystems: Subsystem[] = [];
+  private loadingDone: boolean = false;
 
   @Output() subsystemsUpdated: EventEmitter<any> = new EventEmitter();
   @Output() hideDetails: EventEmitter<boolean> = new EventEmitter();
@@ -30,6 +33,7 @@ export class MethodsService {
     ).subscribe(subsystems => {
       this.subsystems = subsystems;
       this.setFullNames();
+      this.loadingDone = true;
       this.signalRefresh();
     })
   }
@@ -99,6 +103,25 @@ export class MethodsService {
     }
   }
 
+  getLimit(): string {
+    if (this.limit == MAX_LIMIT) {
+      return 'All'
+    }
+    return this.limit.toString()
+  }
+
+  getNonEmpty(): boolean {
+    return this.nonEmpty
+  }
+
+  getfilter(): string {
+    return this.filter
+  }
+
+  isLoadingDone(): boolean {
+    return this.loadingDone
+  }
+
   getMethods(): Subsystem[] {
     return this.filteredSubsystems();
   }
@@ -117,7 +140,7 @@ export class MethodsService {
         this.limit = 50;
         break;
       case 'All':
-        this.limit = 1000000;
+        this.limit = MAX_LIMIT;
         break;
       default:
         this.limit = 10;
@@ -139,6 +162,12 @@ export class MethodsService {
     }
   }
 
+  getSubsystem(name: string): Subsystem {
+    return this.subsystems.find(function(element) {
+      return element.fullSubsystemName === name;
+    })
+  }
+
   getHideDetails(): boolean {
     if (this.filter == '') {
       return true

src/app/search/search.component.ts

@@ -8,13 +8,16 @@ import { MethodsService } from '../methods.service';
 })
 export class SearchComponent implements OnInit {
 
-  nonEmpty: boolean = false
-  limit: string = '10'
-  filter: string = ''
+  limit: string
+  nonEmpty: boolean
+  filter: string
 
   constructor(private methodsService: MethodsService) { }
 
   ngOnInit() {
+    this.limit = this.methodsService.getLimit()
+    this.nonEmpty = this.methodsService.getNonEmpty()
+    this.filter = this.methodsService.getfilter()
   }
 
   setNonEmpty(nonEmpty: boolean) {

src/app/subsystem/subsystem.component.html

+<div *ngIf="loadingDone() && subsystem">
+  <div class="card">
+    <div class="card-header">
+      {{subsystem.fullSubsystemName}}
+      <span class="badge badge-secondary" *ngIf="!subsystem.methods.length && subsystem.subsystemStatus == 'OK'">Empty</span>
+      <span class="badge badge-danger" *ngIf="subsystem.subsystemStatus == 'ERROR'">Error</span>
+    </div>
+    <div class="card-body" *ngIf="subsystem.subsystemStatus == 'ERROR'">
+      <p>Subsystem either could not be reached by RIA's Monitoring Security Server
+        or there was some other error during the request.</p>
+    </div>
+    <div class="card-body" *ngIf="subsystem.subsystemStatus == 'OK' && !subsystem.methods.length">
+      <p>Subsystem does not have any methods.</p>
+    </div>
+    <div class="card-body" *ngIf="subsystem.subsystemStatus == 'OK' && subsystem.methods.length">
+      <p *ngFor="let method of subsystem.methods">
+        {{method.fullMethodName}}
+        <a href="{{methodsService.apiUrlBase}}{{method.wsdl}}" class="badge badge-success"
+          *ngIf="method.wsdl" [target]="'_blank'">WSDL</a>
+        <span class="badge badge-danger" *ngIf="!method.wsdl">Error while downloading or parsing of WSDL</span>
+      </p>
+    </div>
+  </div>
+</div>
+
+<div *ngIf="loadingDone() && !subsystem">
+  <p>
+    Subsystem "{{subsystemId}}" cannot be found!
+  </p>
+</div>
+  
+<button type="button" class="btn btn-secondary" (click)="goToList()">Show all subsystems</button>
\ No newline at end of file

src/app/subsystem/subsystem.component.spec.ts

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

src/app/subsystem/subsystem.component.ts

+import { Component, OnInit } from '@angular/core';
+import { MethodsService } from '../methods.service';
+import { Subsystem } from '../subsystem';
+import { ActivatedRoute, Router } from '@angular/router';
+//import { Location } from '@angular/common';
+
+@Component({
+  selector: 'app-subsystem',
+  templateUrl: './subsystem.component.html',
+  styleUrls: ['./subsystem.component.css']
+})
+export class SubsystemComponent implements OnInit {
+  subsystem: Subsystem
+  subsystemId: string
+
+  constructor(
+    private methodsService: MethodsService,
+    private route: ActivatedRoute,
+    private router: Router
+    //private location: Location
+  ) { }
+
+  ngOnInit() {
+    this.getSubsystem()
+  }
+
+  loadingDone():boolean {
+    return this.methodsService.isLoadingDone()
+  }
+
+  getSubsystem() {
+    this.subsystemId = this.route.snapshot.paramMap.get('id')
+    this.subsystem = this.methodsService.getSubsystem(this.subsystemId)
+    // Service will tell when updated data is available!
+    this.methodsService.subsystemsUpdated.subscribe(signal => {
+      this.subsystem = this.methodsService.getSubsystem(this.subsystemId)
+    });
+  }
+
+  goToList(): void {
+    //this.location.back();
+    this.router.navigateByUrl('/list')
+  }
+}