Restyle workbench SQL/PPL UI

workbench/.cypress/integration/ui.spec.js

@@ -18,9 +18,75 @@
 import { edit } from "brace";
 import { delay, testQueries, verifyDownloadData, files } from "../utils/constants";
 
-describe('Test UI buttons', () => {
+
+describe('Test PPL UI', () => {
   beforeEach(() => {
     cy.visit('app/opendistro-query-workbench');
+    cy.get('.euiToggle__input[title=PPL]').click();
+    cy.wait(delay);
+  });
+
+  it('Confirm results are empty', () => {
+    cy.get('.euiTextAlign').contains('Enter a query in the query editor above to see results.').should('have.length', 1);
+  });
+
+  it('Test Run button', () => {
+    cy.get('textarea.ace_text-input').eq(0).focus().type('source=accounts', { force: true });
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('.euiTab__content').contains('Events').click();
+
+    cy.get('span.euiTableCellContent__text').eq(21).should((employer) => {
+      expect(employer).to.contain('Pyrami');
+    });
+  });
+
+  it('Test Clear button', () => {
+    cy.get('textarea.ace_text-input').eq(0).focus().type('source=accounts', { force: true });
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('.euiTab__content').contains('Events').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Clear').click();
+    cy.wait(delay);
+
+    cy.get('.euiTextAlign').contains('Enter a query in the query editor above to see results.').should('have.length', 1);
+    cy.get('.ace_content').eq(0).then((queryEditor) => {
+      const editor = edit(queryEditor[0]);
+      expect(editor.getValue()).to.equal('');
+    });
+  });
+
+  it('Test full screen view', () => {
+    cy.get('.euiButton__text').contains('Full screen view').should('not.exist');
+    cy.get('.euiTitle').contains('Query Workbench').should('exist');
+
+    cy.get('textarea.ace_text-input').eq(0).focus().type('source=accounts', { force: true });
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Full screen view').click();
+
+    cy.get('.euiTitle').should('not.exist');
+
+    cy.get('button#exit-fullscreen-button').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Full screen view').should('exist');
+    cy.get('.euiTitle').contains('Query Workbench').should('exist');
+  });
+});
+
+describe('Test SQL UI', () => {
+  beforeEach(() => {
+    cy.visit('app/opendistro-query-workbench');
+    cy.get('.euiToggle__input[title=SQL]').click();
+    cy.wait(delay);
+  });
+
+  it('Confirm results are empty', () => {
+    cy.get('.euiTextAlign').contains('Enter a query in the query editor above to see results.').should('have.length', 1);
   });
 
   it('Test Run button and field search', () => {
@@ -41,28 +107,45 @@ describe('Test UI buttons', () => {
     cy.wait(delay);
     cy.get('textarea.ace_text-input').eq(0).focus().type('{selectall}{backspace}select log(balance) from accounts where abs(age) > 20;', { force: true });
     cy.wait(delay);
-    cy.get('.euiButton__text').contains('Translate').click();
+    cy.get('.euiButton__text').contains('Explain').click();
     cy.wait(delay);
 
-    // Note: Translation retrived this way will get cut off, so doing a substring check
-    cy.get('.ace_content').eq(1).then((translate_editor) => {
-      const editor = edit(translate_editor[0]);
-      expect(editor.getValue()).to.have.string("Math.abs(doc['age'].value);abs_1 > 20");
-    });
+    // hard to get euiCodeBlock content, check length instead
+    cy.get('.euiCodeBlock__code').children().should('have.length', 37);
   });
 
   it('Test Clear button', () => {
     cy.get('.euiButton__text').contains('Clear').click();
     cy.wait(delay);
 
-    cy.get('.ace_content').eq(0).then((sql_query_editor) => {
-      const editor = edit(sql_query_editor[0]);
+    cy.get('.ace_content').eq(0).then((queryEditor) => {
+      const editor = edit(queryEditor[0]);
       expect(editor.getValue()).to.equal('');
     });
   });
+
+  it('Test full screen view', () => {
+    cy.get('.euiButton__text').contains('Full screen view').should('not.exist');
+    cy.get('.euiTitle').contains('Query Workbench').should('exist');
+
+    cy.get('textarea.ace_text-input').eq(0).focus().type('{selectall}{backspace}', { force: true });
+    cy.wait(delay);
+    cy.get('textarea.ace_text-input').eq(0).focus().type('{selectall}{backspace}select log(balance) from accounts where abs(age) > 20;', { force: true });
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Run').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Full screen view').click();
+
+    cy.get('.euiTitle').should('not.exist');
+
+    cy.get('button#exit-fullscreen-button').click();
+    cy.wait(delay);
+    cy.get('.euiButton__text').contains('Full screen view').should('exist');
+    cy.get('.euiTitle').contains('Query Workbench').should('exist');
+  });
 });
 
-describe('Test and verify downloads', () => {
+describe('Test and verify SQL downloads', () => {
   verifyDownloadData.map(({ title, url, file }) => {
     it(title, () => {
       cy.request({
@@ -86,6 +169,8 @@ describe('Test and verify downloads', () => {
 describe('Test table display', () => {
   beforeEach(() => {
     cy.visit('app/opendistro-query-workbench');
+    cy.get('.euiToggle__input[title=SQL]').click();
+    cy.wait(delay);
     cy.get('textarea.ace_text-input').eq(0).focus().type('{selectall}{backspace}', { force: true });
     cy.wait(delay);
   });

workbench/.cypress/utils/constants.js

@@ -18,22 +18,22 @@ export const delay = 300;
 export const verifyDownloadData = [
   {
     title: 'Download and verify JSON',
-    url: 'api/sql_console/queryjson',
+    url: 'api/sql_console/sqljson',
     file: 'JSONFile'
   },
   {
     title: 'Download and verify JDBC',
-    url: 'api/sql_console/queryjdbc',
+    url: 'api/sql_console/sqlquery',
     file: 'JDBCFile'
   },
   {
     title: 'Download and verify CSV',
-    url: 'api/sql_console/querycsv',
+    url: 'api/sql_console/sqlcsv',
     file: 'CSVFile'
   },
   {
     title: 'Download and verify Text',
-    url: 'api/sql_console/querytext',
+    url: 'api/sql_console/sqltext',
     file: 'TextFile'
   },
 ];

workbench/index.js

@@ -35,7 +35,7 @@ export default function (kibana) {
         description: 'Query Workbench',
         main: 'plugins/' + PLUGIN_NAME + '/app',
         icon: 'plugins/' + PLUGIN_NAME + '/icons/sql.svg',
-        order: 9050,
+        order: 8010,
         category: DEFAULT_APP_CATEGORIES.kibana,
       },
       styleSheetPaths: [resolve(__dirname, 'public/app.scss')].find(p => existsSync(p))

workbench/public/ace-themes/sql_console.css

@@ -14,8 +14,8 @@
  */
 
 .ace-sql-console .ace_gutter {
-  background: rgb(245, 247, 250); /* $euiColorLightestShade */
-  color: rgb(105, 112, 125); /* $$euiColorDarkShade */
+  background: rgb(237, 239, 243);
+  color: rgb(0, 0, 0);
 }
 
 .ace-sql-console .ace_print-margin {
@@ -46,7 +46,7 @@
 
 .ace-sql-console .ace_storage,
 .ace-sql-console .ace_keyword {
-  color: blue;
+  color: rgb(157, 106, 242);
 }
 
 .ace-sql-console .ace_constant {

workbench/public/app.scss

@@ -21,20 +21,8 @@
 }
 
 .sql-console-query-editor {
-  height: 280px;
-  max-height: 280px;
-  .container-panel {
-    border-radius: 0px;
-    box-shadow: none;
-  }
-  .sql-query-panel {
-    border-radius: 0px;
-    border-width: 1px;
-    box-shadow: none;
-  }
   .sql-query-panel-header {
-    padding: $euiSizeS;
-    background-color: $euiColorLightestShade;
+    margin-top: -10px;
   }
   .resize-panel {
     resize: vertical;
@@ -46,48 +34,38 @@
   }
 }
 
-.action-container {
-  padding: $euiSizeL;
-}
-
 .sql-console-query-result{
-  height: 577px;
-  scroll-behavior: smooth;
-  .sql-console-results-container {
-    overflow: auto;
-  }
-  .query-result-container {
-    border: solid 1.5px #d9d9d9;
-    border-radius: 0px;
-    border-bottom-width: 0;
+  .query-result-panel-header {
+    color: #3f3f3f;
   }
+  scroll-behavior: smooth;
   .tabs-container {
     overflow: hidden;
     margin: 3px;
   }
   .table-name {
-    font-size: 20px;
-    padding: 20px;
+    color: #3f3f3f;
+    margin-bottom: 7px;
   }
-  .table-header {
-    /*border-top: solid 1px #d9d9d9;*/
-    background-color: #d9d9d9;
+  .table-item-count {
+    color: #8a9596;
+    font-weight: 370;
   }
   .sideNav-table {
     border: solid 1px rgb(217, 217, 217);
     border-collapse: separate;
   }
   .search-panel {
     display: inline-flex;
-    width:100%;
-    padding:20px;
+    width: 70%;
   }
   .search-bar {
     width:80%;
   }
   .pagination-container {
-    margin-top: 10px;
-    margin-bottom: 10px;
+    padding: 10px;
+    padding-top: 15px;
+    padding-bottom: 15px;
   }
 
   .tab-arrow-down-container {
@@ -97,23 +75,15 @@
     color: rgb(0, 121, 165);
   }
 
-  .download-container {
-    padding: $euiSizeM;
-    height: 56px;
-    vertical-align: middle;
-    border-width: 1px;
-    margin-bottom: 20px;
-  }
-
-  .download-button-container {
-    float:right;
-  }
-
   .toggleContainer {
     margin: 20px;
   }
 }
 
+.sql-console-results-container {
+  margin-top: -17px;
+}
+
 .expanded-row {
   /*background-color: rgb(232,243,246);
   /*background-color: rgb(245,247,250);*/