diff --git a/server/pom.xml b/server/pom.xml index 0fe3f075fb50..cefb209e5859 100644 --- a/server/pom.xml +++ b/server/pom.xml @@ -50,6 +50,7 @@ runtime + org.apache.druid druid-console ${project.parent.version} diff --git a/web-console/README.md b/web-console/README.md index 918f7efea79d..4e16369d3436 100644 --- a/web-console/README.md +++ b/web-console/README.md @@ -128,7 +128,7 @@ As part of this directory: - `assets/` - The images (and other assets) used within the console - `e2e-tests/` - End-to-end tests for the console -- `lib/` - A place where some overrides to the react-table stylus files live, this is outside of the normal SCSS build system. +- `lib/` - A place where keywords and generated docs live. - `public/` - The compiled destination for the files powering this console - `script/` - Some helper bash scripts for running this console - `src/` - This directory (together with `lib`) constitutes all the source code for this console diff --git a/web-console/e2e-tests/component/datasources/overview.ts b/web-console/e2e-tests/component/datasources/overview.ts index 660d22cfdf18..fb525811122e 100644 --- a/web-console/e2e-tests/component/datasources/overview.ts +++ b/web-console/e2e-tests/component/datasources/overview.ts @@ -124,7 +124,7 @@ export class DatasourcesOverview { throw new Error(`Could not find datasource: ${datasourceName}`); } - const editActions = await this.page.$$('span[icon=wrench]'); + const editActions = await this.page.$$('.action-cell span[icon=more]'); await editActions[index].click(); await this.waitForPopupMenu(); } diff --git a/web-console/lib/react-table.styl b/web-console/lib/react-table.styl deleted file mode 100644 index 709bd142044c..000000000000 --- a/web-console/lib/react-table.styl +++ /dev/null @@ -1,340 +0,0 @@ -/* - * 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. - */ - -// This is a heavily modified version of the style file originally distributed here: -// https://github.com/react-tools/react-table/blob/master/src/index.styl -// Released originally under the MIT License https://github.com/react-tools/react-table/blob/master/LICENSE - -$easeOutQuad = cubic-bezier(0.250, 0.460, 0.450, 0.940) -$easeOutBack = cubic-bezier(0.175, 0.885, 0.320, 1.275) -$expandSize = 7px -$border-color = alpha(black, 0.15) - -input-select-style() - border: 1px solid rgba(0,0,0,0.1) - background: white - padding: 5px 7px - font-size: inherit - border-radius: 3px - font-weight: normal - outline:none - -.ReactTable - position:relative - display: flex - flex-direction: column - * - box-sizing: border-box - .rt-table - flex: auto 1 - display: flex - flex-direction: column - align-items: stretch - width: 100% - border-collapse: collapse - overflow: auto - - .rt-thead - flex: 1 0 auto - display: flex - flex-direction: column - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - - &.-headerGroups - background: alpha(black, .03) - border-bottom: 1px solid $border-color - - &.-filters - border-bottom: 1px solid $border-color - - //input - //select - // input-select-style(); - - .rt-th - border-right: 1px solid $border-color - - &.-header - box-shadow: 0 1px 0 0 $border-color - - .rt-tr - text-align: left - - .rt-th - .rt-td - padding: 5px 5px - line-height: normal - position: relative - border-right: 1px solid $border-color - transition box-shadow .3s $easeOutBack - box-shadow:inset 0 0 0 0 transparent - &.-sort-asc - box-shadow:inset 0 3px 0 0 #8489A1 - &.-sort-desc - box-shadow:inset 0 -3px 0 0 #8489A1 - &.-cursor-pointer - cursor: pointer - &:last-child - border-right: 0 - - .rt-resizable-header - overflow: visible - &:last-child - overflow: hidden - - .rt-resizable-header-content - overflow: hidden - text-overflow: ellipsis - - .rt-header-pivot - border-right-color: $border-color - - .rt-header-pivot:after, .rt-header-pivot:before - left: 100% - top: 50% - border: solid transparent - content: " " - height: 0 - width: 0 - position: absolute - pointer-events: none - - .rt-header-pivot:after - border-color: rgba(255, 255, 255, 0) - border-left-color: #FFF - border-width: 8px - margin-top: -8px - - .rt-header-pivot:before - border-color: rgba(102, 102, 102, 0) - border-left-color: #f7f7f7 - border-width: 10px - margin-top: -10px - - .rt-tbody - flex: 99999 1 auto - display: flex - flex-direction: column - overflow: auto - // z-index:0 - .rt-tr-group - border-bottom: 1px solid $border-color - &:last-child - border-bottom: 0 - .rt-td - border-right:1px solid $border-color - &:last-child - border-right:0 - .rt-expandable - cursor: pointer - text-overflow: clip - .rt-tr-group - flex: 1 0 auto - display: flex - flex-direction: column - align-items: stretch - .rt-tr - flex: 1 0 auto - display: inline-flex - .rt-th - .rt-td - flex: 1 0 0px - white-space: nowrap - text-overflow: ellipsis - padding: 7px 5px - overflow: hidden - transition: .3s ease - transition-property: width, min-width, padding, opacity - - &.-hidden - width: 0 !important - min-width: 0 !important - padding: 0 !important - border:0 !important - opacity: 0 !important - - .rt-expander - display: inline-block - position:relative - margin: 0 - color: transparent - margin: 0 10px - &:after - content: '' - position: absolute - width: 0 - height: 0 - top:50% - left:50% - transform: translate(-50%, -50%) rotate(-90deg) - border-left: ($expandSize * .72) solid transparent - border-right: ($expandSize * .72) solid transparent - border-top: $expandSize solid alpha(white, .8) - transition: all .3s $easeOutBack - cursor: pointer - &.-open:after - transform: translate(-50%, -50%) rotate(0deg) - - .rt-resizer - display: inline-block - position: absolute - width: 36px - top: 0 - bottom: 0 - right: -18px - cursor: col-resize - z-index: 10 - - .rt-tfoot - flex: 1 0 auto - display: flex - flex-direction: column - box-shadow: 0 0px 15px 0px alpha(black, 0) - - .rt-td - border-right:1px solid $border-color - &:last-child - border-right:0 - - &.-striped - .rt-tr.-odd - background: alpha(white, .025) - &.-highlight - .rt-tbody - .rt-tr:not(.-padRow):hover - background: alpha(black, .05) - - .-pagination - z-index: 1 - display:flex - justify-content: space-between - align-items: stretch - flex-wrap: wrap - padding: 3px - border-top: 1px solid $border-color - - input - select - input-select-style() - - .-btn - appearance:none - display:block - width:100% - height:100% - border: 0 - border-radius: 3px - padding: 6px - font-size: 1em - color: alpha(black, .6) - background: alpha(black, .1) - transition: all .1s ease - cursor: pointer - outline:none - - &[disabled] - opacity: .5 - cursor: default - - &:not([disabled]):hover - background: alpha(black, .3) - color: white - - .-previous - .-next - flex: 1 - text-align: center - - .-center - flex: 1.5 - text-align:center - margin-bottom:0 - display: flex - flex-direction: row - flex-wrap: wrap - align-items: center - justify-content: space-around - - .-pageInfo - display: inline-block - margin: 3px 10px - white-space: nowrap - - .-pageJump - display:inline-block - input - width: 70px - text-align:center - - .-pageSizeOptions - margin: 3px 10px - - .rt-noData - display:block - position:absolute - left:50% - top:40% - transform: translate(-50%, -50%) - background: alpha(black, .4) - transition: all .3s ease - z-index: 1 - padding: 20px - color: alpha(white, .5) - border-radius: 5px - - .-loading - display:block - position:absolute - left:0 - right:0 - top:0 - bottom:0 - background: alpha(#4c4c4c, .8) - transition: all .3s ease - z-index: -1 - opacity: 0 - pointer-events: none - - > div - position:absolute - display: block - text-align:center - width:100% - top:50% - left: 0 - font-size: 15px - color: alpha(black, .6) - transform: translateY(-52%) - transition: all .3s $easeOutQuad - - &.-active - opacity: 1 - z-index: 2 - pointer-events: all - > div - transform: translateY(50%) - - .rt-resizing - .rt-th - .rt-td - transition: none!important - cursor: col-resize - user-select none diff --git a/web-console/package-lock.json b/web-console/package-lock.json index 64b73c39c68f..95b3c0149b46 100644 --- a/web-console/package-lock.json +++ b/web-console/package-lock.json @@ -7762,26 +7762,6 @@ "which": "^1.2.9" } }, - "css": { - "version": "2.2.4", - "resolved": "https://registry.npmjs.org/css/-/css-2.2.4.tgz", - "integrity": "sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==", - "dev": true, - "requires": { - "inherits": "^2.0.3", - "source-map": "^0.6.1", - "source-map-resolve": "^0.5.2", - "urix": "^0.1.0" - }, - "dependencies": { - "source-map": { - "version": "0.6.1", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz", - "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==", - "dev": true - } - } - }, "css-blank-pseudo": { "version": "0.1.4", "resolved": "https://registry.npmjs.org/css-blank-pseudo/-/css-blank-pseudo-0.1.4.tgz", @@ -7980,15 +7960,6 @@ } } }, - "css-parse": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/css-parse/-/css-parse-2.0.0.tgz", - "integrity": "sha1-pGjuZnwW2BzPBcWMONKpfHgNv9Q=", - "dev": true, - "requires": { - "css": "^2.0.0" - } - }, "css-prefers-color-scheme": { "version": "3.1.1", "resolved": "https://registry.npmjs.org/css-prefers-color-scheme/-/css-prefers-color-scheme-3.1.1.tgz", @@ -19734,12 +19705,6 @@ "neo-async": "^2.6.2" } }, - "sax": { - "version": "1.2.4", - "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz", - "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==", - "dev": true - }, "saxes": { "version": "5.0.1", "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz", @@ -21512,36 +21477,6 @@ "postcss-value-parser": "^4.1.0" } }, - "stylus": { - "version": "0.54.7", - "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.54.7.tgz", - "integrity": "sha512-Yw3WMTzVwevT6ZTrLCYNHAFmanMxdylelL3hkWNgPMeTCpMwpV3nXjpOHuBXtFv7aiO2xRuQS6OoAdgkNcSNug==", - "dev": true, - "requires": { - "css-parse": "~2.0.0", - "debug": "~3.1.0", - "glob": "^7.1.3", - "mkdirp": "~0.5.x", - "safer-buffer": "^2.1.2", - "sax": "~1.2.4", - "semver": "^6.0.0", - "source-map": "^0.7.3" - }, - "dependencies": { - "semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true - }, - "source-map": { - "version": "0.7.3", - "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz", - "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==", - "dev": true - } - } - }, "sugarss": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/sugarss/-/sugarss-2.0.0.tgz", diff --git a/web-console/package.json b/web-console/package.json index f9cdf7f8cf99..ce59e3f39eaa 100644 --- a/web-console/package.json +++ b/web-console/package.json @@ -163,7 +163,6 @@ "snarkdown": "^2.0.0", "style-loader": "^2.0.0", "stylelint": "^13.12.0", - "stylus": "^0.54.7", "ts-jest": "^27.1.3", "ts-loader": "^8.1.0", "ts-node": "^8.4.1", diff --git a/web-console/script/build b/web-console/script/build index 95877202ae1b..0d83cd29fc42 100755 --- a/web-console/script/build +++ b/web-console/script/build @@ -21,9 +21,6 @@ set -e echo "Adding SQL docs..." ./script/create-sql-docs.js -echo "Transpiling ReactTable CSS..." -./node_modules/.bin/stylus lib/react-table.styl -o lib/react-table.css - # add BUNDLE_ANALYZER_PLUGIN='TRUE' here to enable webpack-bundle-analyzer as a plugin echo "Webpacking everything..." NODE_ENV=production ./node_modules/.bin/webpack -c webpack.config.js --mode=production diff --git a/web-console/script/druid b/web-console/script/druid index 064290bdca53..192d43281d69 100755 --- a/web-console/script/druid +++ b/web-console/script/druid @@ -110,7 +110,7 @@ function start() { echo "$pid" > "$DRUID_PID_FILE" _log "Druid started with pid ${pid}" - _wait_for_200_response "http://localhost:8888/unified-console.html" 3 20 + _wait_for_200_response "http://localhost:8888/unified-console.html" 3 30 } function stop() { diff --git a/web-console/src/bootstrap/react-table-custom-pagination.tsx b/web-console/src/bootstrap/react-table-custom-pagination.tsx deleted file mode 100644 index bcc900f130c5..000000000000 --- a/web-console/src/bootstrap/react-table-custom-pagination.tsx +++ /dev/null @@ -1,164 +0,0 @@ -/* - * 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 { Button, Classes, HTMLSelect } from '@blueprintjs/core'; -import React from 'react'; - -import './react-table-custom-pagination.scss'; - -interface ReactTableCustomPaginationProps { - pages: number; - page: number; - showPageSizeOptions: boolean; - pageSizeOptions: number[]; - pageSize: number; - showPageJump: boolean; - canPrevious: boolean; - canNext: boolean; - onPageSizeChange: any; - previousText: string; - nextText: string; - onPageChange: any; - ofText: string; - pageText: string; - rowsText: string; - style: Record; -} - -interface ReactTableCustomPaginationState { - tempPage?: string; -} - -export class ReactTableCustomPagination extends React.PureComponent< - ReactTableCustomPaginationProps, - ReactTableCustomPaginationState -> { - constructor(props: ReactTableCustomPaginationProps) { - super(props); - - this.state = {}; - } - - 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); - } - }; - - private readonly applyTempPage = (e: any) => { - if (e) { - e.preventDefault(); - } - const { tempPage } = this.state; - if (!tempPage) return; - this.setState({ tempPage: undefined }); - this.changePage(parseInt(tempPage, 10) - 1); - }; - - render(): JSX.Element { - const { - pages, - page, - showPageSizeOptions, - pageSizeOptions, - pageSize, - showPageJump, - canPrevious, - canNext, - onPageSizeChange, - style, - previousText, - nextText, - ofText, - pageText, - rowsText, - } = this.props; - const { tempPage } = this.state; - - return ( -
-
- -
-
- - {pageText}{' '} - {showPageJump ? ( -
- { - const val: string = e.target.value; - this.setState({ - tempPage: val, - }); - }} - value={tempPage || String(page + 1)} - onBlur={this.applyTempPage} - onKeyPress={e => { - if (e.key === 'Enter') { - this.applyTempPage(e); - } - }} - /> -
- ) : ( - {page + 1} - )}{' '} - {ofText} {pages || 1} - - {showPageSizeOptions && ( - - onPageSizeChange(Number(e.target.value))} value={pageSize}> - {pageSizeOptions.map((option: any, i: number) => ( - - ))} - - - )} -
-
- -
-
- ); - } -} diff --git a/web-console/src/bootstrap/react-table-defaults.tsx b/web-console/src/bootstrap/react-table-defaults.tsx index 7cb6e11ce911..9058b95839d0 100644 --- a/web-console/src/bootstrap/react-table-defaults.tsx +++ b/web-console/src/bootstrap/react-table-defaults.tsx @@ -20,9 +20,13 @@ import React from 'react'; import { Filter, ReactTableDefaults } from 'react-table'; import { Loader } from '../components'; -import { booleanCustomTableFilter, countBy, makeTextFilter } from '../utils'; - -import { ReactTableCustomPagination } from './react-table-custom-pagination'; +import { + booleanCustomTableFilter, + DEFAULT_TABLE_CLASS_NAME, + GenericFilterInput, + ReactTablePagination, +} from '../react-table'; +import { countBy } from '../utils'; const NoData = React.memo(function NoData(props) { const { children } = props; @@ -32,7 +36,7 @@ const NoData = React.memo(function NoData(props) { export function bootstrapReactTable() { Object.assign(ReactTableDefaults, { - className: '-striped -highlight', + className: DEFAULT_TABLE_CLASS_NAME, defaultFilterMethod: (filter: Filter, row: any) => { const id = filter.pivotId || filter.id; return booleanCustomTableFilter(filter, row[id]); @@ -40,8 +44,8 @@ export function bootstrapReactTable() { LoadingComponent: Loader, loadingText: '', NoDataComponent: NoData, - FilterComponent: makeTextFilter(), - PaginationComponent: ReactTableCustomPagination, + FilterComponent: GenericFilterInput, + PaginationComponent: ReactTablePagination, AggregatedComponent: function Aggregated(opt: any) { const { subRows, column } = opt; const previewValues = subRows diff --git a/web-console/src/components/action-cell/action-cell.scss b/web-console/src/components/action-cell/action-cell.scss index 52838723edd9..722ca8929667 100644 --- a/web-console/src/components/action-cell/action-cell.scss +++ b/web-console/src/components/action-cell/action-cell.scss @@ -16,7 +16,11 @@ * limitations under the License. */ +@import '../../variables'; + .action-cell { + padding: $table-cell-v-padding $table-cell-h-padding; + & > * { margin-right: 10px; diff --git a/web-console/src/components/action-cell/action-cell.tsx b/web-console/src/components/action-cell/action-cell.tsx index 9863e616aabb..0433eca2b08c 100644 --- a/web-console/src/components/action-cell/action-cell.tsx +++ b/web-console/src/components/action-cell/action-cell.tsx @@ -44,7 +44,7 @@ export const ActionCell = React.memo(function ActionCell(props: ActionCellProps) {onDetail && } {actionsMenu && ( - + )} diff --git a/web-console/src/components/braced-text/braced-text.tsx b/web-console/src/components/braced-text/braced-text.tsx index 8dd6cf54cc6b..7416653d9838 100644 --- a/web-console/src/components/braced-text/braced-text.tsx +++ b/web-console/src/components/braced-text/braced-text.tsx @@ -16,6 +16,7 @@ * limitations under the License. */ +import classNames from 'classnames'; import { max } from 'd3-array'; import React, { Fragment } from 'react'; @@ -24,6 +25,7 @@ import './braced-text.scss'; const THOUSANDS_SEPARATOR = ','; // Maybe one day make this locale aware export interface BracedTextProps { + className?: string; text: string; braces: string[]; padFractionalPart?: boolean; @@ -80,7 +82,7 @@ function hideThousandsSeparator(text: string) { } export const BracedText = React.memo(function BracedText(props: BracedTextProps) { - const { text, braces, padFractionalPart, unselectableThousandsSeparator } = props; + const { className, text, braces, padFractionalPart, unselectableThousandsSeparator } = props; let effectiveBraces = braces.concat(text); @@ -110,7 +112,7 @@ export const BracedText = React.memo(function BracedText(props: BracedTextProps) } return ( - + {findMostNumbers(effectiveBraces)} {unselectableThousandsSeparator ? hideThousandsSeparator(text) : text} 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 index 1a711fc298c3..dca59389af97 100644 --- 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 @@ -67,10 +67,14 @@ exports[`DatasourceColumnsTable matches snapshot on error 1`] = ` Object { "Header": "Column name", "accessor": "COLUMN_NAME", + "className": "padded", + "width": 300, }, Object { "Header": "Data type", "accessor": "DATA_TYPE", + "className": "padded", + "width": 200, }, ] } @@ -224,10 +228,14 @@ exports[`DatasourceColumnsTable matches snapshot on init 1`] = ` Object { "Header": "Column name", "accessor": "COLUMN_NAME", + "className": "padded", + "width": 300, }, Object { "Header": "Data type", "accessor": "DATA_TYPE", + "className": "padded", + "width": 200, }, ] } @@ -393,10 +401,14 @@ exports[`DatasourceColumnsTable matches snapshot on no data 1`] = ` Object { "Header": "Column name", "accessor": "COLUMN_NAME", + "className": "padded", + "width": 300, }, Object { "Header": "Data type", "accessor": "DATA_TYPE", + "className": "padded", + "width": 200, }, ] } @@ -550,10 +562,14 @@ exports[`DatasourceColumnsTable matches snapshot on some data 1`] = ` Object { "Header": "Column name", "accessor": "COLUMN_NAME", + "className": "padded", + "width": 300, }, Object { "Header": "Data type", "accessor": "DATA_TYPE", + "className": "padded", + "width": 200, }, ] } 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 index bd4149aa081c..007e54919be5 100644 --- a/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx +++ b/web-console/src/components/datasource-columns-table/datasource-columns-table.tsx @@ -21,12 +21,8 @@ import React from 'react'; import ReactTable from 'react-table'; import { useQueryManager } from '../../hooks'; -import { - ColumnMetadata, - queryDruidSql, - SMALL_TABLE_PAGE_SIZE, - SMALL_TABLE_PAGE_SIZE_OPTIONS, -} from '../../utils'; +import { SMALL_TABLE_PAGE_SIZE, SMALL_TABLE_PAGE_SIZE_OPTIONS } from '../../react-table'; +import { ColumnMetadata, queryDruidSql } from '../../utils'; import { Loader } from '../loader/loader'; import './datasource-columns-table.scss'; @@ -67,10 +63,14 @@ export const DatasourceColumnsTable = React.memo(function DatasourceColumnsTable { Header: 'Column name', accessor: 'COLUMN_NAME', + width: 300, + className: 'padded', }, { Header: 'Data type', accessor: 'DATA_TYPE', + width: 200, + className: 'padded', }, ]} noDataText={columnsState.getErrorMessage() || 'No column data found'} diff --git a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap index bfd6aa4c3daa..b3943e556a92 100644 --- a/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap +++ b/web-console/src/components/header-bar/__snapshots__/header-bar.spec.tsx.snap @@ -76,6 +76,7 @@ exports[`HeaderBar matches snapshot 1`] = ` "queryType": "nativeAndSql", } } + onUnrestrict={[Function]} /> { it('matches snapshot', () => { - const headerBar = shallow(); + const headerBar = shallow( + {}} />, + ); expect(headerBar).toMatchSnapshot(); }); }); diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx index 217ff807571f..53042d91a22d 100644 --- a/web-console/src/components/header-bar/header-bar.tsx +++ b/web-console/src/components/header-bar/header-bar.tsx @@ -85,10 +85,11 @@ const DruidLogo = React.memo(function DruidLogo() { interface RestrictedModeProps { capabilities: Capabilities; + onUnrestrict(capabilities: Capabilities): void; } const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeProps) { - const { capabilities } = props; + const { capabilities, onUnrestrict } = props; const mode = capabilities.getModeExtended(); let label: string; @@ -136,7 +137,8 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP

It appears that you are accessing the console on the Coordinator/Overlord shared service. Due to the lack of access to some APIs on this service the console will operate in a - limited mode. The full version of the console can be accessed on the Router service. + limited mode. The unrestricted version of the console can be accessed on the Router + service.

); break; @@ -157,8 +159,8 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP message = (

It appears that you are accessing the console on the Overlord service. Due to the lack of - access to some APIs on this service the console will operate in a limited mode. The full - version of the console can be accessed on the Router service. + access to some APIs on this service the console will operate in a limited mode. The + unrestricted version of the console can be accessed on the Router service.

); break; @@ -168,7 +170,8 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP message = (

Due to the lack of access to some APIs on this service the console will operate in a - limited mode. The full version of the console can be accessed on the Router service. + limited mode. The unrestricted version of the console can be accessed on the Router + service.

); break; @@ -187,6 +190,27 @@ const RestrictedMode = React.memo(function RestrictedMode(props: RestrictedModeP .

+

+ It is possible that there is an issue with the capability detection. You can enable the + unrestricted console but certain features might not work if the underlying APIs are not + available. +

+

+