handle multi-line triggers description, fix #485

src/panel-triggers/partials/module.html

@@ -28,8 +28,14 @@
                   </span>
                   {{trigger.age && "for " + trigger.age}}
 
-                  <span class="alert-list-info alert-list-info-left" ng-if="ctrl.panel.descriptionField">
-                    {{trigger.comments}}
+                  <span class="alert-list-info alert-list-info-left zbx-description"
+                    ng-if="ctrl.panel.descriptionField && !ctrl.panel.descriptionAtNewLine"
+                    ng-bind-html="trigger.comments">
+                  </span>
+                </p>
+                <p class="alert-list-text"
+                  ng-if="trigger.comments && ctrl.panel.descriptionField && ctrl.panel.descriptionAtNewLine">
+                  <span class="alert-list-info zbx-description" ng-bind-html="trigger.comments">
                   </span>
                 </p>
               </div>
@@ -43,7 +49,7 @@
                 <span class="alert-list-text">{{trigger.lastchange || "last change unknown"}}</span>
               </div>
 
-              <div class="trigger-info-block">
+              <div class="trigger-info-block zbx-status-icons">
                 <a ng-if="trigger.url" href="{{trigger.url}}" target="_blank">
                   <i class="fa fa-external-link"></i>
                 </a>

src/panel-triggers/partials/options_tab.html

@@ -31,6 +31,12 @@
       checked="ctrl.panel.descriptionField"
       on-change="ctrl.render()">
     </gf-form-switch>
+    <gf-form-switch class="gf-form" ng-if="ctrl.panel.descriptionField"
+      label-class="width-9"
+      label="At the new line"
+      checked="ctrl.panel.descriptionAtNewLine"
+      on-change="ctrl.render()">
+    </gf-form-switch>
   </div>
 
   <div class="section gf-form-group">

src/panel-triggers/specs/migrations.spec.js

@@ -54,6 +54,7 @@ describe('Triggers Panel schema migration', () => {
       statusField: false,
       severityField: false,
       descriptionField: true,
+      descriptionAtNewLine: false,
       hostsInMaintenance: true,
       showTriggers: 'all triggers',
       sortTriggersBy: { text: 'last change', value: 'lastchange' },
@@ -88,6 +89,7 @@ describe('Triggers Panel schema migration', () => {
       statusField: true,
       severityField: true,
       descriptionField: true,
+      descriptionAtNewLine: false,
       hostsInMaintenance: true,
       showTriggers: 'all triggers',
       sortTriggersBy: { text: 'last change', value: 'lastchange' },

src/panel-triggers/specs/panel_ctrl.spec.js

@@ -77,6 +77,19 @@ describe('TriggerPanelCtrl', () => {
       });
     });
   });
+
+  describe('When formatting triggers', () => {
+    beforeEach(() => {
+      ctx.panelCtrl = createPanelCtrl();
+    });
+
+    it('should handle new lines in trigger description', () => {
+      ctx.panelCtrl.setTriggerSeverity = jest.fn((trigger) => trigger);
+      let trigger = {comments: "this is\ndescription"};
+      const formattedTrigger = ctx.panelCtrl.formatTrigger(trigger);
+      expect(formattedTrigger.comments).toBe("this is<br>description");
+    });
+  });
 });
 
 const defaultTrigger = {

src/panel-triggers/triggers_panel_ctrl.js

@@ -37,6 +37,7 @@ export const PANEL_DEFAULTS = {
   statusField: true,
   severityField: true,
   descriptionField: true,
+  descriptionAtNewLine: false,
   // Options
   hostsInMaintenance: true,
   showTriggers: 'all triggers',
@@ -326,11 +327,16 @@ export class TriggerPanelCtrl extends PanelCtrl {
     let triggerObj = trigger;
 
     // Set host that the trigger belongs
-    if (trigger.hosts.length) {
+    if (trigger.hosts && trigger.hosts.length) {
       triggerObj.host = trigger.hosts[0].name;
       triggerObj.hostTechName = trigger.hosts[0].host;
     }
 
+    // Handle multi-line description
+    if (trigger.comments) {
+      trigger.comments = trigger.comments.replace('\n', '<br>');
+    }
+
     // Format last change and age
     trigger.lastchangeUnix = Number(trigger.lastchange);
     triggerObj = this.setTriggerLastChange(triggerObj);

src/sass/_panel-triggers.scss

@@ -11,15 +11,23 @@
     font-weight: bold;
   }
 
-  .alert-list-info.alert-list-info-left {
+  .alert-list-info.zbx-description {
     color: $gray-3;
   }
 
+  .alert-list-footer {
+    justify-content: flex-start;
+  }
+
   .trigger-info-block {
-    display: inline;
+    display: inline-flex;
+
+    // &.zbx-status-icons {
+    //   margin-bottom: 4px;
+    // }
 
     i, a {
-      margin-left: 0.4rem;
+      margin-left: 0.6rem;
       color: $gray-2;
     }