From e8b22121abe3a9e22b99ba65b58fb47212965130 Mon Sep 17 00:00:00 2001 From: sumukhswamy 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 * removed comments, updated snapshots Signed-off-by: sumukhswamy * addressed pr comments Signed-off-by: sumukhswamy * addressed pr comments Signed-off-by: sumukhswamy * addressed pr comments Signed-off-by: sumukhswamy * updated snapshots, constant for skipping index Signed-off-by: sumukhswamy --------- Signed-off-by: sumukhswamy --- 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[`
spec click clear button 1`] = `
- +
+ + +
+
+
+
spec click clear button 1`] = ` xmlns="http://www.w3.org/2000/svg" > - +

- Create - - - -

-
-
- -
-

- Error loading Datasources -

+ Error loading Datasources + +
+
spec click run button, and response causes an error 1`] = `
- +
+
+
+
+
+
- spec click run button, and response causes an error 1`] = ` xmlns="http://www.w3.org/2000/svg" > - +

- Create - - - -

-
-
- -
-

- Error loading Datasources -

+ Error loading Datasources + +
+
spec click run button, and response is not ok 1`] = `
- +
+
+
+
+
+
+
spec click run button, and response is not ok 1`] = ` xmlns="http://www.w3.org/2000/svg" > - +

- Create - - - -

-
-
- -
-

- Error loading Datasources -

+ Error loading Datasources + +
+
spec click run button, and response is ok 1`] = `
- -
-
-
-

- You can quickly navigate this list using arrow keys. -

-
    -
  • -
    -
    • -
  • +
+
+
+
+
+
- +
+ +
  • -
    - 2 -
    - - -
    -
    • - + +
    + + +
    +
    spec click run button, response fills null and missing values
    - -
    -
    -
    -

    - You can quickly navigate this list using arrow keys. -

    -
      -
    • -
      -
      • -
    • +
    +
    +
    +
    +
    +
    - +
    + +
  • -
    - - -
    -
    • - + +
    + + +
    +
    spec click translation button, and response is ok 1`] = `
    - +
    +
    +
    +
    +
    +
    +
    spec click translation button, and response is ok 1`] = ` xmlns="http://www.w3.org/2000/svg" > - +

    - Create - - - -

    -
    -
    - -
    -

    - Error loading Datasources -

    + Error loading Datasources + +
    +
    spec renders the component 1`] = `
    - -
    -
    -
    -

    - You can quickly navigate this list using arrow keys. -

    -
      -
    • -
      +
      +
    +
    +
    +
    +
    +

    + You can quickly navigate this list using arrow keys. +

    +
      - -
    + > +
  • + +
    +
    • + +
    +
    { - - Create - + 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 = ( + togglePopover(null)}> + Create + + ); + + return ( + + + + ); +} \ 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 { } return ( - <> + <> ); }; + 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:
    {database}
    , + label: ( +
    + {database} {tableLoadingStates[database] && } +
    + ), icon: , 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:
    {table}
    , + label: ( +
    + {table} {childLoadingStates[table] && } +
    + ), id: `${database}_${table}`, icon: , callback: () => { @@ -181,16 +218,29 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView) return ( <> - {treeData.length > 0 ? ( - - ) : ( - Error loading Datasources} - /> - )} - {indexFlyout} + + {isLoading ? ( + + Loading your databases + + + + + ) : treeData.length > 0 ? ( + + + + ) : ( + + Error loading Datasources} + /> + + )} + {indexFlyout} + ); };