Skip to content
This repository has been archived by the owner on Mar 31, 2021. It is now read-only.

Commit

Permalink
Added raw format in download options (#25)
Browse files Browse the repository at this point in the history 
* Added raw format in download options
  • Loading branch information
@chloe-zh
chloe-zh authored Jan 18, 2020
1 parent 74f3269 commit 65f9f02
Show file tree
Hide file tree
Showing 10 changed files with 131 additions and 84 deletions.
109 changes: 51 additions & 58 deletions public/components/Main/main.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ interface MainState {
queryResults: Array<ResponseDetail<string>>;
queryResultsJDBC: Array<ResponseDetail<string>>;
queryResultsCSV: Array<ResponseDetail<string>>;
queryResultsTEXT: Array<ResponseDetail<string>>;
selectedTabName: string;
selectedTabId: string;
searchQuery: string;
Expand Down Expand Up @@ -139,9 +140,10 @@ export class Main extends React.Component<MainProps, MainState> {
queryResults: [],
queryResultsJDBC: [],
queryResultsCSV: [],
queryResultsTEXT: [],
selectedTabName: MESSAGE_TAB_LABEL,
selectedTabId: MESSAGE_TAB_LABEL,
searchQuery: " ",
searchQuery: "",
itemIdToExpandedRowMap: {},
messages: []
};
Expand Down Expand Up @@ -282,17 +284,13 @@ export class Main extends React.Component<MainProps, MainState> {
this.processTranslateResponse(translationResponse as IHttpResponse<ResponseData>));

this.setState({
queries,
queries: queries,
queryResults: dslResult,
queryTranslations: translationResult,
queryResultsTable: resultTable,
queryResultsJDBC: [],
queryResultsCSV: [],
selectedTabId: getDefaultTabId(dslResult),
selectedTabName: getDefaultTabLabel(dslResult, queries[0]),
messages: this.getMessage(resultTable),
itemIdToExpandedRowMap: {},
searchQuery: " "
messages: this.getMessage(resultTable)
});
})

Expand Down Expand Up @@ -326,23 +324,15 @@ export class Main extends React.Component<MainProps, MainState> {
this.processTranslateResponse(translationResponse as IHttpResponse<ResponseData>));

this.setState({
queries,
queryResults: [],
queries: queries,
queryTranslations: translationResult,
queryResultsTable: [],
queryResultsJDBC: [],
queryResultsCSV: [],
selectedTabId: '',
selectedTabName: '',
messages: this.getTranslateMessage(translationResult),
itemIdToExpandedRowMap: {},
searchQuery: " "
messages: this.getTranslateMessage(translationResult)
});
});
}
};

