mirror of https://github.com/apache/druid.git
Web-Console: add dimensions to datasources icon (#8232)
* add dimensions to datasources icon * fix test * update snapshots * save * use table * update snapshots * rename to columns * run jest -u
This commit is contained in:
mcbrewster
Clint Wylie
parent
0235b338fc
commit
62da1efc0f
|
|
@ -0,0 +1,45 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`rule editor matches snapshot 1`] = `
|
||||
<div
|
||||
class="datasource-columns-table"
|
||||
>
|
||||
<div
|
||||
class="main-area"
|
||||
>
|
||||
<div
|
||||
class="loader"
|
||||
>
|
||||
<div
|
||||
class="loader-logo"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
class="one"
|
||||
d="M54.2,69.8h-2.7c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h2.7c11.5,0,23.8-7.4,23.8-23.7
|
||||
c0-9.1-6.9-15.8-16.4-15.8H38c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h23.6c5.3,0,10.1,1.9,13.6,5.3c3.5,3.4,5.4,8,5.4,13.1
|
||||
c0,6.6-2.3,13-6.3,17.7C69.5,66.8,62.5,69.8,54.2,69.8z"
|
||||
/>
|
||||
<path
|
||||
class="two"
|
||||
d="M55.7,59.5h-26c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h26c7.5,0,11.5-5.8,11.5-11.5
|
||||
c0-4.2-3.2-7.3-7.7-7.3h-26c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h26c5.9,0,10.3,4.3,10.3,9.9c0,3.7-1.3,7.2-3.7,9.8
|
||||
C63.5,58,59.9,59.5,55.7,59.5z"
|
||||
/>
|
||||
<path
|
||||
class="three"
|
||||
d="M27.2,38h-6.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h6.3c0.7,0,1.3,0.6,1.3,1.3S27.9,38,27.2,38z"
|
||||
/>
|
||||
<path
|
||||
class="four"
|
||||
d="M45.1,69.8h-5.8c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h5.8c0.7,0,1.3,0.6,1.3,1.3
|
||||
C46.4,69.2,45.8,69.8,45.1,69.8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
.datasource-columns-table {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
.top-actions {
|
||||
text-align: right;
|
||||
padding-bottom: 10px;
|
||||
|
||||
& > * {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.main-area {
|
||||
height: calc(100% - 5px);
|
||||
|
||||
textarea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.loader {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.ReactTable {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { DatasourceColumnsTable } from './datasource-columns-table';
|
||||
|
||||
describe('rule editor', () => {
|
||||
it('matches snapshot', () => {
|
||||
const showJson = <DatasourceColumnsTable datasourceId={'test'} downloadFilename={'test'} />;
|
||||
const { container } = render(showJson);
|
||||
expect(container.firstChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,113 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import ReactTable, { Column } from 'react-table';
|
||||
|
||||
import { Loader } from '..';
|
||||
import { queryDruidSql, QueryManager } from '../../utils';
|
||||
import { ColumnMetadata } from '../../utils/column-metadata';
|
||||
|
||||
import './datasource-columns-table.scss';
|
||||
|
||||
interface TableRow {
|
||||
columnsName: string;
|
||||
columnType: string;
|
||||
}
|
||||
|
||||
export interface DatasourceColumnsTableProps {
|
||||
datasourceId: string;
|
||||
downloadFilename?: string;
|
||||
}
|
||||
|
||||
export interface DatasourceColumnsTableState {
|
||||
columns?: any;
|
||||
loading: boolean;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export class DatasourceColumnsTable extends React.PureComponent<
|
||||
DatasourceColumnsTableProps,
|
||||
DatasourceColumnsTableState
|
||||
> {
|
||||
private supervisorStatisticsTableQueryManager: QueryManager<null, TableRow[]>;
|
||||
|
||||
constructor(props: DatasourceColumnsTableProps, context: any) {
|
||||
super(props, context);
|
||||
this.state = {
|
||||
loading: true,
|
||||
};
|
||||
this.supervisorStatisticsTableQueryManager = new QueryManager({
|
||||
processQuery: async () => {
|
||||
const { datasourceId } = this.props;
|
||||
const resp = await queryDruidSql<ColumnMetadata>({
|
||||
query: `SELECT COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS
|
||||
WHERE TABLE_SCHEMA = 'druid' AND TABLE_NAME = '${datasourceId}'`,
|
||||
});
|
||||
const dimensionArray = resp.map(object => {
|
||||
return { columnsName: object.COLUMN_NAME, columnType: object.DATA_TYPE };
|
||||
});
|
||||
return dimensionArray;
|
||||
},
|
||||
onStateChange: ({ result, error, loading }) => {
|
||||
this.setState({ columns: result, error, loading });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
this.supervisorStatisticsTableQueryManager.runQuery(null);
|
||||
}
|
||||
|
||||
renderTable(error?: string) {
|
||||
const { columns } = this.state;
|
||||
console.log(columns);
|
||||
const tableColumns: Column<TableRow>[] = [
|
||||
{
|
||||
Header: 'Column Name',
|
||||
accessor: 'columnsName',
|
||||
},
|
||||
{
|
||||
Header: 'Data Type',
|
||||
accessor: 'columnType',
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<ReactTable
|
||||
data={this.state.columns ? this.state.columns : []}
|
||||
showPagination={false}
|
||||
defaultPageSize={15}
|
||||
columns={tableColumns}
|
||||
noDataText={error ? error : 'No statistics data found'}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
render(): JSX.Element {
|
||||
const { loading, error } = this.state;
|
||||
this.renderTable(error);
|
||||
return (
|
||||
<div className="datasource-columns-table">
|
||||
<div className="main-area">
|
||||
{loading ? <Loader loadingText="" loading /> : !loading && this.renderTable()}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -25,7 +25,7 @@ import { downloadFile } from '../../utils';
|
|||
import './show-value.scss';
|
||||
|
||||
export interface ShowValueProps {
|
||||
endpoint: string;
|
||||
endpoint?: string;
|
||||
downloadFilename?: string;
|
||||
jsonValue?: string;
|
||||
}
|
||||
|
|
@ -50,11 +50,13 @@ export class ShowValue extends React.PureComponent<ShowValueProps> {
|
|||
}
|
||||
/>
|
||||
)}
|
||||
<Button
|
||||
text="View raw"
|
||||
minimal
|
||||
onClick={() => window.open(UrlBaser.base(endpoint), '_blank')}
|
||||
/>
|
||||
{endpoint && (
|
||||
<Button
|
||||
text="View raw"
|
||||
minimal
|
||||
onClick={() => window.open(UrlBaser.base(endpoint), '_blank')}
|
||||
/>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
<div className="main-area">
|
||||
|
|
|
|||
|
|
@ -0,0 +1,219 @@
|
|||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Datasource table action dialog matches snapshot 1`] = `
|
||||
<div
|
||||
class="bp3-portal"
|
||||
>
|
||||
<div
|
||||
class="bp3-overlay bp3-overlay-open bp3-overlay-scroll-container"
|
||||
>
|
||||
<div
|
||||
class="bp3-overlay-backdrop bp3-overlay-appear bp3-overlay-appear-active"
|
||||
tabindex="0"
|
||||
/>
|
||||
<div
|
||||
class="bp3-dialog-container bp3-overlay-content bp3-overlay-appear bp3-overlay-appear-active"
|
||||
tabindex="0"
|
||||
>
|
||||
<div
|
||||
class="bp3-dialog table-action-dialog"
|
||||
>
|
||||
<div
|
||||
class="bp3-dialog-header"
|
||||
>
|
||||
<h4
|
||||
class="bp3-heading"
|
||||
>
|
||||
Datasource: test
|
||||
</h4>
|
||||
<button
|
||||
aria-label="Close"
|
||||
class="bp3-button bp3-minimal bp3-dialog-close-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-small-cross"
|
||||
icon="small-cross"
|
||||
>
|
||||
<svg
|
||||
data-icon="small-cross"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<desc>
|
||||
small-cross
|
||||
</desc>
|
||||
<path
|
||||
d="M11.41 10l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L10 8.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L8.59 10 5.3 13.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l3.29-3.3 3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L11.41 10z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="bp3-dialog-body"
|
||||
>
|
||||
<div
|
||||
class="side-bar"
|
||||
>
|
||||
<button
|
||||
class="bp3-button bp3-intent-primary tab-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-list-columns"
|
||||
icon="list-columns"
|
||||
>
|
||||
<svg
|
||||
data-icon="list-columns"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
width="20"
|
||||
>
|
||||
<desc>
|
||||
list-columns
|
||||
</desc>
|
||||
<path
|
||||
d="M0 2.973v-.936C0 1.468.46 1.01 1.029 1H7.97C8.541 1 9 1.468 9 2.027v.946C9 3.542 8.53 4 7.971 4H1.03C.459 4 0 3.542 0 2.973zm0 5v-.936C0 6.468.46 6.01 1.029 6H7.97C8.541 6 9 6.468 9 7.027v.946C9 8.542 8.53 9 7.971 9H1.03C.459 9 0 8.542 0 7.973zm0 5v-.936C0 11.468.46 11.01 1.029 11H7.97C8.541 11 9 11.468 9 12.027v.946C9 13.542 8.53 14 7.971 14H1.03C.459 14 0 13.542 0 12.973zm0 5v-.936C0 16.468.46 16.01 1.029 16H7.97C8.541 16 9 16.468 9 17.027v.946C9 18.542 8.53 19 7.971 19H1.03C.459 19 0 18.542 0 17.973zm11-15v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 1 20 1.468 20 2.027v.946C20 3.542 19.53 4 18.971 4H12.03C11.459 4 11 3.542 11 2.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942C19.541 6 20 6.468 20 7.027v.946C20 8.542 19.53 9 18.971 9H12.03C11.459 9 11 8.542 11 7.973zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027zm0 5v-.936c0-.569.46-1.027 1.029-1.037h6.942c.57 0 1.029.468 1.029 1.027v.946c0 .569-.47 1.027-1.029 1.027H12.03c-.57 0-1.029-.458-1.029-1.027z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="bp3-button-text"
|
||||
>
|
||||
Columns
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="main-section"
|
||||
>
|
||||
<div
|
||||
class="datasource-columns-table"
|
||||
>
|
||||
<div
|
||||
class="main-area"
|
||||
>
|
||||
<div
|
||||
class="loader"
|
||||
>
|
||||
<div
|
||||
class="loader-logo"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 100 100"
|
||||
>
|
||||
<path
|
||||
class="one"
|
||||
d="M54.2,69.8h-2.7c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h2.7c11.5,0,23.8-7.4,23.8-23.7
|
||||
c0-9.1-6.9-15.8-16.4-15.8H38c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h23.6c5.3,0,10.1,1.9,13.6,5.3c3.5,3.4,5.4,8,5.4,13.1
|
||||
c0,6.6-2.3,13-6.3,17.7C69.5,66.8,62.5,69.8,54.2,69.8z"
|
||||
/>
|
||||
<path
|
||||
class="two"
|
||||
d="M55.7,59.5h-26c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h26c7.5,0,11.5-5.8,11.5-11.5
|
||||
c0-4.2-3.2-7.3-7.7-7.3h-26c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h26c5.9,0,10.3,4.3,10.3,9.9c0,3.7-1.3,7.2-3.7,9.8
|
||||
C63.5,58,59.9,59.5,55.7,59.5z"
|
||||
/>
|
||||
<path
|
||||
class="three"
|
||||
d="M27.2,38h-6.3c-0.7,0-1.3-0.6-1.3-1.3s0.6-1.3,1.3-1.3h6.3c0.7,0,1.3,0.6,1.3,1.3S27.9,38,27.2,38z"
|
||||
/>
|
||||
<path
|
||||
class="four"
|
||||
d="M45.1,69.8h-5.8c-0.7,0-1.3-0.6-1.3-1.3c0-0.7,0.6-1.3,1.3-1.3h5.8c0.7,0,1.3,0.6,1.3,1.3
|
||||
C46.4,69.2,45.8,69.8,45.1,69.8z"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="bp3-dialog-footer"
|
||||
>
|
||||
<div
|
||||
class="footer-actions-left"
|
||||
>
|
||||
<span
|
||||
class="bp3-popover-wrapper"
|
||||
>
|
||||
<span
|
||||
class="bp3-popover-target"
|
||||
>
|
||||
<button
|
||||
class="bp3-button"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-wrench"
|
||||
icon="wrench"
|
||||
>
|
||||
<svg
|
||||
data-icon="wrench"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
>
|
||||
<desc>
|
||||
wrench
|
||||
</desc>
|
||||
<path
|
||||
d="M15.83 3.7l-3.06 3.05-2.84-.7-.7-2.83L12.29.17a5.004 5.004 0 00-4.83 1.29 4.967 4.967 0 00-1.12 5.36L.58 12.58c-.36.36-.58.86-.58 1.41 0 1.1.9 2 2 2 .55 0 1.05-.22 1.41-.59l5.77-5.77c1.79.69 3.91.33 5.35-1.12 1.32-1.3 1.74-3.15 1.3-4.81z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="bp3-button-text"
|
||||
>
|
||||
Actions
|
||||
</span>
|
||||
<span
|
||||
class="bp3-icon bp3-icon-caret-down"
|
||||
icon="caret-down"
|
||||
>
|
||||
<svg
|
||||
data-icon="caret-down"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
width="16"
|
||||
>
|
||||
<desc>
|
||||
caret-down
|
||||
</desc>
|
||||
<path
|
||||
d="M12 6.5c0-.28-.22-.5-.5-.5h-7a.495.495 0 00-.37.83l3.5 4c.09.1.22.17.37.17s.28-.07.37-.17l3.5-4c.08-.09.13-.2.13-.33z"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="bp3-dialog-footer-actions"
|
||||
>
|
||||
<button
|
||||
class="bp3-button bp3-intent-primary"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
class="bp3-button-text"
|
||||
>
|
||||
Close
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { render } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
|
||||
import { DatasourceTableActionDialog } from './datasource-table-action-dialog';
|
||||
|
||||
describe('Datasource table action dialog', () => {
|
||||
it('matches snapshot', () => {
|
||||
const datasourceTableActionDialog = (
|
||||
<DatasourceTableActionDialog
|
||||
datasourceId="test"
|
||||
actions={[{ title: 'test', onAction: () => null }]}
|
||||
onClose={() => {}}
|
||||
isOpen
|
||||
/>
|
||||
);
|
||||
render(datasourceTableActionDialog);
|
||||
expect(document.body.lastChild).toMatchSnapshot();
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,102 @@
|
|||
/*
|
||||
* Licensed to the Apache Software Foundation (ASF) under one
|
||||
* or more contributor license agreements. See the NOTICE file
|
||||
* distributed with this work for additional information
|
||||
* regarding copyright ownership. The ASF licenses this file
|
||||
* to you under the Apache License, Version 2.0 (the
|
||||
* "License"); you may not use this file except in compliance
|
||||
* with the License. You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { IDialogProps } from '@blueprintjs/core';
|
||||
import React from 'react';
|
||||
|
||||
import { DatasourceColumnsTable } from '../../components/datasource-columns-table/datasource-columns-table';
|
||||
import { queryDruidSql, QueryManager } from '../../utils';
|
||||
import { BasicAction } from '../../utils/basic-action';
|
||||
import { ColumnMetadata } from '../../utils/column-metadata';
|
||||
import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog';
|
||||
|
||||
interface DatasourceTableActionDialogProps extends IDialogProps {
|
||||
datasourceId?: string;
|
||||
actions: BasicAction[];
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
interface DatasourceTableActionDialogState {
|
||||
activeTab: 'columns';
|
||||
dimensions?: string;
|
||||
error?: string;
|
||||
}
|
||||
|
||||
export class DatasourceTableActionDialog extends React.PureComponent<
|
||||
DatasourceTableActionDialogProps,
|
||||
DatasourceTableActionDialogState
|
||||
> {
|
||||
private dimensionsQueryManager: QueryManager<null, string>;
|
||||
constructor(props: DatasourceTableActionDialogProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
activeTab: 'columns',
|
||||
};
|
||||
|
||||
/// This should be a table
|
||||
this.dimensionsQueryManager = new QueryManager({
|
||||
processQuery: async () => {
|
||||
const { datasourceId } = this.props;
|
||||
const resp = await queryDruidSql<ColumnMetadata>({
|
||||
query: `SELECT COLUMN_NAME, DATA_TYPE FROM INFORMATION_SCHEMA.COLUMNS
|
||||
WHERE TABLE_SCHEMA = 'druid' AND TABLE_NAME = '${datasourceId}'`,
|
||||
});
|
||||
const dimensionArray = resp.map(object => object.COLUMN_NAME);
|
||||
return JSON.stringify(dimensionArray, undefined, 2);
|
||||
},
|
||||
onStateChange: ({ result, error }) => {
|
||||
this.setState({ dimensions: result, error });
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount(): void {
|
||||
this.dimensionsQueryManager.runQuery(null);
|
||||
}
|
||||
|
||||
render(): React.ReactNode {
|
||||
const { onClose, datasourceId, actions } = this.props;
|
||||
const { activeTab } = this.state;
|
||||
|
||||
const taskTableSideButtonMetadata: SideButtonMetaData[] = [
|
||||
{
|
||||
icon: 'list-columns',
|
||||
text: 'Columns',
|
||||
active: activeTab === 'columns',
|
||||
onClick: () => this.setState({ activeTab: 'columns' }),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<TableActionDialog
|
||||
isOpen
|
||||
sideButtonMetadata={taskTableSideButtonMetadata}
|
||||
onClose={onClose}
|
||||
title={`Datasource: ${datasourceId}`}
|
||||
actions={actions}
|
||||
>
|
||||
{activeTab === 'columns' && (
|
||||
<DatasourceColumnsTable
|
||||
datasourceId={datasourceId ? datasourceId : ''}
|
||||
downloadFilename={`datasource-dimensions-${datasourceId}.json`}
|
||||
/>
|
||||
)}
|
||||
</TableActionDialog>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -43,6 +43,7 @@ import {
|
|||
import { ActionIcon } from '../../components/action-icon/action-icon';
|
||||
import { SegmentTimeline } from '../../components/segment-timeline/segment-timeline';
|
||||
import { AsyncActionDialog, CompactionDialog, RetentionDialog } from '../../dialogs';
|
||||
import { DatasourceTableActionDialog } from '../../dialogs/datasource-table-action-dialog/datasource-table-action-dialog';
|
||||
import { AppToaster } from '../../singletons/toaster';
|
||||
import {
|
||||
addFilter,
|
||||
|
|
@ -151,6 +152,9 @@ export interface DatasourcesViewState {
|
|||
showChart: boolean;
|
||||
chartWidth: number;
|
||||
chartHeight: number;
|
||||
|
||||
datasourceTableActionDialogId?: string;
|
||||
actions: BasicAction[];
|
||||
}
|
||||
|
||||
export class DatasourcesView extends React.PureComponent<
|
||||
|
|
@ -212,6 +216,8 @@ GROUP BY 1`;
|
|||
showChart: false,
|
||||
chartWidth: window.innerWidth * 0.85,
|
||||
chartHeight: window.innerHeight * 0.4,
|
||||
|
||||
actions: [],
|
||||
};
|
||||
|
||||
this.datasourceQueryManager = new QueryManager({
|
||||
|
|
@ -915,7 +921,17 @@ GROUP BY 1`;
|
|||
rules,
|
||||
compaction,
|
||||
);
|
||||
return <ActionCell actions={datasourceActions} />;
|
||||
return (
|
||||
<ActionCell
|
||||
onDetail={() => {
|
||||
this.setState({
|
||||
datasourceTableActionDialogId: datasource,
|
||||
actions: datasourceActions,
|
||||
});
|
||||
}}
|
||||
actions={datasourceActions}
|
||||
/>
|
||||
);
|
||||
},
|
||||
show: hiddenColumns.exists(ActionCell.COLUMN_LABEL),
|
||||
},
|
||||
|
|
@ -935,7 +951,15 @@ GROUP BY 1`;
|
|||
|
||||
render(): JSX.Element {
|
||||
const { noSqlMode } = this.props;
|
||||
const { showDisabled, hiddenColumns, showChart, chartHeight, chartWidth } = this.state;
|
||||
const {
|
||||
showDisabled,
|
||||
hiddenColumns,
|
||||
showChart,
|
||||
chartHeight,
|
||||
chartWidth,
|
||||
datasourceTableActionDialogId,
|
||||
actions,
|
||||
} = this.state;
|
||||
|
||||
return (
|
||||
<div className="data-sources-view app-view">
|
||||
|
|
@ -969,6 +993,14 @@ GROUP BY 1`;
|
|||
</div>
|
||||
)}
|
||||
{this.renderDatasourceTable()}
|
||||
{datasourceTableActionDialogId && (
|
||||
<DatasourceTableActionDialog
|
||||
datasourceId={datasourceTableActionDialogId}
|
||||
actions={actions}
|
||||
onClose={() => this.setState({ datasourceTableActionDialogId: undefined })}
|
||||
isOpen
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue