mgr/dashboard: Improve error panel

Signed-off-by: Volker Theile <vtheile@suse.com>
(cherry picked from commit a8dae80dce973c441db3d4b914febd4b48725f1e)

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 f0339b1e032849a8b32eb23703c30fe04aa44fe0..c1c6f163db210449ec75f9dc09215414b1426583 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,9 +1,20 @@
 <alert type="danger">
-  <strong>
-    <i class="fa fa-exclamation-triangle fa-fw alert-danger"
-       aria-hidden="true"></i> {{ title }}
-  </strong>
-  <ng-content></ng-content>
+  <table>
+    <tr>
+      <td rowspan="2" class="error-panel-alert-icon">
+        <i class="fa fa-3x fa-exclamation-triangle alert-danger"
+           aria-hidden="true"></i>
+      </td>
+      <td class="error-panel-alert-title">
+        {{ title }}
+      </td>
+    </tr>
+    <tr>
+      <td class="error-panel-alert-text">
+        <ng-content></ng-content>
+      </td>
+    </tr>
+  </table>
 </alert>
 
 <div class="button-group text-right"

diff --git a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss
index e69de29bb2d1d6434b8b29ae775ad8c2e48c5391..f4c09854f0d2ddfdacbe6c3c371521d36132642e 100644 (file)
--- a/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss
+++ b/src/pybind/mgr/dashboard/frontend/src/app/shared/components/error-panel/error-panel.component.scss
@@ -0,0 +1,9 @@
+.error-panel-alert-icon {
+  vertical-align: top;
+  padding-right: 15px; // See @alert-padding in bootstrap/less/variables.less
+}
+.error-panel-alert-title {
+  font-weight: bold;
+}
+.error-panel-alert-text {
+}

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 1d32aa623c520c354f72573bbf7ea8b80dd85a0c..4065335727826b27c89a42c1282088785efa27b4 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
@@ -6,12 +6,11 @@ import { Component, EventEmitter, Input, Output } from '@angular/core';
   styleUrls: ['./error-panel.component.scss']
 })
 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.