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

New design work

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-01-31 18:00:26 +01:00
parent 3da90e09d5
commit f00e5936c9
9 changed files with 213 additions and 192 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
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') {
@ -48,11 +47,13 @@ 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" },
]
});
}
if ($scope.grafana.user.isSignedIn) {
$scope.menu.push({
text: "Sign out", href: $scope.getUrl("/logout"),
icon: "fa fa-sign-out",
});
}
@ -80,18 +81,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 +118,8 @@ function (angular, _, $, config) {
}
});
});
//$scope.menu.splice(0, 0, $scope.menu.splice(activeIndex, 1)[0]);
};
$scope.init = function() {

9
src/app/directives/topnav.js
View File

@ -24,13 +24,12 @@ function (angular) {
'<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>' +
'<i class="fa fa-chevron-down"></i>' +
'</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">' +
@ -69,13 +68,12 @@ function (angular) {
'<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>' +
'<i class="fa fa-angle-right"></i>' +
'</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">' +
@ -85,9 +83,6 @@ function (angular) {
'<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>',
link: function(scope, elem, attrs) {

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

@ -1,19 +1,16 @@
<div ng-controller="AnnotationsEditorCtrl" ng-init="init()">
<div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-bolt"></i>
Annotations
</div>
<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>
<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 +68,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>

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

@ -6,7 +6,6 @@
</topnav>
<div class="editor-row">
<div class="section">

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

@ -18,6 +18,21 @@
show-menu-btn="!grafana.sidemenu">
</topnav-dash>
<ul class="nav pull-left" style="font-size: 130%">
<li>
<a href="asd"><i class="fa fa-star-o" style="color: orange;"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-share-square-o"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-save"></i></a>
</li>
<li>
<a href="asd"><i class="fa fa-cog"></i></a>
</li>
</ul>
<ul class="nav pull-right">
<li ng-show="dashboardViewState.fullscreen">
<a ng-click="exitFullscreen()">
@ -30,12 +45,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="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

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

@ -1,34 +1,41 @@
<div ng-controller="SideMenuCtrl" ng-init="init()">
<ul class="sidemenu">
<li class="sidemenu-logo-container">
<img ng-src="{{appSubUrl}}/img/logo_transparent_200x.png">
<a ng-click="toggleSideMenu()" class="pointer sidemenu-toggle">
<i class="fa fa-angle-right"></i>
<li>
<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>
</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">
<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
<span class="sidemenu-item-text">{{item.text}}</span>
</a>
</li>
<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>
</a>
<ul class="dropdown-menu">
<li><a href="{{appSubUrl}}/logout">Logout</a></li>
</ul>
</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>

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

@ -1,17 +1,17 @@
<div ng-controller="TemplateEditorCtrl" ng-init="init()"> <div class="dashboard-editor-header">
<div class="dashboard-editor-title">
<i class="fa fa-code"></i>
Templating
</div>
<div ng-controller="TemplateEditorCtrl" ng-init="init()">
<div class="gf-box-header">
<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 +50,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>

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

@ -55,6 +55,10 @@
padding-left: 0px;
}
.navbar .nav>li>a {
padding: 19px 15px 8px;
}
.top-nav {
float: left;
}
@ -62,15 +66,17 @@
.top-nav-menu-btn {
display: block;
float: left;
padding: 15px 13px 13px 14px;;
padding: 11px 6px 12px 14px;
position: relative;
border-right: 2px solid black;
border-right: 1px solid @black;
font-weight: bold;
font-size: 90%;
span {
padding-left: 4px;
i {
font-size: 170%;
color: @gray;
padding: 0px 0px 0px 6px;
position: relative;
top: 2px;
top: 4px;
}
}

65
src/css/less/sidemenu.less
View File

@ -34,35 +34,10 @@
.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;
@ -83,14 +58,44 @@
border-bottom: 1px solid black;
}
.sidemenu-item {
font-size: 17px;
padding: 14px 10px 14px 20px;
.sidemenu-top-btn {
padding: 14px 0px 12px 20px;
background: @grafanaPanelBackground;
display: block;
i {
padding-right: 15px;
padding-right: 5px;
font-size: 170%;
color: @gray;
}
border-bottom: 10px solid @bodyBackground;
}
.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;
}
border-bottom: 1px solid black;
}
.sidemenu-logo-container {