opensource/grafana
1
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-07-30 10:02:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Updated account and profile pages, very temporary solution, do not like it at all

Browse Source
This commit is contained in:
Torkel Ödegaard
2015-02-06 08:21:00 +01:00
parent e3764ad951
commit f8a10fa7af
17 changed files with 342 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
pkg/models/account.go
View File

@ -12,6 +12,7 @@ var (
type Account struct {
Id int64
Version int
Name string
Created time.Time
Updated time.Time

1
pkg/models/dashboards.go
View File

@ -17,6 +17,7 @@ type Dashboard struct {
Id int64
Slug string
AccountId int64
Version int
Created time.Time
Updated time.Time

1
pkg/models/datasource.go
View File

@ -23,6 +23,7 @@ type DsAccess string
type DataSource struct {
Id int64
Version int
AccountId int64
Name string

1
pkg/models/user.go
View File

@ -12,6 +12,7 @@ var (
type User struct {
Id int64
Version int
Email string
Name string
Login string

8
pkg/services/sqlstore/migrations.go
View File

@ -33,11 +33,13 @@ func addUserMigrations(mg *Migrator) {
mg.AddMigration("create user table", new(AddTableMigration).
Name("user").WithColumns(
&Column{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
&Column{Name: "version", Type: DB_Int, Nullable: false},
&Column{Name: "login", Type: DB_NVarchar, Length: 255, Nullable: false},
&Column{Name: "email", Type: DB_NVarchar, Length: 255, Nullable: false},
&Column{Name: "name", Type: DB_NVarchar, Length: 255, Nullable: true},
&Column{Name: "password", Type: DB_NVarchar, Length: 255, Nullable: true},
&Column{Name: "salt", Type: DB_NVarchar, Length: 50, Nullable: true},
&Column{Name: "rands", Type: DB_NVarchar, Length: 50, Nullable: true},
&Column{Name: "company", Type: DB_NVarchar, Length: 255, Nullable: true},
&Column{Name: "account_id", Type: DB_BigInt, Nullable: false},
&Column{Name: "is_admin", Type: DB_Bool, Nullable: false},
@ -50,9 +52,6 @@ func addUserMigrations(mg *Migrator) {
Table("user").Columns("login").Unique())
mg.AddMigration("add unique index user.email", new(AddIndexMigration).
Table("user").Columns("email").Unique())
mg.AddMigration("add column user.rands", new(AddColumnMigration).
Table("user").Column(&Column{Name: "rands", Type: DB_NVarchar, Length: 255, Nullable: true}))
}
func addStarMigrations(mg *Migrator) {
@ -71,6 +70,7 @@ func addAccountMigrations(mg *Migrator) {
mg.AddMigration("create account table", new(AddTableMigration).
Name("account").WithColumns(
&Column{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
&Column{Name: "version", Type: DB_Int, Nullable: false},
&Column{Name: "name", Type: DB_NVarchar, Length: 255, Nullable: false},
&Column{Name: "created", Type: DB_DateTime, Nullable: false},
&Column{Name: "updated", Type: DB_DateTime, Nullable: false},
@ -98,6 +98,7 @@ func addDashboardMigration(mg *Migrator) {
mg.AddMigration("create dashboard table", new(AddTableMigration).
Name("dashboard").WithColumns(
&Column{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
&Column{Name: "version", Type: DB_Int, Nullable: false},
&Column{Name: "slug", Type: DB_NVarchar, Length: 255, Nullable: false},
&Column{Name: "title", Type: DB_NVarchar, Length: 255, Nullable: false},
&Column{Name: "data", Type: DB_Text, Nullable: false},
@ -129,6 +130,7 @@ func addDataSourceMigration(mg *Migrator) {
Name("data_source").WithColumns(
&Column{Name: "id", Type: DB_BigInt, IsPrimaryKey: true, IsAutoIncrement: true},
&Column{Name: "account_id", Type: DB_BigInt, Nullable: false},
&Column{Name: "version", Type: DB_Int, Nullable: false},
&Column{Name: "type", Type: DB_NVarchar, Length: 255, Nullable: false},
&Column{Name: "name", Type: DB_NVarchar, Length: 255, Nullable: false},
&Column{Name: "access", Type: DB_NVarchar, Length: 255, Nullable: false},

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

@ -17,10 +17,9 @@ function (angular, _, $, config) {
$scope.menu = [];
$scope.menu.push({
text: "Dashbords",
text: "Dashboards",
icon: "fa fa-th-large",
href: $scope.getUrl("/"),
//startsWith: config.appSubUrl + '/dashboard/',
});
if ($scope.grafana.user.accountRole === 'Admin') {
@ -34,16 +33,6 @@ function (angular, _, $, config) {
requireRole: "Admin",
icon: "fa fa-shield",
});
$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",
});
}
if ($scope.grafana.user.isGrafanaAdmin) {

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

@ -13,7 +13,6 @@ function (angular) {
transclude: true,
scope: {
title: "@",
section: "@",
titleAction: "&",
toggle: "&",
showMenuBtn: "=",
@ -23,18 +22,13 @@ function (angular) {
'<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>' +
'<i class="fa fa-bars"></i>' +
'</a>' +
'<span class="top-nav-breadcrumb">' +
'<i class="top-nav-icon" ng-class="icon"></i>' +
'<span class="icon-circle top-nav-icon"">' +
'<i 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}}' +
'</a>' +

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

@ -1,30 +1,184 @@
<topnav toggle="toggleSideMenu()" icon="fa fa-shield" section="Account" show-menu-btn="!grafana.sidemenu">
<topnav toggle="toggleSideMenu()" icon="fa fa-shield" title="Account" show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="gf-box" style="min-height: 500px">
<div class="admin-page">
<h2>
Account Info
</h2>
<div class="gf-box-body">
<div class="row editor-row">
<div class="section">
<form name="accountForm">
<div>
<div class="gf-box" style="">
<div class="gf-box-body">
<form name="accountForm">
<div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px">
<strong>Account name</strong>
</li>
<li>
<input type="text" required ng-model="account.name" class="input-xlarge tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<br>
<br>
<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
</form>
</div>
</div>
<h2>
Account users
</h2>
<div class="gf-box" ng-controller="AccountUsersCtrl">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
<form name="form">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 120px">
<strong>Account name</strong>
<li class="tight-form-item" style="width: 160px">
<strong>Username or Email</strong>
</li>
<li>
<input type="text" required ng-model="account.name" class="input-xlarge tight-form-input last" >
<input type="text" ng-model="user.loginOrEmail" required class="input-xlarge tight-form-input" placeholder="user@email.com or username">
</li>
<li class="tight-form-item">
role
</li>
<li>
<select type="text" ng-model="user.role" class="input-small tight-form-input" ng-options="f for f in ['Viewer', 'Editor', 'Admin']">
</select>
</li>
<li>
<button class="btn btn-success tight-form-btn" ng-click="addUser()">Add</button>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<br>
</form>
</div>
</div>
<br>
<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
</form>
<div class="editor-row row">
<table class="grafana-options-table span5">
<tr ng-repeat="user in users">
<td>{{user.email}}</td>
<td>
{{user.role}}
</td>
<td style="width: 1%">
<a ng-click="removeUser(user)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<h2>
API Keys
</h2>
<div class="gf-box" ng-controller="ApiKeysCtrl">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
<form name="addTokenrForm" class="form-inline tight-form">
<ul class="tight-form-list">
<li class="tight-form-item">
Add a key
</li>
<li>
<input type="text" class="input-xlarge tight-form-input" ng-model='token.name' placeholder="Name"></input>
</li>
<li class="tight-form-item">
Role
</li>
<li>
<select class="input-small tight-form-input" ng-model="token.role" ng-options="r for r in roleTypes"></select>
</li>
<li>
<button class="btn btn-success tight-form-btn" ng-click="addToken()">Add</button>
</li>
</ul>
<div class="clearfix"></div>
</form>
</div>
</div>
<div class="editor-row">
<div class="section">
<table class="grafana-options-table">
<tr ng-repeat="t in tokens">
<td>{{t.name}}</td>
<td>{{t.role}}</td>
<td>{{t.key}}</td>
<td style="width: 1%">
<a ng-click="removeToken(t.id)" class="btn btn-danger btn-mini">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
<h2>Import dashboards</h2>
<div class="gf-box" ng-controller="ImportCtrl">
<div class="gf-box-body">
<div class="editor-row">
<div class="section">
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 150px">
<strong>Dashboard source</strong>
</li>
<li>
<select type="text" ng-model="sourceName" class="input-medium tight-form-input" ng-options="f for f in datasources">
</select>
</li>
<li class="tight-form-item">
<strong>Destination</strong>
</li>
<li>
<select type="text" ng-model="destName" class="input-medium tight-form-input" ng-options="f for f in datasources">
</select>
</li>
<li>
<button class="btn btn-success tight-form-btn" ng-click="startImport()">Import</button>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<div class="editor-row" ng-if="importing">
<section class="section">
<h5>{{infoText}}</h5>
<div class="editor-row row">
<table class="grafana-options-table span5">
<tr ng-repeat="dash in imported">
<td>{{dash.name}}</td>
<td>
{{dash.info}}
</td>
</tr>
</table>
</div>
</section>
</div>
</div>
</div>

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

@ -1,11 +1,10 @@
<topnav toggle="toggleSideMenu()"
title="Data sources"
icon="fa fa-shield"
section="Account"
icon="fa fa-database"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="gf-box" style="min-height: 500px">
<div class="gf-box" style="min-height: 500px; max-width: 900px">
<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}}">
@ -117,3 +116,4 @@
</form>
</div>
</div>

1
src/app/features/admin/adminUsersCtrl.js
View File

@ -27,7 +27,6 @@ function (angular) {
backendSrv.delete('/api/admin/users/delete/' + user.id);
}
});
};
$scope.init();

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

@ -1,7 +1,6 @@
<topnav toggle="toggleSideMenu()"
title="Users"
title="Admin"
icon="fa fa-cube"
section="Admin"
show-menu-btn="!grafana.sidemenu">
</topnav>

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

@ -1,42 +1,44 @@
<topnav toggle="toggleSideMenu()"
title="Users"
title="Admin"
icon="fa fa-cube"
section="Admin"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="gf-box" style="min-height: 500px">
<div class="admin-page">
<h2> Users </h2>
<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">
<tr>
<th style="text-align:left">Id</th>
<th>Login</th>
<th>Email</th>
<th>Name</th>
<th>Admin</th>
<th></th>
</tr>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.login}}</td>
<td>{{user.email}}</td>
<td>{{user.name}}</td>
<td>{{user.isAdmin}}</td>
<td style="width: 1%">
<a ng-click="edit(variable)" class="btn btn-success btn-small">
<i class="fa fa-edit"></i>
Edit
</a>
&nbsp;&nbsp;
<a ng-click="delete(variable)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
<div class="gf-box-body">
<div class="editor-row row">
<div class="section span6">
<table class="grafana-options-table">
<tr>
<th style="text-align:left">Id</th>
<th>Login</th>
<th>Email</th>
<th>Name</th>
<th>Admin</th>
<th></th>
</tr>
<tr ng-repeat="user in users">
<td>{{user.id}}</td>
<td>{{user.login}}</td>
<td>{{user.email}}</td>
<td>{{user.name}}</td>
<td>{{user.isAdmin}}</td>
<td style="width: 1%">
<a ng-click="edit(variable)" class="btn btn-success btn-small">
<i class="fa fa-edit"></i>
Edit
</a>
&nbsp;&nbsp;
<a ng-click="delete(variable)" class="btn btn-danger btn-small">
<i class="fa fa-remove"></i>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
</div>

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

@ -1,127 +1,105 @@
<topnav toggle="toggleSideMenu()"
title="Details"
title="Profile"
icon="fa fa-user"
section="Profile"
show-menu-btn="!grafana.sidemenu">
</topnav>
<div class="admin-page">
<h2>Personal information</h2>
<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="gf-box-body">
<div class="row">
<form name="userForm">
<div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Name</strong>
</li>
<li>
<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" style="margin-top: 10px">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Email</strong>
</li>
<li>
<input type="text" required ng-model="user.email" class="input-xxlarge tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" style="margin-top: 10px">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Username</strong>
</li>
<li>
<input type="text" required ng-model="user.login" class="input-xxlarge tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="gf-box">
<div class="gf-box-body editor-row">
<div class="section">
<form name="userForm">
<div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Name</strong>
</li>
<li>
<input type="text" required ng-model="user.name" class="input-xxlarge tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" style="margin-top: 10px">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Email</strong>
</li>
<li>
<input type="text" required ng-model="user.email" class="input-xxlarge tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" style="margin-top: 10px">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 80px">
<strong>Username</strong>
</li>
<li>
<input type="text" required ng-model="user.login" class="input-xxlarge tight-form-input last" >
</li>
</ul>
<div class="clearfix"></div>
</div>
<br>
<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
</form>
</div>
</div>
</div>
</div>
<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>
<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="gf-box">
<div class="gf-box-header">
<div class="gf-box-title">
<i class="fa fa-plus-square"></i>
Add account
</div>
</div>
<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>
<br>
<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
</form>
</div>
</div>
</div>
<h2>Your accounts</h2>
<div class="gf-box">
<div class="gf-box-body">
<table class="grafana-options-table">
<tr ng-repeat="ac in accounts">
<td style="width: 98%">Name: {{ac.name}}</td>
<td>Role: {{ac.role}}</td>
<td>
<span class="btn btn-primary" ng-show="ac.isUsing">
Current
</span>
<a ng-click="setUsingAccount(ac)" class="btn btn-inverse" ng-show="!ac.isUsing">
Select
</a>
</td>
</tr>
</table>
</div>
</div>
<h2>Add account</h2>
<div class="gf-box">
<div class="gf-box-body editor-row">
<div class="section">
<form name="form">
<div>
<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-xxlarge tight-form-input last" placeholder="account name">
</li>
<li>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<br>
<button class="btn btn-success pull-right" ng-click="createAccount()">Create</button>
</div>
</div>
</form>
</div>
</div>

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

@ -10,7 +10,7 @@
<li ng-repeat="item in menu">
<a href="{{item.href}}" class="sidemenu-item" target="{{item.target}}">
<span class="sidemenu-icon"><i class="{{item.icon}}"></i></span>
<span class="icon-circle sidemenu-icon"><i class="{{item.icon}}"></i></span>
<span class="sidemenu-item-text">{{item.text}}</span>
</a>
</li>

19
src/css/less/gfbox.less
View File

@ -59,3 +59,22 @@
}
}
.admin-page {
max-width: 800px;
margin-left: 10px;
.gf-box {
margin-top: 0;
}
.gf-box-body {
min-height: 0;
}
h2 {
margin-left: 15px;
margin-bottom: 0px;
font-size: @fontSizeLarge;
color: @textColor;
i {
padding-right: 6px;
}
}
}

18
src/css/less/navbar.less
View File

@ -37,13 +37,13 @@
font-size: 150%;
opacity: 0;
position: absolute;
transition: opacity .35s ease-in-out;
transition: opacity .20s ease-in-out;
}
img {
width: 30px;
position: absolute;
opacity: 1;
transition: opacity .35s ease-in-out;
transition: opacity .20s ease-in-out;
}
&:hover {
.fa {
@ -68,7 +68,7 @@
a {
display: inline-block;
background: @grafanaTargetFuncBackground;
padding: 5px 4px 5px 13px;
padding: 5px 15px 5px 10px;
border: 1px solid #000;
border-radius: 3px;
color: #a2a2a2;
@ -88,16 +88,10 @@
}
}
.top-nav-breadcrumb {
display: block;
.top-nav-icon {
line-height: 34px;
float: left;
padding: 18px 9px 8px 12px;
font-size: 1.4em;
font-weight: bold;
color: darken(@gray, 10%);
i {
padding-left: 9px;
}
margin: 5px 11px;
}
.top-nav-section {

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

@ -72,7 +72,7 @@
}
}
.sidemenu-icon {
.icon-circle {
border-radius: 50%;
background: #000;
box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
@ -89,6 +89,9 @@
}
}
.sidemenu-icon {
}
.sidemenu-item {
color: #f80;
line-height: 34px;