Make it possible to show a header message for datatables (#12146)

* Make it possible to show a header message for datatables

* update changelog

* add comment that messages will be printed raw

4 files changed, 10 insertions, 4 deletions

diff --git a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
index 2015f6ea2e..fe11180aa8 100644
--- a/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
+++ b/plugins/CoreHome/stylesheets/dataTable/_dataTable.less
@@ -183,7 +183,7 @@ table.dataTable img {
   position: absolute;
 }
 
-.datatableFooterMessage {
+.datatableHeaderMessage, .datatableFooterMessage {
   color: #888;
   text-align: left;
   margin: 10px;
diff --git a/plugins/CoreHome/templates/_dataTable.twig b/plugins/CoreHome/templates/_dataTable.twig
index b5635d9921..cdd5905933 100644
--- a/plugins/CoreHome/templates/_dataTable.twig
+++ b/plugins/CoreHome/templates/_dataTable.twig
@@ -49,6 +49,10 @@
         {% if error is defined %}
             {{ error.message }}
         {% else %}
+            {% if properties.show_header_message is defined and properties.show_header_message is not empty %}
+                <div class='datatableHeaderMessage'>{{ properties.show_header_message | raw }}</div>
+            {% endif %}
+
             {% if isDataTableEmpty %}
                 <div class="pk-emptyDataTable">
                 {% if showReportDataWasPurgedMessage is defined and showReportDataWasPurgedMessage %}
diff --git a/plugins/Dashboard/stylesheets/widget.less b/plugins/Dashboard/stylesheets/widget.less
index 8127de0547..c441b9c663 100644
--- a/plugins/Dashboard/stylesheets/widget.less
+++ b/plugins/Dashboard/stylesheets/widget.less
@@ -140,8 +140,10 @@
   background-color: @theme-color-widget-background;
 }
 
-.widget .datatableFooterMessage {
-  padding-left: 12px;
+.widget {
+  .datatableHeaderMessage, .datatableFooterMessage {
+    padding-left: 12px;
+  }
 }
 
 .bar-graph-colors[data-name=grid-background] {
diff --git a/plugins/Morpheus/stylesheets/main.less b/plugins/Morpheus/stylesheets/main.less
index cbf86d85cd..c79bde51a8 100644
--- a/plugins/Morpheus/stylesheets/main.less
+++ b/plugins/Morpheus/stylesheets/main.less
@@ -510,7 +510,7 @@ div.sparkline {
     color: @theme-color-text;
 }
 
-.datatableFooterMessage {
+.datatableHeaderMessage, .datatableFooterMessage {
     .font-default(13px, 18px);
     color: @color-silver;
     font-weight: normal;