You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@druid.apache.org by cw...@apache.org on 2019/08/06 07:04:48 UTC
[incubator-druid] branch master updated: Web-Console: add
dimensions to datasources icon (#8232)
This is an automated email from the ASF dual-hosted git repository.
cwylie pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/incubator-druid.git
The following commit(s) were added to refs/heads/master by this push:
new 62da1ef Web-Console: add dimensions to datasources icon (#8232)
62da1ef is described below
commit 62da1efc0fc1fc1683f436241329a4d107ce66e4
Author: mcbrewster <37...@users.noreply.github.com>
AuthorDate: Tue Aug 6 00:04:37 2019 -0700
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
---
.../datasource-columns-table.spec.tsx.snap | 45 +++++
.../datasource-columns-table.scss | 49 +++++
.../datasource-columns-table.spec.tsx | 30 +++
.../datasource-columns-table.tsx | 113 +++++++++++
.../src/components/show-value/show-value.tsx | 14 +-
.../datasource-table-action-dialog.spec.tsx.snap | 219 +++++++++++++++++++++
.../datasource-table-action-dialog.spec.tsx | 37 ++++
.../datasource-table-action-dialog.tsx | 102 ++++++++++
.../src/views/datasource-view/datasource-view.tsx | 36 +++-
9 files changed, 637 insertions(+), 8 deletions(-)
diff --git a/web-console/src/components/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap b/web-console/src/components/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap
new file mode 100644
index 0000000..6c6bb4e
--- /dev/null
+++ b/web-console/src/components/datasource-columns-table/__snapshots__/datasource-columns-table.spec.tsx.snap
@@ -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>
+`;
diff --git a/web-console/src/components/datasource-columns-table/datasource-columns-table.scss b/web-console/src/components/datasource-columns-table/datasource-columns-table.scss
new file mode 100644
index 0000000..1d0ba14
--- /dev/null
+++ b/web-console/src/components/datasource-columns-table/datasource-columns-table.scss
@@ -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%;
+ }
+ }
+}
diff --git a/web-console/src/components/datasource-columns-table/datasource-columns-table.spec.tsx b/web-console/src/components/datasource-columns-table/datasource-columns-table.spec.tsx
new file mode 100644
index 0000000..96dff6b
--- /dev/null
+++ b/web-console/src/components/datasource-columns-table/datasource-columns-table.spec.tsx
@@ -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();
+ });
+});
diff --git a/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx b/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx
new file mode 100644
index 0000000..e2ef567
--- /dev/null
+++ b/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx
@@ -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>
+ );
+ }
+}
diff --git a/web-console/src/components/show-value/show-value.tsx b/web-console/src/components/show-value/show-value.tsx
index de2f2ce..f30f4c7 100644
--- a/web-console/src/components/show-value/show-value.tsx
+++ b/web-console/src/components/show-value/show-value.tsx
@@ -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">
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
new file mode 100644
index 0000000..e0033cb
--- /dev/null
+++ b/web-console/src/dialogs/datasource-table-action-dialog/__snapshots__/datasource-table-action-dialog.spec.tsx.snap
@@ -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 [...]
+ 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>
+`;
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.spec.tsx b/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.spec.tsx
new file mode 100644
index 0000000..c6f0723
--- /dev/null
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.spec.tsx
@@ -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();
+ });
+});
diff --git a/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx b/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx
new file mode 100644
index 0000000..5eac98d
--- /dev/null
+++ b/web-console/src/dialogs/datasource-table-action-dialog/datasource-table-action-dialog.tsx
@@ -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>
+ );
+ }
+}
diff --git a/web-console/src/views/datasource-view/datasource-view.tsx b/web-console/src/views/datasource-view/datasource-view.tsx
index c75f5cd..13fcf96 100644
--- a/web-console/src/views/datasource-view/datasource-view.tsx
+++ b/web-console/src/views/datasource-view/datasource-view.tsx
@@ -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>
);
}
---------------------------------------------------------------------
To unsubscribe, e-mail: commits-unsubscribe@druid.apache.org
For additional commands, e-mail: commits-help@druid.apache.org