addded graphiteUrl to config.js

.gitignore

@@ -2,3 +2,4 @@ node_modules
 .aws-config.json
 dist
 web.config
+config.dev.js

src/app/components/require.config.js

@@ -5,7 +5,7 @@ require.config({
   baseUrl: 'app',
   // urlArgs: 'r=@REV@',
   paths: {
-    config:                   '../config',
+    config:                   '../config.dev',
     settings:                 'components/settings',
     kbn:                      'components/kbn',
 

src/app/components/settings.js

@@ -12,7 +12,8 @@ function (_) {
     var defaults = {
       elasticsearch : "http://"+window.location.hostname+":9200",
       panel_names   : [],
-      kibana_index  : 'kibana-int'
+      kibana_index  : 'kibana-int',
+      graphiteUrl   : null,
     };
 
     // This initializes a new hash on purpose, to avoid adding parameters to

src/app/dashboards/default.json

@@ -37,7 +37,7 @@
   "rows": [
     {
       "title": "Intro",
-      "height": "150px",
+      "height": "400px",
       "editable": true,
       "collapse": false,
       "collapsable": false,
@@ -55,90 +55,6 @@
         }
       ],
       "notice": true
-    },
-    {
-      "title": "Intro",
-      "height": "150px",
-      "editable": true,
-      "collapse": false,
-      "collapsable": false,
-      "panels": [
-        {
-          "span": 12,
-          "editable": true,
-          "group": [
-            "default"
-          ],
-          "type": "histogram",
-          "mode": "count",
-          "time_field": "@timestamp",
-          "value_field": null,
-          "x-axis": true,
-          "y-axis": true,
-          "scale": 1,
-          "y_format": "none",
-          "grid": {
-            "max": null,
-            "min": 0
-          },
-          "queries": {
-            "mode": "all",
-            "ids": [
-              0
-            ]
-          },
-          "annotate": {
-            "enable": false,
-            "query": "*",
-            "size": 20,
-            "field": "_type",
-            "sort": [
-              "_score",
-              "desc"
-            ]
-          },
-          "auto_int": true,
-          "resolution": 100,
-          "interval": "30s",
-          "intervals": [
-            "auto",
-            "1s",
-            "1m",
-            "5m",
-            "10m",
-            "30m",
-            "1h",
-            "3h",
-            "12h",
-            "1d",
-            "1w",
-            "1y"
-          ],
-          "lines": false,
-          "fill": 0,
-          "linewidth": 3,
-          "points": false,
-          "pointradius": 5,
-          "bars": true,
-          "stack": true,
-          "spyable": true,
-          "zoomlinks": true,
-          "options": true,
-          "legend": true,
-          "show_query": true,
-          "interactive": true,
-          "legend_counts": true,
-          "timezone": "browser",
-          "percentage": false,
-          "zerofill": true,
-          "derivative": false,
-          "tooltip": {
-            "value_type": "cumulative",
-            "query_as_alias": true
-          }
-        }
-      ],
-      "notice": true
     }
   ],
   "editable": true,

src/app/panels/graph/editor.html

@@ -1,11 +0,0 @@
-<div>
-  <div class="row-fluid">
-    <div class="span4">
-      <label class="small">Graphite Url</label>
-      <input type="text" class="input-large" ng-model="panel.graphiteUrl"></input>
-    </div>
-  </div>
-
-  <label class=small>Targets</label>
-  <textarea ng-model="panel.targets" rows="6" style="width:95%"></textarea>
-</div>

src/app/panels/graph/module.html

@@ -1,13 +0,0 @@
-<div ng-controller='graph' ng-init="init()">
-	<h2>{{panel.someprop}}</h2>
-
-	<ul>
-		<li>{{panel.graphiteUrl}}</li>
-		<li>{{panel.targets}}</li>
-	</ul>
-	<mychart ng-model='data'></mychart>
-	<div class="chart_container flot" id="chart_container_flot">
-        <div class="chart" id="chart_flot" height="300px" width="700px"></div>
-        <div class="legend" id="legend_flot_simple"></div>
-    </div>
-</div>

src/app/panels/graph/module.js

@@ -1,74 +0,0 @@
-define([
-  'jquery',
-  'angular',
-  'app',
-  'underscore',
-  'ts-widget'
-],
-function ($, angular, app, _) {
-  'use strict';
-
-  var module = angular.module('kibana.panels.graph', []);
-  app.useModule(module);
-
-  module.controller('graph', function($scope) {
-    $scope.panelMeta = {
-      status  : "Unstable",
-      description : "A graphite graph module"
-    };
-
-    // Set and populate defaults
-    var _d = {
-    };
-
-    _.defaults($scope.panel,_d);
-
-    $scope.init = function() {
-      $scope.ready = false;
-      $scope.saySomething = "something!";
-    };
-
-  });
-
-  angular
-    .module('kibana.directives')
-    .directive('mychart', function () {
-      return {
-        restrict: 'E',
-        link: function (scope, elem) {
-          var tsData = {
-            from: '-30d',
-            until: 'now',
-            height: '300',
-            width: '740',
-            targets: [
-              {
-                name: 'series 1',
-                color: '#CC6699',
-                target: 'randomWalk("random1")',
-              },
-              {
-                name: 'series 2',
-                color: '#006699',
-                target: 'randomWalk("random2")',
-              }
-            ],
-            title: 'horizontal title',
-            vtitle: 'vertical title',
-            drawNullAsZero: false,
-            state: 'stacked',
-            hover_details: true,
-            legend: { container: '#legend_flot_simple', noColumns: 4 },
-          };
-
-          $("#chart_flot").graphiteFlot(tsData, function(err) {
-            console.log(err);
-          });
-
-          console.log('asd');
-          $(elem).html('NJEEEJ!');
-        }
-      };
-    });
-
-});

src/app/panels/graphite/module.html

@@ -1,4 +1,4 @@
-<div ng-controller='histogram' ng-init="init()" style="min-height:{{panel.height || row.height}}">
+<div ng-controller='graphite' ng-init="init()" style="min-height:{{panel.height || row.height}}">
   <style>
     .histogram-legend {
       display:inline-block;

src/app/panels/graphite/module.js

@@ -20,6 +20,7 @@ define([
   'moment',
   './timeSeries',
   './graphiteUtil',
+  'config',
   'jquery.flot',
   'jquery.flot.events',
   'jquery.flot.selection',
@@ -28,14 +29,14 @@ define([
   'jquery.flot.stack',
   'jquery.flot.stackpercent'
 ],
-function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
+function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil, config) {
 
   'use strict';
 
-  var module = angular.module('kibana.panels.histogram', []);
+  var module = angular.module('kibana.panels.graphite', []);
   app.useModule(module);
 
-  module.controller('histogram', function($scope, querySrv, dashboard, filterSrv) {
+  module.controller('graphite', function($scope, querySrv, dashboard, filterSrv) {
     $scope.panelMeta = {
       modals : [
         {
@@ -48,11 +49,11 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
       editorTabs : [
         {
           title:'Style',
-          src:'app/panels/histogram/styleEditor.html'
+          src:'app/panels/graphite/styleEditor.html'
         },
         {
           title:'Queries',
-          src:'app/panels/histogram/queriesEditor.html'
+          src:'app/panels/graphite/queriesEditor.html'
         },
       ],
       status  : "Stable",
@@ -268,11 +269,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
     };
 
     var graphOptions = {
-      graphite_url: 'http://metrics.prod.tradera.com/render/',
-      from: '-1h',
       until: 'now',
-      height: '300',
-      width: '740',
       targets: [
         {
           name: 'series 1',
@@ -281,12 +278,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
           //target: 'integral(prod.apps.touchweb.snake.counters.login.success.count)',
           //target: "randomWalk('random1')",
         }
-      ],
+      ]
-      title: 'horizontal title',
-      vtitle: 'vertical title',
-      drawNullAsZero: false,
-      state: 'stacked',
-      hover_details: true,
     };
 
     $scope.getGraphiteData = function (options, parameters) {
@@ -294,7 +286,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
         accepts: { text: 'application/json' },
         cache: false,
         dataType: 'json',
-        url: options['graphite_url'],
+        url: config.graphiteUrl,
         type: "POST",
         data: parameters.join('&'),
         error: function(xhr, textStatus, errorThrown) {
@@ -327,7 +319,6 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
 
       var range = $scope.get_time_range();
       var interval = $scope.get_interval(range);
-      console.log('interval: ' + interval);
 
       graphOptions.from = $.plot.formatDate(range.from, '%H%:%M_%Y%m%d');
 
@@ -513,7 +504,7 @@ function (angular, app, $, _, kbn, moment, timeSeries, graphiteUtil) {
                   // Silly, but fixes bug in stacked percentages
                   fill: scope.panel.fill === 0 ? 0.001 : scope.panel.fill/10,
                   lineWidth: scope.panel.linewidth,
-                  steps: true
+                  steps: false
                 },
                 bars:   {
                   show: scope.panel.bars,

src/app/panels/histogram/module.js

@@ -291,16 +291,6 @@ function (angular, app, $, _, kbn, moment, timeSeries) {
       return $scope.panel.interval;
     };
 
-    $scope.colors = [
-      "#7EB26D","#EAB839","#6ED0E0","#EF843C","#E24D42","#1F78C1","#BA43A9","#705DA0", //1
-      "#508642","#CCA300","#447EBC","#C15C17","#890F02","#0A437C","#6D1F62","#584477", //2
-      "#B7DBAB","#F4D598","#70DBED","#F9BA8F","#F29191","#82B5D8","#E5A8E2","#AEA2E0", //3
-      "#629E51","#E5AC0E","#64B0C8","#E0752D","#BF1B00","#0A50A1","#962D82","#614D93", //4
-      "#9AC48A","#F2C96D","#65C5DB","#F9934E","#EA6460","#5195CE","#D683CE","#806EB7", //5
-      "#3F6833","#967302","#2F575E","#99440A","#58140C","#052B51","#511749","#3F2B5B", //6
-      "#E0F9D7","#FCEACA","#CFFAFF","#F9E2D2","#FCE2DE","#BADFF4","#F9D9F9","#DEDAF7"  //7
-    ];
-
     /**
      * Fetch the data for a chunk of a queries results. Multiple segments occur when several indicies
      * need to be consulted (like timestamped logstash indicies)

src/app/partials/dasheditor.html

@@ -2,7 +2,7 @@
   <div class="pull-right editor-title">Dashboard settings</div>
 
   <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
-    <div ng-repeat="tab in ['General','Index','Rows','Controls']" data-title="{{tab}}">
+    <div ng-repeat="tab in ['General', 'Rows','Controls']" data-title="{{tab}}">
     </div>
     <div ng-repeat="tab in dashboard.current.nav" data-title="{{tab.type}}">
     </div>
@@ -24,52 +24,8 @@
       </div>
     </div>
   </div>
-  <div ng-show="editor.index == 1">
-    <div class="row-fluid">
-      <h4>Index Settings</h4>
-      <div ng-show="dashboard.current.index.interval != 'none'" class="row-fluid">
-         <div class="span12">
-          <p class="small">
-            Time stamped indices use your selected time range to create a list of
-            indices that match a specified timestamp pattern. This can be very
-            efficient for some data sets (eg, logs) For example, to match the
-            default logstash index pattern you might use
-            <code>[logstash-]YYYY.MM.DD</code>. The [] in "[logstash-]" are
-            important as they instruct Kibana not to treat those letters as a
-            pattern.
-            Please also note that indices should rollover at midnight <strong>UTC</strong>.
-          </p>
-          <p class="small">
-            See <a href="http://momentjs.com/docs/#/displaying/format/">http://momentjs.com/docs/#/displaying/format/</a>
-            for documentation on date formatting.
-          </p>
-         </div>
-      </div>
-    </div>
-    <div class="row-fluid">
-      <div class="span2">
-        <h6>Timestamping</h6><select class="input-small" ng-model="dashboard.current.index.interval" ng-options="f for f in ['none','hour','day','week','month','year']"></select>
-      </div>
-      <div class="span4" ng-show="dashboard.current.index.interval != 'none'">
-        <h6>Index pattern <small>Absolutes in []</small></h6>
-        <input type="text" class="input-medium" ng-model="dashboard.current.index.pattern">
-      </div>
-      <div class="span2" ng-show="dashboard.current.index.interval != 'none'">
-        <h6>Failover <i class="icon-question-sign" bs-tooltip="'If no indices match the pattern, failover to default index *NOT RECOMMENDED*'"></i></h6>
-        <input type="checkbox" ng-model="dashboard.current.failover" ng-checked="dashboard.current.failover" />
-      </div>
-      <div class="span4" ng-show="dashboard.current.failover || dashboard.current.index.interval == 'none'">
-        <h6>Default Index <small ng-show="dashboard.current.index.interval != 'none'">If index not found</small></h6>
-        <input type="text" class="input-medium" ng-model="dashboard.current.index.default">
-      </div>
-      <div class="span2">
-        <h6>Preload Fields <i class="icon-question-sign" bs-tooltip="'Preload available fields for the purpose of autocomplete. Turn this off if you have many fields'"></i></h6>
-        <input type="checkbox" ng-model="dashboard.current.index.warm_fields" ng-checked="dashboard.current.index.warm_fields" />
-      </div>
-    </div>
-  </div>
 
-  <div ng-show="editor.index == 2">
+  <div ng-show="editor.index == 1">
     <div class="row-fluid">
       <div class="span12">
         <table class="table table-condensed table-striped">
@@ -105,7 +61,7 @@
     </div>
   </div>
 
-  <div ng-show="editor.index == 3">
+  <div ng-show="editor.index == 2">
     <h5>Pulldowns</h5>
     <div class="row-fluid">
       <div class="span2" ng-repeat="pulldown in dashboard.current.pulldowns">
@@ -117,7 +73,7 @@
     </div>
   </div>
 
-  <div ng-show="editor.index == 3" ng-controller="dashLoader">
+  <div ng-show="editor.index == 2" ng-controller="dashLoader">
     <h5>Save to</h5>
     <div class="row-fluid">
       <div class="span2">
@@ -162,7 +118,7 @@
     </div>
   </div>
 
-  <div ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="editor.index == 4+$index">
+  <div ng-repeat="pulldown in dashboard.current.nav" ng-controller="PulldownCtrl" ng-show="editor.index == 3+$index">
     <ng-include ng-show="pulldown.enable" src="edit_path(pulldown.type)"></ng-include>
     <button ng-hide="pulldown.enable" class="btn" ng-click="pulldown.enable = true">Enable the {{pulldown.type}}</button>
   </div>
@@ -171,6 +127,6 @@
 </div>
 
 <div class="modal-footer">
-  <button ng-click="add_row(dashboard.current,row); reset_row();" class="btn btn-success" ng-show="editor.index == 2">Create Row</button>
+  <button ng-click="add_row(dashboard.current,row); reset_row();" class="btn btn-success" ng-show="editor.index == 1">Create Row</button>
   <button type="button" class="btn btn-danger" ng-click="editor.index=0;dismiss();reset_panel();dashboard.refresh()">Close</button>
 </div>

src/config.js

@@ -38,10 +38,10 @@ function (Settings) {
      * dashboard, but this list is used in the "add panel" interface.
      */
     panel_names: [
-      'graph',
       'text',
       'column',
-      'histogram'
+      'histogram',
+      'graphite'
     ]
   });
 });

src/index.html

@@ -6,7 +6,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <meta name="viewport" content="width=device-width">
 
-    <title>Kibana 3</title>
+    <title>Grafana</title>
     <link rel="stylesheet" href="css/bootstrap.light.min.css" title="Light">
     <link rel="stylesheet" href="css/timepicker.css">
     <link rel="stylesheet" href="css/animate.min.css">