From 47f11c26c0b866576c148147f630c55eedef741e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 08:18:23 +0100 Subject: [PATCH 01/10] ux: new page header design --- public/app/core/components/navbar/navbar.html | 16 ++-- public/app/core/components/navbar/navbar.ts | 8 +- .../features/plugins/partials/ds_edit.html | 48 ++++++----- .../plugins/partials/plugin_edit.html | 2 +- public/sass/_old_responsive.scss | 3 +- public/sass/_variables.scss | 4 +- public/sass/components/_tabbed_view.scss | 2 +- public/sass/components/_tabs.scss | 58 +++----------- public/sass/layout/_page.scss | 79 +++++++++++-------- 9 files changed, 97 insertions(+), 123 deletions(-) diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index aafd806e47d..6d611692efc 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,13 +1,11 @@
-
-
- - - - - {{::item.text}} - -
+
+ + + + + {{::item.text}} +
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index b41ea4a70ef..3bceee51356 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -39,10 +39,10 @@ export function pageH1() { return { restrict: 'E', template: ` -

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

+ + + {{model.node.text}}

`, scope: { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index d083fe1b332..892403a3d92 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,28 +1,34 @@ - -
-
- +
+
+ -
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+
+ -
- +
Disclaimer. This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource.
+ +
+ +
+
-
- +
+
@@ -83,7 +89,7 @@
-
+
diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index e2569681a70..283a54a5902 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -28,7 +28,7 @@
-
+
diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index b2ca34837d6..146b11afe0d 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -29,8 +29,9 @@ .dashnav-action-icons { display: none; } + .page-container { - padding: ($spacer * 1) ($spacer * 2); + padding: 0 $spacer * 2; } .dash-row-menu-container { diff --git a/public/sass/_variables.scss b/public/sass/_variables.scss index 8b1805480b2..2e381256aef 100644 --- a/public/sass/_variables.scss +++ b/public/sass/_variables.scss @@ -227,7 +227,5 @@ $dashboard-padding: $panel-margin * 2; $panel-padding: 0px 10px 5px 10px; // tabs -$tabs-padding-top: 0.6rem; -$tabs-padding-bottom: 0.4rem; -$tabs-top-margin: 0.5rem; +$tabs-padding: 8px 15px 11px; diff --git a/public/sass/components/_tabbed_view.scss b/public/sass/components/_tabbed_view.scss index c1bc8455205..9eeadf3d61d 100644 --- a/public/sass/components/_tabbed_view.scss +++ b/public/sass/components/_tabbed_view.scss @@ -34,7 +34,7 @@ margin: 0; background-color: transparent; border: none; - padding: ($tabs-padding-top + $tabs-top-margin) $spacer $tabs-padding-bottom; + padding: $tabs-padding; color: $text-color; i { font-size: 120%; diff --git a/public/sass/components/_tabs.scss b/public/sass/components/_tabs.scss index 6aebf846450..739f7b7ae85 100644 --- a/public/sass/components/_tabs.scss +++ b/public/sass/components/_tabs.scss @@ -1,41 +1,6 @@ -.nav-tabs-alt { - & > li > a { - color: darken($link-color, 20%); - } - - li > a:hover { - border-bottom: none; - } - - li.active > a, - li.active > a:focus, - li.active > a:hover { - @include border-radius(3px); - border: 1px solid $divider-border-color; - background-color: transparent; - border-bottom: 1px solid $page-bg; - color: $link-color; - } - - li.disabled > a { - color: $text-color; - } - - .open .dropdown-toggle { - background-color: #060606; - border-color: transparent; - } - - .tab-content { - padding: 10px; - background-color: $panel-bg; - } -} - .gf-tabs { @include clearfix(); float: left; - margin: $tabs-top-margin 0 0 0; } .gf-tabs-item { @@ -44,13 +9,17 @@ } .gf-tabs-link { - padding: $tabs-padding-top $spacer $tabs-padding-bottom $spacer; + padding: $tabs-padding; margin-right: $spacer/2; - border: 1px solid transparent; position: relative; display: block; + border: solid transparent; + border-width: 2px 1px 1px; + border-radius: 3px 3px 0 0; - @include border-radius(2px 2px 0 0); + i { + padding-right: 5px; + } &:hover, &:focus { @@ -60,20 +29,11 @@ &.active, &.active:hover, &.active:focus { - @include border-radius(3px); - border-color: rgba(216, 131, 40, 0.77); - border-bottom: 1px solid $page-bg; + border-color: $orange $dark-4 transparent; + background: $page-bg; color: $link-color; position: relative; top: 1px; } } -.form-tabs-wrapper { - @include brand-bottom-border(); - @include clearfix(); -} - -.form-tabs-content { - padding: $spacer*2 $spacer; -} diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index e36e0301162..432f6a26a1e 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -16,7 +16,7 @@ .page-container { @extend .container; - padding: $spacer $spacer $spacer $spacer*3; + padding: 0 $spacer * 2; } .scroll-canvas { @@ -31,10 +31,14 @@ } .page-body { - @include media-breakpoint-up(md) { - display: flex; - flex-direction: row; - flex-wrap: wrap; + padding-top: $spacer*2; + + &--with-sidebar { + @include media-breakpoint-up(md) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } } } @@ -49,31 +53,18 @@ } } +.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; - margin-bottom: 2rem; - @include brand-bottom-border(); - @include clearfix(); - h1 { - font-size: $font-size-h2; - flex-grow: 1; - display: inline-block; - margin-bottom: 1rem; - - img { - width: 30px; - height: 30px; - border-radius: 50%; - margin-right: 0.5rem; - position: relative; - top: -3px; - } - } - - a, button { + .btn { float: right; - margin-left: $spacer; + margin-left: 1rem; // better align icons .fa { @@ -83,7 +74,26 @@ } } +.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; @@ -123,7 +133,7 @@ .page-breadcrumbs { display: flex; - padding: 10px 25px; + padding: 10px 0; line-height: 0.5; } @@ -136,6 +146,8 @@ } .breadcrumb-item { + @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + text-decoration: none; outline: none; display: block; @@ -143,7 +155,6 @@ font-size: 12px; line-height: 30px; padding: 0 7px 0 37px; - @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); position: relative; box-shadow: $card-shadow; @@ -196,13 +207,13 @@ // 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; +} } From 645f49eda49c03d142e7faad3e47109c8e254df9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 11:31:38 +0100 Subject: [PATCH 02/10] ux: updating header design for pages --- pkg/api/index.go | 4 +- public/app/core/components/navbar/navbar.ts | 6 +- public/app/core/nav_model_srv.ts | 22 ++- .../admin/partials/configuration_home.html | 17 +- .../app/features/alerting/alert_list_ctrl.ts | 3 +- .../alerting/notifications_list_ctrl.ts | 1 + .../alerting/partials/alert_list.html | 65 ++++--- .../alerting/partials/notifications_list.html | 35 +++- public/app/features/org/partials/profile.html | 14 +- .../features/plugins/partials/ds_edit.html | 11 +- .../features/plugins/partials/ds_list.html | 27 ++- .../plugins/partials/plugin_edit.html | 173 +++++++++--------- .../plugins/partials/plugin_list.html | 121 ++++++------ public/sass/_grafana.scss | 1 + public/sass/_variables.scss | 2 +- public/sass/base/_icons.scss | 4 + public/sass/components/_footer.scss | 2 +- public/sass/components/_page_header.scss | 61 ++++++ public/sass/components/_tabs.scss | 6 +- public/sass/layout/_page.scss | 88 ++------- 20 files changed, 383 insertions(+), 280 deletions(-) create mode 100644 public/sass/components/_page_header.scss 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 - -
-
+
+ -
- - -
    -
  1. - -
    -
    - - {{plugin.type}} -
    -
    - Update available! -
    -
    -
    -
    - -
    -
    -
    {{plugin.name}}
    -
    By {{plugin.info.author.name}}
    -
    -
    -     -
    2. -
-
+ + Find more plugins on Grafana.com + +
+
+
+
+ +
+
+ + +
    +
  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; -} -} - - From 74ceb76ec02ec6761618a655a451122e65d0d139 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 15:37:03 +0100 Subject: [PATCH 03/10] ux: work on page header --- pkg/api/dtos/index.go | 1 + pkg/api/index.go | 85 +++++++++--------- public/app/core/angular_wrappers.ts | 2 + public/app/core/components/PageHeader.tsx | 88 +++++++++++++++++++ public/app/core/nav_model_srv.ts | 28 ++++-- .../admin/partials/configuration_home.html | 10 +-- .../app/features/alerting/alert_list_ctrl.ts | 3 +- .../alerting/notifications_list_ctrl.ts | 3 +- .../alerting/partials/alert_list.html | 26 +----- .../alerting/partials/notifications_list.html | 25 +----- public/app/features/org/org_details_ctrl.ts | 2 +- .../app/features/org/partials/orgDetails.html | 59 +++++++++---- public/app/features/plugins/ds_list_ctrl.ts | 2 +- .../features/plugins/partials/ds_list.html | 11 +-- public/sass/_variables.dark.scss | 1 + public/sass/base/_icons.scss | 4 + public/sass/components/_page_header.scss | 40 ++++++--- public/sass/layout/_page.scss | 6 ++ public/sass/pages/_plugins.scss | 50 +++-------- 19 files changed, 254 insertions(+), 192 deletions(-) create mode 100644 public/app/core/components/PageHeader.tsx diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go index 5661ae1df91..8f1cdd9a92d 100644 --- a/pkg/api/dtos/index.go +++ b/pkg/api/dtos/index.go @@ -24,6 +24,7 @@ type NavLink struct { Id string `json:"id,omitempty"` Text string `json:"text,omitempty"` Description string `json:"description,omitempty"` + SubTitle string `json:"subTitle,omitempty"` Icon string `json:"icon,omitempty"` Img string `json:"img,omitempty"` Url string `json:"url,omitempty"` diff --git a/pkg/api/index.go b/pkg/api/index.go index 7a954ecdf22..7f30dcf9f8a 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -104,7 +104,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home"}, {Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"}, {Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"}, - {Text: "Dashboard List", Description: "Manage Dashboards And Folders", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-bars"}, + {Text: "Dashboard List", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-bars"}, } data.NavTree = append(data.NavTree, &dtos.NavLink{ @@ -146,6 +146,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Alerting", + SubTitle: "Alert rules & notifications", Id: "alerting", Icon: "gicon gicon-alert", Url: setting.AppSubUrl + "/alerting/list", @@ -202,10 +203,11 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if c.OrgRole == m.ROLE_ADMIN { cfgNode := &dtos.NavLink{ - Id: "cfg", - Text: "Configuration", - Icon: "fa fa-fw fa-cogs", - Url: setting.AppSubUrl + "/configuration", + Id: "cfg", + Text: "Configuration", + SubTitle: "Organization: " + c.OrgName, + Icon: "fa fa-fw fa-cog", + Url: setting.AppSubUrl + "/datasources", Children: []*dtos.NavLink{ { Text: "Data Sources", @@ -218,25 +220,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { {Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"}, }, }, - { - 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-fw 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: "Members", Id: "users", @@ -245,12 +228,32 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Url: setting.AppSubUrl + "/org/users", }, { - Text: "Groups", + Text: "Teams", Id: "users", Description: "Manage org groups", - Icon: "fa fa-fw fa-users", + Icon: "gicon gicon-user-group", Url: setting.AppSubUrl + "/org/user-groups", }, + { + Text: "Plugins", + Id: "plugins", + Description: "View and configure plugins", + Icon: "icon-gf icon-gf-fw 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: "Preferences", + Id: "org-settings", + Description: "Organization preferences", + Icon: "fa fa-fw fa-sliders", + Url: setting.AppSubUrl + "/org", + }, + { Text: "API Keys", Id: "apikeys", @@ -261,21 +264,21 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { }, } - if c.IsGrafanaAdmin { - cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{ - Text: "Server Admin", - Id: "admin", - Icon: "fa fa-fw fa-shield", - Url: setting.AppSubUrl + "/admin", - Children: []*dtos.NavLink{ - {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"}, - {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"}, - {Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"}, - {Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"}, - {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"}, - }, - }) - } + // if c.IsGrafanaAdmin { + // cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{ + // Text: "Server Admin", + // Id: "admin", + // Icon: "fa fa-fw fa-shield", + // Url: setting.AppSubUrl + "/admin", + // Children: []*dtos.NavLink{ + // {Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"}, + // {Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"}, + // {Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"}, + // {Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"}, + // {Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"}, + // }, + // }) + // } data.NavTree = append(data.NavTree, cfgNode) } diff --git a/public/app/core/angular_wrappers.ts b/public/app/core/angular_wrappers.ts index 7acdc79d55a..00181736119 100644 --- a/public/app/core/angular_wrappers.ts +++ b/public/app/core/angular_wrappers.ts @@ -1,8 +1,10 @@ import { react2AngularDirective } from 'app/core/utils/react2angular'; import { PasswordStrength } from './components/PasswordStrength'; +import PageHeader from './components/PageHeader'; export function registerAngularDirectives() { react2AngularDirective('passwordStrength', PasswordStrength, ['password']); + react2AngularDirective('pageHeader', PageHeader, ['model', "noTabs"]); } diff --git a/public/app/core/components/PageHeader.tsx b/public/app/core/components/PageHeader.tsx new file mode 100644 index 00000000000..bc0fbb3f7b9 --- /dev/null +++ b/public/app/core/components/PageHeader.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import { NavModel } from '../nav_model_srv'; +import classNames from 'classnames'; + +export interface IProps { + model: NavModel; +} + +export default class PageHeader extends React.Component { + constructor(props) { + super(props); + } + + renderBreadcrumb(breadcrumb) { + return ( + + {breadcrumb.text} + + ); + } + + renderTab(tab) { + let tabClasses = classNames({ + 'gf-tabs-link': true, + 'active': tab.active, + }); + + console.log(tab.active); + + return ( +
  • + + + {tab.text} + +
    • + ); + } + + renderHeaderTitle(main) { + return ( +
    + + {main.icon && } + {main.img && } + + +
    +

    {main.text}

    + {main.subTitle &&
    {main.subTitle}
    } + {main.subType && ( +
    + + {main.subType.text} +
    + )} +
    +
    + ); + } + + render() { + return ( +
    +
    +
    +
    + + + + {this.props.model.breadcrumbs.map(this.renderBreadcrumb)} +
    +
    + +
    + {this.renderHeaderTitle(this.props.model.main)} + + {this.props.model.main.children && ( +
      + {this.props.model.main.children.map(this.renderTab)} +
    + )} +
    +
    +
    + ); + } +} diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 964f8f4bd91..017b2c6435f 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -1,5 +1,3 @@ -/// - import coreModule from 'app/core/core_module'; import config from 'app/core/config'; import _ from 'lodash'; @@ -9,20 +7,18 @@ export interface NavModelItem { url: string; icon?: string; img?: string; + active?: boolean; + children: NavModelItem[]; } export class NavModel { breadcrumbs: NavModelItem[]; - header: NavModelItem; + main: NavModelItem; node: NavModelItem; constructor() { this.breadcrumbs = []; } - - setPageHeaderIndex(index: number) { - this.header = this.breadcrumbs[index]; - } } export class NavModelSrv { @@ -43,13 +39,29 @@ export class NavModelSrv { var nav = new NavModel(); for (let id of args) { + // if its a number then it's the index to use for main + if (_.isNumber(id)) { + nav.main = nav.breadcrumbs[id]; + break; + } + let node = _.find(children, {id: id}); nav.breadcrumbs.push(node); nav.node = node; - nav.header = node; + nav.main = node; children = node.children; } + if (nav.main.children) { + for (let item of nav.main.children) { + item.active = false; + + if (item.url === nav.node.url) { + item.active = true; + } + } + } + return nav; } diff --git a/public/app/features/admin/partials/configuration_home.html b/public/app/features/admin/partials/configuration_home.html index 854e4eb848d..7ebc5127b4a 100644 --- a/public/app/features/admin/partials/configuration_home.html +++ b/public/app/features/admin/partials/configuration_home.html @@ -1,12 +1,4 @@ -
    -
    - - -
    - -
    -
    -
    +
    diff --git a/public/app/features/alerting/alert_list_ctrl.ts b/public/app/features/alerting/alert_list_ctrl.ts index e7a0dbf1298..2f70e9bda59 100644 --- a/public/app/features/alerting/alert_list_ctrl.ts +++ b/public/app/features/alerting/alert_list_ctrl.ts @@ -23,8 +23,7 @@ export class AlertListCtrl { /** @ngInject */ constructor(private backendSrv, private $location, navModelSrv) { - this.navModel = navModelSrv.getNav('alerting', 'alert-list'); - this.navModel.setPageHeaderIndex(0); + this.navModel = navModelSrv.getNav('alerting', 'alert-list', 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 55647857b41..d1edeb35ac2 100644 --- a/public/app/features/alerting/notifications_list_ctrl.ts +++ b/public/app/features/alerting/notifications_list_ctrl.ts @@ -9,8 +9,7 @@ export class AlertNotificationsListCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv) { this.loadNotifications(); - this.navModel = navModelSrv.getNav('alerting', 'channels'); - this.navModel.setPageHeaderIndex(0); + this.navModel = navModelSrv.getNav('alerting', 'channels', 0); } loadNotifications() { diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html index df7105d0bfe..9a992dd34a3 100644 --- a/public/app/features/alerting/partials/alert_list.html +++ b/public/app/features/alerting/partials/alert_list.html @@ -1,28 +1,4 @@ -
    -
    - - -
    - - - - -
    -
    -
    +
    diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index 064348b64b6..a2f6f723696 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -1,27 +1,4 @@ -
    -
    - - -
    - - - -
    -
    -
    +
    diff --git a/public/app/features/org/org_details_ctrl.ts b/public/app/features/org/org_details_ctrl.ts index 63291c346e0..525cb6b8b59 100644 --- a/public/app/features/org/org_details_ctrl.ts +++ b/public/app/features/org/org_details_ctrl.ts @@ -6,7 +6,7 @@ export class OrgDetailsCtrl { constructor($scope, $http, backendSrv, contextSrv, navModelSrv) { $scope.init = function() { $scope.getOrgInfo(); - $scope.navModel = navModelSrv.getNav('cfg', 'org'); + $scope.navModel = navModelSrv.getNav('cfg', 'org-settings', 0); }; $scope.getOrgInfo = function() { diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 69422925dee..8d000a7b8d1 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -1,26 +1,51 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    - -
    + -

    General

    - -
    -
    - Organization name - -
    -
    +
    +

    General

    + +
    +
    + Organization name + +
    +
    - - - - + +
    diff --git a/public/app/features/plugins/ds_list_ctrl.ts b/public/app/features/plugins/ds_list_ctrl.ts index a893ee7475f..5feadb68fe3 100644 --- a/public/app/features/plugins/ds_list_ctrl.ts +++ b/public/app/features/plugins/ds_list_ctrl.ts @@ -13,7 +13,7 @@ export class DataSourcesCtrl { private datasourceSrv, private navModelSrv) { - this.navModel = this.navModelSrv.getNav('cfg', 'datasources'); + this.navModel = this.navModelSrv.getNav('cfg', 'datasources', 0); backendSrv.get('/api/datasources').then(result => { this.datasources = result; diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index 5bec4a5d44e..0669beb4129 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,13 +1,4 @@ -
    -
    - - -
    - - -
    -
    -
    +
    diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 1164f8305e0..437c33d7bbd 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -52,6 +52,7 @@ $critical: #ed2e18; // ------------------------- $body-bg: rgb(23,24,25); $page-bg: rgb(22, 23, 25); + $body-color: $gray-4; $text-color: $gray-4; $text-color-strong: $white; diff --git a/public/sass/base/_icons.scss b/public/sass/base/_icons.scss index d0a9dbebcba..e8dc28c96b6 100644 --- a/public/sass/base/_icons.scss +++ b/public/sass/base/_icons.scss @@ -47,5 +47,9 @@ background-image: url('../img/icons_#{$theme-name}_theme/icon_notification_channels.svg'); } +.gicon-user-group { + background-image: url('../img/icons_#{$theme-name}_theme/icon_user_group.svg'); +} + diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 9c3a7dc31ea..6544e15b935 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -20,27 +20,30 @@ } } +.page-header__inner { + flex-grow: 1; + display: flex; + margin-bottom: 2.5rem; +} + .page-header__title { font-size: $font-size-h2; - flex-grow: 1; - margin-bottom: 2.5rem; - line-height: 50px; + margin-bottom: 1px; + padding-top: $spacer; } .page-header__img { border-radius: 50%; - margin-right: 0.5rem; position: relative; top: -3px; - width: 50px; - height: 50px; + width: 65px; + height: 65px; } .page-header__icon { - font-size: 150%; - margin-right: 0.5rem; - width: 50px; - height: 50px; + font-size: 70px; + width: 65; + height: 65; position: relative; &.fa { @@ -52,10 +55,19 @@ } } -.page-heading { - font-size: 1.25rem; - margin-top: 0; - margin-bottom: $spacer * 0.7; +.page-header__logo { + margin-right: $spacer/2; } +.page-header-info-block { +} + +.page-header__sub-title { + color: $text-muted; +} + +.page-header-stamps-type { + color: $link-color-disabled; + text-transform: uppercase; +} diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index b261c091c37..6ea39877311 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -42,6 +42,12 @@ } } +.page-heading { + font-size: 1.25rem; + margin-top: 0; + margin-bottom: $spacer * 0.7; +} + .page-action-bar { margin-bottom: $spacer * 2; display: flex; diff --git a/public/sass/pages/_plugins.scss b/public/sass/pages/_plugins.scss index c93d94f40b5..edb4e8ade3c 100644 --- a/public/sass/pages/_plugins.scss +++ b/public/sass/pages/_plugins.scss @@ -1,41 +1,3 @@ -.plugin-header { - @include clearfix(); - - padding: $spacer 0 $spacer/2 0; - margin-bottom: 2rem; -} - -.plugin-header-logo { - float: left; - width: 7rem; - img { - width: 7rem; - } - margin-right: $spacer; -} - -.plugin-header-info-block { - float: left; -} - -.plugin-header-author { -} - -.plugin-header-stamps-type { - color: $link-color-disabled; - text-transform: uppercase; -} - -.plugin-info-list-item { - img { - width: 16px; - } - - white-space: nowrap; - max-width: $page-sidebar-width; - text-overflow: ellipsis; - overflow: hidden; -} .get-more-plugins-link { color: $gray-3; @@ -55,3 +17,15 @@ display: none; } } + +.plugin-info-list-item { + img { + width: 16px; + } + + white-space: nowrap; + max-width: $page-sidebar-width; + text-overflow: ellipsis; + overflow: hidden; +} + From b2add1977a328e9ef75ff2c68f53c50932d35d9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 16:35:27 +0100 Subject: [PATCH 04/10] ux: progress on new page header --- pkg/api/index.go | 4 - public/app/features/org/org_users_ctrl.ts | 5 +- .../app/features/org/partials/orgUsers.html | 92 +++++++++++-------- public/app/features/plugins/ds_edit_ctrl.ts | 8 +- .../features/plugins/partials/ds_edit.html | 60 ++++++------ .../plugins/partials/ds_http_settings.html | 4 +- public/sass/layout/_page.scss | 8 ++ 7 files changed, 103 insertions(+), 78 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index 7f30dcf9f8a..36f20c82083 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -215,10 +215,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { Description: "Add and configure data sources", Id: "datasources", Url: setting.AppSubUrl + "/datasources", - Children: []*dtos.NavLink{ - {Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "gicon gicon-datasources"}, - {Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"}, - }, }, { Text: "Members", diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts index 8127120e341..1686a1c3424 100644 --- a/public/app/features/org/org_users_ctrl.ts +++ b/public/app/features/org/org_users_ctrl.ts @@ -23,7 +23,7 @@ export class OrgUsersCtrl { role: 'Viewer', }; - this.navModel = navModelSrv.getNav('cfg', 'users'); + this.navModel = navModelSrv.getNav('cfg', 'users', 0); this.get(); this.editor = { index: 0 }; @@ -44,8 +44,7 @@ export class OrgUsersCtrl { if (this.externalUserMngLinkName) { return this.externalUserMngLinkName; } - - return "Add Members"; + return "Add Member"; } get() { diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index c612ab95271..5f98614b854 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -1,34 +1,52 @@ - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    - + +
    +
    +
    + - -
    - - - - {{ctrl.addUsersBtnName}} - - - -
    -
    + + + {{ctrl.addUsersBtnName}} + +
    @@ -41,26 +59,26 @@ Login Email - - Seen - Time since user was seen using Grafana - + + Seen + Time since user was seen using Grafana + Role - - + + {{user.login}} {{user.email}} - {{user.lastSeenAtAge}} + {{user.lastSeenAtAge}} -
    - -
    +
    + +
    diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 6ea230e054b..46e787738e5 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -41,7 +41,7 @@ export class DataSourceEditCtrl { navModelSrv, ) { - this.navModel = navModelSrv.getNav('cfg', 'datasources'); + this.navModel = navModelSrv.getNav('cfg', 'datasources', 0); this.datasources = []; this.tabIndex = 0; @@ -58,9 +58,7 @@ export class DataSourceEditCtrl { this.isNew = true; this.current = _.cloneDeep(defaults); - // add to nav & breadcrumbs - this.navModel.node = {text: 'New data source', icon: 'icon-gf icon-gf-fw icon-gf-datasources'}; - this.navModel.breadcrumbs.push(this.navModel.node); + this.navModel.breadcrumbs.push({text: 'New'}); // We are coming from getting started if (this.$location.search().gettingstarted) { @@ -87,7 +85,7 @@ export class DataSourceEditCtrl { this.backendSrv.get('/api/datasources/' + id).then(ds => { this.isNew = false; this.current = ds; - this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources'}; + this.navModel.node = {text: ds.name, icon: 'icon-gf icon-gf-fw icon-gf-datasources', id: 'ds-new'}; this.navModel.breadcrumbs.push(this.navModel.node); if (datasourceCreated) { diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index b15eb92602a..c879f74cfad 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,34 +1,40 @@ -
    -
    - + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    - - -
    - -
    -
    -
    -
    +
    -
    -
    +

    Edit Data Source

    +

    New Data Source

    + +
    +
    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_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index 39fc7296b32..0bc2e7dd1d9 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -1,7 +1,7 @@
    -

    HTTP settings

    +

    HTTP

    @@ -38,7 +38,7 @@
    -

    HTTP Auth

    +

    Auth

    diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index 6ea39877311..bdb85d2a7ce 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -52,6 +52,10 @@ margin-bottom: $spacer * 2; display: flex; align-items: flex-start; + + > a, > button { + margin-left: $spacer; + } } .page-action-bar__spacer { @@ -70,6 +74,10 @@ } } +.page-sub-heading { + margin-bottom: $spacer; +} + .page-sidebar { color: $text-color-weak; h4 { From b1a2344be11fbdc0e524853af6a4f7f6c17cca2c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 16:51:06 +0100 Subject: [PATCH 05/10] added bundled dashboards --- .../plugins/import_list/import_list.html | 6 - .../features/plugins/partials/ds_edit.html | 122 +++++++++--------- .../plugins/partials/ds_http_settings.html | 47 ++++--- .../datasource/graphite/partials/config.html | 2 +- 4 files changed, 86 insertions(+), 91 deletions(-) diff --git a/public/app/features/plugins/import_list/import_list.html b/public/app/features/plugins/import_list/import_list.html index b8e6e13cf8c..ff655f0c33a 100644 --- a/public/app/features/plugins/import_list/import_list.html +++ b/public/app/features/plugins/import_list/import_list.html @@ -13,12 +13,6 @@ {{dash.title}} - - - Revision: {{dash.revision}} - (Imported: {{dash.importedRevision}}) - - - - Cancel -
    +
    +

    Bundled Plugin Dashboards

    +
    + +
    +
    -
    -
    -
    +
    +
    Testing....
    +
    +
    + + +
    +
    +
    {{ctrl.testing.message}}
    +
    +
    +
    - -
    -
    - -
    +
    + + + Cancel +
    + +
    +
    +
    + +
    diff --git a/public/app/features/plugins/partials/ds_http_settings.html b/public/app/features/plugins/partials/ds_http_settings.html index 0bc2e7dd1d9..0e36cee833b 100644 --- a/public/app/features/plugins/partials/ds_http_settings.html +++ b/public/app/features/plugins/partials/ds_http_settings.html @@ -39,38 +39,37 @@

    Auth

    -
    -
    - - -
    -
    - - -
    -
    - +
    - + +
    +
    + + +
    +
    + +
    +
    Basic Auth Details
    -
    - - User - - -
    +
    + + User + + +
    -
    - - Password - - -
    +
    + + Password + + +
    diff --git a/public/app/plugins/datasource/graphite/partials/config.html b/public/app/plugins/datasource/graphite/partials/config.html index 804d339452e..58afc32de19 100644 --- a/public/app/plugins/datasource/graphite/partials/config.html +++ b/public/app/plugins/datasource/graphite/partials/config.html @@ -3,7 +3,7 @@ suggest-url="http://localhost:8080"> -

    Graphite details

    +

    Graphite details

    From 6f5a9bf76841d762c6381f1f97747efb9241d390 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Thu, 30 Nov 2017 17:28:24 +0100 Subject: [PATCH 06/10] ux: new page header progress --- pkg/api/index.go | 11 +-- .../app/features/org/partials/orgDetails.html | 3 +- public/app/features/org/partials/profile.html | 13 +-- public/app/features/org/prefs_control.ts | 2 +- public/app/features/org/profile_ctrl.ts | 2 +- .../plugins/partials/plugin_list.html | 85 +++++++++++-------- .../app/features/plugins/plugin_list_ctrl.ts | 32 +++---- public/sass/components/_page_header.scss | 3 - 8 files changed, 75 insertions(+), 76 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index 36f20c82083..a1939eab8f6 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -117,22 +117,23 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { if c.IsSignedIn { profileNode := &dtos.NavLink{ - Text: c.SignedInUser.Login, + Text: c.SignedInUser.Name, + SubTitle: c.SignedInUser.Login, Id: "profile", Img: data.User.GravatarUrl, Url: setting.AppSubUrl + "/profile", HideFromMenu: true, Children: []*dtos.NavLink{ - {Text: "Your profile", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"}, + {Text: "Preferences", Id: "profile-settings", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"}, {Text: "Change Password", Id: "change-password", Url: setting.AppSubUrl + "/profile/password", Icon: "fa fa-fw fa-lock", HideFromMenu: true}, }, } if !setting.DisableSignoutMenu { // add sign out first - profileNode.Children = append([]*dtos.NavLink{ - {Text: "Sign out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self"}, - }, profileNode.Children...) + profileNode.Children = append(profileNode.Children, &dtos.NavLink{ + Text: "Sign out", Id: "sign-out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self", + }) } data.NavTree = append(data.NavTree, profileNode) diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 8d000a7b8d1..da99436a93d 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -32,7 +32,8 @@
    -

    General

    +

    Organization profile

    +
    diff --git a/public/app/features/org/partials/profile.html b/public/app/features/org/partials/profile.html index 851ebe9f9c6..02b0d27b84f 100644 --- a/public/app/features/org/partials/profile.html +++ b/public/app/features/org/partials/profile.html @@ -1,16 +1,9 @@ -
    -
    - - -
    - -
    -
    -
    +
    +

    User Profile

    + -

    Information

    Name diff --git a/public/app/features/org/prefs_control.ts b/public/app/features/org/prefs_control.ts index 1bc758bf2cc..7843b5229d1 100644 --- a/public/app/features/org/prefs_control.ts +++ b/public/app/features/org/prefs_control.ts @@ -49,7 +49,7 @@ export class PrefsControlCtrl { var template = ` -

    Preferences

    +

    Preferences

    UI Theme diff --git a/public/app/features/org/profile_ctrl.ts b/public/app/features/org/profile_ctrl.ts index e82df591382..6b007203d89 100644 --- a/public/app/features/org/profile_ctrl.ts +++ b/public/app/features/org/profile_ctrl.ts @@ -14,7 +14,7 @@ export class ProfileCtrl { constructor(private backendSrv, private contextSrv, private $location, navModelSrv) { this.getUser(); this.getUserOrgs(); - this.navModel = navModelSrv.getNav('profile'); + this.navModel = navModelSrv.getNav('profile', 'profile-settings', 0); } getUser() { diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index 225caf97017..efe036ec14f 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -1,42 +1,55 @@ + -
    -
    - - -
    - - -
    - - - - Find more plugins on Grafana.com - -
    -
    -
    -
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    +
    +
    + + +
    + +
    + + Find more plugins on Grafana.com + +
    +
    diff --git a/public/app/features/plugins/plugin_list_ctrl.ts b/public/app/features/plugins/plugin_list_ctrl.ts index ada1fc6a1ff..e8a501ff39e 100644 --- a/public/app/features/plugins/plugin_list_ctrl.ts +++ b/public/app/features/plugins/plugin_list_ctrl.ts @@ -1,34 +1,28 @@ -/// - import angular from 'angular'; +import _ from 'lodash'; export class PluginListCtrl { plugins: any[]; tabIndex: number; navModel: any; + searchQuery: string; + allPlugins: any[]; /** @ngInject */ constructor(private backendSrv: any, $location, navModelSrv) { this.tabIndex = 0; - this.navModel = navModelSrv.getNav('cfg', 'plugins'); + this.navModel = navModelSrv.getNav('cfg', 'plugins', 0); - var pluginType = $location.search().type || 'panel'; - switch (pluginType) { - case "datasource": { - this.tabIndex = 1; - break; - } - case "app": { - this.tabIndex = 2; - break; - } - case "panel": - default: - this.tabIndex = 0; - } - - this.backendSrv.get('api/plugins', {embedded: 0, type: pluginType}).then(plugins => { + this.backendSrv.get('api/plugins', {embedded: 0}).then(plugins => { this.plugins = plugins; + this.allPlugins = plugins; + }); + } + + onQueryUpdated() { + let regex = new RegExp(this.searchQuery, 'ig'); + this.plugins = _.filter(this.allPlugins, item => { + return regex.test(item.name) || regex.test(item.type); }); } } diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 6544e15b935..2183ac23256 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -59,9 +59,6 @@ margin-right: $spacer/2; } -.page-header-info-block { -} - .page-header__sub-title { color: $text-muted; } From 32ffb2d544614f358ab1b301f130ea36938138e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 10:27:05 +0100 Subject: [PATCH 07/10] progress on page header --- public/app/core/components/PageHeader.tsx | 92 +++++++-------- public/app/core/nav_model_srv.ts | 1 + .../alerting/partials/alert_list.html | 5 - .../features/org/partials/user_groups.html | 22 ++-- public/app/features/org/user_groups_ctrl.ts | 2 +- .../plugins/partials/plugin_edit.html | 62 ++++++----- public/sass/components/_page_header.scss | 105 ++++++++++++++++-- public/sass/layout/_page.scss | 86 -------------- 8 files changed, 190 insertions(+), 185 deletions(-) diff --git a/public/app/core/components/PageHeader.tsx b/public/app/core/components/PageHeader.tsx index bc0fbb3f7b9..cf3aa0d0cd4 100644 --- a/public/app/core/components/PageHeader.tsx +++ b/public/app/core/components/PageHeader.tsx @@ -1,48 +1,63 @@ import React from 'react'; -import { NavModel } from '../nav_model_srv'; -import classNames from 'classnames'; +import { NavModel, NavModelItem } from '../nav_model_srv'; +import classNames from 'classnames'; export interface IProps { model: NavModel; } +// function BreadcrumbItem(item: NavModelItem) { +// return ( +// +// {item.text} +// +// ); +// } +// +// function Breadcrumb(model: NavModel) { +// return ( +//
    +//
    +// +// +// +// {model.breadcrumbs.map(BreadcrumbItem)} +//
    +//
    +// ); +// } + +function TabItem(tab: NavModelItem) { + let tabClasses = classNames({ + 'gf-tabs-link': true, + active: tab.active, + }); + + return ( +
  • + + + {tab.text} + +
    • + ); +} + +function Tabs({main}: {main: NavModelItem}) { + return
      {main.children.map(TabItem)}
    ; +} + export default class PageHeader extends React.Component { constructor(props) { super(props); } - renderBreadcrumb(breadcrumb) { - return ( - - {breadcrumb.text} - - ); - } - - renderTab(tab) { - let tabClasses = classNames({ - 'gf-tabs-link': true, - 'active': tab.active, - }); - - console.log(tab.active); - - return ( -
  • - - - {tab.text} - -
    • - ); - } - renderHeaderTitle(main) { return (
    - {main.icon && } - {main.img && } + {main.icon && } + {main.img && }
    @@ -50,7 +65,7 @@ export default class PageHeader extends React.Component { {main.subTitle &&
    {main.subTitle}
    } {main.subType && (
    - + {main.subType.text}
    )} @@ -63,23 +78,10 @@ export default class PageHeader extends React.Component { return (
    -
    -
    - - - - {this.props.model.breadcrumbs.map(this.renderBreadcrumb)} -
    -
    -
    {this.renderHeaderTitle(this.props.model.main)} - {this.props.model.main.children && ( -
      - {this.props.model.main.children.map(this.renderTab)} -
    - )} + {this.props.model.main.children && }
    diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index 017b2c6435f..bfc275015db 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -7,6 +7,7 @@ export interface NavModelItem { url: string; icon?: string; img?: string; + id: string; active?: boolean; children: NavModelItem[]; } diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html index 9a992dd34a3..e7eb2533463 100644 --- a/public/app/features/alerting/partials/alert_list.html +++ b/public/app/features/alerting/partials/alert_list.html @@ -18,11 +18,6 @@ How to add an alert - - - - -
    diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/user_groups.html index f7884352865..da3597c044b 100644 --- a/public/app/features/org/partials/user_groups.html +++ b/public/app/features/org/partials/user_groups.html @@ -1,20 +1,23 @@ - + -
    -
    -

    User Groups

    +
    +
    - - - Create User Group - -
    + +
    + + + + Create User Group + +
    +
    @@ -42,7 +45,6 @@ -
    diff --git a/public/app/features/org/user_groups_ctrl.ts b/public/app/features/org/user_groups_ctrl.ts index 92f99712d7b..6534f749260 100644 --- a/public/app/features/org/user_groups_ctrl.ts +++ b/public/app/features/org/user_groups_ctrl.ts @@ -15,7 +15,7 @@ export class UserGroupsCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'users'); + this.navModel = navModelSrv.getNav('cfg', 'users', 0); this.get(); } diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index 1fd9e4fa0a3..adc1c637a28 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -1,34 +1,36 @@ -
    -
    - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -
    -
    - - -
    -

    {{ctrl.model.name}}

    -
    By {{ctrl.model.info.author.name}}
    -
    - - {{ctrl.model.type}} - -
    -
    -
    - - -
    -
    -
    +
    diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 2183ac23256..24e1570b996 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -6,7 +6,7 @@ } .page-header { - padding: 2rem 0 0 0; + padding: 2.5rem 0 0 0; .btn { float: right; @@ -36,18 +36,22 @@ border-radius: 50%; position: relative; top: -3px; - width: 65px; - height: 65px; + width: 50px; + height: 50px; } .page-header__icon { - font-size: 70px; - width: 65; - height: 65; + font-size: 50px; + width: 50px; + height: 50px; position: relative; &.fa { - top: 3px; + top: 8px; + } + + &.gicon { + top: 7px; } &.icon-gf { @@ -56,7 +60,7 @@ } .page-header__logo { - margin-right: $spacer/2; + margin: 0 $spacer; } .page-header__sub-title { @@ -68,3 +72,88 @@ text-transform: uppercase; } +.page-breadcrumbs { + display: flex; + padding: 10px 0; + line-height: 0.5; +} + +.breadcrumb { + display: inline-block; + box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); + overflow: hidden; + border-radius: 5px; + counter-reset: flag; +} + +.breadcrumb-item { + @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); + + text-decoration: none; + outline: none; + display: block; + float: left; + font-size: 12px; + line-height: 30px; + padding: 0 7px 0 37px; + position: relative; + box-shadow: $card-shadow; + + &:first-child { + padding-left: 10px; + border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ + font-size: 18px; + } + + &:first-child:before { + left: 14px; + } + + &:last-child { + border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ + padding-right: 20px; + } + + &.active, + &:hover { + background: #333; + background: linear-gradient(#333, #000); + } + + &.active:after, + &:hover:after { + background: #333; + background: linear-gradient(135deg, #333, #000); + } + + &:after { + content: ''; + position: absolute; + top: 0; + right: -14px; // half of square's length + + // same dimension as the line-height of .breadcrumb-item + width: 30px; + height: 30px; + + transform: scale(0.707) rotate(45deg); + // we need to prevent the arrows from getting buried under the next link + z-index: 1; + + // background same as links but the gradient will be rotated to compensate with the transform applied + background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl); + + // stylish arrow design using box shadow + box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1); + + // 5px - for rounded arrows and + // 50px - to prevent hover glitches on the border created using shadows*/ + border-radius: 0 5px 0 50px; + } + + // we dont need an arrow after the last link + &:last-child:after { + content: none; + } +} + diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index bdb85d2a7ce..d9f91b07887 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -93,89 +93,3 @@ .page-sidebar-section { margin-bottom: $spacer*2; } - -.page-breadcrumbs { - display: flex; - padding: 10px 0; - line-height: 0.5; -} - -.breadcrumb { - display: inline-block; - box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.35); - overflow: hidden; - border-radius: 5px; - counter-reset: flag; -} - -.breadcrumb-item { - @include gradientBar($btn-inverse-bg, $btn-inverse-bg-hl, $btn-inverse-text-color); - - text-decoration: none; - outline: none; - display: block; - float: left; - font-size: 12px; - line-height: 30px; - padding: 0 7px 0 37px; - position: relative; - box-shadow: $card-shadow; - - &:first-child { - padding-left: 10px; - border-radius: 5px 0 0 5px; /*to match with the parent's radius*/ - font-size: 18px; - } - - &:first-child:before { - left: 14px; - } - - &:last-child { - border-radius: 0 5px 5px 0; /*this was to prevent glitches on hover*/ - padding-right: 20px; - } - - &.active, - &:hover { - background: #333; - background: linear-gradient(#333, #000); - } - - &.active:after, - &:hover:after { - background: #333; - background: linear-gradient(135deg, #333, #000); - } - - &:after { - content: ''; - position: absolute; - top: 0; - right: -14px; // half of square's length - - // same dimension as the line-height of .breadcrumb-item - width: 30px; - height: 30px; - - transform: scale(0.707) rotate(45deg); - // we need to prevent the arrows from getting buried under the next link - z-index: 1; - - // background same as links but the gradient will be rotated to compensate with the transform applied - background: linear-gradient(135deg, $btn-inverse-bg, $btn-inverse-bg-hl); - - // stylish arrow design using box shadow - box-shadow: 2px -2px 0 2px rgb(35, 31, 31), 3px -3px 0 2px rgba(255, 255, 255, 0.1); - - // 5px - for rounded arrows and - // 50px - to prevent hover glitches on the border created using shadows*/ - border-radius: 0 5px 0 50px; - } - - // we dont need an arrow after the last link - &:last-child:after { - content: none; - } -} - From e53b55479abf8fa7152890fd9018d0fc71c99f39 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 10:47:21 +0100 Subject: [PATCH 08/10] ux: made plugins page work --- pkg/api/index.go | 2 +- public/app/features/org/all.ts | 1 + .../features/org/partials/user_groups.html | 9 +- public/app/features/org/user_groups_ctrl.ts | 2 +- .../plugins/partials/plugin_edit.html | 147 ++++++++---------- .../app/features/plugins/plugin_edit_ctrl.ts | 2 +- public/sass/layout/_page.scss | 18 +-- 7 files changed, 79 insertions(+), 102 deletions(-) diff --git a/pkg/api/index.go b/pkg/api/index.go index a1939eab8f6..8f5e27023e9 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -226,7 +226,7 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { }, { Text: "Teams", - Id: "users", + Id: "teams", Description: "Manage org groups", Icon: "gicon gicon-user-group", Url: setting.AppSubUrl + "/org/user-groups", diff --git a/public/app/features/org/all.ts b/public/app/features/org/all.ts index 6b3eb67e7fb..a1106faf061 100644 --- a/public/app/features/org/all.ts +++ b/public/app/features/org/all.ts @@ -5,6 +5,7 @@ import './select_org_ctrl'; import './change_password_ctrl'; import './new_org_ctrl'; import './user_invite_ctrl'; +import './user_groups_ctrl'; import './org_api_keys_ctrl'; import './org_details_ctrl'; import './prefs_control'; diff --git a/public/app/features/org/partials/user_groups.html b/public/app/features/org/partials/user_groups.html index da3597c044b..2afeb203ea7 100644 --- a/public/app/features/org/partials/user_groups.html +++ b/public/app/features/org/partials/user_groups.html @@ -3,14 +3,13 @@
    -
    - - + + -
    -
    +
    diff --git a/public/app/features/org/user_groups_ctrl.ts b/public/app/features/org/user_groups_ctrl.ts index 6534f749260..e3d99364595 100644 --- a/public/app/features/org/user_groups_ctrl.ts +++ b/public/app/features/org/user_groups_ctrl.ts @@ -15,7 +15,7 @@ export class UserGroupsCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('cfg', 'users', 0); + this.navModel = navModelSrv.getNav('cfg', 'teams', 0); this.get(); } diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index adc1c637a28..9df2775cbb8 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -1,96 +1,73 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    -
    -
    -
    +
    +
    +
    -
    -
    - +
    -
    - - - +
    +
    -
    -
    - -
    +
    + + +
    + +
    + + +
    diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index d2e704803ba..9daefdcbcf4 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -27,7 +27,7 @@ export class PluginEditCtrl { $routeParams, navModelSrv, ) { - this.navModel = navModelSrv.getNav('cfg', 'plugins'); + this.navModel = navModelSrv.getNav('cfg', 'plugins', 0); this.model = {}; this.pluginId = $routeParams.pluginId; this.tabIndex = 0; diff --git a/public/sass/layout/_page.scss b/public/sass/layout/_page.scss index d9f91b07887..19a4fb1b8e1 100644 --- a/public/sass/layout/_page.scss +++ b/public/sass/layout/_page.scss @@ -32,14 +32,6 @@ .page-body { padding-top: $spacer*2; - - &--with-sidebar { - @include media-breakpoint-up(md) { - display: flex; - flex-direction: row; - flex-wrap: wrap; - } - } } .page-heading { @@ -63,10 +55,18 @@ flex-grow: 1; } -.page-content-with-sidebar { +.sidebar-content { width: calc(100% - #{$page-sidebar-width + $page-sidebar-margin}); // sidebar width + margin } +.sidebar-container { + @include media-breakpoint-up(md) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + } +} + .page-sidebar { @include media-breakpoint-up(md) { width: $page-sidebar-width; From 92d9093fcaabf3b14fb01a11f825bbf02ac8133b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 10:48:55 +0100 Subject: [PATCH 09/10] fixed sass warnings --- public/sass/components/_page_header.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 24e1570b996..629fcc6f2ca 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -105,7 +105,7 @@ font-size: 18px; } - &:first-child:before { + &:first-child::before { left: 14px; } @@ -120,13 +120,13 @@ background: linear-gradient(#333, #000); } - &.active:after, - &:hover:after { + &.active::after, + &:hover::after { background: #333; background: linear-gradient(135deg, #333, #000); } - &:after { + &::after { content: ''; position: absolute; top: 0; @@ -152,7 +152,7 @@ } // we dont need an arrow after the last link - &:last-child:after { + &:last-child::after { content: none; } } From 75bb8944850f89afd69f8017c6882f16c6b654ca Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 1 Dec 2017 11:32:00 +0100 Subject: [PATCH 10/10] ux: new page-header design, most pages beside admin done --- pkg/api/dtos/index.go | 1 + pkg/api/index.go | 8 ++++-- public/app/core/components/PageHeader.tsx | 4 +++ public/app/core/nav_model_srv.ts | 2 ++ .../alerting/notification_edit_ctrl.ts | 5 ++-- .../alerting/partials/notification_edit.html | 10 +++---- .../features/dashboard/dashboard_list_ctrl.ts | 2 +- .../dashboard/partials/dashboardList.html | 20 ++++++------- public/app/features/org/org_api_keys_ctrl.ts | 2 +- .../app/features/org/partials/orgApiKeys.html | 12 ++++---- .../features/playlist/partials/playlist.html | 12 ++++---- .../features/playlist/partials/playlists.html | 12 ++++---- .../features/playlist/playlist_edit_ctrl.ts | 12 ++++---- .../app/features/playlist/playlists_ctrl.ts | 2 +- .../features/plugins/partials/ds_edit.html | 28 ------------------- .../features/snapshot/partials/snapshots.html | 10 ++----- public/app/features/snapshot/snapshot_ctrl.ts | 2 +- public/sass/components/_page_header.scss | 2 +- 18 files changed, 58 insertions(+), 88 deletions(-) diff --git a/pkg/api/dtos/index.go b/pkg/api/dtos/index.go index 8f1cdd9a92d..8c7f505277d 100644 --- a/pkg/api/dtos/index.go +++ b/pkg/api/dtos/index.go @@ -31,5 +31,6 @@ type NavLink struct { Target string `json:"target,omitempty"` Divider bool `json:"divider,omitempty"` HideFromMenu bool `json:"hideFromMenu,omitempty"` + HideFromTabs bool `json:"hideFromTabs,omitempty"` Children []*NavLink `json:"children,omitempty"` } diff --git a/pkg/api/index.go b/pkg/api/index.go index 8f5e27023e9..a0f21cc9571 100644 --- a/pkg/api/index.go +++ b/pkg/api/index.go @@ -101,17 +101,19 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) { } dashboardChildNavs := []*dtos.NavLink{ - {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home"}, + {Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home", HideFromTabs: true}, + {Divider: true}, + {Text: "Manage", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-sitemap"}, {Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"}, {Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-fw icon-gf-snapshot"}, - {Text: "Dashboard List", Id: "dashboards", Url: setting.AppSubUrl + "/dashboards", Icon: "fa fa-fw fa-bars"}, } data.NavTree = append(data.NavTree, &dtos.NavLink{ Text: "Dashboards", Id: "dashboards", + SubTitle: "Manage dashboards & folders", Icon: "gicon gicon-dashboard", - Url: setting.AppSubUrl + "/", + Url: setting.AppSubUrl + "/dashboards", Children: dashboardChildNavs, }) diff --git a/public/app/core/components/PageHeader.tsx b/public/app/core/components/PageHeader.tsx index cf3aa0d0cd4..57bcdc3b896 100644 --- a/public/app/core/components/PageHeader.tsx +++ b/public/app/core/components/PageHeader.tsx @@ -28,6 +28,10 @@ export interface IProps { // } function TabItem(tab: NavModelItem) { + if (tab.hideFromTabs || tab.divider) { + return (null); + } + let tabClasses = classNames({ 'gf-tabs-link': true, active: tab.active, diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts index bfc275015db..81a82cd4c5f 100644 --- a/public/app/core/nav_model_srv.ts +++ b/public/app/core/nav_model_srv.ts @@ -9,6 +9,8 @@ export interface NavModelItem { img?: string; id: string; active?: boolean; + hideFromTabs?: boolean; + divider?: boolean; children: NavModelItem[]; } diff --git a/public/app/features/alerting/notification_edit_ctrl.ts b/public/app/features/alerting/notification_edit_ctrl.ts index a4ab20e8cf7..bb20b6fbde2 100644 --- a/public/app/features/alerting/notification_edit_ctrl.ts +++ b/public/app/features/alerting/notification_edit_ctrl.ts @@ -9,7 +9,7 @@ export class AlertNotificationEditCtrl { testSeverity = "critical"; notifiers: any; notifierTemplateId: string; - + isNew: boolean; model: any; defaults: any = { type: 'email', @@ -23,7 +23,8 @@ export class AlertNotificationEditCtrl { /** @ngInject */ constructor(private $routeParams, private backendSrv, private $location, private $templateCache, navModelSrv) { - this.navModel = navModelSrv.getNav('alerting', 'channels'); + this.navModel = navModelSrv.getNav('alerting', 'channels', 0); + this.isNew = !this.$routeParams.id; this.backendSrv.get(`/api/alert-notifiers`).then(notifiers => { this.notifiers = notifiers; diff --git a/public/app/features/alerting/partials/notification_edit.html b/public/app/features/alerting/partials/notification_edit.html index 2cd0c7984e1..35e335bb02b 100644 --- a/public/app/features/alerting/partials/notification_edit.html +++ b/public/app/features/alerting/partials/notification_edit.html @@ -1,9 +1,9 @@ - + -
    -
    - -
    +
    + +

    Edit Notification Channel

    +

    New Notification Channel

    diff --git a/public/app/features/dashboard/dashboard_list_ctrl.ts b/public/app/features/dashboard/dashboard_list_ctrl.ts index 08bba6450f9..93e9df84c15 100644 --- a/public/app/features/dashboard/dashboard_list_ctrl.ts +++ b/public/app/features/dashboard/dashboard_list_ctrl.ts @@ -17,7 +17,7 @@ export class DashboardListCtrl { /** @ngInject */ constructor(private backendSrv, navModelSrv, private $q, private searchSrv: SearchSrv) { - this.navModel = navModelSrv.getNav('dashboards', 'dashboards'); + this.navModel = navModelSrv.getNav('dashboards', 'dashboards', 0); this.query = {query: '', mode: 'tree', tag: [], starred: false}; this.selectedStarredFilter = this.starredFilterOptions[0]; diff --git a/public/app/features/dashboard/partials/dashboardList.html b/public/app/features/dashboard/partials/dashboardList.html index 405332128cd..70a19e15718 100644 --- a/public/app/features/dashboard/partials/dashboardList.html +++ b/public/app/features/dashboard/partials/dashboardList.html @@ -1,8 +1,12 @@ - -
    -
    -

    Dashboards

    + +
    +
    +
    + + +
    +
    Dashboard @@ -12,14 +16,6 @@ Folder
    -
    -
    - - - -
    -
    Filters: diff --git a/public/app/features/org/org_api_keys_ctrl.ts b/public/app/features/org/org_api_keys_ctrl.ts index 368370bed9a..a2639e5c052 100644 --- a/public/app/features/org/org_api_keys_ctrl.ts +++ b/public/app/features/org/org_api_keys_ctrl.ts @@ -4,7 +4,7 @@ export class OrgApiKeysCtrl { /** @ngInject **/ constructor ($scope, $http, backendSrv, navModelSrv) { - $scope.navModel = navModelSrv.getNav('cfg', 'apikeys'); + $scope.navModel = navModelSrv.getNav('cfg', 'apikeys', 0); $scope.roleTypes = ['Viewer', 'Editor', 'Admin']; $scope.token = { role: 'Viewer' }; diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index 4c9d1e3bfcf..854af218e77 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -1,11 +1,9 @@ - + -
    -
    - -
    +
    + +

    Add new

    -

    Add new

    @@ -22,7 +20,7 @@
    -

    Existing Keys

    +

    Existing Keys

    diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 233f3ae3e2e..c07fce48d02 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -1,9 +1,9 @@ - + -
    -
    - -
    +
    + +

    Edit Playlist

    +

    New Playlist

    A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.

    @@ -103,7 +103,7 @@
    - Create new playlist + -
    -
    - - +
    +
    +
    +     New Playlist
    -
    +
    diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts index f69279917cb..e876eec1a33 100644 --- a/public/app/features/playlist/playlist_edit_ctrl.ts +++ b/public/app/features/playlist/playlist_edit_ctrl.ts @@ -1,5 +1,3 @@ -/// - import _ from 'lodash'; import coreModule from '../../core/core_module'; @@ -11,10 +9,12 @@ export class PlaylistEditCtrl { playlist: any = { interval: '5m', }; + playlistItems: any = []; dashboardresult: any = []; tagresult: any = []; navModel: any; + isNew: boolean; /** @ngInject */ constructor( @@ -24,7 +24,9 @@ export class PlaylistEditCtrl { $route, navModelSrv ) { - this.navModel = navModelSrv.getNav('dashboards', 'playlists'); + + this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0); + this.isNew = $route.current.params.id; if ($route.current.params.id) { var playlistId = $route.current.params.id; @@ -104,10 +106,6 @@ export class PlaylistEditCtrl { }); } - isNew() { - return !this.playlist.id; - } - isPlaylistEmpty() { return !this.playlistItems.length; } diff --git a/public/app/features/playlist/playlists_ctrl.ts b/public/app/features/playlist/playlists_ctrl.ts index f732c66c604..eadb7a6eacd 100644 --- a/public/app/features/playlist/playlists_ctrl.ts +++ b/public/app/features/playlist/playlists_ctrl.ts @@ -9,7 +9,7 @@ export class PlaylistsCtrl { /** @ngInject */ constructor(private $scope, private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('dashboards', 'playlists'); + this.navModel = navModelSrv.getNav('dashboards', 'playlists', 0); backendSrv.get('/api/playlists').then(result => { this.playlists = result; diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 38ae83cd9d3..53a7405e943 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,31 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    diff --git a/public/app/features/snapshot/partials/snapshots.html b/public/app/features/snapshot/partials/snapshots.html index 8921109dfd5..8775b527ae1 100644 --- a/public/app/features/snapshot/partials/snapshots.html +++ b/public/app/features/snapshot/partials/snapshots.html @@ -1,11 +1,7 @@ - + -
    -
    - -
    - -
    Name Start url
    +
    +
    diff --git a/public/app/features/snapshot/snapshot_ctrl.ts b/public/app/features/snapshot/snapshot_ctrl.ts index b4b33d80236..0abb3db47f9 100644 --- a/public/app/features/snapshot/snapshot_ctrl.ts +++ b/public/app/features/snapshot/snapshot_ctrl.ts @@ -9,7 +9,7 @@ export class SnapshotsCtrl { /** @ngInject */ constructor(private $rootScope, private backendSrv, navModelSrv) { - this.navModel = navModelSrv.getNav('dashboards', 'snapshots'); + this.navModel = navModelSrv.getNav('dashboards', 'snapshots', 0); this.backendSrv.get('/api/dashboard/snapshots').then(result => { this.snapshots = result; }); diff --git a/public/sass/components/_page_header.scss b/public/sass/components/_page_header.scss index 629fcc6f2ca..ebc16a49fd4 100644 --- a/public/sass/components/_page_header.scss +++ b/public/sass/components/_page_header.scss @@ -51,7 +51,7 @@ } &.gicon { - top: 7px; + top: 9px; } &.icon-gf {
    Name Snapshot url