IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'new_top_menu_design' into pro

Browse Source 
Conflicts:
	src/app/partials/sidemenu.html
This commit is contained in:
Torkel Ödegaard 2015-02-01 15:46:08 +01:00
commit d272b0f56d
30 changed files with 756 additions and 603 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/controllers/grafanaCtrl.js
View File

@ -10,7 +10,7 @@ function (angular, config, _, $, store) {
var module = angular.module('grafana.controllers');
module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv) {
module.controller('GrafanaCtrl', function($scope, alertSrv, utilSrv, grafanaVersion, $rootScope, $controller, userSrv, $timeout) {
$scope.init = function() {
$scope.grafana = {};
@ -30,6 +30,7 @@ function (angular, config, _, $, store) {
$scope.grafana.style = 'dark';
$scope.grafana.user = userSrv.getSignedInUser();
$scope.grafana.sidemenu = store.getBool('grafana.sidemenu');
$scope.topnav = { title: 'Grafana' };
$scope.onAppEvent('logged-out', function() {
$scope.grafana.sidemenu = false;
@ -44,6 +45,10 @@ function (angular, config, _, $, store) {
$scope.toggleSideMenu = function() {
$scope.grafana.sidemenu = !$scope.grafana.sidemenu;
store.set('grafana.sidemenu', $scope.grafana.sidemenu);
$timeout(function() {
$scope.$broadcast("render");
}, 50);
};
$rootScope.onAppEvent = function(name, callback) {

53
src/app/controllers/sidemenuCtrl.js
View File

@ -17,17 +17,16 @@ function (angular, _, $, config) {
$scope.menu = [];
$scope.menu.push({
text: "Dashbord",
text: "Dashbords",
icon: "fa fa-th-large",
href: $scope.getUrl("/"),
startsWith: config.appSubUrl + '/dashboard/',
icon: "fa fa-th-large",
links: [
{ text: 'Settings', editview: 'settings'},
{ text: 'Templating', editview: 'templating'},
{ text: 'Annotations', editview: 'annotations'},
{ text: 'Export', href:""},
{ text: 'JSON', href:""},
]
});
$scope.menu.push({
text: "Data Sources",
icon: "fa fa-database",
href: $scope.getUrl("/account/datasources"),
});
if ($scope.grafana.user.accountRole === 'Admin') {
@ -35,12 +34,16 @@ function (angular, _, $, config) {
text: "Account", href: $scope.getUrl("/account"),
requireRole: "Admin",
icon: "fa fa-shield",
links: [
{ text: 'Info', href: $scope.getUrl("/account")},
{ text: 'Data sources', href: $scope.getUrl("/account/datasources")},
{ text: 'Users', href: $scope.getUrl("/account/users")},
{ text: 'API Keys', href: $scope.getUrl("/account/apikeys")},
]
});
$scope.menu.push({
text: "Users", href: $scope.getUrl("/account/users"),
requireRole: "Admin",
icon: "fa fa-users",
});
$scope.menu.push({
text: "API Keys", href: $scope.getUrl("/account/apikeys"),
requireRole: "Admin",
icon: "fa fa-key",
});
}
@ -48,11 +51,6 @@ function (angular, _, $, config) {
$scope.menu.push({
text: "Profile", href: $scope.getUrl("/profile"),
icon: "fa fa-user",
requireSignedIn: true,
links: [
{ text: 'Info', href: $scope.getUrl("/profile"), icon: "fa fa-sitemap" },
{ text: 'Password', href:"", icon: "fa fa-lock" },
]
});
}
@ -69,6 +67,14 @@ function (angular, _, $, config) {
});
}
if ($scope.grafana.user.isSignedIn) {
$scope.menu.push({
text: "Sign out", href: $scope.getUrl("/logout"),
target: "_self",
icon: "fa fa-sign-out",
});
}
$scope.onAppEvent('$routeUpdate', function() {
$scope.updateState();
});
@ -80,18 +86,21 @@ function (angular, _, $, config) {
$scope.updateState = function() {
var currentPath = config.appSubUrl + $location.path();
var search = $location.search();
var activeIndex;
_.each($scope.menu, function(item) {
_.each($scope.menu, function(item, index) {
item.active = false;
if (item.href === currentPath) {
item.active = true;
activeIndex = index;
}
if (item.startsWith) {
if (currentPath.indexOf(item.startsWith) === 0) {
item.active = true;
item.href = currentPath;
activeIndex = index;
}
}
@ -114,6 +123,8 @@ function (angular, _, $, config) {
}
});
});
//$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]);
};
$scope.init = function() {

1
src/app/directives/all.js
View File

@ -16,4 +16,5 @@ define([
'./graphiteSegment',
'./grafanaVersionCheck',
'./dropdown.typeahead',
'./topnav',
], function () {});

15
src/app/directives/dashEditLink.js
View File

@ -6,9 +6,9 @@ function (angular, $) {
'use strict';
var editViewMap = {
'settings': 'app/partials/dasheditor.html',
'annotations': 'app/features/annotations/partials/editor.html',
'templating': 'app/partials/templating_editor.html',
'settings': { src: 'app/partials/dasheditor.html', title: "Settings" },
'annotations': { src: 'app/features/annotations/partials/editor.html', title: "Annotations" },
'templating': { src: 'app/partials/templating_editor.html', title: "Templating" }
};
angular
@ -55,7 +55,10 @@ function (angular, $) {
}
function showEditorPane(evt, payload, editview) {
if (editview) { payload.src = editViewMap[editview]; }
if (editview) {
scope.grafana.editview = editViewMap[editview];
payload.src = scope.grafana.editview.src;
}
if (lastEditor === payload.src) {
hideEditorPane();
@ -89,7 +92,7 @@ function (angular, $) {
hideScrollbars(true);
var src = "'" + payload.src + "'";
var view = $('<div class="dashboard-edit-view" ng-include="' + src + '"></div>');
var view = $('<div class="gf-box" ng-include="' + src + '"></div>');
elem.append(view);
$compile(elem.contents())(editorScope);
}
@ -98,10 +101,12 @@ function (angular, $) {
if (newValue) {
showEditorPane(null, {}, newValue);
} else if (oldValue) {
scope.grafana.editview = null;
hideEditorPane();
}
});
scope.grafana.editview = null;
scope.$on("$destroy", hideEditorPane);
scope.onAppEvent('hide-dash-editor', hideEditorPane);
scope.onAppEvent('show-dash-editor', showEditorPane);

51
src/app/directives/topnav.js Normal file
View File

@ -0,0 +1,51 @@
define([
'angular',
'kbn'
],
function (angular) {
'use strict';
angular
.module('grafana.directives')
.directive('topnav', function() {
return {
restrict: 'E',
transclude: true,
scope: {
title: "@",
section: "@",
titleAction: "&",
toggle: "&",
showMenuBtn: "=",
},
template:
'<div class="navbar navbar-static-top"><div class="navbar-inner"><div class="container-fluid">' +
'<div class="top-nav">' +
'<a class="top-nav-menu-btn pointer" ng-if="showMenuBtn" ng-click="toggle()">' +
'<img class="logo-icon" src="img/fav32.png"></img> ' +
'<i class="fa fa-angle-right"></i>' +
'</a>' +
'<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' +
'</span>' +
'<span class="top-nav-section" ng-show="section">' +
'{{section}}' +
'<i class="fa fa-angle-right"></i>' +
'</span>' +
'<a ng-click="titleAction()" class="top-nav-title">' +
'{{title}}' +
'<span class="small" ng-show="titleAction">' +
'<i class="fa fa-angle-down"></i>' +
'</span>' +
'</a>' +
'</div><div ng-transclude></div></div></div></div>',
link: function(scope, elem, attrs) {
scope.icon = attrs.icon;
}
};
});
});

13
src/app/features/account/partials/account.html
View File

@ -1,15 +1,8 @@
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<topnav toggle="toggleSideMenu()" title="Details" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="gf-box" style="min-height: 500px">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-shield"></i>
Account information
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="row editor-row">
<div class="section">
<form name="accountForm">

18
src/app/features/account/partials/apikeys.html
View File

@ -1,15 +1,13 @@
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<topnav toggle="toggleSideMenu()"
title="API Keys"
icon="fa fa-shield"
section="Account"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="gf-box" style="min-height: 500px">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-key"></i>
API Tokens
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
<form name="addTokenrForm" class="form-inline tight-form">

237
src/app/features/account/partials/datasources.html
View File

@ -1,127 +1,120 @@
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<topnav toggle="toggleSideMenu()"
title="Data sources"
icon="fa fa-shield"
section="Account"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="editor-row">
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-sitemap"></i>
Data sources
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
</div>
</div>
</div>
<form name="editForm">
<div class="dashboard-editor-body">
<div class="editor-row row" ng-if="editor.index == 0">
<div class="span8">
<div ng-if="datasources.length === 0">
<em>No datasources defined</em>
</div>
<table class="grafana-options-table" ng-if="datasources.length > 0">
<tr>
<td><strong>Name<strong></td>
<td><strong>Url<strong></td>
<td><strong><strong></td>
<td><strong><strong></td>
<td><strong><strong></td>
</tr>
<tr ng-repeat="ds in datasources">
<td style="width:1%">
<i class="fa fa-database"></i> &nbsp;
{{ds.name}}
</td>
<td style="width:90%">
{{ds.url}}
</td>
<td style="width:2%" class="text-center">
<span ng-if="ds.isDefault">
<span class="label label-info">default</span>
</span>
</td>
<td style="width: 1%">
<a ng-click="edit(ds)" class="btn btn-success btn-mini">
<i class="fa fa-edit"></i>
Edit
</a>
</td>
<td style="width: 1%">
<a ng-click="remove(ds)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row">
<div class="editor-option">
<label class="small">Data source name</label>
<input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f.type as f.name for f in types" ng-change="typeChanged()"></select>
</div>
<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool>
</div>
<div class="editor-row">
<div class="editor-option">
<label class="small">Url</label>
<input type="text" class="input-xxlarge" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
</div>
<div class="editor-option">
<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</div>
</div>
<div class="editor-row" ng-if="current.type === 'influxdb'">
<div class="section">
<h5>InfluxDB Details</h5>
<div class="editor-option">
<label class="small">Database name</label>
<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
</div>
<div class="editor-option">
<label class="small">User</label>
<input type="text" class="input-large" ng-model='current.user' placeholder=""></input>
</div>
<div class="editor-option">
<label class="small">Password</label>
<input type="password" class="input-large" ng-model='current.password' placeholder=""></input>
</div>
</div>
</div>
<div class="editor-row" ng-if="current.type === 'elasticsearch'">
<div class="section">
<h5>Elastic search details</h5>
<div class="editor-option">
<label class="small">Index name</label>
<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
</div>
</div>
</div>
</div>
<div class="dashboard-editor-footer" style="margin-top: 20px">
<button type="submit" class="btn btn-success" ng-show="editor.index === 1" ng-click="add()">Add</button>
<button type="submit" class="btn btn-success" ng-show="editor.index === 2 && !currentIsNew" ng-click="update()">Update</button>
<button type="submit" class="btn btn-info" ng-show="editor.index === 2 && !currentIsNew" ng-click="cancel()">Cancel</button>
</div>
</form>
<div class="gf-box" style="min-height: 500px">
<div class="gf-box-header">
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
</div>
</div>
</div>
<form name="editForm">
<div class="gf-box-body">
<div class="editor-row row" ng-if="editor.index == 0">
<div class="span8">
<div ng-if="datasources.length === 0">
<em>No datasources defined</em>
</div>
<table class="grafana-options-table" ng-if="datasources.length > 0">
<tr>
<td><strong>Name</strong></td>
<td><strong>Url</strong></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr ng-repeat="ds in datasources">
<td style="width:1%">
<i class="fa fa-database"></i> &nbsp;
{{ds.name}}
</td>
<td style="width:90%">
{{ds.url}}
</td>
<td style="width:2%" class="text-center">
<span ng-if="ds.isDefault">
<span class="label label-info">default</span>
</span>
</td>
<td style="width: 1%">
<a ng-click="edit(ds)" class="btn btn-success btn-mini">
<i class="fa fa-edit"></i>
Edit
</a>
</td>
<td style="width: 1%">
<a ng-click="remove(ds)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row">
<div class="editor-option">
<label class="small">Data source name</label>
<input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f.type as f.name for f in types" ng-change="typeChanged()"></select>
</div>
<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool>
</div>
<div class="editor-row">
<div class="editor-option">
<label class="small">Url</label>
<input type="text" class="input-xxlarge" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
</div>
<div class="editor-option">
<label class="small">Access method <tip>Direct = url is used directly from browser, Proxy = Grafana backend will proxy the request</label>
<select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
</div>
</div>
<div class="editor-row" ng-if="current.type === 'influxdb'">
<div class="section">
<h5>InfluxDB Details</h5>
<div class="editor-option">
<label class="small">Database name</label>
<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
</div>
<div class="editor-option">
<label class="small">User</label>
<input type="text" class="input-large" ng-model='current.user' placeholder=""></input>
</div>
<div class="editor-option">
<label class="small">Password</label>
<input type="password" class="input-large" ng-model='current.password' placeholder=""></input>
</div>
</div>
</div>
<div class="editor-row" ng-if="current.type === 'elasticsearch'">
<div class="section">
<h5>Elastic search details</h5>
<div class="editor-option">
<label class="small">Index name</label>
<input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
</div>
</div>
</div>
</div>
<div class="dashboard-editor-footer" style="margin-top: 20px">
<button type="submit" class="btn btn-success" ng-show="editor.index === 1" ng-click="add()">Add</button>
<button type="submit" class="btn btn-success" ng-show="editor.index === 2 && !currentIsNew" ng-click="update()">Update</button>
<button type="submit" class="btn btn-info" ng-show="editor.index === 2 && !currentIsNew" ng-click="cancel()">Cancel</button>
</div>
</form>
</div>
</div>

13
src/app/features/account/partials/users.html
View File

@ -1,15 +1,8 @@
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Account'"></div>
<topnav toggle="toggleSideMenu()" title="Users" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu"></topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="gf-box" style="min-height: 500px">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-users"></i>
Users
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">

28
src/app/features/admin/partials/admin.html
View File

@ -1,23 +1,9 @@
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin'"></div>
<topnav toggle="toggleSideMenu()"
title="Users"
icon="fa fa-cube"
section="Admin"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="editor-row">
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-instiution"></i>
System administration
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Settings','Users', 'Log', 'Audit']" data-title="{{tab}}">
</div>
</div>
</div>
</div>
</div>
</div>
<div class="gf-box" style="min-height: 500px">
</div>

12
src/app/features/admin/partials/users.html
View File

@ -1,9 +1,13 @@
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin > Users'"></div>
<topnav toggle="toggleSideMenu()"
title="Users"
icon="fa fa-cube"
section="Admin"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-edit-view" style="min-height: 500px">
<div class="dashboard-editor-body">
<div class="gf-box" style="min-height: 500px">
<div class="gf-box-body">
<div class="editor-row row">
<div class="section span6">
<table class="grafana-options-table">

20
src/app/features/annotations/partials/editor.html
View File

@ -1,7 +1,7 @@
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-bolt"></i>
Annotations
</div>
@ -10,10 +10,12 @@
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="editor-row row" ng-if="editor.index == 0">
<div class="span6">
<div ng-if="annotations.length === 0">
@ -71,12 +73,10 @@
<div ng-include src="currentDatasource.editorSrc">
</div>
<div class="dashboard-editor-footer">
<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>
<button ng-show="editor.index === 2" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
</div>
</div>
</div>
<div class="dashboard-editor-footer">
<button ng-show="editor.index === 1" type="button" class="btn btn-success" ng-click="add()">Add</button>
<button ng-show="editor.index === 2" type="button" class="btn btn-success pull-left" ng-click="update();">Update</button>
<button type="button" class="btn btn-success pull-right" ng-click="close_edit();dismiss();dashboard.refresh();">Close</button>
</div>
</div>

3
src/app/features/dashboard/dashboardCtrl.js
View File

@ -61,6 +61,9 @@ function (angular, $, config, _) {
$scope.setWindowTitleAndTheme = function() {
window.document.title = config.window_title_prefix + $scope.dashboard.title;
$scope.grafana.style = $scope.dashboard.style;
$scope.topnav.title = $scope.dashboard.title;
$scope.topnav.icon = "fa fa-th-large";
$scope.topnav.titleAction = function() { alert("hej"); };
};
$scope.isPanel = function(obj) {

6
src/app/features/dashboard/dashboardNavCtrl.js
View File

@ -22,7 +22,6 @@ function (angular, _, moment, config, store) {
$scope.onAppEvent('zoom-out', function() {
$scope.zoom(2);
});
};
$scope.set_default = function() {
@ -35,6 +34,11 @@ function (angular, _, moment, config, store) {
alertSrv.set('Local Default Clear','Your default dashboard has been reset to the default','success', 5000);
};
$scope.openEditView = function(editview) {
var search = _.extend($location.search(), {editview: editview});
$location.search(search);
};
$scope.saveForSharing = function() {
var clone = angular.copy($scope.dashboard);
clone.temp = true;

115
src/app/features/profile/partials/profile.html
View File

@ -1,17 +1,23 @@
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Profile'"></div>
<topnav toggle="toggleSideMenu()"
title="Details"
icon="fa fa-user"
section="Profile"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-edit-view">
<div class="editor-row">
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<div class="editor-row">
<div class="section">
<div class="gf-box">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-user"></i>
Personal information
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="row">
<form name="userForm">
<div>
@ -56,65 +62,66 @@
</div>
</div>
</div>
</div>
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-cubes"></i>
<div class="section">
<div class="gf-box">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-shield"></i>
Your accounts
</div>
</div>
<br>
<table class="grafana-options-table">
<tr ng-repeat="ac in accounts">
<td>Name: {{ac.name}}</td>
<td>Role: {{ac.role}}</td>
<td ng-show="ac.isUsing">
<span class="label label-info">
active now
</span>
</td>
<td ng-show="!ac.isUsing">
<a ng-click="setUsingAccount(ac)" class="btn btn-success btn-mini">
Select
</a>
</td>
</tr>
</table>
<div class="gf-box-body">
<table class="grafana-options-table">
<tr ng-repeat="ac in accounts">
<td>Name: {{ac.name}}</td>
<td>Role: {{ac.role}}</td>
<td ng-show="ac.isUsing">
<span class="label label-info">
active now
</span>
</td>
<td ng-show="!ac.isUsing">
<a ng-click="setUsingAccount(ac)" class="btn btn-success btn-mini">
Select
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<div class="section">
<div class="gf-box">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-plus-square"></i>
Add account
</div>
</div>
<br>
<form name="form">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
<strong>Account name</strong>
</li>
<li>
<input type="text" ng-model="newAccount.name" required class="input-xlarge tight-form-input" placeholder="account name">
</li>
<li>
<button class="btn btn-success tight-form-btn" ng-click="createAccount()">Create</button>
</li>
</ul>
<div class="clearfix"></div>
</div>
</form>
<div class="gf-box-body">
<form name="form">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
<strong>Account name</strong>
</li>
<li>
<input type="text" ng-model="newAccount.name" required class="input-xlarge tight-form-input" placeholder="account name">
</li>
<li>
<button class="btn btn-success tight-form-btn" ng-click="createAccount()">Create</button>
</li>
</ul>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

2
src/app/panels/timepicker/editor.html
View File

@ -1,5 +1,6 @@
<div class="editor-row">
<div class="section">
<div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 148px">
@ -34,6 +35,7 @@
</ul>
<div class="clearfix"></div>
</div>
</div>
<p>
<br>

1
src/app/panels/timepicker/module.html
View File

@ -21,6 +21,7 @@
<li class="dropdown">
<a class="dropdown-toggle timepicker-dropdown" data-toggle="dropdown" href="" bs-tooltip="time.tooltip" data-placement="bottom" ng-click="dismiss();">
<i class="fa fa-clock-o"></i>
<span ng-bind="time.rangeString"></span>
<span ng-show="dashboard.refresh" class="text-warning">refreshed every {{dashboard.refresh}} </span>
<i class="fa fa-caret-down"></i>

62
src/app/partials/dashboard_topnav.html
View File

@ -1,20 +1,44 @@
<div class="navbar navbar-static-top" ng-controller='DashboardNavCtrl' ng-init="init()">
<div class="navbar-inner">
<div class="container-fluid">
<span class="hamburger">
<a class="pointer" ng-click="toggleSideMenu()">
<i class="fa fa-bars"></i>
<div class="top-nav">
<a class="pointer top-nav-menu-btn" ng-if="!grafana.sidemenu" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="fa fa-angle-right"></i>
</a>
</span>
<span class="brand">
<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
<a ng-click="openSearch()" class="page-title">
{{dashboard.title}}
<span class="small">
<i class="fa fa-angle-down"></i>
</span>
<a class="top-nav-dashboards-btn pointer" ng-click="openSearch()">
<i class="fa fa-th-large"></i>
<i class="fa fa-angle-down"></i>
</a>
</span>
<a ng-click="asd()" class="top-nav-title pointer">
{{dashboard.title}}
</a>
</div>
<ul class="nav pull-left">
<li>
<a class="pointer" ng-click="starDashboard()"><i class="fa fa-star-o" style="color: orange;"></i></a>
</li>
<li>
<a class="pointer" ng-click="asd()"><i class="fa fa-share-square-o"></i></a>
</li>
<li>
<a ng-click="saveDashboard()"><i class="fa fa-save"></i></a>
</li>
<li class="dropdown">
<a class="pointer" data-toggle="dropdown"><i class="fa fa-cog"></i></a>
<ul class="dropdown-menu">
<li><a class="pointer" ng-click="openEditView('settings');">Settings</a></li>
<li><a class="pointer" ng-click="openEditView('annotations');">Annotations</a></li>
<li><a class="pointer" ng-click="openEditView('templating');">Templating</a></li>
<li><a class="pointer" ng-click="openEditView('settings');">Export</a></li>
<li><a class="pointer" ng-click="openEditView('settings');">View JSON</a></li>
</ul>
</li>
</ul>
<ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen">
@ -28,14 +52,12 @@
</grafana-simple-panel>
</li>
<li class="dropdown grafana-menu-save">
<a bs-tooltip="'Save'" data-placement="bottom" class="dropdown-toggle" data-toggle="dropdown" ng-click="saveDashboard()">
<i class='fa fa-save'></i>
</a>
</li>
<!-- <li class="grafana&#45;menu&#45;home"><a bs&#45;tooltip="'Goto saved default'" data&#45;placement="bottom" href='#/'><i class='fa fa&#45;home'></i></a></li> -->
<!-- <li class="dropdown grafana&#45;menu&#45;save"> -->
<!-- <a bs&#45;tooltip="'Save'" data&#45;placement="bottom" class="dropdown&#45;toggle" data&#45;toggle="dropdown" ng&#45;click="saveDashboard()"> -->
<!-- <i class='fa fa&#45;save'></i> -->
<!-- </a> -->
<!-- </li> -->
<!-- -->
<li class="grafana-menu-stop-playlist hide">
<a class='small' ng-click='stopPlaylist(2)'>
Stop playlist

16
src/app/partials/dasheditor.html
View File

@ -1,7 +1,7 @@
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-cogs"></i>
Dashboard settings
Settings
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
@ -11,9 +11,13 @@
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div ng-if="editor.index == 0">
<div class="editor-row">
@ -93,7 +97,7 @@
<div class="clearfix"></div>
</div>
<div class="dashboard-editor-footer">
<div class="gf-box-footer">
<div class="grafana-version-info" ng-show="editor.index === 0">
<span class="editor-option small">
Grafana version: {{grafana.version}} &nbsp;&nbsp;
@ -101,6 +105,4 @@
<span grafana-version-check>
</span>
</div>
<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();reset_panel();dashboard.emit_refresh()">Close</button>
</div>

15
src/app/partials/navbar.html
View File

@ -1,15 +1,12 @@
<div class="navbar navbar-static-top">
<div class="navbar-inner">
<div class="container-fluid">
<span class="hamburger">
<a class="pointer" ng-click="toggleSideMenu()">
<i class="fa fa-bars"></i>
</a>
</span>
<span class="brand">
<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
<span class="page-title">{{pageTitle}}</span>
</span>
<topnav toggle="toggleSideMenu()"
title="{{pageTitle}}"
icon="{{pageIcon}}"
section="{{pageSection}}"
show-menu-btn="!grafana.sidemenu">
</topnav>
</div>
</div>
</div>

51
src/app/partials/sidemenu.html
View File

@ -1,28 +1,37 @@
<div ng-controller="SideMenuCtrl" ng-init="init()">
<div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu">
<li class="dropdown" ng-if="grafana.user.isSignedIn">
<a class="sidemenu-user pointer" data-toggle="dropdown" title="{{grafana.user.email}}">
<span class="gravatar-missing">f</span>
<img ng-src="{{grafana.user.gravatarUrl}}" width="35">
<span class="gravatar-email small">{{grafana.user.login}}</span>
<li style="margin-bottom: 15px;">
<a class="pointer sidemenu-top-btn" ng-click="toggleSideMenu()">
<img class="logo-icon" src="img/fav32.png"></img>
<i class="pull-right fa fa-angle-left"></i>
</a>
<ul class="dropdown-menu">
<li><a href="{{appSubUrl}}/logout" target="_self">Logout</a></li>
</ul>
</li>
<li ng-if="!grafana.user.isSignedIn">
<a href="login" class="sidemenu-item"><i class="fa fa-sign-in"></i>Sign in</a>
</li>
<li ng-repeat-start="item in menu" ng-class="{'active': item.active}">
<a href="{{item.href}}" class="sidemenu-item"><i class="{{item.icon}}"></i>{{item.text}}</a>
</li>
<li ng-repeat-end ng-if="item.active">
<ul class="sidemenu-links">
<li ng-repeat="link in item.links">
<a href="{{link.href}}" class="sidemenu-link" ng-class="{active: link.active}"><i class="fa fa-angle-right"></i>{{link.text}}</a>
</li>
</ul>
<li ng-repeat="item in menu" ng-class="{'active': item.active}">
<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
<span class="sidemenu-item-text">{{item.text}}</span>
</a>
</li>
<!-- <li ng&#45;repeat&#45;end ng&#45;if="item.active"> -->
<!-- <ul class="sidemenu&#45;links"> -->
<!-- <li ng&#45;repeat="link in item.links"> -->
<!-- <a href="{{link.href}}" class="sidemenu&#45;link" ng&#45;class="{active: link.active}"><i class="fa fa&#45;angle&#45;right"></i>{{link.text}}</a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </li> -->
<!-- <li class="dropdown" ng&#45;if="grafana.user.isSignedIn"> -->
<!-- <a class="sidemenu&#45;user pointer" data&#45;toggle="dropdown" title="{{grafana.user.email}}"> -->
<!-- <span class="gravatar&#45;missing">f</span> -->
<!-- <img ng&#45;src="{{grafana.user.gravatarUrl}}" width="35"> -->
<!-- <span class="gravatar&#45;email small">{{grafana.user.login}}</span> -->
<!-- </a> -->
<!-- <ul class="dropdown&#45;menu"> -->
<!-- <li><a href="{{appSubUrl}}/?logout">Logout</a></li> -->
<!-- </ul> -->
<!-- </li> -->
</ul>
</div>

14
src/app/partials/submenu.html
View File

@ -1,20 +1,6 @@
<div class="submenu-controls" ng-controller="SubmenuCtrl">
<div class="tight-form" style="border-top: none">
<ul class="tight-form-list">
<li class="tight-form-item">
<div class="dropdown">
<a class="pointer" data-toggle="dropdown">
<i class="fa fa-cog"></i>
</a>
<ul class="dropdown-menu">
<li><a class="pointer" dash-editor-link="app/partials/templating_editor.html">Templating</a></li>
<li><a class="pointer" dash-editor-link="app/features/annotations/partials/editor.html">Annotations</a></li>
</ul>
</div>
</li>
</ul>
<ul class="tight-form-list" ng-if="dashboard.templating.enable">
<li ng-repeat-start="variable in variables" class="tight-form-item template-param-name">
<span class="template-variable ">

173
src/app/partials/templating_editor.html
View File

@ -1,17 +1,23 @@
<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<div ng-controller="TemplateEditorCtrl" ng-init="init()">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-code"></i>
Templating
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Variables', 'Add', 'Edit']" data-title="{{tab}}">
</div>
</div>
<button class="gf-box-header-close-btn" ng-click="dismiss();dashboard.refresh();">
<i class="fa fa-remove"></i>
</button>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div ng-if="editor.index == 0">
@ -50,104 +56,97 @@
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="row">
<div class="editor-option">
<div class="editor-option">
<div class="editor-row">
<div class="editor-option">
<label class="small">Variable name</label>
<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</div>
<div class="editor-option" ng-show="current.type === 'query'">
<label class="small">Datasource</label>
<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
model="current.refresh"></editor-opt-bool>
</div>
<div ng-show="current.type === 'interval'">
<div class="editor-row">
<div class="editor-option">
<label class="small">Variable name</label>
<input type="text" class="input-medium" ng-model='current.name' placeholder="name" required></input>
</div>
<div class="editor-option">
<label class="small">Type</label>
<select class="input-medium" ng-model="current.type" ng-options="f for f in ['query', 'interval', 'custom']" ng-change="typeChanged()"></select>
</div>
<div class="editor-option" ng-show="current.type === 'query'">
<label class="small">Datasource</label>
<select class="input input-medium" ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
<editor-opt-bool text="Refresh on load" show-if="current.type === 'query'"
tip="Check if you want values to be updated on dashboard load, will slow down dashboard load time"
model="current.refresh"></editor-opt-bool>
</div>
<div ng-show="current.type === 'interval'">
<div class="editor-row">
<div class="editor-option">
<label class="small">Values</label>
<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="name"></input>
</div>
</div>
<div class="editor-row">
<editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
<div class="editor-option" ng-show="current.auto">
<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</div>
<label class="small">Values</label>
<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="name"></input>
</div>
</div>
<div ng-show="current.type === 'custom'">
<div class="editor-row">
<div class="editor-option">
<label class="small">Values seperated by comma</label>
<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
</div>
</div>
<div ng-show="current.type === 'query'">
<div class="editor-row">
<div class="editor-option form-inline">
<label class="small">Variable values query</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="fa fa-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin: 15px 0">
<div class="editor-option form-inline">
<label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label>
<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="fa fa-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin: 15px 0">
<editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All format</label>
<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
</div>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All value</label>
<input type="text" class="input-xlarge" ng-model='current.options[0].value'></input>
</div>
<div class="editor-row">
<editor-opt-bool text="Include auto interval" model="current.auto" change="runQuery()"></editor-opt-bool>
<div class="editor-option" ng-show="current.auto">
<label class="small">Auto interval steps <tip>How many steps, roughly, the interval is rounded and will not always match this count<tip></label>
<select class="input-mini" ng-model="current.auto_count" ng-options="f for f in [3,5,10,30,50,100,200]" ng-change="runQuery()"></select>
</div>
</div>
</div>
<div class="editor-option">
<div ng-show="current.type === 'custom'">
<div class="editor-row">
<div class="editor-option" >
<label class="small">Variable values (showing 20/{{current.options.length}})</label>
<ul class="grafana-options-list">
<li ng-repeat="option in current.options | limitTo: 20">
{{option.text}}
</li>
</ul>
<div class="editor-option">
<label class="small">Values seperated by comma</label>
<input type="text" class="input-xxlarge" ng-model='current.query' ng-blur="runQuery()" placeholder="1, 10, 20, myvalue"></input>
</div>
</div>
</div>
<div ng-show="current.type === 'query'">
<div class="editor-row">
<div class="editor-option form-inline">
<label class="small">Variable values query</label>
<input type="text" class="input-xxlarge" ng-model='current.query' placeholder="apps.servers.*"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'Execute query'" data-placement="right"><i class="fa fa-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin: 15px 0">
<div class="editor-option form-inline">
<label class="small">regex (optional, if you want to extract part of a series name or metric node segment)</label>
<input type="text" class="input-xxlarge" ng-model='current.regex' placeholder="/.*-(.*)-.*/"></input>
<button class="btn btn-small btn-success" ng-click="runQuery()" bs-tooltip="'execute query'" data-placement="right"><i class="fa fa-play"></i></button>
</div>
</div>
<div class="editor-row" style="margin: 15px 0">
<editor-opt-bool text="All option" model="current.includeAll" change="runQuery()"></editor-opt-bool>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All format</label>
<select class="input-medium" ng-model="current.allFormat" ng-change="runQuery()" ng-options="f for f in ['glob', 'wildcard', 'regex wildcard', 'regex values']"></select>
</div>
<div class="editor-option" ng-show="current.includeAll">
<label class="small">All value</label>
<input type="text" class="input-xlarge" ng-model='current.options[0].value'></input>
</div>
</div>
</div>
</div>
<div class="editor-option">
<div class="editor-row">
<div class="editor-option" >
<label class="small">Variable values (showing 20/{{current.options.length}})</label>
<ul class="grafana-options-list">
<li ng-repeat="option in current.options | limitTo: 20">
{{option.text}}
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="add();">Add</button>
<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
<button type="button" class="btn btn-success" ng-show="editor.index === 2" ng-click="update();">Update</button>
<button type="button" class="btn btn-success" ng-show="editor.index === 1" ng-click="add();">Add</button>
</div>
</div>

2
src/css/less/bootswatch.dark.less
View File

@ -212,7 +212,7 @@ div.subnav {
.nav-tabs {
border-bottom: 1px solid @fullEditBorder;
border-bottom: none;
& > li > a {
.border-radius(0);

57
src/css/less/gfbox.less Normal file
View File

@ -0,0 +1,57 @@
.gf-box {
margin: 15px;
background-color: @grafanaPanelBackground;
position: relative;
border: 1px solid @grafanaTargetFuncBackground;
}
.gf-box-header-close-btn {
float: right;
padding: 0;
margin: 0;
background-color: transparent;
border: none;
padding: 8px;
font-size: 120%;
color: @textColor;
&:hover {
color: @white;
}
}
.gf-box-body {
padding: 20px;
min-height: 150px;
}
.gf-box-footer {
overflow: hidden;
}
.gf-box-header {
border-bottom: 1px solid @grafanaTargetFuncBackground;
overflow: hidden;
background-color: @grafanaTargetBackground;
.tabs {
float: left;
}
.nav {
margin: 0;
}
}
.gf-box-title {
padding-right: 20px;
padding-left: 10px;
float: left;
color: @linkColor;
font-size: 18px;
font-weight: normal;
line-height: 38px;
margin: 0;
.fa {
padding: 0 8px 0 5px;
color: @textColor;
}
}

80
src/css/less/grafana.less
View File

@ -9,6 +9,9 @@
@import "forms.less";
@import "singlestat.less";
@import "tightform.less";
@import "sidemenu.less";
@import "gfbox.less";
@import "navbar.less";
.row-control-inner {
padding:0px;
@ -47,25 +50,6 @@
.logo-icon {
width: 24px;
padding: 13px 11px 0 0;
display: block;
float: left;
}
.navbar .brand {
margin-left: 0;
}
.hamburger {
float: left;
padding: 15px 0 14px 0;
font-size: 1.4em;
}
.page-title {
padding: 15px 0;
display: block;
float: left;
}
.row-button {
@ -81,24 +65,6 @@
top: 30%;
}
.grafana-search-metric-actions {
visibility: hidden;
padding-left: 20px;
}
.grafana-search-metric-name {
white-space: nowrap;
}
.grafana-search-metric-result:hover {
.grafana-search-metric-actions {
visibility: visible;
}
.grafana-search-metric-name {
color: @blue;
}
}
.dashboard-fullscreen {
.main-view-container {
overflow: hidden;
@ -254,46 +220,6 @@
max-width: 400px;
}
.dashboard-edit-view {
padding: 20px;
background-color: @grafanaPanelBackground;
position: relative;
}
.dashboard-editor-body {
padding: 20px 10px;
min-height: 100px;
}
.dashboard-editor-footer {
overflow: hidden;
}
.dashboard-editor-header {
overflow: hidden;
.tabs {
float: left;
}
.nav {
margin: 0;
}
}
.dashboard-editor-title {
border-bottom: 1px solid @fullEditBorder;
padding-right: 20px;
float: left;
color: @linkColor;
font-size: 20px;
font-weight: normal;
line-height: 38px;
margin: 0;
.fa {
padding: 0 8px 0 5px;
color: @textColor;
}
}
.grafana-version-info {
position: absolute;
bottom: 2px;

93
src/css/less/navbar.less Normal file
View File

@ -0,0 +1,93 @@
.navbar-inner {
padding-left: 0px;
}
.navbar .nav>li>a {
padding: 19px 15px 8px;
.fa { font-size: 130%; }
}
.top-nav {
float: left;
}
.top-nav-menu-btn {
display: block;
float: left;
padding: 11px 9px 11px 14px;
background: @grafanaTargetBackground;
border: 1px solid rgb(55, 54, 54);
i {
font-size: 160%;
color: darken(@gray, 15%);
padding: 0px 0px 0px 0px;
position: relative;
top: 4px;
}
&:hover {
background: lighten(@grafanaTargetBackground, 3%);
}
}
.top-nav-dashboards-btn {
display: block;
float: left;
padding: 15px 7px 9px 14px;
font-size: 1.4em;
font-weight: bold;
color: #a2a2a2;
margin: 0 18px 0 0;
border: 1px solid rgb(55, 54, 54);
border-left: none;
background: @grafanaTargetBackground;
.fa-th-large {
font-size: 123%;
}
.fa-angle-down {
position: relative;
top: 4px;
}
&:hover {
background: lighten(@grafanaTargetBackground, 3%);
.fa {
color: @textColor;
}
}
}
.top-nav-breadcrumb {
display: block;
float: left;
padding: 18px 9px 8px 12px;
font-size: 1.4em;
font-weight: bold;
color: darken(@gray, 10%);
i {
padding-left: 9px;
}
}
.top-nav-section {
display: block;
float: left;
padding: 19px 9px 8px 0;
font-weight: bold;
i {
padding-left: 8px;
}
}
.top-nav-title {
display: block;
float: left;
padding: 18px 10px 10px 0px;
font-size: 1.3em;
font-weight: bold;
i {
padding-left: 4px;
position: relative;
top: 2px;
}
}

95
src/css/less/p_pro.less
View File

@ -1,98 +1,3 @@
.pro-sidemenu {
display: none;
a:focus {
text-decoration: none;
}
}
.pro-sidemenu-open {
.pro-sidemenu {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
background: @bodyBackground;
border-right: 2px solid black;
min-height: 100%;
z-index: 101;
}
.dashboard-notice {
margin-left: 200px;
width: auto;
}
.pro-main-view {
padding-left: 200px;
}
.panel-fullscreen {
left: 200px;
}
}
.sidemenu {
list-style: none;
background: @grafanaPanelBackground;
margin: 0;
padding: 0;
}
.sidemenu-links {
margin: 0;
padding: 5px 0;
list-style: none;
background: @grafanaTargetFuncBackground;
li {
display: block;
}
}
.sidemenu-link {
display: block;
padding: 6px 0 6px 30px;
font-size: 15px;
color: @gray;
i {
padding-right: 15px;
}
&.active {
color: white;
font-weight: bold;
}
}
.sidemenu-user {
padding: 8px 10px 7px 15px;
display: block;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.gravatar-missing {
display: none;
}
.gravatar-email {
padding-left: 4px;
}
img {
width: 35px;
padding-right: 10px;
}
border-bottom: 1px solid black;
}
.sidemenu-item {
font-size: 17px;
padding: 14px 10px 14px 20px;
display: block;
i {
padding-right: 15px;
}
border-bottom: 1px solid black;
}
.login-form {
width: 50%;

100
src/css/less/sidemenu.less Normal file
View File

@ -0,0 +1,100 @@
.sidemenu-wrapper {
display: none;
a:focus {
text-decoration: none;
}
}
.sidemenu-open {
.sidemenu-wrapper {
display: block;
position: absolute;
top: 0;
left: 0;
width: 200px;
background: @bodyBackground;
min-height: 100%;
z-index: 101;
}
.dashboard-notice {
margin-left: 200px;
width: auto;
}
.main-view {
padding-left: 200px;
}
.panel-fullscreen {
left: 200px;
}
}
.sidemenu {
list-style: none;
margin: 0;
padding: 0;
}
.sidemenu-user {
padding: 8px 10px 7px 15px;
display: block;
width: 170px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.gravatar-missing {
display: none;
}
.gravatar-email {
padding-left: 4px;
}
img {
width: 35px;
padding-right: 10px;
}
border-bottom: 1px solid black;
}
.sidemenu-top-btn {
display: block;
padding: 14px 0px 10px 20px;
background: @grafanaTargetBackground;
border: 1px solid rgb(55, 54, 54);
i {
padding-right: 5px;
font-size: 170%;
color: @gray;
}
}
.sidemenu-icon {
border-radius: 50%;
background: black;
box-shadow: 0 0 10px 6px #2E2E2E;
width: 35px;
height: 35px;
display: inline-block;
i {
color: @textColor;
position: relative;
left: 9px;
top: 2px;
font-size: 120%;
}
}
.sidemenu-item {
color: @orange;
line-height: 34px;
font-weight: bold;
padding: 14px 10px 14px 20px;
display: block;
.sidemenu-item-text {
padding-left: 15px;
text-shadow: 1px 0px 10px @orange;
}
}

6
src/views/index.html
View File

@ -27,9 +27,9 @@
<body ng-cloak ng-controller="GrafanaCtrl">
<link rel="stylesheet" href="[[.AppSubUrl]]/css/grafana.light.min.css" ng-if="grafana.style === 'light'">
<div class="pro-container" ng-class="{'pro-sidemenu-open': grafana.sidemenu}">
<div class="main-view-wrapper" ng-class="{'sidemenu-open': grafana.sidemenu}">
<aside class="pro-sidemenu" ng-if="grafana.sidemenu">
<aside class="sidemenu-wrapper" ng-if="grafana.sidemenu">
<div ng-include="'app/partials/sidemenu.html'"></div>
</aside>
@ -43,7 +43,7 @@
</div>
</div>
<div ng-view class="pro-main-view"></div>
<div ng-view class="main-view"></div>
</div>