You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@pinot.apache.org by ap...@apache.org on 2019/01/16 23:27:13 UTC
[incubator-pinot] branch master updated: [TE] - frontend
harleyjj/yaml - reset and view documentation buttons (#3699)
This is an automated email from the ASF dual-hosted git repository.
apucher 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 148f992 [TE] - frontend harleyjj/yaml - reset and view documentation buttons (#3699)
148f992 is described below
commit 148f992d99646b9e0d79fdd1eeb3f4e56e62ef7b
Author: Harley Jackson <ha...@gmail.com>
AuthorDate: Wed Jan 16 15:27:09 2019 -0800
[TE] - frontend harleyjj/yaml - reset and view documentation buttons (#3699)
---
.../modals/yaml-documentation/component.js | 36 ++++++++++
.../modals/yaml-documentation/template.hbs | 12 ++++
.../app/pods/components/yaml-editor/component.js | 80 ++++++++++++++--------
.../app/pods/components/yaml-editor/template.hbs | 50 ++++++++++++++
.../app/styles/components/yaml-editor.scss | 4 ++
5 files changed, 154 insertions(+), 28 deletions(-)
diff --git a/thirdeye/thirdeye-frontend/app/pods/components/modals/yaml-documentation/component.js b/thirdeye/thirdeye-frontend/app/pods/components/modals/yaml-documentation/component.js
new file mode 100644
index 0000000..d8541a3
--- /dev/null
+++ b/thirdeye/thirdeye-frontend/app/pods/components/modals/yaml-documentation/component.js
@@ -0,0 +1,36 @@
+import Component from '@ember/component';
+import { computed, set, get, getProperties } from '@ember/object';
+
+export default Component.extend({
+
+ showYAMLModal: computed(
+ 'showAnomalyModal',
+ 'showNotificationModal',
+ function() {
+ const {
+ showAnomalyModal,
+ showNotificationModal
+ } = getProperties(this, 'showAnomalyModal', 'showNotificationModal');
+ return showAnomalyModal || showNotificationModal;
+ }
+ ),
+
+ headerText: computed(
+ 'YAMLField',
+ function() {
+ const YAMLField = get(this, 'YAMLField');
+ return `YAML ${YAMLField} Documentation`;
+ }
+ ),
+
+ actions: {
+ /**
+ * Handles the close event
+ * @return {undefined}
+ */
+ onExit() {
+ let YAMLField = get(this, 'YAMLField');
+ set(this, `show${YAMLField}Modal`, false);
+ }
+ }
+});
diff --git a/thirdeye/thirdeye-frontend/app/pods/components/modals/yaml-documentation/template.hbs b/thirdeye/thirdeye-frontend/app/pods/components/modals/yaml-documentation/template.hbs
new file mode 100644
index 0000000..5f98fc8
--- /dev/null
+++ b/thirdeye/thirdeye-frontend/app/pods/components/modals/yaml-documentation/template.hbs
@@ -0,0 +1,12 @@
+{{#te-modal
+ headerText=headerText
+ isShowingModal=showYAMLModal
+ cancelAction=(action "onExit")
+ hasFooter=false
+}}
+ <div class="row te-modal__settings">
+ <p class="col-md-2">
+ <span class="te-label te-label--bold te-label--dark">YAML Documentation Coming soon...</span>
+ </p>
+ </div>
+{{/te-modal}}
diff --git a/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/component.js b/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/component.js
index 10d9331..d2b2bb9 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/component.js
@@ -39,7 +39,7 @@ export default Component.extend({
/**
* Properties we expect to receive for the yaml-editor
*/
- //isForm: true,
+ //isForm: true,
currentMetric: null,
isYamlParseable: true,
alertTitle: 'Define anomaly detection in YAML',
@@ -53,6 +53,9 @@ export default Component.extend({
yamlAlertProps: yamlAlertProps,
yamlAlertSettings: yamlAlertSettings,
subscriptionGroupNames: [],
+ showAnomalyModal: false,
+ showNotificationModal: false,
+ YAMLField: '',
/**
* params passed to yaml-editor component
@@ -78,7 +81,7 @@ export default Component.extend({
),
/**
- * sets Yaml value displayed to contents of alertYaml or yamlAlertProps
+ * sets Yaml value displayed to contents of detectionSettingsYaml or yamlAlertSettings
* @method currentYamlValues
* @return {String}
*/
@@ -122,21 +125,21 @@ export default Component.extend({
* Calls api's for specific metric's autocomplete
* @method _loadAutocompleteById
* @return Promise
- */
- _loadAutocompleteById(metricId) {
- const promiseHash = {
- filters: fetch(selfServeApiGraph.metricFilters(metricId)).then(res => checkStatus(res, 'get', true)),
- dimensions: fetch(selfServeApiGraph.metricDimensions(metricId)).then(res => checkStatus(res, 'get', true))
- };
- return RSVP.hash(promiseHash);
- },
+ */
+ _loadAutocompleteById(metricId) {
+ const promiseHash = {
+ filters: fetch(selfServeApiGraph.metricFilters(metricId)).then(res => checkStatus(res, 'get', true)),
+ dimensions: fetch(selfServeApiGraph.metricDimensions(metricId)).then(res => checkStatus(res, 'get', true))
+ };
+ return RSVP.hash(promiseHash);
+ },
/**
* Get autocomplete suggestions from relevant api
* @method _buildYamlSuggestions
* @return Promise
*/
- _buildYamlSuggestions(currentMetric, yamlAsObject, prefix, noResultsArray, filtersCache, dimensionsCache) {
+ _buildYamlSuggestions(currentMetric, yamlAsObject, prefix, noResultsArray, filtersCache, dimensionsCache) {
// holds default result to return if all checks fail
let defaultReturn = Promise.resolve(noResultsArray);
// when metric is being autocompleted, entire text field will be replaced and metricId stored in editor
@@ -154,16 +157,16 @@ export default Component.extend({
dataset,
id: metric.id,
completer:{
- insertMatch: (editor, data) => {
- editor.setValue(yamIt(data.metricname, data.dataset));
- editor.metricId = data.id;
- //editor.completer.insertMatch({value: data.value});
- // editor.insert('abc');
- }
- }}
- })
+ insertMatch: (editor, data) => {
+ editor.setValue(yamIt(data.metricname, data.dataset));
+ editor.metricId = data.id;
+ //editor.completer.insertMatch({value: data.value});
+ // editor.insert('abc');
+ }
+ }};
+ });
}
- return noResultsArray
+ return noResultsArray;
})
.catch(() => {
return noResultsArray;
@@ -178,7 +181,7 @@ export default Component.extend({
// wraps result in Promise.resolve because return of Promise is expected by yamlSuggestions
return Promise.resolve(dimensionsCache.map(dimension => {
return {
- value: dimension,
+ value: dimension
};
}));
}
@@ -207,7 +210,7 @@ export default Component.extend({
return Promise.resolve(filtersCache[filterKey].map(filterParam => {
return {
value: filterParam
- }
+ };
}));
}
}
@@ -216,6 +219,27 @@ export default Component.extend({
actions: {
/**
+ * resets given yaml field to default value
+ */
+ resetYAML(field) {
+ if (field === 'anomaly') {
+ const yamlAlertProps = get(this, 'yamlAlertProps');
+ set(this, 'alertYaml', yamlAlertProps);
+ } else if (field === 'notification') {
+ const yamlAlertSettings = get(this, 'yamlAlertSettings');
+ set(this, 'detectionSettingsYaml', yamlAlertSettings);
+ }
+ },
+
+ /**
+ * Brings up appropriate modal, based on which yaml field is clicked
+ */
+ triggerDocModal(field) {
+ set(this, `show${field}Modal`, true);
+ set(this, 'YAMLField', field);
+ },
+
+ /**
* Updates the notification settings yaml with user section
*/
onYAMLGroupSelectionAction(value) {
@@ -233,7 +257,7 @@ export default Component.extend({
alertYaml,
noResultsArray
} = getProperties(this, 'alertYaml', 'noResultsArray');
- let yamlAsObject = {}
+ let yamlAsObject = {};
try {
yamlAsObject = yamljs.parse(alertYaml);
set(this, 'isYamlParseable', true);
@@ -257,7 +281,7 @@ export default Component.extend({
.then(() => {
return get(this, '_buildYamlSuggestions')(currentMetric, yamlAsObject, prefix, noResultsArray, get(this, 'filtersCache'), get(this, 'dimensionsCache'))
.then(results => results);
- })
+ });
}
const currentMetric = get(this, 'currentMetric');
// deals with no metricId, which could be autocomplete for metric or for filters and dimensions already cached
@@ -267,7 +291,7 @@ export default Component.extend({
},
/**
- * Activates 'save changes' button and stores YAML content in alertYaml
+ * Activates 'Create Alert' button and stores YAML content in alertYaml
*/
onYMLSelectorAction(value) {
set(this, 'disableYamlSave', false);
@@ -276,11 +300,11 @@ export default Component.extend({
},
/**
- * Activates 'save changes' button and stores YAML content in alertYaml
+ * Activates 'Create Alert' button and stores YAML content in detectionSettingsYaml
*/
onYMLSettingsSelectorAction(value) {
set(this, 'disableYamlSave', false);
- set(this, 'currentYamlSettings', value);
+ set(this, 'detectionSettingsYaml', value);
},
cancelAlertYamlAction() {
@@ -296,7 +320,7 @@ export default Component.extend({
const content = {
detection: get(this, 'alertYaml'),
notification: get(this, 'currentYamlSettings')
- }
+ };
const url = '/yaml/create-alert';
const postProps = {
method: 'post',
diff --git a/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/template.hbs b/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/template.hbs
index 33919ba..a1032ed 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/template.hbs
+++ b/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/template.hbs
@@ -1,6 +1,25 @@
<fieldset class="te-form__section te-form__section--first row">
<div class="col-xs-12">
<legend class="te-form__section-title">{{alertTitle}}</legend>
+ <label for="select-metric" class="control-label te-label te-label--taller required">Can't find your metric?
+ <a class="thirdeye-link-secondary" target="_blank">Import from InGraphs</a>
+ </label>
+ <div class="pull-right">
+ {{bs-button
+ defaultText="Reset"
+ type="outline-primary"
+ buttonType="reset"
+ onClick=(action "resetYAML" "anomaly")
+ class="te-button te-button--link"
+ }}
+ {{bs-button
+ defaultText="View Documentation"
+ type="outline-primary"
+ buttonType="modal"
+ onClick=(action "triggerDocModal" "Anomaly")
+ class="te-button te-button--cancel"
+ }}
+ </div>
{{ember-ace
lines=35
value=currentYamlValues
@@ -24,6 +43,7 @@
{{!-- subscription group --}}
{{#power-select
options=subscriptionGroupNames
+ placeholder="Create a subscription group"
selected=groupName
searchField="name"
onchange=(action 'onYAMLGroupSelectionAction')
@@ -33,6 +53,30 @@
{{/power-select}}
</div>
<div class="col-xs-12">
+ <legend class="te-form__section-title">Configure new subscription group</legend>
+ </div>
+ <div class="col-xs-12">
+ <label for="select-metric" class="control-label te-label te-label--taller required">Can't find your team? Contact
+ <a class="thirdeye-link-secondary" target="_blank" href="mailto:ask_thirdeye@linkedin.com">ask_thirdeye@linkedin.com</a>
+ </label>
+ <div class="pull-right">
+ {{bs-button
+ defaultText="Reset"
+ type="outline-primary"
+ buttonType="reset"
+ onClick=(action "resetYAML" "notification")
+ class="te-button te-button--link"
+ }}
+ {{bs-button
+ defaultText="View Documentation"
+ type="outline-primary"
+ buttonType="modal"
+ onClick=(action "triggerDocModal" "Notification")
+ class="te-button te-button--cancel"
+ }}
+ </div>
+ </div>
+ <div class="col-xs-12">
{{!-- notification settings editor --}}
{{ember-ace
lines=20
@@ -80,3 +124,9 @@
}}
{{/if}}
</fieldset>
+
+{{modals/yaml-documentation
+ showAnomalyModal=showAnomalyModal
+ showNotificationModal=showNotificationModal
+ YAMLField=YAMLField
+}}
diff --git a/thirdeye/thirdeye-frontend/app/styles/components/yaml-editor.scss b/thirdeye/thirdeye-frontend/app/styles/components/yaml-editor.scss
index a12cafa..4a21320 100644
--- a/thirdeye/thirdeye-frontend/app/styles/components/yaml-editor.scss
+++ b/thirdeye/thirdeye-frontend/app/styles/components/yaml-editor.scss
@@ -14,3 +14,7 @@
margin-bottom: 20px;
}
}
+
+.ace_editor.ace_autocomplete {
+ width: 650px;
+}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org