adding minor edits to table view

Signed-off-by: Shenoy Pratik <[email protected]>
ps48 · Oct 5, 2023 · 75ea9d8 · 75ea9d8
1 parent f4505d1
commit 75ea9d8
Show file tree

Hide file tree

Showing 4 changed files with 43 additions and 27 deletions.
diff --git a/common/constants/index.ts b/common/constants/index.ts
@@ -8,20 +8,20 @@ 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 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
+  )`;
+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 (
+  )`;
+export const CREATE_DATABASE_QUERY = `CREATE DATABASE myS3.logs_db`;
+export const CREATE_TABLE_QUERY = `CREATE EXTERNAL TABLE myS3.logs_db.logs (
   key BIGINT,
   status INTEGER,
   size FLOAT,
@@ -32,7 +32,7 @@ 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/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';
@@ -912,13 +912,11 @@ export class Main extends React.Component<MainProps, MainState> {
         <EuiPage paddingSize="none">
           {this.state.language === 'SQL' && (
             <EuiPanel>
-              <EuiPageSideBar>
+              <EuiPageSideBar style={{ maxWidth: '400px', width: '400px' }}>
                 <EuiFlexGroup direction="column">
                   <EuiFlexItem>
                     <EuiFlexItem grow={false}>
-                      <CreateButton
-                        updateSQLQueries={this.updateSQLQueries}
-                      />
+                      <CreateButton updateSQLQueries={this.updateSQLQueries} />
                     </EuiFlexItem>
                     <EuiSpacer />
                     <TableView

diff --git a/public/components/SQLPage/CreateButton.tsx b/public/components/SQLPage/CreateButton.tsx
@@ -5,14 +5,18 @@
 
 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';
-
+import {
+  COVERING_INDEX_QUERY,
+  CREATE_DATABASE_QUERY,
+  CREATE_TABLE_QUERY,
+  SKIPPING_INDEX_QUERY,
+} from '../../../common/constants';
 
 interface CreateButtonProps {
-  updateSQLQueries: (query: string) => void
+  updateSQLQueries: (query: string) => void;
 }
 
-export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
+export const CreateButton = ({ updateSQLQueries }: CreateButtonProps) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [selectedOption, setSelectedOption] = useState(null);
 
@@ -26,17 +30,17 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
   };
 
   const handleSubMenuClick = (query: string) => {
-    updateSQLQueries(query)
+    updateSQLQueries(query);
     closePopover();
   };
 
   const fromSqlItems = [
     {
-      name: 'Create Table',
+      name: 'Create Database',
       onClick: () => handleSubMenuClick(CREATE_DATABASE_QUERY),
     },
     {
-      name: 'SQL Command',
+      name: 'Create Table',
       onClick: () => handleSubMenuClick(CREATE_TABLE_QUERY),
     },
   ];
@@ -71,10 +75,10 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
         panels={[
           {
             id: 0,
-            title: 'Choose an option',
+            title: 'Create options',
             items: [
               {
-                name: 'FROM SQL',
+                name: 'Spark SQL',
                 panel: 1,
               },
               {
@@ -85,7 +89,7 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
           },
           {
             id: 1,
-            title: 'FROM SPARK SQL Options',
+            title: 'SPARK SQL Options',
             items: fromSqlItems,
           },
           {
@@ -97,4 +101,4 @@ export const CreateButton = ({updateSQLQueries}: CreateButtonProps) => {
       />
     </EuiPopover>
   );
-}
+};
diff --git a/public/components/SQLPage/TableView.tsx b/public/components/SQLPage/TableView.tsx
@@ -10,6 +10,8 @@ import {
   EuiFlexItem,
   EuiIcon,
   EuiLoadingSpinner,
+  EuiText,
+  EuiToolTip,
   EuiTreeView,
 } from '@elastic/eui';
 import _ from 'lodash';
@@ -169,7 +171,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
   const treeData = tablenames.map((database, index) => ({
     label: (
       <div>
-        {database} {tableLoadingStates[database] && <EuiLoadingSpinner size="m" />}
+        <EuiToolTip position="right" content={database} delay="long">
+          <EuiText>{_.truncate(database, { length: 50 })}</EuiText>
+        </EuiToolTip>{' '}
+        {tableLoadingStates[database] && <EuiLoadingSpinner size="m" />}
       </div>
     ),
     icon: <EuiIcon type="database" size="m" />,
@@ -184,7 +189,10 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
         ? childData.map((table) => ({
             label: (
               <div>
-                {table} {childLoadingStates[table] && <EuiLoadingSpinner size="m" />}
+                <EuiToolTip position="right" content={table} delay="long">
+                  <EuiText>{_.truncate(table, { length: 50 })}</EuiText>
+                </EuiToolTip>{' '}
+                {childLoadingStates[table] && <EuiLoadingSpinner size="m" />}
               </div>
             ),
             id: `${database}_${table}`,
@@ -202,7 +210,13 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
             children:
               selectedChildNode === table
                 ? indexData.map((indexChild) => ({
-                    label: indexChild,
+                    label: (
+                      <div>
+                        <EuiToolTip position="right" content={indexChild} delay="long">
+                          <EuiText>{_.truncate(indexChild, { length: 50 })}</EuiText>
+                        </EuiToolTip>
+                      </div>
+                    ),
                     id: `${table}_${indexChild}`,
                     icon: <EuiIcon type="bolt" size="s" />,
                     callback: () =>
@@ -224,7 +238,7 @@ export const TableView = ({ http, selectedItems, updateSQLQueries }: CustomView)
         {isLoading ? (
           <EuiFlexGroup alignItems="center" gutterSize="s">
             <EuiFlexItem grow={false}>Loading your databases</EuiFlexItem>
-            <EuiFlexItem grow={false}>
+            <EuiFlexItem>
               <EuiLoadingSpinner size="m" />
             </EuiFlexItem>
           </EuiFlexGroup>