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

Added custom sass styles for triggers panel.

Browse Source
This commit is contained in:
Alexander Zobnin
2016-03-19 19:17:21 +03:00
parent 404c2afd46
commit c9dfbe646c
5 changed files with 140 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
Gruntfile.js
View File

@@ -55,7 +55,24 @@ module.exports = function(grunt) {
},
},
sass: {
options: {
sourceMap: true
},
dist: {
files: {
'dist/panel-triggers/css/panel_triggers.css' : 'src/panel-triggers/sass/panel_triggers.scss',
}
}
}
});
grunt.registerTask('default', ['clean', 'copy:src_to_dist', 'copy:pluginDef', 'babel']);
grunt.registerTask('default', [
'clean',
'copy:src_to_dist',
'copy:pluginDef',
'babel',
'sass'
]);
};

1
package.json
View File

@@ -19,6 +19,7 @@
"grunt": "~0.4.5",
"babel": "~6.5.1",
"grunt-babel": "~6.0.0",
"grunt-sass": "^1.1.0",
"grunt-contrib-copy": "~0.8.2",
"grunt-contrib-watch": "^0.6.1",
"grunt-contrib-uglify": "~0.11.0",

24
src/panel-triggers/module.html
View File

@@ -1,31 +1,31 @@
<div class="table-panel-container">
<div class="table-panel-header-bg"></div>
<div class="table-panel-scroll">
<table class="table-panel-table">
<div class="triggers-panel-container">
<div class="triggers-panel-header-bg"></div>
<div class="triggers-panel-scroll">
<table class="triggers-panel-table">
<thead>
<tr>
<th ng-if="ctrl.panel.hostField" style="width: 15%">
<div class="table-panel-table-header-inner pointer">
<div class="triggers-panel-table-header-inner pointer">
Host
</div>
</th>
<th ng-if="ctrl.panel.statusField" style="width: 85px">
<div class="table-panel-table-header-inner pointer">Status</div>
<div class="triggers-panel-table-header-inner pointer">Status</div>
</th>
<th ng-if="ctrl.panel.severityField" style="width: 120px">
<div class="table-panel-table-header-inner pointer">Severity</div>
<div class="triggers-panel-table-header-inner pointer">Severity</div>
</th>
<th>
<div class="table-panel-table-header-inner pointer">Issue</div>
<div class="triggers-panel-table-header-inner pointer">Issue</div>
</th>
<th ng-if="ctrl.panel.lastChangeField" style="width: 220px">
<div class="table-panel-table-header-inner pointer">Last change</div>
<div class="triggers-panel-table-header-inner pointer">Last change</div>
</th>
<th ng-if="ctrl.panel.ageField" style="width: 180px">
<div class="table-panel-table-header-inner pointer">Age</div>
<div class="triggers-panel-table-header-inner pointer">Age</div>
</th>
<th ng-if="ctrl.panel.infoField" style="width: 100px">
<div class="table-panel-table-header-inner pointer">Info</div>
<div class="triggers-panel-table-header-inner pointer">Info</div>
</th>
</tr>
</thead>
@@ -133,4 +133,4 @@
</table>
</div>
</div>
<div class="table-panel-footer"></div>
<div class="triggers-panel-footer"></div>

1
src/panel-triggers/module.js
View File

@@ -15,6 +15,7 @@ import _ from 'lodash';
import moment from 'moment';
import {PanelCtrl} from 'app/plugins/sdk';
import {triggerPanelEditor} from './editor';
import './css/panel_triggers.css!';
var defaultSeverity = [
{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true },

108
src/panel-triggers/sass/panel_triggers.scss Normal file
View File

@@ -0,0 +1,108 @@
$tight-form-func-bg: #333;
$blue: #33B5E5;
$dark-2: #1f1d1d;
$body-bg: rgb(20,20,20);
$grafanaListAccent: lighten($dark-2, 2%);
.triggers-panel-wrapper {
.panel-content {
padding: 0;
}
.panel-title-container {
padding-bottom: 4px;
}
}
.triggers-panel-scroll {
overflow: auto;
}
.triggers-panel-container {
padding-top: 2.2em;
position: relative;
}
.triggers-panel-footer {
text-align: center;
font-size: 90%;
line-height: 2px;
ul {
position: relative;
display: inline-block;
margin-left: 0;
margin-bottom: 0;
}
ul > li {
display: inline; // Remove list-style and block-level defaults
}
ul > li > a {
float: left; // Collapse white-space
padding: 4px 12px;
text-decoration: none;
border-left-width: 0;
&:hover {
background-color: $tight-form-func-bg;
}
&.active {
font-weight: bold;
color: $blue;
}
}
}
.triggers-panel-table {
width: 100%;
border-collapse: collapse;
th {
padding: 0;
&:first-child {
.triggers-panel-table-header-inner {
padding-left: 15px;
}
}
}
td {
padding: 0.45em 0 0.45em 1.1em;
border-bottom: 2px solid $body-bg;
border-right: 2px solid $body-bg;
&:first-child {
padding-left: 15px;
}
&:last-child {
border-right: none;
}
}
}
.triggers-panel-header-bg {
background: $grafanaListAccent;
border-top: 2px solid $body-bg;
border-bottom: 2px solid $body-bg;
height: 2.0em;
position: absolute;
top: 0;
right: 0;
left: 0;
}
.triggers-panel-table-header-inner {
padding: 0.45em 0 0.45em 1.1em;
text-align: left;
color: $blue;
position: absolute;
top: 0;
}
.triggers-panel-width-hack {
visibility: hidden;
height: 0px;
line-height: 0px;
}