mirror of https://github.com/apache/druid.git
Web console: update typescript 4.4 for faster build speeds (#11725)
* update typescript * do not show pagination when there is only one page * update snapshots * fix pagination
This commit is contained in:
Vadim Ogievetsky
GitHub
parent
4baebb231b
commit
8ea9309168
|
|
@ -5053,25 +5053,24 @@
|
|||
}
|
||||
},
|
||||
"@typescript-eslint/eslint-plugin": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.0.tgz",
|
||||
"integrity": "sha512-U8SP9VOs275iDXaL08Ln1Fa/wLXfj5aTr/1c0t0j6CdbOnxh+TruXu1p4I0NAvdPBQgoPjHsgKn28mOi0FzfoA==",
|
||||
"version": "4.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.31.2.tgz",
|
||||
"integrity": "sha512-w63SCQ4bIwWN/+3FxzpnWrDjQRXVEGiTt9tJTRptRXeFvdZc/wLiz3FQUwNQ2CVoRGI6KUWMNUj/pk63noUfcA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/experimental-utils": "4.22.0",
|
||||
"@typescript-eslint/scope-manager": "4.22.0",
|
||||
"debug": "^4.1.1",
|
||||
"@typescript-eslint/experimental-utils": "4.31.2",
|
||||
"@typescript-eslint/scope-manager": "4.31.2",
|
||||
"debug": "^4.3.1",
|
||||
"functional-red-black-tree": "^1.0.1",
|
||||
"lodash": "^4.17.15",
|
||||
"regexpp": "^3.0.0",
|
||||
"semver": "^7.3.2",
|
||||
"tsutils": "^3.17.1"
|
||||
"regexpp": "^3.1.0",
|
||||
"semver": "^7.3.5",
|
||||
"tsutils": "^3.21.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"debug": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
|
||||
"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
|
||||
"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.1.2"
|
||||
|
|
@ -5110,17 +5109,28 @@
|
|||
}
|
||||
},
|
||||
"@typescript-eslint/experimental-utils": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.22.0.tgz",
|
||||
"integrity": "sha512-xJXHHl6TuAxB5AWiVrGhvbGL8/hbiCQ8FiWwObO3r0fnvBdrbWEDy1hlvGQOAWc6qsCWuWMKdVWlLAEMpxnddg==",
|
||||
"version": "4.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.31.2.tgz",
|
||||
"integrity": "sha512-3tm2T4nyA970yQ6R3JZV9l0yilE2FedYg8dcXrTar34zC9r6JB7WyBQbpIVongKPlhEMjhQ01qkwrzWy38Bk1Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@types/json-schema": "^7.0.3",
|
||||
"@typescript-eslint/scope-manager": "4.22.0",
|
||||
"@typescript-eslint/types": "4.22.0",
|
||||
"@typescript-eslint/typescript-estree": "4.22.0",
|
||||
"eslint-scope": "^5.0.0",
|
||||
"eslint-utils": "^2.0.0"
|
||||
"@types/json-schema": "^7.0.7",
|
||||
"@typescript-eslint/scope-manager": "4.31.2",
|
||||
"@typescript-eslint/types": "4.31.2",
|
||||
"@typescript-eslint/typescript-estree": "4.31.2",
|
||||
"eslint-scope": "^5.1.1",
|
||||
"eslint-utils": "^3.0.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"eslint-utils": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
|
||||
"integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"eslint-visitor-keys": "^2.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"@typescript-eslint/parser": {
|
||||
|
|
@ -5238,34 +5248,34 @@
|
|||
}
|
||||
},
|
||||
"@typescript-eslint/scope-manager": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.22.0.tgz",
|
||||
"integrity": "sha512-OcCO7LTdk6ukawUM40wo61WdeoA7NM/zaoq1/2cs13M7GyiF+T4rxuA4xM+6LeHWjWbss7hkGXjFDRcKD4O04Q==",
|
||||
"version": "4.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.31.2.tgz",
|
||||
"integrity": "sha512-2JGwudpFoR/3Czq6mPpE8zBPYdHWFGL6lUNIGolbKQeSNv4EAiHaR5GVDQaLA0FwgcdcMtRk+SBJbFGL7+La5w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/types": "4.22.0",
|
||||
"@typescript-eslint/visitor-keys": "4.22.0"
|
||||
"@typescript-eslint/types": "4.31.2",
|
||||
"@typescript-eslint/visitor-keys": "4.31.2"
|
||||
}
|
||||
},
|
||||
"@typescript-eslint/types": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.22.0.tgz",
|
||||
"integrity": "sha512-sW/BiXmmyMqDPO2kpOhSy2Py5w6KvRRsKZnV0c4+0nr4GIcedJwXAq+RHNK4lLVEZAJYFltnnk1tJSlbeS9lYA==",
|
||||
"version": "4.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.31.2.tgz",
|
||||
"integrity": "sha512-kWiTTBCTKEdBGrZKwFvOlGNcAsKGJSBc8xLvSjSppFO88AqGxGNYtF36EuEYG6XZ9vT0xX8RNiHbQUKglbSi1w==",
|
||||
"dev": true
|
||||
},
|
||||
"@typescript-eslint/typescript-estree": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.22.0.tgz",
|
||||
"integrity": "sha512-TkIFeu5JEeSs5ze/4NID+PIcVjgoU3cUQUIZnH3Sb1cEn1lBo7StSV5bwPuJQuoxKXlzAObjYTilOEKRuhR5yg==",
|
||||
"version": "4.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.31.2.tgz",
|
||||
"integrity": "sha512-ieBq8U9at6PvaC7/Z6oe8D3czeW5d//Fo1xkF/s9394VR0bg/UaMYPdARiWyKX+lLEjY3w/FNZJxitMsiWv+wA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/types": "4.22.0",
|
||||
"@typescript-eslint/visitor-keys": "4.22.0",
|
||||
"debug": "^4.1.1",
|
||||
"globby": "^11.0.1",
|
||||
"@typescript-eslint/types": "4.31.2",
|
||||
"@typescript-eslint/visitor-keys": "4.31.2",
|
||||
"debug": "^4.3.1",
|
||||
"globby": "^11.0.3",
|
||||
"is-glob": "^4.0.1",
|
||||
"semver": "^7.3.2",
|
||||
"tsutils": "^3.17.1"
|
||||
"semver": "^7.3.5",
|
||||
"tsutils": "^3.21.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"array-union": {
|
||||
|
|
@ -5275,18 +5285,18 @@
|
|||
"dev": true
|
||||
},
|
||||
"debug": {
|
||||
"version": "4.3.1",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
|
||||
"integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
|
||||
"version": "4.3.2",
|
||||
"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.2.tgz",
|
||||
"integrity": "sha512-mOp8wKcvj7XxC78zLgw/ZA+6TSgkoE2C/ienthhRD298T7UNwAg9diBpLRxC0mOezLl4B0xV7M0cCO6P/O0Xhw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ms": "2.1.2"
|
||||
}
|
||||
},
|
||||
"globby": {
|
||||
"version": "11.0.3",
|
||||
"resolved": "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz",
|
||||
"integrity": "sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==",
|
||||
"version": "11.0.4",
|
||||
"resolved": "https://registry.npmjs.org/globby/-/globby-11.0.4.tgz",
|
||||
"integrity": "sha512-9O4MVG9ioZJ08ffbcyVYyLOJLk5JQ688pJ4eMGLpdWLHq/Wr1D9BlriLQyL0E+jbkuePVZXYFj47QM/v093wHg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"array-union": "^2.1.0",
|
||||
|
|
@ -5330,12 +5340,12 @@
|
|||
}
|
||||
},
|
||||
"@typescript-eslint/visitor-keys": {
|
||||
"version": "4.22.0",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.22.0.tgz",
|
||||
"integrity": "sha512-nnMu4F+s4o0sll6cBSsTeVsT4cwxB7zECK3dFxzEjPBii9xLpq4yqqsy/FU5zMfan6G60DKZSCXAa3sHJZrcYw==",
|
||||
"version": "4.31.2",
|
||||
"resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.31.2.tgz",
|
||||
"integrity": "sha512-PrBId7EQq2Nibns7dd/ch6S6/M4/iwLM9McbgeEbCXfxdwRUNxJ4UNreJ6Gh3fI2GNKNrWnQxKL7oCPmngKBug==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@typescript-eslint/types": "4.22.0",
|
||||
"@typescript-eslint/types": "4.31.2",
|
||||
"eslint-visitor-keys": "^2.0.0"
|
||||
}
|
||||
},
|
||||
|
|
@ -21687,9 +21697,9 @@
|
|||
}
|
||||
},
|
||||
"tslib": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.2.0.tgz",
|
||||
"integrity": "sha512-gS9GVHRU+RGn5KQM2rllAlR3dU6m7AcpJKdtH8gFvQiC4Otgk98XnmMU+nZenHt/+VhnBPWwgrJsyrdcw6i23w=="
|
||||
"version": "2.3.1",
|
||||
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
|
||||
"integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
|
||||
},
|
||||
"tsutils": {
|
||||
"version": "3.21.0",
|
||||
|
|
@ -21769,9 +21779,9 @@
|
|||
}
|
||||
},
|
||||
"typescript": {
|
||||
"version": "4.2.4",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.4.tgz",
|
||||
"integrity": "sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==",
|
||||
"version": "4.4.3",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.4.3.tgz",
|
||||
"integrity": "sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA==",
|
||||
"dev": true
|
||||
},
|
||||
"unbox-primitive": {
|
||||
|
|
|
|||
|
|
@ -97,7 +97,7 @@
|
|||
"react-splitter-layout": "^4.0.0",
|
||||
"react-table": "~6.10.3",
|
||||
"regenerator-runtime": "^0.13.7",
|
||||
"tslib": "^2.2.0"
|
||||
"tslib": "^2.3.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@awesome-code-style/eslint-config": "^3.2.0",
|
||||
|
|
@ -127,7 +127,7 @@
|
|||
"@types/react-splitter-layout": "^3.0.0",
|
||||
"@types/react-table": "6.8.5",
|
||||
"@types/uuid": "^7.0.2",
|
||||
"@typescript-eslint/eslint-plugin": "^4.22.0",
|
||||
"@typescript-eslint/eslint-plugin": "^4.30.0",
|
||||
"autoprefixer": "^10.2.6",
|
||||
"babel-loader": "^8.2.2",
|
||||
"browserslist": "^4.16.6",
|
||||
|
|
@ -163,7 +163,7 @@
|
|||
"ts-jest": "^26.5.5",
|
||||
"ts-loader": "^8.1.0",
|
||||
"ts-node": "^8.4.1",
|
||||
"typescript": "^4.2.4",
|
||||
"typescript": "^4.4.3",
|
||||
"uuid": "^7.0.2",
|
||||
"webpack": "^5.33.2",
|
||||
"webpack-bundle-analyzer": "^4.4.1",
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ interface ReactTableCustomPaginationProps {
|
|||
}
|
||||
|
||||
interface ReactTableCustomPaginationState {
|
||||
page: '' | number;
|
||||
tempPage?: string;
|
||||
}
|
||||
|
||||
export class ReactTableCustomPagination extends React.PureComponent<
|
||||
|
|
@ -51,38 +51,24 @@ export class ReactTableCustomPagination extends React.PureComponent<
|
|||
constructor(props: ReactTableCustomPaginationProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
page: props.page,
|
||||
};
|
||||
this.state = {};
|
||||
}
|
||||
|
||||
static getDerivedStateFromProps(nextProps: ReactTableCustomPaginationProps) {
|
||||
return {
|
||||
page: nextProps.page,
|
||||
};
|
||||
}
|
||||
|
||||
getSafePage = (page: any) => {
|
||||
if (Number.isNaN(page)) {
|
||||
page = this.props.page;
|
||||
}
|
||||
return Math.min(Math.max(page, 0), this.props.pages - 1);
|
||||
};
|
||||
|
||||
changePage = (page: any) => {
|
||||
page = this.getSafePage(page);
|
||||
this.setState({ page });
|
||||
private readonly changePage = (page: number) => {
|
||||
page = Math.min(Math.max(page, 0), this.props.pages - 1);
|
||||
if (this.props.page !== page) {
|
||||
this.props.onPageChange(page);
|
||||
}
|
||||
};
|
||||
|
||||
applyPage = (e: any) => {
|
||||
private readonly applyTempPage = (e: any) => {
|
||||
if (e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
const page = this.state.page;
|
||||
this.changePage(page === '' ? this.props.page : page);
|
||||
const { tempPage } = this.state;
|
||||
if (!tempPage) return;
|
||||
this.setState({ tempPage: undefined });
|
||||
this.changePage(parseInt(tempPage, 10) - 1);
|
||||
};
|
||||
|
||||
render(): JSX.Element {
|
||||
|
|
@ -103,6 +89,7 @@ export class ReactTableCustomPagination extends React.PureComponent<
|
|||
pageText,
|
||||
rowsText,
|
||||
} = this.props;
|
||||
const { tempPage } = this.state;
|
||||
|
||||
return (
|
||||
<div className="-pagination" style={style}>
|
||||
|
|
@ -125,18 +112,19 @@ export class ReactTableCustomPagination extends React.PureComponent<
|
|||
<div className="-pageJump">
|
||||
<input
|
||||
className={Classes.INPUT}
|
||||
type={this.state.page === '' ? 'text' : 'number'}
|
||||
type="number"
|
||||
min="1"
|
||||
onChange={e => {
|
||||
const val: string = e.target.value;
|
||||
this.setState({
|
||||
page: val === '' ? val : this.getSafePage(parseInt(val, 10) - 1),
|
||||
tempPage: val,
|
||||
});
|
||||
}}
|
||||
value={this.state.page === '' ? '' : this.state.page + 1}
|
||||
onBlur={this.applyPage}
|
||||
value={tempPage || String(page + 1)}
|
||||
onBlur={this.applyTempPage}
|
||||
onKeyPress={e => {
|
||||
if (e.which === 13 || e.keyCode === 13) {
|
||||
this.applyPage(e);
|
||||
this.applyTempPage(e);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ exports[`DatasourceColumnsTable matches snapshot on error 1`] = `
|
|||
defaultFilterMethod={[Function]}
|
||||
defaultFiltered={Array []}
|
||||
defaultPage={0}
|
||||
defaultPageSize={20}
|
||||
defaultPageSize={25}
|
||||
defaultResized={Array []}
|
||||
defaultSortDesc={false}
|
||||
defaultSortMethod={[Function]}
|
||||
|
|
@ -130,9 +130,6 @@ exports[`DatasourceColumnsTable matches snapshot on error 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
|
|
@ -149,7 +146,7 @@ exports[`DatasourceColumnsTable matches snapshot on error 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
@ -239,7 +236,7 @@ exports[`DatasourceColumnsTable matches snapshot on init 1`] = `
|
|||
defaultFilterMethod={[Function]}
|
||||
defaultFiltered={Array []}
|
||||
defaultPage={0}
|
||||
defaultPageSize={20}
|
||||
defaultPageSize={25}
|
||||
defaultResized={Array []}
|
||||
defaultSortDesc={false}
|
||||
defaultSortMethod={[Function]}
|
||||
|
|
@ -290,9 +287,6 @@ exports[`DatasourceColumnsTable matches snapshot on init 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
|
|
@ -309,7 +303,7 @@ exports[`DatasourceColumnsTable matches snapshot on init 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
@ -411,7 +405,7 @@ exports[`DatasourceColumnsTable matches snapshot on no data 1`] = `
|
|||
defaultFilterMethod={[Function]}
|
||||
defaultFiltered={Array []}
|
||||
defaultPage={0}
|
||||
defaultPageSize={20}
|
||||
defaultPageSize={25}
|
||||
defaultResized={Array []}
|
||||
defaultSortDesc={false}
|
||||
defaultSortMethod={[Function]}
|
||||
|
|
@ -462,9 +456,6 @@ exports[`DatasourceColumnsTable matches snapshot on no data 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
|
|
@ -481,7 +472,7 @@ exports[`DatasourceColumnsTable matches snapshot on no data 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
@ -582,7 +573,7 @@ exports[`DatasourceColumnsTable matches snapshot on some data 1`] = `
|
|||
defaultFilterMethod={[Function]}
|
||||
defaultFiltered={Array []}
|
||||
defaultPage={0}
|
||||
defaultPageSize={20}
|
||||
defaultPageSize={25}
|
||||
defaultResized={Array []}
|
||||
defaultSortDesc={false}
|
||||
defaultSortMethod={[Function]}
|
||||
|
|
@ -633,9 +624,6 @@ exports[`DatasourceColumnsTable matches snapshot on some data 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
|
|
@ -652,7 +640,7 @@ exports[`DatasourceColumnsTable matches snapshot on some data 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,12 @@ import React from 'react';
|
|||
import ReactTable from 'react-table';
|
||||
|
||||
import { useQueryManager } from '../../hooks';
|
||||
import { ColumnMetadata, queryDruidSql } from '../../utils';
|
||||
import {
|
||||
ColumnMetadata,
|
||||
queryDruidSql,
|
||||
SMALL_TABLE_PAGE_SIZE,
|
||||
SMALL_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../utils';
|
||||
import { Loader } from '../loader/loader';
|
||||
|
||||
import './datasource-columns-table.scss';
|
||||
|
|
@ -50,10 +55,13 @@ export const DatasourceColumnsTable = React.memo(function DatasourceColumnsTable
|
|||
});
|
||||
|
||||
function renderTable() {
|
||||
const columns = columnsState.data || [];
|
||||
return (
|
||||
<ReactTable
|
||||
data={columnsState.data || []}
|
||||
defaultPageSize={20}
|
||||
data={columns}
|
||||
defaultPageSize={SMALL_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={columns.length > SMALL_TABLE_PAGE_SIZE}
|
||||
filterable
|
||||
columns={[
|
||||
{
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import React from 'react';
|
|||
import ReactTable from 'react-table';
|
||||
|
||||
import { useQueryManager } from '../../hooks';
|
||||
import { queryDruidSql } from '../../utils';
|
||||
import { queryDruidSql, SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../utils';
|
||||
import { Loader } from '../loader/loader';
|
||||
|
||||
import './lookup-values-table.scss';
|
||||
|
|
@ -39,7 +39,7 @@ export interface LookupValuesTableProps {
|
|||
export const LookupValuesTable = React.memo(function LookupValuesTable(
|
||||
props: LookupValuesTableProps,
|
||||
) {
|
||||
const [columnsState] = useQueryManager<string, LookupRow[]>({
|
||||
const [entriesState] = useQueryManager<string, LookupRow[]>({
|
||||
processQuery: async (lookupId: string) => {
|
||||
return await queryDruidSql<LookupRow>({
|
||||
query: `SELECT "k", "v" FROM ${SqlRef.column(lookupId, 'lookup')} LIMIT 5000`,
|
||||
|
|
@ -49,10 +49,13 @@ export const LookupValuesTable = React.memo(function LookupValuesTable(
|
|||
});
|
||||
|
||||
function renderTable() {
|
||||
const entries = entriesState.data || [];
|
||||
return (
|
||||
<ReactTable
|
||||
data={columnsState.data || []}
|
||||
defaultPageSize={20}
|
||||
data={entries}
|
||||
defaultPageSize={SMALL_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={entries.length > SMALL_TABLE_PAGE_SIZE}
|
||||
filterable
|
||||
columns={[
|
||||
{
|
||||
|
|
@ -65,7 +68,7 @@ export const LookupValuesTable = React.memo(function LookupValuesTable(
|
|||
},
|
||||
]}
|
||||
noDataText={
|
||||
columnsState.getErrorMessage() ||
|
||||
entriesState.getErrorMessage() ||
|
||||
'Lookup data not found. If this is a new lookup it might not have propagated yet.'
|
||||
}
|
||||
/>
|
||||
|
|
@ -74,7 +77,7 @@ export const LookupValuesTable = React.memo(function LookupValuesTable(
|
|||
|
||||
return (
|
||||
<div className="lookup-columns-table">
|
||||
<div className="main-area">{columnsState.loading ? <Loader /> : renderTable()}</div>
|
||||
<div className="main-area">{entriesState.loading ? <Loader /> : renderTable()}</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@ export const RefreshButton = React.memo(function RefreshButton(props: RefreshBut
|
|||
|
||||
return (
|
||||
<TimedButton
|
||||
className="refresh-button"
|
||||
defaultDelay={30000}
|
||||
label="Auto refresh every"
|
||||
delays={DELAYS}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
import { Button, ButtonGroup, ButtonProps, Menu, MenuDivider, MenuItem } from '@blueprintjs/core';
|
||||
import { IconNames } from '@blueprintjs/icons';
|
||||
import { Popover2 } from '@blueprintjs/popover2';
|
||||
import classNames from 'classnames';
|
||||
import React, { useState } from 'react';
|
||||
|
||||
import { useInterval } from '../../hooks';
|
||||
|
|
@ -40,6 +41,7 @@ export interface TimedButtonProps extends ButtonProps {
|
|||
|
||||
export const TimedButton = React.memo(function TimedButton(props: TimedButtonProps) {
|
||||
const {
|
||||
className,
|
||||
label,
|
||||
delays,
|
||||
onRefresh,
|
||||
|
|
@ -71,7 +73,7 @@ export const TimedButton = React.memo(function TimedButton(props: TimedButtonPro
|
|||
}
|
||||
|
||||
return (
|
||||
<ButtonGroup className="timed-button">
|
||||
<ButtonGroup className={classNames('timed-button', className)}>
|
||||
<Button {...other} text={text} icon={icon} onClick={() => onRefresh(false)} />
|
||||
<Popover2
|
||||
content={
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@ exports[`LookupEditDialog matches snapshot 1`] = `
|
|||
The table which contains the key value pairs. This will become the table value in the SQL query:
|
||||
</p>
|
||||
<p>
|
||||
SELECT keyColumn, valueColumn, tsColumn? FROM namespace.
|
||||
SELECT keyColumn, valueColumn, tsColumn? FROM
|
||||
<strong>
|
||||
table
|
||||
</strong>
|
||||
|
|
@ -306,7 +306,7 @@ exports[`LookupEditDialog matches snapshot 1`] = `
|
|||
<strong>
|
||||
keyColumn
|
||||
</strong>
|
||||
, valueColumn, tsColumn? FROM namespace.table WHERE filter
|
||||
, valueColumn, tsColumn? FROM table WHERE filter
|
||||
</p>
|
||||
</React.Fragment>,
|
||||
"name": "extractionNamespace.keyColumn",
|
||||
|
|
@ -325,7 +325,7 @@ exports[`LookupEditDialog matches snapshot 1`] = `
|
|||
<strong>
|
||||
valueColumn
|
||||
</strong>
|
||||
, tsColumn? FROM namespace.table WHERE filter
|
||||
, tsColumn? FROM table WHERE filter
|
||||
</p>
|
||||
</React.Fragment>,
|
||||
"name": "extractionNamespace.valueColumn",
|
||||
|
|
@ -344,7 +344,7 @@ exports[`LookupEditDialog matches snapshot 1`] = `
|
|||
<strong>
|
||||
tsColumn
|
||||
</strong>
|
||||
? FROM namespace.table WHERE filter
|
||||
? FROM table WHERE filter
|
||||
</p>
|
||||
</React.Fragment>,
|
||||
"label": "Timestamp column",
|
||||
|
|
@ -359,8 +359,7 @@ exports[`LookupEditDialog matches snapshot 1`] = `
|
|||
The filter to be used when selecting lookups, this is used to create a where clause on lookup population. This will become the expression filter in the SQL query:
|
||||
</p>
|
||||
<p>
|
||||
SELECT keyColumn, valueColumn, tsColumn? FROM namespace.table WHERE
|
||||
|
||||
SELECT keyColumn, valueColumn, tsColumn? FROM table WHERE
|
||||
<strong>
|
||||
filter
|
||||
</strong>
|
||||
|
|
|
|||
|
|
@ -295,8 +295,7 @@ export const LOOKUP_FIELDS: Field<LookupSpec>[] = [
|
|||
query:
|
||||
</p>
|
||||
<p>
|
||||
SELECT keyColumn, valueColumn, tsColumn? FROM namespace.<strong>table</strong> WHERE
|
||||
filter
|
||||
SELECT keyColumn, valueColumn, tsColumn? FROM <strong>table</strong> WHERE filter
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
|
|
@ -314,8 +313,7 @@ export const LOOKUP_FIELDS: Field<LookupSpec>[] = [
|
|||
the SQL query:
|
||||
</p>
|
||||
<p>
|
||||
SELECT <strong>keyColumn</strong>, valueColumn, tsColumn? FROM namespace.table WHERE
|
||||
filter
|
||||
SELECT <strong>keyColumn</strong>, valueColumn, tsColumn? FROM table WHERE filter
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
|
|
@ -333,8 +331,7 @@ export const LOOKUP_FIELDS: Field<LookupSpec>[] = [
|
|||
the SQL query:
|
||||
</p>
|
||||
<p>
|
||||
SELECT keyColumn, <strong>valueColumn</strong>, tsColumn? FROM namespace.table WHERE
|
||||
filter
|
||||
SELECT keyColumn, <strong>valueColumn</strong>, tsColumn? FROM table WHERE filter
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
|
|
@ -352,8 +349,7 @@ export const LOOKUP_FIELDS: Field<LookupSpec>[] = [
|
|||
the SQL query:
|
||||
</p>
|
||||
<p>
|
||||
SELECT keyColumn, valueColumn, <strong>tsColumn</strong>? FROM namespace.table WHERE
|
||||
filter
|
||||
SELECT keyColumn, valueColumn, <strong>tsColumn</strong>? FROM table WHERE filter
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
|
|
@ -370,8 +366,7 @@ export const LOOKUP_FIELDS: Field<LookupSpec>[] = [
|
|||
lookup population. This will become the expression filter in the SQL query:
|
||||
</p>
|
||||
<p>
|
||||
SELECT keyColumn, valueColumn, tsColumn? FROM namespace.table WHERE{' '}
|
||||
<strong>filter</strong>
|
||||
SELECT keyColumn, valueColumn, tsColumn? FROM table WHERE <strong>filter</strong>
|
||||
</p>
|
||||
</>
|
||||
),
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@ body {
|
|||
width: 100%;
|
||||
overflow: hidden;
|
||||
font-size: 13px;
|
||||
overscroll-behavior-x: none;
|
||||
}
|
||||
|
||||
body {
|
||||
|
|
|
|||
|
|
@ -29,6 +29,12 @@ import { Filter, FilterRender } from 'react-table';
|
|||
|
||||
import { AppToaster } from '../singletons';
|
||||
|
||||
export const STANDARD_TABLE_PAGE_SIZE = 50;
|
||||
export const STANDARD_TABLE_PAGE_SIZE_OPTIONS = [50, 100, 200];
|
||||
|
||||
export const SMALL_TABLE_PAGE_SIZE = 25;
|
||||
export const SMALL_TABLE_PAGE_SIZE_OPTIONS = [25, 50, 100];
|
||||
|
||||
// These constants are used to make sure that they are not constantly recreated thrashing the pure components
|
||||
export const EMPTY_OBJECT: any = {};
|
||||
export const EMPTY_ARRAY: any[] = [];
|
||||
|
|
|
|||
|
|
@ -373,12 +373,9 @@ exports[`data source view matches snapshot 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
200,
|
||||
]
|
||||
}
|
||||
pageText="Page"
|
||||
|
|
@ -392,7 +389,7 @@ exports[`data source view matches snapshot 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
|
|||
|
|
@ -66,6 +66,8 @@ import {
|
|||
queryDruidSql,
|
||||
QueryManager,
|
||||
QueryState,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../utils';
|
||||
import { BasicAction } from '../../utils/basic-action';
|
||||
import { Rule, RuleUtil } from '../../utils/load-rule';
|
||||
|
|
@ -1031,6 +1033,9 @@ ORDER BY 1`;
|
|||
onFilteredChange={filtered => {
|
||||
this.setState({ datasourceFilter: filtered });
|
||||
}}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={datasources.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={[
|
||||
{
|
||||
Header: twoLines('Datasource', 'name'),
|
||||
|
|
@ -1438,7 +1443,6 @@ ORDER BY 1`;
|
|||
},
|
||||
},
|
||||
]}
|
||||
defaultPageSize={50}
|
||||
/>
|
||||
{this.renderUnuseAction()}
|
||||
{this.renderUseAction()}
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ exports[`tasks view matches snapshot 1`] = `
|
|||
defaultFilterMethod={[Function]}
|
||||
defaultFiltered={Array []}
|
||||
defaultPage={0}
|
||||
defaultPageSize={20}
|
||||
defaultPageSize={25}
|
||||
defaultResized={Array []}
|
||||
defaultSortDesc={false}
|
||||
defaultSortMethod={[Function]}
|
||||
|
|
@ -246,9 +246,6 @@ exports[`tasks view matches snapshot 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
|
|
@ -265,7 +262,7 @@ exports[`tasks view matches snapshot 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
@ -491,7 +488,7 @@ exports[`tasks view matches snapshot 1`] = `
|
|||
defaultFilterMethod={[Function]}
|
||||
defaultFiltered={Array []}
|
||||
defaultPage={0}
|
||||
defaultPageSize={20}
|
||||
defaultPageSize={25}
|
||||
defaultResized={Array []}
|
||||
defaultSortDesc={false}
|
||||
defaultSortMethod={[Function]}
|
||||
|
|
@ -562,9 +559,6 @@ exports[`tasks view matches snapshot 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
|
|
@ -582,7 +576,7 @@ exports[`tasks view matches snapshot 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
|
|||
|
|
@ -55,6 +55,8 @@ import {
|
|||
queryDruidSql,
|
||||
QueryManager,
|
||||
QueryState,
|
||||
SMALL_TABLE_PAGE_SIZE,
|
||||
SMALL_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../utils';
|
||||
import { BasicAction } from '../../utils/basic-action';
|
||||
|
||||
|
|
@ -553,10 +555,11 @@ ORDER BY "rank" DESC, "created_time" DESC`;
|
|||
renderSupervisorTable() {
|
||||
const { supervisorsState, hiddenSupervisorColumns, taskFilter, supervisorFilter } = this.state;
|
||||
|
||||
const supervisors = supervisorsState.data || [];
|
||||
return (
|
||||
<>
|
||||
<ReactTable
|
||||
data={supervisorsState.data || []}
|
||||
data={supervisors}
|
||||
loading={supervisorsState.loading}
|
||||
noDataText={
|
||||
supervisorsState.isEmpty() ? 'No supervisors' : supervisorsState.getErrorMessage() || ''
|
||||
|
|
@ -575,6 +578,9 @@ ORDER BY "rank" DESC, "created_time" DESC`;
|
|||
this.setState({ supervisorFilter: filtered, taskFilter: newTaskFilter });
|
||||
}}
|
||||
filterable
|
||||
defaultPageSize={SMALL_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={supervisors.length > SMALL_TABLE_PAGE_SIZE}
|
||||
columns={[
|
||||
{
|
||||
Header: 'Datasource',
|
||||
|
|
@ -714,10 +720,12 @@ ORDER BY "rank" DESC, "created_time" DESC`;
|
|||
hiddenTaskColumns,
|
||||
supervisorFilter,
|
||||
} = this.state;
|
||||
|
||||
const tasks = tasksState.data || [];
|
||||
return (
|
||||
<>
|
||||
<ReactTable
|
||||
data={tasksState.data || []}
|
||||
data={tasks}
|
||||
loading={tasksState.loading}
|
||||
noDataText={tasksState.isEmpty() ? 'No tasks' : tasksState.getErrorMessage() || ''}
|
||||
filterable
|
||||
|
|
@ -736,6 +744,9 @@ ORDER BY "rank" DESC, "created_time" DESC`;
|
|||
}}
|
||||
defaultSorted={[{ id: 'status', desc: true }]}
|
||||
pivotBy={groupTasksBy ? [groupTasksBy] : []}
|
||||
defaultPageSize={SMALL_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={tasks.length > SMALL_TABLE_PAGE_SIZE}
|
||||
columns={[
|
||||
{
|
||||
Header: 'Task ID',
|
||||
|
|
|
|||
|
|
@ -22,7 +22,12 @@ import ReactTable from 'react-table';
|
|||
|
||||
import { TableCell } from '../../../components';
|
||||
import { DruidFilter, getFilterDimension } from '../../../druid-models';
|
||||
import { caseInsensitiveContains, filterMap } from '../../../utils';
|
||||
import {
|
||||
caseInsensitiveContains,
|
||||
filterMap,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../../utils';
|
||||
import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
|
||||
|
||||
import './filter-table.scss';
|
||||
|
|
@ -52,6 +57,10 @@ export const FilterTable = React.memo(function FilterTable(props: FilterTablePro
|
|||
<ReactTable
|
||||
className="filter-table -striped -highlight"
|
||||
data={sampleData.rows}
|
||||
sortable={false}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={sampleData.rows.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={filterMap(sampleData.header, (columnName, i) => {
|
||||
if (!caseInsensitiveContains(columnName, columnFilter)) return;
|
||||
const timestamp = columnName === '__time';
|
||||
|
|
@ -92,9 +101,6 @@ export const FilterTable = React.memo(function FilterTable(props: FilterTablePro
|
|||
},
|
||||
};
|
||||
})}
|
||||
defaultPageSize={50}
|
||||
showPagination={false}
|
||||
sortable={false}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -24,7 +24,12 @@ import ReactTable from 'react-table';
|
|||
import { TableCell } from '../../../components';
|
||||
import { TableCellUnparseable } from '../../../components/table-cell-unparseable/table-cell-unparseable';
|
||||
import { FlattenField } from '../../../druid-models';
|
||||
import { caseInsensitiveContains, filterMap } from '../../../utils';
|
||||
import {
|
||||
caseInsensitiveContains,
|
||||
filterMap,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../../utils';
|
||||
import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
|
||||
|
||||
import './parse-data-table.scss';
|
||||
|
|
@ -52,6 +57,10 @@ export const ParseDataTable = React.memo(function ParseDataTable(props: ParseDat
|
|||
<ReactTable
|
||||
className="parse-data-table -striped -highlight"
|
||||
data={sampleData.rows}
|
||||
sortable={false}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={sampleData.rows.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={filterMap(sampleData.header, (columnName, i) => {
|
||||
if (!caseInsensitiveContains(columnName, columnFilter)) return;
|
||||
const flattenFieldIndex = flattenFields.findIndex(f => f.name === columnName);
|
||||
|
|
@ -100,9 +109,6 @@ export const ParseDataTable = React.memo(function ParseDataTable(props: ParseDat
|
|||
);
|
||||
}
|
||||
}}
|
||||
defaultPageSize={50}
|
||||
showPagination={false}
|
||||
sortable={false}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -29,7 +29,12 @@ import {
|
|||
possibleDruidFormatForValues,
|
||||
TimestampSpec,
|
||||
} from '../../../druid-models';
|
||||
import { caseInsensitiveContains, filterMap } from '../../../utils';
|
||||
import {
|
||||
caseInsensitiveContains,
|
||||
filterMap,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../../utils';
|
||||
import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
|
||||
|
||||
import './parse-time-table.scss';
|
||||
|
|
@ -71,6 +76,10 @@ export const ParseTimeTable = React.memo(function ParseTimeTable(props: ParseTim
|
|||
<ReactTable
|
||||
className="parse-time-table -striped -highlight"
|
||||
data={headerAndRows.rows}
|
||||
sortable={false}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={headerAndRows.rows.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={filterMap(
|
||||
headerAndRows.header.length ? headerAndRows.header : ['__error__'],
|
||||
(columnName, i) => {
|
||||
|
|
@ -129,9 +138,6 @@ export const ParseTimeTable = React.memo(function ParseTimeTable(props: ParseTim
|
|||
};
|
||||
},
|
||||
)}
|
||||
defaultPageSize={50}
|
||||
showPagination={false}
|
||||
sortable={false}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -29,7 +29,12 @@ import {
|
|||
inflateDimensionSpec,
|
||||
MetricSpec,
|
||||
} from '../../../druid-models';
|
||||
import { caseInsensitiveContains, filterMap } from '../../../utils';
|
||||
import {
|
||||
caseInsensitiveContains,
|
||||
filterMap,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../../utils';
|
||||
import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
|
||||
|
||||
import './schema-table.scss';
|
||||
|
|
@ -66,6 +71,10 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
|
|||
<ReactTable
|
||||
className="schema-table -striped -highlight"
|
||||
data={headerAndRows.rows}
|
||||
sortable={false}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={headerAndRows.rows.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={filterMap(headerAndRows.header, (columnName, i) => {
|
||||
if (!caseInsensitiveContains(columnName, columnFilter)) return;
|
||||
|
||||
|
|
@ -144,9 +153,6 @@ export const SchemaTable = React.memo(function SchemaTable(props: SchemaTablePro
|
|||
};
|
||||
}
|
||||
})}
|
||||
defaultPageSize={50}
|
||||
showPagination={false}
|
||||
sortable={false}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -22,7 +22,12 @@ import ReactTable from 'react-table';
|
|||
|
||||
import { TableCell } from '../../../components';
|
||||
import { Transform } from '../../../druid-models';
|
||||
import { caseInsensitiveContains, filterMap } from '../../../utils';
|
||||
import {
|
||||
caseInsensitiveContains,
|
||||
filterMap,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../../utils';
|
||||
import { escapeColumnName } from '../../../utils/druid-expression';
|
||||
import { HeaderAndRows, SampleEntry } from '../../../utils/sampler';
|
||||
|
||||
|
|
@ -61,6 +66,10 @@ export const TransformTable = React.memo(function TransformTable(props: Transfor
|
|||
<ReactTable
|
||||
className="transform-table -striped -highlight"
|
||||
data={sampleData.rows}
|
||||
sortable={false}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={sampleData.rows.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={filterMap(sampleData.header, (columnName, i) => {
|
||||
if (!caseInsensitiveContains(columnName, columnFilter)) return;
|
||||
const timestamp = columnName === '__time';
|
||||
|
|
@ -106,9 +115,6 @@ export const TransformTable = React.memo(function TransformTable(props: Transfor
|
|||
},
|
||||
};
|
||||
})}
|
||||
defaultPageSize={50}
|
||||
showPagination={false}
|
||||
sortable={false}
|
||||
/>
|
||||
);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -209,12 +209,9 @@ exports[`lookups view matches snapshot 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
200,
|
||||
]
|
||||
}
|
||||
pageText="Page"
|
||||
|
|
@ -228,7 +225,7 @@ exports[`lookups view matches snapshot 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
|
|||
|
|
@ -42,6 +42,8 @@ import {
|
|||
LocalStorageKeys,
|
||||
QueryManager,
|
||||
QueryState,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../utils';
|
||||
import { BasicAction } from '../../utils/basic-action';
|
||||
|
||||
|
|
@ -305,7 +307,7 @@ export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsVi
|
|||
renderLookupsTable() {
|
||||
const { lookupEntriesAndTiersState, visibleColumns } = this.state;
|
||||
const lookupEntriesAndTiers = lookupEntriesAndTiersState.data;
|
||||
const lookups = lookupEntriesAndTiers ? lookupEntriesAndTiers.lookupEntries : undefined;
|
||||
const lookups = lookupEntriesAndTiers ? lookupEntriesAndTiers.lookupEntries : [];
|
||||
|
||||
if (isLookupsUninitialized(lookupEntriesAndTiersState.error)) {
|
||||
return (
|
||||
|
|
@ -322,15 +324,18 @@ export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsVi
|
|||
return (
|
||||
<>
|
||||
<ReactTable
|
||||
data={lookups || []}
|
||||
data={lookups}
|
||||
loading={lookupEntriesAndTiersState.loading}
|
||||
noDataText={
|
||||
!lookupEntriesAndTiersState.loading && lookups && !lookups.length
|
||||
!lookupEntriesAndTiersState.loading && !lookups.length
|
||||
? 'No lookups'
|
||||
: lookupEntriesAndTiersState.getErrorMessage() || ''
|
||||
}
|
||||
filterable
|
||||
defaultSorted={[{ id: 'lookup_name', desc: false }]}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={lookups.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={[
|
||||
{
|
||||
Header: 'Lookup name',
|
||||
|
|
@ -415,7 +420,6 @@ export class LookupsView extends React.PureComponent<LookupsViewProps, LookupsVi
|
|||
},
|
||||
},
|
||||
]}
|
||||
defaultPageSize={50}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
|
|
|||
|
|
@ -1237,101 +1237,6 @@ exports[`query output matches snapshot 1`] = `
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="pagination-bottom"
|
||||
>
|
||||
<div
|
||||
class="-pagination"
|
||||
>
|
||||
<div
|
||||
class="-previous"
|
||||
>
|
||||
<button
|
||||
class="-btn"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Previous
|
||||
</button>
|
||||
</div>
|
||||
<div
|
||||
class="-center"
|
||||
>
|
||||
<span
|
||||
class="-pageInfo"
|
||||
>
|
||||
Page
|
||||
|
||||
<div
|
||||
class="-pageJump"
|
||||
>
|
||||
<input
|
||||
aria-label="jump to page"
|
||||
type="number"
|
||||
value="1"
|
||||
/>
|
||||
</div>
|
||||
|
||||
of
|
||||
|
||||
<span
|
||||
class="-totalPages"
|
||||
>
|
||||
1
|
||||
</span>
|
||||
</span>
|
||||
<span
|
||||
class="select-wrap -pageSizeOptions"
|
||||
>
|
||||
<select
|
||||
aria-label="rows per page"
|
||||
>
|
||||
<option
|
||||
value="5"
|
||||
>
|
||||
5 rows
|
||||
</option>
|
||||
<option
|
||||
value="10"
|
||||
>
|
||||
10 rows
|
||||
</option>
|
||||
<option
|
||||
value="20"
|
||||
>
|
||||
20 rows
|
||||
</option>
|
||||
<option
|
||||
value="25"
|
||||
>
|
||||
25 rows
|
||||
</option>
|
||||
<option
|
||||
value="50"
|
||||
>
|
||||
50 rows
|
||||
</option>
|
||||
<option
|
||||
value="100"
|
||||
>
|
||||
100 rows
|
||||
</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="-next"
|
||||
>
|
||||
<button
|
||||
class="-btn"
|
||||
disabled=""
|
||||
type="button"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="-loading"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -39,6 +39,8 @@ import {
|
|||
filterMap,
|
||||
oneOf,
|
||||
prettyPrintSql,
|
||||
SMALL_TABLE_PAGE_SIZE,
|
||||
SMALL_TABLE_PAGE_SIZE_OPTIONS,
|
||||
stringifyValue,
|
||||
} from '../../../utils';
|
||||
import { BasicAction, basicActionsToMenu } from '../../../utils/basic-action';
|
||||
|
|
@ -396,6 +398,9 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
|
|||
onPageSizeChange={(pageSize, page) => changePagination({ page, pageSize })}
|
||||
sortable={false}
|
||||
ofText={hasMoreResults ? '' : 'of'}
|
||||
defaultPageSize={SMALL_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={SMALL_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={queryResult.rows.length > SMALL_TABLE_PAGE_SIZE}
|
||||
columns={queryResult.header.map((column, i) => {
|
||||
const h = column.name;
|
||||
return {
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@ exports[`segments-view matches snapshot 1`] = `
|
|||
defaultFilterMethod={[Function]}
|
||||
defaultFiltered={Array []}
|
||||
defaultPage={0}
|
||||
defaultPageSize={25}
|
||||
defaultPageSize={50}
|
||||
defaultResized={Array []}
|
||||
defaultSortDesc={false}
|
||||
defaultSortMethod={[Function]}
|
||||
|
|
@ -351,12 +351,9 @@ exports[`segments-view matches snapshot 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
200,
|
||||
]
|
||||
}
|
||||
pageText="Page"
|
||||
|
|
@ -372,7 +369,7 @@ exports[`segments-view matches snapshot 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={false}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
|
|||
|
|
@ -57,6 +57,8 @@ import {
|
|||
QueryManager,
|
||||
QueryState,
|
||||
sqlQueryCustomTableFilter,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../utils';
|
||||
import { BasicAction } from '../../utils/basic-action';
|
||||
|
||||
|
|
@ -167,8 +169,6 @@ export interface SegmentsViewState {
|
|||
}
|
||||
|
||||
export class SegmentsView extends React.PureComponent<SegmentsViewProps, SegmentsViewState> {
|
||||
static PAGE_SIZE = 25;
|
||||
|
||||
static baseQuery(visibleColumns: LocalStorageBackedVisibility) {
|
||||
const columns = compact([
|
||||
visibleColumns.shown('Segment ID') && `"segment_id"`,
|
||||
|
|
@ -376,7 +376,7 @@ END AS "partitioning"`,
|
|||
await Api.instance.get(
|
||||
`/druid/coordinator/v1/datasources/${Api.encodePath(datasourceList[i])}?full`,
|
||||
)
|
||||
).data.segments;
|
||||
).data?.segments;
|
||||
if (!Array.isArray(segments)) continue;
|
||||
|
||||
let segmentQueryResultRows: SegmentQueryResultRow[] = segments.map((segment: any) => {
|
||||
|
|
@ -514,6 +514,9 @@ END AS "partitioning"`,
|
|||
showPageJump={false}
|
||||
ofText=""
|
||||
pivotBy={groupByInterval ? ['interval'] : []}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={segments.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={[
|
||||
{
|
||||
Header: 'Segment ID',
|
||||
|
|
@ -688,7 +691,6 @@ END AS "partitioning"`,
|
|||
Aggregated: () => '',
|
||||
},
|
||||
]}
|
||||
defaultPageSize={SegmentsView.PAGE_SIZE}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -298,12 +298,9 @@ exports[`ServicesView renders data 1`] = `
|
|||
pageJumpText="jump to page"
|
||||
pageSizeOptions={
|
||||
Array [
|
||||
5,
|
||||
10,
|
||||
20,
|
||||
25,
|
||||
50,
|
||||
100,
|
||||
200,
|
||||
]
|
||||
}
|
||||
pageText="Page"
|
||||
|
|
@ -318,7 +315,7 @@ exports[`ServicesView renders data 1`] = `
|
|||
rowsText="rows"
|
||||
showPageJump={true}
|
||||
showPageSizeOptions={true}
|
||||
showPagination={true}
|
||||
showPagination={false}
|
||||
showPaginationBottom={true}
|
||||
showPaginationTop={false}
|
||||
sortable={true}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,8 @@ import {
|
|||
queryDruidSql,
|
||||
QueryManager,
|
||||
QueryState,
|
||||
STANDARD_TABLE_PAGE_SIZE,
|
||||
STANDARD_TABLE_PAGE_SIZE_OPTIONS,
|
||||
} from '../../utils';
|
||||
import { BasicAction } from '../../utils/basic-action';
|
||||
|
||||
|
|
@ -315,10 +317,10 @@ ORDER BY "rank" DESC, "service" DESC`;
|
|||
);
|
||||
};
|
||||
|
||||
const services = servicesState.data;
|
||||
const services = servicesState.data || [];
|
||||
return (
|
||||
<ReactTable
|
||||
data={services || []}
|
||||
data={services}
|
||||
loading={servicesState.loading}
|
||||
noDataText={
|
||||
servicesState.isEmpty() ? 'No historicals' : servicesState.getErrorMessage() || ''
|
||||
|
|
@ -329,7 +331,9 @@ ORDER BY "rank" DESC, "service" DESC`;
|
|||
this.setState({ serviceFilter: filtered });
|
||||
}}
|
||||
pivotBy={groupServicesBy ? [groupServicesBy] : []}
|
||||
defaultPageSize={50}
|
||||
defaultPageSize={STANDARD_TABLE_PAGE_SIZE}
|
||||
pageSizeOptions={STANDARD_TABLE_PAGE_SIZE_OPTIONS}
|
||||
showPagination={services.length > STANDARD_TABLE_PAGE_SIZE}
|
||||
columns={[
|
||||
{
|
||||
Header: 'Service',
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
"rootDirs": ["lib", "src"],
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"useUnknownInCatchVariables": false,
|
||||
"target": "es2016"
|
||||
},
|
||||
"include": ["src/**/*.ts", "src/**/*.tsx", "e2e-tests/**/*.ts"]
|
||||
|
|
|
|||
Loading…
Reference in New Issue