page header now on 99% of pages

This commit is contained in:
Torkel Ödegaard 2017-12-01 13:49:15 +01:00
parent 6bff416430
commit 68580f06a3
27 changed files with 110 additions and 237 deletions

View File

@ -263,16 +263,18 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
Divider: true, HideFromTabs: true,
})
cfgNode.Children = append(cfgNode.Children, &dtos.NavLink{
Text: "Server Admin",
Id: "admin",
Icon: "fa fa-fw fa-shield",
Url: setting.AppSubUrl + "/admin",
Text: "Server Admin",
HideFromTabs: true,
SubTitle: "Manage all users & orgs",
Id: "admin",
Icon: "fa fa-fw fa-shield",
Url: setting.AppSubUrl + "/admin/users",
Children: []*dtos.NavLink{
{Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"},
{Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs"},
{Text: "Server Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings"},
{Text: "Server Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats"},
{Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide"},
{Text: "Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users", Icon: "icon-gf icon-gf-fw icon-gf-users"},
{Text: "Orgs", Id: "global-orgs", Url: setting.AppSubUrl + "/admin/orgs", Icon: "gicon gicon-org"},
{Text: "Settings", Id: "server-settings", Url: setting.AppSubUrl + "/admin/settings", Icon: "fa fa-fw fa-sliders"},
{Text: "Stats", Id: "server-stats", Url: setting.AppSubUrl + "/admin/stats", Icon: "fa fa-fw fa-bar-chart"},
{Text: "Style Guide", Id: "styleguide", Url: setting.AppSubUrl + "/styleguide", Icon: "fa fa-fw fa-eyedropper"},
},
})
}

View File

@ -48,12 +48,6 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
reloadOnSearch: false,
pageClass: 'page-dashboard',
})
.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',

View File

