[Chore] Update timeline default expression (opensearch-project#2720)

* [Chore] Update other timeline `es()` examples and test usage to make sure we continue supporting the old format. * [Chore] Update BWC data generation to use es(*) * [Test] Add better programmatic text clearing for monaco editor * [Test] Wait for loader to finish after clicking update Update default expression from `.es(*)` to `opensearch(*)`. Both work, but we'd prefer the latter Signed-off-by: Josh Romero <rmerqg@amazon.com> --------- Signed-off-by: Josh Romero <rmerqg@amazon.com> Signed-off-by: David Sinclair <david@sinclair.tech>
sikhote · Apr 24, 2023 · dc7af39 · dc7af39
1 parent a957f11
commit dc7af39
Show file tree

Hide file tree

Showing 17 changed files with 103 additions and 80 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -144,6 +144,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### 🛠 Maintenance
 
 - Adding @zhongnansu as maintainer. ([#2590](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2590))
+- [Timeline] Update default expressions from `.es(*)` to `.opensearch(*)`. ([2720](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/2720))
 - Removes `minimatch` manual resolution ([#3019](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3019))
 - Remove `github-checks-reporter`, an unused dependency ([#3126](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3126))
 - Upgrade `vega-lite` dependency to ^5.6.0 ([#3076](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3076))

diff --git a/cypress/integration/with-security/check_timeline.js b/cypress/integration/with-security/check_timeline.js
@@ -44,87 +44,90 @@ describe('check timeline visualization', () => {
         .find('[data-test-subj="newItemButton"]')
         .click();
       cy.get('[data-test-subj="visType-timelion"]').click();
+      // Because monaco editor doesn't use a contenteditable, input, or textarea, .clear() or .type('{selectall}') won't work. To clear, we just backspace for each character instead.
+      cy.get('[class="view-line"]')
+        .invoke('text')
+        .then((expressionText) => {
+          cy.get('[class="view-line"]').type('{backspace}'.repeat(expressionText.length));
+        });
     });
 
     it('.es(*, kibana1=true) should report search error', () => {
-      cy.get('[class="view-line"]').type('{selectall}{backspace}, kibana1=true)');
+      cy.get('[class="view-line"]').type('.es(*, kibana1=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .contains('Timeline request error: undefined Error: Unknown argument to es: kibana1');
     });
 
     it('.es(*, kibana=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type('{selectall}{backspace}, kibana=true)');
+      cy.get('[class="view-line"]').type('.es(*, kibana=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.es(*, opensearchDashboards=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type('{selectall}{backspace}, opensearchDashboards=true)');
+      cy.get('[class="view-line"]').type('.es(*, opensearchDashboards=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.elasticsearch(*, kibana1=true) should report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}elasticsearch(*, kibana1=true)'
-      );
+      cy.get('[class="view-line"]').type('.elasticsearch(*, kibana1=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .contains('Timeline request error: undefined Error: Unknown argument to es: kibana1');
     });
 
     it('.elasticsearch(*, kibana=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}elasticsearch(*, kibana=true)'
-      );
+      cy.get('[class="view-line"]').type('.elasticsearch(*, kibana=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.elasticsearch(*, opensearchDashboards=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}elasticsearch(*, opensearchDashboards=true)'
-      );
+      cy.get('[class="view-line"]').type('.elasticsearch(*, opensearchDashboards=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.opensearch(*, kibana1=true) should report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}opensearch(*, kibana1=true)'
-      );
+      cy.get('[class="view-line"]').type('.opensearch(*, kibana1=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .contains('Timeline request error: undefined Error: Unknown argument to es: kibana1');
     });
 
     it('.opensearch(*, kibana=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}opensearch(*, kibana=true)'
-      );
+      cy.get('[class="view-line"]').type('.opensearch(*, kibana=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.opensearch(*, opensearchDashboards=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}opensearch(*, opensearchDashboards=true)'
-      );
+      cy.get('[class="view-line"]').type('.opensearch(*, opensearchDashboards=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');

diff --git a/cypress/integration/with-security/helpers/generate_data.js b/cypress/integration/with-security/helpers/generate_data.js
@@ -79,6 +79,14 @@ describe('Generating BWC test data with security', () => {
       .find('[data-test-subj="newItemButton"]')
       .click();
     cy.get('[data-test-subj="visType-timelion"]').click();
+    // Because monaco editor doesn't use a contenteditable, input, or textarea, .clear() or .type('{selectall}') won't work. To clear, we just backspace for each character instead.
+    cy.get('[class="view-line"]')
+      .invoke('text')
+      .then((expressionText) => {
+        cy.get('[class="view-line"]').type('{backspace}'.repeat(expressionText.length));
+      });
+    // update default expression to use `.es(*)` instead of `.opensearch(*)` for bwc
+    cy.get('[class="view-line"]').type('.es(*)');
     cy.get('[data-test-subj="visualizeSaveButton"]').click();
     cy.get('[data-test-subj="savedObjectTitle"]').type('test-timeline');
     cy.get('[data-test-subj="confirmSaveSavedObjectButton"]').click();

diff --git a/cypress/integration/without-security/check_timeline.js b/cypress/integration/without-security/check_timeline.js
@@ -28,87 +28,90 @@ describe('check timeline visualization', () => {
         .find('[data-test-subj="newItemButton"]')
         .click();
       cy.get('[data-test-subj="visType-timelion"]').click();
+      // Because monaco editor doesn't use a contenteditable, input, or textarea, .clear() or .type('{selectall}') won't work. To clear, we just backspace for each character instead.
+      cy.get('[class="view-line"]')
+        .invoke('text')
+        .then((expressionText) => {
+          cy.get('[class="view-line"]').type('{backspace}'.repeat(expressionText.length));
+        });
     });
 
     it('.es(*, kibana1=true) should report search error', () => {
-      cy.get('[class="view-line"]').type('{selectall}{backspace}, kibana1=true)');
+      cy.get('[class="view-line"]').type('.es(*, kibana1=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .contains('Timeline request error: undefined Error: Unknown argument to es: kibana1');
     });
 
     it('.es(*, kibana=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type('{selectall}{backspace}, kibana=true)');
+      cy.get('[class="view-line"]').type('.es(*, kibana=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.es(*, opensearchDashboards=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type('{selectall}{backspace}, opensearchDashboards=true)');
+      cy.get('[class="view-line"]').type('.es(*, opensearchDashboards=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.elasticsearch(*, kibana1=true) should report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}elasticsearch(*, kibana1=true)'
-      );
+      cy.get('[class="view-line"]').type('.elasticsearch(*, kibana1=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .contains('Timeline request error: undefined Error: Unknown argument to es: kibana1');
     });
 
     it('.elasticsearch(*, kibana=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}elasticsearch(*, kibana=true)'
-      );
+      cy.get('[class="view-line"]').type('.elasticsearch(*, kibana=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.elasticsearch(*, opensearchDashboards=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}elasticsearch(*, opensearchDashboards=true)'
-      );
+      cy.get('[class="view-line"]').type('.elasticsearch(*, opensearchDashboards=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.opensearch(*, kibana1=true) should report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}opensearch(*, kibana1=true)'
-      );
+      cy.get('[class="view-line"]').type('.opensearch(*, kibana1=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .contains('Timeline request error: undefined Error: Unknown argument to es: kibana1');
     });
 
     it('.opensearch(*, kibana=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}opensearch(*, kibana=true)'
-      );
+      cy.get('[class="view-line"]').type('.opensearch(*, kibana=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');
     });
 
     it('.opensearch(*, opensearchDashboards=true) should not report search error', () => {
-      cy.get('[class="view-line"]').type(
-        '{selectall}{backspace}{backspace}{backspace}{backspace}{backspace}opensearch(*, opensearchDashboards=true)'
-      );
+      cy.get('[class="view-line"]').type('.opensearch(*, opensearchDashboards=true)');
       cy.get('[data-test-subj="visualizeEditorRenderButton"]').click();
+      cy.waitForLoader();
       cy.get('[data-test-subj="globalToastList"]')
         .find('[data-test-subj="errorToastMessage"]')
         .should('not.exist');

diff --git a/cypress/integration/without-security/helpers/generate_data.js b/cypress/integration/without-security/helpers/generate_data.js
@@ -62,6 +62,14 @@ describe('Generating BWC test data without security', () => {
       .find('[data-test-subj="newItemButton"]')
       .click();
     cy.get('[data-test-subj="visType-timelion"]').click();
+    // Because monaco editor doesn't use a contenteditable, input, or textarea, .clear() or .type('{selectall}') won't work. To clear, we just backspace for each character instead.
+    cy.get('[class="view-line"]')
+      .invoke('text')
+      .then((expressionText) => {
+        cy.get('[class="view-line"]').type('{backspace}'.repeat(expressionText.length));
+      });
+    // update default expression to use `.es(*)` instead of `.opensearch(*)` for bwc
+    cy.get('[class="view-line"]').type('.es(*)');
     cy.get('[data-test-subj="visualizeSaveButton"]').click();
     cy.get('[data-test-subj="savedObjectTitle"]').type('test-timeline');
     cy.get('[data-test-subj="confirmSaveSavedObjectButton"]').click();

diff --git a/src/plugins/timeline/public/app.js b/src/plugins/timeline/public/app.js
@@ -169,7 +169,7 @@ export function initTimelineApp(app, deps) {
     const savedVisualizations = deps.plugins.visualizations.savedVisualizationsLoader;
     const timezone = getTimezone(deps.core.uiSettings);
 
-    const defaultExpression = '.es(*)';
+    const defaultExpression = '.opensearch(*)';
 
     $scope.topNavMenu = getTopNavMenu();
 

diff --git a/src/plugins/timeline/public/directives/timeline_expression_input.html b/src/plugins/timeline/public/directives/timeline_expression_input.html
@@ -4,7 +4,7 @@
        For some reasons it doesn't work without it (even though the default role of
        the element is textbox anyway). -->
   <textarea data-expression-input role="textbox" rows="{{ rows }}" class="timExpressionInput kuiTextArea fullWidth"
-    placeholder="{{ ::'timeline.expressionInputPlaceholder' | i18n: { defaultMessage: 'Try a query with {opensearchQuery}', values: { opensearchQuery: '.es(*)' } } }}"
+    placeholder="{{ ::'timeline.expressionInputPlaceholder' | i18n: { defaultMessage: 'Try a query with {opensearchQuery}', values: { opensearchQuery: '.opensearch(*)' } } }}"
     ng-model="sheet" ng-focus="onFocusInput()" ng-keydown="onKeyDownInput($event)" ng-keyup="onKeyUpInput($event)"
     ng-blur="onBlurInput()" ng-mousedown="onMouseDownInput()" ng-mouseup="onMouseUpInput()"
     ng-click="onClickExpression()"
@@ -16,4 +16,4 @@
     suggestions-type="suggestions.type" selected-index="suggestions.index"
     on-click-suggestion="onClickSuggestion(suggestionIndex)" should-popover="shouldPopoverSuggestions">
   </timeline-expression-suggestions>
-</div>
+</div>