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 {
|
||||
profileNode := &dtos.NavLink{
|
||||
Text: c.SignedInUser.Login,
|
||||
Text: c.SignedInUser.Name,
|
||||
SubTitle: c.SignedInUser.Login,
|
||||
Id: "profile",
|
||||
Img: data.User.GravatarUrl,
|
||||
Url: setting.AppSubUrl + "/profile",
|
||||
HideFromMenu: true,
|
||||
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},
|
||||
},
|
||||
}
|
||||
|
||||
if !setting.DisableSignoutMenu {
|
||||
// add sign out first
|
||||
profileNode.Children = append([]*dtos.NavLink{
|
||||
{Text: "Sign out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self"},
|
||||
}, profileNode.Children...)
|
||||
profileNode.Children = append(profileNode.Children, &dtos.NavLink{
|
||||
Text: "Sign out", Id: "sign-out", Url: setting.AppSubUrl + "/logout", Icon: "fa fa-fw fa-sign-out", Target: "_self",
|
||||
})
|
||||
}
|
||||
|
||||
data.NavTree = append(data.NavTree, profileNode)
|
||||
|
@ -32,7 +32,8 @@
|
||||
<page-header model="navModel"></page-header>
|
||||
|
||||
<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">
|
||||
<div class="gf-form-inline">
|
||||
<div class="gf-form max-width-28">
|
||||
|
@ -1,16 +1,9 @@
|
||||
<div class="page-header-canvas">
|
||||
<div class="page-container">
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<page-header model="ctrl.navModel"></page-header>
|
||||
|
||||
<div class="page-container page-body">
|
||||
<h3 class="page-sub-heading">User Profile</h3>
|
||||
|
||||
<form name="ctrl.userForm" class="gf-form-group">
|
||||
<h3 class="page-heading">Information</h3>
|
||||
|
||||
<div class="gf-form max-width-30">
|
||||
<span class="gf-form-label width-8">Name</span>
|
||||
|
@ -49,7 +49,7 @@ export class PrefsControlCtrl {
|
||||
|
||||
var template = `
|
||||
<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">
|
||||
<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) {
|
||||
this.getUser();
|
||||
this.getUserOrgs();
|
||||
this.navModel = navModelSrv.getNav('profile');
|
||||
this.navModel = navModelSrv.getNav('profile', 'profile-settings', 0);
|
||||
}
|
||||
|
||||
getUser() {
|
||||
|
@ -1,42 +1,55 @@
|
||||
<page-header model="ctrl.navModel"></page-header>
|
||||
|
||||
<div class="page-header-canvas">
|
||||
<div class="page-container">
|
||||
<navbar model="ctrl.navModel"></navbar>
|
||||
|
||||
<div class="page-header">
|
||||
<page-h1 model="ctrl.navModel"></page-h1>
|
||||
|
||||
<div class="page-header-tabs">
|
||||
<ul class="gf-tabs">
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}">
|
||||
<i class="icon-gf icon-gf-panel"></i>
|
||||
Panels
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}">
|
||||
<i class="gicon gicon-datasources"></i>
|
||||
Data sources
|
||||
</a>
|
||||
</li>
|
||||
<li class="gf-tabs-item">
|
||||
<a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}">
|
||||
<i class="icon-gf icon-gf-apps"></i>
|
||||
Apps
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<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
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- <div class="page-header-canvas"> -->
|
||||
<!-- <div class="page-container"> -->
|
||||
<!-- <navbar model="ctrl.navModel"></navbar> -->
|
||||
<!-- -->
|
||||
<!-- <div class="page-header"> -->
|
||||
<!-- <page-h1 model="ctrl.navModel"></page-h1> -->
|
||||
<!-- -->
|
||||
<!-- <div class="page-header-tabs"> -->
|
||||
<!-- <ul class="gf-tabs"> -->
|
||||
<!-- <li class="gf-tabs-item"> -->
|
||||
<!-- <a class="gf-tabs-link" href="plugins?type=panel" ng-class="{active: ctrl.tabIndex === 0}"> -->
|
||||
<!-- <i class="icon-gf icon-gf-panel"></i> -->
|
||||
<!-- Panels -->
|
||||
<!-- </a> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li class="gf-tabs-item"> -->
|
||||
<!-- <a class="gf-tabs-link" href="plugins?type=datasource" ng-class="{active: ctrl.tabIndex === 1}"> -->
|
||||
<!-- <i class="gicon gicon-datasources"></i> -->
|
||||
<!-- Data sources -->
|
||||
<!-- </a> -->
|
||||
<!-- </li> -->
|
||||
<!-- <li class="gf-tabs-item"> -->
|
||||
<!-- <a class="gf-tabs-link" href="plugins?type=app" ng-class="{active: ctrl.tabIndex === 2}"> -->
|
||||
<!-- <i class="icon-gf icon-gf-apps"></i> -->
|
||||
<!-- Apps -->
|
||||
<!-- </a> -->
|
||||
<!-- </li> -->
|
||||
<!-- </ul> -->
|
||||
<!-- -->
|
||||
<!-- <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 -->
|
||||
<!-- </a> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
<!-- </div> -->
|
||||
|
||||
<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>
|
||||
<layout-selector></layout-selector>
|
||||
|
||||
|
@ -1,34 +1,28 @@
|
||||
///<reference path="../../headers/common.d.ts" />
|
||||
|
||||
import angular from 'angular';
|
||||
import _ from 'lodash';
|
||||
|
||||
export class PluginListCtrl {
|
||||
plugins: any[];
|
||||
tabIndex: number;
|
||||
navModel: any;
|
||||
searchQuery: string;
|
||||
allPlugins: any[];
|
||||
|
||||
/** @ngInject */
|
||||
constructor(private backendSrv: any, $location, navModelSrv) {
|
||||
this.tabIndex = 0;
|
||||
this.navModel = navModelSrv.getNav('cfg', 'plugins');
|
||||
this.navModel = navModelSrv.getNav('cfg', 'plugins', 0);
|
||||
|
||||
var pluginType = $location.search().type || 'panel';
|
||||
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.backendSrv.get('api/plugins', {embedded: 0}).then(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;
|
||||
}
|
||||
|
||||
.page-header-info-block {
|
||||
}
|
||||
|
||||
.page-header__sub-title {
|
||||
color: $text-muted;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user