Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Define tables #126

Merged
merged 15 commits into from
Sep 29, 2023
Merged

Define tables #126

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
1f28351
added changes for sidebar
sumukhswamy Sep 16, 2023
dffcdc6
added side bar with tables indexed
sumukhswamy Sep 21, 2023
f9944e6
added dynamic element for tree view, addressed pr comments
sumukhswamy Sep 22, 2023
66f1372
made a few design and panel changes, addressed pr comments
sumukhswamy Sep 23, 2023
2923a5d
changed the constants file
sumukhswamy Sep 23, 2023
93e1d39
added changes for search bar removal, pr comments
sumukhswamy Sep 26, 2023
f775a6e
readded console.log
sumukhswamy Sep 26, 2023
a604984
updated test suites, removed search field
sumukhswamy Sep 27, 2023
02f6baf
added changes for Data connection and combo box
sumukhswamy Sep 27, 2023
6bc5ad6
updated mock for http query
sumukhswamy Sep 28, 2023
aa03a8d
updated mock template name in tests
sumukhswamy Sep 28, 2023
b19e07d
addressed pr comments
sumukhswamy Sep 28, 2023
3aa3948
addressed more comments
sumukhswamy Sep 28, 2023
e615ec8
added error message for sidebar
sumukhswamy Sep 29, 2023
ccfa0f5
updated snapshots
sumukhswamy Sep 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 64 additions & 24 deletions public/components/Main/main.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
* SPDX-License-Identifier: Apache-2.0
*/

import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiTitle } from '@elastic/eui';
import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiSpacer, EuiPageSideBar , EuiPanel, EuiPage, EuiPageContent, EuiPageContentBody, EuiComboBox, EuiText, EuiFieldSearch} from '@elastic/eui';
sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved
import { IHttpResponse } from 'angular';
import _ from 'lodash';
import React from 'react';
Expand All @@ -20,6 +20,7 @@ import { PPLPage } from '../PPLPage/PPLPage';
import Switch from '../QueryLanguageSwitch/Switch';
import QueryResults from '../QueryResults/QueryResults';
import { SQLPage } from '../SQLPage/SQLPage';
import {TableView} from '../SQLPage/TableView'
sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved

interface ResponseData {
ok: boolean;
Expand Down Expand Up @@ -64,7 +65,7 @@ export type DataRow = {
rowId: number;
data: { [key: string]: any };
};

sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved
interface MainProps {
httpClient: CoreStart['http'];
setBreadcrumbs: (newBreadcrumbs: ChromeBreadcrumb[]) => void;
Expand All @@ -87,6 +88,7 @@ interface MainState {
itemIdToExpandedRowMap: ItemIdToExpandedRowMap;
messages: Array<QueryMessage>;
isResultFullScreen: boolean;
tablenames: string[]
}

const SUCCESS_MESSAGE = 'Success';
Expand Down Expand Up @@ -218,8 +220,8 @@ export class Main extends React.Component<MainProps, MainState> {
itemIdToExpandedRowMap: {},
messages: [],
isResultFullScreen: false,
tablenames : []
};

this.httpClient = this.props.httpClient;
this.updateSQLQueries = _.debounce(this.updateSQLQueries, 250).bind(this);
this.updatePPLQueries = _.debounce(this.updatePPLQueries, 250).bind(this);
Expand Down Expand Up @@ -458,8 +460,7 @@ export class Main extends React.Component<MainProps, MainState> {
{
queries,
queryResultsJSON: results,
},
() => console.log('Successfully updated the states')
}
);
});
}
Expand Down Expand Up @@ -685,25 +686,61 @@ export class Main extends React.Component<MainProps, MainState> {
}

return (
<div>
<div className="sql-console-query-container">
<div className="query-language-switch">
<>
<EuiPanel>
<EuiFlexGroup direction='row' alignItems='center'>
<EuiFlexItem>
<EuiText>
Data Sources
</EuiText>
<EuiComboBox
placeholder='Connection Name'
/>
<EuiSpacer/>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<Switch onChange={this.onChange} language={this.state.language} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
{linkTitle}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPanel>
<EuiPage paddingSize='none'>
sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved
{(this.state.language=='SQL')?
<EuiPanel>
<EuiPageSideBar >
<EuiFlexGroup direction="column">
<EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton
iconType="arrowDown"
iconSide="right"
fullWidth
>
Create
</EuiButton>
</EuiFlexItem>
<EuiSpacer/>
<EuiFlexItem grow={false}>
<EuiFieldSearch
placeholder="Search"
/>
</EuiFlexItem>
<EuiSpacer/>
<TableView
http = {this.httpClient}/>
<EuiSpacer/>
</EuiFlexItem>
</EuiFlexGroup>
</EuiPageSideBar>
</EuiPanel> : null}
<EuiPageContent>
<EuiPageContentBody>
<EuiFlexGroup alignItems="center">
<EuiFlexItem>
<EuiTitle size="l">
<h1>Query Workbench</h1>
</EuiTitle>
</EuiFlexItem>
<EuiFlexItem grow={false}>
<Switch onChange={this.onChange} language={this.state.language} />
</EuiFlexItem>
<EuiFlexItem grow={false}>
<EuiButton href={link} target="_blank" iconType="popout" iconSide="right">
{linkTitle}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</div>
<EuiSpacer size="l" />
<div>{page}</div>

Expand Down Expand Up @@ -746,8 +783,11 @@ export class Main extends React.Component<MainProps, MainState> {
setIsResultFullScreen={this.setIsResultFullScreen}
/>
</div>
</div>
</div>
</EuiPageContentBody>
</EuiPageContent>
</EuiPage>
</>

);
}
}
Expand Down
137 changes: 137 additions & 0 deletions public/components/SQLPage/TableView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,137 @@
/*
* Copyright OpenSearch Contributors
* SPDX-License-Identifier: Apache-2.0
*/


