Reworked the examples app to be a better example of how other apps co…

…uld be formatted
elastic · Feb 24, 2014 · 193f4f9 · 193f4f9
1 parent b2b5db4
commit 193f4f9
Show file tree

Hide file tree

Showing 21 changed files with 6,283 additions and 152 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,2 @@
 .DS_Store
-node_modules
-src/kibana/styles/*.css
+node_modules
diff --git a/src/index.html b/src/index.html
@@ -9,7 +9,7 @@
     <!-- load the root require context -->
     <script src="bower_components/requirejs/require.js"></script>
     <script src="kibana/require.config.js"></script>
-    <script>require(['main'], function () {});</script>
+    <script>require(['kibana'], function () {});</script>
     <link rel="stylesheet" href="kibana/styles/main.css" >
   </head>
   <body>

diff --git a/src/kibana/apps/dashboard/index.js b/src/kibana/apps/dashboard/index.js
@@ -1,3 +1,5 @@
 define(function (require) {
 
+  require('css!./styles/main.css');
+
 });
diff --git a/src/kibana/apps/dashboard/index.css → src/kibana/apps/dashboard/styles/main.css b/src/kibana/apps/dashboard/index.css → src/kibana/apps/dashboard/styles/main.css
diff --git a/src/kibana/apps/discover/index.css → src/kibana/apps/dashboard/styles/main.less b/src/kibana/apps/discover/index.css → src/kibana/apps/dashboard/styles/main.less
diff --git a/src/kibana/apps/discover/index.js b/src/kibana/apps/discover/index.js
@@ -1,3 +1,5 @@
 define(function (require) {
 
+  require('css!./styles/main.css');
+
 });
diff --git a/src/kibana/apps/visualize/index.css → src/kibana/apps/discover/styles/main.css b/src/kibana/apps/visualize/index.css → src/kibana/apps/discover/styles/main.css
diff --git a/src/kibana/apps/discover/styles/main.less b/src/kibana/apps/discover/styles/main.less
diff --git a/src/kibana/apps/examples/index.html b/src/kibana/apps/examples/index.html
@@ -1,8 +1,8 @@
-<div ng-controller="examples">
+<div ng-controller="examples" id="examples">
   <ul class="nav nav-tabs">
     <li ng-repeat="example in examples" ng-class="{ active: active ===  example }">
       <a ng-click="makeActive(example)">{{example}}</a>
     </li>
   </ul>
-  <div ng-include="activeUrl" onload="exampleLoaded()" ></div>
+  <ng-include src="activeUrl" onload="exampleLoaded()" ></ng-include>
 </div>
diff --git a/src/kibana/apps/examples/index.js b/src/kibana/apps/examples/index.js
@@ -1,135 +1,145 @@
 define(function (require) {
   var angular = require('angular');
+  var kibana = require('kibana');
 
-  angular
-    .module('kibana/controllers')
-    .controller('examples', function ($scope, $location, courier) {
-      $scope.examples = [
-        'config',
-        'mapper',
-        'courier'
-      ];
+  require('css!./styles/index.css');
 
-      $scope.makeActive = function (example) {
-        $scope.active = example;
-        $scope.activeUrl = 'kibana/apps/examples/partials/' + example + '.html';
-      };
+  var app = angular.module('app/examples', []);
+  kibana.useModule(app);
 
-      $scope.exampleLoaded = function () {
-        if ($scope.active !== 'config') {
-          courier.fetch();
-        }
-      };
-    });
+  // main controller for the examples
+  app.controller('examples', function ($scope, $location, courier) {
+    $scope.examples = [
+      'config',
+      'mapper',
+      'courier'
+    ];
 
-  angular
-    .module('kibana/directives')
-    .directive('configTest', function () {
-      return {
-        restrict: 'E',
-        template: 'My favorite number is {{favoriteNum}} <button ng-click="click()">New Favorite</button>',
-        controller: function ($scope, config) {
-          config.$bind($scope, 'favoriteNum', {
-            default: 0
+    $scope.makeActive = function (example) {
+      $scope.active = example;
+      $scope.activeUrl = 'kibana/apps/examples/partials/' + example + '.html';
+    };
+
+    $scope.exampleLoaded = function () {
+      if ($scope.active !== 'config') {
+        courier.fetch();
+      }
+    };
+  });
+
+  // verify that config can be used, that it is stored, and that changes to it can be seen across tabs
+  app.directive('configExample', function () {
+    return {
+      restrict: 'E',
+      template: 'My favorite number is {{favoriteNum}} <button ng-click="click()">New Favorite</button>',
+      controller: function ($scope, config) {
+        config.$bind($scope, 'favoriteNum', {
+          default: 0
+        });
+
+        $scope.click = function () {
+          $scope.favoriteNum++;
+        };
+      }
+    };
+  });
+
+  // verify that a search can be created and it will automatically fetch results
+  app.directive('courierExample', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        type: '@'
+      },
+      template: '<strong style="float:left">{{count}} :&nbsp;</strong><pre>{{json}}</pre>',
+      controller: function ($scope, courier) {
+        $scope.count = 0;
+        var source = courier.rootSearchSource.extend()
+          .type($scope.type)
+          .source({
+            include: 'country'
+          })
+          .$scope($scope)
+          .on('results', function (resp) {
+            $scope.count ++;
+            $scope.json = JSON.stringify(resp.hits, null, '  ');
           });
+      }
+    };
+  });
 
-          $scope.click = function () {
-            $scope.favoriteNum++;
-          };
-        }
-      };
-    })
-    .directive('courierTest', function () {
-      return {
-        restrict: 'E',
-        scope: {
-          type: '@'
-        },
-        template: '<strong style="float:left">{{count}} :&nbsp;</strong><pre>{{json}}</pre>',
-        controller: function ($scope, courier) {
-          $scope.count = 0;
-          var source = courier.rootSearchSource.extend()
-            .type($scope.type)
-            .source({
-              include: 'country'
-            })
-            .$scope($scope)
-            .on('results', function (resp) {
-              $scope.count ++;
-              $scope.json = JSON.stringify(resp.hits, null, '  ');
-            });
-        }
-      };
-    })
-    .directive('courierDocTest', function () {
-      return {
-        restrict: 'E',
-        scope: {
-          id: '@',
-          type: '@',
-          index: '@'
-        },
-        template: '<strong style="float:left">{{count}} : <button ng-click="click()">reindex</button> :&nbsp;</strong><pre>{{json}}</pre>',
-        controller: function (courier, $scope) {
-          $scope.count = 0;
-          var currentSource;
-          $scope.click = function () {
-            if (currentSource) {
-              source.doIndex(currentSource);
-            }
-          };
-          var source = courier.createSource('doc')
-            .id($scope.id)
-            .type($scope.type)
-            .index($scope.index)
-            .$scope($scope)
-            .on('results', function (doc) {
-              currentSource = doc._source;
-              $scope.count ++;
-              $scope.json = JSON.stringify(doc, null, '  ');
-            });
-        }
-      };
-    })
-    .directive('mappingTest', function () {
-      return {
-        restrict: 'E',
-        scope: {
-          type: '@',
-          fields: '@'
-        },
-        template: 'Mappings:<br><div ng-repeat="(name,mapping) in mappedFields">{{name}} = {{mapping.type}}</div><hr>' +
-          '<strong style="float:left">{{count}} :&nbsp;</strong><pre>{{json}}</pre>',
-        controller: function ($rootScope, $scope, courier) {
-          $scope.count = 0;
-          $scope.mappedFields = {};
+  // verify that a doc can be fetched, and it will be updated across tabs
+  app.directive('courierDocExample', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        id: '@',
+        type: '@',
+        index: '@'
+      },
+      template: '<strong style="float:left">{{count}} : <button ng-click="click()">reindex</button> :&nbsp;</strong><pre>{{json}}</pre>',
+      controller: function (courier, $scope) {
+        $scope.count = 0;
+        var currentSource;
+        $scope.click = function () {
+          if (currentSource) {
+            source.doIndex(currentSource);
+          }
+        };
+        var source = courier.createSource('doc')
+          .id($scope.id)
+          .type($scope.type)
+          .index($scope.index)
+          .$scope($scope)
+          .on('results', function (doc) {
+            currentSource = doc._source;
+            $scope.count ++;
+            $scope.json = JSON.stringify(doc, null, '  ');
+          });
+      }
+    };
+  });
 
-          var source = courier.rootSearchSource.extend()
-            .index('logstash-*')
-            .type($scope.type)
-            .source({
-              include: 'geo'
-            })
-            .$scope($scope)
-            .on('results', function (resp) {
-              $scope.count ++;
-              $scope.json = JSON.stringify(resp.hits, null, '  ');
-            });
+  // fetch the mapping for an index pattern
+  app.directive('mappingExample', function () {
+    return {
+      restrict: 'E',
+      scope: {
+        type: '@',
+        fields: '@'
+      },
+      template: 'Mappings:<br><div ng-repeat="(name,mapping) in mappedFields">{{name}} = {{mapping.type}}</div><hr>' +
+        '<strong style="float:left">{{count}} :&nbsp;</strong><pre>{{json}}</pre>',
+      controller: function ($rootScope, $scope, courier) {
+        $scope.count = 0;
+        $scope.mappedFields = {};
 
-          var fields = $scope.fields.split(',');
+        var source = courier.rootSearchSource.extend()
+          .index('logstash-*')
+          .type($scope.type)
+          .source({
+            include: 'geo'
+          })
+          .$scope($scope)
+          .on('results', function (resp) {
+            $scope.count ++;
+            $scope.json = JSON.stringify(resp.hits, null, '  ');
+          });
 
-          fields.forEach(function (field) {
-            courier._mapper.getFieldMapping(source, field, function (err, mapping) {
-              $scope.$apply(function () {
-                $scope.mappedFields[field] = mapping;
-              });
+        var fields = $scope.fields.split(',');
+
+        fields.forEach(function (field) {
+          courier._mapper.getFieldMapping(source, field, function (err, mapping) {
+            $scope.$apply(function () {
+              $scope.mappedFields[field] = mapping;
             });
           });
+        });
 
-          courier._mapper.getFields(source, function (err, response, status) {
-            console.log(response);
-          });
-        }
-      };
-    });
+        courier._mapper.getFields(source, function (err, response, status) {
+          console.log(response);
+        });
+      }
+    };
+  });
 });
diff --git a/src/kibana/apps/examples/partials/config.html b/src/kibana/apps/examples/partials/config.html
@@ -1 +1 @@
-<config-test></config-test>
+<config-example></config-example>
diff --git a/src/kibana/apps/examples/partials/courier.html b/src/kibana/apps/examples/partials/courier.html
@@ -1,3 +1,3 @@
-<courier-doc-test index="logstash-2014.02.11" type="apache" id="6434"></courier-doc-test>
-<courier-doc-test index="logstash-2014.02.11" type="apache" id="6434"></courier-doc-test>
-<courier-test type="apache" fields="extension,response,request"></courier-test>
+<courier-doc-example index="logstash-2014.02.11" type="apache" id="6434"></courier-doc-example>
+<courier-doc-example index="logstash-2014.02.11" type="apache" id="6434"></courier-doc-example>
+<courier-example type="apache" fields="extension,response,request"></courier-example>
diff --git a/src/kibana/apps/examples/partials/mapper.html b/src/kibana/apps/examples/partials/mapper.html
@@ -1 +1 @@
-<mapping-test type="apache" fields="extension,response,request"></mapping-test>
+<mapping-example type="apache" fields="extension,response,request"></mapping-example>
diff --git a/src/kibana/apps/examples/styles/index.css b/src/kibana/apps/examples/styles/index.css
@@ -0,0 +1,4 @@
+#examples ng-include {
+  display: block;
+  margin: 10px;
+}
diff --git a/src/kibana/apps/examples/styles/index.less b/src/kibana/apps/examples/styles/index.less
@@ -0,0 +1,4 @@
+#examples ng-include {
+  display: block;
+  margin: 10px;
+}
diff --git a/src/kibana/apps/visualize/index.js b/src/kibana/apps/visualize/index.js
@@ -1,3 +1,5 @@
 define(function (require) {
 
+  require('css!./styles/main.css');
+
 });
diff --git a/src/kibana/apps/visualize/styles/main.css b/src/kibana/apps/visualize/styles/main.css
diff --git a/src/kibana/apps/visualize/styles/main.less b/src/kibana/apps/visualize/styles/main.less
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<config-test></config-test>
		<config-example></config-example>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<mapping-test type="apache" fields="extension,response,request"></mapping-test>
		<mapping-example type="apache" fields="extension,response,request"></mapping-example>