feat(wizard): merged wizard poc

public/app/features/plugins/wizard.ts → public/app/core/components/wizard/wizard.ts

@@ -1,4 +1,4 @@
-///<reference path="../../headers/common.d.ts" />
+///<reference path="../../../headers/common.d.ts" />
 
 import config from 'app/core/config';
 import _ from 'lodash';
@@ -23,6 +23,8 @@ export class WizardStep {
 export class WizardFlow {
   name: string;
   steps: WizardStep[];
+  reject: any;
+  fulfill: any;
 
   constructor(name) {
     this.name = name;
@@ -36,11 +38,25 @@ export class WizardFlow {
     });
   }
 
+  next(index) {
+    var step = this.steps[0];
+
+    return step.fn().then(() => {
+      if (this.steps.length === index+1) {
+        return;
+      }
+
+      return this.next(index+1);
+    });
+  }
+
   start() {
     appEvents.emit('show-modal', {
-      src: 'public/app/features/plugins/partials/wizard.html',
+      src: 'public/app/core/components/wizard/wizard.html',
       model: this
     });
+
+    return this.next(0);
   }
 }
 

public/app/core/core.ts

@@ -32,6 +32,7 @@ import {Emitter} from './utils/emitter';
 import {layoutSelector} from './components/layout_selector/layout_selector';
 import {switchDirective} from './components/switch';
 import {dashboardSelector} from './components/dashboard_selector';
+import {WizardFlow} from './components/wizard/wizard';
 import 'app/core/controllers/all';
 import 'app/core/services/all';
 import 'app/core/routes/routes';
@@ -55,4 +56,5 @@ export {
   Emitter,
   appEvents,
   dashboardSelector,
+  WizardFlow,
 };

public/app/features/dashboard/upload.ts

@@ -3,15 +3,27 @@
 import kbn from 'app/core/utils/kbn';
 import coreModule from 'app/core/core_module';
 
+import {WizardFlow} from 'app/core/core';
+
 var wnd: any = window;
 
 class DashboardImporter {
 
   prepareForImport(dash) {
     dash.id = null;
-    return Promise.resolve(dash);
-  }
 
+    var wizard = new WizardFlow('Import Dashboard');
+
+    wizard.addStep("Importing dashboard", function() {
+      return new Promise(done => {
+        setTimeout(done, 2000);
+      });
+    });
+
+    return wizard.start().then(() => {
+      return dash;
+    });
+  }
 }
 
 

public/app/features/plugins/plugin_edit_ctrl.ts

@@ -4,8 +4,6 @@ import angular from 'angular';
 import _ from 'lodash';
 import appEvents from 'app/core/app_events';
 
-import {WizardFlow} from './wizard';
-
 export class PluginEditCtrl {
   model: any;
   pluginIcon: string;
@@ -83,58 +81,19 @@ export class PluginEditCtrl {
   }
 
   update() {
-    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);
-      });
+    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;
     });
-
-    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() {