Browse Source

Merge branch 'histogramHighlight'

Rashid Khan 12 years ago
parent
commit
b7441309fd
4 changed files with 37 additions and 32 deletions
  1. 5 5
      panels/histogram/module.html
  2. 2 2
      panels/pie/module.html
  3. 6 6
      panels/terms/module.html
  4. 24 19
      panels/timepicker/module.html

+ 5 - 5
panels/histogram/module.html

@@ -8,10 +8,10 @@
       display:inline-block;
       display:inline-block;
       height:10px;
       height:10px;
       width:10px;
       width:10px;
-      border-radius:5px;  
+      border-radius:5px;
     }
     }
     .histogram-legend-item {
     .histogram-legend-item {
-      display:inline-block; 
+      display:inline-block;
     }
     }
     .histogram-chart {
     .histogram-chart {
       position:relative;
       position:relative;
@@ -23,7 +23,7 @@
   <div>
   <div>
     <span ng-show='panel.zoomlinks && data'>
     <span ng-show='panel.zoomlinks && data'>
       <!--<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>-->
       <!--<a class='small' ng-click='zoom(0.5)'><i class='icon-zoom-in'></i> Zoom In</a>-->
-      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> | 
+      <a class='small' ng-click='zoom(2)'><i class='icon-zoom-out'></i> Zoom Out</a> |
     </span>
     </span>
     <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
     <span ng-show="panel.legend" ng-repeat='series in data' class="histogram-legend">
       <i class='icon-circle' ng-style="{color: series.info.color}"></i>
       <i class='icon-circle' ng-style="{color: series.info.color}"></i>
@@ -32,5 +32,5 @@
     <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
     <span ng-show="panel.legend" class="small"><span ng-show="panel.value_field && panel.mode != 'count'">{{panel.value_field}}</span> {{panel.mode}} per <strong>{{panel.interval}}</strong> | (<strong>{{hits}}</strong> hits)</span>
   </div>
   </div>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
   <center><img ng-show='panel.loading && _.isUndefined(data)' src="common/img/load_big.gif"></center>
-  <div histogram-chart class="histogram-chart" params="{{panel}}"></div>
-</kibana-panel>         
+  <div histogram-chart class="pointer histogram-chart" params="{{panel}}"></div>
+</kibana-panel>

+ 2 - 2
panels/pie/module.html

@@ -8,9 +8,9 @@
   </div><br>
   </div><br>
   <div style="clear:both"></div>
   <div style="clear:both"></div>
 
 
-  <div pie params="{{panel}}" style="position:relative"></div>
+  <div pie class="pointer" params="{{panel}}" style="position:relative"></div>
 
 
   <div ng-show="panel.legend == 'below'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
   <div ng-show="panel.legend == 'below'" ng-repeat="query in legend" style="float:left;padding-left: 10px;">
     <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
     <span ng-show='panel.chart != "none"'><i class="icon-circle" ng-style="{color:query.color}"></i></span><span class="small"> {{query.label}} ({{query.data[0][1]}}) </span></span>
   </div>
   </div>
-</kibana-panel>         
+</kibana-panel>

+ 6 - 6
panels/terms/module.html

@@ -5,7 +5,7 @@
   <!-- START Pie or bar chart -->
   <!-- START Pie or bar chart -->
   <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
   <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend above -->
     <!-- vertical legend above -->
-    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+    <table class="small" ng-show="panel.arrangement == 'vertical'">
       <tr ng-repeat="term in legend">
       <tr ng-repeat="term in legend">
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
       </tr>
       </tr>
@@ -21,11 +21,11 @@
   <!-- keep legend from over lapping -->
   <!-- keep legend from over lapping -->
   <div style="clear:both"></div>
   <div style="clear:both"></div>
 
 
-  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative"></div>
+  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" terms-chart params="{{panel}}" style="position:relative" class="pointer"></div>
 
 
   <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
   <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
     <!-- vertical legend below -->
     <!-- vertical legend below -->
-    <table class="small" ng-show="panel.arrangement == 'vertical'">  
+    <table class="small" ng-show="panel.arrangement == 'vertical'">
       <tr ng-repeat="term in legend">
       <tr ng-repeat="term in legend">
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
         <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}</td>
       </tr>
       </tr>
@@ -39,7 +39,7 @@
   </div>
   </div>
   <!-- END Pie or Bar chart -->
   <!-- END Pie or Bar chart -->
 
 
-  <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">  
+  <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
     <thead>
     <thead>
       <th>Term</th> <th>Count</th> <th>Action</th>
       <th>Term</th> <th>Count</th> <th>Action</th>
     </thead>
     </thead>
@@ -48,11 +48,11 @@
       <td>{{term.data[0][1]}}</td>
       <td>{{term.data[0][1]}}</td>
       <td>
       <td>
         <span ng-hide="term.meta == 'other'">
         <span ng-hide="term.meta == 'other'">
-          <i class='icon-search pointer' ng-click="build_search(term)"></i> 
+          <i class='icon-search pointer' ng-click="build_search(term)"></i>
           <i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
           <i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
         </span>
         </span>
       </td>
       </td>
     </tr>
     </tr>
   </table>
   </table>
 
 
-</kibana-panel>         
+</kibana-panel>

+ 24 - 19
panels/timepicker/module.html

@@ -1,36 +1,41 @@
 <kibana-panel ng-controller='timepicker' ng-init="init()">
 <kibana-panel ng-controller='timepicker' ng-init="init()">
-  <div class="row-fluid" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
-    <div ng-switch-when="absolute">
-      <div class="span5">
+  <style>
+    .timepicker-block {
+      display: inline-block;
+    }
+  </style>
+
+  <div class="row-fluid form-horizontal" ng-switch="panel.mode" ng-show="filterSrv.idsByType('time').length > 0">
+    <div ng-switch-when="absolute" >
+      <div class="timepicker-block">
         <form class="nomargin">
         <form class="nomargin">
           <label><small>From</small></label>
           <label><small>From</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
         </form>
         </form>
       </div>
       </div>
-      <div class="span5" style="margin-left:10px">
+      <div class="timepicker-block" style="margin-left:10px">
         <form class="nomargin">
         <form class="nomargin">
           <label style="margin-left:5px"><small>To (<a ng-click="to_now()">now</a>)</small></label>
           <label style="margin-left:5px"><small>To (<a ng-click="to_now()">now</a>)</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.to.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.to.time" bs-timepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.to.time" bs-timepicker>
       </form>
       </form>
       </div>
       </div>
-      <div class="span1">
+      <div class="timepicker-block">
         <form class="nomargin">
         <form class="nomargin">
-          <label><small><br></small></label>
-          <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
+          <button class="btn" ng-click="time_apply()"><i class="icon-ok"></i></button>
         </form>
         </form>
       </div>
       </div>
     </div>
     </div>
     <div ng-switch-when="since">
     <div ng-switch-when="since">
-      <div class="span5">
+      <div class="timepicker-block">
         <form class="nomargin">
         <form class="nomargin">
           <label><small>Since</small></label>
           <label><small>Since</small></label>
-          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>  
+          <input type="text" class="input-smaller" ng-change="time_check()" ng-model="timepicker.from.date" data-date-format="mm/dd/yyyy" bs-datepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
           <input type="text" class="input-mini" ng-change="time_check()" data-show-meridian="false" data-show-seconds="true" ng-model="timepicker.from.time" bs-timepicker>
         </form>
         </form>
       </div>
       </div>
-      <div class="span1" style="margin-left:10px">
+      <div class="timepicker-block" style="margin-left:10px">
         <form class="nomargin">
         <form class="nomargin">
           <label><small><br></small></label>
           <label><small><br></small></label>
           <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
           <button class="btn" ng-click="time_apply()" ><i class="icon-ok"></i></button>
@@ -38,7 +43,7 @@
       </div>
       </div>
     </div>
     </div>
     <div ng-switch-when="relative">
     <div ng-switch-when="relative">
-      <div class="span11">
+      <div class="timepicker-block">
         <form class="nomargin input-append">
         <form class="nomargin input-append">
           <label><small>The last</small></label>
           <label><small>The last</small></label>
           <button class="btn btn" ng-repeat='timespan in panel.time_options' ng-class="{'btn-success': (panel.timespan == timespan)}" ng-click="set_timespan(timespan)">{{timespan}}</button>
           <button class="btn btn" ng-repeat='timespan in panel.time_options' ng-class="{'btn-success': (panel.timespan == timespan)}" ng-click="set_timespan(timespan)">{{timespan}}</button>
@@ -56,18 +61,18 @@
   </div>
   </div>
   <div class="row-fluid nomargin">
   <div class="row-fluid nomargin">
     <div class="span12 small" ng-show="filterSrv.idsByType('time').length > 0">
     <div class="span12 small" ng-show="filterSrv.idsByType('time').length > 0">
-      <a ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> | 
-      <a ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> | 
-      <a ng-click="set_mode('since')"    ng-class="{'strong': (panel.mode == 'since')}">Since</a>
-      <span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> | 
-        <input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh 
+      <a class="link" ng-click="set_mode('relative')" ng-class="{'strong': (panel.mode == 'relative')}">Relative</a> |
+      <a class="link" ng-click="set_mode('absolute')" ng-class="{'strong': (panel.mode == 'absolute')}">Absolute</a> |
+      <a class="link" ng-click="set_mode('since')"    ng-class="{'strong': (panel.mode == 'since')}">Since</a>
+      <span ng-hide="panel.mode == 'absolute' || panel.mode == 'none'"> |
+        <input type="checkbox" ng-model="panel.refresh.enable" ng-change='refresh();'> Auto-refresh
         <span ng-class="{'ng-cloak': !panel.refresh.enable}">
         <span ng-class="{'ng-cloak': !panel.refresh.enable}">
           every <a data-title="<small>Auto-refresh Settings</small>" data-placement="bottom" bs-popover="'panels/timepicker/refreshctrl.html'">{{panel.refresh.interval}}s</a>.
           every <a data-title="<small>Auto-refresh Settings</small>" data-placement="bottom" bs-popover="'panels/timepicker/refreshctrl.html'">{{panel.refresh.interval}}s</a>.
         </span>
         </span>
       </span>
       </span>
     </div>
     </div>
     <div class="span12 small" ng-show="filterSrv.idsByType('time').length < 1">
     <div class="span12 small" ng-show="filterSrv.idsByType('time').length < 1">
-      <a class='btn btn-small' ng-click="time_apply()">Create a time filter</a> 
+      <a class='btn btn-small' ng-click="time_apply()">Create a time filter</a>
     </div>
     </div>
   </div>
   </div>
 </kibana-panel>
 </kibana-panel>