show trigger tags, #487

src/datasource-zabbix/zabbixAPI.service.js

@@ -361,7 +361,8 @@ function ZabbixAPIServiceFactory(alertSrv, zabbixAPICoreService) {
         selectGroups: ['name'],
         selectHosts: ['name', 'host', 'maintenance_status'],
         selectItems: ['name', 'key_', 'lastvalue'],
-        selectLastEvent: 'extend'
+        selectLastEvent: 'extend',
+        selectTags: 'extend'
       };
 
       if (showTriggers) {

src/panel-triggers/partials/module.html

@@ -16,6 +16,12 @@
                     <i ng-if="trigger.maintenance" class="fa fa-wrench zbx-maintenance-icon"></i>
                     {{ ctrl.formatHostName(trigger) }}
                   </span>
+
+                  <span class="zbx-trigger-tags" ng-if="ctrl.panel.showTags && trigger.tags">
+                    <span ng-repeat="tag in trigger.tags" tag-color-from-name="tag.tag+tag.value" class="label label-tag zbx-tag">
+                      {{tag.tag}}: {{tag.value}}
+                    </span>
+                  </span>
                 </p>
 
                 <p class="alert-list-text">

src/panel-triggers/partials/options_tab.html

@@ -13,6 +13,12 @@
       checked="ctrl.panel.hostTechNameField"
       on-change="ctrl.render()">
     </gf-form-switch>
+    <gf-form-switch class="gf-form"
+      label-class="width-9"
+      label="Tags"
+      checked="ctrl.panel.showTags"
+      on-change="ctrl.render()">
+    </gf-form-switch>
     <gf-form-switch class="gf-form"
       label-class="width-9"
       label="Status"

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

@@ -51,6 +51,7 @@ describe('Triggers Panel schema migration', () => {
       },
       hostField: true,
       hostTechNameField: false,
+      showTags: true,
       statusField: false,
       severityField: false,
       descriptionField: true,
@@ -86,6 +87,7 @@ describe('Triggers Panel schema migration', () => {
       },
       hostField: true,
       hostTechNameField: false,
+      showTags: true,
       statusField: true,
       severityField: true,
       descriptionField: true,

src/panel-triggers/triggers_panel_ctrl.js

@@ -34,6 +34,7 @@ export const PANEL_DEFAULTS = {
   // Fields
   hostField: true,
   hostTechNameField: false,
+  showTags: true,
   statusField: true,
   severityField: true,
   descriptionField: true,
@@ -332,6 +333,11 @@ export class TriggerPanelCtrl extends PanelCtrl {
       triggerObj.hostTechName = trigger.hosts[0].host;
     }
 
+    // Set tags if present
+    if (trigger.tags && trigger.tags.length === 0) {
+      trigger.tags = null;
+    }
+
     // Handle multi-line description
     if (trigger.comments) {
       trigger.comments = trigger.comments.replace('\n', '<br>');
@@ -537,11 +543,15 @@ export class TriggerPanelCtrl extends PanelCtrl {
         triggerCardElem.find('.alert-list-icon').css({'font-size': fontSize + '%'});
         triggerCardElem.find('.alert-list-title').css({'font-size': fontSize + '%'});
         triggerCardElem.find('.alert-list-text').css({'font-size': fontSize * 0.8 + '%'});
+        triggerCardElem.find('.zbx-tag').css({'font-size': fontSize * 0.6 + '%'});
+        triggerCardElem.find('.zbx-tag').css({'line-height': fontSize / 100 * 16 + 'px'});
       } else {
         // remove css
         triggerCardElem.find('.alert-list-icon').css({'font-size': ''});
         triggerCardElem.find('.alert-list-title').css({'font-size': ''});
         triggerCardElem.find('.alert-list-text').css({'font-size': ''});
+        triggerCardElem.find('.zbx-tag').css({'font-size': ''});
+        triggerCardElem.find('.zbx-tag').css({'line-height': ''});
       }
     }
 

src/sass/_panel-triggers.scss

@@ -15,6 +15,16 @@
     color: $gray-3;
   }
 
+  .zbx-trigger-tags {
+    margin-left: 0.6rem;
+
+    .zbx-tag {
+      color: $zbx-tag-color;
+      // opacity: 0.9;
+      padding: 0px 6px;
+    }
+  }
+
   .alert-list-footer {
     justify-content: flex-start;
   }

src/sass/_variables.dark.scss

@@ -36,3 +36,4 @@ $text-color:            $gray-4;
 $tight-form-func-bg:    #333;
 $grafanaListAccent:     lighten($dark-2, 2%);
 
+$zbx-tag-color: $gray-5;

src/sass/_variables.light.scss

@@ -34,3 +34,5 @@ $body-color:            $gray-1;
 $text-color:            $gray-1;
 $tight-form-func-bg:    $gray-5;
 $grafanaListAccent:     $gray-5;
+
+$zbx-tag-color: $gray-6;