A start on a dashboard list panel, can now list starred dashboards

src/app/components/settings.js

@@ -16,23 +16,19 @@ function (_, crypto) {
       datasources                   : {},
       window_title_prefix           : 'Grafana - ',
       panels                        : {
-        'graph':      { path: 'panels/graph' },
-        'singlestat': { path: 'panels/singlestat' },
-        'text':       { path: 'panels/text' },
-        'starred':    { path: 'panels/starred', hide: true },
+        'graph':      { path: 'panels/graph',      name: 'Graph' },
+        'singlestat': { path: 'panels/singlestat', name: 'Single stat' },
+        'text':       { path: 'panels/text',       name: 'Text' },
+        'dashlist':   { path: 'panels/dashlist',   name: 'Dashboard list' },
       },
-      plugins                       : {},
-      default_route                 : '/dashboard/file/default.json',
-      playlist_timespan             : "1m",
-      unsaved_changes_warning       : true,
-      search                        : { max_results: 100 },
-      admin                         : {},
-      appSubUrl: "",
-      buildInfo: {
-        version: 'master',
-        commit: 'NA',
-        buildstamp: new Date().getTime()
-      }
+      new_panel_title: 'no title (click here)',
+      plugins: {},
+      default_route: '/dashboard/file/default.json',
+      playlist_timespan: "1m",
+      unsaved_changes_warning: true,
+      search: { max_results: 100 },
+      admin: {},
+      appSubUrl: ""
     };
 
     var settings = _.extend({}, defaults, options);

src/app/features/dashboard/dashboardCtrl.js

