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

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

@@ -1,118 +1,132 @@
<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">
<thead> <div class="table-panel-header-bg"></div>
<tr> <div class="table-panel-scroll">
<th ng-if="panel.hostField">Host</th> <table class="table-panel-table">
<th ng-if="panel.severityField">Severity</th> <thead>
<th style="width: 50%">Issue</th> <tr>
<th ng-if="panel.lastChangeField">Last change</th> <th ng-if="panel.hostField" style="width: 15%">
<th ng-if="panel.ageField">Age</th> <div class="table-panel-table-header-inner pointer">
<th ng-if="panel.infoField">Info</th> Host
</tr> </div>
</thead> </th>
<tbody> <th ng-if="panel.severityField" style="width: 120px">
<tr class="" <div class="table-panel-table-header-inner pointer">Severity</div>
ng-repeat="trigger in triggerList" </th>
style="background-color: {{trigger.color}}"> <th>
<td ng-if="panel.hostField"> <div class="table-panel-table-header-inner pointer">Issue</div>
<div> </th>
<span><strong>{{trigger.host}}</strong></span> <th ng-if="panel.lastChangeField" style="width: 180px">
</div> <div class="table-panel-table-header-inner pointer">Last change</div>
</td> </th>
<td ng-if="panel.severityField"> <th ng-if="panel.ageField" style="width: 180px">
<div> <div class="table-panel-table-header-inner pointer">Age</div>
{{trigger.severity}} </th>
</div> <th ng-if="panel.infoField" style="width: 100px">
</td> <div class="table-panel-table-header-inner pointer">Info</div>
<td> </th>
<div> </tr>
{{trigger.description}} </thead>
<a ng-if="trigger.comments" <tbody>
class="pointer" <tr ng-repeat="trigger in triggerList">
style="float: right;" <td ng-if="panel.hostField">
data-toggle="collapse" <div>
data-target="#comments-{{trigger.triggerid}}" <span><strong>{{trigger.host}}</strong></span>
bs-tooltip="'Show additional trigger description'" </div>
data-placement="top"> </td>
<i class="fa fa-file-text-o"></i> <td ng-if="panel.severityField" style="background-color: {{trigger.color}}; color: white">
</a> <div>
</div> {{trigger.severity}}
</div>
</td>
<td style="background-color: {{trigger.color}}; color: white">
<div>
{{trigger.description}}
<a ng-if="trigger.comments"
class="pointer"
style="float: right; padding-right: 8px"
data-toggle="collapse"
data-target="#comments-{{trigger.triggerid}}"
bs-tooltip="'Show additional trigger description'"
data-placement="top">
<i class="fa fa-file-text-o"></i>
</a>
</div>
<!-- Trigger comments --> <!-- Trigger comments -->
<div class="collapse" <div class="collapse"
id="comments-{{trigger.triggerid}}" id="comments-{{trigger.triggerid}}"
ng-if="trigger.comments"> ng-if="trigger.comments">
<div> <div>
<small>{{trigger.comments}}</small> <small>{{trigger.comments}}</small>
</div> </div>
</div> </div>
<!-- Trigger acknowledges --> <!-- Trigger acknowledges -->
<div class="collapse" <div class="collapse"
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> <th><small>User</small></th>
<th><small>User</small></th> <th><small>Comments</small></th>
<th><small>Comments</small></th> </tr>
</tr> </thead>
</thead> <tbody>
<tbody> <tr ng-repeat="ack in trigger.acknowledges">
<tr ng-repeat="ack in trigger.acknowledges"> <td>
<td> <small>{{ack.time}}</small>
<small>{{ack.time}}</small> </td>
</td> <td>
<td> <small>{{ack.user}}</small>
<small>{{ack.user}}</small> </td>
</td> <td>
<td> <small>{{ack.message}}</small>
<small>{{ack.message}}</small> </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table> </div>
</div> </div>
</div> </td>
</td> <td ng-if="panel.lastChangeField">
<td ng-if="panel.lastChangeField"> {{trigger.lastchange}}
{{trigger.lastchange}} </td>
</td> <td ng-if="panel.ageField">
<td ng-if="panel.ageField"> {{trigger.age}}
{{trigger.age}} </td>
</td> <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}}"> <i class="fa fa-comments"></i>
<i class="fa fa-comments"></i> </a>
</a> </td>
</td> </tr>
</tr> </tbody>
</tbody> </table>
</table> </div>
</div> </div>
</grafana-panel> <div class="table-panel-footer"></div>
</grafana-panel>
</div>