Skip to content

N
nexpie-grafana-theme
Commit f8a10fa7 by Torkel Ödegaard
Options

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

parent e3764ad9
Showing with 333 additions and 196 deletions
pkg/models/account.go
......@@ -12,6 +12,7 @@ var (
type Account struct {
Id int64
Version int
Name string
Created time.Time
Updated time.Time
......
pkg/models/dashboards.go
......@@ -17,6 +17,7 @@ type Dashboard struct {
Id int64
Slug string
AccountId int64
Version int
Created time.Time
Updated time.Time
......
pkg/models/datasource.go
......@@ -23,6 +23,7 @@ type DsAccess string
type DataSource struct {
Id int64
Version int
AccountId int64
Name string
......
pkg/models/user.go
......@@ -12,6 +12,7 @@ var (
type User struct {
Id int64
Version int
Email string
Name string
Login string
......
pkg/services/sqlstore/migrations.go
......@@ -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},
......
src/app/controllers/sidemenuCtrl.js
......@@ -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) {
......
src/app/directives/topnav.js
......@@ -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>' +
......
src/app/features/account/partials/account.html
<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>
</form>
</div>
</div>
<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>
<br>
</div>
</div>
<div class="editor-row" ng-if="importing">
<section class="section">
<h5>{{infoText}}</h5>
<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="dash in imported">
<td>{{dash.name}}</td>
<td>
{{dash.info}}
</td>
</tr>
</table>
</div>
</section>
</div>
</div>
</div>
......
src/app/features/account/partials/datasources.html
<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>
src/app/features/admin/adminUsersCtrl.js
......@@ -27,7 +27,6 @@ function (angular) {
backendSrv.delete('/api/admin/users/delete/' + user.id);
}
});
};
$scope.init();
......
src/app/features/admin/partials/admin.html
<topnav toggle="toggleSideMenu()"
title="Users"
title="Admin"
icon="fa fa-cube"
section="Admin"
show-menu-btn="!grafana.sidemenu">
</topnav>
......
src/app/features/admin/partials/users.html
<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>
......
src/app/features/profile/partials/profile.html
<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>
</div>
<br>
<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
</form>
</div>
<br>
<button type="submit" class="pull-right btn btn-success" ng-click="update()">Update</button>
</form>
</div>
</div>
</div>
<div class="section">
<h2>Your accounts</h2>
<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 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>
<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">
<h2>Add account</h2>
<div class="gf-box">
<div class="gf-box-body editor-row">
<div class="section">
<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>
<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>
</form>
<br>
<button class="btn btn-success pull-right" ng-click="createAccount()">Create</button>
</div>
</div>
</div>
</form>
</div>
</div>
src/app/partials/sidemenu.html
......@@ -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>
......
src/css/less/gfbox.less
......@@ -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;
}
}
}
src/css/less/navbar.less
......@@ -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 {
......
src/css/less/sidemenu.less
......@@ -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;
......
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