Skip to content

N
nexpie-grafana-theme
Commit 465c72d9 by Torkel Ödegaard
Options

More work on topnav and gf-box redesign

parent 59ade616
Showing with 262 additions and 242 deletions
src/app/controllers/grafanaCtrl.js
...@@ -10,7 +10,7 @@ function (angular, config, _, $, store) { ...@@ -10,7 +10,7 @@ function (angular, config, _, $, store) {
var module = angular.module('grafana.controllers'); 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.init = function() {
$scope.grafana = {}; $scope.grafana = {};
...@@ -45,6 +45,10 @@ function (angular, config, _, $, store) { ...@@ -45,6 +45,10 @@ function (angular, config, _, $, store) {
$scope.toggleSideMenu = function() { $scope.toggleSideMenu = function() {
$scope.grafana.sidemenu = !$scope.grafana.sidemenu; $scope.grafana.sidemenu = !$scope.grafana.sidemenu;
store.set('grafana.sidemenu', $scope.grafana.sidemenu); store.set('grafana.sidemenu', $scope.grafana.sidemenu);
$timeout(function() {
$scope.$broadcast("render");
}, 50);
}; };
$rootScope.onAppEvent = function(name, callback) { $rootScope.onAppEvent = function(name, callback) {
......
src/app/directives/topnav.js
...@@ -10,6 +10,53 @@ function (angular) { ...@@ -10,6 +10,53 @@ function (angular) {
.directive('topnav', function() { .directive('topnav', function() {
return { return {
restrict: 'E', 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">' +
'<span class="top-nav-menu-btn" ng-if="showMenuBtn">' +
'<a class="pointer" ng-click="toggle()">' +
'<img class="logo-icon" src="img/fav32.png"></img>' +
'<span>menu</span>' +
'</a>' +
'</span>' +
'<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' +
'<i class="fa fa-angle-right"></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;
}
};
});
angular
.module('grafana.directives')
.directive('topnavDash', function() {
return {
restrict: 'E',
transclude: true,
scope: { scope: {
title: "@", title: "@",
section: "@", section: "@",
...@@ -49,4 +96,5 @@ function (angular) { ...@@ -49,4 +96,5 @@ function (angular) {
}; };
}); });
}); });
src/app/features/account/partials/account.html
<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="gf-box-body">
<div class="dashboard-editor-title">
<i class="fa fa-shield"></i>
Account information
</div>
</div>
<div class="dashboard-editor-body">
<div class="row editor-row"> <div class="row editor-row">
<div class="section"> <div class="section">
<form name="accountForm"> <form name="accountForm">
......
src/app/features/account/partials/apikeys.html
<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="gf-box-body">
<div class="dashboard-editor-title">
<i class="fa fa-key"></i>
API Tokens
</div>
</div>
<div class="dashboard-editor-body">
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
<form name="addTokenrForm" class="form-inline tight-form"> <form name="addTokenrForm" class="form-inline tight-form">
......
src/app/features/account/partials/datasources.html
<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="gf-box" style="min-height: 500px">
<div class="editor-row"> <div class="gf-box-header">
<div class="section"> <div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
<div class="dashboard-editor-header"> </div>
<div class="dashboard-editor-title"> </div>
<i class="fa fa-sitemap"></i> </div>
Data sources
</div>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;"> <form name="editForm">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}"> <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> </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> </div>
<form name="editForm"> <div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="dashboard-editor-body"> <div class="editor-row">
<div class="editor-option">
<div class="editor-row row" ng-if="editor.index == 0"> <label class="small">Data source name</label>
<div class="span8"> <input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input>
<div ng-if="datasources.length === 0"> </div>
<em>No datasources defined</em> <div class="editor-option">
</div> <label class="small">Type</label>
<table class="grafana-options-table" ng-if="datasources.length > 0"> <select class="input-medium" ng-model="current.type" ng-options="f.type as f.name for f in types" ng-change="typeChanged()"></select>
<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>
<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool>
</div>
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)"> <div class="editor-row">
<div class="editor-row"> <div class="editor-option">
<div class="editor-option"> <label class="small">Url</label>
<label class="small">Data source name</label> <input type="text" class="input-xxlarge" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input>
<input type="text" class="input-large" ng-model='current.name' placeholder="production" required></input> </div>
</div> <div class="editor-option">
<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>
<label class="small">Type</label> <select class="input-medium" ng-model="current.access" ng-options="f for f in ['direct', 'proxy']"></select>
<select class="input-medium" ng-model="current.type" ng-options="f.type as f.name for f in types" ng-change="typeChanged()"></select> </div>
</div> </div>
<editor-opt-bool text="Mark as default" model="current.isDefault" change="render()"></editor-opt-bool>
</div>
<div class="editor-row"> <div class="editor-row" ng-if="current.type === 'influxdb'">
<div class="editor-option"> <div class="section">
<label class="small">Url</label> <h5>InfluxDB Details</h5>
<input type="text" class="input-xxlarge" ng-model='current.url' placeholder="http://my.graphite.com:8080" required></input> <div class="editor-option">
</div> <label class="small">Database name</label>
<div class="editor-option"> <input type="text" class="input-large" required ng-model='current.database' placeholder=""></input>
<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>
<div class="editor-option">
<div class="editor-row" ng-if="current.type === 'influxdb'"> <label class="small">User</label>
<div class="section"> <input type="text" class="input-large" ng-model='current.user' placeholder=""></input>
<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>
<div class="editor-row" ng-if="current.type === 'elasticsearch'"> <div class="editor-option">
<div class="section"> <label class="small">Password</label>
<h5>Elastic search details</h5> <input type="password" class="input-large" ng-model='current.password' placeholder=""></input>
<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> </div>
</div>
<div class="dashboard-editor-footer" style="margin-top: 20px"> <div class="editor-row" ng-if="current.type === 'elasticsearch'">
<button type="submit" class="btn btn-success" ng-show="editor.index === 1" ng-click="add()">Add</button> <div class="section">
<button type="submit" class="btn btn-success" ng-show="editor.index === 2 && !currentIsNew" ng-click="update()">Update</button> <h5>Elastic search details</h5>
<button type="submit" class="btn btn-info" ng-show="editor.index === 2 && !currentIsNew" ng-click="cancel()">Cancel</button> <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>
</form> <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> </div>
</div>
</form>
</div> </div>
</div> </div>
src/app/features/account/partials/users.html
<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="gf-box-body">
<div class="dashboard-editor-title">
<i class="fa fa-users"></i>
Users
</div>
</div>
<div class="dashboard-editor-body">
<div class="editor-row"> <div class="editor-row">
<div class="section"> <div class="section">
......
src/app/features/admin/partials/admin.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin'"></div> <topnav toggle="toggleSideMenu()"
title="Users"
<div class="dashboard-edit-view" style="min-height: 500px"> icon="fa fa-cube"
<div class="editor-row"> section="Admin"
<div class="section"> show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="dashboard-editor-header">
<div class="dashboard-editor-title"> <div class="gf-box" style="min-height: 500px">
<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> </div>
src/app/features/admin/partials/users.html
<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="gf-box" style="min-height: 500px">
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="editor-row row"> <div class="editor-row row">
<div class="section span6"> <div class="section span6">
<table class="grafana-options-table"> <table class="grafana-options-table">
......
src/app/features/profile/partials/profile.html
<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> <i class="fa fa-user"></i>
Personal information Personal information
</div> </div>
</div> </div>
<div class="dashboard-editor-body"> <div class="gf-box-body">
<div class="row"> <div class="row">
<form name="userForm"> <form name="userForm">
<div> <div>
...@@ -56,65 +63,66 @@ ...@@ -56,65 +63,66 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="section">
<div class="section"> <div class="gf-box">
<div class="dashboard-editor-header"> <div class="gf-box-header">
<div class="dashboard-editor-title"> <div class="gf-box-title">
<i class="fa fa-cubes"></i> <i class="fa fa-shield"></i>
Your accounts Your accounts
</div> </div>
</div> </div>
<br> <div class="gf-box-body">
<table class="grafana-options-table">
<table class="grafana-options-table"> <tr ng-repeat="ac in accounts">
<tr ng-repeat="ac in accounts"> <td>Name: {{ac.name}}</td>
<td>Name: {{ac.name}}</td> <td>Role: {{ac.role}}</td>
<td>Role: {{ac.role}}</td> <td ng-show="ac.isUsing">
<td ng-show="ac.isUsing"> <span class="label label-info">
<span class="label label-info"> active now
active now </span>
</span> </td>
</td> <td ng-show="!ac.isUsing">
<td ng-show="!ac.isUsing"> <a ng-click="setUsingAccount(ac)" class="btn btn-success btn-mini">
<a ng-click="setUsingAccount(ac)" class="btn btn-success btn-mini"> Select
Select </a>
</a> </td>
</td> </tr>
</tr> </table>
</table> </div>
</div> </div>
</div>
<div class="section"> <div class="section">
<div class="gf-box">
<div class="dashboard-editor-header"> <div class="gf-box-header">
<div class="dashboard-editor-title"> <div class="gf-box-title">
<i class="fa fa-plus-square"></i> <i class="fa fa-plus-square"></i>
Add account Add account
</div> </div>
</div> </div>
<br> <div class="gf-box-body">
<form name="form">
<form name="form"> <div class="tight-form">
<div class="tight-form"> <ul class="tight-form-list">
<ul class="tight-form-list"> <li class="tight-form-item">
<li class="tight-form-item"> <strong>Account name</strong>
<strong>Account name</strong> </li>
</li> <li>
<li> <input type="text" ng-model="newAccount.name" required class="input-xlarge tight-form-input" placeholder="account name">
<input type="text" ng-model="newAccount.name" required class="input-xlarge tight-form-input" placeholder="account name"> </li>
</li> <li>
<li> <button class="btn btn-success tight-form-btn" ng-click="createAccount()">Create</button>
<button class="btn btn-success tight-form-btn" ng-click="createAccount()">Create</button> </li>
</li> </ul>
</ul> <div class="clearfix"></div>
<div class="clearfix"></div> </div>
</div> </form>
</form> </div>
</div> </div>
</div> </div>
</div> </div>
</div>
</div>
</div>
src/app/partials/dashboard_topnav.html
...@@ -2,20 +2,21 @@ ...@@ -2,20 +2,21 @@
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
<topnav ng-if="!grafana.editview" <topnav-dash ng-if="!grafana.editview"
title="{{dashboard.title}}" title="{{dashboard.title}}"
icon="fa fa-th-large" icon="fa fa-th-large"
title-action="openSearch()" title-action="openSearch()"
toggle="toggleSideMenu()" toggle="toggleSideMenu()"
show-menu-btn="!grafana.sidemenu"> show-menu-btn="!grafana.sidemenu">
</topnav> </topnav-dash>
<topnav ng-if="grafana.editview" <topnav-dash ng-if="grafana.editview"
toggle="toggleSideMenu()"
title="{{grafana.editview.title}}" title="{{grafana.editview.title}}"
icon="fa fa-th-large" icon="fa fa-th-large"
section="{{dashboard.title}}" section="{{dashboard.title}}"
show-menu-btn="!grafana.sidemenu"> show-menu-btn="!grafana.sidemenu">
</topnav> </topnav-dash>
<ul class="nav pull-right"> <ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen"> <li ng-show="dashboardViewState.fullscreen">
...@@ -35,8 +36,6 @@ ...@@ -35,8 +36,6 @@
</a> </a>
</li> </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="grafana-menu-stop-playlist hide"> <li class="grafana-menu-stop-playlist hide">
<a class='small' ng-click='stopPlaylist(2)'> <a class='small' ng-click='stopPlaylist(2)'>
Stop playlist Stop playlist
......
src/app/partials/navbar.html
<div class="navbar navbar-static-top"> <div class="navbar navbar-static-top">
<div class="navbar-inner"> <div class="navbar-inner">
<div class="container-fluid"> <div class="container-fluid">
<span class="hamburger"> <topnav toggle="toggleSideMenu()"
<a class="pointer" ng-click="toggleSideMenu()"> title="{{pageTitle}}"
<i class="fa fa-bars"></i> icon="{{pageIcon}}"
</a> section="{{pageSection}}"
</span> show-menu-btn="!grafana.sidemenu">
<span class="brand"> </topnav>
<img class="logo-icon" src="img/fav32.png" bs-tooltip="'Grafana'" data-placement="bottom"></img>
<span class="page-title">{{pageTitle}}</span>
</span>
</div> </div>
</div> </div>
</div> </div>
......
src/css/less/gfbox.less
.gf-box { .gf-box {
margin: 30px; margin: 15px;
background-color: @grafanaPanelBackground; background-color: @grafanaPanelBackground;
position: relative; position: relative;
border: 1px solid @grafanaTargetFuncBackground; border: 1px solid @grafanaTargetFuncBackground;
border-top: none;
} }
.gf-box-header-close-btn { .gf-box-header-close-btn {
...@@ -30,10 +29,9 @@ ...@@ -30,10 +29,9 @@
} }
.gf-box-header { .gf-box-header {
border-bottom: 1px solid @grafanaTargetFuncBackground;
overflow: hidden; overflow: hidden;
background-color: @grafanaTargetBackground; background-color: @grafanaTargetBackground;
border-top: 1px solid @grafanaTargetFuncBackground;
border-bottom: 1px solid @grafanaTargetFuncBackground;
.tabs { .tabs {
float: left; float: left;
} }
...@@ -43,8 +41,8 @@ ...@@ -43,8 +41,8 @@
} }
.gf-box-title { .gf-box-title {
border-bottom: 1px solid @fullEditBorder;
padding-right: 20px; padding-right: 20px;
padding-left: 10px;
float: left; float: left;
color: @linkColor; color: @linkColor;
font-size: 18px; font-size: 18px;
......
src/css/less/grafana.less
...@@ -295,7 +295,6 @@ ...@@ -295,7 +295,6 @@
max-width: 400px; max-width: 400px;
} }
.grafana-version-info { .grafana-version-info {
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;
......
src/css/less/sidemenu.less
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
left: 0; left: 0;
width: 200px; width: 200px;
background: @bodyBackground; background: @bodyBackground;
border-right: 2px solid black; border-right: 1px solid black;
min-height: 100%; min-height: 100%;
z-index: 101; z-index: 101;
} }
......
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