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) {
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 = {};
......@@ -45,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) {
......
src/app/directives/topnav.js
......@@ -10,6 +10,53 @@ function (angular) {
.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">' +
'<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: {
title: "@",
section: "@",
......@@ -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="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">
......
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="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">
......
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="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 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>
<div ng-model="editor.index" bs-tabs style="text-transform:capitalize;">
<div ng-repeat="tab in ['Overview', 'Add', 'Edit']" data-title="{{tab}}">
<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>
<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 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 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">
<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 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-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 class="editor-option">
<label class="small">User</label>
<input type="text" class="input-large" ng-model='current.user' placeholder=""></input>
</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 class="editor-option">
<label class="small">Password</label>
<input type="password" class="input-large" ng-model='current.password' placeholder=""></input>
</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>
<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>
</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>
</form>
</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="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">
......
src/app/features/admin/partials/admin.html
<div ng-include="'app/partials/navbar.html'" ng-init="pageTitle='Admin'"></div>
<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>
<topnav toggle="toggleSideMenu()"
title="Users"
icon="fa fa-cube"
section="Admin"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="gf-box" style="min-height: 500px">
</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="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">
......
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>
Personal information
</div>
</div>
<div class="dashboard-editor-body">
<div class="gf-box-body">
<div class="row">
<form name="userForm">
<div>
......@@ -56,65 +63,66 @@
</div>
</div>
</div>
</div>
<div class="section">
<div class="section">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-cubes"></i>
<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>
src/app/partials/dashboard_topnav.html
......@@ -2,20 +2,21 @@
<div class="navbar-inner">
<div class="container-fluid">
<topnav ng-if="!grafana.editview"
<topnav-dash ng-if="!grafana.editview"
title="{{dashboard.title}}"
icon="fa fa-th-large"
title-action="openSearch()"
toggle="toggleSideMenu()"
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}}"
icon="fa fa-th-large"
section="{{dashboard.title}}"
show-menu-btn="!grafana.sidemenu">
</topnav>
</topnav-dash>
<ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen">
......@@ -35,8 +36,6 @@
</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="grafana-menu-stop-playlist hide">
<a class='small' ng-click='stopPlaylist(2)'>
Stop playlist
......
src/app/partials/navbar.html
<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>
......
src/css/less/gfbox.less
.gf-box {
margin: 30px;
margin: 15px;
background-color: @grafanaPanelBackground;
position: relative;
border: 1px solid @grafanaTargetFuncBackground;
border-top: none;
}
.gf-box-header-close-btn {
......@@ -30,10 +29,9 @@
}
.gf-box-header {
border-bottom: 1px solid @grafanaTargetFuncBackground;
overflow: hidden;
background-color: @grafanaTargetBackground;
border-top: 1px solid @grafanaTargetFuncBackground;
border-bottom: 1px solid @grafanaTargetFuncBackground;
.tabs {
float: left;
}
......@@ -43,8 +41,8 @@
}
.gf-box-title {
border-bottom: 1px solid @fullEditBorder;
padding-right: 20px;
padding-left: 10px;
float: left;
color: @linkColor;
font-size: 18px;
......
src/css/less/grafana.less
......@@ -295,7 +295,6 @@
max-width: 400px;
}
.grafana-version-info {
position: absolute;
bottom: 2px;
......
src/css/less/sidemenu.less
......@@ -13,7 +13,7 @@
left: 0;
width: 200px;
background: @bodyBackground;
border-right: 2px solid black;
border-right: 1px solid black;
min-height: 100%;
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