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 38 additions and 31 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">
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit"> <i class="icon-gf icon-gf-{{category.type}} pluginlist-icon"></i>
<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image"> {{category.header}}
<span class="pluginlist-title">{{plugin.name}}</span> </h5>
<span class="pluginlist-version">v{{plugin.info.version}}</span> <div class="pluginlist-item" ng-repeat="plugin in category.list">
<span class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate"> <a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
Update available! <img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
</span> <span class="pluginlist-title">{{plugin.name}}</span>
<span class="pluginlist-message pluginlist-message--enable" ng-show="!plugin.enabled"> <span class="pluginlist-version">v{{plugin.info.version}}</span>
Enable now <span class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate">
</span> Update available!
<span class="pluginlist-message pluginlist-message--no-update" ng-show="plugin.enabled && !plugin.hasUpdate"> </span>
Up to date <span class="pluginlist-message pluginlist-message--enable" ng-show="!plugin.enabled">
</span> Enable now
</a> </span>
</div> <span class="pluginlist-message pluginlist-message--no-update" ng-show="plugin.enabled && !plugin.hasUpdate">
<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-panel pluginlist-icon"></i>Installed Panels</h5> Up to date
<div class="pluginlist-item"> </span>
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/"> </a>
<span class="pluginlist-none-installed">No additional panels installed. <span class="pluginlist-emphasis">Browse Grafana.net</span></span> </div>
</a> <div class="pluginlist-item" ng-show="category.list.length === 0">
</div> <a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/">
<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-datasources pluginlist-icon"></i>Installed Data Sources</h5> <span class="pluginlist-none-installed">No additional panels installed. <span class="pluginlist-emphasis">Browse Grafana.net</span></span>
<div class="pluginlist-item"> </a>
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/"> </div>
<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