Merge pull request #4192 from bergquist/last_viewed_dashboards

feat(dashlist): list last x viewed dashboards

public/app/features/dashboard/all.js

@@ -16,4 +16,5 @@ define([
   './graphiteImportCtrl',
   './dynamicDashboardSrv',
   './importCtrl',
+  './impressionStore',
 ], function () {});

public/app/features/dashboard/dashboardLoaderSrv.js

@@ -5,8 +5,9 @@ define([
   'jquery',
   'app/core/utils/kbn',
   'app/core/utils/datemath',
+  './impressionStore',
 ],
-function (angular, moment, _, $, kbn, dateMath) {
+function (angular, moment, _, $, kbn, dateMath, impressionStore) {
   'use strict';
 
   var module = angular.module('grafana.services');
@@ -24,19 +25,27 @@ function (angular, moment, _, $, kbn, dateMath) {
     };
 
     this.loadDashboard = function(type, slug) {
-      if (type === 'script') {
+      var promise;
-        return this._loadScriptedDashboard(slug);
-      }
 
-      if (type === 'snapshot') {
+      if (type === 'script') {
-        return backendSrv.get('/api/snapshots/' + $routeParams.slug).catch(function() {
+        promise = this._loadScriptedDashboard(slug);
+      } else if (type === 'snapshot') {
+        promise = backendSrv.get('/api/snapshots/' + $routeParams.slug).catch(function() {
           return {meta:{isSnapshot: true, canSave: false, canEdit: false}, dashboard: {title: 'Snapshot not found'}};
         });
+      } else {
+        promise = backendSrv.getDashboard($routeParams.type, $routeParams.slug)
+          .catch(function() {
+            return self._dashboardLoadFailed("Not found");
+          });
       }
 
-      return backendSrv.getDashboard($routeParams.type, $routeParams.slug).catch(function() {
+      promise.then(function(result) {
-        return self._dashboardLoadFailed("Not found");
+        impressionStore.impressions.addDashboardImpression(slug);
+        return result;
       });
+
+      return promise;
     };
 
     this._loadScriptedDashboard = function(file) {

public/app/features/dashboard/impressionStore.ts

@@ -0,0 +1,41 @@
+///<reference path="../../headers/common.d.ts" />
+
+import store from 'app/core/store';
+import _ from 'lodash';
+
+export class ImpressionsStore {
+  constructor() {}
+
+  addDashboardImpression(slug) {
+    var impressions = [];
+    if (store.exists("dashboard_impressions")) {
+      impressions = JSON.parse(store.get("dashboard_impressions"));
+      if (!_.isArray(impressions)) {
+        impressions = [];
+      }
+    }
+
+    var exists = impressions.indexOf(slug);
+    if (exists >= 0) {
+      impressions.splice(exists, 1);
+    }
+
+    impressions.unshift(slug);
+
+    if (impressions.length > 20) {
+      impressions.shift();
+    }
+    store.set("dashboard_impressions", JSON.stringify(impressions));
+  }
+
+  getDashboardOpened() {
+    var k = store.get("dashboard_impressions");
+    return JSON.parse(k);
+  }
+}
+
+var impressions = new ImpressionsStore();
+
+export {
+  impressions
+};

public/app/plugins/panel/dashlist/module.html

@@ -5,7 +5,7 @@
 				{{dash.title}}
 			</span>
 			<span class="dashlist-star">
-				<i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': !dash.isStarred}"></i>
+				<i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
 			</span>
 		</a>
 	</div>

public/app/plugins/panel/dashlist/module.ts

@@ -3,6 +3,7 @@
 import _ from 'lodash';
 import config from 'app/core/config';
 import {PanelCtrl} from 'app/plugins/sdk';
+import {impressions} from 'app/features/dashboard/impressionStore';
 
  // Set and populate defaults
 var panelDefaults = {
@@ -31,7 +32,7 @@ class DashListCtrl extends PanelCtrl {
 
   initEditMode() {
     super.initEditMode();
-    this.modes = ['starred', 'search'];
+    this.modes = ['starred', 'search', 'last viewed'];
     this.icon = "fa fa-star";
     this.addEditorTab('Options', () => {
       return {templateUrl: 'public/app/plugins/panel/dashlist/editor.html'};
@@ -41,6 +42,19 @@ class DashListCtrl extends PanelCtrl {
   refresh() {
     var params: any = {limit: this.panel.limit};
 
+    if (this.panel.mode === 'last viewed') {
+      var dashListNames = _.first(impressions.getDashboardOpened(), this.panel.limit).map((dashboard) => {
+        return {
+          title: dashboard,
+          uri: 'db/' + dashboard
+        };
+      });
+
+      this.dashList = dashListNames;
+      this.renderingCompleted();
+      return;
+    }
+
     if (this.panel.mode === 'starred') {
       params.starred = "true";
     } else {

public/dashboards/home.json

@@ -47,11 +47,11 @@
         {
           "id": 3,
           "limit": 10,
-          "mode": "search",
+          "mode": "last viewed",
           "query": "",
           "span": 6,
           "tags": [],
-          "title": "Dashboards",
+          "title": "Last 10 viewed dashboards",
           "type": "dashlist"
         }
       ],