From eafdae471f33964f151bd9cc061ba624563dc581 Mon Sep 17 00:00:00 2001
From: Volker Theile <vtheile@suse.com>
Date: Mon, 14 May 2018 14:57:43 +0200
Subject: [PATCH] mgr/dashboard: Improve error panel

Signed-off-by: Volker Theile <vtheile@suse.com>
(cherry picked from commit a8dae80dce973c441db3d4b914febd4b48725f1e)
---
 .../error-panel/error-panel.component.html    | 21 ++++++++++++++-----
 .../error-panel/error-panel.component.scss    |  9 ++++++++
 .../error-panel/error-panel.component.ts      |  5 ++---
 3 files changed, 27 insertions(+), 8 deletions(-)

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 f0339b1e03284..c1c6f163db210 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 e69de29bb2d1d..f4c09854f0d2d 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 1d32aa623c520..4065335727826 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.
-- 
2.39.5