New look and fix for #739

src/app/controllers/dash.js

@@ -104,6 +104,12 @@ function (angular, config, _) {
       }
     };
 
+    $scope.pulldownTabStyle = function(i) {
+      var classes = ['bgPrimary','bgSuccess','bgWarning','bgDanger','bgInverse','bgInfo'];
+      i = i%classes.length;
+      return classes[i];
+    };
+
     $scope.setEditorTabs = function(panelMeta) {
       $scope.editorTabs = ['General','Panel'];
       if(!_.isUndefined(panelMeta.editorTabs)) {

src/app/directives/configModal.js

@@ -1,8 +1,8 @@
 define([
   'angular',
-  'app',
+  'underscore'
 ],
-function (angular) {
+function (angular,_) {
   'use strict';
 
   angular
@@ -11,14 +11,27 @@ function (angular) {
       return {
         restrict: 'A',
         link: function(scope, elem) {
+
           // create a new modal. Can't reuse one modal unforunately as the directive will not
           // re-render on show.
           elem.bind('click',function(){
+
+            // Create a temp scope so we can discard changes to it if needed
+            var tmpScope = scope.$new();
+            tmpScope.panel = angular.copy(scope.panel);
+
+            tmpScope.editSave = function(panel) {
+              // Correctly set the top level properties of the panel object
+              _.each(panel,function(v,k) {
+                scope.panel[k] = panel[k];
+              });
+            };
+
             var panelModal = $modal({
               template: './app/partials/paneleditor.html',
               persist: true,
               show: false,
-              scope: scope,
+              scope: tmpScope,
               keyboard: false
             });
 

src/app/directives/kibanaPanel.js

@@ -31,9 +31,6 @@ function (angular) {
               'onStop:\'panelMoveStop\''+
               '}"  ng-model="row.panels"><i class="icon-move"></i></span>'+
           '</span>' +
-          '<span class="extra row-button" ng-show="panel.draggable == false">' +
-            '<span class="row-text">{{panel.type}}</span>'+
-          '</span>' +
 
           '<span class="row-button extra" ng-show="panel.editable != false">' +
             '<span config-modal class="pointer">'+
@@ -51,7 +48,7 @@ function (angular) {
             '</span>'+
           '</span>' +
 
-          '<span class="row-button row-text panel-title" ng-show="panel.title">' +
+          '<span class="panel-text panel-title" ng-show="panel.title">' +
             '{{panel.title}}' +
           '</span>'+
 

src/app/panels/filtering/module.html

@@ -8,23 +8,13 @@
       vertical-align: top;
       width: 220px;
       padding: 5px 5px 0px 5px;
-      border: #555 1px solid;
       margin: 5px 5px 5px 0px;
+      color: #fff;
+      background-color: #444;
     }
     .filter-panel-filter ul {
       margin-bottom: 3px;
     }
-
-
-    .filter-must {
-      border-top: #7EB26D 3px solid;
-    }
-    .filter-mustNot {
-      border-top: #E24D42 3px solid;
-    }
-    .filter-either {
-      border-top: #EF843C 3px solid;
-    }
     .filter-deselected {
       opacity: 0.5;
     }
@@ -47,7 +37,7 @@
     <span ng-show="filterSrv.ids.length == 0">
       <h5>No filters available</h5>
     </span>
-    <div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter filter-{{filterSrv.list[id].mandate}}" ng-class="{'filter-deselected': !filterSrv.list[id].active}">
+    <div ng-repeat="id in filterSrv.ids" class="small filter-panel-filter">
       <div>
         <strong>{{filterSrv.list[id].type}}</strong>
         <span ng-show="!filterSrv.list[id].editing && isEditable(filterSrv.list[id])" class="filter-mandate" ng-click="filterSrv.list[id].editing = true">
@@ -57,6 +47,8 @@ <h5>No filters available</h5>
           {{filterSrv.list[id].mandate}}
         </span>
 
+        <i ng-class="getFilterClass(filterSrv.list[id])" class="icon-circle"></i>
+
         <span ng-show="filterSrv.list[id].editing">
           <select class="input-small" ng-model="filterSrv.list[id].mandate" ng-options="f for f in ['must','mustNot','either']"></select>
         </span>
@@ -85,6 +77,6 @@ <h5>No filters available</h5>
         </div>
       </form>
     </div>
-    <i class="link icon-plus-sign" ng-click="add()" bs-tooltip="'Add a query filter'" data-placement="right"></i>
+    <i class="pointer icon-plus-sign" ng-click="add()" bs-tooltip="'Add a query filter'" data-placement="right"></i>
   </div>
 </div>

src/app/panels/filtering/module.js

@@ -67,6 +67,24 @@ function (angular, app, _) {
       return !_.contains(['type','id','alias','mandate','active','editing'],key);
     };
 
+    $scope.getFilterClass = function(filter) {
+      if(filter.active !== true) {
+        return 'muted';
+      } else {
+        switch (filter.mandate)
+        {
+        case 'must':
+          return 'text-success';
+        case 'mustNot':
+          return 'text-error';
+        case 'either':
+          return 'text-warning';
+        default:
+          return 'text-info';
+        }
+      }
+    };
+
     $scope.isEditable = function(filter) {
       var uneditable = ['time'];
       if(_.contains(uneditable,filter.type)) {

src/app/panels/query/module.html

@@ -16,7 +16,7 @@
     </form>
   </div>
   <div style="display:inline-block" ng-repeat="id in querySrv.ids|pinnedQuery:true">
-    <span class="pointer" ng-show="$first" ng-click="panel.pinned = !panel.pinned"><span class="pins">Pinned</span> <i ng-class="{'icon-caret-right':panel.pinned,'icon-caret-left':!panel.pinned}"></i></span>
+    <span class="pointer badge pins" ng-show="$first" ng-click="panel.pinned = !panel.pinned">Pinned <i ng-class="{'icon-caret-right':panel.pinned,'icon-caret-left':!panel.pinned}"></i></span>
     <span ng-show="panel.pinned" class="badge pinned">
       <i class="icon-circle pointer" ng-show="querySrv.list[id].enable" ng-style="{color: querySrv.list[id].color}" data-unique="1" bs-popover="'app/panels/query/meta.html'" data-placement="bottomLeft"></i>
       <i class="pointer icon-circle-blank" bs-tooltip="'Activate query'" ng-click="querySrv.list[id].enable=true;dashboard.refresh();" ng-hide="querySrv.list[id].enable" ng-style="{color: querySrv.list[id].color}"></i>

src/app/panels/query/query.css

@@ -39,9 +39,6 @@
 .form-search:hover .remove-query {
   opacity: 1;
 }
-.query-panel .pins {
-  text-decoration: underline;
-}
 .query-panel .pinned {
   margin-right: 5px;
 }

src/app/panels/table/editor.html

@@ -1,49 +1,45 @@
   <div class="row-fluid">
-    <div class="section span6">
-      <h5>Columns</h5>
-      <form class="input-append editor-option">
-        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newfield'>
-        <button class="btn" ng-click="toggle_field(newfield);newfield=''"><i class="icon-plus"></i></button>
-      </form><br>
-      <span style="margin-left:3px" ng-repeat="field in $parent.panel.fields" class="label">{{field}} <i class="pointer icon-remove-sign" ng-click="toggle_field(field)"></i></span>
-    </div>
-    <div class="section span6">
-      <h5>Hightlighted Fields</h5>
-      <form class="input-append editor-option">
-        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newhighlight' ng-change="set_refresh(true)">
-        <button class="btn" ng-click="toggle_highlight(newhighlight);newhighlight=''"><i class="icon-plus"></i></button>
-      </form><br>
-      <span style="margin-left:3px" ng-repeat="field in $parent.panel.highlight" class="label">{{field}} <i class="pointer icon-remove-sign" ng-click="toggle_highlight(field);set_refresh(true)" ></i></span>
-    </div>
-  </div>
-
-  <div class="editor-row">
-    <div class="section">
+    <div class="span6 section">
       <h5>Options</h5>
       <div class="editor-option">
-        <h6>Header</h6><input type="checkbox" ng-model="panel.header" ng-checked="panel.header">
+        <label class="small">Header</label><input type="checkbox" ng-model="panel.header" ng-checked="panel.header">
       </div>
       <div class="editor-option">
-        <h6>Sorting</h6><input type="checkbox" ng-model="panel.sortable" ng-checked="panel.sortable">
+        <label class="small">Sorting</label><input type="checkbox" ng-model="panel.sortable" ng-checked="panel.sortable">
       </div>
       <div class="editor-option" style="white-space:nowrap" ng-show='panel.sortable'>
-        <h6>Sort</h6>
+        <label class="small">Sort</label>
         <input class="input-small" bs-typeahead="fields.list" ng-model="panel.sort[0]" type="text"></input>
         <i ng-click="set_sort(panel.sort[0])" ng-class="{'icon-chevron-up': panel.sort[1] == 'asc','icon-chevron-down': panel.sort[1] == 'desc'}"></i>
       </div>
-      <div class="editor-option"><h6>Font Size</h6>
+      <div class="editor-option"><label class="small">Font Size</label>
         <select class="input-small" ng-model="panel.style['font-size']" ng-options="f for f in ['7pt','8pt','9pt','10pt','12pt','14pt','16pt','18pt','20pt','24pt','28pt','32pt','36pt','42pt','48pt','52pt','60pt','72pt']"></select></span>
       </div>
       <div class="editor-option">
-        <h6>Trim Factor <tip>Trim fields to this long divided by # of rows. Requires data refresh.</tip></h6>
+        <label class="small">Trim Factor <tip>Trim fields to this long divided by # of rows. Requires data refresh.</tip></label>
         <input type="number" class="input-small" ng-model="panel.trimFactor" ng-change="set_refresh(true)">
       </div>
+      <br>
       <div class="editor-option">
-        <h6>Local Time <tip>Adjust time field to browser's local time</tip></h6><input type="checkbox" ng-change="set_refresh(true)" ng-model="panel.localTime" ng-checked="panel.localTime">
+        <label class="small">Local Time <tip>Adjust time field to browser's local time</tip></label><input type="checkbox" ng-change="set_refresh(true)" ng-model="panel.localTime" ng-checked="panel.localTime">
       </div>
       <div class="editor-option" ng-show="panel.localTime">
-        <h6>Time Field</h6>
+        <label class="small">Time Field</label>
         <input type="text" class="input-small" ng-model="panel.timeField" ng-change="set_refresh(true)" bs-typeahead="fields.list">
       </div>
     </div>
+    <div class="section span6">
+      <h5>Columns</h5>
+      <form class="input-append editor-option">
+        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newfield'>
+        <button class="btn" ng-click="toggle_field(newfield);newfield=''"><i class="icon-plus"></i></button>
+      </form><br>
+      <span style="margin-left:3px" ng-repeat="field in $parent.panel.fields" class="label">{{field}} <i class="pointer icon-remove-sign" ng-click="toggle_field(field)"></i></span>
+      <h5>Hightlighted Fields</h5>
+      <form class="input-append editor-option">
+        <input bs-typeahead="fields.list" type="text" class="input-small" ng-model='newhighlight' ng-change="set_refresh(true)">
+        <button class="btn" ng-click="toggle_highlight(newhighlight);newhighlight=''"><i class="icon-plus"></i></button>
+      </form><br>
+      <span style="margin-left:3px" ng-repeat="field in $parent.panel.highlight" class="label">{{field}} <i class="pointer icon-remove-sign" ng-click="toggle_highlight(field);set_refresh(true)" ></i></span>
+    </div>
   </div>

src/app/panels/table/module.js

@@ -185,6 +185,8 @@ function (angular, app, _, kbn, moment) {
       });
     };
 
+
+
     $scope.toggle_micropanel = function(field,groups) {
       var docs = _.map($scope.data,function(_d){return _d.kibana._source;});
       var topFieldValues = kbn.top_field_values(docs,field,10,groups);

src/app/panels/timepicker/editor.html

@@ -1,14 +1,16 @@
-  <div class="row-fluid">
-    <div class="span4">
-      <label class="small">Relative time options <small>comma seperated</small></label>
-      <input type="text" array-join class="input-large" ng-model="panel.time_options">
-    </div>
-    <div class="span4">
-      <label class="small">Auto-refresh options <small>comma seperated</small></label>
-      <input type="text" array-join class="input-large" ng-model="panel.refresh_intervals">
-    </div>
-    <div class="span2">
-      <label class="small">Time Field</label>
-      <input type="text" class="input-small" ng-model="panel.timefield">
+  <div class="editor-row">
+    <div class="section">
+      <div class="editor-option">
+        <label class="small">Relative time options <small>comma seperated</small></label>
+        <input type="text" array-join class="input-large" ng-model="panel.time_options">
+      </div>
+      <div class="editor-option">
+        <label class="small">Auto-refresh options <small>comma seperated</small></label>
+        <input type="text" array-join class="input-large" ng-model="panel.refresh_intervals">
+      </div>
+      <div class="editor-option">
+        <label class="small">Time Field</label>
+        <input type="text" class="input-small" ng-model="panel.timefield">
+      </div>
     </div>
   </div>

src/app/partials/dashLoader.html

@@ -68,7 +68,7 @@ <h6 ng-hide="gist.files.length || !gist.url.length">No gist dashboards found</h6
 
     <li ng-show="dashboard.current.loader.save_elasticsearch">
       <form class="input-prepend nomargin">
-        <button style="margin-top:-1px" class="btn" ng-click="elasticsearch_save('dashboard')"><i class="icon-save"></i></button>
+        <button class="btn" ng-click="elasticsearch_save('dashboard')"><i class="icon-save"></i></button>
         <input class='input-medium' ng-model="dashboard.current.title" type="text" ng-model="elasticsearch.title"/>
       </form>
     </li>

src/app/partials/dashboard.html

@@ -1,15 +1,16 @@
 <!-- is there a better way to repeat without actually affecting the page? -->
 <nil ng-repeat="pulldown in dashboard.current.pulldowns" ng-controller="PulldownCtrl" ng-show="pulldown.enable">
+  <div class="top-row-close pointer pull-left" ng-class="pulldownTabStyle($index)" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
+    <span class="small">{{pulldown.type}}</span>
+    <i class="small" ng-class="{'icon-caret-left':pulldown.collapse,'icon-caret-right':!pulldown.collapse}"></i>
+    <i class="small icon-star" ng-show="row.notice && pulldown.collapse"></i>
+  </div>
+  <div class="clearfix bgNav" ng-hide="pulldown.collapse"></div>
   <div class="top-row-open" ng-hide="pulldown.collapse">
     <kibana-simple-panel type="pulldown.type" ng-cloak></kibana-simple-panel>
   </div>
-  <div class="top-row-close pointer" ng-click="toggle_pulldown(pulldown);dismiss();" bs-tooltip="'Toggle '+pulldown.type" data-placement="bottom">
-    <span class="small row-text">{{pulldown.type}}</span>
-    <i class="small" ng-class="{'icon-caret-left':pulldown.collapse,'icon-caret-up':!pulldown.collapse}"></i>
-    <i class="small icon-star text-warning" ng-show="row.notice && pulldown.collapse"></i>
-  </div>
 </nil>
-
+<div class="clearfix bgNav" ></div>
 <div class="container-fluid main">
   <div class="row-fluid">
     <div class="row-fluid container" style="margin-top:10px; width:98%">
@@ -19,32 +20,28 @@
           <div class="row-fluid" style="padding:0px;margin:0px;position:relative;">
 
             <div class="row-close span12" ng-show="row.collapse" data-placement="bottom" >
-              <span class="row-button" bs-modal="'app/partials/roweditor.html'" class="pointer">
+              <span class="row-button bgWarning" bs-modal="'app/partials/roweditor.html'" class="pointer">
                 <i bs-tooltip="'Configure row'" data-placement="right" ng-show="row.editable" class="icon-cog pointer"></i>
               </span>
-              <span class="row-button" ng-click="toggle_row(row)" ng-show="row.collapsable">
-                <i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-caret-right pointer" ></i>
+              <span class="row-button bgPrimary" ng-click="toggle_row(row)" ng-show="row.collapsable">
+                <i bs-tooltip="'Expand row'" data-placement="right" ng-show="row.editable" class="icon-caret-left pointer" ></i>
               </span>
               <span class="row-button row-text" ng-click="toggle_row(row)" ng-class="{'pointer':row.collapsable}">{{row.title || 'Row '+$index}}</span>
             </div>
 
             <div style="text-align:center" class="row-open" ng-show="!row.collapse">
-              <span ng-show="row.collapsable">
-                <i bs-tooltip="'Hide row'" data-placement="right"  class="icon-caret-up" ng-click="toggle_row(row)"></i>
+              <div ng-show="row.collapsable" class='row-tab bgPrimary' ng-click="toggle_row(row)">
+                <i bs-tooltip="'Hide row'" data-placement="right"  class="icon-caret-right" ></i>
                 <br>
-              </span>
-              <span bs-modal="'app/partials/roweditor.html'" ng-show="row.editable">
+              </div>
+              <div bs-modal="'app/partials/roweditor.html'" class='row-tab bgWarning' ng-show="row.editable">
                 <i bs-tooltip="'Configure row'" data-placement="right"  class="icon-cog pointer"></i>
                 <br>
-              </span>
-              <span ng-show="rowSpan(row) == 12 && row.editable">
-                <i bs-tooltip="'Row full. Create a new row to add more panels'" data-placement="right" class="icon-columns"></i>
-                <br>
-              </span>
-              <span ng-show="rowSpan(row) > 12">
-                <i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right" class="icon-warning-sign text-warning"></i>
+              </div>
+              <div ng-show="rowSpan(row) > 12" class='row-tab bgDanger'>
+                <i bs-tooltip="'Total span > 12. This row may format poorly'" data-placement="right" class="icon-warning-sign"></i>
                 <br>
-              </span>
+              </div>
             </div>
 
           </div>

src/app/partials/dasheditor.html

@@ -79,7 +79,7 @@ <h6>Preload Fields <i class="icon-question-sign" bs-tooltip="'Preload available
     <div class="row-fluid">
       <div class="span8">
         <h4>Rows</h4>
-        <table class="table table-condensed table-bordered">
+        <table class="table table-striped">
           <thead>
             <th width="1%"></th>
             <th width="1%"></th>

src/app/partials/paneleditor.html

@@ -19,5 +19,6 @@
 
 <div class="modal-footer">
   <!-- close_edit() is provided here to allow for a scope to perform action on dismiss -->
-  <button type="button" class="btn btn-danger" ng-click="editor.index=0;close_edit();dismiss()">Close</button>
+  <button type="button" class="btn btn-success" ng-click="editor.index=0;editSave(panel);close_edit();dismiss()">Save</button>
+  <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss()">Cancel</button>
 </div>

src/app/partials/roweditor.html

@@ -22,7 +22,7 @@
   </div>
   <div class="row-fluid" ng-if="editor.index == 1">
     <div class="span12">
-      <h4>Panels <i class="icon-plus-sign link" bs-tooltip="'Add panel'" ng-click="editor.index = 2"></i></h4>
+      <h4>Panels</h4>
       <table class="table table-condensed table-striped">
         <thead>
           <th>Title</th>
@@ -60,6 +60,7 @@ <h4>Select Panel Type</h4>
   </div>
 </div>
 <div class="modal-footer">
-  <button ng-show="panel.type &amp;&amp; editor.index == 2" ng-click="add_panel(row,panel); reset_panel(); editor.index == 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
+  <button ng-show="editor.index == 1" ng-click="editor.index = 2;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
+  <button ng-show="panel.type && editor.index == 2" ng-click="add_panel(row,panel); reset_panel(); editor.index = 1;" class="btn btn-success" ng-disabled="panel.loadingEditor">Add Panel</button>
   <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();close_edit()">Close</button>
 </div>