From: Volker Theile <vtheile@suse.com>
Date: Mon, 14 May 2018 12:57:43 +0000 (+0200)
Subject: mgr/dashboard: Improve error panel
X-Git-Tag: v13.1.1~27^2
X-Git-Url: http://git-server-git.apps.pok.os.sepia.ceph.com/?a=commitdiff_plain;h=refs%2Fpull%2F21978%2Fhead;p=ceph.git

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 f0339b1e0328..c1c6f163db21 100644
--- 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 e69de29bb2d1..f4c09854f0d2 100644
--- 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 1d32aa623c52..406533572782 100644
--- 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.