Merge branch 'panel-triggers' into grafana-3.0

plugins/panel-triggers/editor.html

@@ -61,7 +61,7 @@
                   placeholder="trigger name"
                   class="input-large tight-form-input last"
                   ng-style="panel.triggers.trigger.style"
-                  empty-to-null">
+                  empty-to-null>
         </li>
       </ul>
       <div class="clearfix"></div>
@@ -130,7 +130,7 @@
             <strong>Show events</strong>
           </li>
           <li>
-            <select class="tight-form-input input-medium last"
+            <select class="tight-form-input input-medium"
                     ng-model="panel.showEvents"
                     ng-options="f.text for f in showEventsFields track by f.value"
                     ng-change="get_data()">
@@ -153,6 +153,15 @@
                     ng-checked="panel.hostField">
             <label for="panel.hostField" class="cr1"></label>
           </li>
+          <li class="tight-form-item">
+            <label class="checkbox-label" for="panel.severityField">Status</label>
+            <input  class="cr1"
+                    id="panel.statusField"
+                    type="checkbox"
+                    ng-model="panel.statusField"
+                    ng-checked="panel.statusField">
+            <label for="panel.statusField" class="cr1"></label>
+          </li>
           <li class="tight-form-item">
             <label class="checkbox-label" for="panel.severityField">Severity</label>
             <input  class="cr1"
@@ -192,40 +201,60 @@
         </ul>
         <div class="clearfix"></div>
       </div>
+      <div class="tight-form">
+        <ul class="tight-form-list">
+          <li class="tight-form-item">
+            <strong>Custom Last change format</strong>
+            <label class="checkbox-label" for="panel.customLastChangeFormat">&nbsp;</label>
+            <input  class="cr1"
+                    id="panel.customLastChangeFormat"
+                    type="checkbox"
+                    ng-change="get_data()"
+                    ng-model="panel.customLastChangeFormat"
+                    ng-checked="panel.customLastChangeFormat">
+            <label for="panel.customLastChangeFormat" class="cr1"></label>
+          </li>
+          <li ng-if="panel.customLastChangeFormat">
+            <input  type="text"
+                    ng-model="panel.lastChangeFormat"
+                    ng-blur="get_data()"
+                    placeholder="dddd, MMMM Do YYYY, h:mm:ss a"
+                    class="tight-form-input"
+                    style="width: 300px"
+                    empty-to-null>
+          </li>
+          <li class="tight-form-item last" ng-if="panel.customLastChangeFormat">
+            <a href="http://momentjs.com/docs/#/displaying/format/" target="_blank">
+              <i class="fa fa-question-circle"
+                 bs-tooltip="'See moment.js dosc for time format.'">
+              </i>
+            </a>
+          </li>
+        </ul>
+        <div class="clearfix"></div>
+      </div>
     </div>
   </div>
   <div class="section">
     <h5>Customize triggers severity and colors</h5>
     <div class="tight-form"
-         ng-repeat="trigger in panel.triggerSeverity"
+         ng-repeat="trigger in panel.triggerSeverity">
-         ng-style="{background:trigger.color}">
       <ul class="tight-form-list">
-        <li class="tight-form-item" style="width: 10px; color: #101010">
+        <li class="tight-form-item" style="width: 10px">
           {{ trigger.priority }}
         </li>
         <li>
           <input  class="tight-form-input input-medium"
                   type="text"
-                  style="color: #101010"
                   empty-to-null
                   ng-model="trigger.severity"
+                  style="color: white"
                   ng-style="{background: trigger.color}"
                   ng-model-onblur
                   ng-change="get_data()">
         </li>
-        <li data-trigger-index="{{trigger.priority}}">
+        <li class="tight-form-item">
-          &nbsp;
+          <spectrum-picker ng-model="trigger.color" ng-change="get_data()"></spectrum-picker>
-          <i class="pointer fa fa-eyedropper trigger-color"
-             style="color: #101010"
-             ng-click="openTriggerColorSelector($event)">&nbsp;</i>
-          <input  type="text"
-                  class="tight-form-input input-small"
-                  style="color: #101010"
-                  empty-to-null
-                  ng-model="trigger.color"
-                  ng-style="{background:trigger.color}"
-                  ng-model-onblur
-                  ng-change="get_data()">
         </li>
         <li class="tight-form-item last" style="width: 28px">
           <label class="checkbox-label" for="{{ 'trigger-show-' + $index }}"></label>
