From 723be4f612a827193112624825e3b2d74b14cfc3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Sun, 17 Jan 2016 11:34:51 +0100 Subject: [PATCH] refactoring(): unified dashboard top nav to a single dashnav component, uses new navbar component --- public/app/core/components/navbar/navbar.html | 27 ++++--- public/app/core/components/navbar/navbar.ts | 11 +-- .../app/core/components/sidemenu/sidemenu.ts | 2 +- public/app/features/dashboard/all.js | 3 +- .../app/features/dashboard/dashboardCtrl.js | 8 -- .../features/dashboard/dashnav/dashnav.html | 71 +++++++++++++++++ .../dashnav.ts} | 55 +++++++++----- .../dashboard/partials/dashboardTopNav.html | 76 ------------------- .../dashboard/partials/snapshotTopNav.html | 36 --------- .../features/dashboard/snapshotTopNavCtrl.js | 29 ------- .../features/playlist/partials/playlist.html | 6 -- public/app/partials/dashboard.html | 5 +- public/less/navbar.less | 11 +-- 13 files changed, 131 insertions(+), 209 deletions(-) create mode 100644 public/app/features/dashboard/dashnav/dashnav.html rename public/app/features/dashboard/{dashboardNavCtrl.js => dashnav/dashnav.ts} (81%) delete mode 100644 public/app/features/dashboard/partials/dashboardTopNav.html delete mode 100644 public/app/features/dashboard/partials/snapshotTopNav.html delete mode 100644 public/app/features/dashboard/snapshotTopNavCtrl.js diff --git a/public/app/core/components/navbar/navbar.html b/public/app/core/components/navbar/navbar.html index 31798b14710..ab33b9ae2e9 100644 --- a/public/app/core/components/navbar/navbar.html +++ b/public/app/core/components/navbar/navbar.html @@ -1,24 +1,23 @@
-
-
- - - - - - -
+
+ + + + + + +
+ - + - - + {{ctrl.title}} - -
+ +
diff --git a/public/app/core/components/navbar/navbar.ts b/public/app/core/components/navbar/navbar.ts index 83beb251e11..874becbe4ee 100644 --- a/public/app/core/components/navbar/navbar.ts +++ b/public/app/core/components/navbar/navbar.ts @@ -6,11 +6,8 @@ import $ from 'jquery'; import coreModule from '../../core_module'; export class NavbarCtrl { - contextSrv: any; - /** @ngInject */ - constructor(private $scope, contextSrv) { - this.contextSrv = contextSrv; + constructor(private $scope, private contextSrv) { } } @@ -26,9 +23,9 @@ export function navbarDirective() { title: "@", titleUrl: "@", }, - link: function(scope, elem, attrs) { - scope.icon = attrs.icon; - scope.subnav = attrs.subnav; + link: function(scope, elem, attrs, ctrl) { + ctrl.icon = attrs.icon; + ctrl.subnav = attrs.subnav; } }; } diff --git a/public/app/core/components/sidemenu/sidemenu.ts b/public/app/core/components/sidemenu/sidemenu.ts index 70410299db2..83a1c520089 100644 --- a/public/app/core/components/sidemenu/sidemenu.ts +++ b/public/app/core/components/sidemenu/sidemenu.ts @@ -137,7 +137,7 @@ export class SideMenuCtrl { export function sideMenuDirective() { return { restrict: 'E', - templateUrl: 'app/features/sidemenu/sidemenu.html', + templateUrl: 'app/core/components/sidemenu/sidemenu.html', controller: SideMenuCtrl, bindToController: true, controllerAs: 'ctrl', diff --git a/public/app/features/dashboard/all.js b/public/app/features/dashboard/all.js index 4bddbf8dd95..f2716979903 100644 --- a/public/app/features/dashboard/all.js +++ b/public/app/features/dashboard/all.js @@ -1,8 +1,7 @@ define([ './dashboardCtrl', './dashboardLoaderSrv', - './dashboardNavCtrl', - './snapshotTopNavCtrl', + './dashnav/dashnav', './saveDashboardAsCtrl', './rowCtrl', './shareModalCtrl', diff --git a/public/app/features/dashboard/dashboardCtrl.js b/public/app/features/dashboard/dashboardCtrl.js index 20b3122230c..2fe21afdc35 100644 --- a/public/app/features/dashboard/dashboardCtrl.js +++ b/public/app/features/dashboard/dashboardCtrl.js @@ -23,7 +23,6 @@ function (angular, $, config, moment) { $timeout) { $scope.editor = { index: 0 }; - $scope.topNavPartial = 'app/features/dashboard/partials/dashboardTopNav.html'; $scope.panels = config.panels; var resizeEventTimeout; @@ -58,7 +57,6 @@ function (angular, $, config, moment) { dashboardKeybindings.shortcuts($scope); - $scope.updateTopNavPartial(); $scope.updateSubmenuVisibility(); $scope.setWindowTitleAndTheme(); @@ -69,12 +67,6 @@ function (angular, $, config, moment) { }); }; - $scope.updateTopNavPartial = function() { - if ($scope.dashboard.meta.isSnapshot) { - $scope.topNavPartial = 'app/features/dashboard/partials/snapshotTopNav.html'; - } - }; - $scope.updateSubmenuVisibility = function() { $scope.submenuEnabled = $scope.dashboard.isSubmenuFeaturesEnabled(); }; diff --git a/public/app/features/dashboard/dashnav/dashnav.html b/public/app/features/dashboard/dashnav/dashnav.html new file mode 100644 index 00000000000..bd084050c77 --- /dev/null +++ b/public/app/features/dashboard/dashnav/dashnav.html @@ -0,0 +1,71 @@ + + +
+ + + {{dashboard.title}} + + +
+ +
+ + + + {{dashboard.title}} +   (snapshot) + + +
+ + + +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
+ + + + diff --git a/public/app/features/dashboard/dashboardNavCtrl.js b/public/app/features/dashboard/dashnav/dashnav.ts similarity index 81% rename from public/app/features/dashboard/dashboardNavCtrl.js rename to public/app/features/dashboard/dashnav/dashnav.ts index 44167d8c4f8..1b1424018f9 100644 --- a/public/app/features/dashboard/dashboardNavCtrl.js +++ b/public/app/features/dashboard/dashnav/dashnav.ts @@ -1,18 +1,28 @@ -define([ - 'angular', - 'lodash', - 'vendor/filesaver' -], -function (angular, _) { - 'use strict'; +/// - var module = angular.module('grafana.controllers'); +import _ from 'lodash'; +import moment from 'moment'; +import angular from 'angular'; - module.controller('DashboardNavCtrl', function($scope, $rootScope, alertSrv, $location, playlistSrv, backendSrv, $timeout) { +export class DashNavCtrl { + + /** @ngInject */ + constructor($scope, $rootScope, alertSrv, $location, playlistSrv, backendSrv, $timeout) { $scope.init = function() { $scope.onAppEvent('save-dashboard', $scope.saveDashboard); $scope.onAppEvent('delete-dashboard', $scope.deleteDashboard); + + $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(); + if (meta.expires) { + $scope.titleTooltip += '
Expires:  ' + moment(meta.expires).fromNow() + '
'; + } + } }; $scope.openEditView = function(editview) { @@ -20,17 +30,12 @@ function (angular, _) { $location.search(search); }; - $scope.showSettingsMenu = function() { - return $scope.dashboardMeta.canEdit || $scope.contextSrv.isEditor; - }; - $scope.starDashboard = function() { if ($scope.dashboardMeta.isStarred) { backendSrv.delete('/api/user/stars/dashboard/' + $scope.dashboard.id).then(function() { $scope.dashboardMeta.isStarred = false; }); - } - else { + } else { backendSrv.post('/api/user/stars/dashboard/' + $scope.dashboard.id).then(function() { $scope.dashboardMeta.isStarred = true; }); @@ -63,7 +68,7 @@ function (angular, _) { $scope.appEvent('dashboard-saved', $scope.dashboard); $scope.appEvent('alert-success', ['Dashboard saved', 'Saved as ' + clone.title]); - //force refresh whole page + // force refresh whole page window.location.href = window.location.href; }, $scope.handleSaveDashError); }; @@ -152,7 +157,8 @@ function (angular, _) { $scope.exportDashboard = function() { var clone = $scope.dashboard.getSaveModelClone(); var blob = new Blob([angular.toJson(clone, true)], { type: "application/json;charset=utf-8" }); - window.saveAs(blob, $scope.dashboard.title + '-' + new Date().getTime()); + var wnd: any = window; + wnd.saveAs(blob, $scope.dashboard.title + '-' + new Date().getTime()); }; $scope.snapshot = function() { @@ -176,6 +182,17 @@ function (angular, _) { playlistSrv.stop(1); }; - }); + $scope.init(); + } +} -}); +export function dashNavDirective() { + return { + restrict: 'E', + templateUrl: 'app/features/dashboard/dashnav/dashnav.html', + controller: DashNavCtrl, + transclude: true, + }; +} + +angular.module('grafana.directives').directive('dashnav', dashNavDirective); diff --git a/public/app/features/dashboard/partials/dashboardTopNav.html b/public/app/features/dashboard/partials/dashboardTopNav.html deleted file mode 100644 index 9a29a00c259..00000000000 --- a/public/app/features/dashboard/partials/dashboardTopNav.html +++ /dev/null @@ -1,76 +0,0 @@ -
-
-
- -
-
- - - - - - -
- -
- - - {{dashboard.title}} - - -
-
- - - -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
- - -
-
-
- diff --git a/public/app/features/dashboard/partials/snapshotTopNav.html b/public/app/features/dashboard/partials/snapshotTopNav.html deleted file mode 100644 index 57f5d9181d4..00000000000 --- a/public/app/features/dashboard/partials/snapshotTopNav.html +++ /dev/null @@ -1,36 +0,0 @@ -
-
-
- -
- - - - - -
- - - - {{dashboard.title}} -   (snapshot) - - -
-
- -
    -
  • - -
    • -
- -
    -
  • - -
    • -
- -
-
-
diff --git a/public/app/features/dashboard/snapshotTopNavCtrl.js b/public/app/features/dashboard/snapshotTopNavCtrl.js deleted file mode 100644 index 13ddb444685..00000000000 --- a/public/app/features/dashboard/snapshotTopNavCtrl.js +++ /dev/null @@ -1,29 +0,0 @@ -define([ - 'angular', - 'moment', -], -function (angular, moment) { - 'use strict'; - - var module = angular.module('grafana.controllers'); - - module.controller('SnapshotTopNavCtrl', function($scope) { - - $scope.init = function() { - var meta = $scope.dashboardMeta; - $scope.titleTooltip = 'Created:  ' + moment(meta.created).calendar(); - if (meta.expires) { - $scope.titleTooltip += '
Expires:  ' + moment(meta.expires).fromNow() + '
'; - } - }; - - $scope.shareDashboard = function() { - $scope.appEvent('show-modal', { - src: './app/features/dashboard/partials/shareModal.html', - scope: $scope.$new(), - }); - }; - - }); - -}); diff --git a/public/app/features/playlist/partials/playlist.html b/public/app/features/playlist/partials/playlist.html index 2aad080f348..bf5fe4fd485 100644 --- a/public/app/features/playlist/partials/playlist.html +++ b/public/app/features/playlist/partials/playlist.html @@ -1,9 +1,3 @@ - - - - - -
  • New
    • diff --git a/public/app/partials/dashboard.html b/public/app/partials/dashboard.html index 3234903ff8c..4c5336b88f6 100644 --- a/public/app/partials/dashboard.html +++ b/public/app/partials/dashboard.html @@ -1,7 +1,6 @@ -
    +
    -
    -
    +
    diff --git a/public/less/navbar.less b/public/less/navbar.less index 89bf2155555..619a1cd6a71 100644 --- a/public/less/navbar.less +++ b/public/less/navbar.less @@ -8,11 +8,6 @@ .fa { font-size: 115%; } } -.top-nav { - float: left; - font-size: 16px; -} - .fa.top-nav-breadcrumb-icon { margin: 18px 0 6px 5px; float: left; @@ -29,10 +24,10 @@ border-right: 1px solid @grafanaTargetBorder; .fa-caret-down { - font-size: 50%; + font-size: 55%; position: absolute; - right: 7px; - top: 21px; + right: 8px; + top: 23px; } a {