Small refactor to make hover highlighting proper, added a title tag for the completed grafana step. (#6882)

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

@@ -8,9 +8,11 @@
     </h6>
     <ul class="progress-tracker">
       <li class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
-        <a class="progress-marker" ng-href="{{step.href}}"><i class="{{step.icon}}"></i></a>
-        <a class="progress-text" ng-href="{{step.href}}">{{step.title}}</a>
-        <a class="btn progress-step-cta" ng-href="{{step.href}}">{{step.cta}}</a>
+        <a class="progress-link" ng-href="{{step.href}}" target="{{step.target}}" title="{{step.note}}">
+          <span class="progress-marker" ng-class="step.cssClass"><i class="{{step.icon}}"></i></span>
+          <span class="progress-text" ng-href="{{step.href}}" target="{{step.target}}">{{step.title}}</span>
+        </a>
+        <a class="btn progress-step-cta" ng-href="{{step.href}}" target="{{step.target}}">{{step.cta}}</a>
       </li>
     </ul>
   </div>

public/app/plugins/panel/gettingstarted/module.ts

@@ -20,6 +20,9 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     this.steps.push({
       title: 'Install Grafana',
       icon: 'icon-gf icon-gf-check',
+      href: 'http://docs.grafana.org/',
+      target: '_blank',
+      note: 'Review the installation docs',
       check: () => $q.when(true),
     });
 

public/sass/components/_panel_gettingstarted.scss

@@ -142,9 +142,6 @@ $path-position:             $marker-size-half - ($path-height / 2);
   color: $text-color-weak;
   font-size: 35px;
   vertical-align: sub;
-  &:hover {
-    color: $link-hover-color;
-  }
 }
 
 // Progress text
@@ -153,9 +150,6 @@ $path-position:             $marker-size-half - ($path-height / 2);
   overflow: hidden;
   text-overflow: ellipsis;
   color: $text-muted;
-  &:hover {
-    color: $link-hover-color;
-  }
 }
 
 .progress-marker {
@@ -164,3 +158,14 @@ $path-position:             $marker-size-half - ($path-height / 2);
   font-size: 35px;
   vertical-align: sub;
 }
+
+a.progress-link {
+  &:hover {
+    .progress-marker, .progress-text {
+      color: $link-hover-color;
+    }
+  &:hover .progress-marker.completed {
+      color: $online;
+    }
+  }
+}