diff --git a/pkg/api/index.go b/pkg/api/index.go index bf5a128a03f..7a954ecdf22 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -140,8 +140,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if setting.AlertingEnabled && (c.OrgRole == m.ROLE_ADMIN || c.OrgRole == m.ROLE_EDITOR) { alertChildNavs := []*dtos.NavLink{ - {Text: "Alert List", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"}, - {Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "fa fa-fw fa-bell-o"}, + {Text: "Alert Rules", Id: "alert-list", Url: setting.AppSubUrl + "/alerting/list", Icon: "fa fa-fw fa-list-ul"}, + {Text: "Notification channels", Id: "channels", Url: setting.AppSubUrl + "/alerting/notifications", Icon: "gicon gicon-alert-notification-channel"}, } data.NavTree = append(data.NavTree, &dtos.NavLink{ diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 3bceee51356..54f39eaa889 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -40,9 +40,9 @@ export function pageH1() { restrict: 'E', template: `

- - - {{model.node.text}} + + + {{model.header.text}}

`, scope: { diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 00dc8feb7cd..964f8f4bd91 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -5,15 +5,24 @@ import config from 'app/core/config'; import _ from 'lodash'; export interface NavModelItem { - title: string; + text: string; url: string; icon?: string; - iconUrl?: string; + img?: string; } -export interface NavModel { - section: NavModelItem; - menu: NavModelItem[]; +export class NavModel { + breadcrumbs: NavModelItem[]; + header: NavModelItem; + node: NavModelItem; + + constructor() { + this.breadcrumbs = []; + } + + setPageHeaderIndex(index: number) { + this.header = this.breadcrumbs[index]; + } } export class NavModelSrv { @@ -31,12 +40,13 @@ export class NavModelSrv { getNav(...args) { var children = this.navItems; - var nav = {breadcrumbs: [], node: null}; + var nav = new NavModel(); for (let id of args) { let node = _.find(children, {id: id}); nav.breadcrumbs.push(node); nav.node = node; + nav.header = node; children = node.children; } diff --git a/public/app/features/admin/partials/configuration_home.html b/public/app/features/admin/partials/configuration_home.html index dd39c80269d..854e4eb848d 100644 --- a/public/app/features/admin/partials/configuration_home.html +++ b/public/app/features/admin/partials/configuration_home.html @@ -1,9 +1,14 @@ - -
-
- -
+
+
+ +
+ +
+
+
+ +
  1. @@ -29,4 +34,4 @@
-
\ No newline at end of file +
diff --git a/public/app/features/alerting/alert_list_ctrl.ts b/public/app/features/alerting/alert_list_ctrl.ts index 5e9d8d80a92..e7a0dbf1298 100644 --- a/public/app/features/alerting/alert_list_ctrl.ts +++ b/public/app/features/alerting/alert_list_ctrl.ts @@ -23,7 +23,8 @@ export class AlertListCtrl { /** @ngInject */ constructor(private backendSrv, private $location, navModelSrv) { - this.navModel = navModelSrv.getNav('alerting'); + this.navModel = navModelSrv.getNav('alerting', 'alert-list'); + this.navModel.setPageHeaderIndex(0); var params = $location.search(); this.filters.state = params.state || null; diff --git a/public/app/features/alerting/notifications_list_ctrl.ts b/public/app/features/alerting/notifications_list_ctrl.ts index 15ef891a979..55647857b41 100644 --- a/public/app/features/alerting/notifications_list_ctrl.ts +++ b/public/app/features/alerting/notifications_list_ctrl.ts @@ -10,6 +10,7 @@ export class AlertNotificationsListCtrl { constructor(private backendSrv, navModelSrv) { this.loadNotifications(); this.navModel = navModelSrv.getNav('alerting', 'channels'); + this.navModel.setPageHeaderIndex(0); } loadNotifications() { diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html index 148757424c5..df7105d0bfe 100644 --- a/public/app/features/alerting/partials/alert_list.html +++ b/public/app/features/alerting/partials/alert_list.html @@ -1,29 +1,52 @@ - +
+
+ -
-
- +
+ - - - How to add an alert - - - - Notification channels - -
+ -
-
-
- -
- -
+
+
+
+ +
+ +
+
+ +
+
+ +
+
+ + + + How to add an alert + + + + + +
diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index 9c52dda36f5..064348b64b6 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -1,10 +1,35 @@ - +
+
+ -
-
- +
+ - + +
+
+
+ +
+
+
+
+ + + New Channel
diff --git a/public/app/features/org/partials/profile.html b/public/app/features/org/partials/profile.html index 8113288e15a..851ebe9f9c6 100644 --- a/public/app/features/org/partials/profile.html +++ b/public/app/features/org/partials/profile.html @@ -1,10 +1,14 @@ - +
+
+ -
-
- -
+
+ +
+
+
+

Information

diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 892403a3d92..b15eb92602a 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -3,9 +3,7 @@
- - -
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+
    @@ -28,6 +26,13 @@
+ +
+
+ Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. +
+
+
diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 1e9fe24fcee..5bec4a5d44e 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,16 +1,25 @@ - -
-
- +
+
+ - - Add data source - +
+ + +
+
+
+ +
+
+
+ + + Add data source +
-
  1. @@ -43,4 +52,4 @@
    No data sources defined
    -
\ No newline at end of file +
diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index 283a54a5902..1fd9e4fa0a3 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -1,93 +1,94 @@ - +
+
+ -
-
-
- +
+
+ -
-

{{ctrl.model.name}}

-
By {{ctrl.model.info.author.name}}
-
- - {{ctrl.model.type}} - +
+

{{ctrl.model.name}}

+
By {{ctrl.model.info.author.name}}
+
+ + {{ctrl.model.type}} + +
-
- - + +
+
-
-
-
-
+
+
+
+
-
-
- +
+
+ -
- - - -
+
+ + +
+
-
- -
- - +
+
+ +
diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index fd7631c68bb..225caf97017 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -1,63 +1,68 @@ - -
-
-

- - Plugins (currently installed) -

+
+
+ -
- +
+ - - Find more plugins on Grafana.com - -
-
+
+ -
- + + Find more plugins on Grafana.com + +
+
+
+
+ +
+
+ -
    -
  1. - -
    -
    - - {{plugin.type}} -
    -
    - Update available! -
    -
    -
    -
    - -
    -
    -
    {{plugin.name}}
    -
    By {{plugin.info.author.name}}
    -
    -
    -     -
    2. -
-
+
    +
  1. + +
    +
    + + {{plugin.type}} +
    +
    + Update available! +
    +
    +
    +
    + +
    +
    +
    {{plugin.name}}
    +
    By {{plugin.info.author.name}}
    +
    +
    +     +
    2. +
+
diff --git a/public/sass/_grafana.scss b/public/sass/_grafana.scss index f067ca3d5cc..af4a97dc1e6 100644 --- a/public/sass/_grafana.scss +++ b/public/sass/_grafana.scss @@ -85,6 +85,7 @@ @import "components/code_editor"; @import "components/dashboard_grid"; @import "components/dashboard_list"; +@import "components/page_header"; // PAGES diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 2e381256aef..c873a7c17e1 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -227,5 +227,5 @@ $dashboard-padding: $panel-margin * 2; $panel-padding: 0px 10px 5px 10px; // tabs -$tabs-padding: 8px 15px 11px; +$tabs-padding: 10px 15px 10px; diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index 3388afb00d2..d0a9dbebcba 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -43,5 +43,9 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_add_panel.svg'); } +.gicon-alert-notification-channel { + background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg'); +} + diff --git a/public/sass/components/_footer.scss b/public/sass/components/_footer.scss index 79c0e0178df..6413ed3650f 100644 --- a/public/sass/components/_footer.scss +++ b/public/sass/components/_footer.scss @@ -5,7 +5,7 @@ .footer { color: $footer-link-color; padding: 5rem 0 1rem 0; - font-size: $font-size-xs; + font-size: $font-size-sm; width: 98%; /* was causing horiz scrollbars - need to examine */ a { diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss new file mode 100644 index 00000000000..9c3a7dc31ea --- /dev/null +++ b/public/sass/components/_page_header.scss @@ -0,0 +1,61 @@ + +.page-header-canvas { + background: linear-gradient(90deg, #292a2d, black); + box-shadow: inset 0px -4px 14px #2d2d2d; + border-bottom: 1px solid $dark-4; +} + +.page-header { + padding: 2rem 0 0 0; + + .btn { + float: right; + margin-left: 1rem; + + // better align icons + .fa { + position: relative; + top: 1px; + } + } +} + +.page-header__title { + font-size: $font-size-h2; + flex-grow: 1; + margin-bottom: 2.5rem; + line-height: 50px; +} + +.page-header__img { + border-radius: 50%; + margin-right: 0.5rem; + position: relative; + top: -3px; + width: 50px; + height: 50px; +} + +.page-header__icon { + font-size: 150%; + margin-right: 0.5rem; + width: 50px; + height: 50px; + position: relative; + + &.fa { + top: 3px; + } + + &.icon-gf { + top: 3px; + } +} + +.page-heading { + font-size: 1.25rem; + margin-top: 0; + margin-bottom: $spacer * 0.7; +} + + diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 739f7b7ae85..fee6d2cb7b8 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,6 +1,8 @@ .gf-tabs { @include clearfix(); float: left; + position: relative; + top: 1px; } .gf-tabs-item { @@ -18,7 +20,7 @@ border-radius: 3px 3px 0 0; i { - padding-right: 5px; + margin-right: 5px; } &:hover, @@ -32,8 +34,6 @@ border-color: $orange $dark-4 transparent; background: $page-bg; color: $link-color; - position: relative; - top: 1px; } } diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 432f6a26a1e..b261c091c37 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -42,6 +42,17 @@ } } +.page-action-bar { + margin-bottom: $spacer * 2; + display: flex; + align-items: flex-start; +} + +.page-action-bar__spacer { + width: $spacer * 2; + flex-grow: 1; +} + .page-content-with-sidebar { width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin } @@ -53,68 +64,6 @@ } } -.page-header-canvas { - background: linear-gradient(90deg, #292a2d, black); - box-shadow: inset 0px -4px 14px #2d2d2d; - bottom-border: 1px solid $dark-4; -} - -.page-header { - padding: 2rem 0 0 0; - - .btn { - float: right; - margin-left: 1rem; - - // better align icons - .fa { - position: relative; - top: 1px; - } - } -} - -.page-header__title { - font-size: $font-size-h2; - flex-grow: 1; - display: inline-block; - margin-bottom: 2.5rem; -} - -.page-header__img { - width: 30px; - height: 30px; - border-radius: 50%; - margin-right: 1rem; - position: relative; - top: -3px; -} - -.page-header__icon { - font-size: 150%; - margin-right: 1rem; -} - -.page-heading { - font-size: 1.25rem; - margin-top: 0; - margin-bottom: $spacer * 0.7; -} - -.admin-page { - max-width: 800px; - margin-left: 10px; - h2 { - margin-left: 15px; - margin-bottom: 0px; - font-size: $font-size-lg; - color: $text-color; - i { - padding-right: 6px; - } - } -} - .page-sidebar { color: $text-color-weak; h4 { @@ -207,13 +156,12 @@ // 5px - for rounded arrows and // 50px - to prevent hover glitches on the border created using shadows*/ - border-radius: 0 5px 0 50px; -} + border-radius: 0 5px 0 50px; + } -// we dont need an arrow after the last link -&:last-child:after { - content: none; -} + // we dont need an arrow after the last link + &:last-child:after { + content: none; + } } -