This is an automated email from the ASF dual-hosted git repository.
jihao pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-pinot.git
The following commit(s) were added to refs/heads/master by this push:
new 6c4f3c7 [TE] frontend - harleyjj/yaml - show spinner in buttons when
submitting yaml config for creating or editing detection or subscription group
(#6051)
6c4f3c7 is described below
commit 6c4f3c7aaf602e4d4ab4586487fda4638fe510d0
Author: Harley Jackson <hjack...@linkedin.com>
AuthorDate: Wed Sep 30 10:18:11 2020 -0700
[TE] frontend - harleyjj/yaml - show spinner in buttons when submitting
yaml config for creating or editing detection or subscription group (#6051)
---
.../pods/components/detection-yaml/component.js | 79 +++++++++++--------
.../pods/components/detection-yaml/template.hbs | 8 +-
.../app/pods/manage/yaml/controller.js | 26 ++++---
.../app/pods/manage/yaml/template.hbs | 10 ++-
.../app/pods/self-serve/create-alert/controller.js | 88 ++++++++++++----------
.../app/pods/self-serve/create-alert/template.hbs | 10 ++-
.../app/styles/components/detection-yaml.scss | 2 +-
7 files changed, 136 insertions(+), 87 deletions(-)
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/detection-yaml/component.js
b/thirdeye/thirdeye-frontend/app/pods/components/detection-yaml/component.js
index 854c954..fd458f6 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/detection-yaml/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/detection-yaml/component.js
@@ -27,6 +27,7 @@ import {
} from 'thirdeye-frontend/utils/api/self-serve';
import {inject as service} from '@ember/service';
import config from 'thirdeye-frontend/config/environment';
+import { task } from 'ember-concurrency';
export default Component.extend({
classNames: ['detection-yaml'],
@@ -79,6 +80,49 @@ export default Component.extend({
},
/**
+ * Handler for detection update - using ember concurrency (task)
+ * @method _updateDetection
+ * @param {detectionYaml} String - Yaml config for detection
+ * @param {notifications} Service - toast service for notifying user of
errors
+ * @param {alertId} Number - id number of detection
+ * @return {Promise}
+ */
+ _updateDetection: task(function* (detectionYaml, notifications, alertId) {
+ //PUT alert
+ const alert_url = `/yaml/${alertId}`;
+ const alertPostProps = {
+ method: 'PUT',
+ body: detectionYaml,
+ headers: { 'content-type': 'text/plain' }
+ };
+ try {
+ const alert_result = yield fetch(alert_url, alertPostProps);
+ const alert_status = get(alert_result, 'status');
+ const alert_json = yield alert_result.json();
+ if (alert_status !== 200) {
+ set(this, 'errorMsg', get(alert_json, 'message'));
+ notifications.error(`Failed to save the detection configuration due
to: ${alert_json.message}.`, 'Error', toastOptions);
+ this.setProperties({
+ detectionError: true,
+ detectionErrorMsg: alert_json.message,
+ detectionErrorInfo: alert_json["more-info"],
+ detectionErrorScroll: true
+ });
+ } else {
+ notifications.success('Detection configuration saved successfully',
'Done', toastOptions);
+ }
+ } catch (error) {
+ notifications.error('Error while saving detection config.', error,
toastOptions);
+ this.setProperties({
+ detectionError: true,
+ detectionErrorMsg: 'Error while saving detection config.',
+ detectionErrorInfo: error,
+ detectionErrorScroll: true
+ });
+ }
+ }).drop(),
+
+ /**
* Calls api's for specific metric's autocomplete
* @method _loadAutocompleteById
* @return Promise
@@ -282,7 +326,7 @@ export default Component.extend({
* Fired by alert button in YAML UI in edit mode
* Grabs alert yaml and puts it to the backend.
*/
- async submitAlertEdit() {
+ submitAlertEdit() {
set(this, 'detectionError', false);
const {
detectionYaml,
@@ -290,38 +334,7 @@ export default Component.extend({
alertId
} = getProperties(this, 'detectionYaml', 'notifications', 'alertId');
- //PUT alert
- const alert_url = `/yaml/${alertId}`;
- const alertPostProps = {
- method: 'PUT',
- body: detectionYaml,
- headers: { 'content-type': 'text/plain' }
- };
- try {
- const alert_result = await fetch(alert_url, alertPostProps);
- const alert_status = get(alert_result, 'status');
- const alert_json = await alert_result.json();
- if (alert_status !== 200) {
- set(this, 'errorMsg', get(alert_json, 'message'));
- notifications.error(`Failed to save the detection configuration due
to: ${alert_json.message}.`, 'Error', toastOptions);
- this.setProperties({
- detectionError: true,
- detectionErrorMsg: alert_json.message,
- detectionErrorInfo: alert_json["more-info"],
- detectionErrorScroll: true
- });
- } else {
- notifications.success('Detection configuration saved successfully',
'Done', toastOptions);
- }
- } catch (error) {
- notifications.error('Error while saving detection config.', error,
toastOptions);
- this.setProperties({
- detectionError: true,
- detectionErrorMsg: 'Error while saving detection config.',
- detectionErrorInfo: error,
- detectionErrorScroll: true
- });
- }
+ this.get('_updateDetection').perform(detectionYaml, notifications,
alertId);
}
}
});
diff --git
a/thirdeye/thirdeye-frontend/app/pods/components/detection-yaml/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/components/detection-yaml/template.hbs
index deb2c16..84483d6 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/detection-yaml/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/components/detection-yaml/template.hbs
@@ -91,7 +91,7 @@
</label>
{{/unless}}
{{#if isEditMode}}
- {{bs-button
+ {{#bs-button
defaultText="Update Alert"
type="primary"
buttonType="submit"
@@ -99,5 +99,11 @@
onClick=(action "submitAlertEdit")
class="te-button te-button--submit"
}}
+ {{#if _updateDetection.isRunning}}
+ <span class="loading-spinner">
+ {{ember-spinner position='relative' right='20px' top='-10px'
scale=0.5 color='#ffffff'}}
+ </span>
+ {{/if}}
+ {{/bs-button}}
{{/if}}
</div>
diff --git a/thirdeye/thirdeye-frontend/app/pods/manage/yaml/controller.js
b/thirdeye/thirdeye-frontend/app/pods/manage/yaml/controller.js
index 3cb4330..09502bb 100644
--- a/thirdeye/thirdeye-frontend/app/pods/manage/yaml/controller.js
+++ b/thirdeye/thirdeye-frontend/app/pods/manage/yaml/controller.js
@@ -8,6 +8,7 @@ import {computed, set, get, getProperties} from '@ember/object';
import {toastOptions} from 'thirdeye-frontend/utils/constants';
import {inject as service} from '@ember/service';
import { putAlertActiveStatus } from 'thirdeye-frontend/utils/anomaly';
+import { task } from 'ember-concurrency';
const CREATE_GROUP_TEXT = 'Create a new subscription group';
@@ -38,8 +39,15 @@ export default Controller.extend({
}
),
- // Method for handling subscription group, whether there are any or not
- async _handleSubscriptionGroup(subscriptionYaml, notifications,
subscriptionGroupId) {
+ /**
+ * Handler for subscription group, whether there are any or not - using
ember concurrency (task)
+ * @method _handleSubscriptionGroup
+ * @param {subscriptionYaml} String - Yaml config for subscription group
+ * @param {notifications} Service - toast service for notifying user of
errors
+ * @param {subscriptionGroupId} Number - id number of subscription group
+ * @return {Promise}
+ */
+ _handleSubscriptionGroup: task(function* (subscriptionYaml, notifications,
subscriptionGroupId) {
set(this, 'subscriptionError', false);
const groupName = get(this, 'groupName');
if (!groupName || groupName.name === CREATE_GROUP_TEXT) {
@@ -51,9 +59,9 @@ export default Controller.extend({
headers: { 'content-type': 'text/plain' }
};
try {
- const subscription_result = await fetch(subscription_url,
subscriptionPostProps);
+ const subscription_result = yield fetch(subscription_url,
subscriptionPostProps);
const subscription_status = get(subscription_result, 'status');
- const subscription_json = await subscription_result.json();
+ const subscription_json = yield subscription_result.json();
if (subscription_status !== 200) {
set(this, 'errorMsg', get(subscription_json, 'message'));
notifications.error(`Failed to save the subscription configuration
due to: ${subscription_json.message}.`, 'Error', toastOptions);
@@ -82,9 +90,9 @@ export default Controller.extend({
headers: { 'content-type': 'text/plain' }
};
try {
- const subscription_result = await fetch(subscription_url,
subscriptionPostProps);
+ const subscription_result = yield fetch(subscription_url,
subscriptionPostProps);
const subscription_status = get(subscription_result, 'status');
- const subscription_json = await subscription_result.json();
+ const subscription_json = yield subscription_result.json();
if (subscription_status !== 200) {
set(this, 'errorMsg', get(subscription_json, 'message'));
notifications.error(`Failed to save the subscription configuration
due to: ${subscription_json.message}.`, 'Error', toastOptions);
@@ -105,7 +113,7 @@ export default Controller.extend({
});
}
}
- },
+ }).drop(),
actions: {
changeAccordion() {
@@ -195,14 +203,14 @@ export default Controller.extend({
* Fired by subscription group button in YAML UI in edit mode
* Grabs subscription group yaml and posts or puts it to the backend.
*/
- async submitSubscriptionGroup() {
+ submitSubscriptionGroup() {
const {
subscriptionYaml,
notifications,
subscriptionGroupId
} = getProperties(this, 'subscriptionYaml', 'notifications',
'subscriptionGroupId');
// If there is no existing subscription group, this method will handle it
- this._handleSubscriptionGroup(subscriptionYaml, notifications,
subscriptionGroupId);
+ this.get('_handleSubscriptionGroup').perform(subscriptionYaml,
notifications, subscriptionGroupId);
}
}
});
diff --git a/thirdeye/thirdeye-frontend/app/pods/manage/yaml/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/manage/yaml/template.hbs
index 20c6557..7e81a50 100644
--- a/thirdeye/thirdeye-frontend/app/pods/manage/yaml/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/manage/yaml/template.hbs
@@ -90,14 +90,20 @@
</fieldset>
<fieldset class="te-form__section-submit">
- {{bs-button
+ {{#bs-button
defaultText=subGroupButtonText
type="primary"
buttonType="submit"
disabled=disableSubGroupSave
onClick=(action "submitSubscriptionGroup")
class="te-button te-button--submit"
- }}
+ }}
+ {{#if _handleSubscriptionGroup.isRunning}}
+ <span class="loading-spinner">
+ {{ember-spinner position='relative' right='20px' top='-10px'
scale=0.5 color='#ffffff'}}
+ </span>
+ {{/if}}
+ {{/bs-button}}
</fieldset>
{{/if}}
</div>
diff --git
a/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/controller.js
b/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/controller.js
index c54849a..c5cc015 100644
--- a/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/controller.js
+++ b/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/controller.js
@@ -17,7 +17,7 @@ import {
isNone,
isBlank
} from "@ember/utils";
-import { checkStatus } from 'thirdeye-frontend/utils/utils';
+import { checkStatus, postProps } from 'thirdeye-frontend/utils/utils';
import {toastOptions} from 'thirdeye-frontend/utils/constants';
import {
selfServeApiGraph,
@@ -238,6 +238,49 @@ export default Controller.extend({
}),
/**
+ * Handler for creating an alert - using ember concurrency (task)
+ * @method _createAlert
+ * @param {detectionYaml} String - Yaml config for detection
+ * @param {subscriptionYaml} String - Yaml config for subscription group
+ * @return {Promise}
+ */
+ _createAlert: task(function* (detectionYaml, subscriptionYaml) {
+ const content = {
+ detection: detectionYaml,
+ subscription: subscriptionYaml
+ };
+ const url = '/yaml/create-alert';
+ const notifications = get(this, 'notifications');
+
+ yield fetch(url, postProps(content)).then((res) => {
+ res.json().then((result) => {
+ if(result){
+ if (result.subscriptionConfigId && result.detectionConfigId) {
+ notifications.success('Created alert successfully.', 'Created',
toastOptions);
+ this.transitionToRoute('manage.explore', result.detectionConfigId);
+ } else {
+ notifications.error(result.message, 'Error', toastOptions);
+ this.setProperties({
+ detectionError: true,
+ detectionErrorMsg: result.message,
+ detectionErrorInfo: result["more-info"],
+ detectionErrorScroll: true
+ });
+ }
+ }
+ });
+ }).catch((error) => {
+ notifications.error('Create alert failed.', error, toastOptions);
+ this.setProperties({
+ detectionError: true,
+ detectionErrorMsg: 'Create alert failed.',
+ detectionErrorInfo: error,
+ detectionErrorScroll: true
+ });
+ });
+ }).drop(),
+
+ /**
* Determines if a metric should be filtered out
* @method isMetricGraphable
* @param {Object} metric
@@ -1125,44 +1168,11 @@ export default Controller.extend({
*/
createAlertYamlAction() {
set(this, 'detectionError', false);
- const content = {
- detection: get(this, 'detectionYaml'),
- subscription: get(this, 'subscriptionYaml')
- };
- const url = '/yaml/create-alert';
- const postProps = {
- method: 'post',
- body: JSON.stringify(content),
- headers: { 'content-type': 'application/json' }
- };
- const notifications = get(this, 'notifications');
-
- fetch(url, postProps).then((res) => {
- res.json().then((result) => {
- if(result){
- if (result.subscriptionConfigId && result.detectionConfigId) {
- notifications.success('Created alert successfully.', 'Created',
toastOptions);
- this.transitionToRoute('manage.explore',
result.detectionConfigId);
- } else {
- notifications.error(result.message, 'Error', toastOptions);
- this.setProperties({
- detectionError: true,
- detectionErrorMsg: result.message,
- detectionErrorInfo: result["more-info"],
- detectionErrorScroll: true
- });
- }
- }
- });
- }).catch((error) => {
- notifications.error('Create alert failed.', error, toastOptions);
- this.setProperties({
- detectionError: true,
- detectionErrorMsg: 'Create alert failed.',
- detectionErrorInfo: error,
- detectionErrorScroll: true
- });
- });
+ const {
+ detectionYaml,
+ subscriptionYaml
+ } = this.getProperties('detectionYaml', 'subscriptionYaml');
+ this.get('_createAlert').perform(detectionYaml, subscriptionYaml);
},
/**
diff --git
a/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/template.hbs
b/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/template.hbs
index a8ac7b1..f1a73fe 100644
--- a/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/self-serve/create-alert/template.hbs
@@ -469,14 +469,20 @@
</fieldset>
<fieldset class="te-form__section-submit">
- {{bs-button
- defaultText="Create"
+ {{#bs-button
+ defaultText='Create Alert'
type="primary"
buttonType="submit"
disabled=disableYamlSave
onClick=(action "createAlertYamlAction")
class="te-button te-button--submit"
}}
+ {{#if _createAlert.isRunning}}
+ <span class="loading-spinner">
+ {{ember-spinner position='relative' right='20px' top='-10px'
scale=0.5 color='#ffffff'}}
+ </span>
+ {{/if}}
+ {{/bs-button}}
</fieldset>
{{/if}}
{{outlet}}
diff --git
a/thirdeye/thirdeye-frontend/app/styles/components/detection-yaml.scss
b/thirdeye/thirdeye-frontend/app/styles/components/detection-yaml.scss
index 9ad80c7..c206dbc 100644
--- a/thirdeye/thirdeye-frontend/app/styles/components/detection-yaml.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/components/detection-yaml.scss
@@ -27,7 +27,7 @@
}
.detection-yaml-msg-preview {
- color: grey;
+ color: #e75858;
&__icon {
font-size: 20px;
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscr...@pinot.apache.org
For additional commands, e-mail: commits-h...@pinot.apache.org
