docs: updated building from source docs

README.md

@@ -37,8 +37,7 @@ go run build.go build
 
 
 ### Building frontend assets
 ### Building frontend assets
 
 
-To build less to css for the frontend you will need a recent version of **node (v6+)**,
-npm (v2.5.0) and grunt (v0.4.5). Run the following:
+For this you need nodejs (v.6+).
 
 
 ```bash
 ```bash
 npm install -g yarn
 npm install -g yarn
@@ -46,8 +45,7 @@ yarn install --pure-lockfile
 npm run build
 npm run build
 ```
 ```
 
 
-To rebuild frontend assets (typesript, sass etc) as you change them start
-the watcher via.
+To rebuild frontend assets (typesript, sass etc) as you change them start the watcher via.
 
 
 ```bash
 ```bash
 npm run watch
 npm run watch
@@ -64,6 +62,7 @@ npm run watch-test
 ```
 ```
 
 
 ### Recompile backend on source change
 ### Recompile backend on source change
+
 To rebuild on source change.
 To rebuild on source change.
 ```bash
 ```bash
 go get github.com/Unknwon/bra
 go get github.com/Unknwon/bra
@@ -80,6 +79,8 @@ You only need to add the options you want to override. Config files are applied
 1. grafana.ini
 1. grafana.ini
 1. custom.ini
 1. custom.ini
 
 
+In your custom.ini uncomment (remove the leading `;`) sign. And set `app_mode = development`.
+
 ## Contribute
 ## Contribute
 If you have any idea for an improvement or found a bug do not hesitate to open an issue.
 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
 And if you have time clone this repo and submit a pull request and help me make Grafana

docs/sources/features/panels/alertlist.md

@@ -12,16 +12,16 @@ weight = 4
 
 
 # Alert List Panel
 # Alert List Panel
 
 
