triggers panel: fix broken styles, #522
This commit is contained in:
Alexander Zobnin
@@ -1,77 +1,87 @@
|
||||
<div class="triggers-panel-container">
|
||||
<div class="triggers-panel-scroll">
|
||||
<section class="card-section card-list-layout-list">
|
||||
<ol class="card-list">
|
||||
<li class="card-item-wrapper" ng-repeat="trigger in ctrl.currentTriggersPage">
|
||||
<div class="alert-list card-item zbx-trigger-card">
|
||||
<div class="alert-list-body">
|
||||
<div class="alert-list-icon alert-list-item-state alert-list-icon--alerting"
|
||||
ng-style="{color: trigger.color}">
|
||||
<i class="icon-gf" ng-class="ctrl.getAlertIconClass(trigger)"></i>
|
||||
</div>
|
||||
<div class="alert-list-main">
|
||||
<p class="alert-list-title">
|
||||
{{trigger.description}}
|
||||
<span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
|
||||
<i ng-if="trigger.maintenance" class="fa fa-wrench zbx-maintenance-icon"></i>
|
||||
{{ ctrl.formatHostName(trigger) }}
|
||||
</span>
|
||||
<span class="zabbix-hostname" ng-if="ctrl.panel.hostGroups">
|
||||
{{ ctrl.formatHostGroups(trigger) }}
|
||||
</span>
|
||||
<ol class="alert-rule-list">
|
||||
<!-- Trigger list item -->
|
||||
<li class="alert-rule-item zbx-trigger-card" ng-repeat="trigger in ctrl.currentTriggersPage">
|
||||
|
||||
<span class="zbx-trigger-tags" ng-if="ctrl.panel.showTags && trigger.tags">
|
||||
<span ng-repeat="tag in trigger.tags" ng-click="ctrl.addTagFilter(tag, trigger.datasource)"
|
||||
tag-color-from-name="tag.tag+tag.value" class="label label-tag zbx-tag">
|
||||
{{tag.tag}}: {{tag.value}}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
<!-- Heart icon -->
|
||||
<div class="alert-rule-item__icon" ng-style="{color: trigger.color}">
|
||||
<i class="icon-gf" ng-class="ctrl.getAlertIconClass(trigger)"></i>
|
||||
</div>
|
||||
|
||||
<p class="alert-list-text">
|
||||
<span ng-if="ctrl.panel.statusField" class="alert-list-state" ng-class="ctrl.getAlertStateClass(trigger)">
|
||||
{{ctrl.triggerStatusMap[trigger.value]}}
|
||||
</span>
|
||||
<span ng-if="ctrl.panel.severityField" class="alert-list-state" ng-class="ctrl.getAlertStateClass(trigger)"
|
||||
ng-style="{color: trigger.color}">
|
||||
{{trigger.severity}}
|
||||
<div class="alert-rule-item__body">
|
||||
<div class="alert-rule-item__header">
|
||||
|
||||
<p class="alert-rule-item__name">
|
||||
<span class="zabbix-trigger-name">{{trigger.description}}</span>
|
||||
<span class="zabbix-hostname" ng-if="ctrl.panel.hostField || ctrl.panel.hostTechNameField">
|
||||
<i ng-if="trigger.maintenance" class="fa fa-wrench zbx-maintenance-icon"></i>
|
||||
{{ ctrl.formatHostName(trigger) }}
|
||||
</span>
|
||||
<span class="zabbix-hostname" ng-if="ctrl.panel.hostGroups">
|
||||
{{ ctrl.formatHostGroups(trigger) }}
|
||||
</span>
|
||||
|
||||
<span class="zbx-trigger-tags" ng-if="ctrl.panel.showTags && trigger.tags">
|
||||
<span ng-repeat="tag in trigger.tags" ng-click="ctrl.addTagFilter(tag, trigger.datasource)"
|
||||
tag-color-from-name="tag.tag+tag.value" class="label label-tag zbx-tag">
|
||||
{{tag.tag}}: {{tag.value}}
|
||||
</span>
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div class="alert-rule-item__text">
|
||||
<span ng-if="ctrl.panel.statusField" ng-class="ctrl.getAlertStateClass(trigger)">
|
||||
{{ctrl.triggerStatusMap[trigger.value]}}
|
||||
</span>
|
||||
<span ng-if="ctrl.panel.severityField" ng-class="ctrl.getAlertStateClass(trigger)"
|
||||
ng-style="{color: trigger.color}">
|
||||
{{trigger.severity}}
|
||||
</span>
|
||||
<span class="alert-rule-item__time">
|
||||
{{trigger.age && "for " + trigger.age}}
|
||||
|
||||
<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>
|
||||
</span>
|
||||
<span class="zbx-description"
|
||||
ng-if="ctrl.panel.descriptionField && !ctrl.panel.descriptionAtNewLine"
|
||||
ng-bind-html="trigger.comments">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- If description at the new line -->
|
||||
<div class="alert-rule-item__text"
|
||||
ng-if="trigger.comments && ctrl.panel.descriptionField && ctrl.panel.descriptionAtNewLine">
|
||||
<span class="alert-rule-item__info zbx-description zbx-description--newline"
|
||||
ng-bind-html="trigger.comments">
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="alert-list-footer">
|
||||
<div class="trigger-info-block">
|
||||
<span ng-if="ctrl.panel.datasources.length > 1" class="alert-list-text zabbix-trigger-source">
|
||||
<i class="fa fa-database"></i>
|
||||
{{trigger.datasource}}
|
||||
</span>
|
||||
<span class="alert-list-text">{{trigger.lastchange || "last change unknown"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- Datasource name -->
|
||||
<div class="alert-rule-item__time zabbix-trigger-source" ng-if="ctrl.panel.datasources.length > 1">
|
||||
<span>
|
||||
<i class="fa fa-database"></i>
|
||||
{{trigger.datasource}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
<div class="alert-rule-item__time">
|
||||
<span>{{trigger.lastchange || "last change unknown"}}</span>
|
||||
|
||||
<ack-tooltip ng-if="trigger.lastEvent" ack="trigger.acknowledges" trigger="trigger"
|
||||
on-ack="ctrl.acknowledgeTrigger" context="ctrl">
|
||||
</ack-tooltip>
|
||||
</div>
|
||||
<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>
|
||||
|
||||
<span ng-if="trigger.state === '1'" bs-tooltip="'{{trigger.error}}'">
|
||||
<i class="fa fa-question-circle"></i>
|
||||
</span>
|
||||
|
||||
<ack-tooltip ng-if="trigger.lastEvent" ack="trigger.acknowledges" trigger="trigger"
|
||||
on-ack="ctrl.acknowledgeTrigger" context="ctrl">
|
||||
</ack-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
Reference in New Issue
Block a user