getDsl = (queries: string[]): void => {
getRawResponse = (queries: string[]): void => {
if (queries.length > 0) {
Promise.all(
queries.map((query: string) =>
Expand All @@ -360,21 +350,11 @@ export class Main extends React.Component<MainProps, MainState> {
})
)
).then(
dslResponse => {
const dslResult: ResponseDetail<string>[] = dslResponse.map(dslResponse =>
this.processQueryResponse(dslResponse as IHttpResponse<ResponseData>));
rawResponse => {
const rawResponseResult: ResponseDetail<string>[] = rawResponse.map(rawResponse =>
this.processQueryResponse(rawResponse as IHttpResponse<ResponseData>));
this.setState({
queryResults: dslResult,
queries,
queryTranslations: this.state.queryTranslations,
queryResultsTable: this.state.queryResultsTable,
queryResultsJDBC: this.state.queryResultsJDBC,
queryResultsCSV: this.state.queryResultsCSV,
selectedTabId: this.state.selectedTabId,
selectedTabName: this.state.selectedTabName,
messages: this.state.messages,
itemIdToExpandedRowMap: this.state.itemIdToExpandedRowMap,
searchQuery: this.state.searchQuery
queryResults: rawResponseResult
});
}
)
Expand Down Expand Up @@ -403,17 +383,7 @@ export class Main extends React.Component<MainProps, MainState> {
const jdbcResult: ResponseDetail<string>[] = jdbcResponse.map(jdbcResponse =>
this.processQueryResponse(jdbcResponse as IHttpResponse<ResponseData>));
this.setState({
queryResultsJDBC: jdbcResult,
queries,
queryResults: this.state.queryResults,
queryTranslations: this.state.queryTranslations,
queryResultsTable: this.state.queryResultsTable,
queryResultsCSV: this.state.queryResultsCSV,
selectedTabId: this.state.selectedTabId,
selectedTabName: this.state.selectedTabName,
messages: this.state.messages,
itemIdToExpandedRowMap: this.state.itemIdToExpandedRowMap,
searchQuery: this.state.searchQuery
queryResultsJDBC: jdbcResult
});
}
)
Expand Down Expand Up @@ -442,17 +412,36 @@ export class Main extends React.Component<MainProps, MainState> {
const csvResult: ResponseDetail<string>[] = csvResponse.map(csvResponse =>
this.processQueryResponse(csvResponse as IHttpResponse<ResponseData>));
this.setState({
queryResultsCSV: csvResult,
queries,
queryResults: this.state.queryResults,
queryTranslations: this.state.queryTranslations,
queryResultsTable: this.state.queryResultsTable,
queryResultsJDBC: this.state.queryResultsJDBC,
selectedTabId: this.state.selectedTabId,
selectedTabName: this.state.selectedTabName,
messages: this.state.messages,
itemIdToExpandedRowMap: this.state.itemIdToExpandedRowMap,
searchQuery: this.state.searchQuery
queryResultsCSV: csvResult
});
}
)
}
};

