mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
ux: new page header progress
This commit is contained in:
parent
b1a2344be1
commit
6f5a9bf768
@ -117,22 +117,23 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
|
|||||||
|
|
||||||
if c.IsSignedIn {
|
if c.IsSignedIn {
|
||||||
profileNode := &dtos.NavLink{
|
profileNode := &dtos.NavLink{
|
||||||
Text: c.SignedInUser.Login,
|
Text: c.SignedInUser.Name,
|
||||||
|
SubTitle: c.SignedInUser.Login,
|
||||||
Id: "profile",
|
Id: "profile",
|
||||||
Img: data.User.GravatarUrl,
|
Img: data.User.GravatarUrl,
|
||||||
Url: setting.AppSubUrl + "/profile",
|
Url: setting.AppSubUrl + "/profile",
|
||||||
HideFromMenu: true,
|
HideFromMenu: true,
|
||||||
Children: []*dtos.NavLink{
|
Children: []*dtos.NavLink{
|
||||||
{Text: "Your profile", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"},
|
{Text: "Preferences", Id: "profile-settings", Url: setting.AppSubUrl + "/profile", Icon: "fa fa-fw fa-sliders"},
|
||||||
{Text: "Change Password", Id: "change-password", Url: setting.AppSubUrl + "/profile/password", Icon: "fa fa-fw fa-lock", HideFromMenu: true},
|
{Text: "Change Password", Id: "change-password", Url: setting.AppSubUrl + "/profile/password", Icon: "fa fa-fw fa-lock", HideFromMenu: true},
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
if !setting.DisableSignoutMenu {
|
if !setting.DisableSignoutMenu {
|
||||||
// add sign out first
|
// add sign out first
|
||||||
profileNode.Children = append([]*dtos.NavLink{
|
profileNode.Children = append(profileNode.Children, &dtos.NavLink{
|
||||||
{Text: "Sign out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self"},
|
Text: "Sign out", Id: "sign-out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self",
|
||||||
}, profileNode.Children...)
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
data.NavTree = append(data.NavTree, profileNode)
|
data.NavTree = append(data.NavTree, profileNode)
|
||||||
|
@ -32,7 +32,8 @@
|
|||||||
<page-header model="navModel"></page-header>
|
<page-header model="navModel"></page-header>
|
||||||
|
|
||||||
<div class="page-container page-body">
|
<div class="page-container page-body">
|
||||||
<h3 class="page-heading">General</h3>
|
<h3 class="page-sub-heading">Organization profile</h3>
|
||||||
|
|
||||||
<form name="orgForm" class="gf-form-group">
|
<form name="orgForm" class="gf-form-group">
|
||||||
<div class="gf-form-inline">
|
<div class="gf-form-inline">
|
||||||
<div class="gf-form max-width-28">
|
<div class="gf-form max-width-28">
|
||||||
|
@ -1,16 +1,9 @@
|
|||||||
<div class="page-header-canvas">
|
<page-header model="ctrl.navModel"></page-header>
|
||||||
<div class="page-container">
|
|
||||||
<navbar model="ctrl.navModel"></navbar>
|
|
||||||
|
|
||||||
<div class="page-header">
|
|
||||||
<page-h1 model="ctrl.navModel"></page-h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="page-container page-body">
|
<div class="page-container page-body">
|
||||||
|
<h3 class="page-sub-heading">User Profile</h3>
|
||||||
|
|
||||||
<form name="ctrl.userForm" class="gf-form-group">
|
<form name="ctrl.userForm" class="gf-form-group">
|
||||||
<h3 class="page-heading">Information</h3>
|
|
||||||
|
|
||||||
<div class="gf-form max-width-30">
|
<div class="gf-form max-width-30">
|
||||||
<span class="gf-form-label width-8">Name</span>
|
<span class="gf-form-label width-8">Name</span>
|
||||||
|
@ -49,7 +49,7 @@ export class PrefsControlCtrl {
|
|||||||
|
|
||||||
var template = `
|
var template = `
|
||||||
<form name="ctrl.prefsForm" class="section gf-form-group">
|
<form name="ctrl.prefsForm" class="section gf-form-group">
|
||||||
<h3 class="page-heading">Preferences</h3>
|
<h3 class="section-heading">Preferences</h3>
|
||||||
|
|
||||||
<div class="gf-form">
|
<div class="gf-form">
|
||||||
<span class="gf-form-label width-11">UI Theme</span>
|
<span class="gf-form-label width-11">UI Theme</span>
|
||||||
|
@ -14,7 +14,7 @@ export class ProfileCtrl {
|
|||||||
constructor(private backendSrv, private contextSrv, private $location, navModelSrv) {
|
constructor(private backendSrv, private contextSrv, private $location, navModelSrv) {
|
||||||
this.getUser();
|
this.getUser();
|
||||||
this.getUserOrgs();
|
this.getUserOrgs();
|
||||||
this.navModel = navModelSrv.getNav('profile');
|
this.navModel = navModelSrv.getNav('profile', 'profile-settings', 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
getUser() {
|
getUser() {
|
||||||
|
@ -1,42 +1,55 @@
|
|||||||
|
<page-header model="ctrl.navModel"></page-header>
|
||||||
|
|
||||||
<div class="page-header-canvas">
|
<!-- <div class="page-header-canvas"> -->
|
||||||
<div class="page-container">
|
<!-- <div class="page-container"> -->
|
||||||
<navbar model="ctrl.navModel"></navbar>
|
<!-- <navbar model="ctrl.navModel"></navbar> -->
|
||||||
|
<!-- -->
|
||||||
<div class="page-header">
|
<!-- <div class="page-header"> -->
|
||||||
<page-h1 model="ctrl.navModel"></page-h1>
|
<!-- <page-h1 model="ctrl.navModel"></page-h1> -->
|
||||||
|
<!-- -->
|
||||||
<div class="page-header-tabs">
|
<!-- <div class="page-header-tabs"> -->
|
||||||
<ul class="gf-tabs">
|
<!-- <ul class="gf-tabs"> -->
|
||||||
<li class="gf-tabs-item">
|
<!-- <li class="gf-tabs-item"> -->
|
||||||
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
|
<!-- <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}"> -->
|
||||||
<i class="icon-gf icon-gf-panel"></i>
|
<!-- <i class="icon-gf icon-gf-panel"></i> -->
|
||||||
Panels
|
<!-- Panels -->
|
||||||
</a>
|
<!-- </a> -->
|
||||||
</li>
|
<!-- </li> -->
|
||||||
<li class="gf-tabs-item">
|
<!-- <li class="gf-tabs-item"> -->
|
||||||
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
|
<!-- <a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}"> -->
|
||||||
<i class="gicon gicon-datasources"></i>
|
<!-- <i class="gicon gicon-datasources"></i> -->
|
||||||
Data sources
|
<!-- Data sources -->
|
||||||
</a>
|
<!-- </a> -->
|
||||||
</li>
|
<!-- </li> -->
|
||||||
<li class="gf-tabs-item">
|
<!-- <li class="gf-tabs-item"> -->
|
||||||
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
|
<!-- <a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}"> -->
|
||||||
<i class="icon-gf icon-gf-apps"></i>
|
<!-- <i class="icon-gf icon-gf-apps"></i> -->
|
||||||
Apps
|
<!-- Apps -->
|
||||||
</a>
|
<!-- </a> -->
|
||||||
</li>
|
<!-- </li> -->
|
||||||
</ul>
|
<!-- </ul> -->
|
||||||
|
<!-- -->
|
||||||
<a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
|
<!-- <a class="get-more-plugins-link pull-right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> -->
|
||||||
Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com
|
<!-- Find more <img src="public/img/icn-plugins-tiny.svg" />plugins on Grafana.com -->
|
||||||
</a>
|
<!-- </a> -->
|
||||||
</div>
|
<!-- </div> -->
|
||||||
</div>
|
<!-- </div> -->
|
||||||
</div>
|
<!-- </div> -->
|
||||||
</div>
|
<!-- </div> -->
|
||||||
|
|
||||||
<div class="page-container page-body">
|
<div class="page-container page-body">
|
||||||
|
<div class="page-action-bar">
|
||||||
|
<div class="gf-form">
|
||||||
|
<label class="gf-form-label">Search</label>
|
||||||
|
<input type="text" class="gf-form-input width-20" ng-model="ctrl.searchQuery" ng-change="ctrl.onQueryUpdated()" />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="page-action-bar__spacer"></div>
|
||||||
|
<a class="btn btn-success" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank">
|
||||||
|
Find more plugins on Grafana.com
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
<section class="card-section" layout-mode>
|
<section class="card-section" layout-mode>
|
||||||
<layout-selector></layout-selector>
|
<layout-selector></layout-selector>
|
||||||
|
|
||||||
|
@ -1,34 +1,28 @@
|
|||||||
///<reference path="../../headers/common.d.ts" />
|
|
||||||
|
|
||||||
import angular from 'angular';
|
import angular from 'angular';
|
||||||
|
import _ from 'lodash';
|
||||||
|
|
||||||
export class PluginListCtrl {
|
export class PluginListCtrl {
|
||||||
plugins: any[];
|
plugins: any[];
|
||||||
tabIndex: number;
|
tabIndex: number;
|
||||||
navModel: any;
|
navModel: any;
|
||||||
|
searchQuery: string;
|
||||||
|
allPlugins: any[];
|
||||||
|
|
||||||
/** @ngInject */
|
/** @ngInject */
|
||||||
constructor(private backendSrv: any, $location, navModelSrv) {
|
constructor(private backendSrv: any, $location, navModelSrv) {
|
||||||
this.tabIndex = 0;
|
this.tabIndex = 0;
|
||||||
this.navModel = navModelSrv.getNav('cfg', 'plugins');
|
this.navModel = navModelSrv.getNav('cfg', 'plugins', 0);
|
||||||
|
|
||||||
var pluginType = $location.search().type || 'panel';
|
this.backendSrv.get('api/plugins', {embedded: 0}).then(plugins => {
|
||||||
switch (pluginType) {
|
|
||||||
case "datasource": {
|
|
||||||
this.tabIndex = 1;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "app": {
|
|
||||||
this.tabIndex = 2;
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
case "panel":
|
|
||||||
default:
|
|
||||||
this.tabIndex = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.backendSrv.get('api/plugins', {embedded: 0, type: pluginType}).then(plugins => {
|
|
||||||
this.plugins = plugins;
|
this.plugins = plugins;
|
||||||
|
this.allPlugins = plugins;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onQueryUpdated() {
|
||||||
|
let regex = new RegExp(this.searchQuery, 'ig');
|
||||||
|
this.plugins = _.filter(this.allPlugins, item => {
|
||||||
|
return regex.test(item.name) || regex.test(item.type);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -59,9 +59,6 @@
|
|||||||
margin-right: $spacer/2;
|
margin-right: $spacer/2;
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header-info-block {
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-header__sub-title {
|
.page-header__sub-title {
|
||||||
color: $text-muted;
|
color: $text-muted;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user