public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New modal for upgrades and updated styles on list

Browse Source
This commit is contained in:
Matt Toback
2016-04-11 19:01:18 -04:00
parent 31441f0b43
commit f4fc3f48a7
10 changed files with 79 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
public/app/features/plugins/partials/update_instructions.html Normal file
View File

@@ -0,0 +1,21 @@
<div class="modal-body">
<div class="modal-header">
<h2 class="modal-header-title">
<i class="fa fa-cloud-download"></i>
<span class="p-l-1">Update Plugins</span>
</h2>
<a class="modal-header-close" ng-click="dismiss();">
<i class="fa fa-remove"></i>
</a>
</div>
<div class="modal-content">
<div class="gf-form-group">
<p>Type the following on the command line to update {{plugin.name}}.</p>
<pre><code>grafana-cli plugins update {{plugin.id}}</code></pre>
<span class="small">Check out {{plugin.name}} on <a href="http://grafana/net/plugins/{{plugin.id}}">Grafana.net</a> for README and changelog. If you do not have access to the command line, ask your Grafana administator.</span>
</div>
<p class="pluginlist-none-installed code--line"><img class="pluginlist-inline-logo" src="public/img/grafana_icon.svg"><strong>Pro tip</strong>: To update all plugins at once, type <code class="code--small">grafana-cli plugins update-all</code> on the command line.</div>
</div>
</div>

3
public/app/features/plugins/plugin_edit_ctrl.ts
View File

@@ -73,7 +73,7 @@ export class PluginEditCtrl {
case 'datasource': return 'icon-gf icon-gf-datasources';
case 'panel': return 'icon-gf icon-gf-panel';
case 'app': return 'icon-gf icon-gf-apps';
case 'page': return 'icon-gf icon-gf-share';
case 'page': return 'icon-gf icon-gf-endpoint-tiny';
case 'dashboard': return 'icon-gf icon-gf-dashboard';
}
}
@@ -142,4 +142,3 @@ export class PluginEditCtrl {
}
angular.module('grafana.controllers').controller('PluginEditCtrl', PluginEditCtrl);

91
public/app/plugins/panel/dashlist/module.js
View File

@@ -1,91 +0,0 @@
///<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;

16
public/app/plugins/panel/pluginlist/module.html
View File

@@ -4,20 +4,22 @@
{{category.header}}
</h6>
<div class="pluginlist-item" ng-repeat="plugin in category.list">
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
<span class="pluginlist-title">{{plugin.name}}</span>
<span class="pluginlist-version">v{{plugin.info.version}}</span>
<span class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate">
<div class="pluginlist-link pluginlist-link-{{plugin.state}} pointer" ng-click="ctrl.gotoPlugin(plugin)">
<a href="plugins/{{plugin.id}}/edit">
<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
<span class="pluginlist-title">{{plugin.name}}</span>
<span class="pluginlist-version">v{{plugin.info.version}}</span>
</a>
<a class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate" ng-click="ctrl.updateAvailable(plugin, $event)">
Update available!
</span>
</a>
<span class="pluginlist-message pluginlist-message--enable" ng-show="!plugin.enabled && !plugin.hasUpdate">
Enable now
</span>
<span class="pluginlist-message pluginlist-message--no-update" ng-show="plugin.enabled && !plugin.hasUpdate">
Up to date
</span>
</a>
</div>
</div>
<div class="pluginlist-item" ng-show="category.list.length === 0">
<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/">

22
public/app/plugins/panel/pluginlist/module.ts
View File

@@ -8,14 +8,14 @@ import {PanelCtrl} from '../../../features/panel/panel_ctrl';
var panelDefaults = {
};
class DashListCtrl extends PanelCtrl {
class PluginListCtrl extends PanelCtrl {
static templateUrl = 'module.html';
pluginList: any[];
viewModel: any;
/** @ngInject */
constructor($scope, $injector, private backendSrv) {
constructor($scope, $injector, private backendSrv, private $location) {
super($scope, $injector);
_.defaults(this.panel, panelDefaults);
@@ -35,6 +35,22 @@ class DashListCtrl extends PanelCtrl {
this.addEditorTab('Options', 'public/app/plugins/panel/pluginlist/editor.html');
}
gotoPlugin(plugin) {
this.$location.path(`plugins/${plugin.id}/edit`);
}
updateAvailable(plugin, $event) {
$event.stopPropagation();
var modalScope = this.$scope.$new(true);
modalScope.plugin = plugin;
this.publishAppEvent('show-modal', {
src: 'public/app/features/plugins/partials/update_instructions.html',
scope: modalScope
});
}
update() {
this.backendSrv.get('api/plugins', {embedded: 0, core: 0}).then(plugins => {
this.pluginList = plugins;
@@ -53,4 +69,4 @@ class DashListCtrl extends PanelCtrl {
}
}
export {DashListCtrl, DashListCtrl as PanelCtrl}
export {PluginListCtrl, PluginListCtrl as PanelCtrl}

3
public/sass/_variables.dark.scss
View File

@@ -70,6 +70,7 @@ $page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%
$link-color: darken($white,11%);
$link-color-disabled: darken($link-color,30%);
$link-hover-color: $white;
$external-link-color: $blue;
// Typography
// -------------------------
@@ -263,5 +264,3 @@ $checkboxImageUrl: '../img/checkbox.png';
$card-background: linear-gradient(135deg, #2f2f2f, #262626);
$card-background-hover: linear-gradient(135deg, #343434, #262626);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);

2
public/sass/_variables.light.scss
View File

@@ -76,6 +76,7 @@ $page-gradient: linear-gradient(60deg, transparent 70%, darken($page-bg, 4%) 98%
$link-color: $gray-1;
$link-color-disabled: lighten($link-color, 30%);
$link-hover-color: darken($link-color, 20%);
$external-link-color: $blue;
// Typography
// -------------------------
@@ -290,4 +291,3 @@ $checkboxImageUrl: '../img/checkbox_white.png';
$card-background: linear-gradient(135deg, $gray-5, $gray-6);
$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);

11
public/sass/base/_code.scss
View File

@@ -23,6 +23,16 @@ code {
white-space: nowrap;
}
code.code--small {
font-size: $font-size-xs;
padding: 5px;
margin: 0 2px;
}
p.code--line {
line-height: 1.8;
}
// Blocks of code
pre {
display: block;
@@ -49,4 +59,3 @@ pre {
border: 0;
}
}

2
public/sass/base/_type.scss
View File

@@ -114,7 +114,7 @@ hr {
small,
.small {
font-size: 85%;
font-size: $font-size-sm;
font-weight: normal;
}

17
public/sass/components/_panel_pluginlist.scss
View File

@@ -42,8 +42,17 @@
font-size: $font-size-sm;
}
.pluginlist-message--update {
&:hover {
border-bottom: 1px solid $text-color;
}
}
.pluginlist-message--enable{
color: $brand-success;
color: $external-link-color;
&:hover {
border-bottom: 1px solid $external-link-color;
}
}
.pluginlist-message--no-update {
@@ -58,3 +67,9 @@
color: $text-color-weak;
font-size: $font-size-sm;
}
.pluginlist-inline-logo {
vertical-align: sub;
margin-right: $spacer / 3;
width: 16px;
}