feat(plugins): work on setup wizard started

public/app/core/components/grafana_app.ts

@@ -5,7 +5,9 @@ import store from 'app/core/store';
 import _ from 'lodash';
 import _ from 'lodash';
 import angular from 'angular';
 import angular from 'angular';
 import $ from 'jquery';
 import $ from 'jquery';
+
 import coreModule from 'app/core/core_module';
 import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
 
 
 export class GrafanaCtrl {
 export class GrafanaCtrl {
 
 
@@ -47,6 +49,7 @@ export class GrafanaCtrl {
 
 
     $rootScope.appEvent = function(name, payload) {
     $rootScope.appEvent = function(name, payload) {
       $rootScope.$emit(name, payload);
       $rootScope.$emit(name, payload);
+      appEvents.emit(name, payload);
     };
     };
 
 
     $rootScope.colors = [
     $rootScope.colors = [

public/app/core/services/util_srv.js

-define([
-  'angular',
-  '../core_module',
-],
-function (angular, coreModule) {
-  'use strict';
-
-  coreModule.default.service('utilSrv', function($rootScope, $modal, $q) {
-
-    this.init = function() {
-      $rootScope.onAppEvent('show-modal', this.showModal, $rootScope);
-    };
-
-    this.showModal = function(e, options) {
-      var modal = $modal({
-        modalClass: options.modalClass,
-        template: options.src,
-        persist: false,
-        show: false,
-        scope: options.scope,
-        keyboard: false
-      });
-
-      $q.when(modal).then(function(modalEl) {
-        modalEl.modal('show');
-      });
-    };
-
-  });
-
-});

public/app/core/services/util_srv.ts

+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import _ from 'lodash';
+import $ from 'jquery';
+
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+
+export class UtilSrv {
+
+  /** @ngInject */
+  constructor(private $rootScope, private $modal) {
+  }
+
+  init() {
+    appEvents.on('show-modal', this.showModal.bind(this), this.$rootScope);
+  }
+
+  showModal(options) {
+    if (options.model) {
+      options.scope = this.$rootScope.$new();
+      options.scope.model = options.model;
+    }
+
+    var modal = this.$modal({
+      modalClass: options.modalClass,
+      template: options.src,
+      persist: false,
+      show: false,
+      scope: options.scope,
+      keyboard: false
+    });
+
+    Promise.resolve(modal).then(function(modalEl) {
+      modalEl.modal('show');
+    });
+  }
+}
+
+coreModule.service('utilSrv', UtilSrv);

public/app/features/plugins/import_list/import_list.ts

@@ -88,7 +88,3 @@ export function dashboardImportList() {
 }
 }
 
 
 coreModule.directive('dashboardImportList', dashboardImportList);
 coreModule.directive('dashboardImportList', dashboardImportList);
-
-
-
-

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

+<div class="modal-body">
+	<div class="modal-header">
+		<h2 class="modal-header-title">
+			<i class="fa fa-cog fa-spin"></i>
+			<span class="p-l-1">{{model.name}}</span>
+		</h2>
+
+		<a class="modal-header-close" ng-click="dismiss();">
+			<i class="fa fa-remove"></i>
+		</a>
+	</div>
+
+	<div class="modal-content">
+
+		<table class="filter-table">
+			<tbody>
+				<tr ng-repeat="step in model.steps">
+					<td>{{step.name}}</td>
+					<td>{{step.status}}</td>
+					<td width="1%">
+						<i class="fa fa-check" style="color: #39A039"></i>
+					</td>
+				</tr>
+			</tbody>
+		</table>
+
+	</div>
+
+</div>
+

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -4,6 +4,8 @@ import angular from 'angular';
 import _ from 'lodash';
 import _ from 'lodash';
 import appEvents from 'app/core/app_events';
 import appEvents from 'app/core/app_events';
 
 
+import {WizardFlow} from './wizard';
+
 export class PluginEditCtrl {
 export class PluginEditCtrl {
   model: any;
   model: any;
   pluginIcon: string;
   pluginIcon: string;
@@ -79,20 +81,58 @@ export class PluginEditCtrl {
   }
   }
 
 
   update() {
   update() {
-    this.preUpdateHook().then(() => {
-      var updateCmd = _.extend({
-        enabled: this.model.enabled,
-        pinned: this.model.pinned,
-        jsonData: this.model.jsonData,
-        secureJsonData: this.model.secureJsonData,
-      }, {});
-
-      return this.backendSrv.post(`/api/plugins/${this.pluginId}/settings`, updateCmd);
-    })
-    .then(this.postUpdateHook)
-    .then((res) => {
-      window.location.href = window.location.href;
+    var wizard = new WizardFlow("Application Setup");
+
+    wizard.addStep("Validating form", () => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      });
+    });
+
+    wizard.addStep("Saving application config", () => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, 2000);
       });
       });
+    });
+
+    wizard.addStep("Validing key", () => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      });
+    });
+
+    wizard.addStep("Adding Raintank metric data source", () => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      });
+    });
+
+    wizard.addStep("Adding Raintank event data source", () => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      });
+    });
+
+    wizard.addStep("Importing worldPing dashboards", () => {
+      return new Promise((resolve) => {
+        setTimeout(resolve, 2000);
+      });
+    });
+
+    wizard.start();
+    // this.preUpdateHook().then(() => {
+    //   var updateCmd = _.extend({
+    //     enabled: this.model.enabled,
+    //     pinned: this.model.pinned,
+    //     jsonData: this.model.jsonData,
+    //     secureJsonData: this.model.secureJsonData,
+    //   }, {});
+    //   return this.backendSrv.post(`/api/plugins/${this.pluginId}/settings`, updateCmd);
+    // })
+    // .then(this.postUpdateHook)
+    // .then((res) => {
+    //   window.location.href = window.location.href;
+    // });
   }
   }
 
 
   importDashboards() {
   importDashboards() {

public/app/features/plugins/wizard.ts

+///<reference path="../../headers/common.d.ts" />
+
+import config from 'app/core/config';
+import _ from 'lodash';
+import $ from 'jquery';
+
+import coreModule from 'app/core/core_module';
+import appEvents from 'app/core/app_events';
+
+export class WizardSrv {
+
+  /** @ngInject */
+  constructor() {
+  }
+
+}
+
+export class WizardStep {
+  name: string;
+  fn: any;
+}
+
+export class WizardFlow {
+  name: string;
+  steps: WizardStep[];
+
+  constructor(name) {
+    this.name = name;
+    this.steps = [];
+  }
+
+  addStep(name, stepFn) {
+    this.steps.push({
+      name: name,
+      fn: stepFn
+    });
+  }
+
+  start() {
+    appEvents.emit('show-modal', {
+      src: 'public/app/features/plugins/partials/wizard.html',
+      model: this
+    });
+  }
+}
+
+coreModule.service('wizardSrv', WizardSrv);