-{{< docs-imagebox img="/img/docs/v45/alert-list-panel.png" max-width="700px" >}}
+{{< docs-imagebox img="/img/docs/v45/alert-list-panel.png" max-width="850px" >}}
 
 
 The alert list panel allows you to display your dashbords alerts. The list can be configured to show current state or recent state changes. You can read  more about alerts [here](http://docs.grafana.org/alerting/rules).
 The alert list panel allows you to display your dashbords alerts. The list can be configured to show current state or recent state changes. You can read  more about alerts [here](http://docs.grafana.org/alerting/rules).
 
 
 ## Alert List Options
 ## Alert List Options
 
 
-{{< docs-imagebox img="/img/docs/v45/alert-list-options.png" max-width="600px" class="docs-image--no-shadow">}}
+{{< docs-imagebox img="/img/docs/v45/alert-list-options.png" max-width="600px" class="docs-image--no-shadow docs-image--right">}}
 
 
-1. `Show`: Lets you choose between current state or recent state changes.
-2. `Max Items`: Max items set the maximum of items in a list.
-3. `Sort Order`: Lets you sort your list alphabeticaly(asc/desc) or by importance.
-4. `Alerts From This Dashboard`: Shows alerts only from the dashboard the alert list is in.
-5. `State Filter`: Here you can filter your list by one or more parameters.
+1. **Show**: Lets you choose between current state or recent state changes.
+2. **Max Items**: Max items set the maximum of items in a list.
+3. **Sort Order**: Lets you sort your list alphabeticaly(asc/desc) or by importance.
+4. **Alerts From** This Dashboard`: Shows alerts only from the dashboard the alert list is in.
+5. **State Filter**: Here you can filter your list by one or more parameters.
\ No newline at end of file

docs/sources/features/panels/graph.md

@@ -11,9 +11,9 @@ weight = 1
 
 
 # Graph Panel
 # Graph Panel
 
 
-The main panel in Grafana is simply named Graph. It provides a very rich set of graphing options.
+{{< docs-imagebox img="/img/docs/v45/graph_overview.png" class="docs-image--no-shadow" max-width="850px" >}}
 
 
-<img src="/img/docs/v45/graph_overview.png" class="no-shadow">
+The main panel in Grafana is simply named Graph. It provides a very rich set of graphing options.
 
 
 1. Clicking the title for a panel exposes a menu.  The `edit` option opens additional configuration
 1. Clicking the title for a panel exposes a menu.  The `edit` option opens additional configuration
 options for the panel.
 options for the panel.
@@ -28,9 +28,9 @@ The general tab allows customization of a panel's appearance and menu options.
 
 
 ### General Options
 ### General Options
 
 
-- ``Title`` - The panel title on the dashboard
-- ``Span`` - The panel width in columns
-- ``Height`` - The panel contents height in pixels
+- **Title** - The panel title on the dashboard
+- **Span** - The panel width in columns
+- **Height** - The panel contents height in pixels
 
 
 ### Drilldown / detail link
 ### Drilldown / detail link
 
 

docs/sources/features/panels/singlestat.md

@@ -12,15 +12,15 @@ weight = 2
 
 
 # Singlestat Panel
 # Singlestat Panel
 
 
-{{< docs-imagebox img="/img/docs/v45/singlestat-panel.png" class="docs-image--no-shadow">}}
+{{< docs-imagebox img="/img/docs/v45/singlestat-panel.png" class="docs-image--no-shadow" max-width="900px" >}}
 
 
 The Singlestat Panel allows you to show the one main summary stat of a SINGLE series. It reduces the series into a single number (by looking at the max, min, average, or sum of values in the series). Singlestat also provides thresholds to color the stat or the Panel background. It can also translate the single number into a text value, and show a sparkline summary of the series.
 The Singlestat Panel allows you to show the one main summary stat of a SINGLE series. It reduces the series into a single number (by looking at the max, min, average, or sum of values in the series). Singlestat also provides thresholds to color the stat or the Panel background. It can also translate the single number into a text value, and show a sparkline summary of the series.
 
 
 ### Singlestat Panel Configuration
 ### Singlestat Panel Configuration
 
 
-The singlestat panel has a normal query editor to allow you define your exact metric queries like many other Panels. Through the Options tab, you can access the Singlestat-specific functionality.
+The singlestat panel has a normal query editor to allow you define your exact metric queries like many other Panels. In the Options tab, you can access the Singlestat-specific functionality.
 
 
-<img class="no-shadow" src="/img/docs/v45/singlestat-value-options.png">
+{{< docs-imagebox img="/img/docs/v45/singlestat-value-options.png" class="docs-image--no-shadow" max-width="900px" >}}
 
 
 1. `Stats`: The Stats field let you set the function (min, max, average, current, total, first, delta, range) that your entire query is reduced into a single value with. This reduces the entire query into a single summary value that is displayed.
 1. `Stats`: The Stats field let you set the function (min, max, average, current, total, first, delta, range) that your entire query is reduced into a single value with. This reduces the entire query into a single summary value that is displayed.
    * `min` - The smallest value in the series
    * `min` - The smallest value in the series

docs/sources/project/building_from_source.md

@@ -49,29 +49,19 @@ to install GCC. We recommend [TDM-GCC](http://tdm-gcc.tdragon.net/download).
 npm --add-python-to-path='true' --debug install --global windows-build-tools
 npm --add-python-to-path='true' --debug install --global windows-build-tools
 ```
 ```
 
 
-## Build the Front-end Assets
+## Build the Frontend Assets
 
 
-To build less to css for the frontend you will need a recent version of node (v0.12.0),
-npm (v2.5.0) and grunt (v0.4.5). Run the following:
+For this you need nodejs (v.6+).
 
 
 ```
 ```
 npm install -g yarn
 npm install -g yarn
 yarn install --pure-lockfile
 yarn install --pure-lockfile
-npm install -g grunt-cli
-grunt
+npm run build
 ```
 ```
 
 
-## Recompile backend on source change
-To rebuild on source change
-```
-go get github.com/Unknwon/bra
-bra run
-```
-
-If the `bra run` command does not work, make sure that the bin directory in your Go workspace directory is in the path. $GOPATH/bin (or %GOPATH%\bin in Windows) is in your path.
-
 ## Running Grafana Locally
 ## Running Grafana Locally
 You can run a local instance of Grafana by running:
 You can run a local instance of Grafana by running:
+
 ```
 ```
 ./bin/grafana-server
 ./bin/grafana-server
 ```
 ```
@@ -81,16 +71,21 @@ If you built it with `go build .`, run `./grafana`
 
 
 Open grafana in your browser (default [http://localhost:3000](http://localhost:3000)) and login with admin user (default user/pass = admin/admin).
 Open grafana in your browser (default [http://localhost:3000](http://localhost:3000)) and login with admin user (default user/pass = admin/admin).
 
 
-## Developing for Grafana
-To add features, customize your config, etc, you'll need to rebuild on source change.
+## Developing Grafana
+
+To add features, customize your config, etc, you'll need to rebuild the backend when you change the source code. We use a tool named `bra` that
+does this.
+
 ```
 ```
 go get github.com/Unknwon/bra
 go get github.com/Unknwon/bra
 
 
 bra run
 bra run
 ```
 ```
-You'll also need to run `npm run watch` to watch for changes to the front-end.
+
+You'll also need to run `npm run watch` to watch for changes to the front-end (typescript, html, sass)
 
 
 ## Creating optimized release packages
 ## Creating optimized release packages
+
 This step builds linux packages and requires that fpm is installed. Install fpm via `gem install fpm`.
 This step builds linux packages and requires that fpm is installed. Install fpm via `gem install fpm`.
 
 
 ```
 ```
@@ -105,6 +100,10 @@ You only need to add the options you want to override. Config files are applied
 1. grafana.ini
 1. grafana.ini
 2. custom.ini
 2. custom.ini
 
 
+### Set app_mode to development
+
+In your custom.ini uncomment (remove the leading `;`) sign. And set `app_mode = development`.
+
 Learn more about Grafana config options in the [Configuration section](/installation/configuration/)
 Learn more about Grafana config options in the [Configuration section](/installation/configuration/)
 
 
 ## Create a pull requests
 ## Create a pull requests

package.json

@@ -91,9 +91,9 @@
     "npm": "^5.4.2"
     "npm": "^5.4.2"
   },
   },
   "scripts": {
   "scripts": {
-    "webpack": "./node_modules/.bin/webpack --progress --colors --config scripts/webpack/webpack.dev.js",
+    "dev": "./node_modules/.bin/webpack --progress --colors --config scripts/webpack/webpack.dev.js",
     "watch": "./node_modules/.bin/webpack --progress --colors --watch --config scripts/webpack/webpack.dev.js",
     "watch": "./node_modules/.bin/webpack --progress --colors --watch --config scripts/webpack/webpack.dev.js",
-    "build": "./node_modules/grunt-cli/bin/grunt",
+    "build": "./node_modules/grunt-cli/bin/grunt build",
     "test": "./node_modules/grunt-cli/bin/grunt test",
     "test": "./node_modules/grunt-cli/bin/grunt test",
     "watch-test": "./node_modules/grunt-cli/bin/grunt karma:dev"
     "watch-test": "./node_modules/grunt-cli/bin/grunt karma:dev"
   },
   },

scripts/circle-test.sh

@@ -17,6 +17,7 @@ npm install -g yarn --quiet
 yarn install --pure-lockfile --no-progress
 yarn install --pure-lockfile --no-progress
 
 
 exit_if_fail npm test
 exit_if_fail npm test
+exit_if_fail npm build
 
 
 echo "running go fmt"
 echo "running go fmt"
 exit_if_fail test -z "$(gofmt -s -l ./pkg | tee /dev/stderr)"
 exit_if_fail test -z "$(gofmt -s -l ./pkg | tee /dev/stderr)"