Skip to content

N
nexpie-grafana-theme
Commit 723be4f6 by Torkel Ödegaard
Options

refactoring(): unified dashboard top nav to a single dashnav component, uses new navbar component

parent 070af404
Showing with 125 additions and 203 deletions
public/app/core/components/navbar/navbar.html
<div class="navbar navbar-static-top">
<div class="navbar-inner"><div class="container-fluid">
<div class="top-nav">
<div class="top-nav-btn top-nav-menu-btn">
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="top-nav-logo-background">
<img class="logo-icon" src="img/fav32.png"></img>
</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
<div class="top-nav-btn top-nav-menu-btn">
<a class="pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="top-nav-logo-background">
<img class="logo-icon" src="img/fav32.png"></img>
</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
<span ng-if="ctrl.title">
<span class="icon-circle top-nav-icon">
<i ng-class="icon"></i>
<i ng-class="ctrl.icon"></i>
</span>
<a ng-href="{{titleUrl}}" class="top-nav-title">
<a ng-href="{{ctl.titleUrl}}" class="top-nav-title">
{{ctrl.title}}
</a>
<i ng-show="subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>
</div>
<i ng-show="ctrl.subnav" class="top-nav-breadcrumb-icon fa fa-angle-right"></i>
</span>
<div ng-transclude></div>
</div>
......
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;
}
};
}
......
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',
......
public/app/features/dashboard/all.js
define([
'./dashboardCtrl',
'./dashboardLoaderSrv',
'./dashboardNavCtrl',
'./snapshotTopNavCtrl',
'./dashnav/dashnav',
'./saveDashboardAsCtrl',
'./rowCtrl',
'./shareModalCtrl',
......
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();
};
......
public/app/features/dashboard/partials/dashboardTopNav.html → public/app/features/dashboard/dashnav/dashnav.html
<div class="navbar navbar-static-top" ng-controller='DashboardNavCtrl' ng-init="init()">
<div class="navbar-inner">
<div class="container-fluid">
<navbar>
<div class="top-nav">
<div class="top-nav-btn top-nav-menu-btn">
<a class="pointer" ng-click="contextSrv.toggleSideMenu()">
<span class="top-nav-logo-background">
<img class="logo-icon" src="img/fav32.png"></img>
</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
<div class="top-nav-btn top-nav-dashboards-btn" ng-if="!dashboardMeta.isSnapshot">
<a class="pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i>
<span class="dashboard-title">{{dashboard.title}}</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
<div class="top-nav-btn top-nav-dashboards-btn">
<a class="pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i>
<span class="dashboard-title">{{dashboard.title}}</span>
<i class="fa fa-caret-down"></i>
</a>
</div>
</div>
<div class="top-nav-snapshot-title" ng-if="dashboardMeta.isSnapshot">
<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom">
<i class="gf-icon gf-icon-snap-multi"></i>
<span class="dashboard-title">
{{dashboard.title}}
<em class="small">&nbsp;&nbsp;(snapshot)</em>
</span>
</a>
</div>
<ul class="nav pull-left top-nav-dash-actions">
<li ng-show="dashboardMeta.canStar">
<a class="pointer" ng-click="starDashboard()">
<i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred}" style="color: orange;"></i>
</a>
</li>
<li ng-show="dashboardMeta.canShare">
<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
</li>
<li ng-show="dashboardMeta.canSave">
<a ng-click="saveDashboard()" bs-tooltip="'Save dashboard'" data-placement="bottom"><i class="fa fa-save"></i></a>
</li>
<li ng-if="showSettingsMenu()" class="dropdown">
<a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Manage dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
<ul class="dropdown-menu">
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="exportDashboard();">Export</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="editJson();">View JSON</a></li>
<li ng-if="contextSrv.isEditor && !dashboard.editable"><a class="pointer" ng-click="makeEditable();">Make Editable</a></li>
<li ng-if="contextSrv.isEditor"><a class="pointer" ng-click="saveDashboardAs();">Save As...</a></li>
<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-left top-nav-dash-actions">
<li ng-show="dashboardMeta.canStar">
<a class="pointer" ng-click="starDashboard()">
<i class="fa" ng-class="{'fa-star-o': !dashboardMeta.isStarred, 'fa-star': dashboardMeta.isStarred}" style="color: orange;"></i>
</a>
</li>
<li ng-show="dashboardMeta.canShare">
<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
</li>
<li ng-show="dashboardMeta.canSave">
<a ng-click="saveDashboard()" bs-tooltip="'Save dashboard'" data-placement="bottom"><i class="fa fa-save"></i></a>
</li>
<li ng-if="showSettingsMenu" class="dropdown">
<a class="pointer" ng-click="hideTooltip($event)" bs-tooltip="'Manage dashboard'" data-placement="bottom" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
<ul class="dropdown-menu">
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="exportDashboard();">Export</a></li>
<li ng-if="dashboardMeta.canEdit"><a class="pointer" ng-click="editJson();">View JSON</a></li>
<li ng-if="contextSrv.isEditor && !dashboard.editable"><a class="pointer" ng-click="makeEditable();">Make Editable</a></li>
<li ng-if="contextSrv.isEditor"><a class="pointer" ng-click="saveDashboardAs();">Save As...</a></li>
<li ng-if="dashboardMeta.canSave"><a class="pointer" ng-click="deleteDashboard();">Delete dashboard</a></li>
</ul>
</li>
</ul>
<ul class="nav dash-playlist-actions" ng-if="playlistSrv">
<li>
<a ng-click="playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
</li>
<li>
<a ng-click="playlistSrv.stop()"><i class="fa fa-stop"></i></a>
</li>
<li>
<a ng-click="playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
</li>
</ul>
<ul class="nav dash-playlist-actions" ng-if="playlistSrv">
<li>
<a ng-click="playlistSrv.prev()"><i class="fa fa-step-backward"></i></a>
</li>
<li>
<a ng-click="playlistSrv.stop()"><i class="fa fa-stop"></i></a>
</li>
<li>
<a ng-click="playlistSrv.next()"><i class="fa fa-step-forward"></i></a>
</li>
</ul>
<ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen" class="back-to-dashboard-link">
<a ng-click="exitFullscreen()">
Back to dashboard
</a>
</li>
<li ng-if="dashboard">
<gf-time-picker dashboard="dashboard"></gf-time-picker>
</li>
</ul>
</div>
</div>
</div>
<ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen" class="back-to-dashboard-link">
<a ng-click="exitFullscreen()">
Back to dashboard
</a>
</li>
<li ng-if="dashboard">
<gf-time-picker dashboard="dashboard"></gf-time-picker>
</li>
</ul>
</navbar>
public/app/features/dashboard/dashboardNavCtrl.js → public/app/features/dashboard/dashnav/dashnav.ts
define([
'angular',
'lodash',
'vendor/filesaver'
],
function (angular, _) {
'use strict';
///<reference path="../../../headers/common.d.ts" />
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: &nbsp;' + moment(meta.created).calendar();
if (meta.expires) {
$scope.titleTooltip += '<br>Expires: &nbsp;' + moment(meta.expires).fromNow() + '<br>';
}
}
};
$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);
public/app/features/dashboard/partials/snapshotTopNav.html deleted 100644 → 0
<div class="navbar navbar-static-top" ng-controller='SnapshotTopNavCtrl' ng-init="init()">
<div class="navbar-inner">
<div class="container-fluid">
<div class="top-nav">
<a class="pointer top-nav-menu-btn" ng-if="!contextSrv.sidemenu" ng-click="contextSrv.toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="fa fa-bars"></i>
</a>
<div class="top-nav-snapshot-title">
<a class="pointer" bs-tooltip="titleTooltip" data-placement="bottom">
<i class="gf-icon gf-icon-snap-multi"></i>
<span class="dashboard-title">
{{dashboard.title}}
<em class="small">&nbsp;&nbsp;(snapshot)</em>
</span>
</a>
</div>
</div>
<ul class="nav pull-left top-nav-dash-actions">
<li>
<a class="pointer" ng-click="shareDashboard()" bs-tooltip="'Share dashboard'" data-placement="bottom"><i class="fa fa-share-square-o"></i></a>
</li>
</ul>
<ul class="nav pull-right">
<li ng-if="dashboard">
<gf-time-picker dashboard="dashboard"></gf-time-picker>
</li>
</ul>
</div>
</div>
</div>
public/app/features/dashboard/snapshotTopNavCtrl.js deleted 100644 → 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: &nbsp;' + moment(meta.created).calendar();
if (meta.expires) {
$scope.titleTooltip += '<br>Expires: &nbsp;' + moment(meta.expires).fromNow() + '<br>';
}
};
$scope.shareDashboard = function() {
$scope.appEvent('show-modal', {
src: './app/features/dashboard/partials/shareModal.html',
scope: $scope.$new(),
});
};
});
});
public/app/features/playlist/partials/playlist.html
<!-- <topnav icon="fa fa&#45;fw fa&#45;list" title="Playlists" title&#45;url="playlists" subnav="true"> -->
<!-- <ul class="nav"> -->
<!-- <li ng&#45;class="{active: isNew()}" ng&#45;show="isNew()"><a href="datasources/create">New</a></li> -->
<!-- <li class="active" ng&#45;show="!isNew()"><a href="playlists/edit/{{playlist.id}}">{{playlist.title}}</a></li> -->
<!-- </ul> -->
<!-- </topnav> -->
<navbar title="Playlists" title-url="playlists" icon="fa fa-fw fa-list" subnav="true">
<ul class="nav">
<li ng-class="{active: isNew()}" ng-show="isNew()"><a href="datasources/create">New</a></li>
......
public/app/partials/dashboard.html
<div body-class class="dashboard">
<div body-class class="dashboard" ng-if="dashboard">
<div ng-include src="topNavPartial">
</div>
<dashnav></dashnav>
<div dash-editor-view></div>
<div dash-search-view></div>
......
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 {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment