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

public/app/features/dashboard/row/row_model.ts

@@ -19,6 +19,7 @@ export class DashboardRow {
     showTitle: false,
     titleSize: 'h6',
     height: 250,
+    isNew: false,
     repeat: null,
     repeatRowId: null,
     repeatIteration: null,

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

@@ -7,29 +7,10 @@
       </button>
     </h6>
     <ul class="progress-tracker">
-      <li class="progress-step completed">
-        <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" 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" 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"></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"></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 class="progress-step" ng-repeat="step in ctrl.steps" ng-class="step.cssClass">
+        <span class="progress-marker"><i class="{{step.icon}}"></i></span>
+        <span class="progress-text">{{step.title}}</span>
+        <a class="btn progress-step-cta" ng-href="{{step.href}}">{{step.cta}}</a>
       </li>
     </ul>
   </div>

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

@@ -7,10 +7,11 @@ import {contextSrv} from 'app/core/core';
 class GettingStartedPanelCtrl extends PanelCtrl {
   static templateUrl = 'public/app/plugins/panel/gettingstarted/module.html';
   checksDone: boolean;
-  step: number;
+  stepIndex: number;
+  steps: any;
 
   /** @ngInject **/
-  constructor($scope, $injector, private backendSrv, private datasourceSrv) {
+  constructor($scope, $injector, private backendSrv, private datasourceSrv, private $q) {
     super($scope, $injector);
 
     /* tslint:disable */
@@ -20,32 +21,91 @@ class GettingStartedPanelCtrl extends PanelCtrl {
     }
     /* tslint:enable */
 
-    var datasources = datasourceSrv.getMetricSources().filter(item => {
-      return item.meta.builtIn === false;
+    this.stepIndex = 0;
+    this.steps = [];
+
+    this.steps.push({
+      title: 'Install Grafana',
+      icon: 'icon-gf icon-gf-check',
+      check: () => $q.when(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.steps.push({
+      title: 'Create your first data source',
+      cta: 'Add data source',
+      icon: 'icon-gf icon-gf-datasources',
+      href: 'datasources/new?gettingstarted',
+      check: () => {
+        return $q.when(
+          datasourceSrv.getMetricSources().filter(item => {
+            return item.meta.builtIn === false;
+          }).length > 0
+        );
       }
+    });
 
-      this.step = 4;
-      this.checksDone = true;
+    this.steps.push({
+      title: 'Create your first dashboard',
+      cta: 'New dashboard',
+      icon: 'icon-gf icon-gf-dashboard',
+      href: 'dashboard/new?gettingstarted',
+      check: () => {
+        return this.backendSrv.search({limit: 1}).then(result => {
+          return result.length > 0;
+        });
+      }
+    });
+
+    this.steps.push({
+      title: 'Invite your team',
+      cta: 'Add Users',
+      icon: 'icon-gf icon-gf-users',
+      href: 'org/users?gettingstarted',
+      check: () => {
+        return  this.backendSrv.get('api/org/users').then(res => {
+          return res.length > 1;
+        });
+      }
+    });
+
+
+    this.steps.push({
+      title: 'Install apps & plugins',
+      cta: 'Explore plugin repository',
+      icon: 'icon-gf icon-gf-apps',
+      href: 'https://grafana.net/plugins?utm_source=grafana_getting_started',
+      check: () => {
+        return this.backendSrv.get('api/plugins', {embedded: 0, core: 0}).then(plugins => {
+          return plugins.length > 0;
+        });
+      }
     });
   }
 
-  getStateClass(step) {
-    if (step === this.step) { return 'active'; }
-    if (step < this.step) { return 'completed'; }
-    return '';
+  $onInit() {
+    this.stepIndex = -1;
+    return this.nextStep().then(res => {
+      this.checksDone = true;
+      console.log(this.steps);
+    });
+  }
+
+  nextStep() {
+    if (this.stepIndex === this.steps.length - 1) {
+      return this.$q.when();
+    }
+
+    this.stepIndex += 1;
+    var currentStep = this.steps[this.stepIndex];
+    return currentStep.check().then(passed => {
+      if (passed) {
+        currentStep.cssClass = 'completed';
+        return this.nextStep();
+      }
+
+      currentStep.cssClass = 'active';
+      return this.$q.when();
+    });
   }
 
   dismiss() {

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

@@ -11,8 +11,7 @@ class PluginListCtrl extends PanelCtrl {
   viewModel: any;
 
   // Set and populate defaults
-  panelDefaults = {
-  };
+  panelDefaults = {};
 
   /** @ngInject */
   constructor($scope, $injector, private backendSrv, private $location) {