From f4fc3f48a73b0724c6578de8e1fd88c340451663 Mon Sep 17 00:00:00 2001 From: Matt Toback Date: Mon, 11 Apr 2016 19:01:18 -0400 Subject: [PATCH] New modal for upgrades and updated styles on list --- .../plugins/partials/update_instructions.html | 21 +++++ .../app/features/plugins/plugin_edit_ctrl.ts | 3 +- public/app/plugins/panel/dashlist/module.js | 91 ------------------- .../app/plugins/panel/pluginlist/module.html | 16 ++-- public/app/plugins/panel/pluginlist/module.ts | 22 ++++- public/sass/_variables.dark.scss | 3 +- public/sass/_variables.light.scss | 2 +- public/sass/base/_code.scss | 11 ++- public/sass/base/_type.scss | 2 +- public/sass/components/_panel_pluginlist.scss | 17 +++- 10 files changed, 79 insertions(+), 109 deletions(-) create mode 100644 public/app/features/plugins/partials/update_instructions.html delete mode 100644 public/app/plugins/panel/dashlist/module.js diff --git a/public/app/features/plugins/partials/update_instructions.html b/public/app/features/plugins/partials/update_instructions.html new file mode 100644 index 00000000000..7027ebf7154 --- /dev/null +++ b/public/app/features/plugins/partials/update_instructions.html @@ -0,0 +1,21 @@ +
+
+

+ + Update Plugins +

+ + + + +
+ +
+
+

Type the following on the command line to update {{plugin.name}}.

+ 
grafana-cli plugins update {{plugin.id}}
+ Check out {{plugin.name}} on Grafana.net for README and changelog. If you do not have access to the command line, ask your Grafana administator. +
+

Pro tip: To update all plugins at once, type grafana-cli plugins update-all on the command line.

+
+ diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index 7f3f6bff08f..fd6eed4e2cf 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -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); - diff --git a/public/app/plugins/panel/dashlist/module.js b/public/app/plugins/panel/dashlist/module.js deleted file mode 100644 index 5bc42c505fd..00000000000 --- a/public/app/plugins/panel/dashlist/module.js +++ /dev/null @@ -1,91 +0,0 @@ -/// -"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; diff --git a/public/app/plugins/panel/pluginlist/module.html b/public/app/plugins/panel/pluginlist/module.html index 05869911d73..44e32d19477 100644 --- a/public/app/plugins/panel/pluginlist/module.html +++ b/public/app/plugins/panel/pluginlist/module.html @@ -4,20 +4,22 @@ {{category.header}}
- - - {{plugin.name}} - v{{plugin.info.version}} - +
+ + + {{plugin.name}} + v{{plugin.info.version}} + + Update available! - + Enable now Up to date - +
diff --git a/public/app/plugins/panel/pluginlist/module.ts b/public/app/plugins/panel/pluginlist/module.ts index 9a9c544a7ec..9ad43b25e56 100644 --- a/public/app/plugins/panel/pluginlist/module.ts +++ b/public/app/plugins/panel/pluginlist/module.ts @@ -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} diff --git a/public/sass/_variables.dark.scss b/public/sass/_variables.dark.scss index 3a390e2f883..5c8fa703ffc 100644 --- a/public/sass/_variables.dark.scss +++ b/public/sass/_variables.dark.scss @@ -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); - - diff --git a/public/sass/_variables.light.scss b/public/sass/_variables.light.scss index 91b42c5c6be..9e7d3561e38 100644 --- a/public/sass/_variables.light.scss +++ b/public/sass/_variables.light.scss @@ -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); - diff --git a/public/sass/base/_code.scss b/public/sass/base/_code.scss index 2a4057a8547..464eed966ce 100644 --- a/public/sass/base/_code.scss +++ b/public/sass/base/_code.scss @@ -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; } } - diff --git a/public/sass/base/_type.scss b/public/sass/base/_type.scss index e819f71b540..904dfa13b4e 100644 --- a/public/sass/base/_type.scss +++ b/public/sass/base/_type.scss @@ -114,7 +114,7 @@ hr { small, .small { - font-size: 85%; + font-size: $font-size-sm; font-weight: normal; } diff --git a/public/sass/components/_panel_pluginlist.scss b/public/sass/components/_panel_pluginlist.scss index 0d02196e975..605e1afdb6a 100644 --- a/public/sass/components/_panel_pluginlist.scss +++ b/public/sass/components/_panel_pluginlist.scss @@ -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; +}