ux: more nav work

pkg/api/index.go

@@ -99,8 +99,8 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 
 	dashboardChildNavs := []*dtos.NavLink{
 		{Text: "Home", Url: setting.AppSubUrl + "/", Icon: "fa fa-fw fa-home"},
-		{Text: "Playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"},
-		{Text: "Snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-snapshot"},
+		{Text: "Playlists", Id: "playlists", Url: setting.AppSubUrl + "/playlists", Icon: "fa fa-fw fa-film"},
+		{Text: "Snapshots", Id: "snapshots", Url: setting.AppSubUrl + "/dashboard/snapshots", Icon: "icon-gf icon-gf-snapshot"},
 	}
 
 	data.NavTree = append(data.NavTree, &dtos.NavLink{
@@ -249,10 +249,11 @@ func setIndexViewData(c *middleware.Context) (*dtos.IndexViewData, error) {
 				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"},
+					{Text: "Global Users", Id: "global-users", Url: setting.AppSubUrl + "/admin/users"},
+					{Text: "Global 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 + "/admin/styleguide"},
 				},
 			})
 		}

public/app/core/components/gf_page.ts

@@ -0,0 +1,42 @@
+///<reference path="../../headers/common.d.ts" />
+
+import coreModule from 'app/core/core_module';
+
+const template = `
+<div class="scroll-canvas">
+  <navbar model="model"></navbar>
+   <div class="page-container">
+		<div class="page-header">
+      <h1>
+         <i class="{{::model.node.icon}}" ng-if="::model.node.icon"></i>
+         <img ng-src="{{::model.node.img}}" ng-if="::model.node.img"></i>
+         {{::model.node.text}}
+       </h1>
+
+      <div class="page-header__actions" ng-transclude="header"></div>
+		</div>
+
+    <div class="page-body" ng-transclude="body">
+    </div>
+  </div>
+</div>
+`;
+
+export function gfPageDirective() {
+  return {
+    restrict: 'E',
+    template: template,
+    scope: {
+      "model": "=",
+    },
+    transclude: {
+      'header': '?gfPageHeader',
+      'body': 'gfPageBody',
+    },
+    link: function(scope, elem, attrs) {
+      console.log(scope);
+    }
+  };
+}
+
+coreModule.directive('gfPage', gfPageDirective);

public/app/core/core.ts

@@ -52,6 +52,7 @@ import {NavModelSrv, NavModel} from './nav_model_srv';
 import {userPicker} from './components/user_picker';
 import {userGroupPicker} from './components/user_group_picker';
 import {geminiScrollbar} from './components/scroll/scroll';
