[incubator-pinot] branch master updated: [TE] frontend - harleyjj/create-alert - make minor improvements to YAML alert creator (#3564)

[ap...@apache.org]

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 b62c611  [TE] frontend - harleyjj/create-alert - make minor improvements to YAML alert creator (#3564)
b62c611 is described below

commit b62c611c81c4d0391ec21bbe385aa9c64be54296
Author: Harley Jackson <ha...@gmail.com>
AuthorDate: Thu Nov 29 10:30:29 2018 -0800

    [TE] frontend - harleyjj/create-alert - make minor improvements to YAML alert creator (#3564)
    
    Toggle button displays what you would toggle too (i.e. clicking when it says YAML changes to YAML)
    If you click 'cancel' on YAML, it clears the info you typed and toggles back to form
    If you toggle to the form after you typed into YAML, info you typed is preserved when you toggle back
---
 .../app/pods/self-serve/create-alert/controller.js | 36 ++++++++++++++++++----
 .../app/pods/self-serve/create-alert/template.hbs  |  8 ++---
 2 files changed, 34 insertions(+), 10 deletions(-)

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 064f584..3fd0819 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
@@ -64,7 +64,7 @@ export default Controller.extend({
   metricLookupCache: [],
   metricHelpMailto: `mailto:${config.email}?subject=Metric Onboarding Request (non-additive UMP or derived)`,
   isForm: true,
-  isAlertYamlDisabled: true,
+  disableYamlSave: true,
   yamlAlertProps,
 
   /**
@@ -74,6 +74,7 @@ export default Controller.extend({
   graphConfig: {},
   selectedFilters: JSON.stringify({}),
   selectedWeeklyEffect: true,
+  alertYamlContent: null,
 
   /**
    * Object to cover basic ield 'presence' validation
@@ -405,6 +406,20 @@ export default Controller.extend({
   ),
 
   /**
+   * sets Yaml value displayed to contents of alertYamlContent or yamlAlertProps
+   * @method currentYamlValues
+   * @return {String}
+   */
+  currentYamlValues: computed(
+    'yamlAlertProps',
+    'alertYamlContent',
+    function() {
+      const inputYaml = this.get('alertYamlContent');
+      return (inputYaml ? inputYaml : this.get('yamlAlertProps'));
+    }
+  ),
+
+  /**
    * Enables the submit button when all required fields are filled
    * @method isSubmitDisabled
    * @param {Number} metricId - Id of selected metric to graph
@@ -761,19 +776,28 @@ export default Controller.extend({
   actions: {
 
     /**
-     * Navigate to Alert Page
+     * Clears YAML content, disables 'save changes' button, and moves to form
+     */
+    cancelAlertYaml() {
+      set(this, 'disableYamlSave', true);
+      set(this, 'alertYamlContent', null);
+      set(this, 'isForm', true);
+    },
+
+    /**
+     * Activates 'save changes' button and stores YAML content in alertYamlContent
      */
     onYMLSelector(value) {
-      set(this, 'isAlertYamlDisabled', !this.get('isAlertYamlDisabled'));
+      set(this, 'disableYamlSave', false);
       set(this, 'alertYamlContent', value);
-      //this.transitionToRoute('manage.alert.explore', this.get('id'));
     },
 
     /**
-     * Navigate to Alert Page
+     * Fired by save button in YAML UI
+     * Grabs YAML content and sends it
      */
     saveAlertYaml() {
-      set(this, 'isAlertYamlDisabled', !this.get('isAlertYamlDisabled'));
+      set(this, 'disableYamlSave', true);
       const content = get(this, 'alertYamlContent');
       const url = '/yaml';
       const postProps = {
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 6d08999..817ff0a 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
@@ -10,7 +10,7 @@
     onToggle=(action (mut isForm))
     as |toggle|}}
       {{#toggle.label value=isForm}}
-        <span class="te-label te-label--flush">{{if isForm 'Form' 'YAML'}}</span>
+        <span class="te-label te-label--flush">{{if isForm 'YAML' 'Form'}}</span>
       {{/toggle.label}}
       {{toggle.switch theme='ios' onLabel='diff on' offLabel='diff off'}}
   {{/x-toggle}}
@@ -423,7 +423,7 @@
         <legend class="te-form__section-title">Define alert in YAML</legend>
         {{ember-ace
           lines=35
-          value=yamlAlertProps
+          value=currentYamlValues
           update=(action 'onYMLSelector')
           mode="ace/mode/yaml"
         }}
@@ -444,14 +444,14 @@
         defaultText="Cancel"
         type="outline-primary"
         buttonType="cancel"
-        onClick=(action (mut isForm))
+        onClick=(action "cancelAlertYaml")
         class="te-button te-button--cancel"
       }}
       {{bs-button
         defaultText="Save changes"
         type="primary"
         buttonType="submit"
-        disabled=isAlertYamlDisabled
+        disabled=disableYamlSave
         onClick=(action "saveAlertYaml")
         class="te-button te-button--submit"
       }}


---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@pinot.apache.org
For additional commands, e-mail: commits-help@pinot.apache.org