@@ -4,7 +4,7 @@ define([
   'config',
   'lodash',
 ],
-function (angular, $, config, _) {
+function (angular, $, config) {
   "use strict";
 
   var module = angular.module('grafana.controllers');
@@ -20,11 +20,11 @@ function (angular, $, config, _) {
       $timeout) {
 
     $scope.editor = { index: 0 };
-    $scope.panelNames = _.map(config.panels, function(value, key) { return key; });
+    $scope.panels = config.panels;
+
     var resizeEventTimeout;
 
     this.init = function(dashboard) {
-      $scope.availablePanels = config.panels;
       $scope.reset_row();
       $scope.registerWindowResizeEvent();
       $scope.onAppEvent('show-json-editor', $scope.showJsonEditor);

src/app/features/dashboard/rowCtrl.js

@@ -1,9 +1,10 @@
 define([
   'angular',
   'app',
-  'lodash'
+  'lodash',
+  'config'
 ],
-function (angular, app, _) {
+function (angular, app, _, config) {
   'use strict';
 
   var module = angular.module('grafana.controllers');
@@ -107,11 +108,11 @@ function (angular, app, _) {
       var _as = 12 - $scope.dashboard.rowSpan($scope.row);
 
       $scope.panel = {
-        title: 'no title (click here)',
-        error   : false,
-        span    : _as < defaultSpan && _as > 0 ? _as : defaultSpan,
+        title: config.new_panel_title,
+        error: false,
+        span: _as < defaultSpan && _as > 0 ? _as : defaultSpan,
         editable: true,
-        type    : type
+        type: type
       };
 
       function fixRowHeight(height) {

src/app/features/panel/panelSrv.js

@@ -1,8 +1,9 @@
 define([
   'angular',
   'lodash',
+  'config',
 ],
-function (angular, _) {
+function (angular, _, config) {
   'use strict';
 
   var module = angular.module('grafana.services');
@@ -77,6 +78,10 @@ function (angular, _) {
         $scope.editorHelpIndex = index;
       };
 
+      $scope.isNewPanel = function() {
+        return $scope.panel.title === config.new_panel_title;
+      };
+
       $scope.toggleFullscreen = function(edit) {
         $scope.dashboardViewState.update({ fullscreen: true, edit: edit, panelId: $scope.panel.id });
       };

src/app/panels/dashlist/module.html

@@ -0,0 +1,13 @@
+<grafana-panel>
+	<div class="dashlist">
+	<div class="dashlist-item" ng-repeat="dash in dashList">
+		<a class="dashlist-link" href="{{dash.url}}">
+			<span class="dashlist-title">
+				{{dash.title}}
+			</span>
+			<span class="dashlist-star">
+				<i class="fa fa-star"></i>
+			</span>
+		</a>
+	</div>
+</grafana-panel>

src/app/panels/dashlist/module.js

@@ -0,0 +1,56 @@
+define([
+  'angular',
+  'app',
+  'lodash',
+  'config',
+  'components/panelmeta',
+],
+function (angular, app, _, config, PanelMeta) {
+  'use strict';
+
+  var module = angular.module('grafana.panels.dashlist', []);
+  app.useModule(module);
+
+  module.directive('grafanaPanelDashlist', function() {
+    return {
+      controller: 'DashListPanelCtrl',
+      templateUrl: 'app/panels/dashlist/module.html',
+    };
+  });
+
+  module.controller('DashListPanelCtrl', function($scope, panelSrv, backendSrv) {
+
+    $scope.panelMeta = new PanelMeta({
+      panelName: 'Dash list',
+      editIcon:  "fa fa-star",
+      fullscreen: true,
+    });
+
+    var defaults = {
+    };
+
+    _.defaults($scope.panel, defaults);
+
+    $scope.dashList = [];
+
+    $scope.init = function() {
+      panelSrv.init($scope);
+
+
+      if ($scope.isNewPanel()) {
+        $scope.panel.title = "Starred Dashboards";
+      }
+
+      $scope.$on('refresh', $scope.get_data);
+    };
+
+    $scope.get_data = function() {
+      backendSrv.get('/api/search', { starred: 1 }).then(function(result) {
+        $scope.dashList = result.dashboards;
+        $scope.panelMeta.loading = false;
+      });
+    };
+
+    $scope.init();
+  });
+});

src/app/panels/starred/module.html

@@ -1,3 +0,0 @@
-<grafana-panel>
-	<h2>Starred</h2>
-</grafana-panel>

src/app/panels/starred/module.js

@@ -1,33 +0,0 @@
-define([
-  'angular',
-  'app',
-  'components/panelmeta',
-],
-function (angular, app, PanelMeta) {
-  'use strict';
-
-  var module = angular.module('grafana.panels.starred', []);
-  app.useModule(module);
-
-  module.directive('grafanaPanelStarred', function() {
-    return {
-      controller: 'StarredPanelCtrl',
-      templateUrl: 'app/panels/starred/module.html',
-    };
-  });
-
-  module.controller('StarredPanelCtrl', function($scope, panelSrv) {
-
-    $scope.panelMeta = new PanelMeta({
-      panelName: 'Starred',
-      editIcon:  "fa fa-star",
-      fullscreen: true,
-    });
-
-    $scope.init = function() {
-      panelSrv.init($scope);
-    };
-
-    $scope.init();
-  });
-});

src/app/partials/dashboard.html

@@ -35,8 +35,8 @@
 								<li class="dropdown-submenu">
 									<a href="javascript:void(0);">Add Panel</a>
 									<ul class="dropdown-menu">
-										<li bindonce ng-repeat="name in panelNames">
-											<a ng-click="add_panel_default(name)" bo-text="name"></a>
+										<li bindonce ng-repeat="(key, value) in panels">
+											<a ng-click="add_panel_default(key)" bo-text="value.name"></a>
 										</li>
 									</ul>
 								</li>

src/css/less/dashlist.less

@@ -0,0 +1,16 @@
+.dashlist-item {
+
+}
+
+.dashlist-link {
+  display: block;
+  margin: 5px;
+  padding: 7px;
+  background-color: @grafanaTargetBackground;
+  border: 1px solid @grafanaTargetBorder;
+  .fa {
+    float: right;
+    color: @orange;
+    padding-top: 3px;
+  }
+}

src/css/less/grafana.less

@@ -11,6 +11,7 @@
 @import "sidemenu.less";
 @import "gfbox.less";
 @import "navbar.less";
+@import "dashlist.less";
 
 .row-control-inner {
   padding:0px;

src/css/less/navbar.less

@@ -3,8 +3,8 @@
 }
 
 .navbar .nav>li>a {
-  padding: 19px 15px 8px;
-  .fa { font-size: 130%; }
+  padding: 17px 15px 11px;
+  .fa { font-size: 115%; }
 }
 
 .top-nav {
@@ -12,7 +12,7 @@
 }
 
 .fa.top-nav-breadcrumb-icon {
-  margin: 17px 21px 8px 0px;
+  margin: 15px 21px 8px 0px;
   float: left;
   font-size: 160%;
   color: @textColor;
@@ -37,13 +37,13 @@
     font-size: 150%;
     opacity: 0;
     position: absolute;
-    transition: opacity .25s ease-in-out;
+    transition: opacity .35s ease-in-out;
   }
   img {
     width: 30px;
     position: absolute;
     opacity: 1;
-    transition: opacity .25s ease-in-out;
+    transition: opacity .35s ease-in-out;
   }
   &:hover {
     .fa {
@@ -58,7 +58,7 @@
 .top-nav-dashboards-btn {
   display: block;
   float: left;
-  margin: 10px 8px 5px 14px;
+  margin: 9px 8px 5px 14px;
   border-radius: 3px;
   font-size: 1.4em;
   font-weight: bold;
@@ -113,7 +113,7 @@
 .top-nav-title {
   display: block;
   float: left;
-  padding: 18px 10px 10px 0px;
+  padding: 16px 10px 10px 0px;
   font-size: 1.3em;
   font-weight: bold;
   i {

src/dashboards/home.json

@@ -1,5 +1,5 @@
 {
-  "title": "Grafana Home",
+  "title": "Home",
   "tags": [],
   "style": "dark",
   "timezone": "browser",
@@ -24,13 +24,19 @@
       ]
     },
     {
-      "height": "210px",
+      "height": "410px",
       "panels": [
         {
           "id": 2,
           "span": 6,
-          "type": "starred",
+          "type": "dashlist",
           "title": "Starred dashboards"
+        },
+        {
+          "id": 3,
+          "span": 6,
+          "type": "dashlist",
+          "title": "Previously visited dashboards"
         }
       ]
     }