ux: new page header progress

pkg/api/index.go

@@ -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)

public/app/features/org/partials/orgDetails.html

@@ -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">

public/app/features/org/partials/profile.html

@@ -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>

public/app/features/org/prefs_control.ts

@@ -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>

public/app/features/org/profile_ctrl.ts

@@ -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() {

public/app/features/plugins/partials/plugin_list.html

@@ -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&#45;header&#45;canvas"> -->
+<!--   <div class="page&#45;container"> -->
+<!--     <navbar model="ctrl.navModel"></navbar> -->
+<!--  -->
+<!--     <div class="page&#45;header"> -->
+<!-- 		  <page&#45;h1 model="ctrl.navModel"></page&#45;h1> -->
+<!--  -->
+<!--       <div class="page&#45;header&#45;tabs"> -->
+<!--         <ul class="gf&#45;tabs"> -->
+<!--           <li class="gf&#45;tabs&#45;item"> -->
+<!--             <a class="gf&#45;tabs&#45;link" href="plugins?type=panel" ng&#45;class="{active: ctrl.tabIndex === 0}"> -->
+<!--               <i class="icon&#45;gf icon&#45;gf&#45;panel"></i> -->
+<!--               Panels -->
+<!--             </a> -->
+<!--           </li> -->
+<!--           <li class="gf&#45;tabs&#45;item"> -->
+<!--             <a class="gf&#45;tabs&#45;link" href="plugins?type=datasource" ng&#45;class="{active: ctrl.tabIndex === 1}"> -->
+<!--               <i class="gicon gicon&#45;datasources"></i> -->
+<!--               Data sources -->
+<!--             </a> -->
+<!--           </li> -->
+<!--           <li class="gf&#45;tabs&#45;item"> -->
+<!--             <a class="gf&#45;tabs&#45;link" href="plugins?type=app" ng&#45;class="{active: ctrl.tabIndex === 2}"> -->
+<!--               <i class="icon&#45;gf icon&#45;gf&#45;apps"></i> -->
+<!--               Apps -->
+<!--             </a> -->
+<!--           </li> -->
+<!--         </ul> -->
+<!--  -->
+<!--         <a class="get&#45;more&#45;plugins&#45;link pull&#45;right" href="https://grafana.com/plugins?utm_source=grafana_plugin_list" target="_blank"> -->
+<!--           Find more <img src="public/img/icn&#45;plugins&#45;tiny.svg" />plugins on Grafana.com -->
+<!--         </a> -->
+<!--       </div> -->
+<!--     </div> -->
+<!--   </div> -->
+<!-- </div> -->
 
-    <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 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>
-</div>
 
-<div class="page-container page-body">
+    <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>
 

public/app/features/plugins/plugin_list_ctrl.ts

@@ -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');
-
-    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.navModel = navModelSrv.getNav('cfg', 'plugins', 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);
     });
   }
 }

public/sass/components/_page_header.scss

@@ -59,9 +59,6 @@
   margin-right: $spacer/2;
 }
 
-.page-header-info-block {
-}
-
 .page-header__sub-title {
   color: $text-muted;
 }