From 437b880b3e54f3f4bf6eb9b3681f5d0e5985c2cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 25 Mar 2016 22:14:29 +0100 Subject: [PATCH] feat(plugins): work on setup wizard started --- public/app/core/components/grafana_app.ts | 3 + public/app/core/services/util_srv.js | 31 --------- public/app/core/services/util_srv.ts | 41 ++++++++++++ .../plugins/import_list/import_list.ts | 4 -- .../app/features/plugins/partials/wizard.html | 30 +++++++++ .../app/features/plugins/plugin_edit_ctrl.ts | 64 +++++++++++++++---- public/app/features/plugins/wizard.ts | 47 ++++++++++++++ 7 files changed, 173 insertions(+), 47 deletions(-) delete mode 100644 public/app/core/services/util_srv.js create mode 100644 public/app/core/services/util_srv.ts create mode 100644 public/app/features/plugins/partials/wizard.html create mode 100644 public/app/features/plugins/wizard.ts diff --git a/public/app/core/components/grafana_app.ts b/public/app/core/components/grafana_app.ts index 0a2e49e5d72..5a72567c202 100644 --- a/public/app/core/components/grafana_app.ts +++ b/public/app/core/components/grafana_app.ts @@ -5,7 +5,9 @@ import store from 'app/core/store'; import _ from 'lodash'; import angular from 'angular'; import $ from 'jquery'; + import coreModule from 'app/core/core_module'; +import appEvents from 'app/core/app_events'; export class GrafanaCtrl { @@ -47,6 +49,7 @@ export class GrafanaCtrl { $rootScope.appEvent = function(name, payload) { $rootScope.$emit(name, payload); + appEvents.emit(name, payload); }; $rootScope.colors = [ diff --git a/public/app/core/services/util_srv.js b/public/app/core/services/util_srv.js deleted file mode 100644 index e6bf3ae08bf..00000000000 --- a/public/app/core/services/util_srv.js +++ /dev/null @@ -1,31 +0,0 @@ -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'); - }); - }; - - }); - -}); diff --git a/public/app/core/services/util_srv.ts b/public/app/core/services/util_srv.ts new file mode 100644 index 00000000000..0f15a65a0dc --- /dev/null +++ b/public/app/core/services/util_srv.ts @@ -0,0 +1,41 @@ +/// + +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); diff --git a/public/app/features/plugins/import_list/import_list.ts b/public/app/features/plugins/import_list/import_list.ts index 8eb726b81c0..607cf8cc5ec 100644 --- a/public/app/features/plugins/import_list/import_list.ts +++ b/public/app/features/plugins/import_list/import_list.ts @@ -88,7 +88,3 @@ export function dashboardImportList() { } coreModule.directive('dashboardImportList', dashboardImportList); - - - - diff --git a/public/app/features/plugins/partials/wizard.html b/public/app/features/plugins/partials/wizard.html new file mode 100644 index 00000000000..4a532e81a0f --- /dev/null +++ b/public/app/features/plugins/partials/wizard.html @@ -0,0 +1,30 @@ +
+
+

+ + {{model.name}} +

+ + + + +
+ +
+ + + + + + + + + +
{{step.name}}{{step.status}} + +
+ +
+ +
+ diff --git a/public/app/features/plugins/plugin_edit_ctrl.ts b/public/app/features/plugins/plugin_edit_ctrl.ts index 7f3f6bff08f..59af8f78c30 100644 --- a/public/app/features/plugins/plugin_edit_ctrl.ts +++ b/public/app/features/plugins/plugin_edit_ctrl.ts @@ -4,6 +4,8 @@ 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; @@ -79,20 +81,58 @@ export class PluginEditCtrl { } update() { - this.preUpdateHook().then(() => { - var updateCmd = _.extend({ - enabled: this.model.enabled, - pinned: this.model.pinned, - jsonData: this.model.jsonData, - secureJsonData: this.model.secureJsonData, - }, {}); + var wizard = new WizardFlow("Application Setup"); - return this.backendSrv.post(`/api/plugins/${this.pluginId}/settings`, updateCmd); - }) - .then(this.postUpdateHook) - .then((res) => { - window.location.href = window.location.href; + 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() { diff --git a/public/app/features/plugins/wizard.ts b/public/app/features/plugins/wizard.ts new file mode 100644 index 00000000000..741b0f01b3e --- /dev/null +++ b/public/app/features/plugins/wizard.ts @@ -0,0 +1,47 @@ +/// + +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);