Updated readme, and other small changes for 1.7.0-rc1 release

CHANGELOG.md

@@ -1,4 +1,4 @@
-# 1.7.0 (unreleased)
+# 1.7.0-rc1 (2014-08-05)
 
 **New features or improvements**
 - [Issue #581](https://github.com/grafana/grafana/issues/581). InfluxDB: Add continuous query in series results (series typeahead).
@@ -19,6 +19,10 @@
 - [Issue #626](https://github.com/grafana/grafana/issues/626). Chart: Downscale y axis to more precise unit, value of 0.1 for seconds format will be formated as 100 ms. Thanks @kamaradclimber
 - [Issue #618](https://github.com/grafana/grafana/issues/618). OpenTSDB: Series alias option to override metric name returned from opentsdb. Thanks @heldr
 
+**Documentation**
+- [Issue #635](https://github.com/grafana/grafana/issues/635). Docs for features and changes in v1.7, new troubleshooting guide, new Getting started guide, improved install & config guide.
+
+
 **Changes**
 - [Issue #536](https://github.com/grafana/grafana/issues/536). Graphite: Use unix epoch for Graphite from/to for absolute time ranges
 - [Issue #641](https://github.com/grafana/grafana/issues/536). General: Dashboard save temp copy feature settings moved from dashboard to config.js, default is enabled, and ttl to 30 days

README.md

@@ -13,13 +13,10 @@ Graphite, InfluxDB & OpenTSDB.
 ## Features
 ### Graphite Target Editor
 - Graphite target expression parser
-- Quickly add / edit / remove function ([video demo](http://youtu.be/I90WHRwE1ZM))
+- Feature rich query composer
-- Function parameters can be easily changed
+- Quickly add and edit function parameters
-- Quickly navigate graphite metric structure
+- Templated queries
-- Templating
+- [See it in action](http//grafana.org/docs/features/graphite)
-- Integrated links to function documentation
-- Rearrange function order
-- Native Graphite PNG render support
 
 ### Graphing
 - Fast rendering, even over large timespans.
@@ -30,101 +27,51 @@ Graphite, InfluxDB & OpenTSDB.
 - Series toggles & color selector
 - Legend values, and formating options
 - Grid thresholds, axis labels
-- [Annotations] (https://github.com/grafana/grafana/wiki/Annotations)
+- [Annotations](http://grafana.org/docs/features/annotations)
 
 ### Dashboards
-- Create and edit dashboards
+- Create, edit, save & search dashboards
-- Drag and drop graphs to rearrange
+- Change column spans and row heights
-- Set column spans and row heights
+- Drag and drop panels to rearrange
-- Save & [search dashboards](https://github.com/grafana/grafana/wiki/Search-features)
+- Use InfluxDB or Elasticsearch as dashboard storage
 - Import & export dashboard (json file)
 - Import dashboard from Graphite
 - Templating
-- [Scripted dashboards](https://github.com/grafana/grafana/wiki/Scripted-dashboards) (generate from js script and url parameters)
+- [Scripted dashboards](http://grafana.org/docs/features/scripted_dashboards)
-- Flexible [time range controls](https://github.com/grafana/grafana/wiki/Time-range-controls)
+- [Dashboard playlists](http://grafana.org/docs/docs/features/playlist)
-- [Dashboard playlists](https://github.com/grafana/grafana/wiki/Dashboard-playlist)
+- [Time range controls](http://grafana.org/docs/features/time_range)
 
 ### InfluxDB
-- [Use InfluxDB](https://github.com/grafana/grafana/wiki/InfluxDB) as metric datasource
+- Use InfluxDB as a metric data source, annotation source and for dashboard storage
 - Query editor with series and column typeahead, easy group by and function selection
 
 ### OpenTSDB
+- Use as metric data source
 - Query editor with metric name typeahead and tag filtering
 
 # Requirements
-Grafana is very easy to install. It is a client side web app with no backend. Any webserver will do. Optionally you will need ElasticSearch if you want to be able to save and load dashboards quickly instead of json files or local storage.
+There are no dependencies, Grafana is a client side application that runs in your browser. It only needs a time series store where it can fetch metrics. If you use InfluxDB Grafana can use it to store dashboards. If you use Graphite or OpenTSDB you can use Elasticsearch to store dashboards or just use json files stored on disk.
 
 # Installation
-- Download and extract the [latest release](https://github.com/grafana/grafana/releases).
+Head to [grafana.org](http://grafana.org) and [download](http://grafana.org/download/)
-- Rename `config.sample.js` to `config.js`, then change `graphiteUrl` and `elasticsearch` to point to the correct urls. The urls entered here must be reachable by your browser.
+the latest release.
-- Point your browser to the installation.
 
-To run from master:
+Then follow the quick [setup & config guide](http://grafana.org/docs/). If you have any problems please
-- Clone this repository
+read the [troubleshooting guide](http://grafana.org/docs/troubleshooting).
-- Start a web server in src folder
-- Or create a optimized & minified build:
- - npm install (requires nodejs)
- - grunt build (requires grunt-cli)
 
-If you use ansible for provisioning and deployment [ansible-grafana](https://github.com/bobrik/ansible-grafana) should get you started.
+# Documentation & Support
+Be sure to read the [getting started guide](http://grafana.org/docs/features/intro) and the other
+feature guides.
 
-When you have Grafana up an running, read the [Getting started](https://github.com/grafana/grafana/wiki/Getting-started) guide for
-an introduction on how to use Grafana and/or watch [this video](https://www.youtube.com/watch?v=OUvJamHeMpw) for a guide in creating a new dashboard and for creating
-templated dashboards.
 
-# Graphite server config
-If you haven't used an alternative dashboard for graphite before you need to enable cross-domain origin request. For Apache 2.x:
-```
-Header set Access-Control-Allow-Origin "*"
-Header set Access-Control-Allow-Methods "GET, OPTIONS"
-Header set Access-Control-Allow-Headers "origin, authorization, accept"
-```
-Note that using "\*" leaves your graphite instance quite open so you might want to consider using "http://my.graphite-dom.ain" in place of "\*"
-
-Here is the same thing, in nginx format:
-```
-add_header  "Access-Control-Allow-Origin" "*";
-add_header  "Access-Control-Allow-Credentials" "true";
-add_header  "Access-Control-Allow-Methods" "GET, OPTIONS";
-add_header  "Access-Control-Allow-Headers" "Authorization, origin, accept";
-```
-If your Graphite web is protected by basic authentication, you have to enable the HTTP verb OPTIONS, origin
-(no wildcards are allowed in this case) and add Access-Control-Allow-Credentials. This looks like the following for Apache:
-```
-Header set Access-Control-Allow-Origin "http://mygrafana.com:5656"
-Header set Access-Control-Allow-Credentials true
-
-<Location />
-    AuthName "graphs restricted"
-    AuthType Basic
-    AuthUserFile /etc/apache2/htpasswd
-    <LimitExcept OPTIONS>
-      require valid-user
-    </LimitExcept>
-</Location>
-```
-And in nginx:
-```
-auth_basic            "Restricted";
-auth_basic_user_file  /path/to/my/htpasswd/file;
-if ($http_origin ~* (https?://[^/]*\.somedomain\.com(:[0-9]+)?)) {  #Test if request is from allowed domain, you can use multiple if
-    set $cors "true";                                               #statements to allow multiple domains, simply setting $cors to true in each one.
-}
-if ($cors = 'true') {
-    add_header  Access-Control-Allow-Origin $http_origin;           #this mirrors back whatever domain the request came from as authorized, as
-    add_header  "Access-Control-Allow-Credentials" "true";          #as long as it matches one of your if statements
-    add_header  "Access-Control-Allow-Methods" "GET, OPTIONS";
-    add_header  "Access-Control-Allow-Headers" "Authorization, origin, accept";
-}
 ```
 # Roadmap
-- Improve and refine the target parser and editing
+- Improve graphite query editor to handle all types of queries
-- Improve graphite import feature
 - Refine and simplify common tasks
 - More panel types (not just graphs)
-- Use elasticsearch to search for metrics
+- Improve templating support
-- Improve template support
+- Alerting
-- Annotate graph by querying ElasticSearch for events (or other event sources)
+- Much much more! (what ever gets votes on github issues!)
 
 # Contribute
 If you have any idea for an improvement or found a bug do not hesitate to open an issue. And if you have time clone this repo and submit a pull request and help me make Grafana the kickass metrics & devops dashboard we all dream about!
@@ -133,9 +80,10 @@ Clone repository:
 - npm install
 - grunt server (starts development web server in src folder)
 - grunt (runs jshint and less -> css compilation)
+- npm test runs jshint, and unit tests
 
-# Notice
+Before submitting a PR be sure that there are no jshint or unit test failures.
-This software is based on the great log dashboard [kibana](https://github.com/elasticsearch/kibana).
+And [sign the CLA](http://grafana.org/docs/contributing/cla.html)
 
 # License
 Grafana is distributed under Apache 2.0 License.

latest.json

@@ -1,4 +1,4 @@
 {
-	"version": "1.6.0",
+	"version": "1.7.0-rc1",
-	"url": "http://grafanarel.s3.amazonaws.com/grafana-1.6.0.tar.gz"
+	"url": "http://grafanarel.s3.amazonaws.com/grafana-1.7.0-rc1.tar.gz"
 }

package.json

@@ -4,7 +4,7 @@
     "company": "Coding Instinct AB"
   },
   "name": "grafana",
-  "version": "1.6.1",
+  "version": "1.7.0-rc1",
   "repository": {
     "type": "git",
     "url": "http://github.com/torkelo/grafana.git"

sample/start_dashboard_html.html

@@ -4,35 +4,35 @@
   <div class="span6">
     <ul>
       <li>
-        <a href="http://localhost:4567/docs#configuration" target="_blank">Configuration</a>
+        <a href="http://grafana.org/docs#configuration" target="_blank">Configuration</a>
       </li>
       <li>
-        <a href="http://localhost:4567/docs/troubleshooting" target="_blank">Troubleshooting</a>
+        <a href="http://grafana.org/docs/troubleshooting" target="_blank">Troubleshooting</a>
       </li>
       <li>
-        <a href="http://localhost:4567/docs/support" target="_blank">Support</a>
+        <a href="http://grafana.org/docs/support" target="_blank">Support</a>
       </li>
       <li>
-        <a href="http://localhost:4567/docs/features/intro" target="_blank">Getting started</a>  (Must read!)
+        <a href="http://grafana.org/docs/features/intro" target="_blank">Getting started</a>  (Must read!)
       </li>
     </ul>
   </div>
   <div class="span6">
     <ul>
       <li>
-        <a href="http://localhost:4567/docs/features/charts" target="_blank">Charts</a>
+        <a href="http://grafana.org/docs/features/graphing" target="_blank">Graphing</a>
       </li>
       <li>
-        <a href="http://localhost:4567/docs/features/annotations" target="_blank">Annotations</a>
+        <a href="http://grafana.org/docs/features/annotations" target="_blank">Annotations</a>
       </li>
       <li>
-        <a href="http://localhost:4567/docs/features/graphite" target="_blank">Graphite</a>
+        <a href="http://grafana.org/docs/features/graphite" target="_blank">Graphite</a>
       </li>
       <li>
-        <a href="http://localhost:4567/docs/features/influxdb" target="_blank">InfluxDB</a>
+        <a href="http://grafana.org/docs/features/influxdb" target="_blank">InfluxDB</a>
       </li>
       <li>
-        <a href="http://localhost:4567/docs/features/opentsdb" target="_blank">OpenTSDB</a>
+        <a href="http://grafana.org/docs/features/opentsdb" target="_blank">OpenTSDB</a>
       </li>
     </ul>
   </div>
@@ -44,13 +44,12 @@
   <div class="span12">
     <ul>
       <li>Ctrl+S saves the current dashboard</li>
-      <li>Ctrl+F Opens the dashboard finder (searches elastic search)</li>
+      <li>Ctrl+F Opens the dashboard finder</li>
       <li>Ctrl+H Hide/show row controls</li>
       <li>Click and drag graph title to move panel</li>
       <li>Hit Escape to exit graph when in fullscreen or edit mode</li>
       <li>Click the colored icon in the legend to change series color</li>
       <li>Ctrl or Shift + Click legend name to hide other series</li>
-      <li>Click the Save icon in the menu to save the dashboard with a new name</li>
     </ul>
   </div>
 </div>

src/app/dashboards/default.json

@@ -1,37 +1,67 @@
 {
-  "title": "Welcome to Grafana!",
+  "title": "Grafana",
-  "time": {
+  "tags": [],
-    "from": "now-6h",
+  "style": "dark",
-    "to": "now"
+  "timezone": "browser",
-  },
+  "editable": true,
-  "templating": {
-    "list": []
-  },
   "rows": [
     {
-      "title": "Welcome to Grafana",
+      "title": "New row",
       "height": "150px",
       "editable": true,
       "collapse": false,
+      "collapsable": true,
       "panels": [
         {
           "error": false,
           "span": 12,
           "editable": true,
           "type": "text",
-          "loadingEditor": false,
+          "mode": "html",
-          "mode": "markdown",
+          "content": "<div class=\"text-center\" style=\"padding-top: 15px\">\n<img src=\"http://grafana.org/assets/img/logo_transparent_200x75.png\"> \n</div>",
-          "content": "####Thank you for trying out Grafana! \n\nGeneral documentation is found in the readme and in the wiki section of the [Github Project](https://github.com/torkelo/grafana). If you encounter any problem or have an idea for an improvement do not hesitate to open a github issue. \n\nTips: \n\n- Ctrl+S saves the current dashboard\n- Ctrl+F Opens the dashboard finder (searches elastic search)\n- Ctrl+H Hide/show row controls \n- Click and drag graph title to move panel (only works when row controls are enabled)\n\nIf you do not see a graph in the panel below, the browser cannot access your graphite installation. Please make sure that datasources property in config.js is correctly set and that any urls accessible from your browser.",
           "style": {},
-          "title": "Welcome to Grafana"
+          "title": "Welcome to"
         }
-      ]
+      ],
+      "notice": false
+    },
+    {
+      "title": "Welcome to Grafana",
+      "height": "210px",
+      "editable": true,
+      "collapse": false,
+      "collapsable": true,
+      "panels": [
+        {
+          "error": false,
+          "span": 6,
+          "editable": true,
+          "type": "text",
+          "loadingEditor": false,
+          "mode": "html",
+          "content": "<br/>\n\n<div class=\"row-fluid\">\n  <div class=\"span6\">\n    <ul>\n      <li>\n        <a href=\"http://grafana.org/docs#configuration\" target=\"_blank\">Configuration</a>\n      </li>\n      <li>\n        <a href=\"http://grafana.org/docs/troubleshooting\" target=\"_blank\">Troubleshooting</a>\n      </li>\n      <li>\n        <a href=\"http://grafana.org/docs/support\" target=\"_blank\">Support</a>\n      </li>\n      <li>\n        <a href=\"http://grafana.org/docs/features/intro\" target=\"_blank\">Getting started</a>  (Must read!)\n      </li>\n    </ul>\n  </div>\n  <div class=\"span6\">\n    <ul>\n      <li>\n        <a href=\"http://grafana.org/docs/features/graphing\" target=\"_blank\">Graphing</a>\n      </li>\n      <li>\n        <a href=\"http://grafana.org/docs/features/annotations\" target=\"_blank\">Annotations</a>\n      </li>\n      <li>\n        <a href=\"http://grafana.org/docs/features/graphite\" target=\"_blank\">Graphite</a>\n      </li>\n      <li>\n        <a href=\"http://grafana.org/docs/features/influxdb\" target=\"_blank\">InfluxDB</a>\n      </li>\n      <li>\n        <a href=\"http://grafana.org/docs/features/opentsdb\" target=\"_blank\">OpenTSDB</a>\n      </li>\n    </ul>\n  </div>\n</div>",
+          "style": {},
+          "title": "Documentation Links"
+        },
+        {
+          "error": false,
+          "span": 6,
+          "editable": true,
+          "type": "text",
+          "mode": "html",
+          "content": "<br/>\n\n<div class=\"row-fluid\">\n  <div class=\"span12\">\n    <ul>\n      <li>Ctrl+S saves the current dashboard</li>\n      <li>Ctrl+F Opens the dashboard finder</li>\n      <li>Ctrl+H Hide/show row controls</li>\n      <li>Click and drag graph title to move panel</li>\n      <li>Hit Escape to exit graph when in fullscreen or edit mode</li>\n      <li>Click the colored icon in the legend to change series color</li>\n      <li>Ctrl or Shift + Click legend name to hide other series</li>\n    </ul>\n  </div>\n</div>\n",
+          "style": {},
+          "title": "Tips & Shortcuts"
+        }
+      ],
+      "notice": false
     },
     {
       "title": "test",
       "height": "250px",
       "editable": true,
       "collapse": false,
+      "collapsable": true,
       "panels": [
         {
           "span": 12,
@@ -40,10 +70,21 @@
           "x-axis": true,
           "y-axis": true,
           "scale": 1,
-          "y_formats": ["short", "short"],
+          "y_formats": [
+            "short",
+            "short"
+          ],
           "grid": {
             "max": null,
-            "min": null
+            "min": null,
+            "leftMax": null,
+            "rightMax": null,
+            "leftMin": null,
+            "rightMin": null,
+            "threshold1": null,
+            "threshold2": null,
+            "threshold1Color": "rgba(216, 200, 27, 0.27)",
+            "threshold2Color": "rgba(234, 112, 112, 0.22)"
           },
           "resolution": 100,
           "lines": true,
@@ -55,7 +96,15 @@
           "stack": true,
           "spyable": true,
           "options": false,
-          "legend": true,
+          "legend": {
+            "show": true,
+            "values": false,
+            "min": false,
+            "max": false,
+            "current": false,
+            "total": false,
+            "avg": false
+          },
           "interactive": true,
           "legend_counts": true,
           "timezone": "browser",
@@ -64,35 +113,39 @@
           "nullPointMode": "connected",
           "steppedLine": false,
           "tooltip": {
-            "value_type": "cumulative"
+            "value_type": "cumulative",
+            "query_as_alias": true
           },
           "targets": [
             {
-              "target": "randomWalk('random walk')"
+              "target": "randomWalk('random walk')",
-            },
+              "function": "mean",
-            {
+              "column": "value"
-              "target": "randomWalk('random walk2')"
-            },
-            {
-              "target": "randomWalk('random walk3')"
             }
           ],
           "aliasColors": {},
           "aliasYAxis": {},
-          "title": "Graphite test"
+          "title": "First Graph (click title to edit)",
+          "datasource": "graphite",
+          "renderer": "flot",
+          "annotate": {
+            "enable": false
+          }
         }
-      ]
+      ],
+      "notice": false
     }
   ],
-  "editable": true,
-  "failover": false,
-  "style": "dark",
   "pulldowns": [
     {
       "type": "filtering",
       "collapse": false,
       "notice": false,
       "enable": false
+    },
+    {
+      "type": "annotations",
+      "enable": false
     }
   ],
   "nav": [
@@ -128,5 +181,12 @@
       "now": true
     }
   ],
-  "refresh": false
+  "time": {
-}
+    "from": "now-6h",
+    "to": "now"
+  },
+  "templating": {
+    "list": []
+  },
+  "version": 2
+}

src/app/partials/dashboard.html

@@ -93,14 +93,14 @@
             <div style="padding-top:0px" ng-if="!row.collapse">
 
               <!-- Panels -->
-              <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.panelDragging}">
+              <div ng-repeat="(name, panel) in row.panels|filter:isPanel" ng-hide="panel.hide" class="panel nospace" ng-style="{'width':(panel.span/1.2)*10+'%'}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:$index,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver(true)',onOut:'panelMoveOut'}" ng-class="{'dragInProgress':dashboard.$$panelDragging}">
                 <!-- Content Panel -->
                 <div style="position:relative">
                   <grafana-panel type="panel.type" ng-cloak></grafana-panel>
                 </div>
               </div>
 
-              <div ng-show="rowSpan(row) < 10 && dashboard.panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
+              <div ng-show="rowSpan(row) < 10 && dashboard.$$panelDragging" class="panel" style="margin:5px;width:30%;background:rgba(100,100,100,0.50)" ng-class="{'dragInProgress':dashboard.panelDragging}" ng-style="{height:row.height}" data-drop="true" ng-model="row.panels" data-jqyoui-options jqyoui-droppable="{index:row.panels.length,mutate:false,onDrop:'panelMoveDrop',onOver:'panelMoveOver',onOut:'panelMoveOut'}">
               </div>
 
               <div class="clearfix"></div>

src/app/services/panelMove.js

@@ -18,7 +18,7 @@ function (angular, _) {
 
     /* each of these can take event,ui,data parameters */
     p.onStart = function() {
-      this.dashboard.panelDragging =  true;
+      this.dashboard.$$panelDragging =  true;
       $rootScope.$apply();
     };
 
@@ -48,7 +48,7 @@ function (angular, _) {
         dropRow.splice(dropIndex,0,data.dragItem);
       }
 
-      this.dashboard.panelDragging = false;
+      this.dashboard.$$panelDragging = false;
       // Cleanup nulls/undefined left behind
       this.cleanup();
       $rootScope.$apply();
@@ -56,7 +56,7 @@ function (angular, _) {
     };
 
     p.onStop = function() {
-      this.dashboard.panelDragging = false;
+      this.dashboard.$$panelDragging = false;
       this.cleanup();
       $rootScope.$apply();
     };
@@ -76,4 +76,4 @@ function (angular, _) {
 
   });
 
-});
+});