diff --git a/.gitignore b/.gitignore index 05ae4907e89..d599f762840 100644 --- a/.gitignore +++ b/.gitignore @@ -76,3 +76,4 @@ debug.test /devenv/bulk_alerting_dashboards/*.json /scripts/build/release_publisher/release_publisher +*.patch diff --git a/CHANGELOG.md b/CHANGELOG.md index afde0874f87..e5fceb28265 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -8,24 +8,31 @@ * **MySQL**: Support connecting thru Unix socket for MySQL datasource [#12342](https://github.com/grafana/grafana/issues/12342), thx [@Yukinoshita-Yukino](https://github.com/Yukinoshita-Yukino) * **MSSQL**: Add encrypt setting to allow configuration of how data sent between client and server are encrypted [#13629](https://github.com/grafana/grafana/issues/13629), thx [@ramiro](https://github.com/ramiro) * **Stackdriver**: Not possible to authenticate using GCE metadata server [#13669](https://github.com/grafana/grafana/issues/13669) +* **Teams**: Team preferences (theme, home dashboard, timezone) support [#12550](https://github.com/grafana/grafana/issues/12550) ### Minor * **Cloudwatch**: Show all available CloudWatch regions [#12308](https://github.com/grafana/grafana/issues/12308), thx [@mtanda](https://github.com/mtanda) * **Cloudwatch**: AWS/Connect metrics and dimensions [#13970](https://github.com/grafana/grafana/pull/13970), thx [@zcoffy](https://github.com/zcoffy) * **Postgres**: Add delta window function to postgres query builder [#13925](https://github.com/grafana/grafana/issues/13925), thx [svenklemm](https://github.com/svenklemm) -* **Units**: New clock time format, to format ms or second values as for example `01h:59m`, [#13635](https://github.com/grafana/grafana/issues/13635), thx [@franciscocpg](https://github.com/franciscocpg) -* **Datasource Proxy**: Keep trailing slash for datasource proxy requests [#13326](https://github.com/grafana/grafana/pull/13326), thx [@ryantxu](https://github.com/ryantxu) -* **DingDing**: Can't receive DingDing alert when alert is triggered [#13723](https://github.com/grafana/grafana/issues/13723), thx [@Yukinoshita-Yukino](https://github.com/Yukinoshita-Yukino) -* **Internal metrics**: Renamed `grafana_info` to `grafana_build_info` and added branch, goversion and revision [#13876](https://github.com/grafana/grafana/pull/13876) -* **Alerting**: Increaste default duration for queries [#13945](https://github.com/grafana/grafana/pull/13945) +* **Elasticsearch**: Fix switching to/from es raw document metric query [#6367](https://github.com/grafana/grafana/issues/6367) +* **Elasticsearch**: Fix deprecation warning about terms aggregation order key in Elasticsearch 6.x [#11977](https://github.com/grafana/grafana/issues/11977) * **Table**: Fix CSS alpha background-color applied twice in table cell with link [#13606](https://github.com/grafana/grafana/issues/13606), thx [@grisme](https://github.com/grisme) +* **Units**: New clock time format, to format ms or second values as for example `01h:59m`, [#13635](https://github.com/grafana/grafana/issues/13635), thx [@franciscocpg](https://github.com/franciscocpg) +* **Alerting**: Increaste default duration for queries [#13945](https://github.com/grafana/grafana/pull/13945) * **Alerting**: More options for the Slack Alert notifier [#13993](https://github.com/grafana/grafana/issues/13993), thx [@andreykaipov](https://github.com/andreykaipov) +* **Alerting**: Can't receive DingDing alert when alert is triggered [#13723](https://github.com/grafana/grafana/issues/13723), thx [@Yukinoshita-Yukino](https://github.com/Yukinoshita-Yukino) +* **Internal metrics**: Renamed `grafana_info` to `grafana_build_info` and added branch, goversion and revision [#13876](https://github.com/grafana/grafana/pull/13876) +* **Datasource Proxy**: Keep trailing slash for datasource proxy requests [#13326](https://github.com/grafana/grafana/pull/13326), thx [@ryantxu](https://github.com/ryantxu) ### Breaking changes * Postgres/MySQL/MSSQL datasources now per default uses `max open connections` = `unlimited` (earlier 10), `max idle connections` = `2` (earlier 10) and `connection max lifetime` = `4` hours (earlier unlimited) +# 5.3.5 (unreleased) + +* **Security**: Upgrade macaron session package to fix security issue. [#14043](https://github.com/grafana/grafana/pull/14043) + # 5.3.4 (2018-11-13) * **Alerting**: Delete alerts when parent folder was deleted [#13322](https://github.com/grafana/grafana/issues/13322) diff --git a/docs/sources/http_api/team.md b/docs/sources/http_api/team.md index 94ea4108481..5024ec69522 100644 --- a/docs/sources/http_api/team.md +++ b/docs/sources/http_api/team.md @@ -30,7 +30,7 @@ Authorization: Basic YWRtaW46YWRtaW4= ### Using the query parameter -Default value for the `perpage` parameter is `1000` and for the `page` parameter is `1`. +Default value for the `perpage` parameter is `1000` and for the `page` parameter is `1`. The `totalCount` field in the response can be used for pagination of the teams list E.g. if `totalCount` is equal to 100 teams and the `perpage` parameter is set to 10 then there are 10 pages of teams. @@ -314,3 +314,67 @@ Status Codes: - **401** - Unauthorized - **403** - Permission denied - **404** - Team not found/Team member not found + +## Get Team Preferences + +`GET /api/teams/:teamId/preferences` + +**Example Request**: + +```http +GET /api/teams/2/preferences HTTP/1.1 +Accept: application/json +Content-Type: application/json +Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk +``` + +**Example Response**: + +```http +HTTP/1.1 200 +Content-Type: application/json + +{ + "theme": "", + "homeDashboardId": 0, + "timezone": "" +} +``` + +## Update Team Preferences + +`PUT /api/teams/:teamId/preferences` + +**Example Request**: + +```http +PUT /api/teams/2/preferences HTTP/1.1 +Accept: application/json +Content-Type: application/json +Authorization: Bearer eyJrIjoiT0tTcG1pUlY2RnVKZTFVaDFsNFZXdE9ZWmNrMkZYbk + +{ + "theme": "dark", + "homeDashboardId": 39, + "timezone": "utc" +} +``` + +JSON Body Schema: + +- **theme** - One of: ``light``, ``dark``, or an empty string for the default theme +- **homeDashboardId** - The numerical ``:id`` of a dashboard, default: ``0`` +- **timezone** - One of: ``utc``, ``browser``, or an empty string for the default + +Omitting a key will cause the current value to be replaced with the system default value. + +**Example Response**: + +```http +HTTP/1.1 200 +Content-Type: text/plain; charset=utf-8 + +{ + "message":"Preferences updated" +} +``` diff --git a/package.json b/package.json index 68b7647fb58..452e4ecb742 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,9 @@ "@types/enzyme": "^3.1.13", "@types/jest": "^23.3.2", "@types/node": "^8.0.31", - "@types/react": "^16.4.14", + "@types/react": "^16.7.6", "@types/react-custom-scrollbars": "^4.0.5", - "@types/react-dom": "^16.0.7", + "@types/react-dom": "^16.0.9", "@types/react-select": "^2.0.4", "angular-mocks": "1.6.6", "autoprefixer": "^6.4.0", @@ -152,17 +152,18 @@ "prismjs": "^1.6.0", "prop-types": "^15.6.2", "rc-cascader": "^0.14.0", - "react": "^16.5.0", + "react": "^16.6.3", "react-custom-scrollbars": "^4.2.1", - "react-dom": "^16.5.0", + "react-dom": "^16.6.3", "react-grid-layout": "0.16.6", "react-highlight-words": "^0.10.0", - "react-popper": "^0.7.5", + "react-popper": "^1.3.0", "react-redux": "^5.0.7", "react-select": "2.1.0", "react-sizeme": "^2.3.6", "react-table": "^6.8.6", "react-transition-group": "^2.2.1", + "react-virtualized": "^9.21.0", "redux": "^4.0.0", "redux-logger": "^3.0.6", "redux-thunk": "^2.3.0", @@ -179,6 +180,7 @@ "tslint-react": "^3.6.0" }, "resolutions": { - "caniuse-db": "1.0.30000772" + "caniuse-db": "1.0.30000772", + "**/@types/react": "16.7.6" } } diff --git a/pkg/api/api.go b/pkg/api/api.go index f1fe940e416..c372debdb72 100644 --- a/pkg/api/api.go +++ b/pkg/api/api.go @@ -155,6 +155,8 @@ func (hs *HTTPServer) registerRoutes() { teamsRoute.Get("/:teamId/members", Wrap(GetTeamMembers)) teamsRoute.Post("/:teamId/members", bind(m.AddTeamMemberCommand{}), Wrap(AddTeamMember)) teamsRoute.Delete("/:teamId/members/:userId", Wrap(RemoveTeamMember)) + teamsRoute.Get("/:teamId/preferences", Wrap(GetTeamPreferences)) + teamsRoute.Put("/:teamId/preferences", bind(dtos.UpdatePrefsCmd{}), Wrap(UpdateTeamPreferences)) }, reqOrgAdmin) // team without requirement of user to be org admin @@ -242,7 +244,7 @@ func (hs *HTTPServer) registerRoutes() { apiRoute.Get("/datasources/id/:name", Wrap(GetDataSourceIdByName), reqSignedIn) - apiRoute.Get("/plugins", Wrap(GetPluginList)) + apiRoute.Get("/plugins", Wrap(hs.GetPluginList)) apiRoute.Get("/plugins/:pluginId/settings", Wrap(GetPluginSettingByID)) apiRoute.Get("/plugins/:pluginId/markdown/:name", Wrap(GetPluginMarkdown)) diff --git a/pkg/api/dashboard.go b/pkg/api/dashboard.go index 02248334b9c..6abb72f1559 100644 --- a/pkg/api/dashboard.go +++ b/pkg/api/dashboard.go @@ -293,7 +293,7 @@ func PostDashboard(c *m.ReqContext, cmd m.SaveDashboardCommand) Response { } func GetHomeDashboard(c *m.ReqContext) Response { - prefsQuery := m.GetPreferencesWithDefaultsQuery{OrgId: c.OrgId, UserId: c.UserId} + prefsQuery := m.GetPreferencesWithDefaultsQuery{User: c.SignedInUser} if err := bus.Dispatch(&prefsQuery); err != nil { return Error(500, "Failed to get preferences", err) } diff --git a/pkg/api/dtos/plugins.go b/pkg/api/dtos/plugins.go index 78a611c5eeb..edc9d96d1ac 100644 --- a/pkg/api/dtos/plugins.go +++ b/pkg/api/dtos/plugins.go @@ -19,9 +19,9 @@ type PluginSetting struct { JsonData map[string]interface{} `json:"jsonData"` DefaultNavUrl string `json:"defaultNavUrl"` - LatestVersion string `json:"latestVersion"` - HasUpdate bool `json:"hasUpdate"` - State string `json:"state"` + LatestVersion string `json:"latestVersion"` + HasUpdate bool `json:"hasUpdate"` + State plugins.PluginState `json:"state"` } type PluginListItem struct { @@ -34,7 +34,7 @@ type PluginListItem struct { LatestVersion string `json:"latestVersion"` HasUpdate bool `json:"hasUpdate"` DefaultNavUrl string `json:"defaultNavUrl"` - State string `json:"state"` + State plugins.PluginState `json:"state"` } type PluginList []PluginListItem diff --git a/pkg/api/frontendsettings.go b/pkg/api/frontendsettings.go index 1de65c7b2ce..65affe83e98 100644 --- a/pkg/api/frontendsettings.go +++ b/pkg/api/frontendsettings.go @@ -133,7 +133,7 @@ func (hs *HTTPServer) getFrontendSettingsMap(c *m.ReqContext) (map[string]interf panels := map[string]interface{}{} for _, panel := range enabledPlugins.Panels { - if panel.State == "alpha" && !hs.Cfg.EnableAlphaPanels { + if panel.State == plugins.PluginStateAlpha && !hs.Cfg.EnableAlphaPanels { continue } diff --git a/pkg/api/index.go b/pkg/api/index.go index fe7c9e79a17..253fa9c17af 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -23,7 +23,7 @@ func (hs *HTTPServer) setIndexViewData(c *m.ReqContext) (*dtos.IndexViewData, er return nil, err } - prefsQuery := m.GetPreferencesWithDefaultsQuery{OrgId: c.OrgId, UserId: c.UserId} + prefsQuery := m.GetPreferencesWithDefaultsQuery{User: c.SignedInUser} if err := bus.Dispatch(&prefsQuery); err != nil { return nil, err } diff --git a/pkg/api/plugins.go b/pkg/api/plugins.go index 4b44009ab8c..455420e4688 100644 --- a/pkg/api/plugins.go +++ b/pkg/api/plugins.go @@ -10,7 +10,7 @@ import ( "github.com/grafana/grafana/pkg/setting" ) -func GetPluginList(c *m.ReqContext) Response { +func (hs *HTTPServer) GetPluginList(c *m.ReqContext) Response { typeFilter := c.Query("type") enabledFilter := c.Query("enabled") embeddedFilter := c.Query("embedded") @@ -39,6 +39,10 @@ func GetPluginList(c *m.ReqContext) Response { continue } + if pluginDef.State == plugins.PluginStateAlpha && !hs.Cfg.EnableAlphaPanels { + continue + } + listItem := dtos.PluginListItem{ Id: pluginDef.Id, Name: pluginDef.Name, diff --git a/pkg/api/preferences.go b/pkg/api/preferences.go index 26695130975..9b451aa2a6e 100644 --- a/pkg/api/preferences.go +++ b/pkg/api/preferences.go @@ -21,11 +21,11 @@ func SetHomeDashboard(c *m.ReqContext, cmd m.SavePreferencesCommand) Response { // GET /api/user/preferences func GetUserPreferences(c *m.ReqContext) Response { - return getPreferencesFor(c.OrgId, c.UserId) + return getPreferencesFor(c.OrgId, c.UserId, 0) } -func getPreferencesFor(orgID int64, userID int64) Response { - prefsQuery := m.GetPreferencesQuery{UserId: userID, OrgId: orgID} +func getPreferencesFor(orgID, userID, teamID int64) Response { + prefsQuery := m.GetPreferencesQuery{UserId: userID, OrgId: orgID, TeamId: teamID} if err := bus.Dispatch(&prefsQuery); err != nil { return Error(500, "Failed to get preferences", err) @@ -42,13 +42,14 @@ func getPreferencesFor(orgID int64, userID int64) Response { // PUT /api/user/preferences func UpdateUserPreferences(c *m.ReqContext, dtoCmd dtos.UpdatePrefsCmd) Response { - return updatePreferencesFor(c.OrgId, c.UserId, &dtoCmd) + return updatePreferencesFor(c.OrgId, c.UserId, 0, &dtoCmd) } -func updatePreferencesFor(orgID int64, userID int64, dtoCmd *dtos.UpdatePrefsCmd) Response { +func updatePreferencesFor(orgID, userID, teamId int64, dtoCmd *dtos.UpdatePrefsCmd) Response { saveCmd := m.SavePreferencesCommand{ UserId: userID, OrgId: orgID, + TeamId: teamId, Theme: dtoCmd.Theme, Timezone: dtoCmd.Timezone, HomeDashboardId: dtoCmd.HomeDashboardID, @@ -63,10 +64,10 @@ func updatePreferencesFor(orgID int64, userID int64, dtoCmd *dtos.UpdatePrefsCmd // GET /api/org/preferences func GetOrgPreferences(c *m.ReqContext) Response { - return getPreferencesFor(c.OrgId, 0) + return getPreferencesFor(c.OrgId, 0, 0) } // PUT /api/org/preferences func UpdateOrgPreferences(c *m.ReqContext, dtoCmd dtos.UpdatePrefsCmd) Response { - return updatePreferencesFor(c.OrgId, 0, &dtoCmd) + return updatePreferencesFor(c.OrgId, 0, 0, &dtoCmd) } diff --git a/pkg/api/team.go b/pkg/api/team.go index ebb426c4c82..32265e5d018 100644 --- a/pkg/api/team.go +++ b/pkg/api/team.go @@ -96,3 +96,13 @@ func GetTeamByID(c *m.ReqContext) Response { query.Result.AvatarUrl = dtos.GetGravatarUrlWithDefault(query.Result.Email, query.Result.Name) return JSON(200, &query.Result) } + +// GET /api/teams/:teamId/preferences +func GetTeamPreferences(c *m.ReqContext) Response { + return getPreferencesFor(c.OrgId, 0, c.ParamsInt64(":teamId")) +} + +// PUT /api/teams/:teamId/preferences +func UpdateTeamPreferences(c *m.ReqContext, dtoCmd dtos.UpdatePrefsCmd) Response { + return updatePreferencesFor(c.OrgId, 0, c.ParamsInt64(":teamId"), &dtoCmd) +} diff --git a/pkg/models/preferences.go b/pkg/models/preferences.go index 4c77bc96d4d..c73e0be4949 100644 --- a/pkg/models/preferences.go +++ b/pkg/models/preferences.go @@ -14,6 +14,7 @@ type Preferences struct { Id int64 OrgId int64 UserId int64 + TeamId int64 Version int HomeDashboardId int64 Timezone string @@ -29,14 +30,13 @@ type GetPreferencesQuery struct { Id int64 OrgId int64 UserId int64 + TeamId int64 Result *Preferences } type GetPreferencesWithDefaultsQuery struct { - Id int64 - OrgId int64 - UserId int64 + User *SignedInUser Result *Preferences } @@ -46,6 +46,7 @@ type GetPreferencesWithDefaultsQuery struct { type SavePreferencesCommand struct { UserId int64 OrgId int64 + TeamId int64 HomeDashboardId int64 `json:"homeDashboardId"` Timezone string `json:"timezone"` diff --git a/pkg/plugins/models.go b/pkg/plugins/models.go index 9677c21ef04..5ac436205c1 100644 --- a/pkg/plugins/models.go +++ b/pkg/plugins/models.go @@ -17,6 +17,13 @@ var ( PluginTypeDashboard = "dashboard" ) +type PluginState string + +var ( + PluginStateAlpha PluginState = "alpha" + PluginStateBeta PluginState = "beta" +) + type PluginNotFoundError struct { PluginId string } @@ -39,7 +46,7 @@ type PluginBase struct { Module string `json:"module"` BaseUrl string `json:"baseUrl"` HideFromList bool `json:"hideFromList,omitempty"` - State string `json:"state,omitempty"` + State PluginState `json:"state,omitempty"` IncludedInAppId string `json:"-"` PluginDir string `json:"-"` diff --git a/pkg/services/sqlstore/migrations/preferences_mig.go b/pkg/services/sqlstore/migrations/preferences_mig.go index b3822fe5239..d8134f11f79 100644 --- a/pkg/services/sqlstore/migrations/preferences_mig.go +++ b/pkg/services/sqlstore/migrations/preferences_mig.go @@ -34,4 +34,13 @@ func addPreferencesMigrations(mg *Migrator) { {Name: "timezone", Type: DB_NVarchar, Length: 50, Nullable: false}, {Name: "theme", Type: DB_NVarchar, Length: 20, Nullable: false}, })) + + mg.AddMigration("Add column team_id in preferences", NewAddColumnMigration(preferencesV2, &Column{ + Name: "team_id", Type: DB_BigInt, Nullable: true, + })) + + mg.AddMigration("Update team_id column values in preferences", NewRawSqlMigration(""). + Sqlite("UPDATE preferences SET team_id=0 WHERE team_id IS NULL;"). + Postgres("UPDATE preferences SET team_id=0 WHERE team_id IS NULL;"). + Mysql("UPDATE preferences SET team_id=0 WHERE team_id IS NULL;")) } diff --git a/pkg/services/sqlstore/preferences.go b/pkg/services/sqlstore/preferences.go index 04e787971d9..858a2c77075 100644 --- a/pkg/services/sqlstore/preferences.go +++ b/pkg/services/sqlstore/preferences.go @@ -1,6 +1,7 @@ package sqlstore import ( + "strings" "time" "github.com/grafana/grafana/pkg/bus" @@ -16,11 +17,22 @@ func init() { } func GetPreferencesWithDefaults(query *m.GetPreferencesWithDefaultsQuery) error { - + params := make([]interface{}, 0) + filter := "" + if len(query.User.Teams) > 0 { + filter = "(org_id=? AND team_id IN (?" + strings.Repeat(",?", len(query.User.Teams)-1) + ")) OR " + params = append(params, query.User.OrgId) + for _, v := range query.User.Teams { + params = append(params, v) + } + } + filter += "(org_id=? AND user_id=? AND team_id=0) OR (org_id=? AND team_id=0 AND user_id=0)" + params = append(params, query.User.OrgId) + params = append(params, query.User.UserId) + params = append(params, query.User.OrgId) prefs := make([]*m.Preferences, 0) - filter := "(org_id=? AND user_id=?) OR (org_id=? AND user_id=0)" - err := x.Where(filter, query.OrgId, query.UserId, query.OrgId). - OrderBy("user_id ASC"). + err := x.Where(filter, params...). + OrderBy("user_id ASC, team_id ASC"). Find(&prefs) if err != nil { @@ -50,9 +62,8 @@ func GetPreferencesWithDefaults(query *m.GetPreferencesWithDefaultsQuery) error } func GetPreferences(query *m.GetPreferencesQuery) error { - var prefs m.Preferences - exists, err := x.Where("org_id=? AND user_id=?", query.OrgId, query.UserId).Get(&prefs) + exists, err := x.Where("org_id=? AND user_id=? AND team_id=?", query.OrgId, query.UserId, query.TeamId).Get(&prefs) if err != nil { return err @@ -71,7 +82,7 @@ func SavePreferences(cmd *m.SavePreferencesCommand) error { return inTransaction(func(sess *DBSession) error { var prefs m.Preferences - exists, err := sess.Where("org_id=? AND user_id=?", cmd.OrgId, cmd.UserId).Get(&prefs) + exists, err := sess.Where("org_id=? AND user_id=? AND team_id=?", cmd.OrgId, cmd.UserId, cmd.TeamId).Get(&prefs) if err != nil { return err } @@ -80,6 +91,7 @@ func SavePreferences(cmd *m.SavePreferencesCommand) error { prefs = m.Preferences{ UserId: cmd.UserId, OrgId: cmd.OrgId, + TeamId: cmd.TeamId, HomeDashboardId: cmd.HomeDashboardId, Timezone: cmd.Timezone, Theme: cmd.Theme, diff --git a/pkg/services/sqlstore/preferences_test.go b/pkg/services/sqlstore/preferences_test.go new file mode 100644 index 00000000000..f9a839bf5a7 --- /dev/null +++ b/pkg/services/sqlstore/preferences_test.go @@ -0,0 +1,91 @@ +package sqlstore + +import ( + "testing" + + . "github.com/smartystreets/goconvey/convey" + + "github.com/grafana/grafana/pkg/models" + "github.com/grafana/grafana/pkg/setting" +) + +func TestPreferencesDataAccess(t *testing.T) { + Convey("Testing preferences data access", t, func() { + InitTestDB(t) + + Convey("GetPreferencesWithDefaults with no saved preferences should return defaults", func() { + query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{}} + err := GetPreferencesWithDefaults(query) + So(err, ShouldBeNil) + So(query.Result.Theme, ShouldEqual, setting.DefaultTheme) + So(query.Result.Timezone, ShouldEqual, "browser") + So(query.Result.HomeDashboardId, ShouldEqual, 0) + }) + + Convey("GetPreferencesWithDefaults with saved org and user home dashboard should return user home dashboard", func() { + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, UserId: 1, HomeDashboardId: 4}) + + query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, UserId: 1}} + err := GetPreferencesWithDefaults(query) + So(err, ShouldBeNil) + So(query.Result.HomeDashboardId, ShouldEqual, 4) + }) + + Convey("GetPreferencesWithDefaults with saved org and other user home dashboard should return org home dashboard", func() { + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, UserId: 1, HomeDashboardId: 4}) + + query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, UserId: 2}} + err := GetPreferencesWithDefaults(query) + So(err, ShouldBeNil) + So(query.Result.HomeDashboardId, ShouldEqual, 1) + }) + + Convey("GetPreferencesWithDefaults with saved org and teams home dashboard should return last team home dashboard", func() { + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 2, HomeDashboardId: 2}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 3, HomeDashboardId: 3}) + + query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, Teams: []int64{2, 3}}} + err := GetPreferencesWithDefaults(query) + So(err, ShouldBeNil) + So(query.Result.HomeDashboardId, ShouldEqual, 3) + }) + + Convey("GetPreferencesWithDefaults with saved org and other teams home dashboard should return org home dashboard", func() { + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 2, HomeDashboardId: 2}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 3, HomeDashboardId: 3}) + + query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1}} + err := GetPreferencesWithDefaults(query) + So(err, ShouldBeNil) + So(query.Result.HomeDashboardId, ShouldEqual, 1) + }) + + Convey("GetPreferencesWithDefaults with saved org, teams and user home dashboard should return user home dashboard", func() { + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 2, HomeDashboardId: 2}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 3, HomeDashboardId: 3}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, UserId: 1, HomeDashboardId: 4}) + + query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, UserId: 1, Teams: []int64{2, 3}}} + err := GetPreferencesWithDefaults(query) + So(err, ShouldBeNil) + So(query.Result.HomeDashboardId, ShouldEqual, 4) + }) + + Convey("GetPreferencesWithDefaults with saved org, other teams and user home dashboard should return org home dashboard", func() { + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, HomeDashboardId: 1}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 2, HomeDashboardId: 2}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, TeamId: 3, HomeDashboardId: 3}) + SavePreferences(&models.SavePreferencesCommand{OrgId: 1, UserId: 1, HomeDashboardId: 4}) + + query := &models.GetPreferencesWithDefaultsQuery{User: &models.SignedInUser{OrgId: 1, UserId: 2}} + err := GetPreferencesWithDefaults(query) + So(err, ShouldBeNil) + So(query.Result.HomeDashboardId, ShouldEqual, 1) + }) + }) +} diff --git a/public/app/core/actions/user.ts b/public/app/core/actions/user.ts deleted file mode 100644 index dba0588c058..00000000000 --- a/public/app/core/actions/user.ts +++ /dev/null @@ -1,28 +0,0 @@ -import { ThunkAction } from 'redux-thunk'; -import { getBackendSrv } from '../services/backend_srv'; -import { DashboardAcl, DashboardSearchHit, StoreState } from '../../types'; - -type ThunkResult = ThunkAction; - -export type Action = LoadStarredDashboardsAction; - -export enum ActionTypes { - LoadStarredDashboards = 'LOAD_STARRED_DASHBOARDS', -} - -interface LoadStarredDashboardsAction { - type: ActionTypes.LoadStarredDashboards; - payload: DashboardSearchHit[]; -} - -const starredDashboardsLoaded = (dashboards: DashboardAcl[]) => ({ - type: ActionTypes.LoadStarredDashboards, - payload: dashboards, -}); - -export function loadStarredDashboards(): ThunkResult { - return async dispatch => { - const starredDashboards = await getBackendSrv().search({ starred: true }); - dispatch(starredDashboardsLoaded(starredDashboards)); - }; -} diff --git a/public/app/core/components/Animations/FadeIn.tsx b/public/app/core/components/Animations/FadeIn.tsx new file mode 100644 index 00000000000..98eb3b682c0 --- /dev/null +++ b/public/app/core/components/Animations/FadeIn.tsx @@ -0,0 +1,37 @@ +import React, { SFC } from 'react'; +import Transition from 'react-transition-group/Transition'; + +interface Props { + duration: number; + children: JSX.Element; + in: boolean; +} + +export const FadeIn: SFC = props => { + const defaultStyle = { + transition: `opacity ${props.duration}ms linear`, + opacity: 0, + }; + + const transitionStyles = { + exited: { opacity: 0, display: 'none' }, + entering: { opacity: 0 }, + entered: { opacity: 1 }, + exiting: { opacity: 0 }, + }; + + return ( + + {state => ( +
+ {props.children} +
+ )} + + ); +}; diff --git a/public/app/core/components/Animations/SlideDown.tsx b/public/app/core/components/Animations/SlideDown.tsx index 70dacd73849..6e8995298dc 100644 --- a/public/app/core/components/Animations/SlideDown.tsx +++ b/public/app/core/components/Animations/SlideDown.tsx @@ -23,7 +23,7 @@ export default ({ children, in: inProp, maxHeight = defaultMaxHeight, style = de const transitionStyles = { exited: { maxHeight: 0 }, entering: { maxHeight: maxHeight }, - entered: { maxHeight: maxHeight, overflow: 'visible' }, + entered: { maxHeight: 'unset', overflow: 'visible' }, exiting: { maxHeight: 0 }, }; diff --git a/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx b/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx new file mode 100644 index 00000000000..63191862ebb --- /dev/null +++ b/public/app/core/components/ClickOutsideWrapper/ClickOutsideWrapper.tsx @@ -0,0 +1,36 @@ +import { PureComponent } from 'react'; +import ReactDOM from 'react-dom'; + +export interface Props { + onClick: () => void; +} + +interface State { + hasEventListener: boolean; +} + +export class ClickOutsideWrapper extends PureComponent { + state = { + hasEventListener: false, + }; + + componentDidMount() { + window.addEventListener('click', this.onOutsideClick, false); + } + + componentWillUnmount() { + window.removeEventListener('click', this.onOutsideClick, false); + } + + onOutsideClick = event => { + const domNode = ReactDOM.findDOMNode(this) as Element; + + if (!domNode || !domNode.contains(event.target)) { + this.props.onClick(); + } + }; + + render() { + return this.props.children; + } +} diff --git a/public/app/core/components/Picker/SimplePicker.tsx b/public/app/core/components/Picker/SimplePicker.tsx index 6c9e8aca199..817cd14150f 100644 --- a/public/app/core/components/Picker/SimplePicker.tsx +++ b/public/app/core/components/Picker/SimplePicker.tsx @@ -5,13 +5,14 @@ import ResetStyles from './ResetStyles'; interface Props { className?: string; - defaultValue: any; + defaultValue?: any; getOptionLabel: (item: any) => string; getOptionValue: (item: any) => string; onSelected: (item: any) => {} | void; options: any[]; placeholder?: string; width: number; + value: any; } const SimplePicker: SFC = ({ @@ -23,6 +24,7 @@ const SimplePicker: SFC = ({ options, placeholder, width, + value, }) => { return ( (this.searchInput = elem)} + /> + + +
+ + +
+ + ); + } + + render() { + return ( + <> +
+ {this.renderFilters()} +
+
+
{this.getDataSources().map(this.renderDataSource)}
+ + ); + } +} diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx new file mode 100644 index 00000000000..86ebdf86b67 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -0,0 +1,96 @@ +import React, { PureComponent } from 'react'; +import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar'; +import { FadeIn } from 'app/core/components/Animations/FadeIn'; + +interface Props { + children: JSX.Element; + main: EditorToolBarView; + toolbarItems: EditorToolBarView[]; +} + +export interface EditorToolBarView { + title: string; + imgSrc?: string; + icon?: string; + render: () => JSX.Element; +} + +interface State { + openView?: EditorToolBarView; +} + +export class EditorTabBody extends PureComponent { + constructor(props) { + super(props); + + this.state = { + openView: null, + }; + } + + onToggleToolBarView = (item: EditorToolBarView) => { + this.setState({ + openView: item === this.state.openView ? null : item, + }); + }; + + onCloseOpenView = () => { + this.setState({ openView: null }); + }; + + renderMainSelection(view: EditorToolBarView) { + return ( +
this.onToggleToolBarView(view)} key={view.title}> + +
{view.title}
+ +
+ ); + } + + renderButton(view: EditorToolBarView) { + return ( +
+ +
+ ); + } + + renderOpenView(view: EditorToolBarView) { + return ( +
+ + {view.render()} +
+ ); + } + + render() { + const { children, toolbarItems, main } = this.props; + const { openView } = this.state; + + return ( + <> +
+ {this.renderMainSelection(main)} +
+ {toolbarItems.map(item => this.renderButton(item))} +
+
+ +
+ + {openView && this.renderOpenView(openView)} + + {children} +
+ +
+ + ); + } +} diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index dc55fcc358e..8f4fc7b4150 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -1,13 +1,18 @@ // Libraries import React, { ComponentClass, PureComponent } from 'react'; +import { AutoSizer } from 'react-virtualized'; // Services -import { getTimeSrv } from '../time_srv'; +import { getTimeSrv, TimeSrv } from '../time_srv'; // Components import { PanelHeader } from './PanelHeader/PanelHeader'; import { DataPanel } from './DataPanel'; +// Utils +import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel'; +import { PANEL_HEADER_HEIGHT } from 'app/core/constants'; + // Types import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; @@ -22,10 +27,13 @@ export interface Props { export interface State { refreshCounter: number; renderCounter: number; + timeInfo?: string; timeRange?: TimeRange; } export class PanelChrome extends PureComponent { + timeSrv: TimeSrv = getTimeSrv(); + constructor(props) { super(props); @@ -46,21 +54,25 @@ export class PanelChrome extends PureComponent { } onRefresh = () => { - const timeSrv = getTimeSrv(); - const timeRange = timeSrv.timeRange(); + console.log('onRefresh'); + if (!this.isVisible) { + return; + } - this.setState(prevState => ({ - ...prevState, + const { panel } = this.props; + const timeData = applyPanelTimeOverrides(panel, this.timeSrv.timeRange()); + + this.setState({ refreshCounter: this.state.refreshCounter + 1, - timeRange: timeRange, - })); + timeRange: timeData.timeRange, + timeInfo: timeData.timeInfo, + }); }; onRender = () => { - this.setState(prevState => ({ - ...prevState, + this.setState({ renderCounter: this.state.renderCounter + 1, - })); + }); }; get isVisible() { @@ -69,36 +81,49 @@ export class PanelChrome extends PureComponent { render() { const { panel, dashboard } = this.props; - const { refreshCounter, timeRange, renderCounter } = this.state; + const { refreshCounter, timeRange, timeInfo, renderCounter } = this.state; const { datasource, targets } = panel; const PanelComponent = this.props.component; return ( -
- -
- - {({ loading, timeSeries }) => { - return ( - - ); - }} - -
-
+ + {({ width, height }) => { + if (width === 0) { + return null; + } + + return ( +
+ + + {({ loading, timeSeries }) => { + return ( +
+ +
+ ); + }} + +
+ ); + }} + ); } } diff --git a/public/app/features/dashboard/dashgrid/PanelEditor.tsx b/public/app/features/dashboard/dashgrid/PanelEditor.tsx index 371ed22fff7..09a8c7052e3 100644 --- a/public/app/features/dashboard/dashgrid/PanelEditor.tsx +++ b/public/app/features/dashboard/dashgrid/PanelEditor.tsx @@ -2,20 +2,19 @@ import React, { PureComponent } from 'react'; import classNames from 'classnames'; import { QueriesTab } from './QueriesTab'; -import { VizTypePicker } from './VizTypePicker'; +import { VisualizationTab } from './VisualizationTab'; -import { store } from 'app/store/configureStore'; +import { store } from 'app/store/store'; import { updateLocation } from 'app/core/actions'; import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; -import { PanelPlugin, PluginExports } from 'app/types/plugins'; +import { PanelPlugin } from 'app/types/plugins'; interface PanelEditorProps { panel: PanelModel; dashboard: DashboardModel; - panelType: string; - pluginExports: PluginExports; + plugin: PanelPlugin; onTypeChanged: (newType: PanelPlugin) => void; } @@ -34,43 +33,10 @@ export class PanelEditor extends PureComponent { this.tabs = [ { id: 'queries', text: 'Queries', icon: 'fa fa-database' }, { id: 'visualization', text: 'Visualization', icon: 'fa fa-line-chart' }, + { id: 'alert', text: 'Alert', icon: 'gicon gicon-alert' }, ]; } - renderQueriesTab() { - return ; - } - - renderPanelOptions() { - const { pluginExports, panel } = this.props; - - if (pluginExports.PanelOptionsComponent) { - const OptionsComponent = pluginExports.PanelOptionsComponent; - return ; - } else { - return

Visualization has no options

; - } - } - - onPanelOptionsChanged = (options: any) => { - this.props.panel.updateOptions(options); - this.forceUpdate(); - }; - - renderVizTab() { - return ( -
-
- -
-
-
Options
- {this.renderPanelOptions()} -
-
- ); - } - onChangeTab = (tab: PanelEditorTab) => { store.dispatch( updateLocation({ @@ -81,28 +47,44 @@ export class PanelEditor extends PureComponent { this.forceUpdate(); }; + onClose = () => { + store.dispatch( + updateLocation({ + query: { tab: null, fullscreen: null, edit: null }, + partial: true, + }) + ); + }; + render() { + const { panel, dashboard, onTypeChanged, plugin } = this.props; const { location } = store.getState(); const activeTab = location.query.tab || 'queries'; return ( -
-
+
+
+
+
+
+
+ +
    {this.tabs.map(tab => { return ; })}
-
-
- {activeTab === 'queries' && this.renderQueriesTab()} - {activeTab === 'visualization' && this.renderVizTab()} -
+ {activeTab === 'queries' && } + {activeTab === 'visualization' && ( + + )}
); } @@ -121,8 +103,8 @@ function TabItem({ tab, activeTab, onClick }: TabItemParams) { }); return ( -
  • - onClick(tab)}> +
  • onClick(tab)}> + {tab.text}
    • diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx index ab3081ba21e..5e19f5c814a 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeader.tsx @@ -1,51 +1,78 @@ import React, { PureComponent } from 'react'; import classNames from 'classnames'; +import PanelHeaderCorner from './PanelHeaderCorner'; import { PanelHeaderMenu } from './PanelHeaderMenu'; import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { PanelModel } from 'app/features/dashboard/panel_model'; +import { ClickOutsideWrapper } from 'app/core/components/ClickOutsideWrapper/ClickOutsideWrapper'; export interface Props { panel: PanelModel; dashboard: DashboardModel; + timeInfo: string; } -export class PanelHeader extends PureComponent { +interface State { + panelMenuOpen: boolean; +} + +export class PanelHeader extends PureComponent { + state = { + panelMenuOpen: false, + }; + + onMenuToggle = event => { + event.stopPropagation(); + + this.setState(prevState => ({ + panelMenuOpen: !prevState.panelMenuOpen, + })); + }; + + closeMenu = () => { + this.setState({ + panelMenuOpen: false, + }); + }; + render() { const isFullscreen = false; const isLoading = false; const panelHeaderClass = classNames({ 'panel-header': true, 'grid-drag-handle': !isFullscreen }); - const { panel, dashboard } = this.props; - + const { panel, dashboard, timeInfo } = this.props; return ( -
    - - - - - - {isLoading && ( - - - - )} - -
    -
    - - - {panel.title} + <> + +
    + {isLoading && ( + + + )} +
    +
    + + + {panel.title} + - + {this.state.panelMenuOpen && ( + + + + )} - - 4m - + {timeInfo && ( + + {timeInfo} + + )} +
    -
    + ); } } diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx new file mode 100644 index 00000000000..7a9e0729c41 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderCorner.tsx @@ -0,0 +1,89 @@ +import React, { PureComponent } from 'react'; +import { PanelModel } from 'app/features/dashboard/panel_model'; +import Tooltip from 'app/core/components/Tooltip/Tooltip'; +import templateSrv from 'app/features/templating/template_srv'; +import { LinkSrv } from 'app/features/dashboard/panellinks/link_srv'; +import { getTimeSrv, TimeSrv } from 'app/features/dashboard/time_srv'; +import Remarkable from 'remarkable'; + +enum InfoModes { + Error = 'Error', + Info = 'Info', + Links = 'Links', +} + +interface Props { + panel: PanelModel; +} + +export class PanelHeaderCorner extends PureComponent { + timeSrv: TimeSrv = getTimeSrv(); + + getInfoMode = () => { + const { panel } = this.props; + if (!!panel.description) { + return InfoModes.Info; + } + if (panel.links && panel.links.length) { + return InfoModes.Links; + } + + return undefined; + }; + + getInfoContent = (): JSX.Element => { + const { panel } = this.props; + const markdown = panel.description; + const linkSrv = new LinkSrv(templateSrv, this.timeSrv); + const interpolatedMarkdown = templateSrv.replace(markdown, panel.scopedVars); + const remarkableInterpolatedMarkdown = new Remarkable().render(interpolatedMarkdown); + + const html = ( +
    +
    + {panel.links && + panel.links.length > 0 && ( +
      + {panel.links.map((link, idx) => { + const info = linkSrv.getPanelLinkAnchorInfo(link, panel.scopedVars); + return ( +
    • + + {info.title} + +
      • + ); + })} +
    + )} +
    + ); + + return html; + }; + + render() { + const infoMode: InfoModes | undefined = this.getInfoMode(); + + if (!infoMode) { + return null; + } + + return ( + <> + {infoMode === InfoModes.Info || infoMode === InfoModes.Links ? ( + + + + + ) : null} + + ); + } +} + +export default PanelHeaderCorner; diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx index 8eb6b31bf27..cde540c0509 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenu.tsx @@ -35,6 +35,7 @@ export class PanelHeaderMenu extends PureComponent { render() { const { dashboard, panel } = this.props; const menu = getPanelMenu(dashboard, panel); - return
    {this.renderItems(menu)}
    ; + + return
    {this.renderItems(menu)}
    ; } } diff --git a/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx b/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx new file mode 100644 index 00000000000..82008b10d2f --- /dev/null +++ b/public/app/features/dashboard/dashgrid/PanelPluginNotFound.tsx @@ -0,0 +1,64 @@ +import _ from 'lodash'; +import React, { PureComponent } from 'react'; +import { PanelPlugin, PanelProps } from 'app/types'; + +interface Props { + pluginId: string; +} + +class PanelPluginNotFound extends PureComponent { + constructor(props) { + super(props); + } + + render() { + const style = { + display: 'flex', + alignItems: 'center', + textAlign: 'center' as 'center', + height: '100%', + }; + + return ( +
    +
    + Panel plugin with id {this.props.pluginId} could not be found +
    +
    + ); + } +} + +export function getPanelPluginNotFound(id: string): PanelPlugin { + const NotFound = class NotFound extends PureComponent { + render() { + return ; + } + }; + + return { + id: id, + name: id, + sort: 100, + module: '', + baseUrl: '', + info: { + author: { + name: '', + }, + description: '', + links: [], + logos: { + large: '', + small: '', + }, + screenshots: [], + updated: '', + version: '', + }, + + exports: { + Panel: NotFound, + }, + }; +} diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx index f13f212826a..be8ffe30666 100644 --- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx +++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx @@ -1,10 +1,9 @@ -// Libraries import React, { PureComponent } from 'react'; -// Services & utils import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; +import { EditorTabBody } from './EditorTabBody'; +import { DataSourcePicker } from './DataSourcePicker'; -// Types import { PanelModel } from '../panel_model'; import { DashboardModel } from '../dashboard_model'; @@ -48,6 +47,27 @@ export class QueriesTab extends PureComponent { } render() { - return
    (this.element = element)} className="panel-height-helper" />; + const currentDataSource = { + title: 'ProductionDB', + imgSrc: 'public/app/plugins/datasource/prometheus/img/prometheus_logo.svg', + render: () => , + }; + + const queryInspector = { + title: 'Query Inspector', + render: () =>

    hello

    , + }; + + const dsHelp = { + title: '', + icon: 'fa fa-question', + render: () =>

    hello

    , + }; + + return ( + +
    (this.element = element)} style={{ width: '100%' }} /> + + ); } } diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx new file mode 100644 index 00000000000..8702fab3ae4 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -0,0 +1,57 @@ +import React, { PureComponent } from 'react'; + +import { EditorTabBody } from './EditorTabBody'; +import { VizTypePicker } from './VizTypePicker'; + +import { PanelModel } from '../panel_model'; +import { DashboardModel } from '../dashboard_model'; +import { PanelPlugin } from 'app/types/plugins'; + +interface Props { + panel: PanelModel; + dashboard: DashboardModel; + plugin: PanelPlugin; + onTypeChanged: (newType: PanelPlugin) => void; +} + +export class VisualizationTab extends PureComponent { + constructor(props) { + super(props); + } + + renderPanelOptions() { + const { plugin, panel } = this.props; + const { PanelOptions } = plugin.exports; + + if (PanelOptions) { + return ; + } else { + return

    Visualization has no options

    ; + } + } + + onPanelOptionsChanged = (options: any) => { + this.props.panel.updateOptions(options); + this.forceUpdate(); + }; + + render() { + const { plugin } = this.props; + + const panelSelection = { + title: plugin.name, + imgSrc: plugin.info.logos.small, + render: () => { + // the needs to be scoped inside this closure + const { plugin, onTypeChanged } = this.props; + return ; + }, + }; + + return ( + + {this.renderPanelOptions()} + + ); + } +} diff --git a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx index 9402133df34..4d886c86d74 100644 --- a/public/app/features/dashboard/dashgrid/VizTypePicker.tsx +++ b/public/app/features/dashboard/dashgrid/VizTypePicker.tsx @@ -1,12 +1,12 @@ import React, { PureComponent } from 'react'; import classNames from 'classnames'; -import config from 'app/core/config'; -import { PanelPlugin } from 'app/types/plugins'; -import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar'; import _ from 'lodash'; +import config from 'app/core/config'; +import { PanelPlugin } from 'app/types/plugins'; + interface Props { - currentType: string; + current: PanelPlugin; onTypeChanged: (newType: PanelPlugin) => void; } @@ -15,6 +15,8 @@ interface State { } export class VizTypePicker extends PureComponent { + searchInput: HTMLElement; + constructor(props) { super(props); @@ -36,34 +38,55 @@ export class VizTypePicker extends PureComponent { renderVizPlugin = (plugin, index) => { const cssClass = classNames({ 'viz-picker__item': true, - 'viz-picker__item--selected': plugin.id === this.props.currentType, + 'viz-picker__item--selected': plugin.id === this.props.current.id, }); return (
    this.props.onTypeChanged(plugin)} title={plugin.name}> -
    {plugin.name}
    +
    ); }; - render() { + componentDidMount() { + setTimeout(() => { + this.searchInput.focus(); + }, 300); + } + + renderFilters() { return ( -
    -
    -
    - -
    + <> + +
    + +
    -
    - -
    {this.state.pluginList.map(this.renderVizPlugin)}
    -     + + ); + } + + render() { + const { pluginList } = this.state; + + return ( + <> +
    + {this.renderFilters()} +
    -
    + +
    {pluginList.map(this.renderVizPlugin)}
    + ); } } diff --git a/public/app/features/dashboard/panel_model.ts b/public/app/features/dashboard/panel_model.ts index ed032a118fe..20388a0450c 100644 --- a/public/app/features/dashboard/panel_model.ts +++ b/public/app/features/dashboard/panel_model.ts @@ -42,6 +42,16 @@ export class PanelModel { datasource: string; thresholds?: any; + snapshotData?: any; + timeFrom?: any; + timeShift?: any; + hideTimeOverride?: any; + + maxDataPoints?: number; + interval?: string; + description?: string; + links?: []; + // non persisted fullscreen: boolean; isEditing: boolean; diff --git a/public/app/features/dashboard/specs/AddPanelPanel.test.tsx b/public/app/features/dashboard/specs/AddPanelPanel.test.tsx index c5f66fed32a..4136883880b 100644 --- a/public/app/features/dashboard/specs/AddPanelPanel.test.tsx +++ b/public/app/features/dashboard/specs/AddPanelPanel.test.tsx @@ -3,6 +3,7 @@ import { AddPanelPanel } from './../dashgrid/AddPanelPanel'; import { PanelModel } from '../panel_model'; import { shallow } from 'enzyme'; import config from '../../../core/config'; +import { getPanelPlugin } from 'app/features/plugins/__mocks__/pluginMocks'; jest.mock('app/core/store', () => ({ get: key => { @@ -18,76 +19,11 @@ describe('AddPanelPanel', () => { beforeEach(() => { config.panels = [ - { - id: 'singlestat', - hideFromList: false, - name: 'Singlestat', - sort: 2, - module: '', - baseUrl: '', - meta: {}, - info: { - logos: { - small: '', - }, - }, - }, - { - id: 'hidden', - hideFromList: true, - name: 'Hidden', - sort: 100, - meta: {}, - module: '', - baseUrl: '', - info: { - logos: { - small: '', - }, - }, - }, - { - id: 'graph', - hideFromList: false, - name: 'Graph', - sort: 1, - meta: {}, - module: '', - baseUrl: '', - info: { - logos: { - small: '', - }, - }, - }, - { - id: 'alexander_zabbix', - hideFromList: false, - name: 'Zabbix', - sort: 100, - meta: {}, - module: '', - baseUrl: '', - info: { - logos: { - small: '', - }, - }, - }, - { - id: 'piechart', - hideFromList: false, - name: 'Piechart', - sort: 100, - meta: {}, - module: '', - baseUrl: '', - info: { - logos: { - small: '', - }, - }, - }, + getPanelPlugin({ id: 'singlestat', sort: 2 }), + getPanelPlugin({ id: 'hidden', sort: 100, hideFromList: true }), + getPanelPlugin({ id: 'graph', sort: 1 }), + getPanelPlugin({ id: 'alexander_zabbix', sort: 100 }), + getPanelPlugin({ id: 'piechart', sort: 100 }), ]; dashboardMock = { toggleRow: jest.fn() }; @@ -97,16 +33,14 @@ describe('AddPanelPanel', () => { }); it('should fetch all panels sorted with core plugins first', () => { - //console.log(wrapper.debug()); - //console.log(wrapper.find('.add-panel__item').get(0).props.title); - expect(wrapper.find('.add-panel__item').get(1).props.title).toBe('Singlestat'); - expect(wrapper.find('.add-panel__item').get(4).props.title).toBe('Piechart'); + expect(wrapper.find('.add-panel__item').get(1).props.title).toBe('singlestat'); + expect(wrapper.find('.add-panel__item').get(4).props.title).toBe('piechart'); }); it('should filter', () => { wrapper.find('input').simulate('change', { target: { value: 'p' } }); - expect(wrapper.find('.add-panel__item').get(1).props.title).toBe('Piechart'); - expect(wrapper.find('.add-panel__item').get(0).props.title).toBe('Graph'); + expect(wrapper.find('.add-panel__item').get(1).props.title).toBe('piechart'); + expect(wrapper.find('.add-panel__item').get(0).props.title).toBe('graph'); }); }); diff --git a/public/app/features/dashboard/time_srv.ts b/public/app/features/dashboard/time_srv.ts index 03b4a408125..ac717de15c9 100644 --- a/public/app/features/dashboard/time_srv.ts +++ b/public/app/features/dashboard/time_srv.ts @@ -20,7 +20,7 @@ export class TimeSrv { private autoRefreshBlocked: boolean; /** @ngInject */ - constructor(private $rootScope, private $timeout, private $location, private timer, private contextSrv) { + constructor($rootScope, private $timeout, private $location, private timer, private contextSrv) { // default time this.time = { from: '6h', to: 'now' }; @@ -189,7 +189,6 @@ export class TimeSrv { this.$location.search(urlParams); } - this.$rootScope.appEvent('time-range-changed', this.time); this.$timeout(this.refreshDashboard.bind(this), 0); } diff --git a/public/app/features/dashboard/utils/getPanelMenu.ts b/public/app/features/dashboard/utils/getPanelMenu.ts index 709eef3be38..c1b0a578b68 100644 --- a/public/app/features/dashboard/utils/getPanelMenu.ts +++ b/public/app/features/dashboard/utils/getPanelMenu.ts @@ -1,5 +1,5 @@ import { updateLocation } from 'app/core/actions'; -import { store } from 'app/store/configureStore'; +import { store } from 'app/store/store'; import { removePanel, duplicatePanel, copyPanel, editPanelJson, sharePanel } from 'app/features/dashboard/utils/panel'; import { PanelModel } from 'app/features/dashboard/panel_model'; diff --git a/public/app/features/dashboard/utils/panel.ts b/public/app/features/dashboard/utils/panel.ts index 151c1ea8d61..0b0f127e2aa 100644 --- a/public/app/features/dashboard/utils/panel.ts +++ b/public/app/features/dashboard/utils/panel.ts @@ -1,7 +1,21 @@ -import appEvents from 'app/core/app_events'; +// Store +import store from 'app/core/store'; + +// Models import { DashboardModel } from 'app/features/dashboard/dashboard_model'; import { PanelModel } from 'app/features/dashboard/panel_model'; -import store from 'app/core/store'; +import { TimeRange } from 'app/types/series'; + +// Utils +import { isString as _isString } from 'lodash'; +import * as rangeUtil from 'app/core/utils/rangeutil'; +import * as dateMath from 'app/core/utils/datemath'; +import appEvents from 'app/core/app_events'; + +// Services +import templateSrv from 'app/features/templating/template_srv'; + +// Constants import { LS_PANEL_COPY_KEY } from 'app/core/constants'; export const removePanel = (dashboard: DashboardModel, panel: PanelModel, ask: boolean) => { @@ -84,3 +98,70 @@ export const toggleLegend = (panel: PanelModel) => { // panel.legend.show = !panel.legend.show; refreshPanel(panel); }; + +export interface TimeOverrideResult { + timeRange: TimeRange; + timeInfo: string; +} + +export function applyPanelTimeOverrides(panel: PanelModel, timeRange: TimeRange): TimeOverrideResult { + const newTimeData = { + timeInfo: '', + timeRange: timeRange, + }; + + if (panel.timeFrom) { + const timeFromInterpolated = templateSrv.replace(panel.timeFrom, panel.scopedVars); + const timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated); + if (timeFromInfo.invalid) { + newTimeData.timeInfo = 'invalid time override'; + return newTimeData; + } + + if (_isString(timeRange.raw.from)) { + const timeFromDate = dateMath.parse(timeFromInfo.from); + newTimeData.timeInfo = timeFromInfo.display; + newTimeData.timeRange = { + from: timeFromDate, + to: dateMath.parse(timeFromInfo.to), + raw: { + from: timeFromInfo.from, + to: timeFromInfo.to, + }, + }; + } + } + + if (panel.timeShift) { + const timeShiftInterpolated = templateSrv.replace(panel.timeShift, panel.scopedVars); + const timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated); + if (timeShiftInfo.invalid) { + newTimeData.timeInfo = 'invalid timeshift'; + return newTimeData; + } + + const timeShift = '-' + timeShiftInterpolated; + newTimeData.timeInfo += ' timeshift ' + timeShift; + newTimeData.timeRange = { + from: dateMath.parseDateMath(timeShift, timeRange.from, false), + to: dateMath.parseDateMath(timeShift, timeRange.to, true), + raw: { + from: timeRange.from, + to: timeRange.to, + }, + }; + } + + if (panel.hideTimeOverride) { + newTimeData.timeInfo = ''; + } + + return newTimeData; +} + +export function getResolution(panel: PanelModel): number { + const htmlEl = document.getElementsByTagName('html')[0]; + const width = htmlEl.getBoundingClientRect().width; // https://stackoverflow.com/a/21454625 + + return panel.maxDataPoints ? panel.maxDataPoints : Math.ceil(width * (panel.gridPos.w / 24)); +} diff --git a/public/app/features/datasources/DataSourceSettings.tsx b/public/app/features/datasources/DataSourceSettings.tsx deleted file mode 100644 index f7d641d34b0..00000000000 --- a/public/app/features/datasources/DataSourceSettings.tsx +++ /dev/null @@ -1,125 +0,0 @@ -import React, { PureComponent } from 'react'; -import { connect } from 'react-redux'; -import { DataSource, Plugin } from 'app/types'; - -export interface Props { - dataSource: DataSource; - dataSourceMeta: Plugin; -} -interface State { - name: string; -} - -enum DataSourceStates { - Alpha = 'alpha', - Beta = 'beta', -} - -export class DataSourceSettings extends PureComponent { - constructor(props) { - super(props); - - this.state = { - name: props.dataSource.name, - }; - } - - onNameChange = event => { - this.setState({ - name: event.target.value, - }); - }; - - onSubmit = event => { - event.preventDefault(); - console.log(event); - }; - - onDelete = event => { - console.log(event); - }; - - isReadyOnly() { - return this.props.dataSource.readOnly === true; - } - - shouldRenderInfoBox() { - const { state } = this.props.dataSourceMeta; - - return state === DataSourceStates.Alpha || state === DataSourceStates.Beta; - } - - getInfoText() { - const { dataSourceMeta } = this.props; - - switch (dataSourceMeta.state) { - case DataSourceStates.Alpha: - return ( - 'This plugin is marked as being in alpha state, which means it is in early development phase and updates' + - ' will include breaking changes.' - ); - - case DataSourceStates.Beta: - return ( - 'This plugin is marked as being in a beta development state. This means it is in currently in active' + - ' development and could be missing important features.' - ); - } - - return null; - } - - render() { - const { name } = this.state; - - return ( -
    -

    Settings

    -
    -
    -
    -
    - Name - -
    -
    -
    - {this.shouldRenderInfoBox() &&
    {this.getInfoText()}
    } - {this.isReadyOnly() && ( -
    - This datasource was added by config and cannot be modified using the UI. Please contact your server admin - to update this datasource. -
    - )} -
    - - - - Back - -
    -
    -
    - ); - } -} - -function mapStateToProps(state) { - return { - dataSource: state.dataSources.dataSource, - dataSourceMeta: state.dataSources.dataSourceMeta, - }; -} - -export default connect(mapStateToProps)(DataSourceSettings); diff --git a/public/app/features/datasources/__mocks__/dataSourcesMocks.ts b/public/app/features/datasources/__mocks__/dataSourcesMocks.ts index 97819a18c82..755d8eef74a 100644 --- a/public/app/features/datasources/__mocks__/dataSourcesMocks.ts +++ b/public/app/features/datasources/__mocks__/dataSourcesMocks.ts @@ -29,6 +29,9 @@ export const getMockDataSource = (): DataSource => { return { access: '', basicAuth: false, + basicAuthUser: '', + basicAuthPassword: '', + withCredentials: false, database: '', id: 13, isDefault: false, diff --git a/public/app/features/datasources/settings/BasicSettings.test.tsx b/public/app/features/datasources/settings/BasicSettings.test.tsx new file mode 100644 index 00000000000..6729830bb75 --- /dev/null +++ b/public/app/features/datasources/settings/BasicSettings.test.tsx @@ -0,0 +1,20 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import BasicSettings, { Props } from './BasicSettings'; + +const setup = () => { + const props: Props = { + dataSourceName: 'Graphite', + onChange: jest.fn(), + }; + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/datasources/settings/BasicSettings.tsx b/public/app/features/datasources/settings/BasicSettings.tsx new file mode 100644 index 00000000000..adaec898dbc --- /dev/null +++ b/public/app/features/datasources/settings/BasicSettings.tsx @@ -0,0 +1,34 @@ +import React, { SFC } from 'react'; +import { Label } from 'app/core/components/Label/Label'; + +export interface Props { + dataSourceName: string; + onChange: (name: string) => void; +} + +const BasicSettings: SFC = ({ dataSourceName, onChange }) => { + return ( +
    +
    + + onChange(event.target.value)} + required + /> +
    +
    + ); +}; + +export default BasicSettings; diff --git a/public/app/features/datasources/settings/ButtonRow.test.tsx b/public/app/features/datasources/settings/ButtonRow.test.tsx new file mode 100644 index 00000000000..0acab8941ff --- /dev/null +++ b/public/app/features/datasources/settings/ButtonRow.test.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import ButtonRow, { Props } from './ButtonRow'; + +const setup = (propOverrides?: object) => { + const props: Props = { + isReadOnly: true, + onSubmit: jest.fn(), + onDelete: jest.fn(), + }; + + Object.assign(props, propOverrides); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render with buttons enabled', () => { + const wrapper = setup({ + isReadOnly: false, + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/datasources/settings/ButtonRow.tsx b/public/app/features/datasources/settings/ButtonRow.tsx new file mode 100644 index 00000000000..cb70b29c706 --- /dev/null +++ b/public/app/features/datasources/settings/ButtonRow.tsx @@ -0,0 +1,25 @@ +import React, { SFC } from 'react'; + +export interface Props { + isReadOnly: boolean; + onDelete: () => void; + onSubmit: (event) => void; +} + +const ButtonRow: SFC = ({ isReadOnly, onDelete, onSubmit }) => { + return ( +
    + + + + Back + +
    + ); +}; + +export default ButtonRow; diff --git a/public/app/features/datasources/settings/DataSourceSettings.test.tsx b/public/app/features/datasources/settings/DataSourceSettings.test.tsx new file mode 100644 index 00000000000..73c05fdd518 --- /dev/null +++ b/public/app/features/datasources/settings/DataSourceSettings.test.tsx @@ -0,0 +1,63 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import { DataSourceSettings, Props } from './DataSourceSettings'; +import { DataSource, NavModel } from '../../../types'; +import { getMockDataSource } from '../__mocks__/dataSourcesMocks'; +import { getMockPlugin } from '../../plugins/__mocks__/pluginMocks'; + +const setup = (propOverrides?: object) => { + const props: Props = { + navModel: {} as NavModel, + dataSource: getMockDataSource(), + dataSourceMeta: getMockPlugin(), + pageId: 1, + deleteDataSource: jest.fn(), + loadDataSource: jest.fn(), + setDataSourceName: jest.fn(), + updateDataSource: jest.fn(), + }; + + Object.assign(props, propOverrides); + + return shallow(); +}; + +describe('Render', () => { + it('should render component', () => { + const wrapper = setup(); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render loader', () => { + const wrapper = setup({ + dataSource: {} as DataSource, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render beta info text', () => { + const wrapper = setup({ + dataSourceMeta: { ...getMockPlugin(), state: 'beta' }, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render alpha info text', () => { + const wrapper = setup({ + dataSourceMeta: { ...getMockPlugin(), state: 'alpha' }, + }); + + expect(wrapper).toMatchSnapshot(); + }); + + it('should render is ready only message', () => { + const wrapper = setup({ + dataSource: { ...getMockDataSource(), readOnly: true }, + }); + + expect(wrapper).toMatchSnapshot(); + }); +}); diff --git a/public/app/features/datasources/settings/DataSourceSettings.tsx b/public/app/features/datasources/settings/DataSourceSettings.tsx new file mode 100644 index 00000000000..0f07023b472 --- /dev/null +++ b/public/app/features/datasources/settings/DataSourceSettings.tsx @@ -0,0 +1,245 @@ +import React, { PureComponent } from 'react'; +import { hot } from 'react-hot-loader'; +import { connect } from 'react-redux'; + +import PageHeader from 'app/core/components/PageHeader/PageHeader'; +import PageLoader from 'app/core/components/PageLoader/PageLoader'; +import PluginSettings from './PluginSettings'; +import BasicSettings from './BasicSettings'; +import ButtonRow from './ButtonRow'; + +import appEvents from 'app/core/app_events'; +import { getBackendSrv } from 'app/core/services/backend_srv'; +import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; + +import { getDataSource, getDataSourceMeta } from '../state/selectors'; +import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions'; +import { getNavModel } from 'app/core/selectors/navModel'; +import { getRouteParamsId } from 'app/core/selectors/location'; + +import { DataSource, NavModel, Plugin } from 'app/types/'; +import { getDataSourceLoadingNav } from '../state/navModel'; + +export interface Props { + navModel: NavModel; + dataSource: DataSource; + dataSourceMeta: Plugin; + pageId: number; + deleteDataSource: typeof deleteDataSource; + loadDataSource: typeof loadDataSource; + setDataSourceName: typeof setDataSourceName; + updateDataSource: typeof updateDataSource; +} + +interface State { + dataSource: DataSource; + isTesting?: boolean; + testingMessage?: string; + testingStatus?: string; +} + +enum DataSourceStates { + Alpha = 'alpha', + Beta = 'beta', +} + +export class DataSourceSettings extends PureComponent { + constructor(props) { + super(props); + + this.state = { + dataSource: {} as DataSource, + }; + } + + async componentDidMount() { + const { loadDataSource, pageId } = this.props; + + await loadDataSource(pageId); + } + + onSubmit = async event => { + event.preventDefault(); + + await this.props.updateDataSource({ ...this.state.dataSource, name: this.props.dataSource.name }); + + this.testDataSource(); + }; + + onDelete = () => { + appEvents.emit('confirm-modal', { + title: 'Delete', + text: 'Are you sure you want to delete this data source?', + yesText: 'Delete', + icon: 'fa-trash', + onConfirm: () => { + this.confirmDelete(); + }, + }); + }; + + confirmDelete = () => { + this.props.deleteDataSource(); + }; + + onModelChange = dataSource => { + this.setState({ + dataSource: dataSource, + }); + }; + + isReadOnly() { + return this.props.dataSource.readOnly === true; + } + + shouldRenderInfoBox() { + const { state } = this.props.dataSourceMeta; + + return state === DataSourceStates.Alpha || state === DataSourceStates.Beta; + } + + getInfoText() { + const { dataSourceMeta } = this.props; + + switch (dataSourceMeta.state) { + case DataSourceStates.Alpha: + return ( + 'This plugin is marked as being in alpha state, which means it is in early development phase and updates' + + ' will include breaking changes.' + ); + + case DataSourceStates.Beta: + return ( + 'This plugin is marked as being in a beta development state. This means it is in currently in active' + + ' development and could be missing important features.' + ); + } + + return null; + } + + renderIsReadOnlyMessage() { + return ( +
    + This datasource was added by config and cannot be modified using the UI. Please contact your server admin to + update this datasource. +
    + ); + } + + async testDataSource() { + const dsApi = await getDatasourceSrv().get(this.state.dataSource.name); + + if (!dsApi.testDatasource) { + return; + } + + this.setState({ isTesting: true, testingMessage: 'Testing...', testingStatus: 'info' }); + + getBackendSrv().withNoBackendCache(async () => { + try { + const result = await dsApi.testDatasource(); + + this.setState({ + isTesting: false, + testingStatus: result.status, + testingMessage: result.message, + }); + } catch (err) { + let message = ''; + + if (err.statusText) { + message = 'HTTP Error ' + err.statusText; + } else { + message = err.message; + } + + this.setState({ + isTesting: false, + testingStatus: 'error', + testingMessage: message, + }); + } + }); + } + + render() { + const { dataSource, dataSourceMeta, navModel } = this.props; + const { testingMessage, testingStatus } = this.state; + + return ( +
    + + {Object.keys(dataSource).length === 0 ? ( + + ) : ( +
    +
    +
    + this.props.setDataSourceName(name)} + /> + + {this.shouldRenderInfoBox() &&
    {this.getInfoText()}
    } + + {this.isReadOnly() && this.renderIsReadOnlyMessage()} + {dataSourceMeta.module && ( + + )} + +
    + {testingMessage && ( +
    +
    + {testingStatus === 'error' ? ( + + ) : ( + + )} +
    +
    +
    {testingMessage}
    +
    +
    + )} +
    + + this.onSubmit(event)} + isReadOnly={this.isReadOnly()} + onDelete={this.onDelete} + /> + +
    +
    + )} +
    + ); + } +} + +function mapStateToProps(state) { + const pageId = getRouteParamsId(state.location); + const dataSource = getDataSource(state.dataSources, pageId); + + return { + navModel: getNavModel(state.navIndex, `datasource-settings-${pageId}`, getDataSourceLoadingNav('settings')), + dataSource: getDataSource(state.dataSources, pageId), + dataSourceMeta: getDataSourceMeta(state.dataSources, dataSource.type), + pageId: pageId, + }; +} + +const mapDispatchToProps = { + deleteDataSource, + loadDataSource, + setDataSourceName, + updateDataSource, +}; + +export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings)); diff --git a/public/app/features/datasources/settings/PluginSettings.tsx b/public/app/features/datasources/settings/PluginSettings.tsx new file mode 100644 index 00000000000..e0b742985cc --- /dev/null +++ b/public/app/features/datasources/settings/PluginSettings.tsx @@ -0,0 +1,63 @@ +import React, { PureComponent } from 'react'; +import _ from 'lodash'; +import { DataSource, Plugin } from 'app/types/'; +import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoader'; + +export interface Props { + dataSource: DataSource; + dataSourceMeta: Plugin; + onModelChange: (dataSource: DataSource) => void; +} + +export class PluginSettings extends PureComponent { + element: any; + component: AngularComponent; + scopeProps: { + ctrl: { datasourceMeta: Plugin; current: DataSource }; + onModelChanged: (dataSource: DataSource) => void; + }; + + constructor(props) { + super(props); + + this.scopeProps = { + ctrl: { datasourceMeta: props.dataSourceMeta, current: _.cloneDeep(props.dataSource) }, + onModelChanged: this.onModelChanged, + }; + } + + componentDidMount() { + if (!this.element) { + return; + } + + const loader = getAngularLoader(); + const template = ''; + + this.component = loader.load(this.element, this.scopeProps, template); + } + + componentDidUpdate(prevProps) { + if (this.props.dataSource !== prevProps.dataSource) { + this.scopeProps.ctrl.current = _.cloneDeep(this.props.dataSource); + + this.component.digest(); + } + } + + componentWillUnmount() { + if (this.component) { + this.component.destroy(); + } + } + + onModelChanged = (dataSource: DataSource) => { + this.props.onModelChange(dataSource); + }; + + render() { + return
    (this.element = element)} />; + } +} + +export default PluginSettings; diff --git a/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap new file mode 100644 index 00000000000..0c3e8c86dd4 --- /dev/null +++ b/public/app/features/datasources/settings/__snapshots__/BasicSettings.test.tsx.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
    +
    + + Name + + +
    +
    +`; diff --git a/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap new file mode 100644 index 00000000000..bd190f60b03 --- /dev/null +++ b/public/app/features/datasources/settings/__snapshots__/ButtonRow.test.tsx.snap @@ -0,0 +1,59 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render component 1`] = ` +
    + + + + Back + +
    +`; + +exports[`Render should render with buttons enabled 1`] = ` +
    + + + + Back + +
    +`; diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap new file mode 100644 index 00000000000..f95055c9095 --- /dev/null +++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap @@ -0,0 +1,395 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Render should render alpha info text 1`] = ` +
    + +
    +
    +
    + +
    + This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes. +
    + +
    + + +
    +
    +
    +`; + +exports[`Render should render beta info text 1`] = ` +
    + +
    +
    +
    + +
    + This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features. +
    + +
    + + +
    +
    +
    +`; + +exports[`Render should render component 1`] = ` +
    + +
    +
    +
    + + +
    + + +
    +
    +
    +`; + +exports[`Render should render is ready only message 1`] = ` +
    + +
    +
    +
    + +
    + This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. +
    + +
    + + +
    +
    +
    +`; + +exports[`Render should render loader 1`] = ` +
    + + +
    +`; diff --git a/public/app/features/datasources/state/actions.ts b/public/app/features/datasources/state/actions.ts index bb8fce8424a..c03860e1f01 100644 --- a/public/app/features/datasources/state/actions.ts +++ b/public/app/features/datasources/state/actions.ts @@ -1,10 +1,12 @@ import { ThunkAction } from 'redux-thunk'; -import { DataSource, Plugin, StoreState } from 'app/types'; -import { getBackendSrv } from '../../../core/services/backend_srv'; -import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector'; -import { updateLocation, updateNavIndex, UpdateNavIndexAction } from '../../../core/actions'; -import { UpdateLocationAction } from '../../../core/actions/location'; +import config from '../../../core/config'; +import { getBackendSrv } from 'app/core/services/backend_srv'; +import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; +import { LayoutMode } from 'app/core/components/LayoutSelector/LayoutSelector'; +import { updateLocation, updateNavIndex, UpdateNavIndexAction } from 'app/core/actions'; +import { UpdateLocationAction } from 'app/core/actions/location'; import { buildNavModel } from './navModel'; +import { DataSource, Plugin, StoreState } from 'app/types'; export enum ActionTypes { LoadDataSources = 'LOAD_DATA_SOURCES', @@ -14,43 +16,49 @@ export enum ActionTypes { SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY', SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE', SetDataSourceTypeSearchQuery = 'SET_DATA_SOURCE_TYPE_SEARCH_QUERY', + SetDataSourceName = 'SET_DATA_SOURCE_NAME', } -export interface LoadDataSourcesAction { +interface LoadDataSourcesAction { type: ActionTypes.LoadDataSources; payload: DataSource[]; } -export interface SetDataSourcesSearchQueryAction { +interface SetDataSourcesSearchQueryAction { type: ActionTypes.SetDataSourcesSearchQuery; payload: string; } -export interface SetDataSourcesLayoutModeAction { +interface SetDataSourcesLayoutModeAction { type: ActionTypes.SetDataSourcesLayoutMode; payload: LayoutMode; } -export interface LoadDataSourceTypesAction { +interface LoadDataSourceTypesAction { type: ActionTypes.LoadDataSourceTypes; payload: Plugin[]; } -export interface SetDataSourceTypeSearchQueryAction { +interface SetDataSourceTypeSearchQueryAction { type: ActionTypes.SetDataSourceTypeSearchQuery; payload: string; } -export interface LoadDataSourceAction { +interface LoadDataSourceAction { type: ActionTypes.LoadDataSource; payload: DataSource; } -export interface LoadDataSourceMetaAction { +interface LoadDataSourceMetaAction { type: ActionTypes.LoadDataSourceMeta; payload: Plugin; } +interface SetDataSourceNameAction { + type: ActionTypes.SetDataSourceName; + payload: string; +} + const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({ type: ActionTypes.LoadDataSources, payload: dataSources, @@ -86,6 +94,11 @@ export const setDataSourceTypeSearchQuery = (query: string): SetDataSourceTypeSe payload: query, }); +export const setDataSourceName = (name: string) => ({ + type: ActionTypes.SetDataSourceName, + payload: name, +}); + export type Action = | LoadDataSourcesAction | SetDataSourcesSearchQueryAction @@ -95,7 +108,8 @@ export type Action = | SetDataSourceTypeSearchQueryAction | LoadDataSourceAction | UpdateNavIndexAction - | LoadDataSourceMetaAction; + | LoadDataSourceMetaAction + | SetDataSourceNameAction; type ThunkResult = ThunkAction; @@ -145,6 +159,23 @@ export function loadDataSourceTypes(): ThunkResult { }; } +export function updateDataSource(dataSource: DataSource): ThunkResult { + return async dispatch => { + await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource); + await updateFrontendSettings(); + return dispatch(loadDataSource(dataSource.id)); + }; +} + +export function deleteDataSource(): ThunkResult { + return async (dispatch, getStore) => { + const dataSource = getStore().dataSources.dataSource; + + await getBackendSrv().delete(`/api/datasources/${dataSource.id}`); + dispatch(updateLocation({ path: '/datasources' })); + }; +} + export function nameExits(dataSources, name) { return ( dataSources.filter(dataSource => { @@ -173,6 +204,16 @@ export function findNewName(dataSources, name) { return name; } +function updateFrontendSettings() { + return getBackendSrv() + .get('/api/frontend/settings') + .then(settings => { + config.datasources = settings.datasources; + config.defaultDatasource = settings.defaultDatasource; + getDatasourceSrv().init(); + }); +} + function nameHasSuffix(name) { return name.endsWith('-', name.length - 1); } diff --git a/public/app/features/datasources/state/navModel.ts b/public/app/features/datasources/state/navModel.ts index e0b6b39588e..3f59812a522 100644 --- a/public/app/features/datasources/state/navModel.ts +++ b/public/app/features/datasources/state/navModel.ts @@ -48,6 +48,9 @@ export function getDataSourceLoadingNav(pageName: string): NavModel { { access: '', basicAuth: false, + basicAuthUser: '', + basicAuthPassword: '', + withCredentials: false, database: '', id: 1, isDefault: false, @@ -75,7 +78,7 @@ export function getDataSourceLoadingNav(pageName: string): NavModel { large: '', small: '', }, - screenshots: '', + screenshots: [], updated: '', version: '', }, diff --git a/public/app/features/datasources/state/reducers.ts b/public/app/features/datasources/state/reducers.ts index 7e235f5ea0a..33feae6770a 100644 --- a/public/app/features/datasources/state/reducers.ts +++ b/public/app/features/datasources/state/reducers.ts @@ -10,8 +10,8 @@ const initialState: DataSourcesState = { dataSourcesCount: 0, dataSourceTypes: [] as Plugin[], dataSourceTypeSearchQuery: '', - dataSourceMeta: {} as Plugin, hasFetched: false, + dataSourceMeta: {} as Plugin, }; export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => { @@ -36,6 +36,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo case ActionTypes.LoadDataSourceMeta: return { ...state, dataSourceMeta: action.payload }; + + case ActionTypes.SetDataSourceName: + return { ...state, dataSource: { ...state.dataSource, name: action.payload } }; } return state; diff --git a/public/app/features/datasources/state/selectors.ts b/public/app/features/datasources/state/selectors.ts index eef176eb49a..2466e465d1d 100644 --- a/public/app/features/datasources/state/selectors.ts +++ b/public/app/features/datasources/state/selectors.ts @@ -20,7 +20,15 @@ export const getDataSource = (state, dataSourceId): DataSource | null => { if (state.dataSource.id === parseInt(dataSourceId, 10)) { return state.dataSource; } - return null; + return {} as DataSource; +}; + +export const getDataSourceMeta = (state, type): Plugin => { + if (state.dataSourceMeta.id === type) { + return state.dataSourceMeta; + } + + return {} as Plugin; }; export const getDataSourcesSearchQuery = state => state.searchQuery; diff --git a/public/app/features/explore/Explore.tsx b/public/app/features/explore/Explore.tsx index 753f158fd9f..238c5c917b9 100644 --- a/public/app/features/explore/Explore.tsx +++ b/public/app/features/explore/Explore.tsx @@ -94,6 +94,10 @@ export class Explore extends React.PureComponent { * Not kept in component state to prevent edit-render roundtrips. */ queryExpressions: string[]; + /** + * Local ID cache to compare requested vs selected datasource + */ + requestedDatasourceId: string; constructor(props) { super(props); @@ -167,6 +171,9 @@ export class Explore extends React.PureComponent { const datasourceId = datasource.meta.id; let datasourceError = null; + // Keep ID to track selection + this.requestedDatasourceId = datasourceId; + try { const testResult = await datasource.testDatasource(); datasourceError = testResult.status === 'success' ? null : testResult.message; @@ -174,6 +181,11 @@ export class Explore extends React.PureComponent { datasourceError = (error && error.statusText) || 'Network error'; } + if (datasourceId !== this.requestedDatasourceId) { + // User already changed datasource again, discard results + return; + } + const historyKey = `grafana.explore.history.${datasourceId}`; const history = store.getObject(historyKey, []); diff --git a/public/app/features/org/OrgDetailsPage.test.tsx b/public/app/features/org/OrgDetailsPage.test.tsx index 2eb45fa368a..ea0e5c09388 100644 --- a/public/app/features/org/OrgDetailsPage.test.tsx +++ b/public/app/features/org/OrgDetailsPage.test.tsx @@ -1,16 +1,13 @@ import React from 'react'; import { shallow } from 'enzyme'; import { OrgDetailsPage, Props } from './OrgDetailsPage'; -import { NavModel, Organization, OrganizationPreferences } from '../../types'; +import { NavModel, Organization } from '../../types'; const setup = (propOverrides?: object) => { const props: Props = { - preferences: {} as OrganizationPreferences, organization: {} as Organization, navModel: {} as NavModel, loadOrganization: jest.fn(), - loadOrganizationPreferences: jest.fn(), - loadStarredDashboards: jest.fn(), setOrganizationName: jest.fn(), updateOrganization: jest.fn(), }; diff --git a/public/app/features/org/OrgDetailsPage.tsx b/public/app/features/org/OrgDetailsPage.tsx index 86a3fab3268..b011901aa71 100644 --- a/public/app/features/org/OrgDetailsPage.tsx +++ b/public/app/features/org/OrgDetailsPage.tsx @@ -4,33 +4,22 @@ import { connect } from 'react-redux'; import PageHeader from '../../core/components/PageHeader/PageHeader'; import PageLoader from '../../core/components/PageLoader/PageLoader'; import OrgProfile from './OrgProfile'; -import OrgPreferences from './OrgPreferences'; -import { - loadOrganization, - loadOrganizationPreferences, - setOrganizationName, - updateOrganization, -} from './state/actions'; -import { loadStarredDashboards } from '../../core/actions/user'; -import { NavModel, Organization, OrganizationPreferences, StoreState } from 'app/types'; +import SharedPreferences from 'app/core/components/SharedPreferences/SharedPreferences'; +import { loadOrganization, setOrganizationName, updateOrganization } from './state/actions'; +import { NavModel, Organization, StoreState } from 'app/types'; import { getNavModel } from '../../core/selectors/navModel'; export interface Props { navModel: NavModel; organization: Organization; - preferences: OrganizationPreferences; loadOrganization: typeof loadOrganization; - loadOrganizationPreferences: typeof loadOrganizationPreferences; - loadStarredDashboards: typeof loadStarredDashboards; setOrganizationName: typeof setOrganizationName; updateOrganization: typeof updateOrganization; } export class OrgDetailsPage extends PureComponent { async componentDidMount() { - await this.props.loadStarredDashboards(); await this.props.loadOrganization(); - await this.props.loadOrganizationPreferences(); } onOrgNameChange = name => { @@ -42,22 +31,22 @@ export class OrgDetailsPage extends PureComponent { }; render() { - const { navModel, organization, preferences } = this.props; + const { navModel, organization } = this.props; + const isLoading = Object.keys(organization).length === 0; return (
    - {Object.keys(organization).length === 0 || Object.keys(preferences).length === 0 ? ( - - ) : ( + {isLoading && } + {!isLoading && (
    this.onOrgNameChange(name)} onSubmit={this.onUpdateOrganization} orgName={organization.name} /> - +
    )}
    @@ -70,14 +59,11 @@ function mapStateToProps(state: StoreState) { return { navModel: getNavModel(state.navIndex, 'org-settings'), organization: state.organization.organization, - preferences: state.organization.preferences, }; } const mapDispatchToProps = { loadOrganization, - loadOrganizationPreferences, - loadStarredDashboards, setOrganizationName, updateOrganization, }; diff --git a/public/app/features/org/OrgPreferences.test.tsx b/public/app/features/org/OrgPreferences.test.tsx deleted file mode 100644 index e79e43d04f2..00000000000 --- a/public/app/features/org/OrgPreferences.test.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import React from 'react'; -import { shallow } from 'enzyme'; -import { OrgPreferences, Props } from './OrgPreferences'; - -const setup = () => { - const props: Props = { - preferences: { - homeDashboardId: 1, - timezone: 'UTC', - theme: 'Default', - }, - starredDashboards: [{ id: 1, title: 'Standard dashboard', url: '', uri: '', uid: '', type: '', tags: [] }], - setOrganizationTimezone: jest.fn(), - setOrganizationTheme: jest.fn(), - setOrganizationHomeDashboard: jest.fn(), - updateOrganizationPreferences: jest.fn(), - }; - - return shallow(); -}; - -describe('Render', () => { - it('should render component', () => { - const wrapper = setup(); - - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/public/app/features/org/OrgPreferences.tsx b/public/app/features/org/OrgPreferences.tsx deleted file mode 100644 index a8133ba4a1c..00000000000 --- a/public/app/features/org/OrgPreferences.tsx +++ /dev/null @@ -1,113 +0,0 @@ -import React, { PureComponent } from 'react'; -import { connect } from 'react-redux'; -import { Label } from '../../core/components/Label/Label'; -import SimplePicker from '../../core/components/Picker/SimplePicker'; -import { DashboardSearchHit, OrganizationPreferences } from 'app/types'; -import { - setOrganizationHomeDashboard, - setOrganizationTheme, - setOrganizationTimezone, - updateOrganizationPreferences, -} from './state/actions'; - -export interface Props { - preferences: OrganizationPreferences; - starredDashboards: DashboardSearchHit[]; - setOrganizationHomeDashboard: typeof setOrganizationHomeDashboard; - setOrganizationTheme: typeof setOrganizationTheme; - setOrganizationTimezone: typeof setOrganizationTimezone; - updateOrganizationPreferences: typeof updateOrganizationPreferences; -} - -const themes = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }]; - -const timezones = [ - { value: '', text: 'Default' }, - { value: 'browser', text: 'Local browser time' }, - { value: 'utc', text: 'UTC' }, -]; - -export class OrgPreferences extends PureComponent { - onSubmitForm = event => { - event.preventDefault(); - this.props.updateOrganizationPreferences(); - }; - - render() { - const { - preferences, - starredDashboards, - setOrganizationHomeDashboard, - setOrganizationTimezone, - setOrganizationTheme, - } = this.props; - - starredDashboards.unshift({ id: 0, title: 'Default', tags: [], type: '', uid: '', uri: '', url: '' }); - - return ( -
    -

    Preferences

    -
    - UI Theme - theme.value === preferences.theme)} - options={themes} - getOptionValue={i => i.value} - getOptionLabel={i => i.text} - onSelected={theme => setOrganizationTheme(theme.value)} - width={20} - /> -
    -
    - - dashboard.id === preferences.homeDashboardId)} - getOptionValue={i => i.id} - getOptionLabel={i => i.title} - onSelected={(dashboard: DashboardSearchHit) => setOrganizationHomeDashboard(dashboard.id)} - options={starredDashboards} - placeholder="Chose default dashboard" - width={20} - /> -
    -
    - - timezone.value === preferences.timezone)} - getOptionValue={i => i.value} - getOptionLabel={i => i.text} - onSelected={timezone => setOrganizationTimezone(timezone.value)} - options={timezones} - width={20} - /> -
    -
    - -
    -
    - ); - } -} - -function mapStateToProps(state) { - return { - preferences: state.organization.preferences, - starredDashboards: state.user.starredDashboards, - }; -} - -const mapDispatchToProps = { - setOrganizationHomeDashboard, - setOrganizationTimezone, - setOrganizationTheme, - updateOrganizationPreferences, -}; - -export default connect(mapStateToProps, mapDispatchToProps)(OrgPreferences); diff --git a/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap b/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap index 28806d2bf1d..582d626d315 100644 --- a/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap +++ b/public/app/features/org/__snapshots__/OrgDetailsPage.test.tsx.snap @@ -29,7 +29,9 @@ exports[`Render should render organization and preferences 1`] = ` onSubmit={[Function]} orgName="Cool org" /> - +
    diff --git a/public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap b/public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap deleted file mode 100644 index 06bf464a4a0..00000000000 --- a/public/app/features/org/__snapshots__/OrgPreferences.test.tsx.snap +++ /dev/null @@ -1,136 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Render should render component 1`] = ` -
    -

    - Preferences -

    -
    - - UI Theme - - -
    -
    - - Home Dashboard - - -
    -
    - - -
    -
    - -
    -
    -`; diff --git a/public/app/features/org/state/actions.ts b/public/app/features/org/state/actions.ts index 4df9083c323..aeec8297ea6 100644 --- a/public/app/features/org/state/actions.ts +++ b/public/app/features/org/state/actions.ts @@ -1,16 +1,12 @@ import { ThunkAction } from 'redux-thunk'; -import { Organization, OrganizationPreferences, StoreState } from 'app/types'; -import { getBackendSrv } from '../../../core/services/backend_srv'; +import { Organization, StoreState } from 'app/types'; +import { getBackendSrv } from 'app/core/services/backend_srv'; type ThunkResult = ThunkAction; export enum ActionTypes { LoadOrganization = 'LOAD_ORGANISATION', - LoadPreferences = 'LOAD_PREFERENCES', SetOrganizationName = 'SET_ORGANIZATION_NAME', - SetOrganizationTheme = 'SET_ORGANIZATION_THEME', - SetOrganizationHomeDashboard = 'SET_ORGANIZATION_HOME_DASHBOARD', - SetOrganizationTimezone = 'SET_ORGANIZATION_TIMEZONE', } interface LoadOrganizationAction { @@ -18,68 +14,22 @@ interface LoadOrganizationAction { payload: Organization; } -interface LoadPreferencesAction { - type: ActionTypes.LoadPreferences; - payload: OrganizationPreferences; -} - interface SetOrganizationNameAction { type: ActionTypes.SetOrganizationName; payload: string; } -interface SetOrganizationThemeAction { - type: ActionTypes.SetOrganizationTheme; - payload: string; -} - -interface SetOrganizationHomeDashboardAction { - type: ActionTypes.SetOrganizationHomeDashboard; - payload: number; -} - -interface SetOrganizationTimezoneAction { - type: ActionTypes.SetOrganizationTimezone; - payload: string; -} - const organisationLoaded = (organisation: Organization) => ({ type: ActionTypes.LoadOrganization, payload: organisation, }); -const preferencesLoaded = (preferences: OrganizationPreferences) => ({ - type: ActionTypes.LoadPreferences, - payload: preferences, -}); - export const setOrganizationName = (orgName: string) => ({ type: ActionTypes.SetOrganizationName, payload: orgName, }); -export const setOrganizationTheme = (theme: string) => ({ - type: ActionTypes.SetOrganizationTheme, - payload: theme, -}); - -export const setOrganizationHomeDashboard = (id: number) => ({ - type: ActionTypes.SetOrganizationHomeDashboard, - payload: id, -}); - -export const setOrganizationTimezone = (timezone: string) => ({ - type: ActionTypes.SetOrganizationTimezone, - payload: timezone, -}); - -export type Action = - | LoadOrganizationAction - | LoadPreferencesAction - | SetOrganizationNameAction - | SetOrganizationThemeAction - | SetOrganizationHomeDashboardAction - | SetOrganizationTimezoneAction; +export type Action = LoadOrganizationAction | SetOrganizationNameAction; export function loadOrganization(): ThunkResult { return async dispatch => { @@ -90,13 +40,6 @@ export function loadOrganization(): ThunkResult { }; } -export function loadOrganizationPreferences(): ThunkResult { - return async dispatch => { - const preferencesResponse = await getBackendSrv().get('/api/org/preferences'); - dispatch(preferencesLoaded(preferencesResponse)); - }; -} - export function updateOrganization() { return async (dispatch, getStore) => { const organization = getStore().organization.organization; @@ -106,13 +49,3 @@ export function updateOrganization() { dispatch(loadOrganization()); }; } - -export function updateOrganizationPreferences() { - return async (dispatch, getStore) => { - const preferences = getStore().organization.preferences; - - await getBackendSrv().put('/api/org/preferences', preferences); - - window.location.reload(); - }; -} diff --git a/public/app/features/org/state/reducers.ts b/public/app/features/org/state/reducers.ts index b79f915a731..acde6d17e5f 100644 --- a/public/app/features/org/state/reducers.ts +++ b/public/app/features/org/state/reducers.ts @@ -1,9 +1,8 @@ -import { Organization, OrganizationPreferences, OrganizationState } from 'app/types'; +import { Organization, OrganizationState } from 'app/types'; import { Action, ActionTypes } from './actions'; const initialState: OrganizationState = { organization: {} as Organization, - preferences: {} as OrganizationPreferences, }; const organizationReducer = (state = initialState, action: Action): OrganizationState => { @@ -11,20 +10,8 @@ const organizationReducer = (state = initialState, action: Action): Organization case ActionTypes.LoadOrganization: return { ...state, organization: action.payload }; - case ActionTypes.LoadPreferences: - return { ...state, preferences: action.payload }; - case ActionTypes.SetOrganizationName: return { ...state, organization: { ...state.organization, name: action.payload } }; - - case ActionTypes.SetOrganizationTheme: - return { ...state, preferences: { ...state.preferences, theme: action.payload } }; - - case ActionTypes.SetOrganizationHomeDashboard: - return { ...state, preferences: { ...state.preferences, homeDashboardId: action.payload } }; - - case ActionTypes.SetOrganizationTimezone: - return { ...state, preferences: { ...state.preferences, timezone: action.payload } }; } return state; diff --git a/public/app/features/panel/metrics_panel_ctrl.ts b/public/app/features/panel/metrics_panel_ctrl.ts index e517c48bb59..9af4eb510a9 100644 --- a/public/app/features/panel/metrics_panel_ctrl.ts +++ b/public/app/features/panel/metrics_panel_ctrl.ts @@ -1,13 +1,12 @@ -import $ from 'jquery'; import _ from 'lodash'; -import config from 'app/core/config'; import kbn from 'app/core/utils/kbn'; +import config from 'app/core/config'; + import { PanelCtrl } from 'app/features/panel/panel_ctrl'; -import * as rangeUtil from 'app/core/utils/rangeutil'; -import * as dateMath from 'app/core/utils/datemath'; import { getExploreUrl } from 'app/core/utils/explore'; import { metricsTabDirective } from './metrics_tab'; +import { applyPanelTimeOverrides, getResolution } from 'app/features/dashboard/utils/panel'; class MetricsPanelCtrl extends PanelCtrl { scope: any; @@ -28,7 +27,6 @@ class MetricsPanelCtrl extends PanelCtrl { dataStream: any; dataSubscription: any; dataList: any; - nextRefId: string; constructor($scope, $injector) { super($scope, $injector); @@ -134,14 +132,11 @@ class MetricsPanelCtrl extends PanelCtrl { updateTimeRange(datasource?) { this.datasource = datasource || this.datasource; this.range = this.timeSrv.timeRange(); + this.resolution = getResolution(this.panel); - this.applyPanelTimeOverrides(); - - if (this.panel.maxDataPoints) { - this.resolution = this.panel.maxDataPoints; - } else { - this.resolution = Math.ceil($(window).width() * (this.panel.gridPos.w / 24)); - } + const newTimeData = applyPanelTimeOverrides(this.panel, this.range); + this.timeInfo = newTimeData.timeInfo; + this.range = newTimeData.timeRange; this.calculateInterval(); @@ -163,48 +158,6 @@ class MetricsPanelCtrl extends PanelCtrl { this.intervalMs = res.intervalMs; } - applyPanelTimeOverrides() { - this.timeInfo = ''; - - // check panel time overrrides - if (this.panel.timeFrom) { - const timeFromInterpolated = this.templateSrv.replace(this.panel.timeFrom, this.panel.scopedVars); - const timeFromInfo = rangeUtil.describeTextRange(timeFromInterpolated); - if (timeFromInfo.invalid) { - this.timeInfo = 'invalid time override'; - return; - } - - if (_.isString(this.range.raw.from)) { - const timeFromDate = dateMath.parse(timeFromInfo.from); - this.timeInfo = timeFromInfo.display; - this.range.from = timeFromDate; - this.range.to = dateMath.parse(timeFromInfo.to); - this.range.raw.from = timeFromInfo.from; - this.range.raw.to = timeFromInfo.to; - } - } - - if (this.panel.timeShift) { - const timeShiftInterpolated = this.templateSrv.replace(this.panel.timeShift, this.panel.scopedVars); - const timeShiftInfo = rangeUtil.describeTextRange(timeShiftInterpolated); - if (timeShiftInfo.invalid) { - this.timeInfo = 'invalid timeshift'; - return; - } - - const timeShift = '-' + timeShiftInterpolated; - this.timeInfo += ' timeshift ' + timeShift; - this.range.from = dateMath.parseDateMath(timeShift, this.range.from, false); - this.range.to = dateMath.parseDateMath(timeShift, this.range.to, true); - this.range.raw = { from: this.range.from, to: this.range.to }; - } - - if (this.panel.hideTimeOverride) { - this.timeInfo = ''; - } - } - issueQueries(datasource) { this.datasource = datasource; @@ -309,25 +262,6 @@ class MetricsPanelCtrl extends PanelCtrl { this.$timeout(() => this.$location.url(url)); } } - - addQuery(target) { - target.refId = this.dashboard.getNextQueryLetter(this.panel); - - this.panel.targets.push(target); - this.nextRefId = this.dashboard.getNextQueryLetter(this.panel); - } - - removeQuery(target) { - const index = _.indexOf(this.panel.targets, target); - this.panel.targets.splice(index, 1); - this.nextRefId = this.dashboard.getNextQueryLetter(this.panel); - this.refresh(); - } - - moveQuery(target, direction) { - const index = _.indexOf(this.panel.targets, target); - _.move(this.panel.targets, index, index + direction); - } } export { MetricsPanelCtrl }; diff --git a/public/app/features/panel/metrics_tab.ts b/public/app/features/panel/metrics_tab.ts index f520b5eefc0..bf09e7f37d4 100644 --- a/public/app/features/panel/metrics_tab.ts +++ b/public/app/features/panel/metrics_tab.ts @@ -5,6 +5,7 @@ import Remarkable from 'remarkable'; // Services & utils import coreModule from 'app/core/core_module'; import config from 'app/core/config'; +import { Emitter } from 'app/core/utils/emitter'; // Types import { DashboardModel } from '../dashboard/dashboard_model'; @@ -25,6 +26,7 @@ export class MetricsTabCtrl { hasQueryHelp: boolean; helpHtml: string; queryOptions: any; + events: Emitter; /** @ngInject */ constructor($scope, private $sce, datasourceSrv, private backendSrv) { @@ -39,6 +41,10 @@ export class MetricsTabCtrl { this.datasources = datasourceSrv.getMetricSources(); this.panelDsValue = this.panelCtrl.panel.datasource; + // addded here as old query controller expects this on panelCtrl but + // they are getting MetricsTabCtrl instead + this.events = this.panel.events; + for (const ds of this.datasources) { if (ds.value === this.panelDsValue) { this.datasourceInstance = ds; @@ -48,7 +54,7 @@ export class MetricsTabCtrl { this.addQueryDropdown = { text: 'Add Query', value: null, fake: true }; // update next ref id - this.panelCtrl.nextRefId = this.dashboard.getNextQueryLetter(this.panel); + this.nextRefId = this.dashboard.getNextQueryLetter(this.panel); this.updateDatasourceOptions(); } @@ -112,10 +118,6 @@ export class MetricsTabCtrl { this.addQueryDropdown = { text: 'Add Query', value: null, fake: true }; } - addQuery() { - this.panelCtrl.addQuery({ isNew: true }); - } - toggleHelp() { this.optionsOpen = false; this.queryTroubleshooterOpen = false; @@ -138,6 +140,35 @@ export class MetricsTabCtrl { this.optionsOpen = false; this.queryTroubleshooterOpen = !this.queryTroubleshooterOpen; } + + addQuery(query?) { + query = query || {}; + query.refId = this.dashboard.getNextQueryLetter(this.panel); + query.isNew = true; + + this.panel.targets.push(query); + this.nextRefId = this.dashboard.getNextQueryLetter(this.panel); + } + + refresh() { + this.panel.refresh(); + } + + render() { + this.panel.render(); + } + + removeQuery(target) { + const index = _.indexOf(this.panel.targets, target); + this.panel.targets.splice(index, 1); + this.nextRefId = this.dashboard.getNextQueryLetter(this.panel); + this.panel.refresh(); + } + + moveQuery(target, direction) { + const index = _.indexOf(this.panel.targets, target); + _.move(this.panel.targets, index, index + direction); + } } /** @ngInject */ diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 92932142690..420210be380 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -1,20 +1,18 @@ -import config from 'app/core/config'; import _ from 'lodash'; import $ from 'jquery'; +import Remarkable from 'remarkable'; + +import config from 'app/core/config'; import { profiler } from 'app/core/core'; +import { Emitter } from 'app/core/core'; import { duplicatePanel, copyPanel as copyPanelUtil, editPanelJson as editPanelJsonUtil, sharePanel as sharePanelUtil, } from 'app/features/dashboard/utils/panel'; -import Remarkable from 'remarkable'; -import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants'; -const TITLE_HEIGHT = 27; -const PANEL_BORDER = 2; - -import { Emitter } from 'app/core/core'; +import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants'; export class PanelCtrl { panel: any; @@ -236,7 +234,7 @@ export class PanelCtrl { this.initEditMode(); } - this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT); + this.height = this.containerHeight - (PANEL_BORDER + PANEL_HEADER_HEIGHT); } render(payload?) { diff --git a/public/app/features/panel/panel_directive.ts b/public/app/features/panel/panel_directive.ts index 77ebf754b3a..2dcdd22e97e 100644 --- a/public/app/features/panel/panel_directive.ts +++ b/public/app/features/panel/panel_directive.ts @@ -44,8 +44,8 @@ const panelTemplate = ` -
    @@ -80,16 +80,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { let lastAlertState; let hasAlertRule; - function mouseEnter() { - panelContainer.toggleClass('panel-hover-highlight', true); - ctrl.dashboard.setPanelFocus(ctrl.panel.id); - } - - function mouseLeave() { - panelContainer.toggleClass('panel-hover-highlight', false); - ctrl.dashboard.setPanelFocus(0); - } - function resizeScrollableContent() { if (panelScrollbar) { panelScrollbar.update(); @@ -212,9 +202,6 @@ module.directive('grafanaPanel', ($rootScope, $document, $timeout) => { scope.$apply(ctrl.openInspector.bind(ctrl)); }); - elem.on('mouseenter', mouseEnter); - elem.on('mouseleave', mouseLeave); - scope.$on('$destroy', () => { elem.off(); cornerInfoElem.off(); diff --git a/public/app/features/panel/partials/metrics_tab.html b/public/app/features/panel/partials/metrics_tab.html index 815a99d6b74..7899312f5c3 100644 --- a/public/app/features/panel/partials/metrics_tab.html +++ b/public/app/features/panel/partials/metrics_tab.html @@ -83,7 +83,7 @@ - {{ctrl.panelCtrl.nextRefId}} + {{ctrl.nextRefId}} - - Back -
    - -
    -
    -
    - - -
    diff --git a/public/app/features/plugins/plugin_component.ts b/public/app/features/plugins/plugin_component.ts index 142eb942a30..ff964f6ed4c 100644 --- a/public/app/features/plugins/plugin_component.ts +++ b/public/app/features/plugins/plugin_component.ts @@ -5,8 +5,6 @@ import config from 'app/core/config'; import coreModule from 'app/core/core_module'; import { importPluginModule } from './plugin_loader'; -import { UnknownPanelCtrl } from 'app/plugins/panel/unknown/module'; - /** @ngInject */ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $templateCache, $timeout) { function getTemplate(component) { @@ -69,7 +67,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ }; const panelInfo = config.panels[scope.panel.type]; - let panelCtrlPromise = Promise.resolve(UnknownPanelCtrl); + let panelCtrlPromise = Promise.resolve(null); if (panelInfo) { panelCtrlPromise = importPluginModule(panelInfo.module).then(panelModule => { return panelModule.PanelCtrl; @@ -118,7 +116,7 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ bindings: { target: '=', panelCtrl: '=', datasource: '=' }, attrs: { target: 'target', - 'panel-ctrl': 'ctrl.panelCtrl', + 'panel-ctrl': 'ctrl', datasource: 'datasource', }, Component: dsModule.QueryCtrl, @@ -149,6 +147,14 @@ function pluginDirectiveLoader($compile, datasourceSrv, $rootScope, $q, $http, $ return { notFound: true }; } + scope.$watch( + 'ctrl.current', + () => { + scope.onModelChanged(scope.ctrl.current); + }, + true + ); + return { baseUrl: dsMeta.baseUrl, name: 'ds-config-' + dsMeta.id, diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts deleted file mode 100644 index 44d3d31f996..00000000000 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ /dev/null @@ -1,179 +0,0 @@ -import angular from 'angular'; -import _ from 'lodash'; -import Remarkable from 'remarkable'; - -export class PluginEditCtrl { - model: any; - pluginIcon: string; - pluginId: any; - includes: any; - readmeHtml: any; - includedDatasources: any; - tab: string; - navModel: any; - hasDashboards: any; - preUpdateHook: () => any; - postUpdateHook: () => any; - - /** @ngInject */ - constructor(private $scope, private $rootScope, private backendSrv, private $sce, private $routeParams, navModelSrv) { - this.pluginId = $routeParams.pluginId; - this.preUpdateHook = () => Promise.resolve(); - this.postUpdateHook = () => Promise.resolve(); - - this.init(); - } - - setNavModel(model) { - let defaultTab = 'readme'; - - this.navModel = { - main: { - img: model.info.logos.large, - subTitle: model.info.author.name, - url: '', - text: model.name, - breadcrumbs: [{ title: 'Plugins', url: 'plugins' }], - children: [ - { - icon: 'fa fa-fw fa-file-text-o', - id: 'readme', - text: 'Readme', - url: `plugins/${this.model.id}/edit?tab=readme`, - }, - ], - }, - }; - - if (model.type === 'app') { - this.navModel.main.children.push({ - icon: 'gicon gicon-cog', - id: 'config', - text: 'Config', - url: `plugins/${this.model.id}/edit?tab=config`, - }); - - const hasDashboards = _.find(model.includes, { type: 'dashboard' }); - - if (hasDashboards) { - this.navModel.main.children.push({ - icon: 'gicon gicon-dashboard', - id: 'dashboards', - text: 'Dashboards', - url: `plugins/${this.model.id}/edit?tab=dashboards`, - }); - } - - defaultTab = 'config'; - } - - this.tab = this.$routeParams.tab || defaultTab; - - for (const tab of this.navModel.main.children) { - if (tab.id === this.tab) { - tab.active = true; - } - } - } - - init() { - return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => { - this.model = result; - this.pluginIcon = this.getPluginIcon(this.model.type); - - this.model.dependencies.plugins.forEach(plug => { - plug.icon = this.getPluginIcon(plug.type); - }); - - this.includes = _.map(result.includes, plug => { - plug.icon = this.getPluginIcon(plug.type); - return plug; - }); - - this.setNavModel(this.model); - return this.initReadme(); - }); - } - - initReadme() { - return this.backendSrv.get(`/api/plugins/${this.pluginId}/markdown/readme`).then(res => { - const md = new Remarkable({ - linkify: true, - }); - this.readmeHtml = this.$sce.trustAsHtml(md.render(res)); - }); - } - - getPluginIcon(type) { - switch (type) { - case 'datasource': - return 'icon-gf icon-gf-datasources'; - case 'panel': - return 'icon-gf icon-gf-panel'; - case 'app': - return 'icon-gf icon-gf-apps'; - case 'page': - return 'icon-gf icon-gf-endpoint-tiny'; - case 'dashboard': - return 'icon-gf icon-gf-dashboard'; - default: - return 'icon-gf icon-gf-apps'; - } - } - - update() { - this.preUpdateHook() - .then(() => { - const updateCmd = _.extend( - { - enabled: this.model.enabled, - pinned: this.model.pinned, - jsonData: this.model.jsonData, - secureJsonData: this.model.secureJsonData, - }, - {} - ); - return this.backendSrv.post(`/api/plugins/${this.pluginId}/settings`, updateCmd); - }) - .then(this.postUpdateHook) - .then(res => { - window.location.href = window.location.href; - }); - } - - importDashboards() { - return Promise.resolve(); - } - - setPreUpdateHook(callback: () => any) { - this.preUpdateHook = callback; - } - - setPostUpdateHook(callback: () => any) { - this.postUpdateHook = callback; - } - - updateAvailable() { - const modalScope = this.$scope.$new(true); - modalScope.plugin = this.model; - - this.$rootScope.appEvent('show-modal', { - src: 'public/app/features/plugins/partials/update_instructions.html', - scope: modalScope, - }); - } - - enable() { - this.model.enabled = true; - this.model.pinned = true; - this.update(); - } - - disable() { - this.model.enabled = false; - this.model.pinned = false; - this.update(); - } -} - -angular.module('grafana.controllers').controller('PluginEditCtrl', PluginEditCtrl); diff --git a/public/app/features/profile/PrefControlCtrl.ts b/public/app/features/profile/PrefControlCtrl.ts index 74dde250eec..39a01bd0e2d 100644 --- a/public/app/features/profile/PrefControlCtrl.ts +++ b/public/app/features/profile/PrefControlCtrl.ts @@ -1,92 +1,4 @@ -import config from 'app/core/config'; -import coreModule from 'app/core/core_module'; +import { react2AngularDirective } from 'app/core/utils/react2angular'; +import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences'; -export class PrefsControlCtrl { - prefs: any; - oldTheme: any; - prefsForm: any; - mode: string; - - timezones: any = [ - { value: '', text: 'Default' }, - { value: 'browser', text: 'Local browser time' }, - { value: 'utc', text: 'UTC' }, - ]; - themes: any = [{ value: '', text: 'Default' }, { value: 'dark', text: 'Dark' }, { value: 'light', text: 'Light' }]; - - /** @ngInject */ - constructor(private backendSrv, private $location) {} - - $onInit() { - return this.backendSrv.get(`/api/${this.mode}/preferences`).then(prefs => { - this.prefs = prefs; - this.oldTheme = prefs.theme; - }); - } - - updatePrefs() { - if (!this.prefsForm.$valid) { - return; - } - - const cmd = { - theme: this.prefs.theme, - timezone: this.prefs.timezone, - homeDashboardId: this.prefs.homeDashboardId, - }; - - this.backendSrv.put(`/api/${this.mode}/preferences`, cmd).then(() => { - window.location.href = config.appSubUrl + this.$location.path(); - }); - } -} - -const template = ` -
    -

    Preferences

    - -
    - UI Theme -
    - -
    -
    - -
    - - Home Dashboard - - Not finding dashboard you want? Star it first, then it should appear in this select box. - - - - -
    - -
    - -
    - -
    -
    - -
    - -
    -
    -`; - -export function prefsControlDirective() { - return { - restrict: 'E', - controller: PrefsControlCtrl, - bindToController: true, - controllerAs: 'ctrl', - template: template, - scope: { - mode: '@', - }, - }; -} - -coreModule.directive('prefsControl', prefsControlDirective); +react2AngularDirective('prefsControl', SharedPreferences, ['resourceUri']); diff --git a/public/app/features/profile/partials/profile.html b/public/app/features/profile/partials/profile.html index 7858e00c683..543b0e2e39a 100644 --- a/public/app/features/profile/partials/profile.html +++ b/public/app/features/profile/partials/profile.html @@ -24,7 +24,7 @@
    - +

    Teams

    diff --git a/public/app/features/teams/TeamPages.test.tsx b/public/app/features/teams/TeamPages.test.tsx index 65084d0dc47..5d751f46989 100644 --- a/public/app/features/teams/TeamPages.test.tsx +++ b/public/app/features/teams/TeamPages.test.tsx @@ -43,10 +43,15 @@ describe('Render', () => { expect(wrapper).toMatchSnapshot(); }); - it('should render settings page', () => { + it('should render settings and preferences page', () => { const { wrapper } = setup({ team: getMockTeam(), pageName: 'settings', + preferences: { + homeDashboardId: 1, + theme: 'Default', + timezone: 'Default', + }, }); expect(wrapper).toMatchSnapshot(); diff --git a/public/app/features/teams/TeamPages.tsx b/public/app/features/teams/TeamPages.tsx index 3dc5a9f6f15..38ba23262ba 100644 --- a/public/app/features/teams/TeamPages.tsx +++ b/public/app/features/teams/TeamPages.tsx @@ -41,14 +41,14 @@ export class TeamPages extends PureComponent { }; } - componentDidMount() { - this.fetchTeam(); + async componentDidMount() { + await this.fetchTeam(); } async fetchTeam() { const { loadTeam, teamId } = this.props; - await loadTeam(teamId); + return await loadTeam(teamId); } getCurrentPage() { @@ -67,7 +67,6 @@ export class TeamPages extends PureComponent { case PageTypes.Settings: return ; - case PageTypes.GroupSync: return isSyncEnabled && ; } diff --git a/public/app/features/teams/TeamSettings.tsx b/public/app/features/teams/TeamSettings.tsx index 45977de95bf..35c306d664e 100644 --- a/public/app/features/teams/TeamSettings.tsx +++ b/public/app/features/teams/TeamSettings.tsx @@ -1,10 +1,12 @@ import React from 'react'; import { connect } from 'react-redux'; + import { Label } from 'app/core/components/Label/Label'; -import { Team } from '../../types'; +import { SharedPreferences } from 'app/core/components/SharedPreferences/SharedPreferences'; import { updateTeam } from './state/actions'; -import { getRouteParamsId } from '../../core/selectors/location'; +import { getRouteParamsId } from 'app/core/selectors/location'; import { getTeam } from './state/selectors'; +import { Team } from 'app/types'; export interface Props { team: Team; @@ -41,6 +43,7 @@ export class TeamSettings extends React.Component { }; render() { + const { team } = this.props; const { name, email } = this.state; return ( @@ -76,6 +79,7 @@ export class TeamSettings extends React.Component {
    +
    ); } diff --git a/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap b/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap index f32b8211d2c..f966c52983d 100644 --- a/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap +++ b/public/app/features/teams/__snapshots__/TeamPages.test.tsx.snap @@ -36,7 +36,7 @@ exports[`Render should render member page if team not empty 1`] = `
    `; -exports[`Render should render settings page 1`] = ` +exports[`Render should render settings and preferences page 1`] = `
    +
    `; diff --git a/public/app/features/teams/state/selectors.test.ts b/public/app/features/teams/state/selectors.test.ts index 3764a9355c6..e88fbdfd4b1 100644 --- a/public/app/features/teams/state/selectors.test.ts +++ b/public/app/features/teams/state/selectors.test.ts @@ -10,7 +10,6 @@ describe('Teams selectors', () => { const mockState: TeamsState = { teams: mockTeams, searchQuery: '', hasFetched: false }; const teams = getTeams(mockState); - expect(teams).toEqual(mockTeams); }); @@ -18,7 +17,6 @@ describe('Teams selectors', () => { const mockState: TeamsState = { teams: mockTeams, searchQuery: '5', hasFetched: false }; const teams = getTeams(mockState); - expect(teams.length).toEqual(1); }); }); @@ -29,10 +27,14 @@ describe('Team selectors', () => { const mockTeam = getMockTeam(); it('should return team if matching with location team', () => { - const mockState: TeamState = { team: mockTeam, searchMemberQuery: '', members: [], groups: [] }; + const mockState: TeamState = { + team: mockTeam, + searchMemberQuery: '', + members: [], + groups: [], + }; const team = getTeam(mockState, '1'); - expect(team).toEqual(mockTeam); }); }); @@ -49,7 +51,6 @@ describe('Team selectors', () => { }; const members = getTeamMembers(mockState); - expect(members).toEqual(mockTeamMembers); }); }); diff --git a/public/app/plugins/datasource/cloudwatch/datasource.ts b/public/app/plugins/datasource/cloudwatch/datasource.ts index 3eb8eff2d09..d9fb3450524 100644 --- a/public/app/plugins/datasource/cloudwatch/datasource.ts +++ b/public/app/plugins/datasource/cloudwatch/datasource.ts @@ -362,14 +362,9 @@ export default class CloudWatchDatasource { const metricName = 'EstimatedCharges'; const dimensions = {}; - return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then( - () => { - return { status: 'success', message: 'Data source is working' }; - }, - err => { - return { status: 'error', message: err.message }; - } - ); + return this.getDimensionValues(region, namespace, metricName, 'ServiceName', dimensions).then(() => { + return { status: 'success', message: 'Data source is working' }; + }); } awsRequest(url, data) { diff --git a/public/app/plugins/datasource/elasticsearch/config_ctrl.ts b/public/app/plugins/datasource/elasticsearch/config_ctrl.ts index 154ff9bcb91..8a90d2dc3bd 100644 --- a/public/app/plugins/datasource/elasticsearch/config_ctrl.ts +++ b/public/app/plugins/datasource/elasticsearch/config_ctrl.ts @@ -28,9 +28,15 @@ export class ElasticConfigCtrl { ]; indexPatternTypeChanged() { - const def = _.find(this.indexPatternTypes, { - value: this.current.jsonData.interval, - }); - this.current.database = def.example || 'es-index-name'; + if ( + !this.current.database || + this.current.database.length === 0 || + this.current.database.startsWith('[logstash-]') + ) { + const def = _.find(this.indexPatternTypes, { + value: this.current.jsonData.interval, + }); + this.current.database = def.example || 'es-index-name'; + } } } diff --git a/public/app/plugins/datasource/elasticsearch/metric_agg.ts b/public/app/plugins/datasource/elasticsearch/metric_agg.ts index 1dd0d892360..56f874d90b9 100644 --- a/public/app/plugins/datasource/elasticsearch/metric_agg.ts +++ b/public/app/plugins/datasource/elasticsearch/metric_agg.ts @@ -160,6 +160,12 @@ export class ElasticMetricAggCtrl { $scope.agg.settings = {}; $scope.agg.meta = {}; $scope.showOptions = false; + + // reset back to metric/group by query + if ($scope.target.bucketAggs.length === 0 && $scope.agg.type !== 'raw_document') { + $scope.target.bucketAggs = [queryDef.defaultBucketAgg()]; + } + $scope.updatePipelineAggOptions(); $scope.onChange(); }; diff --git a/public/app/plugins/datasource/elasticsearch/query_builder.ts b/public/app/plugins/datasource/elasticsearch/query_builder.ts index 21af0ba9b80..efdeee68370 100644 --- a/public/app/plugins/datasource/elasticsearch/query_builder.ts +++ b/public/app/plugins/datasource/elasticsearch/query_builder.ts @@ -181,8 +181,8 @@ export class ElasticQueryBuilder { build(target, adhocFilters?, queryString?) { // make sure query has defaults; - target.metrics = target.metrics || [{ type: 'count', id: '1' }]; - target.bucketAggs = target.bucketAggs || [{ type: 'date_histogram', id: '2', settings: { interval: 'auto' } }]; + target.metrics = target.metrics || [queryDef.defaultMetricAgg()]; + target.bucketAggs = target.bucketAggs || [queryDef.defaultBucketAgg()]; target.timeField = this.timeField; let i, nestedAggs, metric; diff --git a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts index 422d35dd277..81dbd5b8f8a 100644 --- a/public/app/plugins/datasource/elasticsearch/query_ctrl.ts +++ b/public/app/plugins/datasource/elasticsearch/query_ctrl.ts @@ -17,6 +17,19 @@ export class ElasticQueryCtrl extends QueryCtrl { super($scope, $injector); this.esVersion = this.datasource.esVersion; + + this.target = this.target || {}; + this.target.metrics = this.target.metrics || [queryDef.defaultMetricAgg()]; + this.target.bucketAggs = this.target.bucketAggs || [queryDef.defaultBucketAgg()]; + + if (this.target.bucketAggs.length === 0) { + const metric = this.target.metrics[0]; + if (!metric || metric.type !== 'raw_document') { + this.target.bucketAggs = [queryDef.defaultBucketAgg()]; + } + this.refresh(); + } + this.queryUpdated(); } diff --git a/public/app/plugins/datasource/elasticsearch/query_def.ts b/public/app/plugins/datasource/elasticsearch/query_def.ts index dd65a8b373e..3ea5945f54d 100644 --- a/public/app/plugins/datasource/elasticsearch/query_def.ts +++ b/public/app/plugins/datasource/elasticsearch/query_def.ts @@ -228,3 +228,11 @@ export function describeOrderBy(orderBy, target) { return 'metric not found'; } } + +export function defaultMetricAgg() { + return { type: 'count', id: '1' }; +} + +export function defaultBucketAgg() { + return { type: 'date_histogram', id: '2', settings: { interval: 'auto' } }; +} diff --git a/public/app/plugins/panel/gauge/GaugeOptions.tsx b/public/app/plugins/panel/gauge/GaugeOptions.tsx new file mode 100644 index 00000000000..23c773f963f --- /dev/null +++ b/public/app/plugins/panel/gauge/GaugeOptions.tsx @@ -0,0 +1,16 @@ +import React, { PureComponent } from 'react'; +import { PanelOptionsProps } from 'app/types'; + +interface Props {} + +export class GaugeOptions extends PureComponent> { + render() { + return ( +
    +
    +
    Draw Modes
    +
    +
    + ); + } +} diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index 391f72ae9c5..6f24d407e98 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -13,7 +13,7 @@ interface Props extends PanelProps {} export class GaugePanel extends PureComponent { render() { - const { timeSeries } = this.props; + const { timeSeries, width, height } = this.props; const { unit } = this.props.options; const vmSeries = getTimeSeriesVMs({ @@ -21,7 +21,17 @@ export class GaugePanel extends PureComponent { nullValueMode: NullValueMode.Ignore, }); - return ; + return ( + + ); } } @@ -45,4 +55,4 @@ export class GaugeOptions extends PureComponent> { } } -export { GaugePanel as PanelComponent, GaugeOptions as PanelOptionsComponent }; +export { GaugePanel as Panel, GaugeOptions as PanelOptions }; diff --git a/public/app/plugins/panel/text2/img/icn-graph-panel.svg b/public/app/plugins/panel/graph2/img/icn-graph-panel.svg similarity index 100% rename from public/app/plugins/panel/text2/img/icn-graph-panel.svg rename to public/app/plugins/panel/graph2/img/icn-graph-panel.svg diff --git a/public/app/plugins/panel/graph2/module.tsx b/public/app/plugins/panel/graph2/module.tsx index b132d3374f1..f2c1344d782 100644 --- a/public/app/plugins/panel/graph2/module.tsx +++ b/public/app/plugins/panel/graph2/module.tsx @@ -11,8 +11,6 @@ interface Options { showBars: boolean; showLines: boolean; showPoints: boolean; - - onChange: (options: Options) => void; } interface Props extends PanelProps {} @@ -23,7 +21,7 @@ export class Graph2 extends PureComponent { } render() { - const { timeSeries, timeRange } = this.props; + const { timeSeries, timeRange, width, height } = this.props; const { showLines, showBars, showPoints } = this.props.options; const vmSeries = getTimeSeriesVMs({ @@ -38,6 +36,8 @@ export class Graph2 extends PureComponent { showLines={showLines} showPoints={showPoints} showBars={showBars} + width={width} + height={height} /> ); } @@ -61,15 +61,30 @@ export class GraphOptions extends PureComponent> { return (
    -
    -
    Draw Modes
    - - - +
    +
    Display Options
    +
    +
    Draw Modes
    + + + +
    +
    +
    Test Options
    + + + +
    +
    +
    +
    Axes
    +
    +
    +
    Thresholds
    ); } } -export { Graph2 as PanelComponent, GraphOptions as PanelOptionsComponent }; +export { Graph2 as Panel, GraphOptions as PanelOptions }; diff --git a/public/app/plugins/panel/graph2/plugin.json b/public/app/plugins/panel/graph2/plugin.json index 2e674ab3557..9cb6a1f78a4 100644 --- a/public/app/plugins/panel/graph2/plugin.json +++ b/public/app/plugins/panel/graph2/plugin.json @@ -11,8 +11,8 @@ "url": "https://grafana.com" }, "logos": { - "small": "img/icn-text-panel.svg", - "large": "img/icn-text-panel.svg" + "small": "img/icn-graph-panel.svg", + "large": "img/icn-graph-panel.svg" } } } diff --git a/public/app/plugins/panel/table/module.ts b/public/app/plugins/panel/table/module.ts index 193a9b47c54..a1366662955 100644 --- a/public/app/plugins/panel/table/module.ts +++ b/public/app/plugins/panel/table/module.ts @@ -154,11 +154,6 @@ class TablePanelCtrl extends MetricsPanelCtrl { this.render(); } - moveQuery(target, direction) { - super.moveQuery(target, direction); - super.refresh(); - } - exportCsv() { const scope = this.$scope.$new(true); scope.tableData = this.renderer.render_values(); diff --git a/public/app/plugins/panel/graph2/img/icn-text-panel.svg b/public/app/plugins/panel/text2/img/icn-text-panel.svg similarity index 100% rename from public/app/plugins/panel/graph2/img/icn-text-panel.svg rename to public/app/plugins/panel/text2/img/icn-text-panel.svg diff --git a/public/app/plugins/panel/text2/module.tsx b/public/app/plugins/panel/text2/module.tsx index b10dc8b545e..aaca23ccbf0 100644 --- a/public/app/plugins/panel/text2/module.tsx +++ b/public/app/plugins/panel/text2/module.tsx @@ -11,4 +11,4 @@ export class Text2 extends PureComponent { } } -export { Text2 as PanelComponent }; +export { Text2 as Panel }; diff --git a/public/app/plugins/panel/text2/plugin.json b/public/app/plugins/panel/text2/plugin.json index b1133f65e36..53885dbd0f4 100644 --- a/public/app/plugins/panel/text2/plugin.json +++ b/public/app/plugins/panel/text2/plugin.json @@ -11,8 +11,8 @@ "url": "https://grafana.com" }, "logos": { - "small": "img/icn-graph-panel.svg", - "large": "img/icn-graph-panel.svg" + "small": "img/icn-text-panel.svg", + "large": "img/icn-text-panel.svg" } } } diff --git a/public/app/plugins/panel/unknown/module.html b/public/app/plugins/panel/unknown/module.html deleted file mode 100644 index 02c4dc97fc1..00000000000 --- a/public/app/plugins/panel/unknown/module.html +++ /dev/null @@ -1,5 +0,0 @@ -
    - Unknown panel type: {{ctrl.panel.type}} -
    - - diff --git a/public/app/plugins/panel/unknown/module.ts b/public/app/plugins/panel/unknown/module.ts deleted file mode 100644 index d7229913bc5..00000000000 --- a/public/app/plugins/panel/unknown/module.ts +++ /dev/null @@ -1,10 +0,0 @@ -import { PanelCtrl } from 'app/features/panel/panel_ctrl'; - -export class UnknownPanelCtrl extends PanelCtrl { - static templateUrl = 'public/app/plugins/panel/unknown/module.html'; - - /** @ngInject */ - constructor($scope, $injector) { - super($scope, $injector); - } -} diff --git a/public/app/routes/ReactContainer.tsx b/public/app/routes/ReactContainer.tsx index ed4d2d21827..807608e6960 100644 --- a/public/app/routes/ReactContainer.tsx +++ b/public/app/routes/ReactContainer.tsx @@ -3,7 +3,7 @@ import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import coreModule from 'app/core/core_module'; -import { store } from 'app/store/configureStore'; +import { store } from 'app/store/store'; import { BackendSrv } from 'app/core/services/backend_srv'; import { DatasourceSrv } from 'app/features/plugins/datasource_srv'; import { ContextSrv } from 'app/core/services/context_srv'; diff --git a/public/app/routes/routes.ts b/public/app/routes/routes.ts index 1e9e6f130ab..41c209ac87f 100644 --- a/public/app/routes/routes.ts +++ b/public/app/routes/routes.ts @@ -14,6 +14,7 @@ import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage'; import NewDataSourcePage from '../features/datasources/NewDataSourcePage'; import UsersListPage from 'app/features/users/UsersListPage'; import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards'; +import DataSourceSettings from '../features/datasources/settings/DataSourceSettings'; import OrgDetailsPage from '../features/org/OrgDetailsPage'; import TestPage from '../features/test/TestPage'; @@ -75,10 +76,11 @@ export function setupAngularRoutes($routeProvider, $locationProvider) { component: () => DataSourcesListPage, }, }) - .when('/datasources/edit/:id', { - templateUrl: 'public/app/features/plugins/partials/ds_edit.html', - controller: 'DataSourceEditCtrl', - controllerAs: 'ctrl', + .when('/datasources/edit/:id/', { + template: '', + resolve: { + component: () => DataSourceSettings, + }, }) .when('/datasources/edit/:id/dashboards', { template: '', diff --git a/public/app/store/configureStore.ts b/public/app/store/configureStore.ts index e6d86eaa9c6..943aff80a70 100644 --- a/public/app/store/configureStore.ts +++ b/public/app/store/configureStore.ts @@ -11,6 +11,7 @@ import pluginReducers from 'app/features/plugins/state/reducers'; import dataSourcesReducers from 'app/features/datasources/state/reducers'; import usersReducers from 'app/features/users/state/reducers'; import organizationReducers from 'app/features/org/state/reducers'; +import { setStore } from './store'; const rootReducers = { ...sharedReducers, @@ -25,8 +26,6 @@ const rootReducers = { ...organizationReducers, }; -export let store; - export function addRootReducer(reducers) { Object.assign(rootReducers, ...reducers); } @@ -38,8 +37,8 @@ export function configureStore() { if (process.env.NODE_ENV !== 'production') { // DEV builds we had the logger middleware - store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger()))); + setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk, createLogger())))); } else { - store = createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk))); + setStore(createStore(rootReducer, {}, composeEnhancers(applyMiddleware(thunk)))); } } diff --git a/public/app/store/store.ts b/public/app/store/store.ts new file mode 100644 index 00000000000..c8134ae77f3 --- /dev/null +++ b/public/app/store/store.ts @@ -0,0 +1,5 @@ +export let store; + +export function setStore(newStore) { + store = newStore; +} diff --git a/public/app/types/datasources.ts b/public/app/types/datasources.ts index 5522f3a11ce..a7b4ea7ac20 100644 --- a/public/app/types/datasources.ts +++ b/public/app/types/datasources.ts @@ -13,15 +13,25 @@ export interface DataSource { user: string; database: string; basicAuth: boolean; + basicAuthPassword: string; + basicAuthUser: string; isDefault: boolean; jsonData: { authType: string; defaultRegion: string }; readOnly: boolean; + withCredentials: boolean; meta?: PluginMeta; pluginExports?: PluginExports; init?: () => void; testDatasource?: () => Promise; } +export interface DataSourceSelectItem { + name: string; + value: string | null; + meta: PluginMeta; + sort: string; +} + export interface DataSourcesState { dataSources: DataSource[]; searchQuery: string; diff --git a/public/app/types/index.ts b/public/app/types/index.ts index fc176fed7e2..bf19e52468b 100644 --- a/public/app/types/index.ts +++ b/public/app/types/index.ts @@ -7,7 +7,7 @@ import { DashboardState } from './dashboard'; import { DashboardAcl, OrgRole, PermissionLevel } from './acl'; import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys'; import { Invitee, OrgUser, User, UsersState, UserState } from './user'; -import { DataSource, DataSourcesState } from './datasources'; +import { DataSource, DataSourceSelectItem, DataSourcesState } from './datasources'; import { TimeRange, LoadingState, @@ -21,8 +21,8 @@ import { DataQueryOptions, } from './series'; import { PanelProps, PanelOptionsProps } from './panel'; -import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins'; -import { Organization, OrganizationPreferences, OrganizationState } from './organization'; +import { PluginDashboard, PluginMeta, Plugin, PanelPlugin, PluginsState } from './plugins'; +import { Organization, OrganizationState } from './organization'; import { AppNotification, AppNotificationSeverity, @@ -55,6 +55,7 @@ export { OrgRole, PermissionLevel, DataSource, + DataSourceSelectItem, PluginMeta, ApiKey, ApiKeysState, @@ -68,6 +69,7 @@ export { UsersState, TimeRange, LoadingState, + PanelPlugin, PanelProps, PanelOptionsProps, TimeSeries, @@ -81,7 +83,6 @@ export { PluginDashboard, Organization, OrganizationState, - OrganizationPreferences, AppNotification, AppNotificationsState, AppNotificationSeverity, diff --git a/public/app/types/organization.ts b/public/app/types/organization.ts index 52cb130e082..da67ead34ae 100644 --- a/public/app/types/organization.ts +++ b/public/app/types/organization.ts @@ -3,13 +3,6 @@ export interface Organization { id: number; } -export interface OrganizationPreferences { - homeDashboardId: number; - theme: string; - timezone: string; -} - export interface OrganizationState { organization: Organization; - preferences: OrganizationPreferences; } diff --git a/public/app/types/panel.ts b/public/app/types/panel.ts index e82c3711b06..88540c16f04 100644 --- a/public/app/types/panel.ts +++ b/public/app/types/panel.ts @@ -6,6 +6,8 @@ export interface PanelProps { loading: LoadingState; options: T; renderCounter: number; + width: number; + height: number; } export interface PanelOptionsProps { @@ -13,6 +15,11 @@ export interface PanelOptionsProps { onChange: (options: T) => void; } +export interface PanelSize { + width: number; + height: number; +} + export interface PanelMenuItem { type?: 'submenu' | 'divider'; text?: string; diff --git a/public/app/types/plugins.ts b/public/app/types/plugins.ts index 817777669d8..4e598382a9a 100644 --- a/public/app/types/plugins.ts +++ b/public/app/types/plugins.ts @@ -11,15 +11,14 @@ export interface PluginExports { // Panel plugin PanelCtrl?; - PanelComponent?: ComponentClass; - PanelOptionsComponent: ComponentClass; + Panel?: ComponentClass; + PanelOptions?: ComponentClass; } export interface PanelPlugin { id: string; name: string; - meta: any; - hideFromList: boolean; + hideFromList?: boolean; module: string; baseUrl: string; info: any; @@ -49,7 +48,7 @@ export interface PluginInclude { export interface PluginMetaInfo { author: { name: string; - url: string; + url?: string; }; description: string; links: string[]; @@ -57,7 +56,7 @@ export interface PluginMetaInfo { large: string; small: string; }; - screenshots: string; + screenshots: any[]; updated: string; version: string; } @@ -73,6 +72,7 @@ export interface Plugin { pinned: boolean; state: string; type: string; + module: any; } export interface PluginDashboard { diff --git a/public/app/types/series.ts b/public/app/types/series.ts index 5396880611b..62b64c2e832 100644 --- a/public/app/types/series.ts +++ b/public/app/types/series.ts @@ -62,6 +62,7 @@ export enum NullValueMode { /** View model projection of many time series */ export interface TimeSeriesVMs { [index: number]: TimeSeriesVM; + length: number; } export interface DataQueryResponse { @@ -88,4 +89,7 @@ export interface DataQueryOptions { export interface DataSourceApi { query(options: DataQueryOptions): Promise; + testDatasource(): Promise; + + interval?: string; } diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx index 200ee635b9a..15f9b6193ac 100644 --- a/public/app/viz/Gauge.tsx +++ b/public/app/viz/Gauge.tsx @@ -1,6 +1,5 @@ import React, { PureComponent } from 'react'; import $ from 'jquery'; -import { withSize } from 'react-sizeme'; import { TimeSeriesVMs } from 'app/types'; import config from '../core/config'; import kbn from '../core/utils/kbn'; @@ -12,8 +11,9 @@ interface Props { showThresholdMarkers?: boolean; thresholds?: number[]; showThresholdLables?: boolean; - size?: { width: number; height: number }; unit: { label: string; value: string }; + width: number; + height: number; } const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)']; @@ -46,12 +46,18 @@ export class Gauge extends PureComponent { } draw() { - const { maxValue, minValue, showThresholdLables, size, showThresholdMarkers, timeSeries, thresholds } = this.props; + const { + maxValue, + minValue, + showThresholdLables, + showThresholdMarkers, + timeSeries, + thresholds, + width, + height, + } = this.props; - const width = size.width; - const height = size.height; const dimension = Math.min(width, height * 1.3); - const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)'; const fontScale = parseInt('80', 10) / 100; @@ -109,8 +115,13 @@ export class Gauge extends PureComponent { }, }; + let value: string | number = 'N/A'; + if (timeSeries.length) { + value = timeSeries[0].stats.avg; + } + const plotSeries = { - data: [[0, timeSeries[0].stats.avg]], + data: [[0, value]], }; try { @@ -121,7 +132,7 @@ export class Gauge extends PureComponent { } render() { - const { height, width } = this.props.size; + const { height, width } = this.props; return (
    (this.parentElement = element)}> @@ -139,4 +150,4 @@ export class Gauge extends PureComponent { } } -export default withSize({ monitorHeight: true })(Gauge); +export default Gauge; diff --git a/public/app/viz/Graph.tsx b/public/app/viz/Graph.tsx index 566080fbc92..bdababb3e50 100644 --- a/public/app/viz/Graph.tsx +++ b/public/app/viz/Graph.tsx @@ -1,7 +1,6 @@ // Libraries import $ from 'jquery'; import React, { PureComponent } from 'react'; -import { withSize } from 'react-sizeme'; import 'vendor/flot/jquery.flot'; import 'vendor/flot/jquery.flot.time'; @@ -14,7 +13,8 @@ interface GraphProps { showLines?: boolean; showPoints?: boolean; showBars?: boolean; - size?: { width: number; height: number }; + width: number; + height: number; } export class Graph extends PureComponent { @@ -24,16 +24,10 @@ export class Graph extends PureComponent { showBars: false, }; - element: any; + element: HTMLElement; - componentDidUpdate(prevProps: GraphProps) { - if ( - prevProps.timeSeries !== this.props.timeSeries || - prevProps.timeRange !== this.props.timeRange || - prevProps.size !== this.props.size - ) { - this.draw(); - } + componentDidUpdate() { + this.draw(); } componentDidMount() { @@ -41,13 +35,13 @@ export class Graph extends PureComponent { } draw() { - const { size, timeSeries, timeRange, showLines, showBars, showPoints } = this.props; + const { width, timeSeries, timeRange, showLines, showBars, showPoints } = this.props; - if (!size) { + if (!width) { return; } - const ticks = (size.width || 0) / 100; + const ticks = width / 100; const min = timeRange.from.valueOf(); const max = timeRange.to.valueOf(); @@ -98,6 +92,7 @@ export class Graph extends PureComponent { }; try { + console.log('Graph render'); $.plot(this.element, timeSeries, flotOptions); } catch (err) { console.log('Graph rendering error', err, flotOptions, timeSeries); @@ -139,4 +134,4 @@ function time_format(ticks, min, max) { return '%H:%M'; } -export default withSize()(Graph); +export default Graph; diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index 41cb8c5c3a9..d4a95fe1fac 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -97,7 +97,8 @@ @import 'components/form_select_box'; @import 'components/user-picker'; @import 'components/description-picker'; -@import 'components/viz_editor'; +@import 'components/panel_editor'; +@import 'components/toolbar'; @import 'components/delete_button'; @import 'components/add_data_source.scss'; @import 'components/page_loader'; diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 1896e74d640..8aa01cf245d 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -77,6 +77,7 @@ $brand-gradient: linear-gradient( rgba(255, 68, 0, 0.7) 99%, rgba(255, 68, 0, 0.7) 100% ); + $page-gradient: linear-gradient(180deg, #222426 10px, rgb(22, 23, 25) 100px); // Links @@ -110,7 +111,6 @@ $divider-border-color: #555; // Graphite Target Editor $tight-form-bg: $dark-3; - $tight-form-func-bg: #333334; $tight-form-func-highlight-bg: #444445; @@ -128,6 +128,7 @@ $list-item-bg: $card-background; $list-item-hover-bg: lighten($gray-blue, 2%); $list-item-link-color: $text-color; $list-item-shadow: $card-shadow; + $empty-list-cta-bg: $gray-blue; // Scrollbars @@ -152,8 +153,8 @@ $table-bg-hover: $dark-3; $btn-primary-bg: #ff6600; $btn-primary-bg-hl: #bc3e06; -$btn-secondary-bg: $blue-dark; $btn-secondary-bg-hl: lighten($blue-dark, 5%); +$btn-secondary-bg: $blue-dark; $btn-success-bg: $green; $btn-success-bg-hl: darken($green, 6%); @@ -266,6 +267,11 @@ $menu-dropdown-shadow: 5px 5px 20px -5px $black; // ------------------------- $tab-border-color: $dark-4; +// Toolbar +$toolbar-bg: $page-header-bg; +$toolbar-shadow: 0 0 20px black; +$toolbar-tab-bg: $gray-blue; + // Pagination // ------------------------- diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 45021a210fd..ec34c963344 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -31,6 +31,7 @@ $white: #fff; // Accent colors // ------------------------- $blue: #0083b3; +$blue-dark: #005f81; $blue-light: #00a8e6; $green: #3aa655; $red: #d44939; @@ -213,6 +214,11 @@ $menu-dropdown-shadow: 5px 5px 10px -5px $gray-1; // ------------------------- $tab-border-color: $gray-5; +// Toolbar +$toolbar-bg: linear-gradient(90deg, #ffffff, #e6eef9); +$toolbar-shadow: 1px 1px 3px #c7d0d8; +$toolbar-tab-bg: $white; + // search $search-shadow: 0 5px 30px 0 $gray-4; $search-filter-box-bg: $gray-7; diff --git a/public/sass/components/_buttons.scss b/public/sass/components/_buttons.scss index 916c141a5ec..dcb4686701d 100644 --- a/public/sass/components/_buttons.scss +++ b/public/sass/components/_buttons.scss @@ -120,8 +120,8 @@ // Info appears as a neutral blue .btn-secondary { @include buttonBackground($btn-secondary-bg, $btn-secondary-bg-hl); + // Inverse appears as dark gray } -// Inverse appears as dark gray .btn-inverse { @include buttonBackground($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color, $btn-inverse-text-shadow); //background: $card-background; diff --git a/public/sass/components/_dashboard_grid.scss b/public/sass/components/_dashboard_grid.scss index da1f140d252..5f142dfd02f 100644 --- a/public/sass/components/_dashboard_grid.scss +++ b/public/sass/components/_dashboard_grid.scss @@ -3,7 +3,7 @@ .panel-in-fullscreen { .react-grid-layout { - height: 100% !important; + height: calc(100% - 20px) !important; } .react-grid-item { @@ -19,6 +19,10 @@ transform: translate(0px, 0px) !important; } + .panel { + margin: 0 !important; + } + // Disable grid interaction indicators in fullscreen panels .panel-header:hover { background-color: inherit; diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index 6d83fc6cf0b..f2756e16203 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -415,7 +415,27 @@ select.gf-form-input ~ .gf-form-help-icon { } .cta-form__close { + background: transparent; + padding: 4px 8px 4px 9px; + border: none; position: absolute; right: 0; - top: 0; + top: -2px; + font-size: $font-size-md; + + &:hover { + color: $text-color-strong; + } +} + +.cta-form__bar { + display: flex; + align-items: center; + align-content: center; + margin-bottom: 20px; +} + +.cta-form__bar-header { + font-size: $font-size-h4; + padding-right: 20px; } diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index fe4bd9e719e..dcf3b1f0aa9 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -41,7 +41,7 @@ .panel-in-fullscreen { .navbar { - @include navbar-alt-look(); + padding-left: 15px; } .navbar-button--add-panel, @@ -50,10 +50,6 @@ .navbar-page-btn .fa-caret-down { display: none; } - - .navbar-buttons--close { - display: flex; - } } .navbar-page-btn { @@ -98,7 +94,7 @@ } .navbar-buttons { - height: $navbarHeight; + // height: $navbarHeight; display: flex; align-items: center; justify-content: flex-end; diff --git a/public/sass/components/_panel_editor.scss b/public/sass/components/_panel_editor.scss new file mode 100644 index 00000000000..a3732cd78f9 --- /dev/null +++ b/public/sass/components/_panel_editor.scss @@ -0,0 +1,208 @@ +.panel-editor-container { + display: flex; + flex-direction: column; + height: 100%; +} + +.panel-editor-container__panel { + flex: 1 1 0; +} + +.panel-editor-container__editor { + margin-top: $panel-margin*2; + display: flex; + flex-direction: column; + height: 65%; + position: relative; +} + +.panel-editor__scroll { + flex-grow: 1; + min-width: 0; + display: flex; + padding: 0 5px; +} + +.panel-editor__content { + padding: 40px 15px; +} + +.panel-in-fullscreen { + .sidemenu { + display: none; + } + + .dashboard-container { + padding: 0; + } + + .submenu-controls { + padding: 0 $dashboard-padding $panel-margin $dashboard-padding; + } + + .panel-editor-container__panel { + margin: 0 $dashboard-padding; + } +} + +.panel-editor-resizer { + position: absolute; + height: 2px; + width: 100%; + top: -23px; + text-align: center; + border-bottom: 2px dashed transparent; + + &:hover { + transition: border-color 0.2s ease-in 0.4s; + transition-delay: 0.2s; + border-color: $text-color-faint; + } +} + +.panel-editor-resizer__handle { + display: inline-block; + width: 180px; + position: relative; + border-radius: 2px; + height: 7px; + cursor: grabbing; + background: $input-label-bg; + top: -9px; + + &:hover { + transition: background 0.2s ease-in 0.4s; + transition-delay: 0.2s; + background: linear-gradient(90deg, $orange, $red); + .panel-editor-resizer__handle-dots { + transition: opacity 0.2s ease-in; + opacity: 0; + } + } +} + +.panel-editor-resizer__handle-dots { + border-top: 2px dashed $text-color-faint; + position: relative; + top: 4px; +} + +.viz-picker { + display: flex; + flex-wrap: wrap; + margin-bottom: 13px; +} + +.viz-picker__item { + background: $card-background; + box-shadow: $card-shadow; + + border-radius: 3px; + height: 90px; + width: 150px; + flex-shrink: 0; + flex-direction: column; + text-align: center; + cursor: pointer; + display: flex; + margin-right: 10px; + margin-bottom: 10px; + border: 1px solid transparent; + align-items: center; + + &:hover { + background: $card-background-hover; + } + + &--selected { + box-shadow: 0 0 12px #ff4d00; + } +} + +.viz-picker__item-name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: $font-size-sm; + display: flex; + flex-direction: column; + align-self: center; + height: 23px; +} + +.viz-picker__item-img { + height: 55px; +} + +.panel-editor-tabs { + position: relative; + z-index: 2; + box-shadow: $page-header-shadow; + border-bottom: 1px solid $page-header-border-color; + padding: 0 $dashboard-padding; + + @include clearfix(); + + .active.gf-tabs-link { + background: $toolbar-tab-bg; + } +} + +.panel-editor-tabs__close { + padding: 5px 9px; + border-radius: $border-radius; + float: right; + @include buttonBackground($btn-primary-bg, $btn-primary-bg-hl); +} + +.ds-picker-list { + display: flex; + flex-wrap: wrap; + margin-bottom: 13px; + flex-direction: column; +} + +.ds-picker-list__item { + background: $card-background; + box-shadow: $card-shadow; + + border-radius: 3px; + display: flex; + cursor: pointer; + margin-bottom: 3px; + padding: 5px 15px; + align-items: center; + + &:hover { + background: $card-background-hover; + } + + &--selected { + .ds-picker-list__name { + color: $text-color; + } + } +} + +.ds-picker-list__name { + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + font-size: $font-size-md; + padding-left: 15px; +} + +.ds-picker-list__img { + width: 30px; +} + +.form-option-box { + margin-bottom: 20px; +} + +.form-option-box__header { + border-bottom: 2px solid $dark-4; + padding: 5px 0px; + font-size: $font-size-md; + margin-bottom: 20px; +} diff --git a/public/sass/components/_popper.scss b/public/sass/components/_popper.scss index 0b28d5b21f4..ae7cc46435e 100644 --- a/public/sass/components/_popper.scss +++ b/public/sass/components/_popper.scss @@ -1,12 +1,8 @@ .popper { position: absolute; z-index: $zindex-tooltip; - background: $tooltipBackground; color: $tooltipColor; max-width: 400px; - border-radius: 3px; - box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); - padding: 10px; text-align: center; } @@ -35,10 +31,18 @@ left: calc(50% - 5px); margin-top: 0; margin-bottom: 0; + padding-top: 5px; } .popper[data-placement^='bottom'] { - margin-top: 5px; + padding-top: 5px; +} + +.popper__background { + background: $tooltipBackground; + border-radius: 3px; + box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); + padding: 10px; } .popper[data-placement^='bottom'] .popper__arrow { @@ -46,21 +50,21 @@ border-left-color: transparent; border-right-color: transparent; border-top-color: transparent; - top: -5px; - left: calc(50% - 5px); + top: 0; + left: calc(50% - 8px); margin-top: 0; margin-bottom: 0; } .popper[data-placement^='right'] { - margin-left: 5px; + padding-left: 5px; } .popper[data-placement^='right'] .popper__arrow { border-width: 5px 5px 5px 0; border-left-color: transparent; border-top-color: transparent; border-bottom-color: transparent; - left: -5px; - top: calc(50% - 5px); + left: 0; + top: calc(50% - 8px); margin-left: 0; margin-right: 0; } diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 00bd5f7c94c..5dbb4518d52 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -106,78 +106,78 @@ opacity: 0.9; } -// Scrollbars +// // Scrollbars +// // +// +// ::-webkit-scrollbar { +// width: 8px; +// height: 8px; +// } +// +// ::-webkit-scrollbar:hover { +// height: 8px; +// } +// +// ::-webkit-scrollbar-button:start:decrement, +// ::-webkit-scrollbar-button:end:increment { +// display: none; +// } +// ::-webkit-scrollbar-button:horizontal:decrement { +// display: none; +// } +// ::-webkit-scrollbar-button:horizontal:increment { +// display: none; +// } +// ::-webkit-scrollbar-button:vertical:decrement { +// display: none; +// } +// ::-webkit-scrollbar-button:vertical:increment { +// display: none; +// } +// ::-webkit-scrollbar-button:horizontal:decrement:active { +// background-image: none; +// } +// ::-webkit-scrollbar-button:horizontal:increment:active { +// background-image: none; +// } +// ::-webkit-scrollbar-button:vertical:decrement:active { +// background-image: none; +// } +// ::-webkit-scrollbar-button:vertical:increment:active { +// background-image: none; +// } +// ::-webkit-scrollbar-track-piece { +// background-color: transparent; +// } +// +// ::-webkit-scrollbar-thumb:vertical { +// height: 50px; +// background: -webkit-gradient( +// linear, +// left top, +// right top, +// color-stop(0%, $scrollbarBackground), +// color-stop(100%, $scrollbarBackground2) +// ); +// border: 1px solid $scrollbarBorder; +// border-top: 1px solid $scrollbarBorder; +// border-left: 1px solid $scrollbarBorder; +// } +// +// ::-webkit-scrollbar-thumb:horizontal { +// width: 50px; +// background: -webkit-gradient( +// linear, +// left top, +// left bottom, +// color-stop(0%, $scrollbarBackground), +// color-stop(100%, $scrollbarBackground2) +// ); +// border: 1px solid $scrollbarBorder; +// border-top: 1px solid $scrollbarBorder; +// border-left: 1px solid $scrollbarBorder; +// } // - -::-webkit-scrollbar { - width: 8px; - height: 8px; -} - -::-webkit-scrollbar:hover { - height: 8px; -} - -::-webkit-scrollbar-button:start:decrement, -::-webkit-scrollbar-button:end:increment { - display: none; -} -::-webkit-scrollbar-button:horizontal:decrement { - display: none; -} -::-webkit-scrollbar-button:horizontal:increment { - display: none; -} -::-webkit-scrollbar-button:vertical:decrement { - display: none; -} -::-webkit-scrollbar-button:vertical:increment { - display: none; -} -::-webkit-scrollbar-button:horizontal:decrement:active { - background-image: none; -} -::-webkit-scrollbar-button:horizontal:increment:active { - background-image: none; -} -::-webkit-scrollbar-button:vertical:decrement:active { - background-image: none; -} -::-webkit-scrollbar-button:vertical:increment:active { - background-image: none; -} -::-webkit-scrollbar-track-piece { - background-color: transparent; -} - -::-webkit-scrollbar-thumb:vertical { - height: 50px; - background: -webkit-gradient( - linear, - left top, - right top, - color-stop(0%, $scrollbarBackground), - color-stop(100%, $scrollbarBackground2) - ); - border: 1px solid $scrollbarBorder; - border-top: 1px solid $scrollbarBorder; - border-left: 1px solid $scrollbarBorder; -} - -::-webkit-scrollbar-thumb:horizontal { - width: 50px; - background: -webkit-gradient( - linear, - left top, - left bottom, - color-stop(0%, $scrollbarBackground), - color-stop(100%, $scrollbarBackground2) - ); - border: 1px solid $scrollbarBorder; - border-top: 1px solid $scrollbarBorder; - border-left: 1px solid $scrollbarBorder; -} - // Baron styles .baron { diff --git a/public/sass/components/_submenu.scss b/public/sass/components/_submenu.scss index 1efd275bfad..a6844b9e66b 100644 --- a/public/sass/components/_submenu.scss +++ b/public/sass/components/_submenu.scss @@ -4,8 +4,7 @@ flex-wrap: wrap; align-content: flex-start; align-items: flex-start; - - margin: 0 0 $panel-margin 0; + padding: 0 0 $panel-margin 0; } .annotation-disabled, diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index 87b43a31142..c1cf78716bb 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -2,9 +2,10 @@ display: flex; flex-direction: column; height: 100%; + flex-grow: 1; &.tabbed-view--new { - padding: 25px 0 0 0; + padding: 0 0 0 0; height: 100%; } } @@ -12,13 +13,14 @@ .tabbed-view-header { box-shadow: $page-header-shadow; border-bottom: 1px solid $page-header-border-color; + padding: 0 $dashboard-padding; @include clearfix(); } .tabbed-view-title { float: left; padding-top: 0.5rem; - margin: 0 $spacer*3 0 $spacer*1; + margin: 0 $spacer*3 0 0; } .tabbed-view-panel-title { diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index eb3c8ce13f5..ea557b985a7 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -53,6 +53,7 @@ background-image: linear-gradient(to right, #ffd500 0%, #ff4400 99%, #ff4400 100%); } } + &.active--panel { background: $panel-bg !important; } diff --git a/public/sass/components/_timepicker.scss b/public/sass/components/_timepicker.scss index e12835d31c1..51a730926ba 100644 --- a/public/sass/components/_timepicker.scss +++ b/public/sass/components/_timepicker.scss @@ -20,6 +20,7 @@ background-color: $page-bg; border-radius: 0 0 0 4px; box-shadow: $search-shadow; + z-index: $zindex-dropdown; } .gf-timepicker-absolute-section { diff --git a/public/sass/components/_toolbar.scss b/public/sass/components/_toolbar.scss new file mode 100644 index 00000000000..aa1c46e0fb4 --- /dev/null +++ b/public/sass/components/_toolbar.scss @@ -0,0 +1,59 @@ +.toolbar { + display: flex; + align-content: center; + align-items: center; + background: $toolbar-bg; + box-shadow: $toolbar-shadow; + padding: 7px 20px 7px 20px; + position: relative; + z-index: 1; + flex: 0 0 auto; +} + +.toolbar__main { + padding: $input-padding-y $input-padding-x; + font-size: $font-size-md; + line-height: $input-line-height; + color: $input-color; + background-color: $input-bg; + border: $input-border; + border-radius: $input-border-radius; + display: flex; + align-items: center; + cursor: pointer; + + .fa { + margin-left: 20px; + display: inline-block; + position: relative; + } +} + +.toolbar__main-image { + margin-right: 10px; + display: inline-block; + width: 20px; + height: 20px; +} + +.toolbar-subview { + position: relative; + padding: 20px 20px; + background-color: $empty-list-cta-bg; + top: -45px; + margin: 0 30px 20px 0px; +} + +.toolbar-subview__close { + background: transparent; + padding: 4px 8px 4px 9px; + border: none; + position: absolute; + right: 15px; + top: 20px; + font-size: $font-size-md; + + &:hover { + color: $text-color-strong; + } +} diff --git a/public/sass/components/_viz_editor.scss b/public/sass/components/_viz_editor.scss deleted file mode 100644 index 048e513cfbb..00000000000 --- a/public/sass/components/_viz_editor.scss +++ /dev/null @@ -1,81 +0,0 @@ -.viz-editor { - display: flex; - height: 100%; -} - -.viz-editor-col1 { - width: 210px; - height: 100%; - margin-right: 40px; -} - -.viz-editor-col2 { - flex-grow: 1; -} - -.viz-picker { - display: flex; - flex-direction: column; - height: 100%; -} - -.viz-picker__search { - flex-grow: 0; -} - -.viz-picker__items { - flex-grow: 1; - height: calc(100% - 50px); -} - -.viz-picker__item { - background: $card-background; - box-shadow: $card-shadow; - - border-radius: 3px; - padding: $spacer; - width: 100%; - height: 60px; - text-align: center; - margin-bottom: 6px; - cursor: pointer; - display: flex; - flex-shrink: 0; - border: 1px solid transparent; - @include left-brand-border; - - &:hover { - background: $card-background-hover; - } - - &--selected { - // border: 1px solid $orange; - @include left-brand-border-gradient(); - - .viz-picker__item-name { - color: $text-color; - } - - .viz-picker__item-img { - filter: saturate(100%); - } - } -} - -.viz-picker__item-name { - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - font-size: $font-size-h5; - display: flex; - flex-direction: column; - align-self: center; - padding-left: $spacer; - font-size: $font-size-md; - color: $text-muted; -} - -.viz-picker__item-img { - height: 100%; - filter: saturate(30%); -} diff --git a/public/sass/pages/_dashboard.scss b/public/sass/pages/_dashboard.scss index 125edac500f..353aee55a09 100644 --- a/public/sass/pages/_dashboard.scss +++ b/public/sass/pages/_dashboard.scss @@ -37,26 +37,13 @@ div.flot-text { height: 100%; } -.panel-editor-container { - display: flex; - flex-direction: column; - height: 100%; -} - -.panel-editor-container__panel { - height: 35%; -} - -.panel-editor-container__editor { - height: 65%; -} - .panel-container { background-color: $panel-bg; border: $panel-border; position: relative; border-radius: 3px; height: 100%; + width: 100%; &.panel-transparent { background-color: transparent; @@ -74,6 +61,10 @@ div.flot-text { &--is-editing { height: auto; } + + &--absolute { + position: absolute; + } } .panel-content { @@ -157,6 +148,20 @@ div.flot-text { color: $text-color-weak; } +.panel-empty { + display: flex; + align-items: center; + height: 100%; + width: 100%; + + p { + text-align: center; + color: $text-muted; + font-size: $font-size-lg; + width: 100%; + } +} + .panel-header { &:hover { transition: background-color 0.1s ease-in-out; diff --git a/public/sass/pages/_explore.scss b/public/sass/pages/_explore.scss index 4b07b04e330..58b4ca17840 100644 --- a/public/sass/pages/_explore.scss +++ b/public/sass/pages/_explore.scss @@ -320,8 +320,11 @@ .ReactTable { border: none; +} + +.ReactTable .rt-table { // Allow some space for the no-data text - min-height: 120px; + min-height: 90px; } .ReactTable .rt-thead.-header { @@ -350,6 +353,11 @@ .ReactTable .rt-tbody .rt-td:last-child { border-right: none; } +.ReactTable .-pagination { + border-top: none; + box-shadow: none; + margin-top: $panel-margin; +} .ReactTable .-pagination .-btn { color: $blue; background: $list-item-bg; @@ -371,6 +379,10 @@ .ReactTable .rt-tr .rt-td:last-child { text-align: right; } +.ReactTable .rt-noData { + top: 60px; + z-index: inherit; +} // React-component cascade fix: show "loading" even though item can expand diff --git a/public/sass/utils/_utils.scss b/public/sass/utils/_utils.scss index 3121a6f0c00..c8abd696f04 100644 --- a/public/sass/utils/_utils.scss +++ b/public/sass/utils/_utils.scss @@ -78,3 +78,7 @@ button.close { .d-inline-block { display: inline-block; } + +.absolute { + position: absolute; +} diff --git a/scripts/webpack/webpack.hot.js b/scripts/webpack/webpack.hot.js index dd3cc8c1190..def878ca1ea 100644 --- a/scripts/webpack/webpack.hot.js +++ b/scripts/webpack/webpack.hot.js @@ -4,22 +4,19 @@ const merge = require('webpack-merge'); const common = require('./webpack.common.js'); const path = require('path'); const webpack = require('webpack'); -const HtmlWebpackPlugin = require("html-webpack-plugin"); +const HtmlWebpackPlugin = require('html-webpack-plugin'); const HtmlWebpackHarddiskPlugin = require('html-webpack-harddisk-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); module.exports = merge(common, { entry: { - app: [ - 'webpack-dev-server/client?http://localhost:3333', - './public/app/dev.ts', - ], + app: ['webpack-dev-server/client?http://localhost:3333', './public/app/dev.ts'], }, output: { path: path.resolve(__dirname, '../../public/build'), filename: '[name].[hash].js', - publicPath: "/public/build/", + publicPath: '/public/build/', pathinfo: false, }, @@ -34,8 +31,8 @@ module.exports = merge(common, { hot: true, port: 3333, proxy: { - '!/public/build': 'http://localhost:3000' - } + '!/public/build': 'http://localhost:3000', + }, }, optimization: { @@ -49,38 +46,37 @@ module.exports = merge(common, { { test: /\.tsx?$/, exclude: /node_modules/, - use: [{ - loader: 'babel-loader', - options: { - cacheDirectory: true, - babelrc: false, - plugins: [ - 'syntax-dynamic-import', - 'react-hot-loader/babel' - ] - } - }, - { - loader: 'ts-loader', - options: { - transpileOnly: true, - experimentalWatchApi: true + use: [ + { + loader: 'babel-loader', + options: { + cacheDirectory: true, + babelrc: false, + plugins: ['syntax-dynamic-import', 'react-hot-loader/babel'], + }, }, - }], + { + loader: 'ts-loader', + options: { + transpileOnly: true, + experimentalWatchApi: true, + }, + }, + ], }, { test: /\.scss$/, use: [ - "style-loader", // creates style nodes from JS strings - "css-loader", // translates CSS into CommonJS - "sass-loader" // compiles Sass to CSS - ] + 'style-loader', // creates style nodes from JS strings + 'css-loader', // translates CSS into CommonJS + 'sass-loader', // compiles Sass to CSS + ], }, { test: /\.(png|jpg|gif|ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/, - loader: 'file-loader' + loader: 'file-loader', }, - ] + ], }, plugins: [ @@ -89,16 +85,16 @@ module.exports = merge(common, { filename: path.resolve(__dirname, '../../public/views/index.html'), template: path.resolve(__dirname, '../../public/views/index-template.html'), inject: 'body', - alwaysWriteToDisk: true + alwaysWriteToDisk: true, }), new HtmlWebpackHarddiskPlugin(), new webpack.NamedModulesPlugin(), new webpack.HotModuleReplacementPlugin(), new webpack.DefinePlugin({ - 'GRAFANA_THEME': JSON.stringify(process.env.GRAFANA_THEME || 'dark'), + GRAFANA_THEME: JSON.stringify(process.env.GRAFANA_THEME || 'dark'), 'process.env': { - 'NODE_ENV': JSON.stringify('development') - } + NODE_ENV: JSON.stringify('development'), + }, }), - ] + ], }); diff --git a/yarn.lock b/yarn.lock index 4c7bbdd130c..013d0cb0a97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -25,6 +25,13 @@ esutils "^2.0.2" js-tokens "^4.0.0" +"@babel/runtime@^7.1.2": + version "7.1.5" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.1.5.tgz#4170907641cf1f61508f563ece3725150cc6fe39" + integrity sha512-xKnPpXG/pvK1B90JkwwxSGii90rQGKtzcMt2gI5G6+M0REXaq6rOHsGC2ay6/d0Uje7zzvSzjEzfR3ENhFlrfA== + dependencies: + regenerator-runtime "^0.12.0" + "@babel/types@^7.0.0": version "7.1.2" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.1.2.tgz#183e7952cf6691628afdc2e2b90d03240bac80c0" @@ -358,7 +365,7 @@ dependencies: "@types/react" "*" -"@types/react-dom@*", "@types/react-dom@^16.0.7": +"@types/react-dom@*": version "16.0.8" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.8.tgz#6e1366ed629cadf55860cbfcc25db533f5d2fa7d" integrity sha512-WF/KAOia7pskV+J8f+UlNuFeCRkJuJAkyyeYPPtNe6suw0y7cWyUP/DPdPXsGUwQEkv2qlLVSrgVaoCm/PmO0Q== @@ -366,6 +373,14 @@ "@types/node" "*" "@types/react" "*" +"@types/react-dom@^16.0.9": + version "16.0.9" + resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.0.9.tgz#73ceb7abe6703822eab6600e65c5c52efd07fb91" + integrity sha512-4Z0bW+75zeQgsEg7RaNuS1k9MKhci7oQqZXxrV5KUGIyXZHHAAL3KA4rjhdH8o6foZ5xsRMSqkoM5A3yRVPR5w== + dependencies: + "@types/node" "*" + "@types/react" "*" + "@types/react-select@^2.0.4": version "2.0.4" resolved "https://registry.yarnpkg.com/@types/react-select/-/react-select-2.0.4.tgz#232c735539412acdc163751157c0a1c7d8aca40b" @@ -382,10 +397,10 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@^16.4.14": - version "16.4.16" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.16.tgz#99f91b1200ae8c2062030402006d3b3c3a177043" - integrity sha512-lxyoipLWweAnLnSsV4Ho2NAZTKKmxeYgkTQ6PaDiPDU9JJBUY2zJVVGiK1smzYv8+ZgbqEmcm5xM74GCpunSEA== +"@types/react@*", "@types/react@16.7.6", "@types/react@^16.1.0", "@types/react@^16.7.6": + version "16.7.6" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.7.6.tgz#80e4bab0d0731ad3ae51f320c4b08bdca5f03040" + integrity sha512-QBUfzftr/8eg/q3ZRgf/GaDP6rTYc7ZNem+g4oZM38C9vXyV8AWRWaTQuW5yCoZTsfHrN7b3DeEiUnqH9SrnpA== dependencies: "@types/prop-types" "*" csstype "^2.2.0" @@ -1024,7 +1039,7 @@ arrify@^1.0.0, arrify@^1.0.1: resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d" integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0= -asap@^2.0.0: +asap@^2.0.0, asap@~2.0.3: version "2.0.6" resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46" integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY= @@ -1847,7 +1862,7 @@ babel-register@^6.26.0, babel-register@^6.9.0: mkdirp "^0.5.1" source-map-support "^0.4.15" -babel-runtime@6.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0: +babel-runtime@6.x, babel-runtime@6.x.x, babel-runtime@^6.18.0, babel-runtime@^6.22.0, babel-runtime@^6.26.0: version "6.26.0" resolved "https://registry.yarnpkg.com/babel-runtime/-/babel-runtime-6.26.0.tgz#965c7058668e82b55d7bfe04ff2337bc8b5647fe" integrity sha1-llxwWGaOgrVde/4E/yM3vItWR/4= @@ -2624,7 +2639,7 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" -classnames@2.x, classnames@^2.2.5, classnames@^2.2.6: +classnames@2.x, classnames@^2.2.3, classnames@^2.2.5, classnames@^2.2.6: version "2.2.6" resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce" integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q== @@ -3141,6 +3156,11 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= +core-js@^1.0.0: + version "1.2.7" + resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636" + integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY= + core-js@^2.0.0, core-js@^2.4.0, core-js@^2.4.1, core-js@^2.5.0: version "2.5.7" resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.5.7.tgz#f972608ff0cead68b841a16a932d0b183791814e" @@ -3236,6 +3256,14 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" +create-react-context@^0.2.1: + version "0.2.3" + resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3" + integrity sha512-CQBmD0+QGgTaxDL3OX1IDXYqjkp2It4RIbcb99jS6AEg27Ga+a9G3JtK6SIu0HBwPLZlmwt9F7UwWA4Bn92Rag== + dependencies: + fbjs "^0.8.0" + gud "^1.0.0" + cross-spawn@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-3.0.1.tgz#1256037ecb9f0c5f79e3d6ef135e30770184b982" @@ -4163,6 +4191,13 @@ dom-css@^2.0.0: prefix-style "2.0.1" to-camel-case "1.0.0" +"dom-helpers@^2.4.0 || ^3.0.0": + version "3.4.0" + resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8" + integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA== + dependencies: + "@babel/runtime" "^7.1.2" + dom-helpers@^3.3.1: version "3.3.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6" @@ -5076,6 +5111,19 @@ fb-watchman@^2.0.0: dependencies: bser "^2.0.0" +fbjs@^0.8.0: + version "0.8.17" + resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd" + integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90= + dependencies: + core-js "^1.0.0" + isomorphic-fetch "^2.1.1" + loose-envify "^1.0.0" + object-assign "^4.1.0" + promise "^7.1.1" + setimmediate "^1.0.5" + ua-parser-js "^0.7.18" + fd-slicer@~1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.0.1.tgz#8b5bcbd9ec327c5041bf9ab023fd6750f1177e65" @@ -6053,6 +6101,11 @@ grunt@1.0.1: path-is-absolute "~1.0.0" rimraf "~2.2.8" +gud@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0" + integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw== + gzip-size@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-1.0.0.tgz#66cf8b101047227b95bace6ea1da0c177ed5c22f" @@ -7233,6 +7286,14 @@ isomorphic-base64@^1.0.2: resolved "https://registry.yarnpkg.com/isomorphic-base64/-/isomorphic-base64-1.0.2.tgz#f426aae82569ba8a4ec5ca73ad21a44ab1ee7803" integrity sha1-9Caq6CVpuopOxcpzrSGkSrHueAM= +isomorphic-fetch@^2.1.1: + version "2.2.1" + resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9" + integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk= + dependencies: + node-fetch "^1.0.1" + whatwg-fetch ">=0.10.0" + isstream@~0.1.2: version "0.1.2" resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a" @@ -8431,7 +8492,7 @@ longest@^1.0.1: resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc= -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.0, loose-envify@^1.3.1, loose-envify@^1.4.0: version "1.4.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf" integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q== @@ -9197,6 +9258,14 @@ node-fetch-npm@^2.0.2: json-parse-better-errors "^1.0.0" safe-buffer "^5.1.1" +node-fetch@^1.0.1: + version "1.7.3" + resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef" + integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ== + dependencies: + encoding "^0.1.11" + is-stream "^1.0.1" + node-forge@0.7.5: version "0.7.5" resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-0.7.5.tgz#6c152c345ce11c52f465c2abd957e8639cd674df" @@ -10369,10 +10438,10 @@ pn@^1.1.0: resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb" integrity sha512-2qHaIQr2VLRFoxe2nASzsV6ef4yOOH+Fi9FBOVH6cqeSgUnoyySPZkxzLuzd+RYOQTRpROA0ztTMqxROKSb/nA== -popper.js@^1.12.5: - version "1.14.4" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.4.tgz#8eec1d8ff02a5a3a152dd43414a15c7b79fd69b6" - integrity sha1-juwdj/AqWjoVLdQ0FKFce3n9abY= +popper.js@^1.14.4: + version "1.14.5" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.5.tgz#98abcce7c7c34c4ee47fcbc6b3da8af2c0a127bc" + integrity sha512-fs4Sd8bZLgEzrk8aS7Em1qh+wcawtE87kRUJQhK6+LndyV1HerX7+LURzAylVaTyWIn5NTB/lyjnWqw/AZ6Yrw== portfinder@^1.0.9: version "1.0.17" @@ -10939,6 +11008,13 @@ promise-retry@^1.1.1: err-code "^1.0.0" retry "^0.10.0" +promise@^7.1.1: + version "7.3.1" + resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf" + integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg== + dependencies: + asap "~2.0.3" + prompts@^0.1.9: version "0.1.14" resolved "https://registry.yarnpkg.com/prompts/-/prompts-0.1.14.tgz#a8e15c612c5c9ec8f8111847df3337c9cbd443b2" @@ -11256,15 +11332,15 @@ react-custom-scrollbars@^4.2.1: prop-types "^15.5.10" raf "^3.1.0" -react-dom@^16.5.0: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.5.2.tgz#b69ee47aa20bab5327b2b9d7c1fe2a30f2cfa9d7" - integrity sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA== +react-dom@^16.6.3: + version "16.6.3" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.6.3.tgz#8fa7ba6883c85211b8da2d0efeffc9d3825cccc0" + integrity sha512-8ugJWRCWLGXy+7PmNh8WJz3g1TaTUt1XyoIcFN+x0Zbkoz+KKdUyx1AQLYJdbFXjuF41Nmjn5+j//rxvhFjgSQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - schedule "^0.5.0" + scheduler "^0.11.2" react-draggable@3.x, "react-draggable@^2.2.6 || ^3.0.3": version "3.0.5" @@ -11327,13 +11403,18 @@ react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-popper@^0.7.5: - version "0.7.5" - resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-0.7.5.tgz#71c25946f291db381231281f6b95729e8b801596" - integrity sha512-ya9dhhGCf74JTOB2uyksEHhIGw7w9tNZRUJF73lEq2h4H5JT6MBa4PdT4G+sx6fZwq+xKZAL/sVNAIuojPn7Dg== +react-popper@^1.3.0: + version "1.3.0" + resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.0.tgz#e769199bbe1273611957892f9950ef1d42c3f7ce" + integrity sha512-Dbn9kwgFzNFRi8yz/i4Qp7d1hkCYhWX6uJOFz0+PoNNm9uJMnFAqSPNgUUCV49L6p5zz5mKtMiudbgIqjAe1uw== dependencies: - popper.js "^1.12.5" - prop-types "^15.5.10" + "@types/react" "^16.1.0" + babel-runtime "6.x.x" + create-react-context "^0.2.1" + popper.js "^1.14.4" + prop-types "^15.6.1" + typed-styles "^0.0.5" + warning "^3.0.0" react-portal@^3.1.0: version "3.2.0" @@ -11413,15 +11494,27 @@ react-transition-group@^2.2.1: prop-types "^15.6.2" react-lifecycles-compat "^3.0.4" -react@^16.5.0: - version "16.5.2" - resolved "https://registry.yarnpkg.com/react/-/react-16.5.2.tgz#19f6b444ed139baa45609eee6dc3d318b3895d42" - integrity sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw== +react-virtualized@^9.21.0: + version "9.21.0" + resolved "https://registry.yarnpkg.com/react-virtualized/-/react-virtualized-9.21.0.tgz#8267c40ffb48db35b242a36dea85edcf280a6506" + integrity sha512-duKD2HvO33mqld4EtQKm9H9H0p+xce1c++2D5xn59Ma7P8VT7CprfAe5hwjd1OGkyhqzOZiTMlTal7LxjH5yBQ== + dependencies: + babel-runtime "^6.26.0" + classnames "^2.2.3" + dom-helpers "^2.4.0 || ^3.0.0" + loose-envify "^1.3.0" + prop-types "^15.6.0" + react-lifecycles-compat "^3.0.4" + +react@^16.6.3: + version "16.6.3" + resolved "https://registry.yarnpkg.com/react/-/react-16.6.3.tgz#25d77c91911d6bbdd23db41e70fb094cc1e0871c" + integrity sha512-zCvmH2vbEolgKxtqXL2wmGCUxUyNheYn/C+PD1YAjfxHC54+MhdruyhO7QieQrYsYeTxrn93PM2y0jRH1zEExw== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" prop-types "^15.6.2" - schedule "^0.5.0" + scheduler "^0.11.2" read-chunk@^2.1.0: version "2.1.0" @@ -11686,6 +11779,11 @@ regenerator-runtime@^0.11.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== +regenerator-runtime@^0.12.0: + version "0.12.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" + integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== + regenerator-transform@^0.10.0: version "0.10.1" resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.10.1.tgz#1e4996837231da8b7f3cf4114d71b5691a0680dd" @@ -12214,6 +12312,14 @@ schedule@^0.5.0: dependencies: object-assign "^4.1.1" +scheduler@^0.11.2: + version "0.11.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.11.2.tgz#a8db5399d06eba5abac51b705b7151d2319d33d3" + integrity sha512-+WCP3s3wOaW4S7C1tl3TEXp4l9lJn0ZK8G3W3WKRWmw77Z2cIFUW2MiNTMHn5sCjxN+t7N43HAOOgMjyAg5hlg== + dependencies: + loose-envify "^1.1.0" + object-assign "^4.1.1" + schema-utils@^0.4.0, schema-utils@^0.4.4, schema-utils@^0.4.5: version "0.4.7" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.7.tgz#ba74f597d2be2ea880131746ee17d0a093c68187" @@ -12368,7 +12474,7 @@ set-value@^2.0.0: is-plain-object "^2.0.3" split-string "^3.0.1" -setimmediate@^1.0.4: +setimmediate@^1.0.4, setimmediate@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285" integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU= @@ -13670,6 +13776,11 @@ type-of@^2.0.1: resolved "https://registry.yarnpkg.com/type-of/-/type-of-2.0.1.tgz#e72a1741896568e9f628378d816d6912f7f23972" integrity sha1-5yoXQYllaOn2KDeNgW1pEvfyOXI= +typed-styles@^0.0.5: + version "0.0.5" + resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.5.tgz#a60df245d482a9b1adf9c06c078d0f06085ed1cf" + integrity sha512-ht+rEe5UsdEBAa3gr64+QjUOqjOLJfWLvl5HZR5Ev9uo/OnD3p43wPeFSB1hNFc13GXQF/JU1Bn0YHLUqBRIlw== + typedarray@^0.0.6: version "0.0.6" resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" @@ -13680,6 +13791,11 @@ typescript@^3.0.3: resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.1.tgz#3362ba9dd1e482ebb2355b02dfe8bcd19a2c7c96" integrity sha512-Veu0w4dTc/9wlWNf2jeRInNodKlcdLgemvPsrNpfu5Pq39sgfFjvIIgTsvUHCoLBnMhPoUA+tFxsXjU6VexVRQ== +ua-parser-js@^0.7.18: + version "0.7.19" + resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.19.tgz#94151be4c0a7fb1d001af7022fdaca4642659e4b" + integrity sha512-T3PVJ6uz8i0HzPxOF9SWzWAlfN/DavlpQqepn22xgve/5QecC+XMCAtmUNnY7C9StehaV6exjUCI801lOI7QlQ== + uglify-es@^3.3.4: version "3.3.9" resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677" @@ -14094,6 +14210,13 @@ walker@~1.0.5: dependencies: makeerror "1.0.x" +warning@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/warning/-/warning-3.0.0.tgz#32e5377cb572de4ab04753bdf8821c01ed605b7c" + integrity sha1-MuU3fLVy3kqwR1O9+IIcAe1gW3w= + dependencies: + loose-envify "^1.0.0" + warning@^4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.2.tgz#aa6876480872116fa3e11d434b0d0d8d91e44607" @@ -14328,6 +14451,11 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3: dependencies: iconv-lite "0.4.24" +whatwg-fetch@>=0.10.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz#fc804e458cc460009b1a2b966bc8817d2578aefb" + integrity sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q== + whatwg-mimetype@^2.1.0: version "2.2.0" resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.2.0.tgz#a3d58ef10b76009b042d03e25591ece89b88d171"