Skip to content

N
nexpie-grafana-theme
Commit 97be3c05 by Torkel Ödegaard
Options

feat(pluginlist panel): updates to pluginlist panel, hooked up plugin type categories

parent 4fd5552d
Showing with 19 additions and 12 deletions
public/app/plugins/panel/pluginlist/module.html
<div class="pluginlist"> <div class="pluginlist">
<h5 class="pluginlist-section-header pluginlist-section-header--first"><i class="icon-gf icon-gf-apps pluginlist-icon"></i>Installed Apps</h5> <div class="pluginlist-section" ng-repeat="category in ctrl.viewModel">
<div class="pluginlist-item" ng-repeat="plugin in ctrl.pluginList"> <h5 class="pluginlist-section-header">
<i class="icon-gf icon-gf-{{category.type}} pluginlist-icon"></i>
{{category.header}}
</h5>
<div class="pluginlist-item" ng-repeat="plugin in category.list">
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit"> <a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image"> <img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
<span class="pluginlist-title">{{plugin.name}}</span> <span class="pluginlist-title">{{plugin.name}}</span>
...@@ -16,16 +20,10 @@ ...@@ -16,16 +20,10 @@
</span> </span>
</a> </a>
</div> </div>
<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-panel pluginlist-icon"></i>Installed Panels</h5> <div class="pluginlist-item" ng-show="category.list.length === 0">
<div class="pluginlist-item">
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/"> <a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/">
<span class="pluginlist-none-installed">No additional panels installed. <span class="pluginlist-emphasis">Browse Grafana.net</span></span> <span class="pluginlist-none-installed">No additional panels installed. <span class="pluginlist-emphasis">Browse Grafana.net</span></span>
</a> </a>
</div> </div>
<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-datasources pluginlist-icon"></i>Installed Data Sources</h5>
<div class="pluginlist-item">
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/">
<span class="pluginlist-none-installed">No additional data sources installed. <span class="pluginlist-emphasis">Browse Grafana.net</span></span>
</a>
</div> </div>
</div> </div>
public/app/plugins/panel/pluginlist/module.ts
...@@ -12,6 +12,7 @@ class DashListCtrl extends PanelCtrl { ...@@ -12,6 +12,7 @@ class DashListCtrl extends PanelCtrl {
static templateUrl = 'module.html'; static templateUrl = 'module.html';
pluginList: any[]; pluginList: any[];
viewModel: any;
/** @ngInject */ /** @ngInject */
constructor($scope, $injector, private backendSrv) { constructor($scope, $injector, private backendSrv) {
...@@ -20,6 +21,11 @@ class DashListCtrl extends PanelCtrl { ...@@ -20,6 +21,11 @@ class DashListCtrl extends PanelCtrl {
this.events.on('init-edit-mode', this.onInitEditMode.bind(this)); this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
this.pluginList = []; this.pluginList = [];
this.viewModel = [
{header: "Installed Apps", list: [], type: 'app'},
{header: "Installed Panels", list: [], type: 'panel'},
{header: "Installed Datasources", list: [], type: 'datasource'},
];
this.update(); this.update();
} }
...@@ -31,6 +37,9 @@ class DashListCtrl extends PanelCtrl { ...@@ -31,6 +37,9 @@ class DashListCtrl extends PanelCtrl {
update() { update() {
this.backendSrv.get('api/plugins', {embedded: 0, core: 0}).then(plugins => { this.backendSrv.get('api/plugins', {embedded: 0, core: 0}).then(plugins => {
this.pluginList = 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) { for (let plugin of this.pluginList) {
if (!plugin.enabled) { if (!plugin.enabled) {
......
public/sass/components/_panel_pluginlist.scss
.pluginlist-section-header { .pluginlist-section-header {
margin: ($spacer * 2) 0 $spacer 0; margin-bottom: $spacer;
color: $text-color-weak; color: $text-color-weak;
} }
.pluginlist-section-header--first { .pluginlist-section {
margin-top: $spacer /2; margin-bottom: $spacer;
} }
.pluginlist-link { .pluginlist-link {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment