Merge pull request #344 from w33ble/settings-ui

Fixes to Settings UI

src/kibana/apps/settings/sections/advanced/index.html

@@ -55,7 +55,7 @@ <h4>Caution: You can break stuff here</h4>
             <button
               ng-if="!conf.editting"
               ng-click="edit(conf)"
-              class="btn btn-primary"
+              class="btn btn-default"
               ng-disabled="conf.tooComplex">
               <i class="fa fa-pencil"></i>
             </button>
@@ -70,11 +70,19 @@ <h4>Caution: You can break stuff here</h4>
             </button>
 
             <button
+              ng-if="!conf.editting"
               ng-click="clear(conf)"
-              ng-disabled="conf.value === undefined"
+              ng-hide="conf.value === undefined"
               class="btn btn-danger">
               <i class="fa fa-trash-o"></i>
             </button>
+
+            <button
+              ng-if="conf.editting"
+              ng-click="cancelEdit(conf)"
+              class="btn btn-default">
+              <i class="fa fa-times"></i>
+            </button>
           </td>
         </tr>
       </tbody>

src/kibana/apps/settings/sections/advanced/index.js

@@ -14,6 +14,9 @@ define(function (require) {
       link: function ($scope) {
         var notify = new Notifier();
         var configVals = config._vals();
+        var keyCodes = {
+          ESC: 27
+        };
 
         // determine if a value is too complex to be edditted (at this time)
         var tooComplex = function (conf) {
@@ -65,13 +68,12 @@ define(function (require) {
         });
 
         $scope.maybeCancel = function ($event, conf) {
-          if ($event.keyCode === 27) {
-            conf.editting = false;
+          if ($event.keyCode === keyCodes.ESC) {
+            $scope.cancelEdit(conf);
           }
         };
 
         $scope.edit = function (conf) {
-          console.log(conf);
           conf.unsavedValue = conf.value;
           $scope.configs.forEach(function (c) {
             c.editting = (c === conf);
@@ -84,6 +86,10 @@ define(function (require) {
           });
         };
 
+        $scope.cancelEdit = function (conf) {
+          conf.editting = false;
+        };
+
         $scope.clear = function (conf) {
           return loading(conf, function () {
             return config.clear(conf.name);

src/kibana/apps/settings/sections/objects/_objects.html

@@ -25,23 +25,31 @@ <h4>Caution: You can break stuff here</h4>
       </div>
       <div ng-repeat="service in services" ng-class="{ active: state.tab === service.title }" class="tab-pane">
         <ul class="list-unstyled">
-          <li ng-repeat="item in service.data">
-            <div class="pull-right">
-              <a href="{{ item.url }}" class="btn-success btn btn-xs">View</a>
-              &nbsp;
-              <a
-                href="#/settings/objects/{{service.service | uriescape}}/{{item.id | uriescape}}"
-                class="btn-primary btn btn-xs" >
-                Edit
-              </a>
+          <li class="item" ng-repeat="item in service.data">
+            <div class="actions pull-right">
+              <button
+                ng-click="edit(service, item)"
+                class="btn btn-default">
+                <i class="fa fa-pencil"></i>
+              </button>
+
+              <button
+                ng-click="open(item)"
+                class="btn btn-info">
+                <i class="fa fa-eye"></i>
+              </button>
             </div>
+
             <div class="pull-left">
               <input
                 ng-click="item.checked = !item.checked; toggleDeleteBtn(service)"
                 ng-checked="item.checked"
                 type="checkbox" >
             </div>
-            <a href="#/settings/objects/{{service.service | uriescape}}/{{item.id | uriescape}}"><i ng-class="item.icon" class="fa"></i>&nbsp;{{ item.title }}</a>
+
+            <div class="item-title">
+              <a ng-click="open(item)">{{ item.title }}</a>
+            </div>
           </li>
           <li ng-if="!service.data.length" class="empty">No "{{service.title}}" found.</li>
         </ul>

src/kibana/apps/settings/sections/objects/_objects.js

@@ -9,7 +9,7 @@ define(function (require) {
   });
 
   require('modules').get('apps/settings')
-  .directive('kbnSettingsObjects', function (config, Notifier, Private) {
+  .directive('kbnSettingsObjects', function (config, Notifier, Private, kbnUrl) {
     return {
       restrict: 'E',
       controller: function ($scope, $injector, $q, appStateFactory) {
@@ -49,6 +49,20 @@ define(function (require) {
           $scope.toggleDeleteBtn(service);
         });
 
+        $scope.open = function (item) {
+          kbnUrl.change(item.url.substr(1));
+        };
+
+        $scope.edit = function (service, item) {
+          console.log(service, item);
+          var params = {
+            service: service.service,
+            id: item.id
+          };
+
+          kbnUrl.change('/settings/objects/{{ service }}/{{ id }}', params);
+        };
+
         $scope.toggleDeleteBtn = function (service) {
           $scope.deleteAllBtn = _.some(service.data, { checked: true});
         };

src/kibana/apps/settings/sections/objects/_view.html

@@ -1,7 +1,7 @@
 <kbn-settings-app section="objects">
   <kbn-settings-objects-view class="container">
     <div class="pull-right" style="margin-top: 20px;">
-      <a href="{{ link }}" class="btn btn-success">View {{ title }}</a>
+      <a href="{{ link }}" class="btn btn-primary">View {{ title }}</a>
       <a confirm-click="delete()" class="btn btn-danger"><i class="fa fa-trash-o"></i> Delete {{ title }} Object</a>
     </div>
     <h1>Edit {{ title }} Object</h1>
@@ -18,9 +18,10 @@ <h4>Caution: You can break stuff here</h4>
         <input ng-if="field.type === 'number'"  type="number" ng-model="field.value" class="form-control span12"/>
         <div ng-if="field.type === 'json' || field.type === 'array'" ui-ace="{ onLoad: aceLoaded, mode: 'json' }" id="{{field.name}}" ng-model="field.value" class="form-control"></div>
       </div>
-      <div class="form-group">
-        <button class="btn btn-primary" ng-disabled="objectForm.$invalid || aceInvalidEditors.length !==0">Save {{ title }} Object</button>
-      </div>
     </form>
+    <div class="form-group">
+      <button class="btn btn-primary" ng-click="cancel()">Cancel</button>
+      <button class="btn btn-success" ng-click="submit()" ng-disabled="objectForm.$invalid || aceInvalidEditors.length !==0">Save {{ title }} Object</button>
+    </div>
   </kbn-settings-objects-view>
 </kbn-settings-app>

src/kibana/apps/settings/sections/objects/_view.js

@@ -25,7 +25,7 @@ define(function (require) {
          * values is plain object it will recurse through all the keys till it hits
          * a string, number or an array.
          *
-         * @param {array} memo The stack of fields 
+         * @param {array} memo The stack of fields
          * @param {mixed} value The value of the field
          * @param {stirng} key The key of the field
          * @param {object} collection This is a reference the collection being reduced
@@ -105,8 +105,13 @@ define(function (require) {
           });
         };
 
+        $scope.cancel = function () {
+          $window.history.back();
+          return false;
+        };
+
         /**
-         * Deletes an object and sets the notification 
+         * Deletes an object and sets the notification
          * @param {type} name description
          * @returns {type} description
          */

src/kibana/apps/settings/styles/main.less

@@ -39,7 +39,7 @@ kbn-settings-objects {
   .action-bar {
     margin-top: 10px;
     background-color: @gray-lighter;
-    padding: 4px 8px;
+    padding: 4px 12px;
 
     .btn-xs {
       font-size: 10px;
@@ -73,6 +73,20 @@ kbn-settings-objects-view {
   }
 }
 
+.objects-settings {
+  .item {
+    padding: 12px;
+
+    .item-title {
+      margin-left: 30px;
+    }
+
+    .actions {
+      margin-top: -6px;
+    }
+  }
+}
+
 .indices-settings {
   i.active {
     color: @btn-success-bg;