From e8b22121abe3a9e22b99ba65b58fb47212965130 Mon Sep 17 00:00:00 2001 From: sumukhswamy <sumukhhs@amazon.com> Date: Wed, 4 Oct 2023 14:04:02 -0700 Subject: [PATCH] Design changes for the sidebar and update to create button (#138) * added changes for loading, create button Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * removed comments, updated snapshots Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * addressed pr comments Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * addressed pr comments Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * addressed pr comments Signed-off-by: sumukhswamy <sumukhhs@amazon.com> * updated snapshots, constant for skipping index Signed-off-by: sumukhswamy <sumukhhs@amazon.com> --------- Signed-off-by: sumukhswamy <sumukhhs@amazon.com> --- common/constants/index.ts | 24 + .../Main/__snapshots__/main.test.tsx.snap | 1003 +++++++++-------- public/components/Main/main.tsx | 9 +- public/components/SQLPage/CreateButton.tsx | 100 ++ public/components/SQLPage/SQLPage.tsx | 4 +- public/components/SQLPage/TableView.tsx | 86 +- 6 files changed, 760 insertions(+), 466 deletions(-) create mode 100644 public/components/SQLPage/CreateButton.tsx diff --git a/common/constants/index.ts b/common/constants/index.ts index 6a796871..4fc24444 100644 --- a/common/constants/index.ts +++ b/common/constants/index.ts @@ -8,7 +8,31 @@ export const PLUGIN_NAME = 'Query Workbench'; export const OPENSEARCH_ACC_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest'; export const ACC_INDEX_TYPE_DOCUMENTATION_URL = 'https://opensearch.org/docs/latest'; +export const SKIPPING_INDEX = `skipping_index` export const ON_LOAD_QUERY = `SHOW tables LIKE '%';`; +export const SKIPPING_INDEX_QUERY = `CREATE SKIPPING INDEX ON myS3.logs_db.http_logs +(status VALUE_SET) +WITH ( + auto_refresh = true + )` +export const COVERING_INDEX_QUERY =`CREATE INDEX covering_idx ON myS3.logs_db.http_logs + (status) + WITH ( + auto_refresh = true + )` +export const CREATE_DATABASE_QUERY =`CREATE DATABASE myS3.logs_db` +export const CREATE_TABLE_QUERY =`CREATE EXTERNAL TABLE logs ( + key BIGINT, + status INTEGER, + size FLOAT, + agent STRING, + timestamp DATE +) +USING JSON +OPTIONS ( + path 's3://test/path', + compression 'gzip' +);` export const ACCELERATION_INDEX_TYPES = [ { label: 'Skipping Index', value: 'skipping' }, diff --git a/public/components/Main/__snapshots__/main.test.tsx.snap b/public/components/Main/__snapshots__/main.test.tsx.snap index 8b0d7301..ff0dd051 100644 --- a/public/components/Main/__snapshots__/main.test.tsx.snap +++ b/public/components/Main/__snapshots__/main.test.tsx.snap @@ -203,16 +203,59 @@ exports[`<Main /> spec click clear button 1`] = ` <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <button - class="euiButton euiButton--primary euiButton--fullWidth" - type="button" + <div + class="euiPopover euiPopover--anchorDownLeft" > - <span - class="euiButtonContent euiButtonContent--iconRight euiButton__content" + <div + class="euiPopover__anchor" + > + <button + class="euiButton euiButton--primary" + type="button" + > + <span + class="euiButtonContent euiButtonContent--iconRight euiButton__content" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" + fill-rule="non-zero" + /> + </svg> + <span + class="euiButton__text" + > + Create + </span> + </span> + </button> + </div> + </div> + </div> + <div + class="euiSpacer euiSpacer--l" + /> + <div + class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive" + > + <div + class="euiFlexItem euiFlexItem--flexGrowZero" + > + <div + class="euiEmptyPrompt" > <svg aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" + class="euiIcon euiIcon--xxLarge euiIcon--danger" focusable="false" height="16" role="img" @@ -221,47 +264,20 @@ exports[`<Main /> spec click clear button 1`] = ` xmlns="http://www.w3.org/2000/svg" > <path - d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" - fill-rule="non-zero" + d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" + fill-rule="evenodd" /> </svg> - <span - class="euiButton__text" + <div + class="euiSpacer euiSpacer--m" + /> + <h2 + class="euiTitle euiTitle--medium" > - Create - </span> - </span> - </button> - </div> - <div - class="euiSpacer euiSpacer--l" - /> - <div - class="euiEmptyPrompt" - > - <svg - aria-hidden="true" - class="euiIcon euiIcon--xxLarge euiIcon--danger" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> - <div - class="euiSpacer euiSpacer--m" - /> - <h2 - class="euiTitle euiTitle--medium" - > - Error loading Datasources - </h2> + Error loading Datasources + </h2> + </div> + </div> </div> <div class="euiSpacer euiSpacer--l" @@ -746,16 +762,59 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = ` <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <button - class="euiButton euiButton--primary euiButton--fullWidth" - type="button" + <div + class="euiPopover euiPopover--anchorDownLeft" + > + <div + class="euiPopover__anchor" + > + <button + class="euiButton euiButton--primary" + type="button" + > + <span + class="euiButtonContent euiButtonContent--iconRight euiButton__content" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" + fill-rule="non-zero" + /> + </svg> + <span + class="euiButton__text" + > + Create + </span> + </span> + </button> + </div> + </div> + </div> + <div + class="euiSpacer euiSpacer--l" + /> + <div + class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive" + > + <div + class="euiFlexItem euiFlexItem--flexGrowZero" > - <span - class="euiButtonContent euiButtonContent--iconRight euiButton__content" + <div + class="euiEmptyPrompt" > <svg aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" + class="euiIcon euiIcon--xxLarge euiIcon--danger" focusable="false" height="16" role="img" @@ -764,47 +823,20 @@ exports[`<Main /> spec click run button, and response causes an error 1`] = ` xmlns="http://www.w3.org/2000/svg" > <path - d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" - fill-rule="non-zero" + d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" + fill-rule="evenodd" /> </svg> - <span - class="euiButton__text" + <div + class="euiSpacer euiSpacer--m" + /> + <h2 + class="euiTitle euiTitle--medium" > - Create - </span> - </span> - </button> - </div> - <div - class="euiSpacer euiSpacer--l" - /> - <div - class="euiEmptyPrompt" - > - <svg - aria-hidden="true" - class="euiIcon euiIcon--xxLarge euiIcon--danger" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> - <div - class="euiSpacer euiSpacer--m" - /> - <h2 - class="euiTitle euiTitle--medium" - > - Error loading Datasources - </h2> + Error loading Datasources + </h2> + </div> + </div> </div> <div class="euiSpacer euiSpacer--l" @@ -1289,16 +1321,59 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = ` <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <button - class="euiButton euiButton--primary euiButton--fullWidth" - type="button" + <div + class="euiPopover euiPopover--anchorDownLeft" > - <span - class="euiButtonContent euiButtonContent--iconRight euiButton__content" + <div + class="euiPopover__anchor" + > + <button + class="euiButton euiButton--primary" + type="button" + > + <span + class="euiButtonContent euiButtonContent--iconRight euiButton__content" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" + fill-rule="non-zero" + /> + </svg> + <span + class="euiButton__text" + > + Create + </span> + </span> + </button> + </div> + </div> + </div> + <div + class="euiSpacer euiSpacer--l" + /> + <div + class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive" + > + <div + class="euiFlexItem euiFlexItem--flexGrowZero" + > + <div + class="euiEmptyPrompt" > <svg aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" + class="euiIcon euiIcon--xxLarge euiIcon--danger" focusable="false" height="16" role="img" @@ -1307,47 +1382,20 @@ exports[`<Main /> spec click run button, and response is not ok 1`] = ` xmlns="http://www.w3.org/2000/svg" > <path - d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" - fill-rule="non-zero" + d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" + fill-rule="evenodd" /> </svg> - <span - class="euiButton__text" + <div + class="euiSpacer euiSpacer--m" + /> + <h2 + class="euiTitle euiTitle--medium" > - Create - </span> - </span> - </button> - </div> - <div - class="euiSpacer euiSpacer--l" - /> - <div - class="euiEmptyPrompt" - > - <svg - aria-hidden="true" - class="euiIcon euiIcon--xxLarge euiIcon--danger" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> - <div - class="euiSpacer euiSpacer--m" - /> - <h2 - class="euiTitle euiTitle--medium" - > - Error loading Datasources - </h2> + Error loading Datasources + </h2> + </div> + </div> </div> <div class="euiSpacer euiSpacer--l" @@ -1832,70 +1880,22 @@ exports[`<Main /> spec click run button, and response is ok 1`] = ` <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <button - class="euiButton euiButton--primary euiButton--fullWidth" - type="button" - > - <span - class="euiButtonContent euiButtonContent--iconRight euiButton__content" - > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" - fill-rule="non-zero" - /> - </svg> - <span - class="euiButton__text" - > - Create - </span> - </span> - </button> - </div> - <div - class="euiSpacer euiSpacer--l" - /> - <div - class="euiText euiText--medium euiTreeView__wrapper" - > - <p - class="euiScreenReaderOnly" - id="some_html_id--instruction" - > - You can quickly navigate this list using arrow keys. - </p> - <ul - aria-describedby="some_html_id--instruction" - aria-label="Sample Folder Tree" - class="euiTreeView" - id="some_html_id" + <div + class="euiPopover euiPopover--anchorDownLeft" > - <li - class="euiTreeView__node" + <div + class="euiPopover__anchor" > <button - aria-controls="some_html_id" - aria-expanded="false" - class="euiTreeView__nodeInner" - data-test-subj="euiTreeViewButton-some_html_id" - id="element_0" + class="euiButton euiButton--primary" + type="button" > <span - class="euiTreeView__iconWrapper" + class="euiButtonContent euiButtonContent--iconRight euiButton__content" > <svg aria-hidden="true" - class="euiIcon euiIcon--medium" + class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" focusable="false" height="16" role="img" @@ -1904,63 +1904,129 @@ exports[`<Main /> spec click run button, and response is ok 1`] = ` xmlns="http://www.w3.org/2000/svg" > <path - d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z" + d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" + fill-rule="non-zero" /> </svg> - </span> - <span - class="euiTreeView__nodeLabel" - > - <div> - 2 - </div> + <span + class="euiButton__text" + > + Create + </span> </span> </button> - <div - id="some_html_id" - /> - </li> - <li - class="euiTreeView__node" + </div> + </div> + </div> + <div + class="euiSpacer euiSpacer--l" + /> + <div + class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive" + > + <div + class="euiFlexItem euiFlexItem--flexGrowZero" + > + <div + class="euiText euiText--medium euiTreeView__wrapper" > - <button - aria-controls="some_html_id" - aria-expanded="false" - class="euiTreeView__nodeInner" - data-test-subj="euiTreeViewButton-some_html_id" - id="element_1" + <p + class="euiScreenReaderOnly" + id="some_html_id--instruction" > - <span - class="euiTreeView__iconWrapper" + You can quickly navigate this list using arrow keys. + </p> + <ul + aria-describedby="some_html_id--instruction" + aria-label="Sample Folder Tree" + class="euiTreeView" + id="some_html_id" + > + <li + class="euiTreeView__node" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" + <button + aria-controls="some_html_id" + aria-expanded="false" + class="euiTreeView__nodeInner" + data-test-subj="euiTreeViewButton-some_html_id" + id="element_0" > - <path - d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z" - /> - </svg> - </span> - <span - class="euiTreeView__nodeLabel" + <span + class="euiTreeView__iconWrapper" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z" + /> + </svg> + </span> + <span + class="euiTreeView__nodeLabel" + > + <div> + 2 + + </div> + </span> + </button> + <div + id="some_html_id" + /> + </li> + <li + class="euiTreeView__node" > - <div> - 2 - </div> - </span> - </button> - <div - id="some_html_id" - /> - </li> - </ul> + <button + aria-controls="some_html_id" + aria-expanded="false" + class="euiTreeView__nodeInner" + data-test-subj="euiTreeViewButton-some_html_id" + id="element_1" + > + <span + class="euiTreeView__iconWrapper" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z" + /> + </svg> + </span> + <span + class="euiTreeView__nodeLabel" + > + <div> + 2 + + </div> + </span> + </button> + <div + id="some_html_id" + /> + </li> + </ul> + </div> + </div> </div> <div class="euiSpacer euiSpacer--l" @@ -2445,70 +2511,22 @@ exports[`<Main /> spec click run button, response fills null and missing values <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <button - class="euiButton euiButton--primary euiButton--fullWidth" - type="button" - > - <span - class="euiButtonContent euiButtonContent--iconRight euiButton__content" - > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" - fill-rule="non-zero" - /> - </svg> - <span - class="euiButton__text" - > - Create - </span> - </span> - </button> - </div> - <div - class="euiSpacer euiSpacer--l" - /> - <div - class="euiText euiText--medium euiTreeView__wrapper" - > - <p - class="euiScreenReaderOnly" - id="some_html_id--instruction" - > - You can quickly navigate this list using arrow keys. - </p> - <ul - aria-describedby="some_html_id--instruction" - aria-label="Sample Folder Tree" - class="euiTreeView" - id="some_html_id" + <div + class="euiPopover euiPopover--anchorDownLeft" > - <li - class="euiTreeView__node" + <div + class="euiPopover__anchor" > <button - aria-controls="some_html_id" - aria-expanded="false" - class="euiTreeView__nodeInner" - data-test-subj="euiTreeViewButton-some_html_id" - id="element_0" + class="euiButton euiButton--primary" + type="button" > <span - class="euiTreeView__iconWrapper" + class="euiButtonContent euiButtonContent--iconRight euiButton__content" > <svg aria-hidden="true" - class="euiIcon euiIcon--medium" + class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" focusable="false" height="16" role="img" @@ -2517,59 +2535,127 @@ exports[`<Main /> spec click run button, response fills null and missing values xmlns="http://www.w3.org/2000/svg" > <path - d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z" + d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" + fill-rule="non-zero" /> </svg> - </span> - <span - class="euiTreeView__nodeLabel" - > - <div /> + <span + class="euiButton__text" + > + Create + </span> </span> </button> - <div - id="some_html_id" - /> - </li> - <li - class="euiTreeView__node" + </div> + </div> + </div> + <div + class="euiSpacer euiSpacer--l" + /> + <div + class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive" + > + <div + class="euiFlexItem euiFlexItem--flexGrowZero" + > + <div + class="euiText euiText--medium euiTreeView__wrapper" > - <button - aria-controls="some_html_id" - aria-expanded="false" - class="euiTreeView__nodeInner" - data-test-subj="euiTreeViewButton-some_html_id" - id="element_1" + <p + class="euiScreenReaderOnly" + id="some_html_id--instruction" > - <span - class="euiTreeView__iconWrapper" + You can quickly navigate this list using arrow keys. + </p> + <ul + aria-describedby="some_html_id--instruction" + aria-label="Sample Folder Tree" + class="euiTreeView" + id="some_html_id" + > + <li + class="euiTreeView__node" > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" + <button + aria-controls="some_html_id" + aria-expanded="false" + class="euiTreeView__nodeInner" + data-test-subj="euiTreeViewButton-some_html_id" + id="element_0" > - <path - d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z" - /> - </svg> - </span> - <span - class="euiTreeView__nodeLabel" + <span + class="euiTreeView__iconWrapper" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z" + /> + </svg> + </span> + <span + class="euiTreeView__nodeLabel" + > + <div> + + </div> + </span> + </button> + <div + id="some_html_id" + /> + </li> + <li + class="euiTreeView__node" > - <div /> - </span> - </button> - <div - id="some_html_id" - /> - </li> - </ul> + <button + aria-controls="some_html_id" + aria-expanded="false" + class="euiTreeView__nodeInner" + data-test-subj="euiTreeViewButton-some_html_id" + id="element_1" + > + <span + class="euiTreeView__iconWrapper" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M2 12h12v-1.97c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V12Zm-1 0V3c0-1.105 3.134-2 7-2s7 .895 7 2v9c0 1.105-3.134 2-7 2s-7-.895-7-2Zm1-3h12V7.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97V9Zm0-4.97V6h12V4.03c-1.225.582-3.454.97-6 .97s-4.775-.388-6-.97Zm10.675-1.483C11.467 2.202 9.795 2 8 2c-1.794 0-3.467.202-4.675.547-.492.14-.88.298-1.136.453.256.155.644.312 1.136.453C4.533 3.798 6.205 4 8 4c1.794 0 3.467-.202 4.675-.547.492-.14.88-.298 1.136-.453-.256-.155-.644-.312-1.136-.453ZM2 6c.257.155.833.312 1.325.453C4.533 6.798 6.205 7 8 7c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 9.798 6.205 10 8 10c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Zm0 3c.257.155.833.312 1.325.453C4.533 12.798 6.205 13 8 13c1.794 0 3.467-.202 4.675-.547.492-.14 1.07-.298 1.327-.453H2Z" + /> + </svg> + </span> + <span + class="euiTreeView__nodeLabel" + > + <div> + + </div> + </span> + </button> + <div + id="some_html_id" + /> + </li> + </ul> + </div> + </div> </div> <div class="euiSpacer euiSpacer--l" @@ -3057,16 +3143,59 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = ` <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <button - class="euiButton euiButton--primary euiButton--fullWidth" - type="button" + <div + class="euiPopover euiPopover--anchorDownLeft" > - <span - class="euiButtonContent euiButtonContent--iconRight euiButton__content" + <div + class="euiPopover__anchor" + > + <button + class="euiButton euiButton--primary" + type="button" + > + <span + class="euiButtonContent euiButtonContent--iconRight euiButton__content" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + > + <path + d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" + fill-rule="non-zero" + /> + </svg> + <span + class="euiButton__text" + > + Create + </span> + </span> + </button> + </div> + </div> + </div> + <div + class="euiSpacer euiSpacer--l" + /> + <div + class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive" + > + <div + class="euiFlexItem euiFlexItem--flexGrowZero" + > + <div + class="euiEmptyPrompt" > <svg aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon--inherit euiButtonContent__icon" + class="euiIcon euiIcon--xxLarge euiIcon--danger" focusable="false" height="16" role="img" @@ -3075,47 +3204,20 @@ exports[`<Main /> spec click translation button, and response is ok 1`] = ` xmlns="http://www.w3.org/2000/svg" > <path - d="M13.069 5.157 8.384 9.768a.546.546 0 0 1-.768 0L2.93 5.158a.552.552 0 0 0-.771 0 .53.53 0 0 0 0 .759l4.684 4.61c.641.631 1.672.63 2.312 0l4.684-4.61a.53.53 0 0 0 0-.76.552.552 0 0 0-.771 0Z" - fill-rule="non-zero" + d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" + fill-rule="evenodd" /> </svg> - <span - class="euiButton__text" + <div + class="euiSpacer euiSpacer--m" + /> + <h2 + class="euiTitle euiTitle--medium" > - Create - </span> - </span> - </button> - </div> - <div - class="euiSpacer euiSpacer--l" - /> - <div - class="euiEmptyPrompt" - > - <svg - aria-hidden="true" - class="euiIcon euiIcon--xxLarge euiIcon--danger" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - > - <path - d="M7.59 10.059 7.35 5.18h1.3L8.4 10.06h-.81Zm.394 1.901a.61.61 0 0 1-.448-.186.606.606 0 0 1-.186-.444c0-.174.062-.323.186-.446a.614.614 0 0 1 .448-.184c.169 0 .315.06.44.182.124.122.186.27.186.448a.6.6 0 0 1-.189.446.607.607 0 0 1-.437.184ZM2 14a1 1 0 0 1-.878-1.479l6-11a1 1 0 0 1 1.756 0l6 11A1 1 0 0 1 14 14H2Zm0-1h12L8 2 2 13Z" - fill-rule="evenodd" - /> - </svg> - <div - class="euiSpacer euiSpacer--m" - /> - <h2 - class="euiTitle euiTitle--medium" - > - Error loading Datasources - </h2> + Error loading Datasources + </h2> + </div> + </div> </div> <div class="euiSpacer euiSpacer--l" @@ -3591,65 +3693,22 @@ exports[`<Main /> spec renders the component 1`] = ` <div class="euiFlexItem euiFlexItem--flexGrowZero" > - <button - class="euiButton euiButton--primary euiButton--fullWidth" - type="button" - > - <span - class="euiButtonContent euiButtonContent--iconRight euiButton__content" - > - <svg - aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon" - focusable="false" - height="16" - role="img" - viewBox="0 0 16 16" - width="16" - xmlns="http://www.w3.org/2000/svg" - /> - <span - class="euiButton__text" - > - Create - </span> - </span> - </button> - </div> - <div - class="euiSpacer euiSpacer--l" - /> - <div - class="euiText euiText--medium euiTreeView__wrapper" - > - <p - class="euiScreenReaderOnly" - id="some_html_id--instruction" - > - You can quickly navigate this list using arrow keys. - </p> - <ul - aria-describedby="some_html_id--instruction" - aria-label="Sample Folder Tree" - class="euiTreeView" - id="some_html_id" + <div + class="euiPopover euiPopover--anchorDownLeft" > - <li - class="euiTreeView__node" + <div + class="euiPopover__anchor" > <button - aria-controls="some_html_id" - aria-expanded="false" - class="euiTreeView__nodeInner" - data-test-subj="euiTreeViewButton-some_html_id" - id="element_0" + class="euiButton euiButton--primary" + type="button" > <span - class="euiTreeView__iconWrapper" + class="euiButtonContent euiButtonContent--iconRight euiButton__content" > <svg aria-hidden="true" - class="euiIcon euiIcon--medium euiIcon-isLoading" + class="euiIcon euiIcon--medium euiIcon--inherit euiIcon-isLoading euiButtonContent__icon" focusable="false" height="16" role="img" @@ -3657,20 +3716,80 @@ exports[`<Main /> spec renders the component 1`] = ` width="16" xmlns="http://www.w3.org/2000/svg" /> - </span> - <span - class="euiTreeView__nodeLabel" - > - <div> - .kibana_1 - </div> + <span + class="euiButton__text" + > + Create + </span> </span> </button> - <div + </div> + </div> + </div> + <div + class="euiSpacer euiSpacer--l" + /> + <div + class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--directionRow euiFlexGroup--responsive" + > + <div + class="euiFlexItem euiFlexItem--flexGrowZero" + > + <div + class="euiText euiText--medium euiTreeView__wrapper" + > + <p + class="euiScreenReaderOnly" + id="some_html_id--instruction" + > + You can quickly navigate this list using arrow keys. + </p> + <ul + aria-describedby="some_html_id--instruction" + aria-label="Sample Folder Tree" + class="euiTreeView" id="some_html_id" - /> - </li> - </ul> + > + <li + class="euiTreeView__node" + > + <button + aria-controls="some_html_id" + aria-expanded="false" + class="euiTreeView__nodeInner" + data-test-subj="euiTreeViewButton-some_html_id" + id="element_0" + > + <span + class="euiTreeView__iconWrapper" + > + <svg + aria-hidden="true" + class="euiIcon euiIcon--medium euiIcon-isLoading" + focusable="false" + height="16" + role="img" + viewBox="0 0 16 16" + width="16" + xmlns="http://www.w3.org/2000/svg" + /> + </span> + <span + class="euiTreeView__nodeLabel" + > + <div> + .kibana_1 + + </div> + </span> + </button> + <div + id="some_html_id" + /> + </li> + </ul> + </div> + </div> </div> <div class="euiSpacer euiSpacer--l" diff --git a/public/components/Main/main.tsx b/public/components/Main/main.tsx index d173e223..046554dc 100644 --- a/public/components/Main/main.tsx +++ b/public/components/Main/main.tsx @@ -14,7 +14,7 @@ import { EuiPageSideBar, EuiPanel, EuiSpacer, - EuiText, + EuiText } from '@elastic/eui'; import { IHttpResponse } from 'angular'; import _ from 'lodash'; @@ -32,6 +32,7 @@ import { import { PPLPage } from '../PPLPage/PPLPage'; import Switch from '../QueryLanguageSwitch/Switch'; import QueryResults from '../QueryResults/QueryResults'; +import { CreateButton } from '../SQLPage/CreateButton'; import { DataSelect } from '../SQLPage/DataSelect'; import { SQLPage } from '../SQLPage/SQLPage'; import { TableView } from '../SQLPage/TableView'; @@ -915,9 +916,9 @@ export class Main extends React.Component<MainProps, MainState> { <EuiFlexGroup direction="column"> <EuiFlexItem> <EuiFlexItem grow={false}> - <EuiButton iconType="arrowDown" iconSide="right" fullWidth> - Create - </EuiButton> + <CreateButton + updateSQLQueries={this.updateSQLQueries} + /> </EuiFlexItem> <EuiSpacer /> <TableView diff --git a/public/components/SQLPage/CreateButton.tsx b/public/components/SQLPage/CreateButton.tsx new file mode 100644 index 00000000..9e4db734 --- /dev/null +++ b/public/components/SQLPage/CreateButton.tsx @@ -0,0 +1,100 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { EuiButton, EuiContextMenu, EuiPopover } from '@elastic/eui'; +import React, { useState } from 'react'; +import { COVERING_INDEX_QUERY, CREATE_DATABASE_QUERY, CREATE_TABLE_QUERY, SKIPPING_INDEX_QUERY } from '../../../common/constants'; + + +interface CreateButtonProps { + updateSQLQueries: (query: string) => void +} + +export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => { + const [isPopoverOpen, setIsPopoverOpen] = useState(false); + const [selectedOption, setSelectedOption] = useState(null); + + const closePopover = () => { + setIsPopoverOpen(false); + }; + + const togglePopover = (option) => { + setSelectedOption(option); + setIsPopoverOpen(!isPopoverOpen); + }; + + const handleSubMenuClick = (query: string) => { + updateSQLQueries(query) + closePopover(); + }; + + const fromSqlItems = [ + { + name: 'Create Table', + onClick: () => handleSubMenuClick(CREATE_DATABASE_QUERY), + }, + { + name: 'SQL Command', + onClick: () => handleSubMenuClick(CREATE_TABLE_QUERY), + }, + ]; + + const acceleratedIndexItems = [ + { + name: 'Skipping Index', + onClick: () => handleSubMenuClick(SKIPPING_INDEX_QUERY), + }, + { + name: 'Covering Index', + onClick: () => handleSubMenuClick(COVERING_INDEX_QUERY), + }, + ]; + + const button = ( + <EuiButton iconType="arrowDown" iconSide="right" onClick={() => togglePopover(null)}> + Create + </EuiButton> + ); + + return ( + <EuiPopover + button={button} + isOpen={isPopoverOpen} + closePopover={closePopover} + panelPaddingSize="s" + anchorPosition="downLeft" + > + <EuiContextMenu + initialPanelId={0} + panels={[ + { + id: 0, + title: 'Choose an option', + items: [ + { + name: 'FROM SQL', + panel: 1, + }, + { + name: 'Accelerated Index', + panel: 2, + }, + ], + }, + { + id: 1, + title: 'FROM SPARK SQL Options', + items: fromSqlItems, + }, + { + id: 2, + title: 'Accelerated Index Options', + items: acceleratedIndexItems, + }, + ]} + /> + </EuiPopover> + ); +} \ No newline at end of file diff --git a/public/components/SQLPage/SQLPage.tsx b/public/components/SQLPage/SQLPage.tsx index 6d6436c8..9894b143 100644 --- a/public/components/SQLPage/SQLPage.tsx +++ b/public/components/SQLPage/SQLPage.tsx @@ -17,7 +17,7 @@ import { EuiModalHeaderTitle, EuiOverlayMask, EuiPanel, - EuiSpacer, + EuiSpacer } from '@elastic/eui'; import 'brace/ext/language_tools'; import 'brace/mode/sql'; @@ -124,7 +124,7 @@ export class SQLPage extends React.Component<SQLPageProps, SQLPageState> { } return ( - <> + <> <EuiPanel className="sql-console-query-editor container-panel" paddingSize="m"> <EuiSpacer size="s" /> <EuiCodeEditor diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx index fcc78657..f3c97f24 100644 --- a/public/components/SQLPage/TableView.tsx +++ b/public/components/SQLPage/TableView.tsx @@ -3,11 +3,19 @@ * SPDX-License-Identifier: Apache-2.0 */ -import { EuiComboBoxOptionOption, EuiEmptyPrompt, EuiIcon, EuiTreeView } from '@elastic/eui'; +import { + EuiComboBoxOptionOption, + EuiEmptyPrompt, + EuiFlexGroup, + EuiFlexItem, + EuiIcon, + EuiLoadingSpinner, + EuiTreeView, +} from '@elastic/eui'; import _ from 'lodash'; import React, { useEffect, useState } from 'react'; import { CoreStart } from '../../../../../src/core/public'; -import { ON_LOAD_QUERY } from '../../../common/constants'; +import { ON_LOAD_QUERY, SKIPPING_INDEX } from '../../../common/constants'; import { AccelerationIndexFlyout } from './acceleration_index_flyout'; import { getJobId, pollQueryStatus } from './utils'; @@ -48,6 +56,8 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) /> ); }; + const [childLoadingStates, setChildLoadingStates] = useState<{ [key: string]: boolean }>({}); + const [tableLoadingStates, setTableLoadingStates] = useState<{ [key: string]: boolean }>({}); const get_async_query_results = (id, http, callback) => { pollQueryStatus(id, http, callback); @@ -73,6 +83,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) console.error(err); }); } else { + setIsLoading(true); setTablenames([]); const query = { lang: 'sql', @@ -82,6 +93,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) getJobId(query, http, (id) => { get_async_query_results(id, http, (data) => { setTablenames(data); + setIsLoading(false); }); }); } @@ -98,10 +110,19 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) query: `SHOW TABLES IN ${selectedItems[0]['label']}.${nodeLabel}`, datasource: selectedItems[0]['label'], }; + setTableLoadingStates((prevState) => ({ + ...prevState, + [nodeLabel]: true, + })); getJobId(query, http, (id) => { get_async_query_results(id, http, (data) => { data = data.map((subArray) => subArray[1]); setChildData(data); + + setTableLoadingStates((prevState) => ({ + ...prevState, + [nodeLabel]: false, + })); }); }); }; @@ -115,7 +136,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) getJobId(coverQuery, http, (id) => { get_async_query_results(id, http, (data) => { data = [].concat(...data); - indiciesData.push(data); + indiciesData.concat(data); setIndexedData(indiciesData); }); }); @@ -127,23 +148,35 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) query: `DESC SKIPPING INDEX ON ${selectedItems[0]['label']}.${selectedNode}.${nodeLabel1}`, datasource: selectedItems[0]['label'], }; + setChildLoadingStates((prevState) => ({ + ...prevState, + [nodeLabel1]: true, + })); + getJobId(skipQuery, http, (id) => { get_async_query_results(id, http, (data) => { if (data.length > 0) { - indiciesData.push('skip_index'); + indiciesData.push(SKIPPING_INDEX); callCoverQuery(nodeLabel1); + + setChildLoadingStates((prevState) => ({ + ...prevState, + [nodeLabel1]: false, + })); } }); }); }; const treeData = tablenames.map((database, index) => ({ - label: <div>{database}</div>, + label: ( + <div> + {database} {tableLoadingStates[database] && <EuiLoadingSpinner size="m" />} + </div> + ), icon: <EuiIcon type="database" size="m" />, id: 'element_' + index, callback: () => { - setChildData([]); - setIsLoading(true); handleNodeClick(database); }, isSelectable: true, @@ -151,7 +184,11 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) children: selectedNode === database ? childData.map((table) => ({ - label: <div>{table}</div>, + label: ( + <div> + {table} {childLoadingStates[table] && <EuiLoadingSpinner size="m" />} + </div> + ), id: `${database}_${table}`, icon: <EuiIcon type="tableDensityCompact" size="s" />, callback: () => { @@ -181,16 +218,29 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) return ( <> - {treeData.length > 0 ? ( - <EuiTreeView aria-label="Sample Folder Tree" items={treeData} /> - ) : ( - <EuiEmptyPrompt - iconType="alert" - iconColor="danger" - title={<h2>Error loading Datasources</h2>} - /> - )} - {indexFlyout} + <EuiFlexGroup> + {isLoading ? ( + <EuiFlexGroup alignItems="center" gutterSize='s'> + <EuiFlexItem grow={false}>Loading your databases</EuiFlexItem> + <EuiFlexItem grow={false}> + <EuiLoadingSpinner size="m" /> + </EuiFlexItem> + </EuiFlexGroup> + ) : treeData.length > 0 ? ( + <EuiFlexItem grow={false}> + <EuiTreeView aria-label="Sample Folder Tree" items={treeData} /> + </EuiFlexItem> + ) : ( + <EuiFlexItem grow={false}> + <EuiEmptyPrompt + iconType="alert" + iconColor="danger" + title={<h2>Error loading Datasources</h2>} + /> + </EuiFlexItem> + )} + {indexFlyout} + </EuiFlexGroup> </> ); };