You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@ignite.apache.org by ak...@apache.org on 2019/02/08 03:19:06 UTC
[ignite] branch master updated: IGNITE-10965 Web console:
Implemented indication for potentially long operation: 1. Disable button
after starting potentially long operation. 2. Swap red line under app
header with 'global-progress-line' component to indicate running operation.
This is an automated email from the ASF dual-hosted git repository.
akuznetsov pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/ignite.git
The following commit(s) were added to refs/heads/master by this push:
new b0493d8 IGNITE-10965 Web console: Implemented indication for potentially long operation: 1. Disable button after starting potentially long operation. 2. Swap red line under app header with 'global-progress-line' component to indicate running operation.
b0493d8 is described below
commit b0493d8de47de3f4679dbe1d11c79554b1ad41b8
Author: Ilya Borisov <kl...@gmail.com>
AuthorDate: Fri Feb 8 10:18:33 2019 +0700
IGNITE-10965 Web console: Implemented indication for potentially long operation:
1. Disable button after starting potentially long operation.
2. Swap red line under app header with 'global-progress-line' component to indicate running operation.
Co-authored-by: Ilya Borisov <kl...@gmail.com>
Co-authored-by: Alexander Kalinin <ve...@yandex.ru>
---
modules/web-console/frontend/app/app.js | 4 ++-
.../components/global-progress-line/component.ts | 28 ++++++++++++++++
.../components/global-progress-line/controller.ts | 39 ++++++++++++++++++++++
.../app/components/global-progress-line/index.ts | 24 +++++++++++++
.../app/components/global-progress-line/style.scss | 25 ++++++++++++++
.../template.pug | 14 +-------
.../app/components/page-profile/controller.js | 13 +++++---
.../app/components/page-profile/template.pug | 4 ++-
.../app/components/page-signin/controller.ts | 10 +++++-
.../app/components/page-signin/template.pug | 3 ++
.../app/components/page-signup/controller.ts | 23 +++++++++----
.../app/components/page-signup/template.pug | 3 ++
12 files changed, 163 insertions(+), 27 deletions(-)
diff --git a/modules/web-console/frontend/app/app.js b/modules/web-console/frontend/app/app.js
index be4dc16..c54a832 100644
--- a/modules/web-console/frontend/app/app.js
+++ b/modules/web-console/frontend/app/app.js
@@ -147,6 +147,7 @@ import sidebar from './components/web-console-sidebar';
import permanentNotifications from './components/permanent-notifications';
import signupConfirmation from './components/page-signup-confirmation';
import noDataCmp from './components/no-data';
+import globalProgressBar from './components/global-progress-line';
import igniteServices from './services';
@@ -249,7 +250,8 @@ export default angular
permanentNotifications.name,
timedRedirection.name,
signupConfirmation.name,
- noDataCmp.name
+ noDataCmp.name,
+ globalProgressBar.name
])
.service('$exceptionHandler', $exceptionHandler)
// Directives.
diff --git a/modules/web-console/frontend/app/components/global-progress-line/component.ts b/modules/web-console/frontend/app/components/global-progress-line/component.ts
new file mode 100644
index 0000000..508bb93
--- /dev/null
+++ b/modules/web-console/frontend/app/components/global-progress-line/component.ts
@@ -0,0 +1,28 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import controller from './controller';
+import template from './template.pug';
+import './style.scss';
+
+export default {
+ template,
+ controller,
+ bindings: {
+ isLoading: '<'
+ }
+} as ng.IComponentOptions;
diff --git a/modules/web-console/frontend/app/components/global-progress-line/controller.ts b/modules/web-console/frontend/app/components/global-progress-line/controller.ts
new file mode 100644
index 0000000..ee33b2e
--- /dev/null
+++ b/modules/web-console/frontend/app/components/global-progress-line/controller.ts
@@ -0,0 +1,39 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export default class GlobalProgressLine {
+ /** @type {boolean} */
+ isLoading;
+
+ static $inject = ['$element', '$document'];
+
+ _child: Element;
+
+ constructor(private $element: JQLite, private $document: ng.IDocumentService) {}
+
+ $onChanges() {
+ if (this.isLoading === true) {
+ this._child = this.$element[0].querySelector('.global-progress-line__progress-line');
+ this.$document[0].querySelector('web-console-header').appendChild(this._child);
+ } else
+ this.$element.hide();
+ }
+
+ $onDestroy() {
+ if (this._child) this._child.parentElement.removeChild(this._child);
+ }
+}
diff --git a/modules/web-console/frontend/app/components/global-progress-line/index.ts b/modules/web-console/frontend/app/components/global-progress-line/index.ts
new file mode 100644
index 0000000..8ec4982
--- /dev/null
+++ b/modules/web-console/frontend/app/components/global-progress-line/index.ts
@@ -0,0 +1,24 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import angular from 'angular';
+
+import component from './component';
+
+export default angular
+ .module('ignite-console.global-progress-line', [])
+ .component('globalProgressLine', component);
diff --git a/modules/web-console/frontend/app/components/global-progress-line/style.scss b/modules/web-console/frontend/app/components/global-progress-line/style.scss
new file mode 100644
index 0000000..767d606
--- /dev/null
+++ b/modules/web-console/frontend/app/components/global-progress-line/style.scss
@@ -0,0 +1,25 @@
+/*
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+web-console-header .global-progress-line__progress-line {
+ height: 4px;
+ position: absolute;
+ bottom: -4px;
+ left: 0;
+ right: 0;
+ --background-color: white;
+}
diff --git a/modules/web-console/frontend/app/components/page-signup/template.pug b/modules/web-console/frontend/app/components/global-progress-line/template.pug
similarity index 63%
copy from modules/web-console/frontend/app/components/page-signup/template.pug
copy to modules/web-console/frontend/app/components/global-progress-line/template.pug
index 686079a..701e794 100644
--- a/modules/web-console/frontend/app/components/page-signup/template.pug
+++ b/modules/web-console/frontend/app/components/global-progress-line/template.pug
@@ -14,16 +14,4 @@
See the License for the specific language governing permissions and
limitations under the License.
-h3.public-page__title Don't Have An Account?
-form(name='$ctrl.form' novalidate ng-submit='$ctrl.signup()')
- form-signup(
- outer-form='$ctrl.form'
- ng-model='$ctrl.data'
- server-error='$ctrl.serverError'
- )
- footer.full-width.form-footer
- button.btn-ignite.btn-ignite--primary(
- type='submit'
- ) Sign Up
-footer.page-signup__has-account-message
- | Already have an account? #[a(ui-sref='signin') Sign in here]
+progress-line.global-progress-line__progress-line(value='$ctrl.isLoading ? -1 : 1' )
diff --git a/modules/web-console/frontend/app/components/page-profile/controller.js b/modules/web-console/frontend/app/components/page-profile/controller.js
index a2f344e..d03a5f5 100644
--- a/modules/web-console/frontend/app/components/page-profile/controller.js
+++ b/modules/web-console/frontend/app/components/page-profile/controller.js
@@ -23,9 +23,9 @@ export default class PageProfileController {
];
/**
- * @param {ng.IRootScopeService} $root
- * @param {ng.IScope} $scope
- * @param {ng.IHttpService} $http
+ * @param {ng.IRootScopeService} $root
+ * @param {ng.IScope} $scope
+ * @param {ng.IHttpService} $http
* @param {ReturnType<typeof import('app/services/LegacyUtils.service').default>} LegacyUtils
* @param {ReturnType<typeof import('app/services/Messages.service').default>} Messages
* @param {ReturnType<typeof import('app/services/Focus.service').default>} Focus
@@ -45,6 +45,8 @@ export default class PageProfileController {
this.Countries = Countries;
this.User = User;
this.FormUtils = FormUtils;
+
+ this.isLoading = false;
}
$onInit() {
@@ -77,6 +79,8 @@ export default class PageProfileController {
return;
}
+ this.isLoading = true;
+
return this.$http.post('/api/v1/profile/save', this.ui.user)
.then(this.User.load)
.then(() => {
@@ -88,6 +92,7 @@ export default class PageProfileController {
this.$root.$broadcast('user', this.ui.user);
})
- .catch((res) => this.Messages.showError('Failed to save profile: ', res));
+ .catch((res) => this.Messages.showError('Failed to save profile: ', res))
+ .finally(() => this.isLoading = false);
}
}
diff --git a/modules/web-console/frontend/app/components/page-profile/template.pug b/modules/web-console/frontend/app/components/page-profile/template.pug
index 2b2b748..36b381a 100644
--- a/modules/web-console/frontend/app/components/page-profile/template.pug
+++ b/modules/web-console/frontend/app/components/page-profile/template.pug
@@ -17,6 +17,8 @@
include /app/helpers/jade/mixins
div
+ global-progress-line(is-loading='$ctrl.isLoading')
+
header.header-with-selector
div
h1 User profile
@@ -154,6 +156,6 @@ div
footer
a.btn-ignite.btn-ignite--link-success(type='button' ui-sref='default-state') Cancel
- button.btn-ignite.btn-ignite--success(ng-click='$ctrl.saveUser()')
+ button.btn-ignite.btn-ignite--success(ng-click='$ctrl.saveUser()' ng-disabled='$ctrl.isLoading')
svg.icon-left(ignite-icon='checkmark')
| Save Changes
diff --git a/modules/web-console/frontend/app/components/page-signin/controller.ts b/modules/web-console/frontend/app/components/page-signin/controller.ts
index 71caa0e..d242e2a 100644
--- a/modules/web-console/frontend/app/components/page-signin/controller.ts
+++ b/modules/web-console/frontend/app/components/page-signin/controller.ts
@@ -41,6 +41,8 @@ export default class PageSignIn implements ng.IPostLink {
serverError: string = null;
+ isLoading = false;
+
static $inject = ['Auth', 'IgniteMessages', 'IgniteFormUtils', '$element'];
constructor(private Auth: AuthService, private IgniteMessages, private IgniteFormUtils, private el: JQLite) {}
@@ -62,12 +64,16 @@ export default class PageSignIn implements ng.IPostLink {
}
signin() {
+ this.isLoading = true;
+
this.IgniteFormUtils.triggerValidation(this.form);
this.setServerError(null);
- if (!this.canSubmitForm(this.form))
+ if (!this.canSubmitForm(this.form)) {
+ this.isLoading = false;
return;
+ }
return this.Auth.signin(this.data.email, this.data.password, this.activationToken).catch((res) => {
this.IgniteMessages.showError(null, res.data.errorMessage ? res.data.errorMessage : res.data);
@@ -75,6 +81,8 @@ export default class PageSignIn implements ng.IPostLink {
this.setServerError(res.data);
this.IgniteFormUtils.triggerValidation(this.form);
+
+ this.isLoading = false;
});
}
}
diff --git a/modules/web-console/frontend/app/components/page-signin/template.pug b/modules/web-console/frontend/app/components/page-signin/template.pug
index c85976f..ad110c8 100644
--- a/modules/web-console/frontend/app/components/page-signin/template.pug
+++ b/modules/web-console/frontend/app/components/page-signin/template.pug
@@ -16,6 +16,8 @@
include /app/helpers/jade/mixins
+global-progress-line(is-loading='$ctrl.isLoading')
+
h3.public-page__title Sign In
p(ng-if='$ctrl.activationToken')
| Please sign in to confirm your registration
@@ -47,6 +49,7 @@ form(name='$ctrl.form' novalidate ng-submit='$ctrl.signin()')
a(ui-sref='forgotPassword({email: $ctrl.data.email})') Forgot password?
button.btn-ignite.btn-ignite--primary(
type='submit'
+ ng-disabled='$ctrl.isLoading'
) {{ ::$ctrl.activationToken ? "Activate" : "Sign In" }}
footer.page-signin__no-account-message
| Don't have an account? #[a(ui-sref='signup') Get started]
diff --git a/modules/web-console/frontend/app/components/page-signup/controller.ts b/modules/web-console/frontend/app/components/page-signup/controller.ts
index 748bf7f..9ace2b6 100644
--- a/modules/web-console/frontend/app/components/page-signup/controller.ts
+++ b/modules/web-console/frontend/app/components/page-signup/controller.ts
@@ -38,6 +38,8 @@ export default class PageSignup implements ng.IPostLink {
serverError: string | null = null;
+ isLoading = false;
+
static $inject = ['Auth', 'IgniteMessages', 'IgniteFormUtils', '$element'];
constructor(
@@ -60,19 +62,26 @@ export default class PageSignup implements ng.IPostLink {
}
signup() {
+ this.isLoading = true;
+
this.IgniteFormUtils.triggerValidation(this.form);
this.setServerError(null);
- if (!this.canSubmitForm(this.form))
+ if (!this.canSubmitForm(this.form)) {
+ this.isLoading = false;
return;
+ }
+
- return this.Auth.signup(this.data).catch((res) => {
- if (isEmailConfirmationError(res))
- return;
+ return this.Auth.signup(this.data)
+ .catch((res) => {
+ if (isEmailConfirmationError(res))
+ return;
- this.IgniteMessages.showError(null, res.data);
- this.setServerError(res.data);
- });
+ this.IgniteMessages.showError(null, res.data);
+ this.setServerError(res.data);
+ })
+ .finally(() => this.isLoading = false);
}
}
diff --git a/modules/web-console/frontend/app/components/page-signup/template.pug b/modules/web-console/frontend/app/components/page-signup/template.pug
index 686079a..e11c451 100644
--- a/modules/web-console/frontend/app/components/page-signup/template.pug
+++ b/modules/web-console/frontend/app/components/page-signup/template.pug
@@ -14,6 +14,8 @@
See the License for the specific language governing permissions and
limitations under the License.
+global-progress-line(is-loading='$ctrl.isLoading')
+
h3.public-page__title Don't Have An Account?
form(name='$ctrl.form' novalidate ng-submit='$ctrl.signup()')
form-signup(
@@ -24,6 +26,7 @@ form(name='$ctrl.form' novalidate ng-submit='$ctrl.signup()')
footer.full-width.form-footer
button.btn-ignite.btn-ignite--primary(
type='submit'
+ ng-disabled='$ctrl.isLoading'
) Sign Up
footer.page-signup__has-account-message
| Already have an account? #[a(ui-sref='signin') Sign in here]