From e9d5e037e817b57303c4497b42b28ee9403dd65f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 2 Jun 2017 14:00:42 +0200 Subject: [PATCH] ux: merge branch navbarv2, new navbar with dashboard search available on all pages, closes #6475 --- public/app/core/components/grafana_app.ts | 19 +- public/app/core/components/help/help.html | 4 +- public/app/core/components/navbar/navbar.html | 35 ++- public/app/core/components/navbar/navbar.ts | 27 +- public/app/core/components/search/search.html | 98 ++++---- public/app/core/components/search/search.ts | 5 + public/app/core/controllers/error_ctrl.js | 4 +- public/app/core/core.ts | 3 + public/app/core/nav_model_srv.ts | 209 ++++++++++++++++ public/app/core/routes/routes.ts | 4 + public/app/core/services/keybindingSrv.ts | 6 +- public/app/features/admin/admin.ts | 14 +- public/app/features/admin/adminEditOrgCtrl.js | 4 +- .../app/features/admin/adminEditUserCtrl.js | 3 +- .../app/features/admin/adminListOrgsCtrl.js | 3 +- .../features/admin/admin_list_users_ctrl.ts | 4 +- .../features/admin/partials/admin_home.html | 3 +- .../app/features/admin/partials/edit_org.html | 7 +- .../features/admin/partials/edit_user.html | 7 +- .../app/features/admin/partials/new_user.html | 7 +- public/app/features/admin/partials/orgs.html | 7 +- .../app/features/admin/partials/settings.html | 3 +- public/app/features/admin/partials/stats.html | 3 +- public/app/features/admin/partials/users.html | 15 +- .../app/features/alerting/alert_list_ctrl.ts | 11 +- .../alerting/notification_edit_ctrl.ts | 5 +- .../alerting/notifications_list_ctrl.ts | 9 +- .../alerting/partials/alert_list.html | 3 +- .../alerting/partials/notification_edit.html | 7 +- .../alerting/partials/notifications_list.html | 3 +- .../features/dashboard/dashnav/dashnav.html | 75 ++---- .../app/features/dashboard/dashnav/dashnav.ts | 178 ++++++------- public/app/features/dashboard/viewStateSrv.js | 9 +- .../app/features/org/change_password_ctrl.js | 3 +- public/app/features/org/newOrgCtrl.js | 3 +- public/app/features/org/orgApiKeysCtrl.js | 3 +- public/app/features/org/orgDetailsCtrl.js | 3 +- public/app/features/org/org_users_ctrl.ts | 4 +- .../org/partials/change_password.html | 3 +- public/app/features/org/partials/newOrg.html | 3 +- .../app/features/org/partials/orgApiKeys.html | 3 +- .../app/features/org/partials/orgDetails.html | 3 +- .../app/features/org/partials/orgUsers.html | 3 +- public/app/features/org/partials/profile.html | 5 +- public/app/features/org/profile_ctrl.ts | 4 +- .../features/playlist/partials/playlist.html | 3 +- .../features/playlist/partials/playlists.html | 3 +- .../features/playlist/playlist_edit_ctrl.ts | 29 ++- public/app/features/playlist/playlist_srv.ts | 6 +- .../app/features/playlist/playlists_ctrl.ts | 14 +- .../specs/playlist_edit_ctrl_specs.ts | 6 +- public/app/features/plugins/ds_edit_ctrl.ts | 236 +++++++++--------- public/app/features/plugins/ds_list_ctrl.ts | 42 ++-- .../features/plugins/partials/ds_edit.html | 3 +- .../features/plugins/partials/ds_list.html | 6 +- .../plugins/partials/plugin_edit.html | 3 +- .../plugins/partials/plugin_list.html | 3 +- .../plugins/partials/plugin_page.html | 3 +- .../app/features/plugins/plugin_edit_ctrl.ts | 19 +- .../app/features/plugins/plugin_list_ctrl.ts | 4 +- .../app/features/plugins/plugin_page_ctrl.ts | 45 +++- .../features/snapshot/partials/snapshots.html | 3 +- public/app/features/snapshot/snapshot_ctrl.ts | 11 +- .../app/features/styleguide/styleguide.html | 3 +- public/app/features/styleguide/styleguide.ts | 4 +- public/app/partials/dashboard.html | 3 +- public/app/partials/error.html | 3 +- public/sass/_old_responsive.scss | 4 +- public/sass/components/_dropdown.scss | 16 +- public/sass/components/_navbar.scss | 46 +++- public/sass/components/_search.scss | 105 +++++--- public/sass/components/_sidemenu.scss | 8 +- public/sass/components/_view_states.scss | 2 +- 73 files changed, 923 insertions(+), 544 deletions(-) create mode 100644 public/app/core/nav_model_srv.ts diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index f48d941a8ba..5a677094754 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -105,10 +105,14 @@ export function grafanaAppDirective(playlistSrv, contextSrv) { if (pageClass) { body.removeClass(pageClass); } - pageClass = data.$$route.pageClass; - if (pageClass) { - body.addClass(pageClass); + + if (data.$$route) { + pageClass = data.$$route.pageClass; + if (pageClass) { + body.addClass(pageClass); + } } + $("#tooltip, .tooltip").remove(); // check for kiosk url param @@ -194,6 +198,15 @@ export function grafanaAppDirective(playlistSrv, contextSrv) { }); } } + + // hide menus + var openMenus = body.find('.navbar-page-btn--open'); + if (openMenus.length > 0) { + if (target.parents('.navbar-page-btn--open').length === 0) { + openMenus.removeClass('navbar-page-btn--open'); + } + } + // hide sidemenu if (!ignoreSideMenuHide && !contextSrv.pinned && body.find('.sidemenu').length > 0) { if (target.parents('.sidemenu').length === 0) { diff --git a/public/app/core/components/help/help.html b/public/app/core/components/help/help.html index 3356f21d452..c07d57a0ffc 100644 --- a/public/app/core/components/help/help.html +++ b/public/app/core/components/help/help.html @@ -1,7 +1,7 @@

- + Shortcuts

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

+

mod = CTRL on windows or linux and CMD key on Mac

diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index e2faea68eaa..c2cd5e2b624 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -8,11 +8,36 @@ - - - - {{ctrl.title}} + + -
+
+ + + + {{::ctrl.section.title}} + +
+ +
+ + + + {{::ctrl.section.title}} + + + +
+ +
+ + diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index e815adf84f6..fae27a8d5c7 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -4,10 +4,28 @@ import config from 'app/core/config'; import _ from 'lodash'; import $ from 'jquery'; import coreModule from '../../core_module'; +import {NavModel, NavModelItem} from '../../nav_model_srv'; export class NavbarCtrl { + model: NavModel; + section: NavModelItem; + hasMenu: boolean; + /** @ngInject */ - constructor(private $scope, private contextSrv) { + constructor(private $scope, private $rootScope, private contextSrv) { + this.section = this.model.section; + this.hasMenu = this.model.menu.length > 0; + } + + showSearch() { + this.$rootScope.appEvent('show-dash-search'); + } + + navItemClicked(navItem, evt) { + if (navItem.clickHandler) { + navItem.clickHandler(); + evt.preventDefault(); + } } } @@ -20,12 +38,9 @@ export function navbarDirective() { transclude: true, controllerAs: 'ctrl', scope: { - title: "@", - titleUrl: "@", - iconUrl: "@", + model: "=", }, - link: function(scope, elem, attrs, ctrl) { - ctrl.icon = attrs.icon; + link: function(scope, elem) { elem.addClass('navbar'); } }; diff --git a/public/app/core/components/search/search.html b/public/app/core/components/search/search.html index c9710e1403f..e64ffc845ca 100644 --- a/public/app/core/components/search/search.html +++ b/public/app/core/components/search/search.html @@ -1,9 +1,22 @@ + +
+
+
- - - +
+ +
+ + +
@@ -24,54 +37,55 @@
+ +
-
-
- - - {{tag.term}}  ({{tag.count}}) - +
+
+
+ + + {{tag.term}}  ({{tag.count}}) + +
-
-
-
No dashboards matching your query were found.
+
+
No dashboards matching your query were found.
- + - - - {{tag}} + + + {{tag}} + + - - - - - - - -
- -
- - - Create New - + + + + + +
- - - Import - +
+ +   New Dashboard + - - Find dashboards on Grafana.com - + +   Import Dashboard + -
+ + Find dashboards on Grafana.com + +
+ diff --git a/public/app/core/components/search/search.ts b/public/app/core/components/search/search.ts index ec58a5c9f5c..f6810f2bc76 100644 --- a/public/app/core/components/search/search.ts +++ b/public/app/core/components/search/search.ts @@ -18,6 +18,8 @@ export class SearchCtrl { showImport: boolean; dismiss: any; ignoreClose: any; + // triggers fade animation class + openCompleted: boolean; /** @ngInject */ constructor(private $scope, private $location, private $timeout, private backendSrv, private contextSrv, private $rootScope) { @@ -27,6 +29,7 @@ export class SearchCtrl { closeSearch() { this.isOpen = this.ignoreClose; + this.openCompleted = false; } openSearch(evt, payload) { @@ -56,6 +59,7 @@ export class SearchCtrl { } this.$timeout(() => { + this.openCompleted = true; this.ignoreClose = false; this.giveSearchFocus = this.giveSearchFocus + 1; this.search(); @@ -169,6 +173,7 @@ export function searchDirective() { controller: SearchCtrl, bindToController: true, controllerAs: 'ctrl', + scope: {}, }; } diff --git a/public/app/core/controllers/error_ctrl.js b/public/app/core/controllers/error_ctrl.js index 2052bdfacb5..cc711f07a22 100644 --- a/public/app/core/controllers/error_ctrl.js +++ b/public/app/core/controllers/error_ctrl.js @@ -5,7 +5,9 @@ define([ function (angular, coreModule) { 'use strict'; - coreModule.default.controller('ErrorCtrl', function($scope, contextSrv) { + coreModule.default.controller('ErrorCtrl', function($scope, contextSrv, navModelSrv) { + + $scope.navModel = navModelSrv.getNotFoundNav(); var showSideMenu = contextSrv.sidemenu; contextSrv.sidemenu = false; diff --git a/public/app/core/core.ts b/public/app/core/core.ts index a3ddf38a3e3..d193c68b6d8 100644 --- a/public/app/core/core.ts +++ b/public/app/core/core.ts @@ -44,6 +44,7 @@ import {assignModelProperties} from './utils/model_utils'; import {contextSrv} from './services/context_srv'; import {KeybindingSrv} from './services/keybindingSrv'; import {helpModal} from './components/help/help'; +import {NavModelSrv, NavModel} from './nav_model_srv'; export { @@ -68,4 +69,6 @@ export { contextSrv, KeybindingSrv, helpModal, + NavModelSrv, + NavModel, }; diff --git a/public/app/core/nav_model_srv.ts b/public/app/core/nav_model_srv.ts new file mode 100644 index 00000000000..0f3e8ce233d --- /dev/null +++ b/public/app/core/nav_model_srv.ts @@ -0,0 +1,209 @@ +/// + +import coreModule from 'app/core/core_module'; + +export interface NavModelItem { + title: string; + url: string; + icon?: string; + iconUrl?: string; +} + +export interface NavModel { + section: NavModelItem; + menu: NavModelItem[]; +} + +export class NavModelSrv { + + + /** @ngInject */ + constructor(private contextSrv) { + } + + getAlertingNav(subPage) { + return { + section: { + title: 'Alerting', + url: 'plugins', + icon: 'icon-gf icon-gf-alert' + }, + menu: [ + {title: 'Alert List', active: subPage === 0, url: 'alerting/list', icon: 'fa fa-list-ul'}, + {title: 'Notification channels', active: subPage === 1, url: 'alerting/notifications', icon: 'fa fa-bell-o'}, + ] + }; + } + + getDatasourceNav(subPage) { + return { + section: { + title: 'Data Sources', + url: 'datasources', + icon: 'icon-gf icon-gf-datasources' + }, + menu: [ + {title: 'List view', active: subPage === 0, url: '/datasources', icon: 'fa fa-list-ul'}, + {title: 'Add data source', active: subPage === 1, url: '/datasources/new', icon: 'fa fa-plus'}, + ] + }; + } + + getPlaylistsNav(subPage) { + return { + section: { + title: 'Playlists', + url: 'playlists', + icon: 'fa fa-fw fa-film' + }, + menu: [ + {title: 'List view', active: subPage === 0, url: '/playlists', icon: 'fa fa-list-ul'}, + {title: 'Add Playlist', active: subPage === 1, url: '/playlists/create', icon: 'fa fa-plus'}, + ] + }; + } + + getProfileNav() { + return { + section: { + title: 'User Profile', + url: 'profile', + icon: 'fa fa-fw fa-user' + }, + menu: [] + }; + } + + getNotFoundNav() { + return { + section: { + title: 'Page', + url: '', + icon: 'fa fa-fw fa-warning' + }, + menu: [] + }; + } + + getOrgNav(subPage) { + 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'}, + ] + }; + } + + getAdminNav(subPage) { + return { + section: { + title: 'Admin', + url: 'admin', + icon: 'fa fa-fw fa-cogs' + }, + menu: [ + {title: 'Users', active: subPage === 0, url: '/admin/users', icon: 'fa fa-fw fa-user'}, + {title: 'Orgs', active: subPage === 1, url: '/admin/orgs', icon: 'fa fa-fw fa-users'}, + {title: 'Server Settings', active: subPage === 2, url: '/admin/settings', icon: 'fa fa-fw fa-cogs'}, + {title: 'Server Stats', active: subPage === 2, url: '/admin/stats', icon: 'fa fa-fw fa-line-chart'}, + {title: 'Style Guide', active: subPage === 2, url: '/styleguide', icon: 'fa fa-fw fa-key'}, + ] + }; + } + + getPluginsNav() { + return { + section: { + title: 'Plugins', + url: 'plugins', + icon: 'icon-gf icon-gf-apps' + }, + menu: [] + }; + } + + getDashboardNav(dashboard, dashNavCtrl) { + // special handling for snapshots + if (dashboard.meta.isSnapshot) { + return { + section: { + title: dashboard.title, + icon: 'icon-gf icon-gf-snapshot' + }, + menu: [ + { + title: 'Go to original dashboard', + icon: 'fa fa-fw fa-external-link', + url: dashboard.snapshot.originalUrl, + } + ] + }; + } + + var menu = []; + + if (dashboard.meta.canEdit) { + menu.push({ + title: 'Settings', + icon: 'fa fa-fw fa-cog', + clickHandler: () => dashNavCtrl.openEditView('settings') + }); + + menu.push({ + title: 'Templating', + icon: 'fa fa-fw fa-code', + clickHandler: () => dashNavCtrl.openEditView('templating') + }); + + menu.push({ + title: 'Annotations', + icon: 'fa fa-fw fa-bolt', + clickHandler: () => dashNavCtrl.openEditView('annotations') + }); + + menu.push({ + title: 'View JSON', + icon: 'fa fa-fw fa-eye', + clickHandler: () => dashNavCtrl.viewJson() + }); + } + + if (this.contextSrv.isEditor && !dashboard.editable) { + menu.push({ + title: 'Make Editable', + icon: 'fa fa-fw fa-edit', + clickHandler: () => dashNavCtrl.makeEditable() + }); + } + + menu.push({ + title: 'Shortcuts', + icon: 'fa fa-fw fa-keyboard-o', + clickHandler: () => dashNavCtrl.showHelpModal() + }); + + if (this.contextSrv.isEditor) { + menu.push({ + title: 'Save As ...', + icon: 'fa fa-fw fa-save', + clickHandler: () => dashNavCtrl.saveDashboardAs() + }); + } + + return { + section: { + title: dashboard.title, + icon: 'icon-gf icon-gf-dashboard' + }, + menu: menu + }; + } +} + +coreModule.service('navModelSrv', NavModelSrv); diff --git a/public/app/core/routes/routes.ts b/public/app/core/routes/routes.ts index 3ccf89bae01..a7565b8e167 100644 --- a/public/app/core/routes/routes.ts +++ b/public/app/core/routes/routes.ts @@ -103,11 +103,13 @@ function setupAngularRoutes($routeProvider, $locationProvider) { .when('/admin', { templateUrl: 'public/app/features/admin/partials/admin_home.html', controller : 'AdminHomeCtrl', + controllerAs: 'ctrl', resolve: loadAdminBundle, }) .when('/admin/settings', { templateUrl: 'public/app/features/admin/partials/settings.html', controller : 'AdminSettingsCtrl', + controllerAs: 'ctrl', resolve: loadAdminBundle, }) .when('/admin/users', { @@ -129,11 +131,13 @@ function setupAngularRoutes($routeProvider, $locationProvider) { .when('/admin/orgs', { templateUrl: 'public/app/features/admin/partials/orgs.html', controller : 'AdminListOrgsCtrl', + controllerAs: 'ctrl', resolve: loadAdminBundle, }) .when('/admin/orgs/edit/:id', { templateUrl: 'public/app/features/admin/partials/edit_org.html', controller : 'AdminEditOrgCtrl', + controllerAs: 'ctrl', resolve: loadAdminBundle, }) .when('/admin/stats', { diff --git a/public/app/core/services/keybindingSrv.ts b/public/app/core/services/keybindingSrv.ts index 95ad66b568a..46d108b43df 100644 --- a/public/app/core/services/keybindingSrv.ts +++ b/public/app/core/services/keybindingSrv.ts @@ -113,10 +113,6 @@ export class KeybindingSrv { scope.appEvent('shift-time-forward'); }); - this.bind('mod+i', () => { - scope.appEvent('quick-snapshot'); - }); - // edit panel this.bind('e', () => { if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) { @@ -225,7 +221,7 @@ export class KeybindingSrv { } scope.appEvent('hide-dash-editor'); - scope.exitFullscreen(); + scope.appEvent('panel-change-view', {fullscreen: false, edit: false}); }); } } diff --git a/public/app/features/admin/admin.ts b/public/app/features/admin/admin.ts index 6809e4c54ab..669e4a9c982 100644 --- a/public/app/features/admin/admin.ts +++ b/public/app/features/admin/admin.ts @@ -6,9 +6,11 @@ import './adminEditUserCtrl'; import coreModule from 'app/core/core_module'; class AdminSettingsCtrl { + navModel: any; /** @ngInject **/ - constructor($scope, backendSrv) { + constructor($scope, backendSrv, navModelSrv) { + this.navModel = navModelSrv.getAdminNav(); backendSrv.get('/api/admin/settings').then(function(settings) { $scope.settings = settings; @@ -18,16 +20,22 @@ class AdminSettingsCtrl { } class AdminHomeCtrl { + navModel: any; + /** @ngInject **/ - constructor() { + constructor(navModelSrv) { + this.navModel = navModelSrv.getAdminNav(); } } export class AdminStatsCtrl { stats: any; + navModel: any; /** @ngInject */ - constructor(backendSrv: any) { + constructor(backendSrv: any, navModelSrv) { + this.navModel = navModelSrv.getAdminNav(); + backendSrv.get('/api/admin/stats').then(stats => { this.stats = stats; }); diff --git a/public/app/features/admin/adminEditOrgCtrl.js b/public/app/features/admin/adminEditOrgCtrl.js index ec500704fb3..3121f5eb27b 100644 --- a/public/app/features/admin/adminEditOrgCtrl.js +++ b/public/app/features/admin/adminEditOrgCtrl.js @@ -6,9 +6,11 @@ function (angular) { var module = angular.module('grafana.controllers'); - module.controller('AdminEditOrgCtrl', function($scope, $routeParams, backendSrv, $location) { + module.controller('AdminEditOrgCtrl', function($scope, $routeParams, backendSrv, $location, navModelSrv) { $scope.init = function() { + $scope.navModel = navModelSrv.getAdminNav(); + if ($routeParams.id) { $scope.getOrg($routeParams.id); $scope.getOrgUsers($routeParams.id); diff --git a/public/app/features/admin/adminEditUserCtrl.js b/public/app/features/admin/adminEditUserCtrl.js index 104ccff99cd..007a5d79153 100644 --- a/public/app/features/admin/adminEditUserCtrl.js +++ b/public/app/features/admin/adminEditUserCtrl.js @@ -7,10 +7,11 @@ function (angular, _) { var module = angular.module('grafana.controllers'); - module.controller('AdminEditUserCtrl', function($scope, $routeParams, backendSrv, $location) { + module.controller('AdminEditUserCtrl', function($scope, $routeParams, backendSrv, $location, navModelSrv) { $scope.user = {}; $scope.newOrg = { name: '', role: 'Editor' }; $scope.permissions = {}; + $scope.navModel = navModelSrv.getAdminNav(); $scope.init = function() { if ($routeParams.id) { diff --git a/public/app/features/admin/adminListOrgsCtrl.js b/public/app/features/admin/adminListOrgsCtrl.js index d68e92955ee..c7f8225ea7e 100644 --- a/public/app/features/admin/adminListOrgsCtrl.js +++ b/public/app/features/admin/adminListOrgsCtrl.js @@ -6,9 +6,10 @@ function (angular) { var module = angular.module('grafana.controllers'); - module.controller('AdminListOrgsCtrl', function($scope, backendSrv) { + module.controller('AdminListOrgsCtrl', function($scope, backendSrv, navModelSrv) { $scope.init = function() { + $scope.navModel = navModelSrv.getAdminNav(); $scope.getOrgs(); }; diff --git a/public/app/features/admin/admin_list_users_ctrl.ts b/public/app/features/admin/admin_list_users_ctrl.ts index e2ed12cba60..fafe1dc3ac4 100644 --- a/public/app/features/admin/admin_list_users_ctrl.ts +++ b/public/app/features/admin/admin_list_users_ctrl.ts @@ -8,9 +8,11 @@ export default class AdminListUsersCtrl { totalPages: number; showPaging = false; query: any; + navModel: any; /** @ngInject */ - constructor(private $scope, private backendSrv) { + constructor(private $scope, private backendSrv, private navModelSrv) { + this.navModel = navModelSrv.getAdminNav(); this.query = ''; this.getUsers(); } diff --git a/public/app/features/admin/partials/admin_home.html b/public/app/features/admin/partials/admin_home.html index c6d0807a5d2..4409f518f0b 100644 --- a/public/app/features/admin/partials/admin_home.html +++ b/public/app/features/admin/partials/admin_home.html @@ -1,5 +1,4 @@ - - +
diff --git a/public/app/features/admin/partials/edit_org.html b/public/app/features/admin/partials/edit_org.html index b08d0c49a45..39028645b38 100644 --- a/public/app/features/admin/partials/edit_org.html +++ b/public/app/features/admin/partials/edit_org.html @@ -1,9 +1,4 @@ - - - - Orgs - - +
diff --git a/public/app/features/admin/partials/edit_user.html b/public/app/features/admin/partials/edit_user.html index 6d3e6e68f54..b907f794e76 100644 --- a/public/app/features/admin/partials/edit_user.html +++ b/public/app/features/admin/partials/edit_user.html @@ -1,9 +1,4 @@ - - - - Users - - +
diff --git a/public/app/features/admin/partials/new_user.html b/public/app/features/admin/partials/new_user.html index 1d4a4b231b5..aca2ef89701 100644 --- a/public/app/features/admin/partials/new_user.html +++ b/public/app/features/admin/partials/new_user.html @@ -1,9 +1,4 @@ - - - - Users - - +
diff --git a/public/app/features/admin/partials/orgs.html b/public/app/features/admin/partials/orgs.html index ae02b72b418..9b337ccb3dd 100644 --- a/public/app/features/admin/partials/orgs.html +++ b/public/app/features/admin/partials/orgs.html @@ -1,9 +1,4 @@ - - - - Orgs - - +
diff --git a/public/app/features/admin/partials/settings.html b/public/app/features/admin/partials/settings.html index 5371670a9ba..150d3145f45 100644 --- a/public/app/features/admin/partials/settings.html +++ b/public/app/features/admin/partials/settings.html @@ -1,5 +1,4 @@ - - +
diff --git a/public/app/features/admin/partials/stats.html b/public/app/features/admin/partials/stats.html index 92e32f4f947..4ad231f1cbd 100644 --- a/public/app/features/admin/partials/stats.html +++ b/public/app/features/admin/partials/stats.html @@ -1,5 +1,4 @@ - - +
diff --git a/public/app/features/admin/partials/users.html b/public/app/features/admin/partials/users.html index 18ffdb4eaeb..c4bb85ac103 100644 --- a/public/app/features/admin/partials/users.html +++ b/public/app/features/admin/partials/users.html @@ -1,9 +1,4 @@ - - - - Users - - +
@@ -14,12 +9,14 @@ Add new user
-
+ +
+ - +
+
diff --git a/public/app/features/alerting/alert_list_ctrl.ts b/public/app/features/alerting/alert_list_ctrl.ts index c74f61c8a1c..169d38612c5 100644 --- a/public/app/features/alerting/alert_list_ctrl.ts +++ b/public/app/features/alerting/alert_list_ctrl.ts @@ -2,13 +2,12 @@ import angular from 'angular'; import _ from 'lodash'; -import coreModule from '../../core/core_module'; -import appEvents from '../../core/app_events'; import moment from 'moment'; + +import {coreModule, appEvents} from 'app/core/core'; import alertDef from './alert_def'; export class AlertListCtrl { - alerts: any; stateFilters = [ {text: 'All', value: null}, @@ -17,13 +16,15 @@ export class AlertListCtrl { {text: 'No Data', value: 'no_data'}, {text: 'Paused', value: 'paused'}, ]; - filters = { state: 'ALL' }; + navModel: any; /** @ngInject */ - constructor(private backendSrv, private $location, private $scope) { + constructor(private backendSrv, private $location, private $scope, navModelSrv) { + this.navModel = navModelSrv.getAlertingNav(0); + var params = $location.search(); this.filters.state = params.state || null; this.loadAlerts(); diff --git a/public/app/features/alerting/notification_edit_ctrl.ts b/public/app/features/alerting/notification_edit_ctrl.ts index 6ad11cb9023..768cc16266e 100644 --- a/public/app/features/alerting/notification_edit_ctrl.ts +++ b/public/app/features/alerting/notification_edit_ctrl.ts @@ -7,6 +7,7 @@ import {appEvents, coreModule} from 'app/core/core'; export class AlertNotificationEditCtrl { theForm: any; + navModel: any; testSeverity = "critical"; notifiers: any; notifierTemplateId: string; @@ -23,7 +24,9 @@ export class AlertNotificationEditCtrl { }; /** @ngInject */ - constructor(private $routeParams, private backendSrv, private $location, private $templateCache) { + constructor(private $routeParams, private backendSrv, private $location, private $templateCache, navModelSrv) { + this.navModel = navModelSrv.getAlertingNav(); + this.backendSrv.get(`/api/alert-notifiers`).then(notifiers => { this.notifiers = notifiers; diff --git a/public/app/features/alerting/notifications_list_ctrl.ts b/public/app/features/alerting/notifications_list_ctrl.ts index 705f3a27c4f..c55668c1ed2 100644 --- a/public/app/features/alerting/notifications_list_ctrl.ts +++ b/public/app/features/alerting/notifications_list_ctrl.ts @@ -2,16 +2,19 @@ import angular from 'angular'; import _ from 'lodash'; -import coreModule from '../../core/core_module'; import config from 'app/core/config'; -export class AlertNotificationsListCtrl { +import {coreModule} from 'app/core/core'; + +export class AlertNotificationsListCtrl { notifications: any; + navModel: any; /** @ngInject */ - constructor(private backendSrv, private $scope) { + constructor(private backendSrv, private $scope, navModelSrv) { this.loadNotifications(); + this.navModel = navModelSrv.getAlertingNav(1); } loadNotifications() { diff --git a/public/app/features/alerting/partials/alert_list.html b/public/app/features/alerting/partials/alert_list.html index 5b723386904..cb76e381bec 100644 --- a/public/app/features/alerting/partials/alert_list.html +++ b/public/app/features/alerting/partials/alert_list.html @@ -1,5 +1,4 @@ - - +
diff --git a/public/app/features/alerting/partials/notification_edit.html b/public/app/features/alerting/partials/notification_edit.html index 6bf45eff660..9b716e02ce6 100644 --- a/public/app/features/alerting/partials/notification_edit.html +++ b/public/app/features/alerting/partials/notification_edit.html @@ -1,9 +1,4 @@ - - - - Notification channels - - +
diff --git a/public/app/features/alerting/partials/notifications_list.html b/public/app/features/alerting/partials/notifications_list.html index 32ac4a44476..ca69e651d6a 100644 --- a/public/app/features/alerting/partials/notifications_list.html +++ b/public/app/features/alerting/partials/notifications_list.html @@ -1,5 +1,4 @@ - - +
diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html index 7deb46931c2..ad1e575abba 100644 --- a/public/app/features/dashboard/dashnav/dashnav.html +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -1,93 +1,62 @@ - + - - - {{dashboard.title}} - - - - - - - {{dashboard.title}} -   (snapshot) - - - -
    +
    • - +
    • - +
    • - +
    diff --git a/public/app/features/dashboard/dashnav/dashnav.ts b/public/app/features/dashboard/dashnav/dashnav.ts index faaac986ee7..339e911c81d 100644 --- a/public/app/features/dashboard/dashnav/dashnav.ts +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -3,92 +3,98 @@ import _ from 'lodash'; import moment from 'moment'; import angular from 'angular'; - +import {appEvents, NavModel} from 'app/core/core'; +import {DashboardModel} from '../model'; import {DashboardExporter} from '../export/exporter'; export class DashNavCtrl { + dashboard: DashboardModel; + navModel: NavModel; + titleTooltip: string; /** @ngInject */ - constructor($scope, $rootScope, dashboardSrv, $location, playlistSrv, backendSrv, $timeout, datasourceSrv) { - - $scope.init = function() { - $scope.onAppEvent('save-dashboard', $scope.saveDashboard); - $scope.onAppEvent('delete-dashboard', $scope.deleteDashboard); - $scope.onAppEvent('quick-snapshot', $scope.quickSnapshot); - - $scope.showSettingsMenu = $scope.dashboardMeta.canEdit || $scope.contextSrv.isEditor; - - if ($scope.dashboardMeta.isSnapshot) { - $scope.showSettingsMenu = false; - var meta = $scope.dashboardMeta; - $scope.titleTooltip = 'Created:  ' + moment(meta.created).calendar(); + constructor( + private $scope, + private $rootScope, + private dashboardSrv, + private $location, + private playlistSrv, + private backendSrv, + private $timeout, + private datasourceSrv, + private navModelSrv) { + + this.navModel = navModelSrv.getDashboardNav(this.dashboard, this); + + appEvents.on('save-dashboard', this.saveDashboard.bind(this), $scope); + appEvents.on('delete-dashboard', this.deleteDashboard.bind(this), $scope); + + if (this.dashboard.meta.isSnapshot) { + var meta = this.dashboard.meta; + this.titleTooltip = 'Created:  ' + moment(meta.created).calendar(); if (meta.expires) { - $scope.titleTooltip += '
    Expires:  ' + moment(meta.expires).fromNow() + '
    '; + this.titleTooltip += '
    Expires:  ' + moment(meta.expires).fromNow() + '
    '; } } - }; + } - $scope.openEditView = function(editview) { - var search = _.extend($location.search(), {editview: editview}); - $location.search(search); - }; + openEditView(editview) { + var search = _.extend(this.$location.search(), {editview: editview}); + this.$location.search(search); + } - $scope.showHelpModal = function() { - $scope.appEvent('show-modal', {templateHtml: ''}); - }; + showHelpModal() { + appEvents.emit('show-modal', {templateHtml: ''}); + } - $scope.starDashboard = function() { - if ($scope.dashboardMeta.isStarred) { - backendSrv.delete('/api/user/stars/dashboard/' + $scope.dashboard.id).then(function() { - $scope.dashboardMeta.isStarred = false; - }); - } else { - backendSrv.post('/api/user/stars/dashboard/' + $scope.dashboard.id).then(function() { - $scope.dashboardMeta.isStarred = true; + starDashboard() { + if (this.dashboard.meta.isStarred) { + return this.backendSrv.delete('/api/user/stars/dashboard/' + this.dashboard.id).then(() => { + this.dashboard.meta.isStarred = false; }); } - }; - $scope.shareDashboard = function(tabIndex) { - var modalScope = $scope.$new(); + this.backendSrv.post('/api/user/stars/dashboard/' + this.dashboard.id).then(() => { + this.dashboard.meta.isStarred = true; + }); + } + + shareDashboard(tabIndex) { + var modalScope = this.$scope.$new(); modalScope.tabIndex = tabIndex; + modalScope.dashboard = this.dashboard; - $scope.appEvent('show-modal', { + appEvents.emit('show-modal', { src: 'public/app/features/dashboard/partials/shareModal.html', scope: modalScope }); - }; - - $scope.quickSnapshot = function() { - $scope.shareDashboard(1); - }; + } - $scope.openSearch = function() { - $scope.appEvent('show-dash-search'); - }; - - $scope.hideTooltip = function(evt) { + hideTooltip(evt) { angular.element(evt.currentTarget).tooltip('hide'); - $scope.appEvent('hide-dash-search'); - }; + } - $scope.makeEditable = function() { - $scope.dashboard.editable = true; + makeEditable() { + this.dashboard.editable = true; - return dashboardSrv.saveDashboard({makeEditable: true, overwrite: false}).then(function() { + return this.dashboardSrv.saveDashboard({makeEditable: true, overwrite: false}).then(() => { // force refresh whole page window.location.href = window.location.href; }); - }; + } + + exitFullscreen() { + this.$rootScope.appEvent('panel-change-view', {fullscreen: false, edit: false}); + } - $scope.saveDashboard = function(options) { - return dashboardSrv.saveDashboard(options); - }; + saveDashboard(options) { + return this.dashboardSrv.saveDashboard(options); + } - $scope.deleteDashboard = function() { + deleteDashboard() { var confirmText = ""; - var text2 = $scope.dashboard.title; - var alerts = $scope.dashboard.rows.reduce((memo, row) => { + var text2 = this.dashboard.title; + var alerts = this.dashboard.rows.reduce((memo, row) => { memo += row.panels.filter(panel => panel.alert).length; return memo; }, 0); @@ -98,60 +104,37 @@ export class DashNavCtrl { text2 = `This dashboad contains ${alerts} alerts. Deleting this dashboad will also delete those alerts`; } - $scope.appEvent('confirm-modal', { + appEvents.emit('confirm-modal', { title: 'Delete', text: 'Do you want to delete this dashboard?', text2: text2, icon: 'fa-trash', confirmText: confirmText, yesText: 'Delete', - onConfirm: function() { - $scope.dashboardMeta.canSave = false; - $scope.deleteDashboardConfirmed(); + onConfirm: () => { + this.dashboard.meta.canSave = false; + this.deleteDashboardConfirmed(); } }); - }; + } - $scope.deleteDashboardConfirmed = function() { - backendSrv.delete('/api/dashboards/db/' + $scope.dashboardMeta.slug).then(function() { - $scope.appEvent('alert-success', ['Dashboard Deleted', $scope.dashboard.title + ' has been deleted']); - $location.url('/'); + deleteDashboardConfirmed() { + this.backendSrv.delete('/api/dashboards/db/' + this.dashboard.meta.slug).then(() => { + appEvents.emit('alert-success', ['Dashboard Deleted', this.dashboard.title + ' has been deleted']); + this.$location.url('/'); }); - }; + } - $scope.saveDashboardAs = function() { - return dashboardSrv.saveDashboardAs(); - }; + saveDashboardAs() { + return this.dashboardSrv.saveDashboardAs(); + } - $scope.viewJson = function() { - var clone = $scope.dashboard.getSaveModelClone(); + viewJson() { + var clone = this.dashboard.getSaveModelClone(); var html = angular.toJson(clone, true); var uri = "data:application/json;charset=utf-8," + encodeURIComponent(html); var newWindow = window.open(uri); - }; - - $scope.snapshot = function() { - $scope.dashboard.snapshot = true; - $rootScope.$broadcast('refresh'); - - $timeout(function() { - $scope.dashboard.snapshot = false; - $scope.appEvent('dashboard-snapshot-cleanup'); - }, 1000); - - }; - - $scope.editJson = function() { - var clone = $scope.dashboard.getSaveModelClone(); - $scope.appEvent('show-json-editor', { object: clone }); - }; - - $scope.stopPlaylist = function() { - playlistSrv.stop(1); - }; - - $scope.init(); - } + } } export function dashNavDirective() { @@ -159,7 +142,10 @@ export function dashNavDirective() { restrict: 'E', templateUrl: 'public/app/features/dashboard/dashnav/dashnav.html', controller: DashNavCtrl, + bindToController: true, + controllerAs: 'ctrl', transclude: true, + scope: { dashboard: "=" } }; } diff --git a/public/app/features/dashboard/viewStateSrv.js b/public/app/features/dashboard/viewStateSrv.js index 70590e3c497..2847e52ebfa 100644 --- a/public/app/features/dashboard/viewStateSrv.js +++ b/public/app/features/dashboard/viewStateSrv.js @@ -20,12 +20,6 @@ function (angular, _, $, config) { self.$scope = $scope; self.dashboard = $scope.dashboard; - $scope.exitFullscreen = function() { - if (self.state.fullscreen) { - self.update({ fullscreen: false }); - } - }; - $scope.onAppEvent('$routeUpdate', function() { var urlState = self.getQueryStringState(); if (self.needsSync(urlState)) { @@ -41,6 +35,9 @@ function (angular, _, $, config) { self.registerPanel(payload.scope); }); + // this marks changes to location during this digest cycle as not to add history item + // dont want url changes like adding orgId to add browser history + $location.replace(); this.update(this.getQueryStringState()); this.expandRowForPanel(); } diff --git a/public/app/features/org/change_password_ctrl.js b/public/app/features/org/change_password_ctrl.js index 6e9826275ad..fea22deb4f5 100644 --- a/public/app/features/org/change_password_ctrl.js +++ b/public/app/features/org/change_password_ctrl.js @@ -7,11 +7,12 @@ function (angular, config) { var module = angular.module('grafana.controllers'); - module.controller('ChangePasswordCtrl', function($scope, backendSrv, $location) { + module.controller('ChangePasswordCtrl', function($scope, backendSrv, $location, navModelSrv) { $scope.command = {}; $scope.authProxyEnabled = config.authProxyEnabled; $scope.ldapEnabled = config.ldapEnabled; + $scope.navModel = navModelSrv.getProfileNav(); $scope.changePassword = function() { if (!$scope.userForm.$valid) { return; } diff --git a/public/app/features/org/newOrgCtrl.js b/public/app/features/org/newOrgCtrl.js index 0e2eaaf7a8e..4c79a5ca6af 100644 --- a/public/app/features/org/newOrgCtrl.js +++ b/public/app/features/org/newOrgCtrl.js @@ -7,8 +7,9 @@ function (angular, config) { var module = angular.module('grafana.controllers'); - module.controller('NewOrgCtrl', function($scope, $http, backendSrv) { + module.controller('NewOrgCtrl', function($scope, $http, backendSrv, navModelSrv) { + $scope.navModel = navModelSrv.getOrgNav(0); $scope.newOrg = {name: ''}; $scope.createOrg = function() { diff --git a/public/app/features/org/orgApiKeysCtrl.js b/public/app/features/org/orgApiKeysCtrl.js index d0b08b57d32..345f21cabfd 100644 --- a/public/app/features/org/orgApiKeysCtrl.js +++ b/public/app/features/org/orgApiKeysCtrl.js @@ -6,8 +6,9 @@ function (angular) { var module = angular.module('grafana.controllers'); - module.controller('OrgApiKeysCtrl', function($scope, $http, backendSrv) { + module.controller('OrgApiKeysCtrl', function($scope, $http, backendSrv, navModelSrv) { + $scope.navModel = navModelSrv.getOrgNav(0); $scope.roleTypes = ['Viewer', 'Editor', 'Admin']; $scope.token = { role: 'Viewer' }; diff --git a/public/app/features/org/orgDetailsCtrl.js b/public/app/features/org/orgDetailsCtrl.js index b900e295b99..08c965fd333 100644 --- a/public/app/features/org/orgDetailsCtrl.js +++ b/public/app/features/org/orgDetailsCtrl.js @@ -6,10 +6,11 @@ function (angular) { var module = angular.module('grafana.controllers'); - module.controller('OrgDetailsCtrl', function($scope, $http, backendSrv, contextSrv) { + module.controller('OrgDetailsCtrl', function($scope, $http, backendSrv, contextSrv, navModelSrv) { $scope.init = function() { $scope.getOrgInfo(); + $scope.navModel = navModelSrv.getOrgNav(0); }; $scope.getOrgInfo = function() { diff --git a/public/app/features/org/org_users_ctrl.ts b/public/app/features/org/org_users_ctrl.ts index 6181edddc9a..fb746307ee9 100644 --- a/public/app/features/org/org_users_ctrl.ts +++ b/public/app/features/org/org_users_ctrl.ts @@ -11,13 +11,15 @@ export class OrgUsersCtrl { pendingInvites: any; editor: any; showInviteUI: boolean; + navModel: any; /** @ngInject */ - constructor(private $scope, private $http, private backendSrv) { + constructor(private $scope, private $http, private backendSrv, navModelSrv) { this.user = { loginOrEmail: '', role: 'Viewer', }; + this.navModel = navModelSrv.getOrgNav(0); this.get(); this.editor = { index: 0 }; diff --git a/public/app/features/org/partials/change_password.html b/public/app/features/org/partials/change_password.html index 647817b4faa..e7ab7c0a128 100644 --- a/public/app/features/org/partials/change_password.html +++ b/public/app/features/org/partials/change_password.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/org/partials/newOrg.html b/public/app/features/org/partials/newOrg.html index 1c0a19ddec0..bd2fce86bf7 100644 --- a/public/app/features/org/partials/newOrg.html +++ b/public/app/features/org/partials/newOrg.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/org/partials/orgApiKeys.html b/public/app/features/org/partials/orgApiKeys.html index daa9801c468..c4ec261cf64 100644 --- a/public/app/features/org/partials/orgApiKeys.html +++ b/public/app/features/org/partials/orgApiKeys.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/org/partials/orgDetails.html b/public/app/features/org/partials/orgDetails.html index 5f264517b0d..d6fb84d1c0d 100644 --- a/public/app/features/org/partials/orgDetails.html +++ b/public/app/features/org/partials/orgDetails.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/org/partials/orgUsers.html b/public/app/features/org/partials/orgUsers.html index 8d348721301..0a10a4324cd 100644 --- a/public/app/features/org/partials/orgUsers.html +++ b/public/app/features/org/partials/orgUsers.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/org/partials/profile.html b/public/app/features/org/partials/profile.html index 7f52fbbd9d1..d83d8a6b6a5 100644 --- a/public/app/features/org/partials/profile.html +++ b/public/app/features/org/partials/profile.html @@ -1,9 +1,8 @@ - - +
    -

    Profile

    +

    User Profile

    diff --git a/public/app/features/org/profile_ctrl.ts b/public/app/features/org/profile_ctrl.ts index 4687218826c..02f20553e3f 100644 --- a/public/app/features/org/profile_ctrl.ts +++ b/public/app/features/org/profile_ctrl.ts @@ -11,11 +11,13 @@ export class ProfileCtrl { userForm: any; showOrgsList = false; readonlyLoginFields = config.disableLoginForm; + navModel: any; /** @ngInject **/ - constructor(private backendSrv, private contextSrv, private $location) { + constructor(private backendSrv, private contextSrv, private $location, navModelSrv) { this.getUser(); this.getUserOrgs(); + this.navModel = navModelSrv.getProfileNav(); } getUser() { diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 6dfb8b2f8e0..bb9d1ffc110 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/playlist/partials/playlists.html b/public/app/features/playlist/partials/playlists.html index 9c5f84a5c56..582174e44ff 100644 --- a/public/app/features/playlist/partials/playlists.html +++ b/public/app/features/playlist/partials/playlists.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/playlist/playlist_edit_ctrl.ts b/public/app/features/playlist/playlist_edit_ctrl.ts index 50cd810af93..9919e0b3b21 100644 --- a/public/app/features/playlist/playlist_edit_ctrl.ts +++ b/public/app/features/playlist/playlist_edit_ctrl.ts @@ -16,21 +16,30 @@ export class PlaylistEditCtrl { playlistItems: any = []; dashboardresult: any = []; tagresult: any = []; + navModel: any; /** @ngInject */ - constructor(private $scope, private playlistSrv, private backendSrv, private $location, private $route) { + constructor( + private $scope, + private playlistSrv, + private backendSrv, + private $location, + private $route, + private navModelSrv + ) { + + this.navModel = navModelSrv.getPlaylistsNav(0); + if ($route.current.params.id) { var playlistId = $route.current.params.id; - backendSrv.get('/api/playlists/' + playlistId) - .then((result) => { - this.playlist = result; - }); + backendSrv.get('/api/playlists/' + playlistId).then(result => { + this.playlist = result; + }); - backendSrv.get('/api/playlists/' + playlistId + '/items') - .then((result) => { - this.playlistItems = result; - }); + backendSrv.get('/api/playlists/' + playlistId + '/items').then(result => { + this.playlistItems = result; + }); } } @@ -85,7 +94,7 @@ export class PlaylistEditCtrl { ? this.backendSrv.put('/api/playlists/' + playlist.id, playlist) : this.backendSrv.post('/api/playlists', playlist); - savePromise + savePromise .then(() => { this.$scope.appEvent('alert-success', ['Playlist saved', '']); this.$location.path('/playlists'); diff --git a/public/app/features/playlist/playlist_srv.ts b/public/app/features/playlist/playlist_srv.ts index e231a645f92..5ddfe572cda 100644 --- a/public/app/features/playlist/playlist_srv.ts +++ b/public/app/features/playlist/playlist_srv.ts @@ -11,6 +11,7 @@ class PlaylistSrv { private interval: any; private playlistId: number; private startUrl: string; + public isPlaying: boolean; /** @ngInject */ constructor(private $rootScope: any, private $location: any, private $timeout: any, private backendSrv: any) { } @@ -42,7 +43,7 @@ class PlaylistSrv { this.startUrl = window.location.href; this.index = 0; this.playlistId = playlistId; - this.$rootScope.playlistSrv = this; + this.isPlaying = true; this.backendSrv.get(`/api/playlists/${playlistId}`).then(playlist => { this.backendSrv.get(`/api/playlists/${playlistId}/dashboards`).then(dashboards => { @@ -55,13 +56,12 @@ class PlaylistSrv { stop() { this.index = 0; + this.isPlaying = false; this.playlistId = 0; if (this.cancelPromise) { this.$timeout.cancel(this.cancelPromise); } - - this.$rootScope.playlistSrv = null; } } diff --git a/public/app/features/playlist/playlists_ctrl.ts b/public/app/features/playlist/playlists_ctrl.ts index 59758f0db1f..0f7b863e6a6 100644 --- a/public/app/features/playlist/playlists_ctrl.ts +++ b/public/app/features/playlist/playlists_ctrl.ts @@ -6,20 +6,22 @@ import coreModule from '../../core/core_module'; export class PlaylistsCtrl { playlists: any; + navModel: any; /** @ngInject */ - constructor(private $scope, private $location, private backendSrv) { - backendSrv.get('/api/playlists') - .then((result) => { - this.playlists = result; - }); + constructor(private $scope, private $location, private backendSrv, private navModelSrv) { + this.navModel = navModelSrv.getPlaylistsNav(0); + + backendSrv.get('/api/playlists').then(result => { + this.playlists = result; + }); } removePlaylistConfirmed(playlist) { _.remove(this.playlists, { id: playlist.id }); this.backendSrv.delete('/api/playlists/' + playlist.id) - .then(() => { + .then(() => { this.$scope.appEvent('alert-success', ['Playlist deleted', '']); }, () => { this.$scope.appEvent('alert-error', ['Unable to delete playlist', '']); diff --git a/public/app/features/playlist/specs/playlist_edit_ctrl_specs.ts b/public/app/features/playlist/specs/playlist_edit_ctrl_specs.ts index 900992f4314..e27eb53e644 100644 --- a/public/app/features/playlist/specs/playlist_edit_ctrl_specs.ts +++ b/public/app/features/playlist/specs/playlist_edit_ctrl_specs.ts @@ -5,7 +5,11 @@ import {PlaylistEditCtrl} from '../playlist_edit_ctrl'; describe('PlaylistEditCtrl', () => { var ctx: any; beforeEach(() => { - ctx = new PlaylistEditCtrl(null, null, null, null, { current: { params: {} } }); + let navModelSrv = { + getPlaylistsNav: page => {}, + }; + + ctx = new PlaylistEditCtrl(null, null, null, null, { current: { params: {} } }, navModelSrv); ctx.dashboardresult = [ { id: 2, title: 'dashboard: 2' }, diff --git a/public/app/features/plugins/ds_edit_ctrl.ts b/public/app/features/plugins/ds_edit_ctrl.ts index 57028fe4adc..b577ad3131b 100644 --- a/public/app/features/plugins/ds_edit_ctrl.ts +++ b/public/app/features/plugins/ds_edit_ctrl.ts @@ -30,6 +30,7 @@ export class DataSourceEditCtrl { hasDashboards: boolean; editForm: any; gettingStarted: boolean; + navModel: any; /** @ngInject */ constructor( @@ -38,141 +39,144 @@ export class DataSourceEditCtrl { private backendSrv, private $routeParams, private $location, - private datasourceSrv) { - - this.isNew = true; - this.datasources = []; - this.tabIndex = 0; - - this.loadDatasourceTypes().then(() => { - if (this.$routeParams.id) { - this.getDatasourceById(this.$routeParams.id); - } else { - this.initNewDatasourceModel(); - } - }); - } - - initNewDatasourceModel() { - this.current = angular.copy(defaults); - - // We are coming from getting started - if (this.$location.search().gettingstarted) { - this.gettingStarted = true; - this.current.isDefault = true; - } - - this.typeChanged(); - } - - loadDatasourceTypes() { - if (datasourceTypes.length > 0) { - this.types = datasourceTypes; - return this.$q.when(null); + private datasourceSrv, + private navModelSrv, + ) { + + this.navModel = navModelSrv.getDatasourceNav(0); + this.isNew = true; + this.datasources = []; + this.tabIndex = 0; + + this.loadDatasourceTypes().then(() => { + if (this.$routeParams.id) { + this.getDatasourceById(this.$routeParams.id); + } else { + this.initNewDatasourceModel(); } + }); + } - return this.backendSrv.get('/api/plugins', {enabled: 1, type: 'datasource'}).then(plugins => { - datasourceTypes = plugins; - this.types = plugins; - }); - } + initNewDatasourceModel() { + this.current = angular.copy(defaults); - getDatasourceById(id) { - this.backendSrv.get('/api/datasources/' + id).then(ds => { - this.isNew = false; - this.current = ds; - if (datasourceCreated) { - datasourceCreated = false; - this.testDatasource(); - } - return this.typeChanged(); - }); + // We are coming from getting started + if (this.$location.search().gettingstarted) { + this.gettingStarted = true; + this.current.isDefault = true; } - typeChanged() { - this.hasDashboards = false; - return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => { - this.datasourceMeta = pluginInfo; - console.log(this.datasourceMeta) ; - this.hasDashboards = _.find(pluginInfo.includes, {type: 'dashboard'}); - }); - } + this.typeChanged(); + } - updateFrontendSettings() { - return this.backendSrv.get('/api/frontend/settings').then(settings => { - config.datasources = settings.datasources; - config.defaultDatasource = settings.defaultDatasource; - this.datasourceSrv.init(); - }); + loadDatasourceTypes() { + if (datasourceTypes.length > 0) { + this.types = datasourceTypes; + return this.$q.when(null); } - testDatasource() { - this.testing = { done: false }; - - this.datasourceSrv.get(this.current.name).then(datasource => { - if (!datasource.testDatasource) { - delete this.testing; - return; - } + return this.backendSrv.get('/api/plugins', {enabled: 1, type: 'datasource'}).then(plugins => { + datasourceTypes = plugins; + this.types = plugins; + }); + } + + getDatasourceById(id) { + this.backendSrv.get('/api/datasources/' + id).then(ds => { + this.isNew = false; + this.current = ds; + if (datasourceCreated) { + datasourceCreated = false; + this.testDatasource(); + } + return this.typeChanged(); + }); + } + + typeChanged() { + this.hasDashboards = false; + return this.backendSrv.get('/api/plugins/' + this.current.type + '/settings').then(pluginInfo => { + this.datasourceMeta = pluginInfo; + console.log(this.datasourceMeta) ; + this.hasDashboards = _.find(pluginInfo.includes, {type: 'dashboard'}); + }); + } + + updateFrontendSettings() { + return this.backendSrv.get('/api/frontend/settings').then(settings => { + config.datasources = settings.datasources; + config.defaultDatasource = settings.defaultDatasource; + this.datasourceSrv.init(); + }); + } + + testDatasource() { + this.testing = { done: false }; + + this.datasourceSrv.get(this.current.name).then(datasource => { + if (!datasource.testDatasource) { + delete this.testing; + return; + } - return datasource.testDatasource().then(result => { - this.testing.message = result.message; - this.testing.status = result.status; - this.testing.title = result.title; - }).catch(err => { - if (err.statusText) { - this.testing.message = err.statusText; - this.testing.title = "HTTP Error"; - } else { - this.testing.message = err.message; - this.testing.title = "Unknown error"; - } - }); - }).finally(() => { - if (this.testing) { - this.testing.done = true; + return datasource.testDatasource().then(result => { + this.testing.message = result.message; + this.testing.status = result.status; + this.testing.title = result.title; + }).catch(err => { + if (err.statusText) { + this.testing.message = err.statusText; + this.testing.title = "HTTP Error"; + } else { + this.testing.message = err.message; + this.testing.title = "Unknown error"; } }); - } - - saveChanges() { - if (!this.editForm.$valid) { - return; + }).finally(() => { + if (this.testing) { + this.testing.done = true; } + }); + } - if (this.current.id) { - return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(() => { - this.updateFrontendSettings().then(() => { - this.testDatasource(); - }); - }); - } else { - return this.backendSrv.post('/api/datasources', this.current).then(result => { - this.updateFrontendSettings(); - - datasourceCreated = true; - this.$location.path('datasources/edit/' + result.id); - }); - } + saveChanges() { + if (!this.editForm.$valid) { + return; } - confirmDelete() { - this.backendSrv.delete('/api/datasources/' + this.current.id).then(() => { - this.$location.path('datasources'); + if (this.current.id) { + return this.backendSrv.put('/api/datasources/' + this.current.id, this.current).then(() => { + this.updateFrontendSettings().then(() => { + this.testDatasource(); + }); }); - } + } else { + return this.backendSrv.post('/api/datasources', this.current).then(result => { + this.updateFrontendSettings(); - delete(s) { - appEvents.emit('confirm-modal', { - title: 'Delete', - text: 'Are you sure you want to delete this datasource?', - yesText: "Delete", - icon: "fa-trash", - onConfirm: () => { - this.confirmDelete(); - } + datasourceCreated = true; + this.$location.path('datasources/edit/' + result.id); }); } + } + + confirmDelete() { + this.backendSrv.delete('/api/datasources/' + this.current.id).then(() => { + this.$location.path('datasources'); + }); + } + + delete(s) { + appEvents.emit('confirm-modal', { + title: 'Delete', + text: 'Are you sure you want to delete this datasource?', + yesText: "Delete", + icon: "fa-trash", + onConfirm: () => { + this.confirmDelete(); + } + }); + } } coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl); diff --git a/public/app/features/plugins/ds_list_ctrl.ts b/public/app/features/plugins/ds_list_ctrl.ts index d7b08dcd312..b26883bd4b5 100644 --- a/public/app/features/plugins/ds_list_ctrl.ts +++ b/public/app/features/plugins/ds_list_ctrl.ts @@ -6,31 +6,41 @@ import coreModule from '../../core/core_module'; export class DataSourcesCtrl { datasources: any; + navModel: any; /** @ngInject */ - constructor(private $scope, private $location, private $http, private backendSrv, private datasourceSrv) { - backendSrv.get('/api/datasources') - .then((result) => { - this.datasources = result; - }); + constructor( + private $scope, + private $location, + private $http, + private backendSrv, + private datasourceSrv, + private navModelSrv + ) { + + this.navModel = this.navModelSrv.getDatasourceNav(0); + + backendSrv.get('/api/datasources').then(result => { + this.datasources = result; + }); } removeDataSourceConfirmed(ds) { this.backendSrv.delete('/api/datasources/' + ds.id) - .then(() => { - this.$scope.appEvent('alert-success', ['Datasource deleted', '']); - }, () => { - this.$scope.appEvent('alert-error', ['Unable to delete datasource', '']); - }).then(() => { + .then(() => { + this.$scope.appEvent('alert-success', ['Datasource deleted', '']); + }, () => { + this.$scope.appEvent('alert-error', ['Unable to delete datasource', '']); + }).then(() => { this.backendSrv.get('/api/datasources') - .then((result) => { - this.datasources = result; - }); + .then((result) => { + this.datasources = result; + }); this.backendSrv.get('/api/frontend/settings') - .then((settings) => { - this.datasourceSrv.init(settings.datasources); - }); + .then((settings) => { + this.datasourceSrv.init(settings.datasources); + }); }); } diff --git a/public/app/features/plugins/partials/ds_edit.html b/public/app/features/plugins/partials/ds_edit.html index 5cd1470e1b1..73691b16b2e 100644 --- a/public/app/features/plugins/partials/ds_edit.html +++ b/public/app/features/plugins/partials/ds_edit.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/plugins/partials/ds_list.html b/public/app/features/plugins/partials/ds_list.html index c4625abfe6b..f6748b37d61 100644 --- a/public/app/features/plugins/partials/ds_list.html +++ b/public/app/features/plugins/partials/ds_list.html @@ -1,8 +1,4 @@ - - +
    diff --git a/public/app/features/plugins/partials/plugin_edit.html b/public/app/features/plugins/partials/plugin_edit.html index e6659191961..e2569681a70 100644 --- a/public/app/features/plugins/partials/plugin_edit.html +++ b/public/app/features/plugins/partials/plugin_edit.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/plugins/partials/plugin_list.html b/public/app/features/plugins/partials/plugin_list.html index 88911a0ec2f..91b2162175b 100644 --- a/public/app/features/plugins/partials/plugin_list.html +++ b/public/app/features/plugins/partials/plugin_list.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/plugins/partials/plugin_page.html b/public/app/features/plugins/partials/plugin_page.html index b08089ebb1d..9c4c72121f0 100644 --- a/public/app/features/plugins/partials/plugin_page.html +++ b/public/app/features/plugins/partials/plugin_page.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index 8d7f360aeeb..4910ee95490 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -13,17 +13,22 @@ export class PluginEditCtrl { includedDatasources: any; tabIndex: number; tabs: any; + navModel: any; hasDashboards: any; preUpdateHook: () => any; postUpdateHook: () => any; /** @ngInject */ - constructor(private $scope, - private $rootScope, - private backendSrv, - private $routeParams, - private $sce, - private $http) { + constructor( + private $scope, + private $rootScope, + private backendSrv, + private $routeParams, + private $sce, + private $http, + private navModelSrv, + ) { + this.navModel = navModelSrv.getPluginsNav(); this.model = {}; this.pluginId = $routeParams.pluginId; this.tabIndex = 0; @@ -31,7 +36,7 @@ export class PluginEditCtrl { this.preUpdateHook = () => Promise.resolve(); this.postUpdateHook = () => Promise.resolve(); - } + } init() { return this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(result => { diff --git a/public/app/features/plugins/plugin_list_ctrl.ts b/public/app/features/plugins/plugin_list_ctrl.ts index 9e9b679c6c1..2a1209c14b0 100644 --- a/public/app/features/plugins/plugin_list_ctrl.ts +++ b/public/app/features/plugins/plugin_list_ctrl.ts @@ -5,10 +5,12 @@ import angular from 'angular'; export class PluginListCtrl { plugins: any[]; tabIndex: number; + navModel: any; /** @ngInject */ - constructor(private backendSrv: any, $location) { + constructor(private backendSrv: any, $location, navModelSrv) { this.tabIndex = 0; + this.navModel = navModelSrv.getPluginsNav(); var pluginType = $location.search().type || 'panel'; switch (pluginType) { diff --git a/public/app/features/plugins/plugin_page_ctrl.ts b/public/app/features/plugins/plugin_page_ctrl.ts index 9dfcb73c7a1..f3d2e3b5f53 100644 --- a/public/app/features/plugins/plugin_page_ctrl.ts +++ b/public/app/features/plugins/plugin_page_ctrl.ts @@ -2,6 +2,7 @@ import angular from 'angular'; import _ from 'lodash'; +import {NavModel} from 'app/core/core'; var pluginInfoCache = {}; @@ -9,7 +10,7 @@ export class AppPageCtrl { page: any; pluginId: any; appModel: any; - appLogoUrl: any; + navModel: NavModel; /** @ngInject */ constructor(private backendSrv, private $routeParams: any, private $rootScope) { @@ -25,13 +26,53 @@ export class AppPageCtrl { initPage(app) { this.appModel = app; this.page = _.find(app.includes, {slug: this.$routeParams.slug}); - this.appLogoUrl = app.info.logos.small; pluginInfoCache[this.pluginId] = app; if (!this.page) { this.$rootScope.appEvent('alert-error', ['App Page Not Found', '']); + + this.navModel = { + section: { + title: "Page not found", + url: app.defaultNavUrl, + icon: 'icon-gf icon-gf-sadface', + }, + menu: [], + }; + + return; + } + + let menu = []; + + for (let item of app.includes) { + if (item.addToNav) { + if (item.type === 'dashboard') { + menu.push({ + title: item.name, + url: 'dashboard/db/' + item.slug, + icon: 'fa fa-fw fa-dot-circle-o', + }); + } + if (item.type === 'page') { + menu.push({ + title: item.name, + url: `plugins/${app.id}/page/${item.slug}`, + icon: 'fa fa-fw fa-dot-circle-o', + }); + } + } } + + this.navModel = { + section: { + title: app.name, + url: app.defaultNavUrl, + iconUrl: app.info.logos.small, + }, + menu: menu, + }; } loadPluginInfo() { diff --git a/public/app/features/snapshot/partials/snapshots.html b/public/app/features/snapshot/partials/snapshots.html index 99aac73bce6..526d319ac10 100644 --- a/public/app/features/snapshot/partials/snapshots.html +++ b/public/app/features/snapshot/partials/snapshots.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/snapshot/snapshot_ctrl.ts b/public/app/features/snapshot/snapshot_ctrl.ts index 7085c058046..2817238203b 100644 --- a/public/app/features/snapshot/snapshot_ctrl.ts +++ b/public/app/features/snapshot/snapshot_ctrl.ts @@ -4,11 +4,20 @@ import angular from 'angular'; import _ from 'lodash'; export class SnapshotsCtrl { - + navModel: any; snapshots: any; /** @ngInject */ constructor(private $rootScope, private backendSrv) { + this.navModel = { + section: { + title: 'Snapshots', + icon: 'icon-gf icon-gf-snapshot', + url: 'dashboard/snapshots', + }, + menu: [], + }; + this.backendSrv.get('/api/dashboard/snapshots').then(result => { this.snapshots = result; }); diff --git a/public/app/features/styleguide/styleguide.html b/public/app/features/styleguide/styleguide.html index 573d720831e..b6f1d626a13 100644 --- a/public/app/features/styleguide/styleguide.html +++ b/public/app/features/styleguide/styleguide.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/app/features/styleguide/styleguide.ts b/public/app/features/styleguide/styleguide.ts index de9da6aafd7..36afdd1d7c2 100644 --- a/public/app/features/styleguide/styleguide.ts +++ b/public/app/features/styleguide/styleguide.ts @@ -12,9 +12,11 @@ class StyleGuideCtrl { icons: any = []; page: any; pages = ['colors', 'buttons', 'icons', 'plugins']; + navModel: any; /** @ngInject **/ - constructor(private $http, private $routeParams, private $location, private backendSrv) { + constructor(private $http, private $routeParams, private $location, private backendSrv, navModelSrv) { + this.navModel = navModelSrv.getAdminNav(); this.theme = config.bootData.user.lightTheme ? 'light': 'dark'; this.page = {}; diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 7c8ac3e6aed..95f0fb87ec8 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,9 +1,8 @@
    - +
    -
    diff --git a/public/app/partials/error.html b/public/app/partials/error.html index 0401d6d98db..16a5815295d 100644 --- a/public/app/partials/error.html +++ b/public/app/partials/error.html @@ -1,5 +1,4 @@ - - +
    diff --git a/public/sass/_old_responsive.scss b/public/sass/_old_responsive.scss index 4a69a1bbb9e..be56bbae485 100644 --- a/public/sass/_old_responsive.scss +++ b/public/sass/_old_responsive.scss @@ -40,14 +40,14 @@ @include media-breakpoint-down(xs) { .page-dashboard .navbar-page-btn { - max-width: 150px; + max-width: 250px; } } // form styles @include media-breakpoint-up(md) { .page-dashboard .navbar-page-btn { - max-width: 180px; + max-width: 280px; } .gf-timepicker-nav-btn { max-width: 120px; diff --git a/public/sass/components/_dropdown.scss b/public/sass/components/_dropdown.scss index 7b0cbc5fd36..6031c05db3f 100644 --- a/public/sass/components/_dropdown.scss +++ b/public/sass/components/_dropdown.scss @@ -15,13 +15,13 @@ } .dropdown-desc { - position: relative; - top: -3px; - width: 250px; - font-size: 80%; - margin-left: 22px; - color: $gray-2; - white-space: normal; + position: relative; + top: -3px; + width: 250px; + font-size: 80%; + margin-left: 22px; + color: $gray-2; + white-space: normal; } // Dropdown arrow/caret @@ -75,7 +75,7 @@ // Links within the dropdown menu > li { - > a { + > a { display: block; padding: 3px 20px 3px 15px; clear: both; diff --git a/public/sass/components/_navbar.scss b/public/sass/components/_navbar.scss index 7ac46505f1b..44678afe6e1 100644 --- a/public/sass/components/_navbar.scss +++ b/public/sass/components/_navbar.scss @@ -42,7 +42,6 @@ // Hover/focus .navbar .nav > li > a:focus, .navbar .nav > li > a:hover { - background-color: $navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover/:focus from .active color: $navbarLinkColorHover; text-decoration: none; } @@ -64,10 +63,12 @@ border-right: 1px solid $tight-form-border; background-color: $navbarButtonBackground; padding: 0.4rem 1.0rem 0.4rem 1rem; + min-height:: $navbarHeight; .fa-caret-down { font-size: 70%; } + .fa-chevron-left{ display: none; } @@ -95,7 +96,7 @@ .icon-gf-grafana_wordmark { font-size: 21px; position: relative; - top: 4px; + top: 5px; padding-left: 5px; display: none; } @@ -108,16 +109,16 @@ float: left; display: block; margin: 0; - font-size: 1.4em; + font-size: 1.4rem; border-right: 1px solid $tight-form-border; color: darken($link-color, 5%); background-color: $navbarButtonBackground; font-size: $font-size-lg; - padding: 1rem 1rem 0.7rem 1rem; + padding: 1rem 1rem 0.75rem 1rem; + min-height:: $navbarHeight; - &:hover { + &:hover, &.active { background: $navbarButtonBackgroundHighlight; - color: $link-color; } .fa-caret-down { @@ -138,9 +139,36 @@ } } +.navbar-page-btn-wrapper { + display: inline-block; + position: relative; +} + +.dropdown-menu.dropdown-menu--navbar { + top: 100%; + min-width: 100%; + margin-top: 0px; + + li a { + padding: $spacer/2 $spacer; + border-left: 2px solid $side-menu-bg; + background: $side-menu-bg; + + i { + display: inline-block; + padding-right: 21px; + } + + &:hover { + @include left-brand-border-gradient(); + color: $link-hover-color; + background: $input-label-bg; + } + } +} + .sidemenu-pinned { .navbar-brand-btn { - background-color: $page-bg; width: $side-menu-width; .icon-gf-grafana_wordmark { @@ -160,3 +188,7 @@ } } +.navbar-section-wrapper { + position: relative; + float: left; +} diff --git a/public/sass/components/_search.scss b/public/sass/components/_search.scss index dc4ba998f63..c5d7d65224f 100644 --- a/public/sass/components/_search.scss +++ b/public/sass/components/_search.scss @@ -1,14 +1,20 @@ +.search-backdrop { + position: fixed; + right: 0; + bottom: 0; + left: 0; + top: $navbarHeight; + z-index: $zindex-modal-backdrop; + background-color: $black; + @include opacity(70); +} + .search-container { - left: 72px; - top: 39px; - margin: 16px 0 0 2px; - z-index: 1000; + left: 78px; + top: 0; + right: 0; + z-index: ($zindex-modal-backdrop + 10); position: absolute; - width: 700px; - box-shadow: $search-shadow; - padding: 10px; - background-color: $panel-bg; - border: $panel-border; .label-tag { margin-left: 6px; @@ -19,19 +25,48 @@ // Search .search-field-wrapper { - padding-bottom: 10px; + width: 100%; + display: flex; + background-color: $navbarButtonBackground; + input { - width: 100%; - padding: 8px 8px; - height: 100%; + max-width: 653px; + //padding: 0.5rem 1.5rem 0.5rem 0; + padding: 1rem 1rem 0.75rem 1rem; + height: 51px; + line-height: 51px; box-sizing: border-box; + outline: none; + background: $side-menu-bg; + background-color: $navbarButtonBackground; + flex-grow: 10; } - button { - margin: 0 4px 0 0; - } - > span { - display: block; - overflow: hidden; +} + +.search-field-spacer { + flex-grow: 1; +} +.search-switches { + flex-grow: 1; + padding: 1rem 1rem 0.75rem 1rem; + white-space: nowrap; +} + +.search-field-icon { + font-size: $font-size-lg; + padding: 1rem 1rem 0.75rem 1rem; +} + +.search-dropdown { + display: flex; + max-width: 1100px; + visibility: none; + opacity: 0; + + &--fade-in { + visibility: visible; + opacity: 1; + transition: opacity 0.3s; } } @@ -40,10 +75,9 @@ overflow: auto; display: block; line-height: 28px; - - .search-item:hover, .search-item.selected { - background-color: $grafanaListHighlight; - } + padding: $spacer; + background: $panel-bg; + flex-grow: 10; .selected { .search-result-tag { @@ -71,8 +105,10 @@ word-wrap: break-word; display: block; padding: 3px 10px; - background-color: $grafanaListBackground; + white-space: nowrap; + background-color: $tight-form-bg; margin-bottom: 4px; + @include left-brand-border(); .search-result-icon::before { content: "\f009"; @@ -81,6 +117,15 @@ &.search-item-dash-home .search-result-icon::before { content: "\f015"; } + + &:hover { + background-color: $tight-form-func-bg; + @include left-brand-border-gradient(); + } + + &.selected { + background-color: $grafanaListBackground; + } } .search-result-tags { @@ -93,17 +138,15 @@ } } -.search-switches { - position: absolute; - top: 19px; - right: 21px; -} .search-button-row { - padding-top: 20px; + padding: $spacer*2; + display: flex; + flex-direction: column; + align-items: flex-start; button, a { - margin-right: 10px; + margin-bottom: $spacer; } .search-button-row-explore-link { diff --git a/public/sass/components/_sidemenu.scss b/public/sass/components/_sidemenu.scss index 6f16913a084..616fbb784a5 100644 --- a/public/sass/components/_sidemenu.scss +++ b/public/sass/components/_sidemenu.scss @@ -9,7 +9,8 @@ width: $side-menu-width; background-color: rgba($side-menu-bg,$side-menu-opacity); z-index: 101; - transform: translate3d(0, -100%, 0); + //transform: translate3d(0, -100%, 0); + opacity: 0; visibility: hidden; a:focus { @@ -20,8 +21,9 @@ .sidemenu-open { .sidemenu-wrapper { visibility: visible; - transform: translate3d(0, 0, 0); - transition: all 0.2s; + //transform: translate3d(0, 0, 0); + opacity: 1; + transition: opacity 0.3s; } } diff --git a/public/sass/components/_view_states.scss b/public/sass/components/_view_states.scss index a1ed89f9888..900c9d1489b 100644 --- a/public/sass/components/_view_states.scss +++ b/public/sass/components/_view_states.scss @@ -51,7 +51,7 @@ .navbar-page-btn { border-color: transparent; background: transparent; - transform: translate3d(-50px, 0, 0); + transform: translate3d(-95px, 0, 0); transition: all 1.5s ease-in-out 1s; .icon-gf { opacity: 0;