@ -10,7 +10,7 @@ class AdminSettingsCtrl {
/** @ngInject **/
constructor($scope, backendSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-settings');
this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-settings', 1);
backendSrv.get('/api/admin/settings').then(function(settings) {
$scope.settings = settings;
@ -24,7 +24,7 @@ class AdminHomeCtrl {
/** @ngInject **/
constructor(navModelSrv) {
this.navModel = navModelSrv.getNav('cfg', 'admin');
this.navModel = navModelSrv.getNav('cfg', 'admin', 1);
}
}
@ -34,7 +34,7 @@ export class AdminStatsCtrl {
/** @ngInject */
constructor(backendSrv: any, navModelSrv) {
this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-stats');
this.navModel = navModelSrv.getNav('cfg', 'admin', 'server-stats', 1);
backendSrv.get('/api/admin/stats').then(stats => {
this.stats = stats;
@ -42,16 +42,6 @@ export class AdminStatsCtrl {
}
}
export class ConfigurationHomeCtrl {
navModel: any;
/** @ngInject */
constructor(navModelSrv) {
this.navModel = navModelSrv.getNav('cfg');
}
}
coreModule.controller('ConfigurationHomeCtrl', ConfigurationHomeCtrl);
coreModule.controller('AdminSettingsCtrl', AdminSettingsCtrl);
coreModule.controller('AdminHomeCtrl', AdminHomeCtrl);
coreModule.controller('AdminStatsCtrl', AdminStatsCtrl);

View File

@ -5,7 +5,7 @@ export class AdminEditOrgCtrl {
/** @ngInject */
constructor($scope, $routeParams, backendSrv, $location, navModelSrv) {
$scope.init = function() {
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs');
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1);
if ($routeParams.id) {
$scope.getOrg($routeParams.id);

View File

@ -8,7 +8,7 @@ export class AdminEditUserCtrl {
$scope.user = {};
$scope.newOrg = { name: '', role: 'Editor' };
$scope.permissions = {};
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users');
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users', 1);
$scope.init = function() {
if ($routeParams.id) {

View File

@ -5,7 +5,7 @@ export class AdminListOrgsCtrl {
/** @ngInject */
constructor($scope, backendSrv, navModelSrv) {
$scope.init = function() {
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs');
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1);
$scope.getOrgs();
};

View File

@ -10,7 +10,7 @@ export default class AdminListUsersCtrl {
/** @ngInject */
constructor(private $scope, private backendSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users');
this.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users', 1);
this.query = '';
this.getUsers();
}

View File

@ -1,35 +1,11 @@
<navbar model="ctrl.navModel"></navbar>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
</div>
<div class="page-container page-body">
<section class="card-section card-list-layout-grid">
<ol class="card-list" >
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
<a class="card-item" ng-href="{{::navItem.url}}">
<div class="card-item-header">
<div class="card-item-type">
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<i class="{{navItem.icon}}"></i>
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{navItem.text}}
</div>
<div class="card-item-sub-name">
{{navItem.description}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
<div class="grafana-info-box span8">
Grafana is a multi-tenant system where most can be configured per organization. These
admin pages are for server admins where you can manage orgs, & all users across all orgs.
</div>
</div>

View File

@ -1,29 +0,0 @@
<page-header model="ctrl.navModel" no-tabs="true"></page-header>
<div class="page-container page-body">
<section class="card-section card-list-layout-grid">
<ol class="card-list">
<li class="card-item-wrapper" ng-repeat="navItem in ctrl.navModel.node.children">
<a class="card-item" ng-href="{{::navItem.url}}">
<div class="card-item-header">
<div class="card-item-type">
</div>
</div>
<div class="card-item-body">
<figure class="card-item-figure">
<i class="{{navItem.icon}}"></i>
</figure>
<div class="card-item-details">
<div class="card-item-name">
{{navItem.text}}
</div>
<div class="card-item-sub-name">
{{navItem.description}}
</div>
</div>
</div>
</a>
</li>
</ol>
</section>
</div>

View File

@ -1,9 +1,7 @@
<navbar model="navModel"></navbar>
<page-header model="navModel"></page-header>
<div class="page-container">
<div class="page-header">
<h1>Edit Organization</h1>
</div>
<div class="page-container page-body">
<h2 class="page-sub-heading">Edit Organization</h2>
<form name="orgDetailsForm" class="gf-form-group">
<div class="gf-form">

View File

@ -1,8 +1,9 @@
<navbar model="navModel"></navbar>
<page-header model="navModel"></page-header>
<div class="page-container">
<div class="page-header">
<h1>Edit User</h1>
<div class="page-container page-body">
<div class="page-sub-heading">
<h2>Edit User</h2>
</div>
<form name="userForm" class="gf-form-group">
@ -54,7 +55,7 @@
<form name="addOrgForm" class="gf-form-group">
<div class="gf-form-inline">
<div class="gf-form">
<span class="gf-form-label width-12">Add organization</span>
<span class="gf-form-label">Add</span>
<input type="text" ng-model="newOrg.name" bs-typeahead="searchOrgs" required class="gf-form-input max-width-20" placeholder="organization name">
</div>
<div class="gf-form">
@ -67,12 +68,14 @@
</div>
</form>
<table class="grafana-options-table">
<tr>
<th>Name</th>
<th>Role</th>
<th></th>
</tr>
<table class="filter-table">
<thead>
<tr>
<th>Name</th>
<th>Role</th>
<th></th>
</tr>
</thead>
<tr ng-repeat="org in orgs">
<td>
{{org.name}} <span class="label label-info" ng-show="org.orgId === user.orgId">Current</span>

View File

@ -1,7 +1,7 @@
<navbar model="navModel"></navbar>
<page-header model="navModel"></page-header>
<div class="page-container">
<div class="page-header">
<div class="page-container page-body">
<div class="page-sub-heading">
<h1>Add new user</h1>
</div>

View File

@ -1,8 +1,12 @@
<navbar model="navModel"></navbar>
<page-header model="navModel"></page-header>
<div class="page-container">
<div class="page-header">
<h1>Organizations</h1>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="page-action-bar__spacer"></div>
<a class="page-header__cta btn btn-success" href="org/new">
<i class="fa fa-plus"></i>
New Org
</a>
</div>
<table class="filter-table form-inline">

View File

@ -1,25 +1,22 @@
<navbar model="ctrl.navModel"></navbar>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container">
<div class="page-header">
<h1>Server settings</h1>
<div class="page-container page-body">
<div class="grafana-info-box span8" style="margin: 20px 0 25px 0">
These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables).
To change these you currently need to restart grafana.
</div>
<div class="grafana-info-box span8" style="margin: 20px 0 25px 0">
These system settings are defined in grafana.ini or custom.ini (or overridden in ENV variables).
To change these you currently need to restart grafana.
</div>
<table class="grafana-options-table">
<tr ng-repeat-start="(secName, secValue) in settings">
<td class="admin-settings-section">{{secName}}</td>
<td></td>
</tr>
<tr ng-repeat="(keyName, keyValue) in secValue" ng-repeat-end>
<td style="padding-left: 25px;">{{keyName}}</td>
<td>{{keyValue}}</td>
</tr>
</table>
<table class="filter-table">
<tr ng-repeat-start="(secName, secValue) in settings">
<td class="admin-settings-section">{{secName}}</td>
<td></td>
</tr>
<tr ng-repeat="(keyName, keyValue) in secValue" ng-repeat-end>
<td style="padding-left: 25px;">{{keyName}}</td>
<td>{{keyValue}}</td>
</tr>
</table>
</div>

View File

@ -1,10 +1,6 @@
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<h1>Stats</h1>
</div>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body">
<table class="filter-table form-inline">
<thead>
<tr>

View File

@ -1,22 +1,18 @@
<navbar model="ctrl.navModel"></navbar>
<div class="page-container">
<div class="page-header">
<h1>Users</h1>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container page-body">
<div class="page-action-bar">
<div class="gf-form">
<label class="gf-form-label">Search</label>
<input class="gf-form-input width-15" type="text" placeholder="Find user by name/login/email" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
</div>
<div class="page-action-bar__spacer"></div>
<a class="btn btn-success" href="admin/users/create">
<i class="fa fa-plus"></i>
Add new user
</a>
</div>
<div class="gf-form pull-right gf-form-group">
<label class="gf-form-label">Search</label>
<span style="position: relative;">
<input class="gf-form-input width-15" type="text" placeholder="Find user by name/login/email" tabindex="1" give-focus="true" ng-model="ctrl.query" ng-model-options="{ debounce: 500 }" spellcheck='false' ng-change="ctrl.getUsers()" />
</span>
</div>
<div class="admin-list-table">
<table class="filter-table form-inline">
<thead>

View File

@ -8,7 +8,7 @@ export class ChangePasswordCtrl {
$scope.command = {};
$scope.authProxyEnabled = config.authProxyEnabled;
$scope.ldapEnabled = config.ldapEnabled;
$scope.navModel = navModelSrv.getNav('profile', 'change-password');
$scope.navModel = navModelSrv.getNav('profile', 'change-password', 0);
$scope.changePassword = function() {
if (!$scope.userForm.$valid) { return; }

View File

@ -5,7 +5,7 @@ export class NewOrgCtrl {
/** @ngInject **/
constructor($scope, $http, backendSrv, navModelSrv) {
$scope.navModel = navModelSrv.getOrgNav(0);
$scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs', 1);
$scope.newOrg = {name: ''};
$scope.createOrg = function() {

View File

@ -1,9 +1,9 @@
<navbar model="navModel"></navbar>
<page-header model="navModel"></page-header>
<div class="page-container">
<div class="page-header">
<page-h1 model="navModel"></page-h1>
</div>
<div class="page-container page-body">
<h2 class="page-sub-heading">
Change your password
</h2>
<div ng-if="ldapEnabled || authProxyEnabled">
You cannot change password when ldap or auth proxy authentication is enabled.

View File

@ -1,9 +1,9 @@
<navbar model="navModel"></navbar>
<page-header model="navModel"></page-header>
<div class="page-container" ng-form="playlistEditForm">
<div class="page-header">
<h1>New Organization</h1>
</div>
<div class="page-container page-body" ng-form="playlistEditForm">
<h2 class="page-sub-heading">
New Organization
</h2>
<p class="playlist-description">Each organization contains their own dashboards, data sources and configuration, and cannot be shared between orgs. While users may belong to more than one, mutiple organization are most frequently used in multi-tenant deployments. </p>

View File

@ -2,7 +2,7 @@
<div class="page-container page-body">
<h3 class="section-heading">Add new</h3>
<h3 class="page-heading">Add new</h3>
<form name="addTokenForm" class="gf-form-group">
<div class="gf-form-inline">
@ -20,7 +20,7 @@
</div>
</form>
<h3 class="section-heading">Existing Keys</h3>
<h3 class="page-heading">Existing Keys</h3>
<table class="filter-table">
<thead>
<tr>

View File

@ -1,34 +1,3 @@
<!-- <div class="page&#45;header&#45;canvas"> -->
<!-- <div class="page&#45;container" > -->
<!-- <navbar model="navModel"></navbar> -->
<!-- -->
<!-- <div class="page&#45;header"> -->
<!-- <page&#45;h1 model="navModel"></page&#45;h1> -->
<!-- -->
<!-- <ul class="gf&#45;tabs"> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link active" href="org"> -->
<!-- <i class="fa fa&#45;fw fa&#45;sliders"></i> -->
<!-- Preferences -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" href="org/users"> -->
<!-- <i class="icon&#45;gf icon&#45;gf&#45;fw icon&#45;gf&#45;users"></i> -->
<!-- Members -->
<!-- </a> -->
<!-- </li> -->
<!-- <li class="gf&#45;tabs&#45;item"> -->
<!-- <a class="gf&#45;tabs&#45;link" href="org/user&#45;groups"> -->
<!-- <i class="gicon gicon&#45;user&#45;group"></i> -->
<!-- Teams -->
<!-- </a> -->
<!-- </li> -->
<!-- </ul> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<page-header model="navModel"></page-header>
<div class="page-container page-body">

View File

@ -49,7 +49,7 @@ export class PrefsControlCtrl {
var template = `
<form name="ctrl.prefsForm" class="section gf-form-group">
<h3 class="section-heading">Preferences</h3>
<h3 class="page-heading">Preferences</h3>
<div class="gf-form">
<span class="gf-form-label width-11">UI Theme</span>

View File

@ -1,34 +1,10 @@
<navbar model="ctrl.navModel"></navbar>
<page-header model="ctrl.navModel"></page-header>
<div class="page-container">
<div class="page-header">
<page-h1 model="ctrl.navModel"></page-h1>
<div class="page-container page-body">
<a class="btn btn-success" ng-click="ctrl.switchTheme()">
<i class="fa fa-random"></i>
Switch theme
</a>
<h3 class="page-heading">Buttons</h3>
<div class="page-header-tabs">
<ul class="gf-tabs">
<li class="gf-tabs-item" ng-repeat="page in ctrl.pages">
<a class="gf-tabs-link" href="styleguide/{{page}}" ng-class="{active: ctrl.page[page]}">{{page}}</a>
</li>
</ul>
</div>
</div>
<div class="tab-pane" ng-if="ctrl.page.colors">
<ul>
<li class="style-guide-color-card" ng-repeat="color in ctrl.colors" style="background-color: {{color.value}}">
<strong>${{color.name}}</strong>
<em>{{color.value}}</em>
</li>
</ul>
</div>
<div class="tab-pane" ng-if="ctrl.page.buttons">
<div class="tab-pane">
<div ng-repeat="variant in ctrl.buttonVariants" class="row">
<div ng-repeat="btnSize in ctrl.buttonSizes" class="style-guide-button-list p-a-2 col-md-4">
<button ng-repeat="buttonName in ctrl.buttonNames" class="btn btn{{variant}}{{buttonName}} {{btnSize}}">
@ -38,7 +14,7 @@
</div>
</div>
<div class="tab-pane style-guide-icon-list" ng-if="ctrl.page.icons">
<div class="tab-pane style-guide-icon-list">
<div class="row">
<div ng-repeat="icon in ctrl.icons" class="col-md-2 col-sm-3 col-xs-4">
<i class="icon-gf icon-gf-{{icon}}" bs-tooltip="'icon-gf icon-gf-{{icon}}'"></i>
@ -46,13 +22,13 @@
</div>
</div>
<div class="tab-pane style-guide-plugin-authoring" ng-if="ctrl.page.plugins">
<p>From grafana 3.0 it's very easy to develop your own plugins and share them with other grafana users.</p>
<p>More information about plugin development can be found at <a href="http://docs.grafana.org/plugins/developing/development/" target="_blank">docs.grafana.org</a></p>
</div>
<h3 class="page-heading">Forms</h3>
<div class="tab-pane" ng-if="ctrl.page.forms">
forms
<div class="gf-form-inline">
<div class="gf-form">
<label class="gf-form-label">Label</label>
<input type="text" class="gf-form-input" />
</div>
</div>
</div>

View File

@ -8,7 +8,7 @@ class StyleGuideCtrl {
theme: string;
buttonNames = ['primary', 'secondary', 'inverse', 'success', 'warning', 'danger'];
buttonSizes = ['btn-small', '', 'btn-large'];
buttonVariants = ['-', '-outline-'];
buttonVariants = ['-'];
icons: any = [];
page: any;
pages = ['colors', 'buttons', 'icons', 'plugins'];
@ -16,7 +16,7 @@ class StyleGuideCtrl {
/** @ngInject **/
constructor(private $http, private $routeParams, private backendSrv, navModelSrv) {
this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide');
this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide', 1);
this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
this.page = {};

View File

@ -51,5 +51,6 @@
background-image: url('../img/icons_#{$theme-name}_theme/icon_user_group.svg');
}
.gicon-org {
background-image: url('../img/icons_#{$theme-name}_theme/icon_org.svg');
}

View File

@ -47,7 +47,7 @@
position: relative;
&.fa {
top: 8px;
top: 10px;
}
&.gicon {