Use bootstrap alert.

Signed-off-by: Volker Theile <vtheile@suse.com>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.html b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.html
index 392a5b598715a6032d3067fc44ace658f6842846..7a0e66a4102eeaadb3bf1b2efd418c3292095672 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.html
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.html
@@ -1,23 +1,18 @@
-<div class="panel panel-default">
-  <div class="panel-heading">
-    <h3 class="panel-title">
-      <i class="fa fa-exclamation-triangle fa-fw icon-danger"
-         aria-hidden="true"></i> {{ title }}
-    </h3>
-  </div>
-  <div class="panel-body">
-    <ng-content></ng-content>
-  </div>
-  <div class="panel-footer"
-       *ngIf="backAction.observers.length > 0">
-    <div class="button-group text-right">
-      <button class="btn btn-sm btn-default tc_backButton"
-              type="button"
-              (click)="backAction.emit()"
-              autofocus
-              i18n>
-        Back
-      </button>
-    </div>
-  </div>
+<alert type="danger">
+  <strong>
+    <i class="fa fa-exclamation-triangle fa-fw icon-danger"
+       aria-hidden="true"></i> {{ title }}
+  </strong>
+  <ng-content></ng-content>
+</alert>
+
+<div class="button-group text-right"
+     *ngIf="backAction.observers.length > 0">
+  <button class="btn btn-sm btn-default tc_backButton"
+          type="button"
+          (click)="backAction.emit()"
+          autofocus
+          i18n>
+    Back
+  </button>
 </div>

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.spec.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.spec.ts
index 563bf529eca3856f3d9fd6ae17c08dc1eff948d4..d1ed5e80619efcb1275704d26d400cf53d7e35b8 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.spec.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.spec.ts
@@ -1,5 +1,7 @@
 import { async, ComponentFixture, TestBed } from '@angular/core/testing';
 
+import { AlertModule } from 'ngx-bootstrap';
+
 import { ErrorPanelComponent } from './error-panel.component';
 
 describe('ErrorPanelComponent', () => {
@@ -8,7 +10,8 @@ describe('ErrorPanelComponent', () => {
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [ ErrorPanelComponent ]
+      declarations: [ ErrorPanelComponent ],
+      imports: [ AlertModule.forRoot() ]
     })
     .compileComponents();
   }));

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.ts b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.ts
index 497de0397efb8230d300d92599065dbfbefac071..1d32aa623c520c354f72573bbf7ea8b80dd85a0c 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.ts
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.ts
@@ -8,10 +8,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
 export class ErrorPanelComponent {
 
   /**
-   * The title to be displayed. Defaults to 'Error'.
+   * The title to be displayed. Defaults to 'Error!'.
    * @type {string}
    */
-  @Input() title = 'Error';
+  @Input() title = 'Error!';
 
   /**
    * The event that is triggered when the 'Back' button is pressed.