@@ -240,25 +269,15 @@
       </ul>
       <div class="clearfix"></div>
     </div>
-    <div class="tight-form last"
+    <div class="tight-form last">
-         ng-style="{background:panel.okEventColor}">
       <ul class="tight-form-list">
-        <li class="tight-form-item" style="width: 160px; color: #101010">
+        <li class="tight-form-item"
+            ng-style="{background:panel.okEventColor}"
+            style="width: 160px; color: white">
           <span style="padding-left: 25px"> OK event color </span>
         </li>
-        <li data-trigger-index="6">
+        <li class="tight-form-item">
-          &nbsp;
+          <spectrum-picker ng-model="panel.okEventColor" ng-change="get_data()"></spectrum-picker>
-          <i class="pointer fa fa-eyedropper trigger-color"
-             style="color: #101010"
-             ng-click="openOkEventColorSelector($event)">&nbsp;</i>
-          <input  type="text"
-                  class="tight-form-input input-small"
-                  style="color: #101010"
-                  empty-to-null
-                  ng-model="panel.okEventColor"
-                  ng-style="{background:panel.okEventColor}"
-                  ng-model-onblur
-                  ng-change="get_data()">
         </li>
       </ul>
       <div class="clearfix"></div>

plugins/panel-triggers/module.html

@@ -11,6 +11,9 @@
                   Host
                 </div>
               </th>
+              <th ng-if="panel.statusField" style="width: 85px">
+                <div class="table-panel-table-header-inner pointer">Status</div>
+              </th>
               <th ng-if="panel.severityField" style="width: 120px">
                 <div class="table-panel-table-header-inner pointer">Severity</div>
               </th>
@@ -35,6 +38,11 @@
                   <span><strong>{{trigger.host}}</strong></span>
                 </div>
               </td>
+              <td ng-if="panel.statusField" style="background-color: {{trigger.color}}; color: white">
+                <div>
+                  {{triggerStatusMap[trigger.value]}}
+                </div>
+              </td>
               <td ng-if="panel.severityField" style="background-color: {{trigger.color}}; color: white">
                 <div>
                   {{trigger.severity}}

plugins/panel-triggers/module.js

@@ -54,6 +54,11 @@ function (angular, app, _, $, moment, config, PanelMeta) {
       { text: 'Problem events', value: 1 }
     ];
 
+    $scope.triggerStatusMap = {
+      '0': 'OK',
+      '1': 'Problem'
+    };
+
     var grafanaDefaultSeverity = [
       { priority: 0, severity: 'Not classified',  color: '#B7DBAB', show: true },
       { priority: 1, severity: 'Information',     color: '#82B5D8', show: true },
@@ -72,6 +77,7 @@ function (angular, app, _, $, moment, config, PanelMeta) {
         trigger: {filter: ""}
       },
       hostField: true,
+      statusField: false,
       severityField: false,
       lastChangeField: true,
       ageField: true,
@@ -81,7 +87,7 @@ function (angular, app, _, $, moment, config, PanelMeta) {
       sortTriggersBy: { text: 'last change', value: 'lastchange' },
       showEvents: { text: 'Problem events', value: '1' },
       triggerSeverity: grafanaDefaultSeverity,
-      okEventColor: '#890F02'
+      okEventColor: '#890F02',
     };
 
     _.defaults($scope.panel, panelDefaults);
@@ -97,7 +103,8 @@ function (angular, app, _, $, moment, config, PanelMeta) {
       var scopeDefaults = {
         metric: {},
         inputStyles: {},
-        oldTarget: _.cloneDeep($scope.panel.triggers)
+        oldTarget: _.cloneDeep($scope.panel.triggers),
+        defaultTimeFormat: "DD MMM YYYY HH:mm:ss"
       };
       _.defaults($scope, scopeDefaults);
 
@@ -141,7 +148,12 @@ function (angular, app, _, $, moment, config, PanelMeta) {
                 // Format last change and age
                 trigger.lastchangeUnix = Number(trigger.lastchange);
                 var timestamp = moment.unix(trigger.lastchangeUnix);
-                triggerObj.lastchange = timestamp.format("DD MMM YYYY, HH:mm:ss");
+                if ($scope.panel.customLastChangeFormat) {
+                  // User defined format
+                  triggerObj.lastchange = timestamp.format($scope.panel.lastChangeFormat);
+                } else {
+                  triggerObj.lastchange = timestamp.format($scope.defaultTimeFormat);
+                }
                 triggerObj.age = timestamp.fromNow(true);
 
                 // Set color