mgr/dashboard: Error page cleanup

Resolves: rhbz#1891012

Some error page cleanups

Signed-off-by: Nizamudeen A <nia@redhat.com>
(cherry picked from commit ec899f2de30760edd6aa10fb7d5bdd61fadf83af)

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.html b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.html
index 0d63566acff364ffa50268ac72cbab83e52dd9b7..259afc51398515ab8609934ee2f4b47eadbc42d1 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.html
@@ -2,48 +2,62 @@
   <title>Error Page</title>
   <base target="_blank">
 </head>
-<div class="dashboard row">
-  <div class="text-center content">
-    <br>
-    <div *ngIf="header && message; else elseBlock">
-    <i class="{{ icon }}"
-       aria-hidden="true"></i>
-    <br><br><br>
-    <h3><b>{{ header }}</b></h3>
-      <br>
-    <h4>{{ message }}</h4>
-    </div>
-    <ng-template #elseBlock>
-      <i class="fa fa-exclamation-triangle"
-         aria-hidden="true"></i>
-      <br><br><br>
-      <h3 i18n><b>Page not Found</b></h3>
-        <br>
-      <h4 i18n>Sorry, we couldn’t find what you were looking for.
-      The page you requested may have been changed or moved.</h4>
-    </ng-template>
-    <div *ngIf="section">
-      <h4 i18n>Please consult the <a href="{{ docUrl }}">documentation</a> on how to configure and enable
-        the {{ section_info }} management functionality.</h4>
-    </div>
-    <br><br>
-    <div *ngIf="(button_name && button_route) || bootstrap; else dashboardButton">
-      <button class="btn btn-primary"
-              [routerLink]="button_route"
-              *ngIf="button_name && button_route && !bootstrap"
-              i18n>{{ button_name }}</button>
-
-      <button class="btn btn-primary"
-              (click)="doBootstrap()"
-              *ngIf="bootstrap"
-              i18n>{{ button_name }}</button>
-    </div>
-    <ng-template #dashboardButton>
-    <div>
-      <button class="btn btn-primary"
-              [routerLink]="'/dashboard'"
-              i18n>Go To Dashboard</button>
+<div class="container h-75">
+  <div class="row h-100 justify-content-center align-items-center">
+    <div class="blank-page">
+      <div *ngIf="header && message; else elseBlock">
+        <i [ngClass]="icon"
+          class="mx-auto d-block"></i>
+
+        <div class="mt-4 text-center">
+          <h3><b>{{ header }}</b></h3>
+          <h4 class="mt-3"
+              *ngIf="header !== message">{{ message }}</h4>
+            <h4 *ngIf="section"
+                i18n>Please consult the <a href="{{ docUrl }}">documentation</a> on how to configure and enable
+                     the {{ sectionInfo }} management functionality.</h4>
+        </div>
+      </div>
+
+      <div class="mt-4">
+        <div class="text-center"
+             *ngIf="(buttonName && buttonRoute) || uiConfig; else dashboardButton">
+          <button class="btn btn-primary"
+                  [routerLink]="buttonRoute"
+                  *ngIf="!uiConfig; else configureButtonTpl"
+                  i18n>{{ buttonName }}</button>
+        </div>
+      </div>
     </div>
     </ng-template>
   </div>
 </div>
+
+<ng-template #configureButtonTpl>
+  <button class="btn btn-primary"
+          (click)="doConfigure()"
+          [attr.title]="buttonTitle"
+          *ngIf="uiConfig"
+          i18n>{{ buttonName }}</button>
+</ng-template>
+
+
+<ng-template #elseBlock>
+  <i class="fa fa-exclamation-triangle mx-auto d-block text-danger"></i>
+
+  <div class="mt-4 text-center">
+    <h3 i18n><b>Page not Found</b></h3>
+
+    <h4 class="mt-4"
+        i18n>Sorry, we couldn’t find what you were looking for.
+             The page you requested may have been changed or moved.</h4>
+  </div>
+</ng-template>
+
+<ng-template #dashboardButton>
+  <div class="mt-4 text-center">
+    <button class="btn btn-primary"
+            [routerLink]="'/dashboard'"
+            i18n>Go To Dashboard</button>
+  </div>
+</ng-template>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.scss
index 618202da8bd23456f14a0f59a2c0199e79bcf665..feb4e0f95829a2b54d3742d9c3e6f581c8ab882f 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.scss
@@ -9,35 +9,6 @@ i {
   margin-top: 120px;
 }
 
