Skip to content

N
nexpie-grafana-theme
Commit 63424f98 by Torkel Ödegaard
Options

ux: more work on sidemenu

parent c65d9277
Showing with 283 additions and 241 deletions
pkg/api/api.go
......@@ -41,6 +41,7 @@ func (hs *HttpServer) registerRoutes() {
r.Get("/org/users/", reqSignedIn, Index)
r.Get("/org/apikeys/", reqSignedIn, Index)
r.Get("/dashboard/import/", reqSignedIn, Index)
r.Get("/configuration", reqGrafanaAdmin, Index)
r.Get("/admin", reqGrafanaAdmin, Index)
r.Get("/admin/settings", reqGrafanaAdmin, Index)
r.Get("/admin/users", reqGrafanaAdmin, Index)
......
pkg/api/avatar/avatar.go
......@@ -146,7 +146,7 @@ func CacheServer() http.Handler {
}
func newNotFound() *Avatar {
avatar := &Avatar{}
avatar := &Avatar{notFound: true}
// load transparent png into buffer
path := filepath.Join(setting.StaticRootPath, "img", "transparent.png")
......
pkg/api/index.go
......@@ -124,28 +124,6 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
})
}
if c.OrgRole == m.ROLE_ADMIN {
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
Text: "Data Sources",
Icon: "icon-gf icon-gf-datasources",
Url: setting.AppSubUrl + "/datasources",
Children: []*dtos.NavLink{
{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"},
{Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"},
},
})
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
Text: "Plugins",
Icon: "icon-gf icon-gf-apps",
Url: setting.AppSubUrl + "/plugins",
Children: []*dtos.NavLink{
{Text: "Panels", Url: setting.AppSubUrl + "/plugins?type=panel", Icon: "fa fa-fw fa-stop"},
{Text: "Data sources", Url: setting.AppSubUrl + "/plugins?type=datasource", Icon: "icon-gf icon-gf-datasources"},
{Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"},
},
})
}
enabledPlugins, err := plugins.GetEnabledPlugins(c.OrgId)
if err != nil {
return nil, err
......@@ -192,18 +170,49 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
}
}
if c.IsGrafanaAdmin {
data.MainNavLinks = append(data.MainNavLinks, &dtos.NavLink{
Text: "Admin",
if c.OrgRole == m.ROLE_ADMIN {
cfgNode := &dtos.NavLink{
Text: "Configuration",
Icon: "fa fa-fw fa-cogs",
Url: setting.AppSubUrl + "/admin",
Url: setting.AppSubUrl + "/configuration",
Children: []*dtos.NavLink{
{Text: "Global Users", Url: setting.AppSubUrl + "/admin/users"},
{Text: "Global Orgs", Url: setting.AppSubUrl + "/admin/orgs"},
{Text: "Server Settings", Url: setting.AppSubUrl + "/admin/settings"},
{Text: "Server Stats", Url: setting.AppSubUrl + "/admin/stats"},
{
Text: "Data Sources",
Icon: "icon-gf icon-gf-datasources",
Url: setting.AppSubUrl + "/datasources",
Children: []*dtos.NavLink{
{Text: "List", Url: setting.AppSubUrl + "/datasources", Icon: "icon-gf icon-gf-datasources"},
{Text: "New", Url: setting.AppSubUrl + "/datasources", Icon: "fa fa-fw fa-plus"},
},
},
{
Text: "Plugins",
Icon: "icon-gf icon-gf-apps",
Url: setting.AppSubUrl + "/plugins",
Children: []*dtos.NavLink{
{Text: "Panels", Url: setting.AppSubUrl + "/plugins?type=panel", Icon: "fa fa-fw fa-stop"},
{Text: "Data sources", Url: setting.AppSubUrl + "/plugins?type=datasource", Icon: "icon-gf icon-gf-datasources"},
{Text: "Apps", Url: setting.AppSubUrl + "/plugins?type=app", Icon: "icon-gf icon-gf-apps"},
},
},
},
})
}
if c.IsGrafanaAdmin {
cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{
Text: "Server Admin",
Icon: "fa fa-fw fa-shield",
Url: setting.AppSubUrl + "/admin",
Children: []*dtos.NavLink{
{Text: "Global Users", Url: setting.AppSubUrl + "/admin/users"},
{Text: "Global Orgs", Url: setting.AppSubUrl + "/admin/orgs"},
{Text: "Server Settings", Url: setting.AppSubUrl + "/admin/settings"},
{Text: "Server Stats", Url: setting.AppSubUrl + "/admin/stats"},
},
})
}
data.MainNavLinks = append(data.MainNavLinks, cfgNode)
}
return &data, nil
......
public/app/core/components/sidemenu/sidemenu.html
<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="navbar-brand-btn-background">
<img src="public/img/grafana_icon.svg"></img>
</span>
</a>
<div class="sidemenu__top">
<ul class="sidemenu">
<li>
<a class="sidemenu-item" ng-click="ctrl.search()">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
</a>
</li>
<a class="navbar-brand-btn pointer" ng-click="ctrl.contextSrv.toggleSideMenu()">
<span class="navbar-brand-btn-background">
<img src="public/img/grafana_icon.svg"></img>
</span>
</a>
<li ng-repeat="item in ::ctrl.mainLinks" class="dropdown">
<a href="{{::item.url}}" class="sidemenu-item" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon">
<i class="{{::item.icon}}" ng-show="::item.icon"></i>
<img ng-src="{{::item.img}}" ng-show="::item.img">
</span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
<li class="side-menu-header">
<span class="sidemenu-item-text">{{::item.text}}</span>
</li>
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
<a href="{{::child.url}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
{{::child.text}}
</a>
</li>
</ul>
</li>
<div class="sidemenu-item">
<a class="sidemenu-link" ng-click="ctrl.search()">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-search"></i></span>
</a>
</div>
<li ng-show="::!ctrl.isSignedIn">
<a href="{{ctrl.loginUrl}}" class="sidemenu-item" target="_self">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
<span class="sidemenu-item-text">Sign in</span>
</a>
</li>
<div ng-repeat="item in ::ctrl.mainLinks" class="sidemenu-item dropdown">
<a href="{{::item.url}}" class="sidemenu-link" target="{{::item.target}}">
<span class="icon-circle sidemenu-icon">
<i class="{{::item.icon}}" ng-show="::item.icon"></i>
<img ng-src="{{::item.img}}" ng-show="::item.img">
</span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu" role="menu" ng-if="::item.children">
<li class="side-menu-header">
<span class="sidemenu-item-text">{{::item.text}}</span>
</li>
<li ng-repeat="child in ::item.children" ng-class="{divider: child.divider}">
<a href="{{::child.url}}">
<i class="{{::child.icon}}" ng-show="::child.icon"></i>
{{::child.text}}
</a>
</li>
</ul>
</div>
</div>
<li class="sidemenu-org-section" ng-if="::ctrl.isSignedIn" class="dropdown">
<a class="sidemenu-item" href="profile">
<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
<img ng-src="{{::ctrl.user.gravatarUrl}}">
<span class="sidemenu-org-avatar--missing">
<i class="fa fa-fw fa-user"></i>
</span>
</div>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
<li class="side-menu-header">
<span class="sidemenu-org-user sidemenu-item-text">{{::ctrl.user.name}}</span>
<span class="sidemenu-org-name sidemenu-item-text">{{::ctrl.user.orgName}}</span>
</li>
<li ng-repeat="menuItem in ctrl.orgMenu" ng-class="::menuItem.cssClass">
<span ng-show="::menuItem.section">{{::menuItem.section}}</span>
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
{{::menuItem.text}}
</a>
</li>
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
</li>
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
{{::orgItem.text}}
</a>
</li>
</ul>
</li>
<div class="sidemenu__bottom">
<div ng-show="::!ctrl.isSignedIn" class="sidemenu-item">
<a href="{{ctrl.loginUrl}}" class="sidemenu-link" target="_self">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-sign-in"></i></span>
<span class="sidemenu-item-text">Sign in</span>
</a>
</div>
</ul>
<div class="sidemenu-item dropup dropdown" ng-if="::ctrl.isSignedIn">
<a class="sidemenu-link" href="profile">
<span class="icon-circle sidemenu-icon sidemenu-org-avatar">
<img ng-src="{{::ctrl.user.gravatarUrl}}">
<span class="sidemenu-org-avatar--missing">
<i class="fa fa-fw fa-user"></i>
</span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
<li ng-show="ctrl.orgs.length > ctrl.maxShownOrgs" style="margin-left: 10px;width: 90%">
<span class="sidemenu-item-text">Max shown : {{::ctrl.maxShownOrgs}}</span>
<input ng-model="::ctrl.orgFilter" style="padding-left: 5px" type="text" ng-change="::ctrl.loadOrgsItems();" class="gf-input-small width-12" placeholder="Filter">
</li>
<li ng-repeat="orgItem in ctrl.orgItems" ng-class="::orgItem.cssClass">
<a href="{{::orgItem.url}}" ng-show="::orgItem.url" target="{{::orgItem.target}}">
<i class="{{::orgItem.icon}}" ng-show="::orgItem.icon"></i>
{{::orgItem.text}}
</a>
</li>
<li ng-repeat="menuItem in ctrl.userMenu" ng-class="::menuItem.cssClass">
<a href="{{::menuItem.url}}" ng-show="::menuItem.url" target="{{::menuItem.target}}">
<i class="{{::menuItem.icon}}" ng-show="::menuItem.icon"></i>
{{::menuItem.text}}
</a>
</li>
<li class="side-menu-header">
<span class="sidemenu-item-text">{{::ctrl.user.name}}</span>
</li>
</ul>
</div>
<div class="sidemenu-item">
<a href="http://docs.grafana.org" class="sidemenu-link" target="_blank">
<span class="icon-circle sidemenu-icon"><i class="fa fa-fw fa-question"></i></span>
</a>
<ul class="dropdown-menu dropdown-menu--sidemenu dropup" role="menu">
<li class="side-menu-header">
<span class="sidemenu-item-text">Documentation</span>
</li>
</ul>
</div>
</div>
public/app/core/components/sidemenu/sidemenu.ts
......@@ -10,7 +10,7 @@ export class SideMenuCtrl {
showSignout: boolean;
user: any;
mainLinks: any;
orgMenu: any;
userMenu: any;
appSubUrl: string;
loginUrl: string;
orgFilter: string;
......@@ -49,40 +49,39 @@ export class SideMenuCtrl {
}
openUserDropdown() {
this.orgMenu = [
{section: 'You', cssClass: 'dropdown-menu-title'},
{text: 'Profile', url: this.getUrl('/profile')},
];
this.userMenu = [ ];
if (this.showSignout) {
this.orgMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self"});
this.userMenu.push({text: "Sign out", url: this.getUrl("/logout"), target: "_self", icon: 'fa fa-sign-out'});
}
if (this.contextSrv.hasRole('Admin')) {
this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'});
this.orgMenu.push({
text: "Preferences",
url: this.getUrl("/org")
});
this.orgMenu.push({
text: "Users",
url: this.getUrl("/org/users")
});
this.orgMenu.push({
text: "User Groups",
url: this.getUrl("/org/user-groups")
});
this.orgMenu.push({
text: "API Keys",
url: this.getUrl("/org/apikeys")
});
}
this.orgMenu.push({cssClass: "divider"});
this.backendSrv.get('/api/user/orgs').then(orgs => {
this.orgs = orgs;
this.loadOrgsItems();
});
this.userMenu.push({text: 'Profile', url: this.getUrl('/profile'), icon: 'fa fa-user'});
// if (this.contextSrv.hasRole('Admin')) {
// this.orgMenu.push({section: this.user.orgName, cssClass: 'dropdown-menu-title'});
// this.orgMenu.push({
// text: "Preferences",
// url: this.getUrl("/org")
// });
// this.orgMenu.push({
// text: "Users",
// url: this.getUrl("/org/users")
// });
// this.orgMenu.push({
// text: "User Groups",
// url: this.getUrl("/org/user-groups")
// });
// this.orgMenu.push({
// text: "API Keys",
// url: this.getUrl("/org/apikeys")
// });
// }
// this.orgMenu.push({cssClass: "divider"});
// this.backendSrv.get('/api/user/orgs').then(orgs => {
// this.orgs = orgs;
// this.loadOrgsItems();
// });
}
loadOrgsItems(){
......
public/app/core/routes/routes.ts
......@@ -44,6 +44,12 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
templateUrl: 'public/app/features/dashboard/partials/dash_list.html',
controller : 'DashListCtrl',
})
.when('/configuration', {
templateUrl: 'public/app/features/admin/partials/configuration_home.html',
controller : 'ConfigurationHomeCtrl',
controllerAs: 'ctrl',
resolve: loadAdminBundle,
})
.when('/datasources', {
templateUrl: 'public/app/features/plugins/partials/ds_list.html',
controller : 'DataSourcesCtrl',
......
public/app/features/admin/admin.ts
......@@ -2,6 +2,7 @@ import AdminListUsersCtrl from './admin_list_users_ctrl';
import './adminListOrgsCtrl';
import './adminEditOrgCtrl';
import './adminEditUserCtrl';
import './configuration_home_ctrl';
import coreModule from 'app/core/core_module';
......@@ -42,6 +43,16 @@ export class AdminStatsCtrl {
}
}
export class ConfigurationHomeCtrl {
navModel: any;
/** @ngInject */
constructor(private $scope, private backendSrv, private navModelSrv) {
this.navModel = navModelSrv.getAdminNav();
}
}
coreModule.controller('ConfigurationHomeCtrl', ConfigurationHomeCtrl);
coreModule.controller('AdminSettingsCtrl', AdminSettingsCtrl);
coreModule.controller('AdminHomeCtrl', AdminHomeCtrl);
coreModule.controller('AdminStatsCtrl', AdminStatsCtrl);
......
public/app/features/admin/partials/configuration_home.html 0 → 100644
<navbar model="ctrl.navModel"></navbar>
<div class="scroll-canvas">
<div class="page-container">
<div class="page-header">
<h1>
<i class="fa fa-cogs"></i>
<span>Configuration</span>
</h1>
</div>
<section class="card-section" layout-mode>
<layout-selector></layout-selector>
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="ds in ctrl.datasources">
<a class="card-item" href="datasources/edit/{{ds.id}}/">
<div class="card-item-header">
<div class="card-item-type">
{{ds.type}}
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<img ng-src="{{ds.typeLogoUrl}}">
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{ds.name}}
<span ng-if="ds.isDefault">
<span class="btn btn-secondary btn-mini">default</span>
</span>
</div>
<div class="card-item-sub-name">
{{ds.url}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<div ng-if="ctrl.datasources.length === 0">
<em>No data sources defined</em>
</div>
</div>
</div>
public/sass/_variables.scss
......@@ -219,7 +219,7 @@ $btn-padding-y-lg: .75rem !default;
$btn-border-radius: 2px;
// sidemenu
$side-menu-width: 68px;
$side-menu-width: 60px;
// dashboard
$panel-margin: 0.4rem;
......
public/sass/components/_dropdown.scss
......@@ -217,7 +217,7 @@
// Different positioning for bottom up menu
.dropdown-menu {
top: auto;
bottom: 100%;
bottom: 0;
margin-bottom: 1px;
}
}
......
public/sass/components/_navbar.scss
......@@ -59,7 +59,7 @@
display: block;
margin-bottom: 3rem;
background-color: $side-menu-bg;
padding: 0.4rem 1.0rem 0.4rem 1rem;
padding: 0.4rem 1.0rem 0.4rem 0.65rem;
min-height: $navbarHeight;
.fa-caret-down {
......
public/sass/components/_scrollbar.scss
......@@ -107,9 +107,9 @@
}
// // Srollbars
// //
// Srollbars
//
// ::-webkit-scrollbar {
// width: 8px;
// height: 8px;
......
public/sass/components/_sidemenu.scss
......@@ -12,34 +12,62 @@
}
.sidemenu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-flow: column;
}
> li {
position: relative;
@include left-brand-border();
&.active,
&:hover {
background-color: $side-menu-item-hover-bg;
@include left-brand-border-gradient();
.dropdown-menu {
margin: 0;
display: block;
opacity: 0;
top: 0px;
// important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space
left: $side-menu-width - 2px;
@include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
z-index: -9999;
}
.sidemenu__top {
flex-grow: 1;
}
.sidemenu__bottom {
padding-bottom: $spacer;
}
.sidemenu-item {
position: relative;
@include left-brand-border();
&.active,
&:hover {
background-color: $side-menu-item-hover-bg;
@include left-brand-border-gradient();
.dropdown-menu {
margin: 0;
display: block;
opacity: 0;
top: 0px;
// important to overlap it otherwise it can be hidden
// again by the mouse getting outside the hover space
left: $side-menu-width - 2px;
@include animation('dropdown-anim 0ms ease-in-out 0ms forwards');
z-index: 1;
}
}
}
.dropup.sidemenu-item:hover .dropdown-menu {
top: auto !important;
}
.sidemenu-link {
color: $link-color;
line-height: 42px;
padding: 0px 10px 0px 10px;
display: block;
position: relative;
font-size: 16px;
border: 1px solid transparent;
img {
border-radius: 50%;
width: 28px;
height: 28px;
box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
}
}
@include keyframes(dropdown-anim) {
0% {
opacity: 0;
......@@ -59,7 +87,7 @@
color: $link-color;
opacity: .7;
position: relative;
left: 7px;
left: 3px;
font-size: 130%;
}
......@@ -72,67 +100,17 @@
}
img {
left: 7px;
left: 3px;
position: relative;
}
}
.sidemenu-item {
color: $link-color;
line-height: 42px;
padding: 0px 10px 0px 10px;
display: block;
position: relative;
font-size: 16px;
border: 1px solid transparent;
img {
border-radius: 50%;
width: 28px;
height: 28px;
box-shadow: 0 0 14px 2px rgba(255,255,255, 0.05);
}
}
.side-menu-header {
padding: 10px 10px 10px 20px;
white-space: nowrap;
background-color: $side-menu-item-hover-bg;
font-size: 18px;
}
.sidemenu-org-section .dropdown-menu-title {
margin: 0 10px 0 6px;
padding: 7px 0 7px;
overflow: hidden;
color: $dropdownTitle;
}
.sidemenu-org-section .dropdown-menu-title > span {
display: inline-block;
position: relative;
&::after {
display: block;
position: absolute;
top: 50%;
right: 0;
left: 100%;
width: 200px;
height: 1px;
margin-left: 5px;
background: $dropdownDivider;
content: '';
}
}
.sidemenu-org {
padding: 17px 10px 15px 14px;
box-sizing: border-box;
cursor: pointer;
display: table;
position: relative;
width: 100%;
font-size: 17px;
font-weight: normal;
}
.sidemenu .fa-caret-right {
......@@ -143,20 +121,14 @@
color: $text-color-faint;
}
.sidemenu-org-avatar,
.sidemenu-org-details {
display: table-cell;
vertical-align: top;
}
.sidemenu-org-avatar {
>img {
position: absolute;
width: 35px;
height: 35px;
width: 30px;
height: 30px;
border-radius: 50%;
left: 14px;
top: 12px;
top: 6px;
z-index: 10;
}
}
......@@ -168,19 +140,3 @@
font-size: $font-size-lg;
}
.sidemenu-org-details {
padding-left: 10px;
color: $link-color;
display: none;
}
.sidemenu-org-name {
display: block;
font-size: 13px;
color: $link-color-disabled;
}
.sidemenu-org-user {
display: block;
}
public/views/index.html
......@@ -25,7 +25,7 @@
<body ng-cloak>
<grafana-app class="grafana-app">
<sidemenu class="sidemenu-wrapper"></sidemenu>
<sidemenu class="sidemenu"></sidemenu>
<div class="page-alert-list">
<div ng-repeat='alert in dashAlerts.list' class="alert-{{alert.severity}} alert">
......
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