diff --git a/public/app/plugins/panel/pluginlist/module.html b/public/app/plugins/panel/pluginlist/module.html
index b8989f3040e..9ee9e2167cf 100644
--- a/public/app/plugins/panel/pluginlist/module.html
+++ b/public/app/plugins/panel/pluginlist/module.html
@@ -1,31 +1,29 @@
-
-
-
-
-
-
diff --git a/public/app/plugins/panel/pluginlist/module.ts b/public/app/plugins/panel/pluginlist/module.ts
index 86108a27961..015bd2ab340 100644
--- a/public/app/plugins/panel/pluginlist/module.ts
+++ b/public/app/plugins/panel/pluginlist/module.ts
@@ -12,6 +12,7 @@ class DashListCtrl extends PanelCtrl {
static templateUrl = 'module.html';
pluginList: any[];
+ viewModel: any;
/** @ngInject */
constructor($scope, $injector, private backendSrv) {
@@ -20,6 +21,11 @@ class DashListCtrl extends PanelCtrl {
this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
this.pluginList = [];
+ this.viewModel = [
+ {header: "Installed Apps", list: [], type: 'app'},
+ {header: "Installed Panels", list: [], type: 'panel'},
+ {header: "Installed Datasources", list: [], type: 'datasource'},
+ ];
this.update();
}
@@ -31,6 +37,9 @@ class DashListCtrl extends PanelCtrl {
update() {
this.backendSrv.get('api/plugins', {embedded: 0, core: 0}).then(plugins => {
this.pluginList = plugins;
+ this.viewModel[0].list = _.filter(plugins, {type: 'app'});
+ this.viewModel[1].list = _.filter(plugins, {type: 'panel'});
+ this.viewModel[2].list = _.filter(plugins, {type: 'datasource'});
for (let plugin of this.pluginList) {
if (!plugin.enabled) {
diff --git a/public/sass/components/_panel_pluginlist.scss b/public/sass/components/_panel_pluginlist.scss
index 90177b101f3..711565a9480 100644
--- a/public/sass/components/_panel_pluginlist.scss
+++ b/public/sass/components/_panel_pluginlist.scss
@@ -1,10 +1,10 @@
.pluginlist-section-header {
- margin: ($spacer * 2) 0 $spacer 0;
+ margin-bottom: $spacer;
color: $text-color-weak;
}
-.pluginlist-section-header--first {
- margin-top: $spacer /2;
+.pluginlist-section {
+ margin-bottom: $spacer;
}
.pluginlist-link {