ux(gettingstarted): progress on getting started panel, #6466

public/app/features/plugins/ds_edit_ctrl.ts

@@ -28,6 +28,7 @@ export class DataSourceEditCtrl {
   tabIndex: number;
   hasDashboards: boolean;
   editForm: any;
+  gettingStarted: boolean;
 
   /** @ngInject */
   constructor(
@@ -46,12 +47,23 @@ export class DataSourceEditCtrl {
         if (this.$routeParams.id) {
           this.getDatasourceById(this.$routeParams.id);
         } else {
-          this.current = angular.copy(defaults);
-          this.typeChanged();
+          this.initNewDatasourceModel();
         }
       });
     }
 
+    initNewDatasourceModel() {
+      this.current = angular.copy(defaults);
+
+      // We are coming from getting started
+      if (this.$location.search().gettingstarted) {
+        this.gettingStarted = true;
+        this.current.isDefault = true;
+      }
+
+      this.typeChanged();
+    }
+
     loadDatasourceTypes() {
       if (datasourceTypes.length > 0) {
         this.types = datasourceTypes;

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

@@ -1,4 +1,4 @@
-<div class="dashlist">
+<div class="dashlist" ng-if="ctrl.checksDone">
   <div class="dashlist-section">
     <h6 class="dashlist-section-header">
       Getting Started with Grafana
@@ -6,38 +6,30 @@
         <i class="fa fa-remove"></i>
       </button>
     </h6>
-    <ul class="progress-tracker" ng-if="ctrl.checksDone">
+    <ul class="progress-tracker">
       <li class="progress-step completed">
-        <span class="progress-marker"><i class="icon-gf icon-gf-check gettingstarted-icon-success"></i></span>
-        <span class="progress-text"><span class="gettingstarted-blurb-success">Install Grafana</span></span>
+        <span class="progress-marker"><i class="icon-gf icon-gf-check"></i></span>
+        <span class="progress-text">Install Grafana</span>
       </li>
-      <li class="progress-step active" ng-if="!ctrl.hasDatasources">
-        <span class="progress-marker"><i class="icon-gf icon-gf-datasources gettingstarted-icon-active"></i></span>
-        <span class="progress-text">
-          <a href="#" class="gettingstarted-blurb">Create your first data source.</a>
-          <button class="btn btn-success btn-small">Add Data Source</button>
-        </span>
+      <li class="progress-step" ng-class="ctrl.getStateClass(2)">
+        <span class="progress-marker"><i class="icon-gf icon-gf-datasources"></i></span>
+        <span class="progress-text">Create your first data source</span>
+        <a class="btn progress-step-cta" href="datasources/new?gettingstarted">Add Data Source</a>
       </li>
-      <li class="progress-step completed" ng-if="ctrl.hasDatasources">
-        <span class="progress-marker"><i class="icon-gf icon-gf-check gettingstarted-icon-success"></i></span>
-        <span class="progress-text">
-          <span class="gettingstarted-blurb-success">Create your first data source.</span>
-        </span>
-      </li>
-      <li class="progress-step active" ng-if="ctrl.hasDatasources">
-        <span class="progress-marker"><i class="icon-gf icon-gf-dashboard gettingstarted-icon-upcoming"></i></span>
-        <span class="progress-text">
-          <a href="#" class="gettingstarted-blurb-upcoming">Create your first dashboard.</a>
-          <button class="btn btn-success btn-small">Add Data Source</button>
-        </span>
+      <li class="progress-step" ng-class="ctrl.getStateClass(3)">
+        <span class="progress-marker"><i class="icon-gf icon-gf-dashboard"></i></span>
+        <span class="progress-text">Create your first dashboard.</span>
+        <a class="btn progress-step-cta" href="dashboard/new?gettingstarted">New Dashboard</a>
       </li>
       <li class="progress-step">
-        <span class="progress-marker"><i class="icon-gf icon-gf-users gettingstarted-icon-upcoming"></i></span>
-        <span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Invite your team.</a></span>
+        <span class="progress-marker"><i class="icon-gf icon-gf-users"></i></span>
+        <span class="progress-text">Invite your team.</span>
+        <a class="btn progress-step-cta" href="org/users?gettingstarted">Invite Users</a>
       </li>
       <li class="progress-step">
-        <span class="progress-marker"><i class="icon-gf icon-gf-apps gettingstarted-icon-upcoming"></i></span>
-        <span class="progress-text"><a href="#" class="gettingstarted-blurb-upcoming">Install apps & plugins</a></span>
+        <span class="progress-marker"><i class="icon-gf icon-gf-apps"></i></span>
+        <span class="progress-text">Install apps &amp; plugins</span>
+        <a class="btn progress-step-cta" href="https://grafana.net/plugins?utm_source=grafana_getting_started">Explore Plugins</a>
       </li>
     </ul>
   </div>

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

@@ -6,8 +6,8 @@ import {contextSrv} from 'app/core/core';
 
 class GettingStartedPanelCtrl extends PanelCtrl {
   static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html';
-  hasDatasources: boolean;
   checksDone: boolean;
+  step: number;
 
   /** @ngInject **/
   constructor($scope, $injector, private backendSrv, private datasourceSrv) {
@@ -24,8 +24,28 @@ class GettingStartedPanelCtrl extends PanelCtrl {
       return item.meta.builtIn === false;
     });
 
-    this.hasDatasources = datasources.length > 0;
-    this.checksDone = true;
+    this.step = 2;
+    if (datasources.length === 0) {
+      this.checksDone = true;
+      return;
+    }
+
+    this.step = 3;
+    this.backendSrv.search({limit: 1}).then(result => {
+      if (result.length === 0) {
+        this.checksDone = true;
+        return;
+      }
+
+      this.step = 4;
+      this.checksDone = true;
+    });
+  }
+
+  getStateClass(step) {
+    if (step === this.step) { return 'active'; }
+    if (step < this.step) { return 'completed'; }
+    return '';
   }
 
   dismiss() {

public/sass/components/_panel_gettingstarted.scss

@@ -32,7 +32,6 @@ $path-position:             $marker-size-half - ($path-height / 2);
 .gettingstarted-blurb-success {
   @extend .gettingstarted-blurb-copy;
   color: $text-color-weak;
-  text-decoration: line-through;
 }
 
 .gettingstarted-blurb-upcoming {
@@ -40,19 +39,6 @@ $path-position:             $marker-size-half - ($path-height / 2);
   color: $text-color-weak;
 }
 
-.gettingstarted-icon-upcoming {
-  color: $text-color-weak;
-  text-decoration:none;
-  font-size: 35px;
-  vertical-align: sub;
-}
-
-.gettingstarted-icon-success {
-  color: $online;
-  font-size: 35px;
-  text-decoration:none;
-  vertical-align: sub;
-}
 
 .dashlist-cta-close-btn {
   color: $text-color-weak;
@@ -81,20 +67,18 @@ $path-position:             $marker-size-half - ($path-height / 2);
 
 // Step container that creates lines between steps
 .progress-step {
-  display: block;
+  text-align: center;
   position: relative;
   flex: 1 1 0%;
   margin: 0;
   padding: 0;
-  min-width: $marker-size; // For a flexbox bug in firefox that wont allow the text overflow on the text
+  color: $text-color-weak;
 
-  // Stops the last step growing
-  &:last-child {
-    flex-grow: 0;
-  }
+  // For a flexbox bug in firefox that wont allow the text overflow on the text
+  min-width: $marker-size;
 
-  // Path between markers, this is not created for the last step
-  &:not(:last-child)::after {
+   &::after {
+    right: -50%;
     content: '';
     display: block;
     position: absolute;
@@ -104,19 +88,48 @@ $path-position:             $marker-size-half - ($path-height / 2);
     right: - $marker-size-half;
     width: 100%;
     height: $path-height;
+    background: $progress-color-grey-light;
+  }
+
+  &:last-child {
+    &::after {
+      right: 50%;
+    }
   }
 
   // Active state
   &.active {
+    .progress-step-cta {
+      display: inline-block;
+    }
     .progress-title {
       font-weight: 400;
     }
   }
 
-  > a {
-    display: block;
+  &.completed {
+    .progress-marker {
+      color: $online;
+
+      // change icon to check
+      .icon-gf::before {
+        content: "\e604";
+      }
+    }
+    .progress-text {
+      text-decoration: line-through;
+    }
+
+    &::after {
+      background: $progress-color-grey;
+    }
   }
+}
 
+.progress-step-cta {
+  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-border-radius);
+  @include buttonBackground($btn-success-bg, $btn-success-bg-hl);
+  display: none;
 }
 
 // Progress marker
@@ -130,9 +143,13 @@ $path-position:             $marker-size-half - ($path-height / 2);
   padding-bottom: 2px; // To align text within the marker
   z-index: 20;
   background-color: $panel-bg;
+  margin-left: auto;
+  margin-right: auto;
+  color: $text-color-weak;
+  font-size: 35px;
+  vertical-align: sub;
 }
 
-
 // Progress text
 .progress-text {
   display: block;
@@ -141,56 +158,11 @@ $path-position:             $marker-size-half - ($path-height / 2);
   text-overflow: ellipsis;
 }
 
-.progress-title {
-  margin-top: 0;
-}
-
-@mixin progress-state($marker-color-bg, $marker-color-border: null, $marker-color-text: null, $path-color: null, $text-color: null) {
-  .progress-marker {
-    color: $marker-color-text;
-    background-color: $marker-color-bg;
-    border-color: $marker-color-border;
-  }
-
-  &::after {
-    background-color: $path-color;
-  }
-
-  .progress-text,
-  .progress-text a {
-    color: $text-color;
-  }
-}
-
-// States
-.progress-step {
-  text-align: center;
-
-  // Active state
-  &.active {
-    @include progress-state($progress-color);
-  }
-
-  &.completed {
-    @include progress-state($progress-color-dark, $path-color: $progress-color-grey);
-  }
-
-  &:hover {
-    @include progress-state($progress-color-light);
-  }
-
-  &:last-child {
-    flex-grow: 1;
-  }
-
-  &::after {
-    right: -50%;
-  }
-}
-
 .progress-marker {
-  margin-left: auto;
-  margin-right: auto;
+  color: $text-color-weak;
+  text-decoration:none;
+  font-size: 35px;
+  vertical-align: sub;
 }