feat(pluginlist): worked on plugin list

pkg/plugins/update_checker.go

@@ -26,7 +26,10 @@ func StartPluginUpdateChecker() {
 		return
 	}
 
-	ticker := time.NewTicker(time.Second * 24)
+	// do one check directly
+	go checkForUpdates()
+
+	ticker := time.NewTicker(time.Minute * 10)
 	for {
 		select {
 		case <-ticker.C:

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

@@ -56,9 +56,7 @@
         <h4>Version</h4>
         <span>{{ctrl.model.info.version}}</span>
 				<div ng-show="ctrl.model.hasUpdate">
-					<a href="https://grafana.net/plugins/{{ctrl.model.id}}" target="_blank">
-						Update Available!
-					</a>
+          <a ng-click="ctrl.updateAvailable()" bs-tooltip="ctrl.model.latestVersion">Update Available!</a>
 				</div>
       </section>
       <section class="page-sidebar-section" ng-show="ctrl.model.type === 'app'">

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

@@ -2,7 +2,7 @@
 	<div class="modal-header">
 		<h2 class="modal-header-title">
 			<i class="fa fa-cloud-download"></i>
-			<span class="p-l-1">Update Plugins</span>
+			<span class="p-l-1">Update Plugin</span>
 		</h2>
 
 		<a class="modal-header-close" ng-click="dismiss();">

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -19,6 +19,7 @@ export class PluginEditCtrl {
 
   /** @ngInject */
   constructor(private $scope,
+              private $rootScope,
               private backendSrv,
               private $routeParams,
               private $sce,
@@ -128,6 +129,16 @@ export class PluginEditCtrl {
     this.postUpdateHook = callback;
   }
 
+  updateAvailable() {
+    var modalScope = this.$scope.$new(true);
+    modalScope.plugin = this.model;
+
+    this.$rootScope.appEvent('show-modal', {
+      src: 'public/app/features/plugins/partials/update_instructions.html',
+      scope: modalScope
+    });
+  }
+
   enable() {
     this.model.enabled = true;
     this.model.pinned = true;

public/app/plugins/panel/graph/graph_tooltip.js

@@ -9,7 +9,7 @@ function ($) {
     var ctrl = scope.ctrl;
     var panel = ctrl.panel;
 
-    var $tooltip = $('<div id="tooltip">');
+    var $tooltip = $('<div id="tooltip" class="graph-tooltip">');
 
     this.findHoverIndexFromDataPoints = function(posX, series, last) {
       var ps = series.datapoints.pointsize;
@@ -34,7 +34,7 @@ function ($) {
     };
 
     this.showTooltip = function(absoluteTime, innerHtml, pos) {
-      var body = '<div class="graph-tooltip small"><div class="graph-tooltip-time">'+ absoluteTime + '</div> ';
+      var body = '<div class="graph-tooltip-time">'+ absoluteTime + '</div>';
       body += innerHtml + '</div>';
       $tooltip.html(body).place_tt(pos.pageX + 20, pos.pageY);
     };

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

@@ -10,7 +10,7 @@
 						<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)">
+				<a class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate" ng-click="ctrl.updateAvailable(plugin, $event)" bs-tooltip="plugin.latestVersion">
 					Update available!
 				</a>
 				<span class="pluginlist-message pluginlist-message--enable" ng-show="!plugin.enabled && !plugin.hasUpdate">

public/sass/_variables.dark.scss

@@ -242,14 +242,6 @@ $successBackground:       $btn-success-bg;
 $infoText:                $blue-dark;
 $infoBackground:          $blue-dark;
 
-// Tooltips and popovers
-// -------------------------
-$tooltipColor:            $text-color;
-$tooltipBackground:       $dark-4;
-$tooltipArrowWidth:       5px;
-$tooltipArrowColor:       $tooltipBackground;
-$tooltipLinkColor:        $link-color;
-
 // popover
 $popover-bg:         $dark-4;
 $popover-color:      $text-color;
@@ -257,6 +249,16 @@ $popover-color:      $text-color;
 $popover-help-bg:         $btn-secondary-bg;
 $popover-help-color:      $text-color;
 
+
+// Tooltips and popovers
+// -------------------------
+$tooltipColor:            $text-color;
+$tooltipBackground:       $dark-5;
+$tooltipArrowWidth:       5px;
+$tooltipArrowColor:       $tooltipBackground;
+$tooltipLinkColor:        $link-color;
+$graph-tooltip-bg:        $dark-5;
+
 // images
 $checkboxImageUrl: '../img/checkbox.png';
 

public/sass/_variables.light.scss

@@ -268,6 +268,12 @@ $infoText:                $blue;
 $infoBackground:          $blue-dark;
 $infoBorder:              transparent;
 
+// popover
+$popover-bg:              $gray-5;
+$popover-color:           $text-color;
+
+$popover-help-bg:         $blue-dark;
+$popover-help-color:      $gray-6;
 
 // Tooltips and popovers
 // -------------------------
@@ -275,14 +281,8 @@ $tooltipColor:            $text-color;
 $tooltipBackground:       $gray-5;
 $tooltipArrowWidth:       5px;
 $tooltipArrowColor:       $tooltipBackground;
-$tooltipLinkColor:        $text-color;
-
-// popover
-$popover-bg:         $gray-5;
-$popover-color:      $text-color;
-
-$popover-help-bg:         $blue-dark;
-$popover-help-color:      $gray-6;
+$tooltipLinkColor:        $link-color;
+$graph-tooltip-bg:        $gray-5;
 
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';

public/sass/components/_panel_graph.scss

@@ -234,6 +234,8 @@
 
 .graph-tooltip {
   white-space: nowrap;
+  font-size: $font-size-sm;
+  background-color: $graph-tooltip-bg;
 
   .graph-tooltip-time {
     text-align: center;

public/sass/components/_tooltip.scss

@@ -2,7 +2,6 @@
 // Tooltips
 // --------------------------------------------------
 
-
 // Base class
 .tooltip {
   position: absolute;
@@ -37,6 +36,7 @@
   border-color: transparent;
   border-style: solid;
 }
+
 .tooltip {
   &.top .tooltip-arrow {
     bottom: 0;