Skip to content

N
nexpie-grafana-theme
Commit 0aa5505d by Torkel Ödegaard
Options

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

parent 60f68abd
Showing with 146 additions and 134 deletions
CHANGELOG.md
# 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))
- Function parameters can be easily changed
- Quickly navigate graphite metric structure
- Templating
- Integrated links to function documentation
- Rearrange function order
- Native Graphite PNG render support
- Feature rich query composer
- Quickly add and edit function parameters
- Templated queries
- [See it in action](http//grafana.org/docs/features/graphite)
### 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
- Drag and drop graphs to rearrange
- Set column spans and row heights
- Save & [search dashboards](https://github.com/grafana/grafana/wiki/Search-features)
- Create, edit, save & search dashboards
- Change column spans and row heights
- Drag and drop panels to rearrange
- 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)
- Flexible [time range controls](https://github.com/grafana/grafana/wiki/Time-range-controls)
- [Dashboard playlists](https://github.com/grafana/grafana/wiki/Dashboard-playlist)
- [Scripted dashboards](http://grafana.org/docs/features/scripted_dashboards)
- [Dashboard playlists](http://grafana.org/docs/docs/features/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).
- 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.
- Point your browser to the installation.
Head to [grafana.org](http://grafana.org) and [download](http://grafana.org/download/)
the latest release.
To run from master:
- Clone this repository
- Start a web server in src folder
- Or create a optimized & minified build:
- npm install (requires nodejs)
- grunt build (requires grunt-cli)
Then follow the quick [setup & config guide](http://grafana.org/docs/). If you have any problems please
read the [troubleshooting guide](http://grafana.org/docs/troubleshooting).
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 import feature
- Improve graphite query editor to handle all types of queries
- Refine and simplify common tasks
- More panel types (not just graphs)
- Use elasticsearch to search for metrics
- Improve template support
- Annotate graph by querying ElasticSearch for events (or other event sources)
- Improve templating support
- Alerting
- 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
This software is based on the great log dashboard [kibana](https://github.com/elasticsearch/kibana).
Before submitting a PR be sure that there are no jshint or unit test failures.
And [sign the CLA](http://grafana.org/docs/contributing/cla.html)
# License
Grafana is distributed under Apache 2.0 License.
latest.json
{
"version": "1.6.0",
"url": "http://grafanarel.s3.amazonaws.com/grafana-1.6.0.tar.gz"
"version": "1.7.0-rc1",
"url": "http://grafanarel.s3.amazonaws.com/grafana-1.7.0-rc1.tar.gz"
}
\ No newline at end of file
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
{
"title": "Welcome to Grafana!",
"time": {
"from": "now-6h",
"to": "now"
},
"templating": {
"list": []
},
"title": "Grafana",
"tags": [],
"style": "dark",
"timezone": "browser",
"editable": true,
"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",
"mode": "html",
"content": "<div class=\"text-center\" style=\"padding-top: 15px\">\n<img src=\"http://grafana.org/assets/img/logo_transparent_200x75.png\"> \n</div>",
"style": {},
"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": "markdown",
"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.",
"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": "Welcome to Grafana"
"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 walk2')"
},
{
"target": "randomWalk('random walk3')"
"target": "randomWalk('random walk')",
"function": "mean",
"column": "value"
}
],
"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
}
\ No newline at end of file
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, _) {
});
});
\ No newline at end of file
});
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment