From 274cf8e359fbe28e0b854517757c1d630434cf92 Mon Sep 17 00:00:00 2001
From: Ricardo Marques <rimarques@suse.com>
Date: Sat, 27 Jan 2018 00:05:54 +0000
Subject: [PATCH] mgr/dashboard_v2: Add hosts page

Signed-off-by: Ricardo Marques <rimarques@suse.com>
---
 .../mgr/dashboard_v2/controllers/host.py      | 11 ++++++
 .../frontend/src/app/app-routing.module.ts    |  8 ++---
 .../frontend/src/app/app.component.html       |  1 +
 .../frontend/src/app/app.component.spec.ts    |  4 ++-
 .../frontend/src/app/ceph/ceph.module.ts      |  4 ++-
 .../frontend/src/app/ceph/host/host.module.ts | 15 ++++++++
 .../app/ceph/host/hosts/hosts.component.html  | 28 +++++++++++++++
 .../host/hosts/hosts.component.scss}          |  0
 .../ceph/host/hosts/hosts.component.spec.ts   | 35 +++++++++++++++++++
 .../app/ceph/host/hosts/hosts.component.ts    | 21 +++++++++++
 .../app/ceph/host/service-list.pipe.spec.ts   |  8 +++++
 .../src/app/ceph/host/service-list.pipe.ts    | 14 ++++++++
 .../app/core/navigation/navigation.module.ts  |  4 ++-
 .../navigation/navigation.component.html      |  5 +--
 .../src/app/shared/empty/empty.component.html |  1 -
 .../app/shared/empty/empty.component.spec.ts  | 25 -------------
 .../src/app/shared/empty/empty.component.ts   | 15 --------
 .../pipes/ceph-short-version.pipe.spec.ts     |  8 +++++
 .../shared/pipes/ceph-short-version.pipe.ts   | 20 +++++++++++
 .../src/app/shared/pipes/pipes.module.ts      | 11 ++++++
 .../src/app/shared/services/host.service.ts   | 15 ++++++++
 .../frontend/src/app/shared/shared.module.ts  | 14 +++++---
 22 files changed, 213 insertions(+), 54 deletions(-)
 create mode 100644 src/pybind/mgr/dashboard_v2/controllers/host.py
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/host.module.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.html
 rename src/pybind/mgr/dashboard_v2/frontend/src/app/{shared/empty/empty.component.scss => ceph/host/hosts/hosts.component.scss} (100%)
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.spec.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/service-list.pipe.spec.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/service-list.pipe.ts
 delete mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.html
 delete mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.spec.ts
 delete mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ceph-short-version.pipe.spec.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ceph-short-version.pipe.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts
 create mode 100644 src/pybind/mgr/dashboard_v2/frontend/src/app/shared/services/host.service.ts

diff --git a/src/pybind/mgr/dashboard_v2/controllers/host.py b/src/pybind/mgr/dashboard_v2/controllers/host.py
new file mode 100644
index 0000000000000..5e280d7365e1e
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/controllers/host.py
@@ -0,0 +1,11 @@
+# -*- coding: utf-8 -*-
+from __future__ import absolute_import
+
+from ..tools import ApiController, AuthRequired, RESTController
+
+
+@ApiController('host')
+@AuthRequired()
+class Host(RESTController):
+    def list(self):
+        return self.mgr.list_servers()
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/app-routing.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/app-routing.module.ts
index 4fb1abd512c89..b65f2b24fa61c 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/app-routing.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/app-routing.module.ts
@@ -1,13 +1,13 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
 import { AuthGuardService } from './shared/services/auth-guard.service';
-import { EmptyComponent } from './shared/empty/empty.component';
 import { LoginComponent } from './core/auth/login/login.component';
