mgr/dashboard_v2: add 404 page

Add a 404 page that will be triggered every time the user tries to
access a route that does not exists or the servers responds with 404.

Signed-off-by: Tiago Melo <tmelo@suse.com>

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 b5c2dc06bbb261c21cdef721e971c7cd15b022c1..253ba0fdbcf1325cf1b9341c8d59237056ba2ad7 100644 (file)
--- 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
@@ -10,6 +10,7 @@ import {
 } from './ceph/performance-counter/performance-counter/performance-counter.component';
 import { RgwDaemonListComponent } from './ceph/rgw/rgw-daemon-list/rgw-daemon-list.component';
 import { LoginComponent } from './core/auth/login/login.component';
+import { NotFoundComponent } from './core/not-found/not-found.component';
 import { AuthGuardService } from './shared/services/auth-guard.service';
 
 const routes: Routes = [
@@ -29,7 +30,9 @@ const routes: Routes = [
     component: PerformanceCounterComponent,
     canActivate: [AuthGuardService]
   },
-  { path: 'monitor', component: MonitorComponent, canActivate: [AuthGuardService] }
+  { path: 'monitor', component: MonitorComponent, canActivate: [AuthGuardService] },
+  { path: '404', component: NotFoundComponent },
+  { path: '**', redirectTo: '/404'}
 ];
 
 @NgModule({

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/core.module.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/core.module.ts
index cbd40c6610a13dde07ef54121783fe14aa9e8fc1..bd1768158e7e27b666db0c1bdb5a191ed7f76fce 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/core.module.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/core.module.ts
@@ -3,6 +3,7 @@ import { NgModule } from '@angular/core';
 
 import { AuthModule } from './auth/auth.module';
 import { NavigationModule } from './navigation/navigation.module';
+import { NotFoundComponent } from './not-found/not-found.component';
 
 @NgModule({
   imports: [
@@ -11,6 +12,6 @@ import { NavigationModule } from './navigation/navigation.module';
     AuthModule
   ],
   exports: [NavigationModule],
-  declarations: []
+  declarations: [NotFoundComponent]
 })
 export class CoreModule { }

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.html b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.html
new file mode 100644 (file)
index 0000000..5ba41d2
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.html
@@ -0,0 +1,14 @@
+<div class="row">
+  <div class="col-md-12 text-center">
+    <h1>Sorry, we could not find what you were looking for</h1>
+
+    <img class="img-responsive center-block img-rounded"
+         src="/assets/1280px-Mimic_Octopus2.jpg">
+    <span>
+      "<a href="https://www.flickr.com/photos/37707866@N00/4838953223">Mimic Octopus</a>" by prilfish is licensed under
+      <a rel="nofollow"
+         class="external text"
+         href="https://creativecommons.org/licenses/by/2.0/">CC BY 2.0</a>
+    </span>
+  </div>
+</div>

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.scss b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.scss
new file mode 100644 (file)
index 0000000..e94d9f2
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.scss
@@ -0,0 +1,15 @@
+h1 {
+  font-size: -webkit-xxx-large;
+}
+
+h2 {
+  font-size: xx-large;
+}
+
+*{
+  font-family: monospace;
+}
+
+img{
+  width: 50vw;
+}

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.spec.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.spec.ts
new file mode 100644 (file)
index 0000000..35189ed
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { NotFoundComponent } from './not-found.component';
+
+describe('NotFoundComponent', () => {
+  let component: NotFoundComponent;
+  let fixture: ComponentFixture<NotFoundComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ NotFoundComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(NotFoundComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.ts
new file mode 100644 (file)
index 0000000..d12bc32
--- /dev/null
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/core/not-found/not-found.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'cd-not-found',
+  templateUrl: './not-found.component.html',
+  styleUrls: ['./not-found.component.scss']
+})
+export class NotFoundComponent {
+  constructor() {}
+}

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/services/auth-interceptor.service.ts b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/services/auth-interceptor.service.ts
index b609d14cc860c0f4dc9d2ff4770f303acf6bac3e..f09250d6c172e09181fe38c27057a72448637189 100644 (file)
--- a/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/services/auth-interceptor.service.ts
+++ b/src/pybind/mgr/dashboard_v2/frontend/src/app/shared/services/auth-interceptor.service.ts
@@ -26,6 +26,11 @@ export class AuthInterceptorService implements HttpInterceptor {
       }
     }, (err: any) => {
       if (err instanceof HttpErrorResponse) {
+        if (err.status === 404) {
+          this.router.navigate(['/404']);
+          return;
+        }
+
         this.toastr.error(err.error.detail || '', `${err.status} - ${err.statusText}`);
         if (err.status === 401) {
           this.authStorageService.remove();

diff --git a/src/pybind/mgr/dashboard_v2/frontend/src/assets/1280px-Mimic_Octopus2.jpg b/src/pybind/mgr/dashboard_v2/frontend/src/assets/1280px-Mimic_Octopus2.jpg
new file mode 100644 (file)
index 0000000..f8cf2a8
Binary files /dev/null and b/src/pybind/mgr/dashboard_v2/frontend/src/assets/1280px-Mimic_Octopus2.jpg differ