import React, { useState, useEffect } from "react";
import { EuiIcon, EuiTreeView } from "@elastic/eui";
import _ from 'lodash';
import { CoreStart } from '../../../../../src/core/public';

interface CustomView {
http: CoreStart['http']
}

export const TableView = ({ http }: CustomView) => {
const [tablenames, setTablenames] = useState<string[]>([]);
const [selectedNode, setSelectedNode] = useState<string | null>(null);
const [childData, setChildData] = useState<string[]>([]);
const [selectedChildNode, setSelectedChildNode] = useState<string | null>(null);
const [indexData, setIndexedData] = useState<string[]>([]);

const getSidebarContent = () => {
const query = { query: `SHOW tables LIKE '%';` }
http
.post(`../api/sql_console/sqlquery`, {
sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved
body: JSON.stringify(query),
})
.then((res) => {
const responseObj = res.data.resp
? JSON.parse(res.data.resp)
: '';
const datarows: any[][] = _.get(responseObj, 'datarows');
const fields = datarows.map((data) => {
return data[2]
})
setTablenames(fields)
})
.catch((err) => {
console.error(err);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should user be notified?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

if there is an error in the query, will there be a visual indication besides the console message?

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is for the side bar, so here will be no visual indication, this is to list the datasources he has available

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

also for #126 (comment) i have made the changes and spoken to Derek about it

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is for the side bar, so here will be no visual indication, this is to list the datasources he has available

do we expect this to fail often? my concern is for example user accidentally deleted sql plugin, and workbench can't get the list of datasources but user doesn't know why

Copy link
Collaborator Author

@sumukhswamy sumukhswamy Sep 29, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

oh okay , will add cod to show error if it occurs

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

have added an error message for handling missing data

});
};

useEffect(() => {

getSidebarContent();
}, []);

const handleNodeClick = (nodeLabel: string) => {

// // will update after new query
// const query = { query: `SHOW tables LIKE '%';` }
// http
// .post(`../api/sql_console/sqlquery`, {
// body: JSON.stringify(query),
// })
// .then((res) => {
// const responseObj = res.data.resp
// ? JSON.parse(res.data.resp)
// : '';
// const datarows: any[][] = _.get(responseObj, 'datarows');
// const fields = datarows.map((data) => {
// return data[2]
// })
// setChildData(fields)
// })
// .catch((err) => {
// console.error(err);
// });
sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved

const newData = ["Child 1", "Child 2", "Child 3"];
setChildData(newData);
setSelectedNode(nodeLabel);
};

const handleChildClick = (nodeLabel1: string) => {

// will update after new query
// const query = { query: `SHOW tables LIKE '%';` }
// http
// .post(`../api/sql_console/sqlquery`, {
// body: JSON.stringify(query),
// })
// .then((res) => {
// const responseObj = res.data.resp
// ? JSON.parse(res.data.resp)
// : '';
// const datarows: any[][] = _.get(responseObj, 'datarows');
// const fields = datarows.map((data) => {
// return data[2]
// })
// setIndexdData(fields)
// })
// .catch((err) => {
// console.error(err);
// });
sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved

const newData1 = ["Child 1", "Child 2", "Child 3"];
setIndexedData(newData1);
setSelectedChildNode(nodeLabel1);
};


const treeData = tablenames.map((element, index) => ({
label: element,
icon: <EuiIcon type='database' size="m" />,
id: 'element_' + index,
callback: () => handleNodeClick(element),
isSelectable: true,
isExpanded: true,
children: selectedNode === element ? childData.map(child => ({
label: child,
id: `${element}_${child}`,
icon: <EuiIcon type='tableDensityCompact' size="s" />,
callback: () => handleChildClick(child),
sSelectable: true,
isExpanded: true,
children: selectedChildNode === element ? indexData.map(child => ({
label: child,
id: `${element}_${child}`,
icon: <EuiIcon type='bolt' size="s" />
})):undefined,
})) : undefined,
}));
console.log(treeData)
sumukhswamy marked this conversation as resolved.
Show resolved Hide resolved

return (
<>
<EuiTreeView
aria-label="Sample Folder Tree"
items={treeData}
aria-labelledby=""
/>
</>
)
}