[incubator-pinot] branch master updated: [TE] frontend - harleyjj/yaml-editor - set subscription group by default in edit mode (#4016)

[ak...@apache.org]

This is an automated email from the ASF dual-hosted git repository.

akshayrai09 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 1248705  [TE] frontend - harleyjj/yaml-editor - set subscription group by default in edit mode (#4016)
1248705 is described below

commit 12487059442916ecdda1d195dd06f420e7b5a10f
Author: Harley Jackson <ha...@gmail.com>
AuthorDate: Mon Mar 25 16:07:52 2019 -0700

    [TE] frontend - harleyjj/yaml-editor - set subscription group by default in edit mode (#4016)
---
 .../app/pods/components/yaml-editor/component.js   |  22 +++-
 .../pods/components/yaml-editor/component-test.js  | 121 +++++++++++++++++++++
 2 files changed, 139 insertions(+), 4 deletions(-)

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 1785d45..8b50011 100644
--- a/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/component.js
+++ b/thirdeye/thirdeye-frontend/app/pods/components/yaml-editor/component.js
@@ -65,20 +65,34 @@ export default Component.extend({
 
   init() {
     this._super(...arguments);
-    if(get(this, 'isEditMode')) {
+    // In edit mode, sets subscription group to an existing group by default and sets default yamls
+    if (get(this, 'isEditMode')) {
+      const subscriptionGroupNames = get(this, 'subscriptionGroupNames');
+      // Checks to make sure there is a subscription group array with at least one subscription group
+      if (subscriptionGroupNames && Array.isArray(subscriptionGroupNames) && subscriptionGroupNames.length > 0) {
+        const firstGroup = subscriptionGroupNames[0];
+        set(this, 'subscriptionYaml', firstGroup.yaml);
+        set(this, 'groupName', firstGroup);
+        set(this, 'subscriptionGroupId', firstGroup.id);
+      }
+      // Sets default yamls after checking for and setting default subscription group
       set(this, 'currentYamlAlertOriginal', get(this, 'detectionYaml') || get(this, 'yamlAlertProps'));
       set(this, 'currentYamlSettingsOriginal', get(this, 'subscriptionYaml') || get(this, 'yamlAlertSettings'));
     }
   },
 
   /**
-   * sets Yaml value displayed to contents of detectionYaml or yamlAlertProps
-   * @method currentYamlAlert
-   * @return {String}
+   * populates subscription group dropdown with options from fetch or model
+   * @method subscriptionGroupNamesDisplay
+   * @return {Object}
    */
   subscriptionGroupNamesDisplay: computed(
     'subscriptionGroupNames',
     async function() {
+      const isEditMode = get(this, 'isEditMode');
+      if (isEditMode) {
+        return get(this, 'subscriptionGroupNames');
+      }
       const subscriptionGroups = await get(this, '_fetchSubscriptionGroups').perform();
       return get(this, 'subscriptionGroupNames') || subscriptionGroups;
     }
diff --git a/thirdeye/thirdeye-frontend/tests/integration/pods/components/yaml-editor/component-test.js b/thirdeye/thirdeye-frontend/tests/integration/pods/components/yaml-editor/component-test.js
new file mode 100644
index 0000000..ef2504e
--- /dev/null
+++ b/thirdeye/thirdeye-frontend/tests/integration/pods/components/yaml-editor/component-test.js
@@ -0,0 +1,121 @@
+/**
+ * Integration tests for the yaml-editor component.
+ * @property {number} alertId - the alert id
+ * @property {Array} subscriptionGroupNames - an array of objects containing subscription group information
+ * @property {boolean} isEditMode - to activate the edit mode
+ * @property {boolean} showSettings - to show the subscriber groups yaml editor
+ * @property {string} detectionYaml - the detection yaml to display
+ * @example
+   {{yaml-editor
+     alertId=1
+     subscriptionGroupId=1
+     isEditMode=true
+     showSettings=true
+     subscriptionGroupNames=subscriptionGroupNames
+     detectionYaml=detectionYaml
+   }}
+ * @author hjackson
+ */
+
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+import { render } from '@ember/test-helpers';
+import hbs from 'htmlbars-inline-precompile';
+
+module('Integration | Component | yaml-editor', function(hooks) {
+  setupRenderingTest(hooks);
+  const testText = 'default yaml';
+
+  test(`displays yaml file of alert configuration in edit mode`, async function(assert) {
+    this.setProperties({
+      alertId: 1,
+      subscriptionGroups: [],
+      detectionYaml: testText
+    });
+
+    await render(hbs`
+      {{yaml-editor
+        alertId=alertId
+        isEditMode=true
+        showSettings=true
+        subscriptionGroupNames=subscriptionGroups
+        detectionYaml=detectionYaml
+      }}
+    `);
+    assert.ok(this.$('.ace_line')[0].innerText === testText);
+  });
+
+  test(`displays default yaml file of alert configuration in create mode`, async function(assert) {
+
+    const defaultText = '# Below is a sample template for setting up a WoW percentage rule. You may refer the documentation for more examples and update the fields accordingly.';
+    await render(hbs`
+      {{yaml-editor
+        isEditMode=false
+        showSettings=true
+      }}
+    `);
+
+    assert.ok(this.$('.ace_line')[0].children[0].textContent === defaultText);
+  });
+
+  test(`displays first subscription group in dropdown in edit mode`, async function(assert) {
+    this.setProperties({
+      alertId: 1,
+      subscriptionGroups: [ {
+        id : 1,
+        name : 'test_subscription_group',
+        yaml : testText
+      } ],
+      detectionYaml: testText
+    });
+
+    await render(hbs`
+      {{yaml-editor
+        alertId=alertId
+        isEditMode=true
+        showSettings=true
+        subscriptionGroupNames=subscriptionGroups
+        detectionYaml=detectionYaml
+      }}
+    `);
+
+    assert.ok(this.$('.ember-power-select-selected-item')[0].innerText === `test_subscription_group (1)`);
+  });
+
+  test(`displays first subscription group yaml in edit mode`, async function(assert) {
+    this.setProperties({
+      alertId: 1,
+      subscriptionGroups: [ {
+        id : 1,
+        name : 'test_subscription_group',
+        yaml : testText
+      } ],
+      detectionYaml: 'nothing'
+    });
+
+    await render(hbs`
+      {{yaml-editor
+        alertId=alertId
+        isEditMode=true
+        showSettings=true
+        subscriptionGroupNames=subscriptionGroups
+        detectionYaml=detectionYaml
+      }}
+    `);
+
+    assert.ok(this.$('.ace_line')[1].innerText === testText);
+  });
+
+  test(`displays default yaml file of subscription group in create mode`, async function(assert) {
+
+    const defaultText = '# Below is a sample subscription group template. You may refer the documentation and update accordingly.';
+    await render(hbs`
+      {{yaml-editor
+        isEditMode=false
+        showSettings=true
+      }}
+    `);
+
+    assert.ok(this.$('.ace_line')[29].children[0].textContent === defaultText);
+  });
+});


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