+import { HostsComponent } from './ceph/host/hosts/hosts.component';
 
 const routes: Routes = [
-  // TODO configure an appropriate default route (maybe on ceph module?)
-  { path: '', canActivate: [AuthGuardService], component: EmptyComponent },
-  { path: 'login', component: LoginComponent }
+  { path: '', redirectTo: 'hosts', pathMatch: 'full' },
+  { path: 'login', component: LoginComponent },
+  { path: 'hosts', component: HostsComponent, canActivate: [AuthGuardService] }
 ];
 
 @NgModule({
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/app.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/app.component.html
index 5bc0bbb625198..31af1450115dd 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/app.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/app.component.html
@@ -1,5 +1,6 @@
 <cd-navigation *ngIf="!isLogginActive()"></cd-navigation>
 <div class="container-fluid"
      [ngClass]="{'full-height':isLogginActive()}">
+  <div *ngIf="!isLogginActive()" class="breadcrumb"></div>
   <router-outlet></router-outlet>
 </div>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/app.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/app.component.spec.ts
index 56c7769a81a9f..b7962ab6948ac 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/app.component.spec.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/app.component.spec.ts
@@ -4,6 +4,7 @@ import { AppComponent } from './app.component';
 import { CoreModule } from './core/core.module';
 import { SharedModule } from './shared/shared.module';
 import { ToastModule } from 'ng2-toastr';
+import { HostModule } from './ceph/host/host.module';
 
 describe('AppComponent', () => {
   beforeEach(async(() => {
@@ -12,7 +13,8 @@ describe('AppComponent', () => {
         RouterTestingModule,
         CoreModule,
         SharedModule,
-        ToastModule.forRoot()
+        ToastModule.forRoot(),
+        HostModule
       ],
       declarations: [
         AppComponent
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/ceph.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/ceph.module.ts
index 9cdda334b93ee..6a8eda9a78e98 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/ceph.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/ceph.module.ts
@@ -1,9 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
+import { HostModule } from './host/host.module';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    HostModule
   ],
   declarations: []
 })
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/host.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/host.module.ts
new file mode 100644
index 0000000000000..c6055aee75a54
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/host.module.ts
@@ -0,0 +1,15 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { HostsComponent } from './hosts/hosts.component';
+import { SharedModule } from '../../shared/shared.module';
+import { ServiceListPipe } from './service-list.pipe';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    SharedModule
+  ],
+  declarations: [HostsComponent, ServiceListPipe],
+})
+export class HostModule { }
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.html
new file mode 100644
index 0000000000000..a273491a80c1e
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.html
@@ -0,0 +1,28 @@
+<table class="table table-bordered">
+  <thead>
+  <tr>
+    <th>
+      Hostname
+    </th>
+    <th>
+      Services
+    </th>
+    <th>
+      Version
+    </th>
+  </tr>
+  </thead>
+  <tbody>
+  <tr *ngFor="let host of hosts">
+    <td>
+      {{ host.hostname }}
+    </td>
+    <td>
+      {{ host.services | serviceList }}
+    </td>
+    <td>
+      {{ host.ceph_version | cephShortVersion }}
+    </td>
+  </tr>
+  </tbody>
+</table>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.scss
similarity index 100%
rename from src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.scss
rename to src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.scss
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.spec.ts
new file mode 100644
index 0000000000000..2f294d7a3b37f
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.spec.ts
@@ -0,0 +1,35 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HostsComponent } from './hosts.component';
+import { ServiceListPipe } from '../service-list.pipe';
+import { SharedModule } from '../../../shared/shared.module';
+import { HttpClientTestingModule } from '@angular/common/http/testing';
+
+describe('HostsComponent', () => {
+  let component: HostsComponent;
+  let fixture: ComponentFixture<HostsComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        SharedModule,
+        HttpClientTestingModule
+      ],
+      declarations: [
+        HostsComponent,
+        ServiceListPipe
+      ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HostsComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.ts
new file mode 100644
index 0000000000000..99e4aea3b173d
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/hosts/hosts.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit } from '@angular/core';
+import { HostService } from '../../../shared/services/host.service';
+
+@Component({
+  selector: 'cd-hosts',
+  templateUrl: './hosts.component.html',
+  styleUrls: ['./hosts.component.scss']
+})
+export class HostsComponent implements OnInit {
+
+  hosts: any = [];
+
+  constructor(private hostService: HostService) { }
+
+  ngOnInit() {
+    this.hostService.list().then((resp) => {
+      this.hosts = resp;
+    });
+  }
+
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/service-list.pipe.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/service-list.pipe.spec.ts
new file mode 100644
index 0000000000000..6edc89d817817
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/service-list.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { ServiceListPipe } from './service-list.pipe';
+
+describe('ServiceListPipe', () => {
+  it('create an instance', () => {
+    const pipe = new ServiceListPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/service-list.pipe.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/service-list.pipe.ts
new file mode 100644
index 0000000000000..aa66a139a751d
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/ceph/host/service-list.pipe.ts
@@ -0,0 +1,14 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'serviceList'
+})
+export class ServiceListPipe implements PipeTransform {
+  transform(value: any, args?: any): any {
+    const strings = [];
+    value.forEach((server) => {
+      strings.push(server.type + '.' + server.id);
+    });
+    return strings.join(', ');
+  }
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation.module.ts
index b4fbd416ffa94..861a129450f14 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation.module.ts
@@ -5,6 +5,7 @@ import { AuthModule } from '../auth/auth.module';
 import { BsDropdownModule } from 'ngx-bootstrap/dropdown';
 import { AppRoutingModule } from '../../app-routing.module';
 import { SharedModule } from '../../shared/shared.module';
+import { RouterModule } from '@angular/router';
 
 @NgModule({
   imports: [
@@ -12,7 +13,8 @@ import { SharedModule } from '../../shared/shared.module';
     AuthModule,
     BsDropdownModule.forRoot(),
     AppRoutingModule,
-    SharedModule
+    SharedModule,
+    RouterModule
   ],
   declarations: [NavigationComponent],
   exports: [NavigationComponent]
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation/navigation.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation/navigation.component.html
index 5648a9d7d85d9..46982ed2830ea 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation/navigation.component.html
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/navigation/navigation/navigation.component.html
@@ -49,13 +49,14 @@
            routerLink="/cephPools">Pools
         </a>
       </li>
+      -->
       <li routerLinkActive="active"
           class="tc_menuitem tc_menuitem_ceph_nodes">
         <a i18n
-           routerLink="/cephNodes">Nodes
+           routerLink="/hosts">Hosts
         </a>
       </li>
-      <li class="dropdown tc_menuitem tc_menuitem_ceph_rgw">
+      <!--<li class="dropdown tc_menuitem tc_menuitem_ceph_rgw">
         <a href=""
            class="dropdown-toggle"
            data-toggle="dropdown"><ng-container i18n>Object Gateway</ng-container> <span class="caret"></span>
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.html
deleted file mode 100644
index 15798c6947923..0000000000000
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<!-- This component should be deleted by the developer that implements the first route / page -->
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.spec.ts
deleted file mode 100644
index 2bbad56577277..0000000000000
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.spec.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
-
-import { EmptyComponent } from './empty.component';
-
-describe('EmptyComponent', () => {
-  let component: EmptyComponent;
-  let fixture: ComponentFixture<EmptyComponent>;
-
-  beforeEach(async(() => {
-    TestBed.configureTestingModule({
-      declarations: [ EmptyComponent ]
-    })
-    .compileComponents();
-  }));
-
-  beforeEach(() => {
-    fixture = TestBed.createComponent(EmptyComponent);
-    component = fixture.componentInstance;
-    fixture.detectChanges();
-  });
-
-  it('should create', () => {
-    expect(component).toBeTruthy();
-  });
-});
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.ts
deleted file mode 100644
index 65aaf1032d3b7..0000000000000
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/empty/empty.component.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Component, OnInit } from '@angular/core';
-
-@Component({
-  selector: 'cd-empty',
-  templateUrl: './empty.component.html',
-  styleUrls: ['./empty.component.scss']
-})
-export class EmptyComponent implements OnInit {
-
-  constructor() { }
-
-  ngOnInit() {
-  }
-
-}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ceph-short-version.pipe.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ceph-short-version.pipe.spec.ts
new file mode 100644
index 0000000000000..bfe10c2f46977
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ceph-short-version.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { CephShortVersionPipe } from './ceph-short-version.pipe';
+
+describe('CephShortVersionPipe', () => {
+  it('create an instance', () => {
+    const pipe = new CephShortVersionPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ceph-short-version.pipe.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ceph-short-version.pipe.ts
new file mode 100644
index 0000000000000..3ddece9b55190
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/ceph-short-version.pipe.ts
@@ -0,0 +1,20 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'cephShortVersion'
+})
+export class CephShortVersionPipe implements PipeTransform {
+
+  transform(value: any, args?: any): any {
+    // Expect "ceph version 1.2.3-g9asdasd (as98d7a0s8d7)"
+    const result = /ceph version\s+([^ ]+)\s+\(.+\)/.exec(value);
+    if (result) {
+        // Return the "1.2.3-g9asdasd" part
+        return result[1];
+    } else {
+        // Unexpected format, pass it through
+        return value;
+    }
+  }
+
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts
new file mode 100644
index 0000000000000..ff80c3b7e9bcf
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/pipes/pipes.module.ts
@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { CephShortVersionPipe } from './ceph-short-version.pipe';
+
+@NgModule({
+  imports: [CommonModule],
+  declarations: [CephShortVersionPipe],
+  exports: [CephShortVersionPipe],
+  providers: []
+})
+export class PipesModule {}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/services/host.service.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/services/host.service.ts
new file mode 100644
index 0000000000000..73bedce613697
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/services/host.service.ts
@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class HostService {
+
+  constructor(private http: HttpClient) {
+  }
+
+  list() {
+    return this.http.get('/api/host').toPromise().then((resp: any) => {
+      return resp;
+    });
+  }
+}
diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
index ef3e58a57dbfe..5c2e80731b4b2 100644
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/shared.module.ts
@@ -3,17 +3,23 @@ import { CommonModule } from '@angular/common';
 import { AuthService } from './services/auth.service';
 import { AuthStorageService } from './services/auth-storage.service';
 import { AuthGuardService } from './services/auth-guard.service';
-import { EmptyComponent } from './empty/empty.component';
+import { PipesModule } from './pipes/pipes.module';
+import { HostService } from './services/host.service';
 
 @NgModule({
   imports: [
-    CommonModule
+    CommonModule,
+    PipesModule
   ],
-  declarations: [EmptyComponent],
+  declarations: [],
   providers: [
     AuthService,
     AuthStorageService,
-    AuthGuardService
+    AuthGuardService,
+    HostService
+  ],
+  exports: [
+    PipesModule
   ]
 })
 export class SharedModule { }
-- 
2.39.5