Misthios/grafana-zabbix
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Changed Trigger panel styles to Grafana Table panel default styles

Browse Source 
for native look.
This commit is contained in:
Alexander Zobnin
2016-01-10 22:58:08 +03:00
parent 1f70b10b38
commit fee13a3f41
1 changed files with 127 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
plugins/panel-triggers/module.html
View File

@@ -1,36 +1,51 @@
<grafana-panel> <div class="table-panel-wrapper">
<div style="padding-top: 10px"> <grafana-panel>
<table class="table table-bordered zbx-trigger-table"> <div class="table-panel-container">
<div class="table-panel-header-bg"></div>
<div class="table-panel-scroll">
<table class="table-panel-table">
<thead> <thead>
<tr> <tr>
<th ng-if="panel.hostField">Host</th> <th ng-if="panel.hostField" style="width: 15%">
<th ng-if="panel.severityField">Severity</th> <div class="table-panel-table-header-inner pointer">
<th style="width: 50%">Issue</th> Host
<th ng-if="panel.lastChangeField">Last change</th> </div>
<th ng-if="panel.ageField">Age</th> </th>
<th ng-if="panel.infoField">Info</th> <th ng-if="panel.severityField" style="width: 120px">
<div class="table-panel-table-header-inner pointer">Severity</div>
</th>
<th>
<div class="table-panel-table-header-inner pointer">Issue</div>
</th>
<th ng-if="panel.lastChangeField" style="width: 180px">
<div class="table-panel-table-header-inner pointer">Last change</div>
</th>
<th ng-if="panel.ageField" style="width: 180px">
<div class="table-panel-table-header-inner pointer">Age</div>
</th>
<th ng-if="panel.infoField" style="width: 100px">
<div class="table-panel-table-header-inner pointer">Info</div>
</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr class="" <tr ng-repeat="trigger in triggerList">
ng-repeat="trigger in triggerList"
style="background-color: {{trigger.color}}">
<td ng-if="panel.hostField"> <td ng-if="panel.hostField">
<div> <div>
<span><strong>{{trigger.host}}</strong></span> <span><strong>{{trigger.host}}</strong></span>
</div> </div>
</td> </td>
<td ng-if="panel.severityField"> <td ng-if="panel.severityField" style="background-color: {{trigger.color}}; color: white">
<div> <div>
{{trigger.severity}} {{trigger.severity}}
</div> </div>
</td> </td>
<td> <td style="background-color: {{trigger.color}}; color: white">
<div> <div>
{{trigger.description}} {{trigger.description}}
<a ng-if="trigger.comments" <a ng-if="trigger.comments"
class="pointer" class="pointer"
style="float: right;" style="float: right; padding-right: 8px"
data-toggle="collapse" data-toggle="collapse"
data-target="#comments-{{trigger.triggerid}}" data-target="#comments-{{trigger.triggerid}}"
bs-tooltip="'Show additional trigger description'" bs-tooltip="'Show additional trigger description'"
@@ -53,8 +68,7 @@
id="acknowledges-{{trigger.triggerid}}" id="acknowledges-{{trigger.triggerid}}"
ng-if="trigger.acknowledges"> ng-if="trigger.acknowledges">
<div style="padding-top: 12px;"> <div style="padding-top: 12px;">
<table class="table table-condensed table-striped table-bordered zbx-table-ack" <table class="table table-condensed">
style="background-color: initial">
<thead> <thead>
<tr> <tr>
<th><small>Time</small></th> <th><small>Time</small></th>
@@ -88,23 +102,20 @@
<td ng-if="panel.infoField"> <td ng-if="panel.infoField">
<!-- Trigger Url --> <!-- Trigger Url -->
<a class="zbx-trigger-info" <a ng-if="trigger.url"
ng-if="trigger.url"
href="{{trigger.url}}" href="{{trigger.url}}"
target="_blank"> target="_blank">
<i class="fa fa-external-link"></i> <i class="fa fa-external-link"></i>
</a> </a>
<!-- Trigger state --> <!-- Trigger state -->
<span class="zbx-trigger-info" <span ng-if="trigger.state === '1'"
ng-if="trigger.state === '1'"
bs-tooltip="'{{trigger.error}}'"> bs-tooltip="'{{trigger.error}}'">
<i class="fa fa-question-circle"></i> <i class="fa fa-question-circle"></i>
</span> </span>
<!-- Trigger acknowledges --> <!-- Trigger acknowledges -->
<a class="zbx-trigger-info" <a ng-if="trigger.acknowledges"
ng-if="trigger.acknowledges"
bs-tooltip="'Acknowledges ({{trigger.acknowledges.length}})'" bs-tooltip="'Acknowledges ({{trigger.acknowledges.length}})'"
data-toggle="collapse" data-toggle="collapse"
data-target="#acknowledges-{{trigger.triggerid}}"> data-target="#acknowledges-{{trigger.triggerid}}">
@@ -115,4 +126,7 @@
</tbody> </tbody>
</table> </table>
</div> </div>
</grafana-panel> </div>
<div class="table-panel-footer"></div>
</grafana-panel>
</div>