Added custom sass styles for triggers panel.

Gruntfile.js

@@ -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'
+  ]);
 };

package.json

@@ -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",

src/panel-triggers/module.html

@@ -1,31 +1,31 @@
-<div class="table-panel-container">
+<div class="triggers-panel-container">
-  <div class="table-panel-header-bg"></div>
+  <div class="triggers-panel-header-bg"></div>
-  <div class="table-panel-scroll">
+  <div class="triggers-panel-scroll">
-    <table class="table-panel-table">
+    <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>

src/panel-triggers/module.js

@@ -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 },

src/panel-triggers/sass/panel_triggers.scss

@@ -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;
+}