-.text-center {
-  background-color: vv.$body-bg-alt;
-}
-
-.dashboard {
-  background-color: vv.$body-bg-alt;
-  height: 100%;
-  position: relative;
-}
-
-.content {
-  left: 50%;
-  position: absolute;
-  top: 40%;
-  transform: translate(-50%, -50%);
-  width: 100%;
-}
-
-.row {
-  display: block;
-  margin-left: -29px;
-  margin-right: -29px;
-  padding-top: 10em;
-}
-
-.fa-exclamation-triangle {
-  color: vv.$danger;
-}
-
 .fa-lock {
   color: vv.$danger;
 }

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.spec.ts
index 3e9b24ebf8e611cc560f7e679922ac4ea2ec9056..65b93330033fbdbc18736a9f0794964c0744d0a3 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.spec.ts
@@ -2,6 +2,8 @@ import { HttpClientTestingModule } from '@angular/common/http/testing';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 
+import { ToastrModule } from 'ngx-toastr';
+
 import { SharedModule } from '~/app/shared/shared.module';
 import { configureTestBed } from '~/testing/unit-test-helper';
 import { ErrorComponent } from './error.component';
@@ -12,7 +14,12 @@ describe('ErrorComponent', () => {
 
   configureTestBed({
     declarations: [ErrorComponent],
-    imports: [HttpClientTestingModule, RouterTestingModule, SharedModule]
+    imports: [
+      HttpClientTestingModule,
+      RouterTestingModule,
+      SharedModule,
+      ToastrModule.forRoot()
+    ]
   });
 
   beforeEach(() => {

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts
index ae57035693431270f17d5ee8a97fb249d64eb803..6a995bc4e583a1a7f5212b2ca5761a9b5cfe538b 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/core/error/error.component.ts
@@ -25,14 +25,19 @@ export class ErrorComponent implements OnDestroy, OnInit {
   docUrl: string;
   source: string;
   routerSubscription: Subscription;
-  bootstrap: string;
+  uiConfig: string;
   uiApiPath: string;
-  button_route: string;
-  button_name: string;
+  buttonRoute: string;
+  buttonName: string;
+  buttonTitle: string;
+  component: string;
 
-  constructor(private router: Router, private docService: DocService,
+  constructor(
+    private router: Router,
+    private docService: DocService,
     private http: HttpClient,
-    private notificationService: NotificationService, ) {}
+    private notificationService: NotificationService
+  ) {}
 
   ngOnInit() {
     this.fetchData();
@@ -43,27 +48,18 @@ export class ErrorComponent implements OnDestroy, OnInit {
       });
   }
 
-  doBootstrap() {
+  doConfigure() {
     this.http.post(`ui-api/${this.uiApiPath}/configure`, {}).subscribe({
       next: () => {
-        this.notificationService.show(
-          NotificationType.info,
-          'Configuring RBD Mirroring'
-        );
+        this.notificationService.show(NotificationType.info, `Configuring ${this.component}`);
       },
       error: (error: any) => {
-        this.notificationService.show(
-          NotificationType.error,
-          error
-        );
+        this.notificationService.show(NotificationType.error, error);
       },
       complete: () => {
         setTimeout(() => {
           this.router.navigate([this.uiApiPath]);
-          this.notificationService.show(
-            NotificationType.success,
-            'Configured RBD Mirroring'
-          );
+          this.notificationService.show(NotificationType.success, `Configured ${this.component}`);
         }, 3000);
       }
     });
@@ -79,15 +75,21 @@ export class ErrorComponent implements OnDestroy, OnInit {
       this.message = history.state.message;
       this.header = history.state.header;
       this.section = history.state.section;
+<<<<<<< HEAD
       this.section_info = history.state.section_info;
       this.button_name = history.state.button_name;
       this.button_route = history.state.button_route;
+=======
+      this.sectionInfo = history.state.section_info;
+>>>>>>> 5b33f500f5d (mgr/dashboard: Error page cleanup)
       this.icon = history.state.icon;
       this.source = history.state.source;
-      this.bootstrap = history.state.bootstrap;
+      this.uiConfig = history.state.uiConfig;
       this.uiApiPath = history.state.uiApiPath;
-      this.button_route = history.state.button_route;
-      this.button_name = history.state.button_name;
+      this.buttonRoute = history.state.button_route;
+      this.buttonName = history.state.button_name;
+      this.buttonTitle = history.state.button_title;
+      this.component = history.state.component;
       this.docUrl = this.docService.urlGenerator(this.section);
     } catch (error) {
       this.router.navigate(['/error']);

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/module-status-guard.service.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/module-status-guard.service.ts
index 9d677aee53f7f1010c1bea64d4ccf39faf55dcd2..df6f4854e1967d45090387c48ffdd0fb65521016 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/services/module-status-guard.service.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/services/module-status-guard.service.ts
@@ -85,7 +85,8 @@ export class ModuleStatusGuardService implements CanActivate, CanActivateChild {
               button_title: config.button_title,
               uiConfig: config.uiConfig,
               uiApiPath: config.uiApiPath,
-              icon: Icons.wrench
+              icon: Icons.wrench,
+              component: config.component
             }
           });
         }