New modal for upgrades and updated styles on list

public/app/features/plugins/partials/update_instructions.html

@@ -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>

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);
-

public/app/plugins/panel/dashlist/module.js

@@ -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;

public/app/plugins/panel/pluginlist/module.html

@@ -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">
+			<div class="pluginlist-link pluginlist-link-{{plugin.state}} pointer" ng-click="ctrl.gotoPlugin(plugin)">
-				<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
+				<a href="plugins/{{plugin.id}}/edit">
-				<span class="pluginlist-title">{{plugin.name}}</span>
+						<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
-				<span class="pluginlist-version">v{{plugin.info.version}}</span>
+						<span class="pluginlist-title">{{plugin.name}}</span>
-				<span class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate">
+						<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/">

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}

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);
-
-

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);
-

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;
   }
 }
-

public/sass/base/_type.scss

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

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;
+}