Merge branch 'triggers-styles'

Gruntfile.js

@@ -95,7 +95,8 @@ module.exports = function(grunt) {
       },
       dist: {
         files: {
-          'dist/panel-triggers/css/panel_triggers.css' : 'src/panel-triggers/sass/panel_triggers.scss',
+          'dist/css/grafana-zabbix.light.css': 'src/sass/grafana-zabbix.light.scss',
+          'dist/css/grafana-zabbix.dark.css': 'src/sass/grafana-zabbix.dark.scss'
         }
       }
     },
@@ -127,20 +128,20 @@ module.exports = function(grunt) {
 
   grunt.registerTask('default', [
     'clean',
+    'sass',
     'copy:src_to_dist',
     'copy:pluginDef',
     'jshint',
     'jscs',
-    'sass',
     'babel',
     'mochaTest'
   ]);
 
   grunt.registerTask('watchTask', [
     'clean',
+    'sass',
     'copy:src_to_dist',
     'copy:pluginDef',
-    'sass',
     'babel',
     'jshint',
     'jscs'

dist/css/grafana-zabbix.dark.css

@@ -0,0 +1,102 @@
+.triggers-panel-wrapper .panel-content {
+  padding: 0; }
+
+.triggers-panel-wrapper .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; }
+  .triggers-panel-footer ul {
+    position: relative;
+    display: inline-block;
+    margin-left: 0;
+    margin-bottom: 0; }
+  .triggers-panel-footer ul > li {
+    display: inline; }
+  .triggers-panel-footer ul > li > a {
+    float: left;
+    padding: 4px 12px;
+    text-decoration: none;
+    border-left-width: 0; }
+    .triggers-panel-footer ul > li > a:hover {
+      background-color: #333; }
+    .triggers-panel-footer ul > li > a.active {
+      font-weight: bold;
+      color: #33B5E5; }
+
+.triggers-panel-table {
+  width: 100%;
+  border-collapse: collapse; }
+  .triggers-panel-table th {
+    padding: 0; }
+    .triggers-panel-table th:first-child .triggers-panel-table-header-inner {
+      padding-left: 15px; }
+  .triggers-panel-table td {
+    padding: 0.45em 0 0.45em 1.1em;
+    border-bottom: 2px solid #141414;
+    border-right: 2px solid #141414; }
+    .triggers-panel-table td:first-child {
+      padding-left: 15px; }
+    .triggers-panel-table td:last-child {
+      border-right: none; }
+  .triggers-panel-table .zbx-field-colored {
+    color: #f4f5f8; }
+  .triggers-panel-table .zbx-description-icon {
+    float: right;
+    padding-right: 8px;
+    color: #f4f5f8; }
+
+.triggers-panel-header-bg {
+  background: #242222;
+  border-top: 2px solid #141414;
+  border-bottom: 2px solid #141414;
+  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: #33B5E5;
+  position: absolute;
+  top: 0; }
+
+.triggers-panel-width-hack {
+  visibility: hidden;
+  height: 0px;
+  line-height: 0px; }
+
+.ack-tooltip .drop-content {
+  max-width: 70rem !important;
+  min-width: 30rem !important; }
+
+.ack-tooltip .ack-comments {
+  width: 60%; }
+
+.ack-tooltip .ack-add-button {
+  padding-top: 1rem; }
+
+.ack-tooltip table td, .ack-tooltip th {
+  padding-right: 1rem; }
+
+.ack-tooltip .ack-input-group {
+  padding-top: 1rem; }
+  .ack-tooltip .ack-input-group input {
+    border: 1px solid;
+    border-radius: 2px;
+    width: 50%; }
+  .ack-tooltip .ack-input-group button {
+    margin-left: 1rem; }
+
+/*# sourceMappingURL=grafana-zabbix.dark.css.map */

dist/css/grafana-zabbix.dark.css.map

@@ -0,0 +1,13 @@
+{
+	"version": 3,
+	"file": "grafana-zabbix.dark.css",
+	"sources": [
+		"../../src/sass/grafana-zabbix.dark.scss",
+		"../../src/sass/_variables.dark.scss",
+		"../../src/sass/grafana-zabbix.scss",
+		"../../src/sass/_variables.scss",
+		"../../src/sass/_panel-triggers.scss"
+	],
+	"mappings": "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",
+	"names": []
+}

dist/css/grafana-zabbix.light.css

@@ -0,0 +1,102 @@
+.triggers-panel-wrapper .panel-content {
+  padding: 0; }
+
+.triggers-panel-wrapper .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; }
+  .triggers-panel-footer ul {
+    position: relative;
+    display: inline-block;
+    margin-left: 0;
+    margin-bottom: 0; }
+  .triggers-panel-footer ul > li {
+    display: inline; }
+  .triggers-panel-footer ul > li > a {
+    float: left;
+    padding: 4px 12px;
+    text-decoration: none;
+    border-left-width: 0; }
+    .triggers-panel-footer ul > li > a:hover {
+      background-color: #ECECEC; }
+    .triggers-panel-footer ul > li > a.active {
+      font-weight: bold;
+      color: #2AB2E4; }
+
+.triggers-panel-table {
+  width: 100%;
+  border-collapse: collapse; }
+  .triggers-panel-table th {
+    padding: 0; }
+    .triggers-panel-table th:first-child .triggers-panel-table-header-inner {
+      padding-left: 15px; }
+  .triggers-panel-table td {
+    padding: 0.45em 0 0.45em 1.1em;
+    border-bottom: 2px solid #fff;
+    border-right: 2px solid #fff; }
+    .triggers-panel-table td:first-child {
+      padding-left: 15px; }
+    .triggers-panel-table td:last-child {
+      border-right: none; }
+  .triggers-panel-table .zbx-field-colored {
+    color: #f4f5f8; }
+  .triggers-panel-table .zbx-description-icon {
+    float: right;
+    padding-right: 8px;
+    color: #f4f5f8; }
+
+.triggers-panel-header-bg {
+  background: #ECECEC;
+  border-top: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  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: #2AB2E4;
+  position: absolute;
+  top: 0; }
+
+.triggers-panel-width-hack {
+  visibility: hidden;
+  height: 0px;
+  line-height: 0px; }
+
+.ack-tooltip .drop-content {
+  max-width: 70rem !important;
+  min-width: 30rem !important; }
+
+.ack-tooltip .ack-comments {
+  width: 60%; }
+
+.ack-tooltip .ack-add-button {
+  padding-top: 1rem; }
+
+.ack-tooltip table td, .ack-tooltip th {
+  padding-right: 1rem; }
+
+.ack-tooltip .ack-input-group {
+  padding-top: 1rem; }
+  .ack-tooltip .ack-input-group input {
+    border: 1px solid;
+    border-radius: 2px;
+    width: 50%; }
+  .ack-tooltip .ack-input-group button {
+    margin-left: 1rem; }
+
+/*# sourceMappingURL=grafana-zabbix.light.css.map */

dist/css/grafana-zabbix.light.css.map

@@ -0,0 +1,13 @@
+{
+	"version": 3,
+	"file": "grafana-zabbix.light.css",
+	"sources": [
+		"../../src/sass/grafana-zabbix.light.scss",
+		"../../src/sass/_variables.light.scss",
+		"../../src/sass/grafana-zabbix.scss",
+		"../../src/sass/_variables.scss",
+		"../../src/sass/_panel-triggers.scss"
+	],
+	"mappings": "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",
+	"names": []
+}

dist/module.js

@@ -1,14 +1,22 @@
 'use strict';
 
-System.register(['./components/config'], function (_export, _context) {
+System.register(['./components/config', 'app/plugins/sdk'], function (_export, _context) {
   "use strict";
 
-  var ZabbixAppConfigCtrl;
+  var ZabbixAppConfigCtrl, loadPluginCss;
   return {
     setters: [function (_componentsConfig) {
       ZabbixAppConfigCtrl = _componentsConfig.ZabbixAppConfigCtrl;
+    }, function (_appPluginsSdk) {
+      loadPluginCss = _appPluginsSdk.loadPluginCss;
     }],
     execute: function () {
+
+      loadPluginCss({
+        dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
+        light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
+      });
+
       _export('ConfigCtrl', ZabbixAppConfigCtrl);
     }
   };

dist/module.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/module.js"],"names":["ZabbixAppConfigCtrl"],"mappings":";;;;;;;;AAAQA,yB,qBAAAA,mB;;;4BAGNA,mB","file":"module.js","sourcesContent":["import {ZabbixAppConfigCtrl} from './components/config';\n\nexport {\n  ZabbixAppConfigCtrl as ConfigCtrl\n};\n"]}
+{"version":3,"sources":["../src/module.js"],"names":["ZabbixAppConfigCtrl","loadPluginCss","dark","light"],"mappings":";;;;;;;;AAAQA,yB,qBAAAA,mB;;AACAC,mB,kBAAAA,a;;;;AAERA,oBAAc;AACZC,cAAM,gEADM;AAEZC,eAAO;AAFK,OAAd;;4BAMEH,mB","file":"module.js","sourcesContent":["import {ZabbixAppConfigCtrl} from './components/config';\nimport {loadPluginCss} from 'app/plugins/sdk';\n\nloadPluginCss({\n  dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',\n  light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'\n});\n\nexport {\n  ZabbixAppConfigCtrl as ConfigCtrl\n};\n"]}

dist/panel-triggers/module.html

@@ -4,32 +4,32 @@
     <table class="triggers-panel-table">
       <thead>
         <tr>
-          <th ng-if="ctrl.panel.hostField" style="width: 15%">
+          <th ng-if="ctrl.panel.hostField" class="zbx-field-host">
             <div class="triggers-panel-table-header-inner pointer">
               Host
             </div>
           </th>
-          <th ng-if="ctrl.panel.hostTechNameField" style="width: 15%">
+          <th ng-if="ctrl.panel.hostTechNameField" class="zbx-field-host">
             <div class="triggers-panel-table-header-inner pointer">
               Technical Name
             </div>
           </th>
-          <th ng-if="ctrl.panel.statusField" style="width: 85px">
+          <th ng-if="ctrl.panel.statusField" class="zbx-field-status">
             <div class="triggers-panel-table-header-inner pointer">Status</div>
           </th>
-          <th ng-if="ctrl.panel.severityField" style="width: 120px">
+          <th ng-if="ctrl.panel.severityField" class="zbx-field-severity">
             <div class="triggers-panel-table-header-inner pointer">Severity</div>
           </th>
           <th>
             <div class="triggers-panel-table-header-inner pointer">Issue</div>
           </th>
-          <th ng-if="ctrl.panel.lastChangeField" style="width: 220px">
+          <th ng-if="ctrl.panel.lastChangeField" class="zbx-field-lastchange">
             <div class="triggers-panel-table-header-inner pointer">Last change</div>
           </th>
-          <th ng-if="ctrl.panel.ageField" style="width: 180px">
+          <th ng-if="ctrl.panel.ageField" class="zbx-field-age">
             <div class="triggers-panel-table-header-inner pointer">Age</div>
           </th>
-          <th ng-if="ctrl.panel.infoField" style="width: 100px">
+          <th ng-if="ctrl.panel.infoField" class="zbx-field-info">
             <div class="triggers-panel-table-header-inner pointer">Info</div>
           </th>
         </tr>
@@ -49,26 +49,29 @@
             </div>
           </td>
 
-          <td ng-if="ctrl.panel.statusField" style="background-color: {{trigger.color}}; color: white">
+          <td ng-if="ctrl.panel.statusField"
+            class="zbx-field-colored"
+            style="background-color: {{trigger.color}};">
             <div>
               {{ctrl.triggerStatusMap[trigger.value]}}
             </div>
           </td>
 
-          <td ng-if="ctrl.panel.severityField" style="background-color: {{trigger.color}}; color: white">
+          <td ng-if="ctrl.panel.severityField"
+            class="zbx-field-colored"
+            style="background-color: {{trigger.color}};">
             <div>
               {{trigger.severity}}
             </div>
           </td>
 
-          <td style="background-color: {{trigger.color}}; color: white">
+          <td class="zbx-field-colored" style="background-color: {{trigger.color}};">
             <div>
               {{trigger.description}}
               <a  ng-if="trigger.comments"
                   role="button"
                   ng-click="ctrl.switchComment(trigger)"
-                  class="pointer"
+                  class="pointer zbx-description-icon"
-                  style="float: right; padding-right: 8px"
                   bs-tooltip="'Show additional trigger description'"
                   data-placement="top">
                 <i class="fa fa-file-text-o"></i>

dist/panel-triggers/module.js

@@ -1,9 +1,9 @@
 'use strict';
 
-System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'app/plugins/sdk', './editor', './ack-tooltip.directive', './css/panel_triggers.css!'], function (_export, _context) {
+System.register(['lodash', 'jquery', 'moment', 'app/plugins/sdk', '../datasource-zabbix/utils', './editor', './ack-tooltip.directive'], function (_export, _context) {
   "use strict";
 
-  var _, $, moment, utils, PanelCtrl, triggerPanelEditor, _createClass, defaultSeverity, panelDefaults, triggerStatusMap, defaultTimeFormat, TriggerPanelCtrl;
+  var _, $, moment, loadPluginCss, utils, PanelCtrl, triggerPanelEditor, _createClass, defaultSeverity, panelDefaults, triggerStatusMap, defaultTimeFormat, TriggerPanelCtrl;
 
   function _classCallCheck(instance, Constructor) {
     if (!(instance instanceof Constructor)) {
@@ -54,13 +54,14 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
       $ = _jquery.default;
     }, function (_moment) {
       moment = _moment.default;
+    }, function (_appPluginsSdk) {
+      loadPluginCss = _appPluginsSdk.loadPluginCss;
+      PanelCtrl = _appPluginsSdk.PanelCtrl;
     }, function (_datasourceZabbixUtils) {
       utils = _datasourceZabbixUtils;
-    }, function (_appPluginsSdk) {
-      PanelCtrl = _appPluginsSdk.PanelCtrl;
     }, function (_editor) {
       triggerPanelEditor = _editor.triggerPanelEditor;
-    }, function (_ackTooltipDirective) {}, function (_cssPanel_triggersCss) {}],
+    }, function (_ackTooltipDirective) {}],
     execute: function () {
       _createClass = function () {
         function defineProperties(target, props) {
@@ -80,6 +81,24 @@ System.register(['lodash', 'jquery', 'moment', '../datasource-zabbix/utils', 'ap
         };
       }();
 
+      /**
+       * Grafana-Zabbix
+       * Zabbix plugin for Grafana.
+       * http://github.com/alexanderzobnin/grafana-zabbix
+       *
+       * Trigger panel.
+       * This feature sponsored by CORE IT
+       * http://www.coreit.fr
+       *
+       * Copyright 2015 Alexander Zobnin alexanderzobnin@gmail.com
+       * Licensed under the Apache License, Version 2.0
+       */
+
+      loadPluginCss({
+        dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
+        light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
+      });
+
       defaultSeverity = [{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true }, { priority: 1, severity: 'Information', color: '#82B5D8', show: true }, { priority: 2, severity: 'Warning', color: '#E5AC0E', show: true }, { priority: 3, severity: 'Average', color: '#C15C17', show: true }, { priority: 4, severity: 'High', color: '#BF1B00', show: true }, { priority: 5, severity: 'Disaster', color: '#890F02', show: true }];
       panelDefaults = {
         datasource: null,

dist/plugin.json

@@ -3,11 +3,6 @@
   "name": "Zabbix",
   "id": "alexanderzobnin-zabbix-app",
 
-  "css": {
-    "dark":  "css/dark.css",
-    "light":  "css/light.css"
-  },
-
   "info": {
     "description": "Zabbix plugin for Grafana",
     "author": {

dist/test/module.js

@@ -7,4 +7,11 @@ exports.ConfigCtrl = undefined;
 
 var _config = require('./components/config');
 
+var _sdk = require('app/plugins/sdk');
+
+(0, _sdk.loadPluginCss)({
+  dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
+  light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
+});
+
 exports.ConfigCtrl = _config.ZabbixAppConfigCtrl;

dist/test/panel-triggers/module.js

@@ -19,18 +19,16 @@ var _moment = require('moment');
 
 var _moment2 = _interopRequireDefault(_moment);
 
+var _sdk = require('app/plugins/sdk');
+
 var _utils = require('../datasource-zabbix/utils');
 
 var utils = _interopRequireWildcard(_utils);
 
-var _sdk = require('app/plugins/sdk');
-
 var _editor = require('./editor');
 
 require('./ack-tooltip.directive');
 
-require('./css/panel_triggers.css!');
-
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -52,6 +50,11 @@ function _inherits(subClass, superClass) { if (typeof superClass !== "function"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 * Licensed under the Apache License, Version 2.0
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 */
 
+(0, _sdk.loadPluginCss)({
+  dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
+  light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
+});
+
 var defaultSeverity = [{ priority: 0, severity: 'Not classified', color: '#B7DBAB', show: true }, { priority: 1, severity: 'Information', color: '#82B5D8', show: true }, { priority: 2, severity: 'Warning', color: '#E5AC0E', show: true }, { priority: 3, severity: 'Average', color: '#C15C17', show: true }, { priority: 4, severity: 'High', color: '#BF1B00', show: true }, { priority: 5, severity: 'Disaster', color: '#890F02', show: true }];
 
 var panelDefaults = {

package.json

@@ -16,35 +16,34 @@
     "url": "https://github.com/alexanderzobnin/grafana-zabbix/issues"
   },
   "devDependencies": {
-    "grunt": "~0.4.5",
     "babel": "~6.5.1",
-    "grunt-babel": "~6.0.0",
+    "babel-plugin-transform-es2015-for-of": "^6.6.0",
-    "grunt-sass": "^1.1.0",
+    "babel-plugin-transform-es2015-modules-systemjs": "^6.5.0",
-    "grunt-contrib-copy": "~0.8.2",
+    "babel-preset-es2015": "^6.5.0",
-    "grunt-contrib-watch": "^0.6.1",
-    "grunt-contrib-uglify": "~0.11.0",
-    "grunt-mocha-test": "~0.12.7",
-    "grunt-systemjs-builder": "^0.2.5",
-    "load-grunt-tasks": "~3.2.0",
-    "grunt-execute": "~0.2.2",
-    "grunt-contrib-clean": "~0.6.0",
-    "prunk": "~1.2.1",
-    "jsdom": "~3.1.2",
-    "q": "~1.4.1",
     "chai": "~3.5.0",
-    "sinon-chai": "~2.8.0",
+    "grunt": "~0.4.5",
-    "moment": "~2.14.1"
+    "grunt-babel": "~6.0.0",
+    "grunt-contrib-clean": "~0.6.0",
+    "grunt-contrib-copy": "~0.8.2",
+    "grunt-contrib-jshint": "^1.0.0",
+    "grunt-contrib-uglify": "~0.11.0",
+    "grunt-contrib-watch": "^0.6.1",
+    "grunt-execute": "~0.2.2",
+    "grunt-jscs": "^2.8.0",
+    "grunt-mocha-test": "~0.12.7",
+    "grunt-sass": "^1.1.0",
+    "grunt-systemjs-builder": "^0.2.5",
+    "jsdom": "~3.1.2",
+    "jshint-stylish": "^2.1.0",
+    "load-grunt-tasks": "~3.2.0",
+    "mocha": "^2.4.5",
+    "moment": "~2.14.1",
+    "prunk": "~1.2.1",
+    "q": "~1.4.1",
+    "sinon-chai": "~2.8.0"
   },
   "dependencies": {
-    "babel-plugin-transform-es2015-modules-systemjs": "^6.5.0",
+    "lodash": "~4.0.0"
-    "babel-plugin-transform-es2015-for-of": "^6.6.0",
-    "babel-preset-es2015": "^6.5.0",
-    "grunt-contrib-jshint": "^1.0.0",
-    "grunt-jscs": "^2.8.0",
-    "jshint-stylish": "^2.1.0",
-    "lodash": "~4.0.0",
-    "mocha": "^2.4.5",
-    "sinon": "~1.16.1"
   },
   "homepage": "http://grafana-zabbix.org"
 }

src/module.js

@@ -1,4 +1,10 @@
 import {ZabbixAppConfigCtrl} from './components/config';
+import {loadPluginCss} from 'app/plugins/sdk';
+
+loadPluginCss({
+  dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
+  light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
+});
 
 export {
   ZabbixAppConfigCtrl as ConfigCtrl

src/panel-triggers/module.html

@@ -4,32 +4,32 @@
     <table class="triggers-panel-table">
       <thead>
         <tr>
-          <th ng-if="ctrl.panel.hostField" style="width: 15%">
+          <th ng-if="ctrl.panel.hostField" class="zbx-field-host">
             <div class="triggers-panel-table-header-inner pointer">
               Host
             </div>
           </th>
-          <th ng-if="ctrl.panel.hostTechNameField" style="width: 15%">
+          <th ng-if="ctrl.panel.hostTechNameField" class="zbx-field-host">
             <div class="triggers-panel-table-header-inner pointer">
               Technical Name
             </div>
           </th>
-          <th ng-if="ctrl.panel.statusField" style="width: 85px">
+          <th ng-if="ctrl.panel.statusField" class="zbx-field-status">
             <div class="triggers-panel-table-header-inner pointer">Status</div>
           </th>
-          <th ng-if="ctrl.panel.severityField" style="width: 120px">
+          <th ng-if="ctrl.panel.severityField" class="zbx-field-severity">
             <div class="triggers-panel-table-header-inner pointer">Severity</div>
           </th>
           <th>
             <div class="triggers-panel-table-header-inner pointer">Issue</div>
           </th>
-          <th ng-if="ctrl.panel.lastChangeField" style="width: 220px">
+          <th ng-if="ctrl.panel.lastChangeField" class="zbx-field-lastchange">
             <div class="triggers-panel-table-header-inner pointer">Last change</div>
           </th>
-          <th ng-if="ctrl.panel.ageField" style="width: 180px">
+          <th ng-if="ctrl.panel.ageField" class="zbx-field-age">
             <div class="triggers-panel-table-header-inner pointer">Age</div>
           </th>
-          <th ng-if="ctrl.panel.infoField" style="width: 100px">
+          <th ng-if="ctrl.panel.infoField" class="zbx-field-info">
             <div class="triggers-panel-table-header-inner pointer">Info</div>
           </th>
         </tr>
@@ -49,26 +49,29 @@
             </div>
           </td>
 
-          <td ng-if="ctrl.panel.statusField" style="background-color: {{trigger.color}}; color: white">
+          <td ng-if="ctrl.panel.statusField"
+            class="zbx-field-colored"
+            style="background-color: {{trigger.color}};">
             <div>
               {{ctrl.triggerStatusMap[trigger.value]}}
             </div>
           </td>
 
-          <td ng-if="ctrl.panel.severityField" style="background-color: {{trigger.color}}; color: white">
+          <td ng-if="ctrl.panel.severityField"
+            class="zbx-field-colored"
+            style="background-color: {{trigger.color}};">
             <div>
               {{trigger.severity}}
             </div>
           </td>
 
-          <td style="background-color: {{trigger.color}}; color: white">
+          <td class="zbx-field-colored" style="background-color: {{trigger.color}};">
             <div>
               {{trigger.description}}
               <a  ng-if="trigger.comments"
                   role="button"
                   ng-click="ctrl.switchComment(trigger)"
-                  class="pointer"
+                  class="pointer zbx-description-icon"
-                  style="float: right; padding-right: 8px"
                   bs-tooltip="'Show additional trigger description'"
                   data-placement="top">
                 <i class="fa fa-file-text-o"></i>

src/panel-triggers/module.js

@@ -14,11 +14,16 @@
 import _ from 'lodash';
 import $ from 'jquery';
 import moment from 'moment';
+import {loadPluginCss} from 'app/plugins/sdk';
 import * as utils from '../datasource-zabbix/utils';
 import {PanelCtrl} from 'app/plugins/sdk';
 import {triggerPanelEditor} from './editor';
 import './ack-tooltip.directive';
-import './css/panel_triggers.css!';
+
+loadPluginCss({
+  dark: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.dark.css',
+  light: 'plugins/alexanderzobnin-zabbix-app/css/grafana-zabbix.light.css'
+});
 
 var defaultSeverity = [
   { priority: 0, severity: 'Not classified',  color: '#B7DBAB', show: true },

src/plugin.json

@@ -3,11 +3,6 @@
   "name": "Zabbix",
   "id": "alexanderzobnin-zabbix-app",
 
-  "css": {
-    "dark":  "css/dark.css",
-    "light":  "css/light.css"
-  },
-
   "info": {
     "description": "Zabbix plugin for Grafana",
     "author": {

src/sass/_panel-triggers.scss

@@ -1,10 +1,3 @@
-$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;
@@ -80,6 +73,36 @@ $grafanaListAccent:         lighten($dark-2, 2%);
       border-right: none;
     }
   }
+
+  .zbx-field-colored {
+    color: $gray-6;
+  }
+
+  .zbx-description-icon {
+    float: right;
+    padding-right: 8px;
+    color: $gray-6;
+  }
+
+  // .zbx-field-info {
+  //   width: 7%;
+  // }
+
+  // .zbx-field-host {
+  //   width: 15%;
+  // }
+
+  // .zbx-field-status {
+  //   width: 9rem;
+  // }
+
+  // .zbx-field-severity {
+  //   width: 7%;
+  // }
+
+  // .zbx-field-lastchange {
+  //   width: 15%;
+  // }
 }
 
 .triggers-panel-header-bg {

src/sass/_variables.dark.scss

@@ -0,0 +1,36 @@
+// Grays
+// -------------------------
+$black:            #000;
+$dark-1:           #141414;
+$dark-2:           #1f1d1d;
+$dark-3:           #292929;
+$dark-4:           #333333;
+$dark-5:           #444444;
+$gray-1:           #555555;
+$gray-2:           #7B7B7B;
+$gray-3:           #b3b3b3;
+$gray-4:           #D8D9DA;
+$gray-5:           #ECECEC;
+$gray-6:           #f4f5f8;
+$gray-7:           #fbfbfb;
+
+$white:            #fff;
+
+// Accent colors
+// -------------------------
+$blue:                  #33B5E5;
+$blue-dark:             #005f81;
+$green:                 #609000;
+$red:                   #CC3900;
+$yellow:                #ECBB13;
+$orange:                #eb7b18;
+$pink:                  #FF4444;
+$purple:                #9933CC;
+$variable:              #32D1DF;
+
+$body-bg:               rgb(20,20,20);
+$body-color:            $gray-4;
+$text-color:            $gray-4;
+$tight-form-func-bg:    #333;
+$grafanaListAccent:     lighten($dark-2, 2%);
+

src/sass/_variables.light.scss

@@ -0,0 +1,35 @@
+// Grays
+// -------------------------
+$black:            #000;
+$dark-1:           #141414;
+$dark-2:           #1f1d1d;
+$dark-3:           #292929;
+$dark-4:           #373737;
+$dark-5:           #444444;
+$gray-1:           #555555;
+$gray-2:           #7B7B7B;
+$gray-3:           #b3b3b3;
+$gray-4:           #D8D9DA;
+$gray-5:           #ECECEC;
+$gray-6:           #f4f5f8;
+$gray-7:           #fbfbfb;
+
+$white:            #fff;
+
+// Accent colors
+// -------------------------
+$blue:                  #2AB2E4;
+$blue-dark:             #3CAAD6;
+$green:                 #28B62C;
+$red:                   #FF4136;
+$yellow:                #FF851B;
+$orange:                #Ff7941;
+$pink:                  #E671B8;
+$purple:                #9954BB;
+$variable:              #2AB2E4;
+
+$body-bg :              $white;
+$body-color:            $gray-1;
+$text-color:            $gray-1;
+$tight-form-func-bg:    $gray-5;
+$grafanaListAccent:     $gray-5;

src/sass/grafana-zabbix.dark.scss

@@ -0,0 +1,2 @@
+@import 'variables.dark';
+@import 'grafana-zabbix';

src/sass/grafana-zabbix.light.scss

@@ -0,0 +1,2 @@
+@import 'variables.light';
+@import 'grafana-zabbix';

src/sass/grafana-zabbix.scss

@@ -0,0 +1,2 @@
+@import 'variables';
+@import 'panel-triggers';