Skip to content

N
nexpie-grafana-theme
Commit c711fb67 by Torkel Ödegaard
Options

Merge branch 'master' into websocket

parents 3ea441d1 7e6314dc
Showing with 276 additions and 145 deletions
CHANGELOG.md
...@@ -16,6 +16,7 @@ ...@@ -16,6 +16,7 @@
* **KairosDB** The data source is no longer included in default builds, but can easily be installed via improved plugin system, closes [#3524](https://github.com/grafana/grafana/issues/3524) * **KairosDB** The data source is no longer included in default builds, but can easily be installed via improved plugin system, closes [#3524](https://github.com/grafana/grafana/issues/3524)
### Enhancements ### Enhancements
* **LDAP**: Support for nested LDAP Groups, closes [#4401](https://github.com/grafana/grafana/issues/4401), [#3808](https://github.com/grafana/grafana/issues/3808)
* **Sessions**: Support for memcached as session storage, closes [#3458](https://github.com/grafana/grafana/issues/3458) * **Sessions**: Support for memcached as session storage, closes [#3458](https://github.com/grafana/grafana/issues/3458)
* **mysql**: Grafana now supports ssl for mysql, closes [#3584](https://github.com/grafana/grafana/issues/3584) * **mysql**: Grafana now supports ssl for mysql, closes [#3584](https://github.com/grafana/grafana/issues/3584)
* **snapshot**: Annotations are now included in snapshots, closes [#3635](https://github.com/grafana/grafana/issues/3635) * **snapshot**: Annotations are now included in snapshots, closes [#3635](https://github.com/grafana/grafana/issues/3635)
......
docs/sources/plugins/app.md 0 → 100644
---
page_title: App plugin
page_description: App plugin for Grafana
page_keywords: grafana, plugins, documentation
---
> Our goal is not to have a very extensive documentation but rather have actual code that people can look at. An example implementation of an app can be found in this [example app repo](https://github.com/grafana/example-app)
# Apps
App plugins is a new kind of grafana plugin that can bundle datasource and panel plugins within one package. It also enable the plugin author to create custom pages within grafana. The custom pages enables the plugin author to include things like documentation, sign up forms or controlling other services using HTTP requests.
Datasource and panel plugins will show up like normal plugins. The app pages will be available in the main menu.
<img class="no-shadow" src="/img/v3/app-in-main-menu.png">
## Enabling app plugins
After installing an app it have to be enabled before it show up as an datasource or panel. You can do that on the app page in the config tab.
## README.md
The readme file in the mounted folder will show up in the overview tab on the app page.
## Module exports
```javascript
export {
ExampleAppConfigCtrl as ConfigCtrl,
StreamPageCtrl,
LogsPageCtrl
};
```
The only required export is the ConfigCtrl. Both StreamPageCtrl and LogsPageCtrl are custom pages defined in plugin.json
## Custom pages
Custom pages are defined in the plugin.json like this.
```json
"pages": [
{ "name": "Live stream", "component": "StreamPageCtrl", "role": "Editor"},
{ "name": "Log view", "component": "LogsPageCtrl", "role": "Viewer"}
]
```
The component field have to match one of the components exported in the module.js in the root of the plugin.
## Bundled plugins
When Grafana starts it will scan all directories within an app plugin and load folders containing a plugin.json as an plugin.
docs/sources/plugins/datasources.md
...@@ -4,7 +4,7 @@ page_description: Datasource plugins for Grafana ...@@ -4,7 +4,7 @@ page_description: Datasource plugins for Grafana
page_keywords: grafana, plugins, documentation page_keywords: grafana, plugins, documentation
--- ---
> Our goal is not to have a very extensive documentation but rather have actual code that people can look at. An example implementation of a datasource can be found in the grafana repo under /examples/datasource-plugin-genericdatasource > Our goal is not to have a very extensive documentation but rather have actual code that people can look at. An example implementation of a datasource can be found in this [example datasource repo](https://github.com/grafana/simple-json-datasource)
# Datasources # Datasources
......
docs/sources/plugins/developing_plugins.md
...@@ -22,9 +22,7 @@ The easiset way to try your plugin with grafana is to [setup grafana for develop ...@@ -22,9 +22,7 @@ The easiset way to try your plugin with grafana is to [setup grafana for develop
## Examples / boilerplate ## Examples / boilerplate
We currently have three different examples that you can fork to get started developing your grafana plugin. We currently have three different examples that you can fork to get started developing your grafana plugin.
- [generic-datasource](https://github.com/grafana/grafana/tree/master/examples/datasource-plugin-genericdatasource) (small datasource plugin for quering json data from backends) - [simple-json-datasource](https://github.com/grafana/simple-json-datasource) (small datasource plugin for quering json data from backends)
- [panel-boilderplate-es5](https://github.com/grafana/grafana/tree/master/examples/panel-boilerplate-es5) - [panel-boilderplate-es5](https://github.com/grafana/grafana/tree/master/examples/panel-boilerplate-es5)
- [nginx-app](https://github.com/grafana/grafana/tree/master/examples/nginx-app) - [example-app](https://github.com/grafana/example-app)
## Publish your plugin
We are currently working on this.
docs/sources/plugins/installation.md
...@@ -17,30 +17,30 @@ On Linux systems the grafana-cli will assume that the grafana plugin directory i ...@@ -17,30 +17,30 @@ On Linux systems the grafana-cli will assume that the grafana plugin directory i
List available plugins List available plugins
``` ```
grafana-cli list-remote grafana-cli plugins list-remote
``` ```
Install a plugin type Install a plugin type
``` ```
grafana-cli install <plugin-id> grafana-cli plugins install <plugin-id>
``` ```
List installed plugins List installed plugins
``` ```
grafana-cli ls grafana-cli plugins ls
``` ```
Upgrade all installed plugins Upgrade all installed plugins
``` ```
grafana-cli upgrade-all grafana-cli plugins upgrade-all
``` ```
Upgrade one plugin Upgrade one plugin
``` ```
grafana-cli upgrade <plugin-id> grafana-cli plugins upgrade <plugin-id>
``` ```
Remove one plugin Remove one plugin
``` ```
grafana-cli remove <plugin-id> grafana-cli plugins remove <plugin-id>
``` ```
docs/sources/reference/admin.md
...@@ -30,7 +30,8 @@ From the Grafana Server Admin page, you can access the System Info page which su ...@@ -30,7 +30,8 @@ From the Grafana Server Admin page, you can access the System Info page which su
## Why would I have multiple Organizations? ## Why would I have multiple Organizations?
In many cases, a Grafana installation will only have one Organization. There's no need to create multiple Organizations Organizations in Grafana are best suited for a **multi-tenant deployment**. In a multi-tenant deployment,
if you want all your users to have access to the same set of dashboards and data. In a multitenant deployment,
Organizations can be used to provide a full Grafana experience to different sets of users from a single Grafana instance, Organizations can be used to provide a full Grafana experience to different sets of users from a single Grafana instance,
at the convenience of the Grafana Administrator. at the convenience of the Grafana Administrator.
In most cases, a Grafana installation will only have **one** Organization. Since dashboards, data sources and other configuration items are not shared between organizations, there's no need to create multiple Organizations if you want all your users to have access to the same set of dashboards and data.
pkg/api/api.go
...@@ -80,7 +80,7 @@ func Register(r *macaron.Macaron) { ...@@ -80,7 +80,7 @@ func Register(r *macaron.Macaron) {
r.Post("/api/snapshots/", bind(m.CreateDashboardSnapshotCommand{}), CreateDashboardSnapshot) r.Post("/api/snapshots/", bind(m.CreateDashboardSnapshotCommand{}), CreateDashboardSnapshot)
r.Get("/api/snapshot/shared-options/", GetSharingOptions) r.Get("/api/snapshot/shared-options/", GetSharingOptions)
r.Get("/api/snapshots/:key", GetDashboardSnapshot) r.Get("/api/snapshots/:key", GetDashboardSnapshot)
r.Get("/api/snapshots-delete/:key", DeleteDashboardSnapshot) r.Get("/api/snapshots-delete/:key", reqEditorRole, DeleteDashboardSnapshot)
// api renew session based on remember cookie // api renew session based on remember cookie
r.Get("/api/login/ping", quota("session"), LoginApiPing) r.Get("/api/login/ping", quota("session"), LoginApiPing)
......
pkg/api/dtos/plugins.go
...@@ -11,10 +11,10 @@ type PluginSetting struct { ...@@ -11,10 +11,10 @@ type PluginSetting struct {
Module string `json:"module"` Module string `json:"module"`
BaseUrl string `json:"baseUrl"` BaseUrl string `json:"baseUrl"`
Info *plugins.PluginInfo `json:"info"` Info *plugins.PluginInfo `json:"info"`
Pages []*plugins.AppPluginPage `json:"pages"`
Includes []*plugins.PluginInclude `json:"includes"` Includes []*plugins.PluginInclude `json:"includes"`
Dependencies *plugins.PluginDependencies `json:"dependencies"` Dependencies *plugins.PluginDependencies `json:"dependencies"`
JsonData map[string]interface{} `json:"jsonData"` JsonData map[string]interface{} `json:"jsonData"`
DefaultNavUrl string `json:"defaultNavUrl"`
} }
type PluginListItem struct { type PluginListItem struct {
......
pkg/api/index.go
...@@ -56,8 +56,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -56,8 +56,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR { if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR {
dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Divider: true}) dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Divider: true})
dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Text: "New", Url: setting.AppSubUrl + "/dashboard/new"}) dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Text: "New", Icon: "fa fa-plus", Url: setting.AppSubUrl + "/dashboard/new"})
dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Text: "Import", Url: setting.AppSubUrl + "/import/dashboard"}) dashboardChildNavs = append(dashboardChildNavs, &dtos.NavLink{Text: "Import", Icon: "fa fa-download", Url: setting.AppSubUrl + "/import/dashboard"})
} }
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
...@@ -88,22 +88,35 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -88,22 +88,35 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
for _, plugin := range enabledPlugins.Apps { for _, plugin := range enabledPlugins.Apps {
if plugin.Pinned { if plugin.Pinned {
pageLink := &dtos.NavLink{ appLink := &dtos.NavLink{
Text: plugin.Name, Text: plugin.Name,
Url: setting.AppSubUrl + "/plugins/" + plugin.Id + "/edit", Url: plugin.DefaultNavUrl,
Img: plugin.Info.Logos.Small, Img: plugin.Info.Logos.Small,
} }
for _, page := range plugin.Pages { for _, include := range plugin.Includes {
if !page.SuppressNav { if include.Type == "page" && include.AddToNav {
pageLink.Children = append(pageLink.Children, &dtos.NavLink{ link := &dtos.NavLink{
Url: setting.AppSubUrl + "/plugins/" + plugin.Id + "/page/" + page.Slug, Url: setting.AppSubUrl + "/plugins/" + plugin.Id + "/page/" + include.Slug,
Text: page.Name, Text: include.Name,
}) }
appLink.Children = append(appLink.Children, link)
}
if include.Type == "dashboard" && include.AddToNav {
link := &dtos.NavLink{
Url: setting.AppSubUrl + "/dashboard/db/" + include.Slug,
Text: include.Name,
}
appLink.Children = append(appLink.Children, link)
} }
} }
data.MainNavLinks = append(data.MainNavLinks, pageLink) if c.OrgRole == m.ROLE_ADMIN {
appLink.Children = append(appLink.Children, &dtos.NavLink{Divider: true})
appLink.Children = append(appLink.Children, &dtos.NavLink{Text: "Plugin Config", Icon: "fa fa-cog", Url: setting.AppSubUrl + "/plugins/" + plugin.Id + "/edit"})
}
data.MainNavLinks = append(data.MainNavLinks, appLink)
} }
} }
...@@ -113,10 +126,10 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { ...@@ -113,10 +126,10 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
Icon: "fa fa-fw fa-cogs", Icon: "fa fa-fw fa-cogs",
Url: setting.AppSubUrl + "/admin", Url: setting.AppSubUrl + "/admin",
Children: []*dtos.NavLink{ Children: []*dtos.NavLink{
{Text: "Global Users", Icon: "fa fa-fw fa-cogs", Url: setting.AppSubUrl + "/admin/users"}, {Text: "Global Users", Url: setting.AppSubUrl + "/admin/users"},
{Text: "Global Orgs", Icon: "fa fa-fw fa-cogs", Url: setting.AppSubUrl + "/admin/orgs"}, {Text: "Global Orgs", Url: setting.AppSubUrl + "/admin/orgs"},
{Text: "Server Settings", Icon: "fa fa-fw fa-cogs", Url: setting.AppSubUrl + "/admin/settings"}, {Text: "Server Settings", Url: setting.AppSubUrl + "/admin/settings"},
{Text: "Server Stats", Icon: "fa-fw fa-cogs", Url: setting.AppSubUrl + "/admin/stats"}, {Text: "Server Stats", Url: setting.AppSubUrl + "/admin/stats"},
}, },
}) })
} }
......
pkg/api/plugins.go
...@@ -80,10 +80,7 @@ func GetPluginSettingById(c *middleware.Context) Response { ...@@ -80,10 +80,7 @@ func GetPluginSettingById(c *middleware.Context) Response {
Includes: def.Includes, Includes: def.Includes,
BaseUrl: def.BaseUrl, BaseUrl: def.BaseUrl,
Module: def.Module, Module: def.Module,
} DefaultNavUrl: def.DefaultNavUrl,
if app, exists := plugins.Apps[pluginId]; exists {
dto.Pages = app.Pages
} }
query := m.GetPluginSettingByIdQuery{PluginId: pluginId, OrgId: c.OrgId} query := m.GetPluginSettingByIdQuery{PluginId: pluginId, OrgId: c.OrgId}
......
pkg/cmd/grafana-cli/commands/commands.go
...@@ -22,7 +22,7 @@ func runCommand(command func(commandLine CommandLine) error) func(context *cli.C ...@@ -22,7 +22,7 @@ func runCommand(command func(commandLine CommandLine) error) func(context *cli.C
} }
} }
var Commands = []cli.Command{ var pluginCommands = []cli.Command{
{ {
Name: "install", Name: "install",
Usage: "install <plugin name>", Usage: "install <plugin name>",
...@@ -49,3 +49,11 @@ var Commands = []cli.Command{ ...@@ -49,3 +49,11 @@ var Commands = []cli.Command{
Action: runCommand(removeCommand), Action: runCommand(removeCommand),
}, },
} }
var Commands = []cli.Command{
{
Name: "plugins",
Usage: "Manage plugins for grafana",
Subcommands: pluginCommands,
},
}
pkg/cmd/grafana-cli/main.go
...@@ -12,10 +12,6 @@ import ( ...@@ -12,10 +12,6 @@ import (
var version = "master" var version = "master"
func getGrafanaPluginPath() string { func getGrafanaPluginPath() string {
if os.Getenv("GF_PLUGIN_DIR") != "" {
return os.Getenv("GF_PLUGIN_DIR")
}
os := runtime.GOOS os := runtime.GOOS
if os == "windows" { if os == "windows" {
return "C:\\opt\\grafana\\plugins" return "C:\\opt\\grafana\\plugins"
...@@ -37,11 +33,13 @@ func main() { ...@@ -37,11 +33,13 @@ func main() {
Name: "path", Name: "path",
Usage: "path to the grafana installation", Usage: "path to the grafana installation",
Value: getGrafanaPluginPath(), Value: getGrafanaPluginPath(),
EnvVar: "GF_PLUGIN_DIR",
}, },
cli.StringFlag{ cli.StringFlag{
Name: "repo", Name: "repo",
Usage: "url to the plugin repository", Usage: "url to the plugin repository",
Value: "https://grafana-net.raintank.io/api/plugins", Value: "https://grafana-net.raintank.io/api/plugins",
EnvVar: "GF_PLUGIN_REPO",
}, },
cli.BoolFlag{ cli.BoolFlag{
Name: "debug, d", Name: "debug, d",
......
pkg/plugins/app_plugin.go
...@@ -6,16 +6,9 @@ import ( ...@@ -6,16 +6,9 @@ import (
"github.com/gosimple/slug" "github.com/gosimple/slug"
"github.com/grafana/grafana/pkg/models" "github.com/grafana/grafana/pkg/models"
"github.com/grafana/grafana/pkg/setting"
) )
type AppPluginPage struct {
Name string `json:"name"`
Slug string `json:"slug"`
Component string `json:"component"`
Role models.RoleType `json:"role"`
SuppressNav bool `json:"suppressNav"`
}
type AppPluginCss struct { type AppPluginCss struct {
Light string `json:"light"` Light string `json:"light"`
Dark string `json:"dark"` Dark string `json:"dark"`
...@@ -23,7 +16,6 @@ type AppPluginCss struct { ...@@ -23,7 +16,6 @@ type AppPluginCss struct {
type AppPlugin struct { type AppPlugin struct {
FrontendPluginBase FrontendPluginBase
Pages []*AppPluginPage `json:"pages"`
Routes []*AppPluginRoute `json:"routes"` Routes []*AppPluginRoute `json:"routes"`
FoundChildPlugins []*PluginInclude `json:"-"` FoundChildPlugins []*PluginInclude `json:"-"`
...@@ -84,10 +76,18 @@ func (app *AppPlugin) initApp() { ...@@ -84,10 +76,18 @@ func (app *AppPlugin) initApp() {
} }
} }
app.DefaultNavUrl = setting.AppSubUrl + "/plugins/" + app.Id + "/edit"
// slugify pages // slugify pages
for _, page := range app.Pages { for _, include := range app.Includes {
if page.Slug == "" { if include.Slug == "" {
page.Slug = slug.Make(page.Name) include.Slug = slug.Make(include.Name)
}
if include.Type == "page" && include.DefaultNav {
app.DefaultNavUrl = setting.AppSubUrl + "/plugins/" + app.Id + "/page/" + include.Slug
}
if include.Type == "dashboard" && include.DefaultNav {
app.DefaultNavUrl = setting.AppSubUrl + "/dashboard/db/" + include.Slug
} }
} }
} }
pkg/plugins/models.go
...@@ -7,6 +7,7 @@ import ( ...@@ -7,6 +7,7 @@ import (
"strings" "strings"
"github.com/grafana/grafana/pkg/log" "github.com/grafana/grafana/pkg/log"
"github.com/grafana/grafana/pkg/models"
"github.com/grafana/grafana/pkg/setting" "github.com/grafana/grafana/pkg/setting"
) )
...@@ -41,6 +42,7 @@ type PluginBase struct { ...@@ -41,6 +42,7 @@ type PluginBase struct {
IncludedInAppId string `json:"-"` IncludedInAppId string `json:"-"`
PluginDir string `json:"-"` PluginDir string `json:"-"`
DefaultNavUrl string `json:"-"`
// cache for readme file contents // cache for readme file contents
Readme []byte `json:"-"` Readme []byte `json:"-"`
...@@ -77,7 +79,13 @@ type PluginInclude struct { ...@@ -77,7 +79,13 @@ type PluginInclude struct {
Name string `json:"name"` Name string `json:"name"`
Path string `json:"path"` Path string `json:"path"`
Type string `json:"type"` Type string `json:"type"`
Id string `json:"id"` Component string `json:"component"`
Role models.RoleType `json:"role"`
AddToNav bool `json:"addToNav"`
DefaultNav bool `json:"defaultNav"`
Slug string `json:"slug"`
Id string `json:"-"`
} }
type PluginDependencyItem struct { type PluginDependencyItem struct {
......
public/app/core/components/navbar/navbar.html
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
<i class="fa fa-chevron-left"></i> <i class="fa fa-chevron-left"></i>
</a> </a>
<a href="{{::ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title"> <a href="{{ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
<i class="{{::ctrl.icon}}"></i> <i class="{{ctrl.icon}}"></i>
{{::ctrl.title}} {{ctrl.title}}
</a> </a>
<div ng-transclude></div> <div ng-transclude></div>
......
public/app/core/components/sidemenu/sidemenu.html
...@@ -40,7 +40,10 @@ ...@@ -40,7 +40,10 @@
</a> </a>
<ul class="dropdown-menu" role="menu" ng-if="::item.children"> <ul class="dropdown-menu" role="menu" ng-if="::item.children">
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}"> <li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
<a href="{{::child.url}}">{{::child.text}}</a> <a href="{{::child.url}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
{{::child.text}}
</a>
</li> </li>
</ul> </ul>
</li> </li>
......
public/app/core/components/sidemenu/sidemenu.ts
...@@ -86,7 +86,7 @@ export class SideMenuCtrl { ...@@ -86,7 +86,7 @@ export class SideMenuCtrl {
switchOrg(orgId) { switchOrg(orgId) {
this.backendSrv.post('/api/user/using/' + orgId).then(() => { this.backendSrv.post('/api/user/using/' + orgId).then(() => {
window.location.href = window.location.href; window.location.href = `${config.appSubUrl}/`;
}); });
}; };
} }
......
public/app/core/services/backend_srv.js
...@@ -105,6 +105,13 @@ function (angular, _, coreModule, config) { ...@@ -105,6 +105,13 @@ function (angular, _, coreModule, config) {
}); });
} }
//populate error obj on Internal Error
if (_.isString(err.data) && err.status === 500) {
err.data = {
error: err.statusText
};
}
// for Prometheus // for Prometheus
if (!err.data.message && _.isString(err.data.error)) { if (!err.data.message && _.isString(err.data.error)) {
err.data.message = err.data.error; err.data.message = err.data.error;
......
public/app/features/org/partials/newOrg.html
<navbar title="Organization" icon="icon-gf icon-gf-users"> <navbar title="Organization" icon="icon-gf icon-gf-users">
</navbar> </navbar>
<div class="page-container"> <div class="page-container" ng-form="playlistEditForm">
<div class="page"> <div class="page-header">
<h1>New Organization</h1>
</div>
<h2 style="margin-top: 30px;">Add Organization</h2> <p class="playlist-description">Each organization contains their own dashboards, data sources and configuration, and cannot be shared between orgs. While users may belong to more than one, mutiple organization are most frequently used in multi-tenant deployments. </p>
<form name="form" class="gf-form-group"> <div class="gf-form-group">
<div class="gf-form"> <div class="gf-form">
<span class="gf-form-label width-10">Org. name</span> <span class="gf-form-label width-10">Org. name</span>
<input type="text" ng-model="newOrg.name" required class="gf-form-input" placeholder="organization name"> <input type="text" ng-model="newOrg.name" required class="gf-form-input max-width-21" placeholder="organization name">
</div> </div>
<br> <br>
<div class="gf-form-buttons-row"> <div class="gf-form-buttons-row">
<button class="btn btn-success pull-right" ng-click="createOrg()">Create</button> <button class="btn btn-success" ng-click="createOrg()">Create</button>
</div> </div>
</form>
</div> </div>
</div> </div>
public/app/features/org/partials/orgDetails.html
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1>Preferences</h1> <h1>Org Preferences</h1>
</div> </div>
<h3 class="page-heading">General</h3> <h3 class="page-heading">General</h3>
......
public/app/features/panel/panel_menu.js
...@@ -56,6 +56,7 @@ function (angular, $, _, Tether) { ...@@ -56,6 +56,7 @@ function (angular, $, _, Tether) {
template += '<a class="panel-menu-link" '; template += '<a class="panel-menu-link" ';
if (item.click) { template += ' ng-click="' + item.click + '"'; } if (item.click) { template += ' ng-click="' + item.click + '"'; }
if (item.href) { template += ' href="' + item.href + '"'; }
template += '>'; template += '>';
template += item.text + '</a>'; template += item.text + '</a>';
}); });
......
public/app/features/plugins/partials/ds_edit.html
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
<div class="page-container"> <div class="page-container">
<div class="page-header"> <div class="page-header">
<h1 ng-show="isNew">Add data source</h1> <h1 ng-show="ctrl.isNew">Add data source</h1>
<h1 ng-show="!isNew">Edit data source</h1> <h1 ng-hide="ctrl.isNew">Edit data source</h1>
<div class="page-header-tabs" ng-show="ctrl.hasDashboards"> <div class="page-header-tabs" ng-show="ctrl.hasDashboards">
<ul class="gf-tabs"> <ul class="gf-tabs">
......
public/app/features/plugins/partials/plugin_edit.html
...@@ -62,10 +62,6 @@ ...@@ -62,10 +62,6 @@
<i class="{{plug.icon}}"></i> <i class="{{plug.icon}}"></i>
{{plug.name}} {{plug.name}}
</li> </li>
<li ng-repeat="page in ctrl.model.pages" class="plugin-info-list-item">
<i class="icon-gf icon-gf-share"></i>
<a href="plugins/{{ctrl.model.id}}/page/{{page.slug}}">{{page.name}}</a>
</li>
</ul> </ul>
</section> </section>
<section class="page-sidebar-section"> <section class="page-sidebar-section">
......
public/app/features/plugins/partials/plugin_page.html
<navbar icon="icon-gf icon-gf-apps" title="{{ctrl.appModel.name}}" title-url="plugins/{{ctrl.pluginId}}/edit"> <navbar icon="icon-gf icon-gf-apps" title="{{ctrl.appModel.name}}" title-url="{{ctrl.appModel.defaultNavUrl}}">
</navbar> </navbar>
<div class="page-container"> <div class="page-container" >
<div ng-if="ctrl.page"> <div ng-if="ctrl.page">
<plugin-component type="app-page"> <plugin-component type="app-page">
</plugin-component> </plugin-component>
......
public/app/features/plugins/plugin_page_ctrl.ts
...@@ -11,11 +11,13 @@ export class AppPageCtrl { ...@@ -11,11 +11,13 @@ export class AppPageCtrl {
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private $routeParams: any, private $rootScope) { constructor(private backendSrv, private $routeParams: any, private $rootScope) {
this.pluginId = $routeParams.pluginId; this.pluginId = $routeParams.pluginId;
this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(app => { this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(app => {
this.appModel = app; this.appModel = app;
this.page = _.findWhere(app.pages, {slug: this.$routeParams.slug}); this.page = _.findWhere(app.includes, {slug: this.$routeParams.slug});
if (!this.page) { if (!this.page) {
$rootScope.appEvent('alert-error', ['App Page Not Found', '']); this.$rootScope.appEvent('alert-error', ['App Page Not Found', '']);
} }
}); });
} }
......
public/app/features/templating/templateSrv.js
...@@ -35,7 +35,7 @@ function (angular, _) { ...@@ -35,7 +35,7 @@ function (angular, _) {
}; };
function regexEscape(value) { function regexEscape(value) {
return value.replace(/[\\^$*+?.()|[\]{}]/g, '\\$&'); return value.replace(/[\\^$*+?.()|[\]{}\/]/g, '\\$&');
} }
function luceneEscape(value) { function luceneEscape(value) {
......
public/app/plugins/panel/graph/legend.js
...@@ -101,6 +101,12 @@ function (angular, _, $) { ...@@ -101,6 +101,12 @@ function (angular, _, $) {
} }
function render() { function render() {
if (!ctrl.panel.legend.show) {
elem.empty();
firstRender = true;
return;
}
if (firstRender) { if (firstRender) {
elem.append($container); elem.append($container);
$container.on('click', '.graph-legend-icon', openColorSelector); $container.on('click', '.graph-legend-icon', openColorSelector);
......
public/app/plugins/panel/graph/module.ts
...@@ -4,6 +4,7 @@ import './graph'; ...@@ -4,6 +4,7 @@ import './graph';
import './legend'; import './legend';
import './series_overrides_ctrl'; import './series_overrides_ctrl';
import template from './template';
import moment from 'moment'; import moment from 'moment';
import kbn from 'app/core/utils/kbn'; import kbn from 'app/core/utils/kbn';
import _ from 'lodash'; import _ from 'lodash';
...@@ -83,7 +84,7 @@ var panelDefaults = { ...@@ -83,7 +84,7 @@ var panelDefaults = {
}; };
class GraphCtrl extends MetricsPanelCtrl { class GraphCtrl extends MetricsPanelCtrl {
static templateUrl = 'module.html'; static template = template;
hiddenSeries: any = {}; hiddenSeries: any = {};
seriesList: any = []; seriesList: any = [];
......
public/app/plugins/panel/graph/styleEditor.html
<div class="editor-row gf-form-group"> <div class="editor-row gf-form-group">
<div class="section"> <div class="section">
<h5>Chart Options</h5> <h5 class="section-heading">Draw Modes</h5>
<editor-opt-bool text="Bars" model="ctrl.panel.bars" change="ctrl.render()"></editor-opt-bool> <div class="gf-form">
<editor-opt-bool text="Lines" model="ctrl.panel.lines" change="ctrl.render()"></editor-opt-bool> <label class="gf-form-label width-5">Bars</label>
<editor-opt-bool text="Points" model="ctrl.panel.points" change="ctrl.render()"></editor-opt-bool> <editor-checkbox text="Enable" model="ctrl.panel.bars" change="ctrl.render()"></editor-checkbox>
</div>
<div class="gf-form">
<label class="gf-form-label width-5">Lines</label>
<editor-checkbox text="Enable" model="ctrl.panel.lines" change="ctrl.render()"></editor-checkbox>
</div>
<div class="gf-form">
<label class="gf-form-label width-5">Points</label>
<editor-checkbox text="Enable" model="ctrl.panel.points" change="ctrl.render()"></editor-checkbox>
</div>
</div> </div>
<div class="section"> <div class="section">
<h5>Line options</h5> <h5 class="section-heading">Mode Options</h5>
<div class="editor-option" ng-show="ctrl.panel.lines"> <div class="gf-form" ng-show="ctrl.panel.lines">
<label class="small">Line Fill</label> <label class="gf-form-label width-8">Fill</label>
<select class="input-mini" ng-model="ctrl.panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.panel.fill" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div> </div>
<div class="editor-option" ng-show="ctrl.panel.lines">
<label class="small">Line Width</label>
<select class="input-mini" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div> </div>
<div class="editor-option" ng-show="ctrl.panel.points"> <div class="gf-form" ng-show="ctrl.panel.lines">
<label class="small">Point Radius</label> <label class="gf-form-label width-8">Line Width</label>
<select class="input-mini" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select> <div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.panel.linewidth" ng-options="f for f in [0,1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div> </div>
<div class="editor-option">
<label class="small">Null point mode<tip>Define how null values should be drawn</tip></label>
<select class="input-medium" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
</div> </div>
<div class="gf-form" ng-show="ctrl.panel.points">
<editor-opt-bool text="Staircase line" model="ctrl.panel.steppedLine" change="ctrl.render()"></editor-opt-bool> <label class="gf-form-label width-8">Point Radius</label>
<div class="gf-form-select-wrapper">
<select class="gf-form-input" ng-model="ctrl.panel.pointradius" ng-options="f for f in [1,2,3,4,5,6,7,8,9,10]" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form" ng-show="ctrl.panel.lines">
<label class="gf-form-label width-8">Staircase</label>
<editor-checkbox text="" model="ctrl.panel.steppedLine" change="ctrl.render()"></editor-checkbox>
</div> </div>
<div class="section">
<h5>Multiple Series</h5>
<editor-opt-bool text="Stack" model="ctrl.panel.stack" change="ctrl.render()"></editor-opt-bool>
<editor-opt-bool text="Percent" model="ctrl.panel.percentage" change="ctrl.render()" tip="Stack as a percentage of total"></editor-opt-bool>
</div> </div>
<div class="section"> <div class="section">
<h5>Rendering</h5> <h5 class="section-heading">Misc options</h5>
<div class="editor-option"> <div class="gf-form">
<label class="small">Flot <tip>client side</tip></label> <label class="gf-form-label width-7">Null value</label>
<input type="radio" class="input-small" ng-model="ctrl.panel.renderer" value="flot" ng-change="ctrl.refresh()" /> <div class="gf-form-select-wrapper">
<select class="gf-form-input max-width-8" ng-model="ctrl.panel.nullPointMode" ng-options="f for f in ['connected', 'null', 'null as zero']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Renderer</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.renderer" ng-options="f for f in ['flot', 'png']" ng-change="ctrl.render()"></select>
</div>
</div>
<div class="gf-form">
<label class="gf-form-label width-7">Tooltip mode</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.shared" ng-options="f.value as f.text for f in [{text: 'All series', value: true}, {text: 'Single', value: false}]" ng-change="ctrl.render()"></select>
</div> </div>
<div class="editor-option">
<label class="small">Graphite PNG <tip>server side</tip></label>
<input type="radio" class="input-small" ng-model="ctrl.panel.renderer" value="png" ng-change="ctr.refresh()" />
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<h5>Tooltip</h5> <h5 class="section-heading">Multiple Series</h5>
<editor-opt-bool <div class="gf-form">
text="All series" model="ctrl.panel.tooltip.shared" change="ctrl.render()" <label class="gf-form-label width-7">Stack</label>
tip="Show all series on same tooltip and a x croshair to help follow all series"> <editor-checkbox text="Enable" model="ctrl.panel.stack" change="ctrl.render()"></editor-checkbox>
</editor-opt-bool> </div>
<div class="editor-option" ng-show="ctrl.panel.stack"> <div class="gf-form" ng-show="ctrl.panel.stack">
<label class="small">Stacked Values <tip>How should the values in stacked charts to be calculated?</tip></label> <label class="gf-form-label width-7">Percent</label>
<select class="input-small" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select> <editor-checkbox text="Enable" model="ctrl.panel.percent" change="ctrl.render()"></editor-checkbox>
</div>
<div class="gf-form" ng-show="ctrl.panel.stack">
<label class="gf-form-label width-7">Tooltip value</label>
<div class="gf-form-select-wrapper max-width-8">
<select class="gf-form-input" ng-model="ctrl.panel.tooltip.value_type" ng-options="f for f in ['cumulative','individual']" ng-change="ctrl.render()"></select>
</div>
</div> </div>
</div> </div>
</div>
</div>
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
......
public/app/plugins/panel/graph/module.html → public/app/plugins/panel/graph/template.ts
var template = `
<div class="graph-wrapper" ng-class="{'graph-legend-rightside': ctrl.panel.legend.rightSide}"> <div class="graph-wrapper" ng-class="{'graph-legend-rightside': ctrl.panel.legend.rightSide}">
<div class="graph-canvas-wrapper"> <div class="graph-canvas-wrapper">
...@@ -5,7 +6,10 @@ ...@@ -5,7 +6,10 @@
<span class="small" ng-show="!datapointsCount"> <span class="small" ng-show="!datapointsCount">
No datapoints <tip>No datapoints returned from metric query</tip> No datapoints <tip>No datapoints returned from metric query</tip>
</span> </span>
<span class="small" ng-show="datapointsOutside">Datapoints outside time range <tip>Can be caused by timezone mismatch between browser and graphite server</tip></span> <span class="small" ng-show="datapointsOutside">
Datapoints outside time range
<tip>Can be caused by timezone mismatch between browser and graphite server</tip>
</span>
</div> </div>
<div grafana-graph class="histogram-chart" ng-dblclick="ctrl.zoomOut()"> <div grafana-graph class="histogram-chart" ng-dblclick="ctrl.zoomOut()">
...@@ -13,10 +17,12 @@ ...@@ -13,10 +17,12 @@
</div> </div>
<div class="graph-legend-wrapper" ng-if="ctrl.panel.legend.show" graph-legend></div> <div class="graph-legend-wrapper" graph-legend></div>
</div> </div>
<div class="clearfix"></div> <div class="clearfix"></div>
`;
export default template;
public/app/plugins/panel/text/module.ts
...@@ -12,7 +12,7 @@ var panelDefaults = { ...@@ -12,7 +12,7 @@ var panelDefaults = {
export class TextPanelCtrl extends PanelCtrl { export class TextPanelCtrl extends PanelCtrl {
static templateUrl = `public/app/plugins/panel/text/module.html`; static templateUrl = `public/app/plugins/panel/text/module.html`;
converter: any; remarkable: any;
content: string; content: string;
/** @ngInject */ /** @ngInject */
...@@ -54,21 +54,16 @@ export class TextPanelCtrl extends PanelCtrl { ...@@ -54,21 +54,16 @@ export class TextPanelCtrl extends PanelCtrl {
} }
renderMarkdown(content) { renderMarkdown(content) {
var text = content if (!this.remarkable) {
.replace(/&/g, '&amp;')
.replace(/>/g, '&gt;')
.replace(/</g, '&lt;');
if (this.converter) {
this.updateContent(this.converter.makeHtml(text));
} else {
return System.import('remarkable').then(Remarkable => { return System.import('remarkable').then(Remarkable => {
var md = new Remarkable(); this.remarkable = new Remarkable();
this.$scope.$apply(() => { this.$scope.$apply(() => {
this.updateContent(md.render(text)); this.updateContent(this.remarkable.render(content));
}); });
}); });
} }
this.updateContent(this.remarkable.render(content));
} }
updateContent(html) { updateContent(html) {
......
public/sass/_variables.dark.scss
...@@ -126,17 +126,17 @@ $btn-primary-bg-hl: lighten($brand-primary, 8%); ...@@ -126,17 +126,17 @@ $btn-primary-bg-hl: lighten($brand-primary, 8%);
$btn-secondary-bg: $blue-dark; $btn-secondary-bg: $blue-dark;
$btn-secondary-bg-hl: lighten($blue-dark, 3%); $btn-secondary-bg-hl: lighten($blue-dark, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-success-bg: lighten($green, 3%); $btn-success-bg: lighten($green, 3%);
$btn-success-bg-hl: darken($green, 3%);
$btn-warning-bg: $brand-warning; $btn-warning-bg: $brand-warning;
$btn-warning-bg-hl: lighten($brand-warning, 8%); $btn-warning-bg-hl: lighten($brand-warning, 8%);
$btn-danger-bg: lighten($red, 3%); $btn-danger-bg: $red;
$btn-danger-bg-hl: darken($red, 3%); $btn-danger-bg-hl: lighten($red, 5%);
$btn-inverse-bg: $dark-3; $btn-inverse-bg: $dark-3;
$btn-inverse-bg-hl: lighten($dark-3, 1%); $btn-inverse-bg-hl: lighten($dark-3, 4%);
$btn-inverse-text-color: $link-color; $btn-inverse-text-color: $link-color;
$btn-link-color: $gray-3; $btn-link-color: $gray-3;
......
public/sass/_variables.scss
...@@ -161,7 +161,7 @@ $table-sm-cell-padding: .3rem !default; ...@@ -161,7 +161,7 @@ $table-sm-cell-padding: .3rem !default;
// Forms // Forms
$input-padding-x: .75rem !default; $input-padding-x: .75rem !default;
$input-padding-y: .6rem !default; $input-padding-y: .6rem !default;
$input-line-height: 1.35rem !default; $input-line-height: 1.42rem !default;
$input-btn-border-width: 1px; $input-btn-border-width: 1px;
$input-border-radius: 0 $border-radius $border-radius 0 !default; $input-border-radius: 0 $border-radius $border-radius 0 !default;
...@@ -216,7 +216,7 @@ $btn-padding-y-sm: .25rem !default; ...@@ -216,7 +216,7 @@ $btn-padding-y-sm: .25rem !default;
$btn-padding-x-lg: 1.5rem !default; $btn-padding-x-lg: 1.5rem !default;
$btn-padding-y-lg: .75rem !default; $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 3px; $btn-border-radius: 2px;
// sidemenu // sidemenu
$side-menu-width: 14rem; $side-menu-width: 14rem;
......
public/sass/components/_buttons.scss
...@@ -95,8 +95,9 @@ ...@@ -95,8 +95,9 @@
// Inverse appears as dark gray // Inverse appears as dark gray
.btn-inverse { .btn-inverse {
@include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color);
box-shadow: none; //background: $card-background;
border: 1px solid $tight-form-func-highlight-bg; box-shadow: $card-shadow;
//border: 1px solid $tight-form-func-highlight-bg;
} }
.btn-outline-primary { .btn-outline-primary {
......
public/sass/components/_cards.scss
...@@ -58,13 +58,21 @@ ...@@ -58,13 +58,21 @@
&:hover { &:hover {
background: $card-background-hover; background: $card-background-hover;
} }
.label-tag {
margin-left: 6px;
font-size: 11px;
padding: 2px 6px;
}
} }
.card-item-body { .card-item-body {
display: flex; display: flex;
overflow: hidden;
} }
.card-item-details { .card-item-details {
overflow: hidden;
} }
.card-item-header { .card-item-header {
...@@ -77,10 +85,16 @@ ...@@ -77,10 +85,16 @@
.card-item-name { .card-item-name {
color: $headings-color; color: $headings-color;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
} }
.card-item-sub-name { .card-item-sub-name {
color: $text-color-weak; color: $text-color-weak;
overflow: hidden;
text-overflow: ellipsis;
width: 100%;
} }
.card-list-layout-grid { .card-list-layout-grid {
......
public/sass/components/_gf-form.scss
...@@ -139,6 +139,10 @@ $gf-form-label-margin: 0.25rem; ...@@ -139,6 +139,10 @@ $gf-form-label-margin: 0.25rem;
} }
} }
.gf-form-select-wrapper + .gf-form-select-wrapper {
margin-left: $gf-form-label-margin;
}
.gf-form-btn { .gf-form-btn {
padding: $input-padding-y $input-padding-x; padding: $input-padding-y $input-padding-x;
line-height: $input-line-height; line-height: $input-line-height;
......
public/sass/mixins/_mixins.scss
...@@ -282,8 +282,7 @@ ...@@ -282,8 +282,7 @@
color: $text-color; color: $text-color;
text-shadow: $textShadow; text-shadow: $textShadow;
@include gradient-vertical($primaryColor, $secondaryColor); @include gradient-vertical($primaryColor, $secondaryColor);
border-color: $secondaryColor $secondaryColor darken($secondaryColor, 15%); border-color: $primaryColor;
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%);
} }
// Gradients // Gradients
......
public/test/specs/templateSrv-specs.js
...@@ -135,6 +135,11 @@ define([ ...@@ -135,6 +135,11 @@ define([
expect(result).to.be('test|test2'); expect(result).to.be('test|test2');
}); });
it('slash should be properly escaped in regex format', function() {
var result = _templateSrv.formatValue('Gi3/14', 'regex');
expect(result).to.be('Gi3\\/14');
});
}); });
describe('can check if variable exists', function() { describe('can check if variable exists', function() {
......
tslint.json
{ {
"rules": { "rules": {
"class-name": true, "class-name": true,
"comment-format": [true, "check-space"], "comment-format": [false, "check-space"],
"curly": true, "curly": true,
"eofline": true, "eofline": true,
"forin": false, "forin": false,
......
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