feat(motd): add the ability to use custom style (#2918)

* feat(motd): rework motd display mechanism for more flexibility on motd content

* feat(api): enhance MOTD

* refactor(api): refactor MOTD related codebase

* feat(motd): hash on message

app/portainer/components/motd-panel/motd-panel.js

@@ -0,0 +1,8 @@
+angular.module('portainer.app').component('motdPanel', {
+  templateUrl: './motdPanel.html',
+  bindings: {
+    motd: '<',
+    dismissAction: '&?'
+  },
+  transclude: true
+});

app/portainer/components/motd-panel/motdPanel.html

@@ -0,0 +1,26 @@
+<div class="row">
+  <div class="col-sm-12">
+    <rd-widget>
+      <rd-widget-body classes="motd-body">
+        <style ng-if="$ctrl.motd.Style">
+          {{ $ctrl.motd.Style }}
+        </style>
+        <div ng-style="{{ $ctrl.motd.ContentLayout ? $ctrl.motd.ContentLayout : {} }}">
+          <div class="col-sm-12 form-section-title">
+            <span style="float: left;">
+              {{ $ctrl.motd.Title }}
+            </span>
+            <span class="small" style="float: right;" ng-if="$ctrl.dismissAction">
+              <a ng-click="$ctrl.dismissAction()"><i class="fa fa-times"></i> dismiss</a>
+            </span>
+          </div>
+          <div class="form-group">
+            <span class="text-muted">
+              <p ng-bind-html="$ctrl.motd.Message"></p>
+            </span>
+          </div>
+        </div>
+      </rd-widget-body>
+    </rd-widget>
+  </div>
+</div>

app/portainer/models/motd.js

@@ -2,4 +2,6 @@ export function MotdViewModel(data) {
   this.Title = data.Title;
   this.Message = data.Message;
   this.Hash = data.Hash;
+  this.Style = data.Style;
+  this.ContentLayout = data.ContentLayout;
 }

app/portainer/views/home/home.html

@@ -7,14 +7,11 @@
   <rd-header-content>Endpoints</rd-header-content>
 </rd-header>
 
-<information-panel
+<motd-panel
   ng-if="motd && motd.Message !== '' && applicationState.UI.dismissedInfoHash !== motd.Hash"
-  title-text="{{ motd.Title }}"
+  motd="motd"
   dismiss-action="dismissImportantInformation(motd.Hash)">
-  <span class="text-muted">
-    <p ng-bind-html="motd.Message"></p>
-  </span>
-</information-panel>
+</motd-panel>
 
 <information-panel
   ng-if="!isAdmin && endpoints.length === 0"