diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go index b813c78f2bb..c3a8bbd6ef4 100644 --- a/pkg/api/dtos/index.go +++ b/pkg/api/dtos/index.go @@ -7,7 +7,7 @@ type IndexViewData struct { AppSubUrl string GoogleAnalyticsId string GoogleTagManagerId string - MainNavLinks []*NavLink + NavTree []*NavLink BuildVersion string BuildCommit string NewGrafanaVersionExists bool @@ -20,10 +20,12 @@ type PluginCss struct { } type NavLink struct { - Text string `json:"text,omitempty"` - Icon string `json:"icon,omitempty"` - Img string `json:"img,omitempty"` - Url string `json:"url,omitempty"` - Divider bool `json:"divider,omitempty"` - Children []*NavLink `json:"children,omitempty"` + Id string `json:"id,omitempty"` + Text string `json:"text,omitempty"` + Description string `json:"description,omitempty"` + Icon string `json:"icon,omitempty"` + Img string `json:"img,omitempty"` + Url string `json:"url,omitempty"` + Divider bool `json:"divider,omitempty"` + Children []*NavLink `json:"children,omitempty"` } diff --git a/pkg/api/index.go b/pkg/api/index.go index 3afff3bb144..c08dafc263d 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -85,7 +85,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { } if c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR { - data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ + data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "New", Icon: "fa fa-fw fa-plus", Url: "", @@ -103,7 +103,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { {Text: "Snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-snapshot"}, } - data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ + data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Dashboards", Icon: "icon-gf icon-gf-dashboard", Url: setting.AppSubUrl + "/", @@ -116,7 +116,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { {Text: "Notification channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"}, } - data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{ + data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Alerting", Icon: "icon-gf icon-gf-alert", Url: setting.AppSubUrl + "/alerting/list", @@ -165,36 +165,61 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { } if len(appLink.Children) > 0 { - data.MainNavLinks = append(data.MainNavLinks, appLink) + data.NavTree = append(data.NavTree, appLink) } } } if c.OrgRole == m.ROLE_ADMIN { cfgNode := &dtos.NavLink{ + Id: "cfg", Text: "Configuration", Icon: "fa fa-fw fa-cogs", Url: setting.AppSubUrl + "/configuration", Children: []*dtos.NavLink{ { - Text: "Data Sources", - Icon: "icon-gf icon-gf-datasources", - Url: setting.AppSubUrl + "/datasources", + Text: "Data Sources", + Icon: "icon-gf icon-gf-datasources", + Description: "Add and configure data sources", + Id: "datasources", + Url: setting.AppSubUrl + "/datasources", Children: []*dtos.NavLink{ {Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"}, {Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"}, }, }, { - Text: "Plugins", - Icon: "icon-gf icon-gf-apps", - Url: setting.AppSubUrl + "/plugins", + Text: "Preferences", + Id: "org", + Description: "Organization preferences", + Icon: "fa fa-fw fa-sliders", + Url: setting.AppSubUrl + "/org", + }, + { + Text: "Plugins", + Id: "plugins", + Description: "View and configure plugins", + Icon: "icon-gf icon-gf-apps", + Url: setting.AppSubUrl + "/plugins", Children: []*dtos.NavLink{ {Text: "Panels", Url: setting.AppSubUrl + "/plugins?type=panel", Icon: "fa fa-fw fa-stop"}, {Text: "Data sources", Url: setting.AppSubUrl + "/plugins?type=datasource", Icon: "icon-gf icon-gf-datasources"}, {Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"}, }, }, + { + Text: "User Management", + Id: "users", + Description: "Manage users & user groups", + Icon: "fa fa-fw fa-users", + Url: setting.AppSubUrl + "/org/users", + }, + { + Text: "API Keys", + Description: "Create & manage API keys", + Icon: "fa fa-fw fa-key", + Url: setting.AppSubUrl + "/org/apikeys", + }, }, } @@ -212,7 +237,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { }) } - data.MainNavLinks = append(data.MainNavLinks, cfgNode) + data.NavTree = append(data.NavTree, cfgNode) } return &data, nil diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 395b188538e..d33378e33fc 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,20 +1,20 @@
-
- - {{::item.title}} - - +
+ + + + - - {{::item.title}} + + {{::item.text}} diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 8938ac4adcc..4b42bdaade0 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -11,6 +11,7 @@ export class NavbarCtrl { /** @ngInject */ constructor(private $scope, private $rootScope, private contextSrv) { + console.log(this.model); } showSearch() { diff --git a/public/app/core/components/sidemenu/sidemenu.html b/public/app/core/components/sidemenu/sidemenu.html index ae2cc7b33ab..7d54ad426aa 100644 --- a/public/app/core/components/sidemenu/sidemenu.html +++ b/public/app/core/components/sidemenu/sidemenu.html @@ -1,4 +1,3 @@ -
diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index e371429dc91..3b9c5fefc48 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/public/app/core/components/sidemenu/sidemenu.ts @@ -26,7 +26,7 @@ export class SideMenuCtrl { this.showSignout = this.contextSrv.isSignedIn && !config['disableSignoutMenu']; this.maxShownOrgs = 10; - this.mainLinks = config.bootData.mainNavLinks; + this.mainLinks = config.bootData.navTree; this.openUserDropdown(); this.loginUrl = 'login?redirect=' + encodeURIComponent(this.$location.path()); diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index e64bb2f74c5..eac3c24ffbb 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -1,6 +1,8 @@ /// import coreModule from 'app/core/core_module'; +import config from 'app/core/config'; +import _ from 'lodash'; export interface NavModelItem { title: string; @@ -15,10 +17,24 @@ export interface NavModel { } export class NavModelSrv { + navItems: any; /** @ngInject */ constructor(private contextSrv) { + this.navItems = config.bootData.navTree; + } + + getCfgNode() { + return _.find(this.navItems, {id: 'cfg'}); + } + + getConfigurationNav() { + let cfg = this.getCfgNode(); + return { + breadcrumbs: [cfg], + node: cfg, + }; } getAlertingNav(subPage) { @@ -36,21 +52,11 @@ export class NavModelSrv { } getDatasourceNav(subPage) { + let cfg = this.getCfgNode(); + let ds = _.find(cfg.children, {id: 'datasources'}); return { - items: [ - { - title: 'Configuration', - items: [ - {title: 'Data sources', active: subPage === 0, url: 'datasources', icon: 'fa fa-database'}, - {title: 'Users', active: subPage === 0, url: 'users', icon: 'fa fa-fw fa-users'}, - {title: 'Plugins', active: subPage === 0, url: 'plugins', icon: 'icon-gf icon-gf-apps'}, - ] - }, - { - title: 'Data sources', - url: 'datasources', - } - ] + breadcrumbs: [cfg, ds], + node: ds }; } @@ -91,18 +97,11 @@ export class NavModelSrv { } getOrgNav(subPage) { + let cfg = this.getCfgNode(); + let org = _.find(cfg.children, {id: 'org'}); return { - section: { - title: 'Organization', - url: 'org', - icon: 'icon-gf icon-gf-users' - }, - menu: [ - {title: 'Preferences', active: subPage === 0, url: 'org', icon: 'fa fa-fw fa-cog'}, - {title: 'Org Users', active: subPage === 1, url: 'org/users', icon: 'fa fa-fw fa-users'}, - {title: 'API Keys', active: subPage === 2, url: 'org/apikeys', icon: 'fa fa-fw fa-key'}, - {title: 'Org User Groups', active: subPage === 3, url: 'org/user-groups', icon: 'fa fa-fw fa-users'}, - ] + breadcrumbs: [this.getCfgNode(), org], + node: org }; } @@ -124,13 +123,20 @@ export class NavModelSrv { } getPluginsNav() { + let cfg = this.getCfgNode(); + let plugins = _.find(cfg.children, {id: 'plugins'}); return { - section: { - title: 'Plugins', - url: 'plugins', - icon: 'icon-gf icon-gf-apps' - }, - menu: [] + breadcrumbs: [this.getCfgNode(), plugins], + node: plugins + }; + } + + getUserManNav() { + let cfg = this.getCfgNode(); + let users = _.find(cfg.children, {id: 'users'}); + return { + breadcrumbs: [cfg, users], + node: users, }; } diff --git a/public/app/features/admin/admin.ts b/public/app/features/admin/admin.ts index 9c32a6e0c5c..c81854fe9dd 100644 --- a/public/app/features/admin/admin.ts +++ b/public/app/features/admin/admin.ts @@ -47,7 +47,7 @@ export class ConfigurationHomeCtrl { /** @ngInject */ constructor(private $scope, private backendSrv, private navModelSrv) { - this.navModel = navModelSrv.getAdminNav(); + this.navModel = navModelSrv.getConfigurationNav(); } } diff --git a/public/app/features/admin/partials/configuration_home.html b/public/app/features/admin/partials/configuration_home.html index 6008ca6bda9..fa7ed8024b4 100644 --- a/public/app/features/admin/partials/configuration_home.html +++ b/public/app/features/admin/partials/configuration_home.html @@ -4,35 +4,30 @@

- + Configuration

-
- +
    -
  1. - +
  2. +
    - {{ds.type}}
    - +
    - {{ds.name}} - - default - + {{navItem.text}}
    - {{ds.url}} + {{navItem.description}}
    @@ -40,9 +35,5 @@
- -
- No data sources defined -
diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts index 1ecde875a5a..741e3f68a41 100644 --- a/public/app/features/org/org_users_ctrl.ts +++ b/public/app/features/org/org_users_ctrl.ts @@ -23,7 +23,8 @@ export class OrgUsersCtrl { loginOrEmail: '', role: 'Viewer', }; - this.navModel = navModelSrv.getOrgNav(0); + + this.navModel = navModelSrv.getUserManNav(0); this.get(); this.editor = { index: 0 }; diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index d6fb84d1c0d..ca6533a0b02 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -2,14 +2,17 @@
-

Org Preferences

+

+ + {{navModel.node.text}} +

General

- Name + Organization name
@@ -61,16 +64,6 @@
-

Admin Pages

-
-
-
- Users & Roles -
-
- API Keys -
-
diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 2b791fbb094..aaed94b018d 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -2,7 +2,10 @@
-

Organization users

+

+ + {{ctrl.navModel.node.text}} +

@@ -22,8 +25,13 @@ Users ({{ctrl.users.length}}) +
  • + + Groups (0) + +
  • - + Pending Invitations ({{ctrl.pendingInvites.length}})
    • @@ -54,8 +62,10 @@ {{user.email}} {{user.lastSeenAtAge}} - +
    + +
    diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 8d02e7f29b8..032c0f4b296 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -59,7 +59,7 @@ export class DataSourceEditCtrl { initNewDatasourceModel() { this.isNew = true; this.current = angular.copy(defaults); - this.navModel.items.push({title: 'New data source'}); + this.navModel.breadcrumbs.push({text: 'New data source'}); // We are coming from getting started if (this.$location.search().gettingstarted) { @@ -86,7 +86,7 @@ export class DataSourceEditCtrl { this.backendSrv.get('/api/datasources/' + id).then(ds => { this.isNew = false; this.current = ds; - this.navModel.items.push({title: ds.name}); + this.navModel.breadcrumbs.push({text: ds.name}); if (datasourceCreated) { datasourceCreated = false; diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 781f2403631..bb214a60cc8 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -4,7 +4,7 @@

    - + Data Sources

    @@ -15,7 +15,6 @@
    -
    1. diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index 4910ee95490..3a8b781d0a2 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -42,6 +42,7 @@ export class PluginEditCtrl { return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => { this.model = result; this.pluginIcon = this.getPluginIcon(this.model.type); + this.navModel.breadcrumbs.push({text: this.model.name}); this.model.dependencies.plugins.forEach(plug => { plug.icon = this.getPluginIcon(plug.type); diff --git a/public/sass/base/_grafana_icons.scss b/public/sass/base/_grafana_icons.scss index 42834e704b3..967912eb1ab 100644 --- a/public/sass/base/_grafana_icons.scss +++ b/public/sass/base/_grafana_icons.scss @@ -18,14 +18,20 @@ font-variant: normal; text-transform: none; line-height: 1; + display: inline-block; /* Better Font Rendering =========== */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } +.icon-gf-fw { + width: 1.2857142857em; + text-align: center; +} + .inline-icon-gf { - vertical-align: middle; + vertical-align: middle; } .icon-gf-raintank_wordmark:before { @@ -145,7 +151,7 @@ } .icon-gf-grabber:before { content: "\e90b"; -} +} .icon-gf-users:before { content: "\e622"; } diff --git a/public/sass/components/_cards.scss b/public/sass/components/_cards.scss index 3f17d9e94b7..bc6aa06ef6b 100644 --- a/public/sass/components/_cards.scss +++ b/public/sass/components/_cards.scss @@ -97,7 +97,7 @@ color: $text-color-weak; text-transform: uppercase; font-size: $font-size-sm; - font-weight: bold; + font-weight: $font-weight-semi-bold; } .card-item-notice { @@ -158,6 +158,9 @@ img { width: 6rem; } + .fa, .icon-gf { + font-size: 3.5rem; + } } .card-item-name { diff --git a/public/sass/components/_gf-form.scss b/public/sass/components/_gf-form.scss index b2b17899308..9e01bcadda3 100644 --- a/public/sass/components/_gf-form.scss +++ b/public/sass/components/_gf-form.scss @@ -194,7 +194,7 @@ $gf-form-margin: 0.1rem; select.gf-form-input { text-indent: .01px; text-overflow: ''; - padding-right: $input-padding-x*2; + padding-right: $input-padding-x*4; -webkit-appearance: none; -moz-appearance: menulist-text; // was set to "window" and caused odd display on windos and linux. appearance: none; diff --git a/public/sass/components/_scrollbar.scss b/public/sass/components/_scrollbar.scss index 78cbd6cb18a..b0ab94003a8 100644 --- a/public/sass/components/_scrollbar.scss +++ b/public/sass/components/_scrollbar.scss @@ -110,39 +110,39 @@ // Srollbars // -// ::-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; +} diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index a9ab6927aab..2601b441b0f 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -61,12 +61,12 @@ margin-bottom: $spacer*1.5; } + a, button { + float: right; + margin-left: $spacer; + } } -.page-header__cta { - float: right; - margin-left: $spacer; -} .page-heading { font-size: 1.25rem; diff --git a/public/views/index.html b/public/views/index.html index 7fa2f0fa1e2..aed97c32aaa 100644 --- a/public/views/index.html +++ b/public/views/index.html @@ -82,7 +82,7 @@ window.grafanaBootData = { user:[[.User]], settings: [[.Settings]], - mainNavLinks: [[.MainNavLinks]] + navTree: [[.NavTree]] };