diff --git a/web-console/src/components/lookup-values-table/__snapshots__/lookup-values-table.spec.tsx.snap b/web-console/src/components/lookup-values-table/__snapshots__/lookup-values-table.spec.tsx.snap new file mode 100644 index 00000000000..1d03d8f9a7a --- /dev/null +++ b/web-console/src/components/lookup-values-table/__snapshots__/lookup-values-table.spec.tsx.snap @@ -0,0 +1,45 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`rule editor matches snapshot 1`] = ` +
+
+
+ +
+
+
+`; diff --git a/web-console/src/components/lookup-values-table/lookup-values-table.scss b/web-console/src/components/lookup-values-table/lookup-values-table.scss new file mode 100644 index 00000000000..4118c299f22 --- /dev/null +++ b/web-console/src/components/lookup-values-table/lookup-values-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. + */ + +.lookup-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/lookup-values-table/lookup-values-table.spec.tsx b/web-console/src/components/lookup-values-table/lookup-values-table.spec.tsx new file mode 100644 index 00000000000..7872595e7e6 --- /dev/null +++ b/web-console/src/components/lookup-values-table/lookup-values-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 { LookupValuesTable } from './lookup-values-table'; + +describe('rule editor', () => { + it('matches snapshot', () => { + const showJson = ; + const { container } = render(showJson); + expect(container.firstChild).toMatchSnapshot(); + }); +}); diff --git a/web-console/src/components/lookup-values-table/lookup-values-table.tsx b/web-console/src/components/lookup-values-table/lookup-values-table.tsx new file mode 100644 index 00000000000..dddd91e4b62 --- /dev/null +++ b/web-console/src/components/lookup-values-table/lookup-values-table.tsx @@ -0,0 +1,109 @@ +/* + * 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 from 'react-table'; + +import { queryDruidSql, QueryManager } from '../../utils'; +import { Loader } from '../loader/loader'; + +import './lookup-values-table.scss'; + +interface LookupRow { + k: string; + v: string; +} + +export interface LookupColumnsTableProps { + lookupId: string; + downloadFilename?: string; +} + +export interface LookupColumnsTableState { + columns?: LookupRow[]; + loading: boolean; + error?: string; +} + +export class LookupValuesTable extends React.PureComponent< + LookupColumnsTableProps, + LookupColumnsTableState +> { + private LookupColumnsQueryManager: QueryManager; + + constructor(props: LookupColumnsTableProps, context: any) { + super(props, context); + this.state = { + loading: true, + }; + + this.LookupColumnsQueryManager = new QueryManager({ + processQuery: async () => { + const { lookupId } = this.props; + + const resp = await queryDruidSql({ + query: `SELECT "k", "v" FROM lookup.${lookupId} + LIMIT 5000`, + }); + + return resp; + }, + onStateChange: ({ result, error, loading }) => { + this.setState({ columns: result, error, loading }); + }, + }); + } + + componentDidMount(): void { + this.LookupColumnsQueryManager.runQuery(null); + } + + renderTable(error?: string) { + const { columns } = this.state; + return ( + + ); + } + + render(): JSX.Element { + const { loading, error } = this.state; + this.renderTable(error); + return ( +
+
+ {loading ? : this.renderTable()} +
+
+ ); + } +} diff --git a/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap new file mode 100644 index 00000000000..c71af60eb62 --- /dev/null +++ b/web-console/src/dialogs/lookup-table-action-dialog/__snapshots__/lookup-table-action-dialog.spec.tsx.snap @@ -0,0 +1,219 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Lookup table action dialog matches snapshot 1`] = ` +
+
+
+
+
+
+

+ Lookup: test +

+ +
+
+
+ +
+
+
+
+
+ +
+
+
+
+
+
+
+ + + + + +
+
+ +
+
+
+
+
+
+`; diff --git a/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.spec.tsx b/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.spec.tsx new file mode 100644 index 00000000000..8acb7ad11c7 --- /dev/null +++ b/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.spec.tsx @@ -0,0 +1,36 @@ +/* + * 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 { LookupTableActionDialog } from './lookup-table-action-dialog'; + +describe('Lookup table action dialog', () => { + it('matches snapshot', () => { + const lookupTableActionDialog = ( + null }]} + onClose={() => {}} + /> + ); + render(lookupTableActionDialog); + expect(document.body.lastChild).toMatchSnapshot(); + }); +}); diff --git a/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.tsx b/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.tsx new file mode 100644 index 00000000000..a44b3bd74e5 --- /dev/null +++ b/web-console/src/dialogs/lookup-table-action-dialog/lookup-table-action-dialog.tsx @@ -0,0 +1,61 @@ +/* + * 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, { useState } from 'react'; + +import { LookupValuesTable } from '../../components/lookup-values-table/lookup-values-table'; +import { BasicAction } from '../../utils/basic-action'; +import { SideButtonMetaData, TableActionDialog } from '../table-action-dialog/table-action-dialog'; + +interface LookupTableActionDialogProps { + lookupId?: string; + actions: BasicAction[]; + onClose: () => void; +} + +export const LookupTableActionDialog = React.memo(function LookupTableActionDialog( + props: LookupTableActionDialogProps, +) { + const { onClose, lookupId, actions } = props; + const [activeTab, setActiveTab] = useState('values'); + + const taskTableSideButtonMetadata: SideButtonMetaData[] = [ + { + icon: 'list-columns', + text: 'Values', + active: activeTab === 'values', + onClick: () => setActiveTab('values'), + }, + ]; + + return ( + + {activeTab === 'values' && ( + + )} + + ); +}); diff --git a/web-console/src/views/lookups-view/lookups-view.tsx b/web-console/src/views/lookups-view/lookups-view.tsx index bc82a91041e..b9c4071fd35 100644 --- a/web-console/src/views/lookups-view/lookups-view.tsx +++ b/web-console/src/views/lookups-view/lookups-view.tsx @@ -32,6 +32,7 @@ import { ViewControlBar, } from '../../components'; import { AsyncActionDialog, LookupEditDialog } from '../../dialogs/'; +import { LookupTableActionDialog } from '../../dialogs/lookup-table-action-dialog/lookup-table-action-dialog'; import { AppToaster } from '../../singletons/toaster'; import { getDruidErrorMessage, LocalStorageKeys, QueryManager } from '../../utils'; import { BasicAction } from '../../utils/basic-action'; @@ -62,6 +63,9 @@ export interface LookupsViewState { deleteLookupTier?: string; hiddenColumns: LocalStorageBackedArray; + + lookupTableActionDialogId?: string; + actions: BasicAction[]; } export class LookupsView extends React.PureComponent { @@ -80,6 +84,7 @@ export class LookupsView extends React.PureComponent( LocalStorageKeys.LOOKUP_TABLE_COLUMN_SELECTION, @@ -333,7 +338,17 @@ export class LookupsView extends React.PureComponent; + return ( + { + this.setState({ + lookupTableActionDialogId: lookupId, + actions: lookupActions, + }); + }} + actions={lookupActions} + /> + ); }, show: hiddenColumns.exists(ACTION_COLUMN_LABEL), }, @@ -372,7 +387,7 @@ export class LookupsView extends React.PureComponent @@ -401,6 +416,13 @@ export class LookupsView extends React.PureComponent this.setState({ lookupTableActionDialogId: undefined })} + /> + )}
); }