feat(dashlist): updated dashlist

public/app/core/components/switch.ts

@@ -27,11 +27,8 @@ export class SwitchCtrl {
   }
 
   internalOnChange() {
-    return new Promise(resolve => {
-      this.$timeout(() => {
-        this.onChange();
-        resolve();
-      });
+    return this.$timeout(() => {
+      return this.onChange();
     });
   }
 

public/app/features/panel/partials/panelTime.html

@@ -31,7 +31,7 @@
 		</div>
 		<gf-form-switch class="gf-form max-width-30"
 			label="Hide time override info" label-class="width-12"
-			checked="ctrl.panel.hideTimeOverride" switch-class="max-width-6" on-change="ctrl.render()">
+			checked="ctrl.panel.hideTimeOverride" switch-class="max-width-6" on-change="ctrl.refresh()">
 		</gf-form-switch>
 	</div>
 </div>

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

@@ -1,40 +1,32 @@
-<div class="gf-form-group">
-	<div class="gf-form-inline">
-		<div class="gf-form">
-			<span class="gf-form-label width-10">Mode</span>
-			<div class="gf-form-select-wrapper max-width-10">
-				<select class="gf-form-input" ng-model="ctrl.panel.mode" ng-options="f for f in ctrl.modes" ng-change="ctrl.refresh()"></select>
-			</div>
-		</div>
-		<div class="gf-form" ng-show="ctrl.panel.mode === 'recently viewed'">
-			<span class="gf-form-label">
-				<i class="grafana-tip fa fa-question-circle ng-scope" bs-tooltip="'WARNING: This list will be cleared when clearing browser cache'" data-original-title="" title=""></i>
-			</span>
-		</div>
-	</div>
+<div>
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Options</h5>
 
-	<div class="gf-form-inline" ng-if="ctrl.panel.mode === 'search'">
-		<div class="gf-form">
-			<span class="gf-form-label width-10">Search options</span>
-			<span class="gf-form-label">Query</span>
+    <gf-form-switch class="gf-form" label="Starred" label-class="width-9" checked="ctrl.panel.starred" on-change="ctrl.refresh()"></gf-form-switch>
+    <gf-form-switch class="gf-form" label="Recently viewed" label-class="width-9" checked="ctrl.panel.recent" on-change="ctrl.refresh()"></gf-form-switch>
+    <gf-form-switch class="gf-form" label="Search" label-class="width-9" checked="ctrl.panel.search" on-change="ctrl.refresh()"></gf-form-switch>
 
-			<input type="text" class="gf-form-input" placeholder="title query"
-				ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
+    <gf-form-switch class="gf-form" label="Show headings" label-class="width-9" checked="ctrl.panel.headings" on-change="ctrl.refresh()"></gf-form-switch>
 
-		</div>
+    <div class="gf-form">
+      <span class="gf-form-label width-9">Max items</span>
+      <input class="gf-form-input max-width-5" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()">
+    </div>
+  </div>
 
-		<div class="gf-form">
-			<span class="gf-form-label">Tags</span>
+  <div class="section gf-form-group">
+    <h5 class="section-heading">Search</h5>
 
-			<bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
-			</bootstrap-tagsinput>
-		</div>
-	</div>
+    <div class="gf-form">
+      <span class="gf-form-label width-6">Query</span>
+      <input type="text" class="gf-form-input" placeholder="title query" ng-model="ctrl.panel.query" ng-change="ctrl.refresh()" ng-model-onblur>
+    </div>
+
+    <div class="gf-form">
+      <span class="gf-form-label width-6">Tags</span>
+      <bootstrap-tagsinput ng-model="ctrl.panel.tags" tagclass="label label-tag" placeholder="add tags" on-tags-updated="ctrl.refresh()">
+      </bootstrap-tagsinput>
+    </div>
+  </div>
 
-	<div class="gf-form-inline">
-		<div class="gf-form">
-			<span class="gf-form-label width-10">Limit number to</span>
-			<input class="gf-form-input" type="number" ng-model="ctrl.panel.limit" ng-model-onblur ng-change="ctrl.refresh()">
-		</div>
-	</div>
 </div>

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

@@ -1,12 +1,17 @@
-<div class="dashlist">
-	<div class="dashlist-item" ng-repeat="dash in ctrl.dashList">
-		<a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}">
-			<span class="dashlist-title">
-				{{dash.title}}
-			</span>
-			<span class="dashlist-star">
-				<i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
-			</span>
-		</a>
-	</div>
+<div class="dashlist" ng-repeat="group in ctrl.groups">
+  <div class="dashlist-section" ng-if="group.show">
+    <h6 class="dashlist-section-header" ng-show="ctrl.panel.headings">
+      {{group.header}}
+    </h6>
+    <div class="dashlist-item" ng-repeat="dash in group.list">
+      <a class="dashlist-link dashlist-link-{{dash.type}}" href="dashboard/{{dash.uri}}">
+        <span class="dashlist-title">
+          {{dash.title}}
+        </span>
+        <span class="dashlist-star">
+          <i class="fa" ng-class="{'fa-star': dash.isStarred, 'fa-star-o': dash.isStarred === false}"></i>
+        </span>
+      </a>
+    </div>
+  </div>
 </div>

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

@@ -0,0 +1,91 @@
+///<reference path="../../../headers/common.d.ts" />
+"use strict";
+var __extends = (this && this.__extends) || function (d, b) {
+    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
+    function __() { this.constructor = d; }
+    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+};
+var lodash_1 = require('lodash');
+var sdk_1 = require('app/plugins/sdk');
+var impression_store_1 = require('app/features/dashboard/impression_store');
+// Set and populate defaults
+var panelDefaults = {
+    mode: 'starred',
+    query: '',
+    limit: 10,
+    tags: [],
+    recent: false,
+    search: false,
+    starred: true
+};
+var DashListCtrl = (function (_super) {
+    __extends(DashListCtrl, _super);
+    /** @ngInject */
+    function DashListCtrl($scope, $injector, backendSrv) {
+        _super.call(this, $scope, $injector);
+        this.backendSrv = backendSrv;
+        lodash_1["default"].defaults(this.panel, panelDefaults);
+        if (this.panel.tag) {
+            this.panel.tags = [this.panel.tag];
+            delete this.panel.tag;
+        }
+        this.events.on('refresh', this.onRefresh.bind(this));
+        this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
+    }
+    DashListCtrl.prototype.onInitEditMode = function () {
+        this.editorTabIndex = 1;
+        this.modes = ['starred', 'search', 'recently viewed'];
+        this.addEditorTab('Options', 'public/app/plugins/panel/dashlist/editor.html');
+    };
+    DashListCtrl.prototype.onRefresh = function () {
+        var promises = [];
+        if (this.panel.recent) {
+            promises.push(this.getRecentDashboards());
+        }
+        if (this.panel.starred) {
+            promises.push(this.getStarred());
+        }
+        if (this.panel.search) {
+            promises.push(this.getSearch());
+        }
+        return Promise.all(promises)
+            .then(this.renderingCompleted.bind(this));
+    };
+    DashListCtrl.prototype.getSearch = function () {
+        var _this = this;
+        var params = {
+            limit: this.panel.limit,
+            query: this.panel.query,
+            tag: this.panel.tags
+        };
+        return this.backendSrv.search(params).then(function (result) {
+            _this.dashList = result;
+            _this.renderingCompleted();
+        });
+    };
+    DashListCtrl.prototype.getStarred = function () {
+        var _this = this;
+        var params = { limit: this.panel.limit, starred: "true" };
+        return this.backendSrv.search(params).then(function (result) {
+            _this.dashList = result;
+            _this.renderingCompleted();
+        });
+    };
+    DashListCtrl.prototype.getRecentDashboards = function () {
+        var _this = this;
+        var dashIds = lodash_1["default"].first(impression_store_1.impressions.getDashboardOpened(), this.panel.limit);
+        return this.backendSrv.search({ dashboardIds: dashIds, limit: this.panel.limit }).then(function (result) {
+            _this.dashList = dashIds.map(function (orderId) {
+                return lodash_1["default"].find(result, function (dashboard) {
+                    return dashboard.id === orderId;
+                });
+            }).filter(function (el) {
+                return el !== undefined;
+            });
+        });
+    };
+    DashListCtrl.templateUrl = 'module.html';
+    return DashListCtrl;
+}(sdk_1.PanelCtrl));
+exports.DashListCtrl = DashListCtrl;
+exports.PanelCtrl = DashListCtrl;

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

@@ -7,16 +7,19 @@ import {impressions} from 'app/features/dashboard/impression_store';
 
  // Set and populate defaults
 var panelDefaults = {
-  mode: 'starred',
   query: '',
   limit: 10,
-  tags: []
+  tags: [],
+  recent: false,
+  search: false,
+  starred: true,
+  headings: true,
 };
 
 class DashListCtrl extends PanelCtrl {
   static templateUrl = 'module.html';
 
-  dashList: any[];
+  groups: any[];
   modes: any[];
 
   /** @ngInject */
@@ -31,6 +34,31 @@ class DashListCtrl extends PanelCtrl {
 
     this.events.on('refresh', this.onRefresh.bind(this));
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
+
+    this.groups = [
+      {list: [], show: false, header: "Starred dashboards",},
+      {list: [], show: false, header: "Recently viewed dashboards"},
+      {list: [], show: false, header: "Search"},
+    ];
+
+    // update capability
+    if (this.panel.mode) {
+      if (this.panel.mode === 'starred') {
+        this.panel.starred = true;
+        this.panel.headings = false;
+      }
+      if (this.panel.mode === 'recently viewed') {
+        this.panel.recent = true;
+        this.panel.starred = false;
+        this.panel.headings = false;
+      }
+      if (this.panel.mode === 'search') {
+        this.panel.search = true;
+        this.panel.starred = false;
+        this.panel.headings = false;
+      }
+      delete this.panel.mode;
+    }
   }
 
   onInitEditMode() {
@@ -40,34 +68,60 @@ class DashListCtrl extends PanelCtrl {
   }
 
   onRefresh() {
-    var params: any = {limit: this.panel.limit};
-
-    if (this.panel.mode === 'recently viewed') {
-      var dashIds = _.first(impressions.getDashboardOpened(), this.panel.limit);
-
-      return this.backendSrv.search({dashboardIds: dashIds, limit: this.panel.limit}).then(result => {
-        this.dashList = dashIds.map(orderId => {
-          return _.find(result, dashboard => {
-            return dashboard.id === orderId;
-          });
-        }).filter(el => {
-          return el !== undefined;
-        });
+    var promises = [];
 
-        this.renderingCompleted();
-      });
+    promises.push(this.getRecentDashboards());
+    promises.push(this.getStarred());
+    promises.push(this.getSearch());
+
+    return Promise.all(promises)
+      .then(this.renderingCompleted.bind(this));
+  }
+
+  getSearch() {
+    this.groups[2].show = this.panel.search;
+    if (!this.panel.search) {
+      return Promise.resolve();
     }
 
-    if (this.panel.mode === 'starred') {
-      params.starred = "true";
-    } else {
-      params.query = this.panel.query;
-      params.tag = this.panel.tags;
+    var params = {
+      limit: this.panel.limit,
+      query: this.panel.query,
+      tag: this.panel.tags,
+    };
+
+    return this.backendSrv.search(params).then(result => {
+      this.groups[2].list = result;
+    });
+  }
+
+  getStarred() {
+    this.groups[0].show = this.panel.starred;
+    if (!this.panel.starred) {
+      return Promise.resolve();
     }
 
+    var params = {limit: this.panel.limit, starred: "true"};
     return this.backendSrv.search(params).then(result => {
-      this.dashList = result;
-      this.renderingCompleted();
+      this.groups[0].list = result;
+    });
+  }
+
+  getRecentDashboards() {
+    this.groups[1].show = this.panel.recent;
+    if (!this.panel.recent) {
+      return Promise.resolve();
+    }
+
+    var dashIds = _.first(impressions.getDashboardOpened(), this.panel.limit);
+    return this.backendSrv.search({dashboardIds: dashIds, limit: this.panel.limit}).then(result => {
+      this.groups[1].list = dashIds.map(orderId => {
+        return _.find(result, dashboard => {
+          return dashboard.id === orderId;
+        });
+      }).filter(el => {
+        return el !== undefined;
+      });
     });
   }
 }

public/dashboards/home.json

@@ -9,65 +9,61 @@
   "hideControls": true,
   "sharedCrosshair": false,
   "rows": [
-    {
+   {
       "collapse": false,
       "editable": true,
-      "height": "90px",
+      "height": "25px",
       "panels": [
         {
           "content": "<div class=\"text-center dashboard-header\">\n  <span>Home Dashboard</span>\n</div>",
           "editable": true,
           "id": 1,
+          "links": [],
           "mode": "html",
           "span": 12,
           "style": {},
           "title": "",
           "transparent": true,
-          "type": "text",
-          "links": []
+          "type": "text"
         }
       ],
       "title": "New row"
-    },
-    {
+   },
+   {
       "collapse": false,
       "editable": true,
       "height": "510px",
       "panels": [
-        {
-          "id": 2,
-          "limit": 10,
-          "mode": "starred",
-          "query": "",
-          "span": 3.75,
-          "tags": [],
-          "title": "Starred dashboards",
-          "type": "dashlist"
-        },
         {
           "id": 3,
-          "limit": 10,
-          "mode": "recently viewed",
+          "limit": 4,
+          "links": [],
           "query": "",
-          "span": 3.75,
+          "span": 7,
           "tags": [],
-          "title": "Recently viewed dashboards",
-          "type": "dashlist"
+          "title": "",
+          "transparent": false,
+          "type": "dashlist",
+          "recent": true,
+          "search": false,
+          "starred": true,
+          "headings": true
         },
         {
-          "title": "",
-          "error": false,
-          "span": 4.5,
           "editable": true,
-          "type": "pluginlist",
-          "isNew": true,
+          "error": false,
           "id": 4,
-          "links": []
+          "isNew": true,
+          "links": [],
+          "span": 5,
+          "title": "",
+          "transparent": false,
+          "type": "pluginlist"
         }
       ],
       "title": "Row"
-    }
-  ],
+   }
+ ],
   "time": {
     "from": "now-6h",
     "to": "now"
@@ -105,7 +101,7 @@
   "annotations": {
     "list": []
   },
-  "schemaVersion": 9,
-  "version": 5,
+  "schemaVersion": 12,
+  "version": 2,
   "links": []
 }

public/sass/components/_panel_dashlist.scss

@@ -1,5 +1,11 @@
-.dashlist-item {
 
+.dashlist-section-header {
+  margin-bottom: $spacer;
+  color: $text-color-weak;
+}
+
+.dashlist-section {
+  margin-bottom: $spacer;
 }
 
 .dashlist-link {

public/sass/pages/_dashboard.scss

@@ -278,11 +278,11 @@ div.flot-text {
 
 .dashboard-header {
   font-family: $headings-font-family;
-  font-size: $font-size-h2;
+  font-size: $font-size-h3;
   text-align: center;
   span {
     display: inline-block;
     @include brand-bottom-border();
-    padding: 1.2rem .5rem .4rem .5rem;
+    padding: 0.5rem .5rem .2rem .5rem;
   }
 }

tsconfig.json

@@ -6,33 +6,13 @@
         "noImplicitAny": false,
         "target": "es5",
         "rootDir": "public/",
+        "sourceRoot": "public/",
         "module": "system",
         "noEmitOnError": true,
-        "emitDecoratorMetadata": true
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true
     },
     "files": [
-        "public/app/app.ts",
-        "public/app/core/controllers/grafana_ctrl.ts",
-        "public/app/core/controllers/signup_ctrl.ts",
-        "public/app/core/core.ts",
-        "public/app/core/core_module.ts",
-        "public/app/core/directives/array_join.ts",
-        "public/app/core/directives/give_focus.ts",
-        "public/app/core/filters/filters.ts",
-        "public/app/core/routes/bundle_loader.ts",
-        "public/app/core/table_model.ts",
-        "public/app/core/time_series.ts",
-        "public/app/core/utils/datemath.ts",
-        "public/app/core/utils/flatten.ts",
-        "public/app/core/utils/rangeutil.ts",
-        "public/app/features/dashboard/timepicker/timepicker.ts",
-        "public/app/features/panel/panel_meta.ts",
-        "public/app/plugins/datasource/influxdb/influx_query.ts",
-        "public/app/plugins/datasource/influxdb/query_part.ts",
-        "public/app/plugins/panels/table/controller.ts",
-        "public/app/plugins/panels/table/editor.ts",
-        "public/app/plugins/panels/table/module.ts",
-        "public/app/plugins/panels/table/renderer.ts",
-        "public/app/plugins/panels/table/transformers.ts"
+        "public/app/**/*.ts"
     ]
-}
+}