+import {gfPageDirective} from './components/gf_page';
 
 export {
   arrayJoin,
@@ -83,4 +84,5 @@ export {
   userPicker,
   userGroupPicker,
   geminiScrollbar,
+  gfPageDirective
 };

public/app/features/admin/admin.ts

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

public/app/features/admin/adminEditOrgCtrl.js

@@ -9,7 +9,7 @@ function (angular) {
   module.controller('AdminEditOrgCtrl', function($scope, $routeParams, backendSrv, $location, navModelSrv) {
 
     $scope.init = function() {
-      $scope.navModel = navModelSrv.getAdminNav();
+      $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs');
 
       if ($routeParams.id) {
         $scope.getOrg($routeParams.id);

public/app/features/admin/adminEditUserCtrl.js

@@ -11,7 +11,7 @@ function (angular, _) {
     $scope.user = {};
     $scope.newOrg = { name: '', role: 'Editor' };
     $scope.permissions = {};
-    $scope.navModel = navModelSrv.getAdminNav();
+    $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-users');
 
     $scope.init = function() {
       if ($routeParams.id) {

public/app/features/admin/adminListOrgsCtrl.js

@@ -9,7 +9,7 @@ function (angular) {
   module.controller('AdminListOrgsCtrl', function($scope, backendSrv, navModelSrv) {
 
     $scope.init = function() {
-      $scope.navModel = navModelSrv.getAdminNav();
+      $scope.navModel = navModelSrv.getNav('cfg', 'admin', 'global-orgs');
       $scope.getOrgs();
     };
 

public/app/features/admin/admin_list_users_ctrl.ts

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

public/app/features/admin/partials/admin_home.html

@@ -2,30 +2,34 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>
-			Server Administration
-		</h1>
+		<page-h1 model="ctrl.navModel"></page-h1>
 	</div>
 
-	<a class="btn btn-inverse" href="admin/users">
-		Manage Users
-	</a>
-
-	<a class="btn btn-inverse" href="admin/orgs">
-		Manage Organizations
-	</a>
-
-	<a class="btn btn-inverse" href="admin/settings">
-		View Server Settings
-	</a>
-
-	<a class="btn btn-inverse" href="admin/stats">
-		View Server Stats
-	</a>
-
-	<a class="btn btn-inverse" href="styleguide">
-	  Style guide
-	</a>
+	<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>
 

public/app/features/admin/partials/configuration_home.html

@@ -1,12 +1,8 @@
-<navbar model="ctrl.navModel"></navbar>
-
 <div class="scroll-canvas">
+  <navbar model="ctrl.navModel"></navbar>
 	<div class="page-container">
 		<div class="page-header">
-			<h1>
-				<i class="fa fa-fw fa-cogs"></i>
-				<span>Configuration</span>
-			</h1>
+      <page-h1 model="ctrl.navModel"></page-h1>
 		</div>
 
 		<section class="card-section card-list-layout-grid">

public/app/features/playlist/partials/playlist.html

@@ -2,8 +2,7 @@
 
 <div class="page-container" ng-form="playlistEditForm">
 	<div class="page-header">
-		<h1 ng-show="ctrl.isNew()">New Playlist</h1>
-		<h1 ng-show="!ctrl.isNew()">Edit Playlist</h1>
+		<page-h1 model="ctrl.navModel"></page-h1>
 	</div>
 
 	<p class="playlist-description">A playlist rotates through a pre-selected list of Dashboards. A Playlist can be a great way to build situational awareness, or just show off your metrics to your team or visitors.</p>

public/app/features/playlist/partials/playlists.html

@@ -2,7 +2,7 @@
 
 <div class="page-container">
   <div class="page-header">
-    <h1>Saved playlists</h1>
+		<page-h1 model="ctrl.navModel"></page-h1>
     <a class="btn btn-success pull-right" href="playlists/create">
       <i class="fa fa-plus"></i>
       New Playlist
@@ -13,7 +13,7 @@
     <thead>
       <th><strong>Name</strong></th>
       <th><strong>Start url</strong></th>
-      <th style="width: 68px"></th>
+      <th style="width: 78px"></th>
       <th style="width: 78px"></th>
       <th style="width: 25px"></th>
     </thead>

public/app/features/playlist/playlist_edit_ctrl.ts

@@ -27,19 +27,23 @@ export class PlaylistEditCtrl {
     private $route,
     private navModelSrv
   ) {
-
-    this.navModel = navModelSrv.getPlaylistsNav(0);
+    this.navModel = navModelSrv.getNav('dashboards', 'playlists');
 
     if ($route.current.params.id) {
       var playlistId = $route.current.params.id;
 
       backendSrv.get('/api/playlists/' + playlistId).then(result => {
         this.playlist = result;
+        this.navModel.node = {text: result.name, icon: this.navModel.node.icon};
+        this.navModel.breadcrumbs.push(this.navModel.node);
       });
 
       backendSrv.get('/api/playlists/' + playlistId + '/items').then(result => {
         this.playlistItems = result;
       });
+    }  else {
+      this.navModel.node = {text: "New playlist", icon: this.navModel.node.icon};
+      this.navModel.breadcrumbs.push(this.navModel.node);
     }
   }
 

public/app/features/playlist/playlists_ctrl.ts

@@ -10,7 +10,7 @@ export class PlaylistsCtrl {
 
   /** @ngInject */
   constructor(private $scope, private $location, private backendSrv, private navModelSrv) {
-    this.navModel = navModelSrv.getPlaylistsNav(0);
+    this.navModel = navModelSrv.getNav('dashboards', 'playlists');
 
     backendSrv.get('/api/playlists').then(result => {
       this.playlists = result;

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

@@ -1,6 +1,5 @@
-<navbar model="ctrl.navModel"></navbar>
-
 <div class="scroll-canvas">
+  <navbar model="ctrl.navModel"></navbar>
 	<div class="page-container">
 		<div class="page-header">
 			<page-h1 model="ctrl.navModel"></page-h1>

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

@@ -1,7 +1,6 @@
-<navbar model="ctrl.navModel"></navbar>
-
 <div class="scroll-canvas">
-	<div class="page-container">
+  <navbar model="ctrl.navModel"></navbar>
+  <div class="page-container">
 		<div class="page-header">
 			<page-h1 model="ctrl.navModel"></page-h1>
 
@@ -48,3 +47,4 @@
 		</div>
 	</div>
 </div>
+

public/app/features/snapshot/partials/snapshots.html

@@ -2,20 +2,17 @@
 
 <div class="page-container">
   <div class="page-header">
-    <h1>Available snapshots</h1>
+		<page-h1 model="ctrl.navModel"></page-h1>
   </div>
 
-
    <table class="filter-table" style="margin-top: 20px">
     <thead>
       <th><strong>Name</strong></th>
       <th><strong>Snapshot url</strong></th>
       <th style="width: 70px"></th>
       <th style="width: 25px"></th>
-
-   </thead>
-
-    <tr ng-repeat="snapshot in ctrl.snapshots">
+		</thead>
+		<tr ng-repeat="snapshot in ctrl.snapshots">
       <td>
 				<a href="dashboard/snapshot/{{snapshot.key}}">{{snapshot.name}}</a>
       </td>

public/app/features/snapshot/snapshot_ctrl.ts

@@ -8,16 +8,8 @@ export class SnapshotsCtrl {
   snapshots: any;
 
   /** @ngInject */
-  constructor(private $rootScope, private backendSrv) {
-    this.navModel = {
-      section: {
-        title: 'Snapshots',
-        icon:  'icon-gf icon-gf-snapshot',
-        url: 'dashboard/snapshots',
-      },
-      menu: [],
-    };
-
+  constructor(private $rootScope, private backendSrv, navModelSrv) {
+    this.navModel = navModelSrv.getNav('dashboards', 'snapshots');
     this.backendSrv.get('/api/dashboard/snapshots').then(result => {
       this.snapshots = result;
     });

public/app/features/styleguide/styleguide.html

@@ -2,7 +2,7 @@
 
 <div class="page-container">
 	<div class="page-header">
-		<h1>Style Guide</h1>
+    <page-h1 model="ctrl.navModel"></page-h1>
 
 		<a class="btn btn-success" ng-click="ctrl.switchTheme()">
 			<i class="fa fa-random"></i>

public/app/features/styleguide/styleguide.ts

@@ -16,7 +16,7 @@ class StyleGuideCtrl {
 
   /** @ngInject **/
   constructor(private $http, private $routeParams, private $location, private backendSrv, navModelSrv) {
-    this.navModel = navModelSrv.getAdminNav();
+    this.navModel = navModelSrv.getNav('cfg', 'admin', 'styleguide');
     this.theme = config.bootData.user.lightTheme ? 'light': 'dark';
     this.page = {};
 

public/sass/components/_cards.scss

@@ -144,7 +144,7 @@
 
   .card-item-wrapper {
     width: 100%;
-    padding: 0 1.5rem 1.5rem 0rem;
+    padding: 0 1rem 1rem 0rem;
   }
 
   .card-item-wrapper--clickable {

public/sass/layout/_page.scss

@@ -25,8 +25,12 @@
 .scroll-canvas {
   position: absolute;
   width: 100%;
-  height: calc(100% - 54px);
   overflow: auto;
+  height: 100%;
+
+  &.dashboard-container {
+    height: calc(100% - 54px);
+  }
 }
 
 .page-body {