getText = (queries: string[]): void => {
if (queries.length > 0) {
Promise.all(
queries.map((query: string) =>
this.httpClient
.post("../api/sql_console/querytext", {query})
.catch((error: any) => {
this.setState({
messages: [
{
text: error.message,
className: "error-message"
}
]
});
})
)
).then(
textResponse => {
const textResult: ResponseDetail<string>[] = textResponse.map(textResponse =>
this.processQueryResponse(textResponse as IHttpResponse<ResponseData>));
this.setState({
queryResultsTEXT: textResult
});
}
)
Expand All @@ -461,11 +450,13 @@ export class Main extends React.Component<MainProps, MainState> {

onClear = (): void => {
this.setState({
queries: [],
queryTranslations: [],
queryResultsTable: [],
queryResults: [],
// queryResultsCSV: [],
// queryResultsJDBC: [],
queryResultsCSV: [],
queryResultsJDBC: [],
queryResultsTEXT: [],
messages: [],
selectedTabId: MESSAGE_TAB_LABEL,
selectedTabName: MESSAGE_TAB_LABEL,
Expand Down Expand Up @@ -494,9 +485,10 @@ export class Main extends React.Component<MainProps, MainState> {
<QueryResults
queries={this.state.queries}
queryResults={this.state.queryResultsTable}
queryResultsDSL={getSelectedResults(this.state.queryResults, this.state.selectedTabId)}
queryRawResponse={getSelectedResults(this.state.queryResults, this.state.selectedTabId)}
queryResultsJDBC={getSelectedResults(this.state.queryResultsJDBC, this.state.selectedTabId)}
queryResultsCSV={getSelectedResults(this.state.queryResultsCSV, this.state.selectedTabId)}
queryResultsTEXT={getSelectedResults(this.state.queryResultsTEXT, this.state.selectedTabId)}
messages={this.state.messages}
selectedTabId={this.state.selectedTabId}
selectedTabName={this.state.selectedTabName}
Expand All @@ -506,9 +498,10 @@ export class Main extends React.Component<MainProps, MainState> {
updateExpandedMap={this.updateExpandedMap}
searchQuery={this.state.searchQuery}
tabsOverflow={false}
getDsl={this.getDsl}
getRawResponse={this.getRawResponse}
getJdbc={this.getJdbc}
getCsv={this.getCsv}
getText={this.getText}
/>
</div>
</div>
Expand Down
5 changes: 4 additions & 1 deletion public/components/QueryResults/QueryResults.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function renderQueryResults(mockQueryResults : ResponseDetail<QueryResult>[],
queries={mockQueries}
queryResults={mockQueryResults}
queryResultsJDBC={''}
queryResultsRaw={''}
queryRawResponse={''}
queryResultsCSV={''}
messages={[]}
selectedTabId={'0'}
Expand All @@ -47,6 +47,9 @@ function renderQueryResults(mockQueryResults : ResponseDetail<QueryResult>[],
updateExpandedMap={updateExpandedMap}
searchQuery={mockSearchQuery}
tabsOverflow={true}
getRawResponse={}
getJdbc={}
getCsv={}
/>
),
};
Expand Down
16 changes: 10 additions & 6 deletions public/components/QueryResults/QueryResults.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,10 @@ import {DEFAULT_NUM_RECORDS_PER_PAGE, MESSAGE_TAB_LABEL, TAB_CONTAINER_ID} from
interface QueryResultsProps {
queries: string[];
queryResults: ResponseDetail<QueryResult>[];
queryResultsDSL: string;
queryRawResponse: string;
queryResultsJDBC: string;
queryResultsCSV: string;
queryResultsTEXT: string;
messages: QueryMessage[];
selectedTabName: string;
selectedTabId: string;
Expand All @@ -41,9 +42,10 @@ interface QueryResultsProps {
onQueryChange: (object:any) => void;
updateExpandedMap: (map: ItemIdToExpandedRowMap) => void;
itemIdToExpandedRowMap: ItemIdToExpandedRowMap;
getDsl: (queryString: string[]) => void;
getJdbc: (queryString: string[]) => void;
getCsv: (queryString: string[]) => void;
getRawResponse: (queries: string[]) => void;
getJdbc: (queries: string[]) => void;
getCsv: (queries: string[]) => void;
getText: (queries: string[]) => void;
}

interface QueryResultsState {
Expand Down Expand Up @@ -316,9 +318,10 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
selectedTabName={this.props.selectedTabName}
tabNames={this.tabNames}
queryResultSelected={queryResultSelected}
queryResultsDSL={this.props.queryResultsDSL}
queryRawResponse={this.props.queryRawResponse}
queryResultsJDBC={this.props.queryResultsJDBC}
queryResultsCSV={this.props.queryResultsCSV}
queryResultsTEXT={this.props.queryResultsTEXT}
messages={this.props.messages}
searchQuery={this.props.searchQuery}
onQueryChange={this.props.onQueryChange}
Expand All @@ -333,9 +336,10 @@ class QueryResults extends React.Component<QueryResultsProps, QueryResultsState>
sortableProperties={this.sortableProperties}
itemIdToExpandedRowMap={this.props.itemIdToExpandedRowMap}
updateExpandedMap={this.props.updateExpandedMap}
getDsl={this.props.getDsl}
getRawResponse={this.props.getRawResponse}
getJdbc={this.props.getJdbc}
getCsv={this.props.getCsv}
getText={this.props.getText}
/>
</EuiPanel>
);
Expand Down
40 changes: 29 additions & 11 deletions public/components/QueryResults/QueryResultsBody.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ import {
EuiHorizontalRule,
EuiPopover,
EuiButton,
EuiContextMenu
EuiContextMenu, sleep
} from "@elastic/eui";
import {
isEmpty,
Expand All @@ -61,7 +61,8 @@ interface QueryResultsBodyProps {
queryResultSelected: QueryResult;
queryResultsJDBC: string;
queryResultsCSV: string;
queryResultsDSL: string;
queryRawResponse: string;
queryResultsTEXT: string;
tabNames: string[];
selectedTabName: string;
selectedTabId: string;
Expand All @@ -79,9 +80,10 @@ interface QueryResultsBodyProps {
onSort: (prop: string) => void;
onQueryChange: (query: object) => void;
updateExpandedMap: (map: ItemIdToExpandedRowMap) => void;
getDsl: (queryString: string[]) => void;
getJdbc: (queryString: string[]) => void;
getCsv: (queryString: string[]) => void;
getRawResponse: (queries: string[]) => void;
getJdbc: (queries: string[]) => void;
getCsv: (queries: string[]) => void;
getText: (queries: string[]) => void;
}

interface QueryResultsBodyState {
Expand Down Expand Up @@ -142,8 +144,8 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
title: "Download",
items: [
{
name: "Download DSL",
onClick: () => {this.onDownloadDSL();}
name: "Download ES Response",
onClick: () => {this.onDownloadRawResponse();}
},
{
name: "Download JDBC",
Expand All @@ -152,6 +154,10 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
{
name: "Download CSV",
onClick: () => {this.onDownloadCSV();}
},
{
name: "Download Text",
onClick: () => {this.onDownloadText();}
}
]
}
Expand All @@ -161,18 +167,20 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
}

// Actions for Download files
onDownloadDSL = (): void => {
if (!this.props.queryResultsDSL) {
this.props.getDsl(this.props.queries);
onDownloadRawResponse = (): void => {
if (!this.props.queryRawResponse) {
this.props.getRawResponse(this.props.queries);
sleep(10)
}
const jsonObject = JSON.parse(this.props.queryResultsDSL);
const jsonObject = JSON.parse(this.props.queryRawResponse);
const data = JSON.stringify(jsonObject, undefined, 4);
onDownloadFile(data, "json", this.props.selectedTabName + ".json");
};

onDownloadJDBC = (): void => {
if (!this.props.queryResultsJDBC) {
this.props.getJdbc(this.props.queries);
sleep(10)
}
const jsonObject = JSON.parse(this.props.queryResultsJDBC);
const data = JSON.stringify(jsonObject, undefined, 4);
Expand All @@ -182,11 +190,21 @@ class QueryResultsBody extends React.Component<QueryResultsBodyProps, QueryResul
onDownloadCSV = (): void => {
if (!this.props.queryResultsCSV) {
this.props.getCsv(this.props.queries);
sleep(10)
}
const data = this.props.queryResultsCSV;
onDownloadFile(data, "csv", this.props.selectedTabName + ".csv");
};

onDownloadText = (): void => {
if (!this.props.queryResultsTEXT) {
this.props.getText(this.props.queries);
sleep(10)
}
const data = this.props.queryResultsTEXT;
onDownloadFile(data, "plain", this.props.selectedTabName + "");
}

// Actions for Downloads Button
onDownloadButtonClick = (): void => {
this.setState(prevState => ({
Expand Down
8 changes: 4 additions & 4 deletions public/utils/utils.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export const getQueries = (queriesString: string): string[] => {
export function getQueryIndex(query: string): string {
if (query) {
const queryFrom : string []= query.toLowerCase().split("from");

if (queryFrom.length > 1){
return queryFrom[1].split(" ")[1];
}
Expand Down Expand Up @@ -84,10 +84,10 @@ export function scrollToNode(nodeId: string): void {

// Download functions
export function onDownloadFile(data: any, fileFormat: string, fileName: string) {
const content = 'data:text/'+fileFormat+'json;charset=utf-8,' + data;
const encodedUri = encodeURI(content);
const encodedUri = encodeURI(data);
const content = 'data:text/'+fileFormat+';charset=utf-8,' + encodedUri;
const link = document.createElement("a");
link.setAttribute('href', encodedUri);
link.setAttribute('href', content);
link.setAttribute('download', fileName);
document.body.appendChild(link);
link.click();
Expand Down
Loading

0 comments on commit 65f9f02

Please sign in to comment.