Web console: refresh and tighten up the console styles 💅💫 (#10515)

* no hardcoded dark mode

* update blueprint

* style pass

* add open sans font

* fix public path

* update licenses

* add comment

* allow zero bsd

* add new lines

* update tests

* remove default mods

* use variables

* fix background

* fix query init style

* pad fracional part

* paginate braces

* update to latest blueprint, fix column tree

* Smart query limit -> Auto limit

* adjust gutter color for dark mode

* fix spelling

* update snapshot

Co-authored-by: asherbitter <ofir@imply.io>
This commit is contained in:
Vadim Ogievetsky 2020-10-20 22:11:29 -07:00 committed by GitHub
parent 04546b65ec
commit f391e89653
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
86 changed files with 1823 additions and 669 deletions

View File

@ -4495,7 +4495,7 @@ license_category: binary
module: web-console
license_name: Apache License version 2.0
copyright: Palantir Technologies
version: 3.19.1
version: 3.33.0
---
@ -4504,7 +4504,7 @@ license_category: binary
module: web-console
license_name: Apache License version 2.0
copyright: Palantir Technologies
version: 3.14.0
version: 3.19.2
---
@ -4513,7 +4513,7 @@ license_category: binary
module: web-console
license_name: Apache License version 2.0
copyright: Palantir Technologies
version: 3.11.0
version: 3.22.0
---
@ -4687,6 +4687,26 @@ license_file_path: licenses/bin/debug.MIT
---
name: "deep-equal"
license_category: binary
module: web-console
license_name: MIT License
copyright: James Halliday
version: 1.1.1
license_file_path: licenses/bin/deep-equal.MIT
---
name: "define-properties"
license_category: binary
module: web-console
license_name: MIT License
copyright: Jordan Harband
version: 1.1.3
license_file_path: licenses/bin/define-properties.MIT
---
name: "diff-match-patch"
license_category: binary
module: web-console
@ -4745,6 +4765,26 @@ license_file_path: licenses/bin/follow-redirects.MIT
---
name: "fontsource-open-sans"
license_category: binary
module: web-console
license_name: MIT License
copyright: Lotus
version: 3.0.9
license_file_path: licenses/bin/fontsource-open-sans.MIT
---
name: "function-bind"
license_category: binary
module: web-console
license_name: MIT License
copyright: Raynos
version: 1.1.1
license_file_path: licenses/bin/function-bind.MIT
---
name: "gud"
license_category: binary
module: web-console
@ -4765,6 +4805,16 @@ license_file_path: licenses/bin/has-own-prop.MIT
---
name: "has"
license_category: binary
module: web-console
license_name: MIT License
copyright: Thiago de Arruda
version: 1.0.3
license_file_path: licenses/bin/has.MIT
---
name: "history"
license_category: binary
module: web-console
@ -4795,6 +4845,16 @@ license_file_path: licenses/bin/hoist-non-react-statics.BSD3
---
name: "is-arguments"
license_category: binary
module: web-console
license_name: MIT License
copyright: Jordan Harband
version: 1.0.4
license_file_path: licenses/bin/is-arguments.MIT
---
name: "is-buffer"
license_category: binary
module: web-console
@ -4805,6 +4865,26 @@ license_file_path: licenses/bin/is-buffer.MIT
---
name: "is-date-object"
license_category: binary
module: web-console
license_name: MIT License
copyright: Jordan Harband
version: 1.0.1
license_file_path: licenses/bin/is-date-object.MIT
---
name: "is-regex"
license_category: binary
module: web-console
license_name: MIT License
copyright: Jordan Harband
version: 1.0.4
license_file_path: licenses/bin/is-regex.MIT
---
name: "isarray"
license_category: binary
module: web-console
@ -4935,6 +5015,35 @@ license_file_path: licenses/bin/object-assign.MIT
---
name: "object-is"
license_category: binary
module: web-console
license_name: MIT License
copyright: Jordan Harband
version: 1.0.1
license_file_path: licenses/bin/object-is.MIT
---
name: "object-keys"
license_category: binary
module: web-console
license_name: MIT License
copyright: Jordan Harband
version: 1.1.1
license_file_path: licenses/bin/object-keys.MIT
---
name: "opensans"
license_category: binary
module: web-console
license_name: Apache License version 2.0
copyright: Google
version: 1.101.0
---
name: "path-to-regexp"
license_category: binary
module: web-console
@ -4950,7 +5059,7 @@ license_category: binary
module: web-console
license_name: MIT License
copyright: Federico Zivolo
version: 1.15.0
version: 1.16.1
license_file_path: licenses/bin/popper.js.MIT
---
@ -4980,7 +5089,7 @@ license_category: binary
module: web-console
license_name: MIT License
copyright: Giampaolo Bellavite
version: 7.4.0
version: 7.4.8
license_file_path: licenses/bin/react-day-picker.MIT
---
@ -5020,7 +5129,7 @@ license_category: binary
module: web-console
license_name: MIT License
copyright: Travis Arnold
version: 1.3.4
version: 1.3.7
license_file_path: licenses/bin/react-popper.MIT
---
@ -5095,6 +5204,16 @@ license_file_path: licenses/bin/regenerator-runtime.MIT
---
name: "regexp.prototype.flags"
license_category: binary
module: web-console
license_name: MIT License
copyright: Jordan Harband
version: 1.2.0
license_file_path: licenses/bin/regexp.prototype.flags.MIT
---
name: "resize-observer-polyfill"
license_category: binary
module: web-console

View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2012, 2013, 2014 James Halliday <mail@substack.net>, 2009 Thomas Robinson <280north.com>
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (C) 2015 Jordan Harband
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Lotus
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@ -0,0 +1,20 @@
Copyright (c) 2013 Raynos.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

22
licenses/bin/has.MIT Normal file
View File

@ -0,0 +1,22 @@
Copyright (c) 2013 Thiago de Arruda
Permission is hereby granted, free of charge, to any person
obtaining a copy of this software and associated documentation
files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use,
copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the
Software is furnished to do so, subject to the following
conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2014 Jordan Harband
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,22 @@
The MIT License (MIT)
Copyright (c) 2015 Jordan Harband
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

20
licenses/bin/is-regex.MIT Normal file
View File

@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2014 Jordan Harband
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2014 Jordan Harband
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (C) 2013 Jordan Harband
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

View File

@ -0,0 +1,21 @@
The MIT License (MIT)
Copyright (C) 2014 Jordan Harband
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.6 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -23,6 +23,7 @@
$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)
@ -37,7 +38,6 @@ input-select-style()
position:relative
display: flex
flex-direction: column
border: 1px solid alpha(black, .1)
*
box-sizing: border-box
.rt-table
@ -60,20 +60,20 @@ input-select-style()
&.-headerGroups
background: alpha(black, .03)
border-bottom: 1px solid alpha(black, .05)
border-bottom: 1px solid $border-color
&.-filters
border-bottom: 1px solid alpha(black, 0.05)
border-bottom: 1px solid $border-color
//input
//select
// input-select-style();
.rt-th
border-right: 1px solid alpha(black, 0.02)
border-right: 1px solid $border-color
&.-header
box-shadow: 0 2px 15px 0px alpha(black, .15)
box-shadow: 0 1px 0 0 $border-color
.rt-tr
text-align: left
@ -83,13 +83,13 @@ input-select-style()
padding: 5px 5px
line-height: normal
position: relative
border-right: 1px solid alpha(black, .05)
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 alpha(white, .6)
box-shadow:inset 0 3px 0 0 #8489A1
&.-sort-desc
box-shadow:inset 0 -3px 0 0 alpha(white, .6)
box-shadow:inset 0 -3px 0 0 #8489A1
&.-cursor-pointer
cursor: pointer
&:last-child
@ -105,7 +105,7 @@ input-select-style()
text-overflow: ellipsis
.rt-header-pivot
border-right-color: #f7f7f7
border-right-color: $border-color
.rt-header-pivot:after, .rt-header-pivot:before
left: 100%
@ -136,11 +136,11 @@ input-select-style()
overflow: auto
// z-index:0
.rt-tr-group
border-bottom: solid 1px alpha(black, .05)
border-bottom: 1px solid $border-color
&:last-child
border-bottom: 0
.rt-td
border-right:1px solid alpha(black, .02)
border-right:1px solid $border-color
&:last-child
border-right:0
.rt-expandable
@ -207,16 +207,16 @@ input-select-style()
flex: 1 0 auto
display: flex
flex-direction: column
box-shadow: 0 0px 15px 0px alpha(black, .15)
box-shadow: 0 0px 15px 0px alpha(black, 0)
.rt-td
border-right:1px solid alpha(black, .05)
border-right:1px solid $border-color
&:last-child
border-right:0
&.-striped
.rt-tr.-odd
background: alpha(white, .03)
background: alpha(white, .025)
&.-highlight
.rt-tbody
.rt-tr:not(.-padRow):hover
@ -229,8 +229,7 @@ input-select-style()
align-items: stretch
flex-wrap: wrap
padding: 3px
box-shadow: 0 0px 15px 0px alpha(black, .1)
border-top: 2px solid alpha(black, .1)
border-top: 1px solid $border-color
input
select

View File

@ -967,61 +967,62 @@
}
},
"@blueprintjs/core": {
"version": "3.19.1",
"resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-3.19.1.tgz",
"integrity": "sha512-O+p/Jbu9kyrTE4Yy5phd7Xp9NJoiHCQ9ycO+QSR2fiuhwnVMO1xjY269QXxylzEswgPyjhST1euqHpyQQ7qnUw==",
"version": "3.33.0",
"resolved": "https://registry.npmjs.org/@blueprintjs/core/-/core-3.33.0.tgz",
"integrity": "sha512-9gccauo44DsrW8IP75Qy7rKrRv3sgOTvs2Lv2DIEH9f+WZQjj37x+3bfiGKrzeWWRS5P1vP1uSgn89P/JZrD8w==",
"requires": {
"@blueprintjs/icons": "^3.11.0",
"@blueprintjs/icons": "^3.22.0",
"@types/dom4": "^2.0.1",
"classnames": "^2.2",
"dom4": "^2.1.5",
"normalize.css": "^8.0.1",
"popper.js": "^1.15.0",
"popper.js": "^1.16.1",
"react-lifecycles-compat": "^3.0.4",
"react-popper": "^1.3.3",
"react-popper": "^1.3.7",
"react-transition-group": "^2.9.0",
"resize-observer-polyfill": "^1.5.1",
"tslib": "~1.9.0"
"tslib": "~1.13.0"
},
"dependencies": {
"tslib": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
"integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
}
}
},
"@blueprintjs/datetime": {
"version": "3.14.0",
"resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-3.14.0.tgz",
"integrity": "sha512-NfCiV19zMPWZ7kcx1A2OympSLy7vp8wFrhMaMAKK6R+ndTUuEDZi3Z5NxoyX2jBJ71F9nhWYFjH1nQVOn/eDaw==",
"version": "3.19.2",
"resolved": "https://registry.npmjs.org/@blueprintjs/datetime/-/datetime-3.19.2.tgz",
"integrity": "sha512-jqPTrmoe5yPPW9r8R0q5XTxue+w1ue3cDViHWO6l5Cu9UvqNnzB9pRX7G1K8llshbMx4vaiUEK77bgo75TF+RA==",
"requires": {
"@blueprintjs/core": "^3.19.0",
"@blueprintjs/core": "^3.33.0",
"classnames": "^2.2",
"react-day-picker": "^7.3.2",
"tslib": "~1.9.0"
"react-day-picker": "7.4.8",
"react-lifecycles-compat": "^3.0.4",
"tslib": "~1.13.0"
},
"dependencies": {
"tslib": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
"integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
}
}
},
"@blueprintjs/icons": {
"version": "3.11.0",
"resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-3.11.0.tgz",
"integrity": "sha512-HGS652gFc057t9cr8NyuWFyZ1gcSqG3uuexpzhZm81W35hGfh9vdC9GR+mbHJNawAuKXtu+xw4VWWkv1UGQ0Vg==",
"version": "3.22.0",
"resolved": "https://registry.npmjs.org/@blueprintjs/icons/-/icons-3.22.0.tgz",
"integrity": "sha512-clfdwRQlzqs2sDxjwQr4p10Z3bGNTnqpsLgN+4TN1ECf7plEEukhvQh6YK/Lfd5xDhEBEEZ/YQCawZbyAYjfXg==",
"requires": {
"classnames": "^2.2",
"tslib": "~1.9.0"
"tslib": "~1.13.0"
},
"dependencies": {
"tslib": {
"version": "1.9.3",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.9.3.tgz",
"integrity": "sha512-4krF8scpejhaOgqzBEcGM7yDIEfi0/8+8zDRZhNZZ2kjmHJ4hv3zCbQWxoJGz1iw5U0Jl0nma13xzHXcncMavQ=="
"version": "1.13.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz",
"integrity": "sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q=="
}
}
},
@ -1469,6 +1470,12 @@
"integrity": "sha512-yALhelO3i0hqZwhjtcr6dYyaLoCHbAMshwtj6cGxTvHZAKXHsYGdff6E8EPw3xLKY0ELUTQ69Q1rQiJENnccMA==",
"dev": true
},
"@types/json-schema": {
"version": "7.0.6",
"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.6.tgz",
"integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==",
"dev": true
},
"@types/lodash": {
"version": "4.14.136",
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.136.tgz",
@ -3966,7 +3973,6 @@
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
"integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
"dev": true,
"requires": {
"object-keys": "^1.0.12"
}
@ -5052,6 +5058,85 @@
"flat-cache": "^2.0.1"
}
},
"file-loader": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/file-loader/-/file-loader-6.1.1.tgz",
"integrity": "sha512-Klt8C4BjWSXYQAfhpYYkG4qHNTna4toMHEbWrI5IuVoxbU6uiDKeKAP99R8mmbJi3lvewn/jQBOgU4+NS3tDQw==",
"dev": true,
"requires": {
"loader-utils": "^2.0.0",
"schema-utils": "^3.0.0"
},
"dependencies": {
"ajv": {
"version": "6.12.6",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
"integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
"dev": true,
"requires": {
"fast-deep-equal": "^3.1.1",
"fast-json-stable-stringify": "^2.0.0",
"json-schema-traverse": "^0.4.1",
"uri-js": "^4.2.2"
}
},
"ajv-keywords": {
"version": "3.5.2",
"resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
"integrity": "sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==",
"dev": true
},
"emojis-list": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/emojis-list/-/emojis-list-3.0.0.tgz",
"integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
"dev": true
},
"fast-deep-equal": {
"version": "3.1.3",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
"integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
"dev": true
},
"json5": {
"version": "2.1.3",
"resolved": "https://registry.npmjs.org/json5/-/json5-2.1.3.tgz",
"integrity": "sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==",
"dev": true,
"requires": {
"minimist": "^1.2.5"
}
},
"loader-utils": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.0.tgz",
"integrity": "sha512-rP4F0h2RaWSvPEkD7BLDFQnvSf+nK+wr3ESUjNTyAGobqrijmW92zc+SO6d4p4B1wh7+B/Jg1mkQe5NYUEHtHQ==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^2.1.2"
}
},
"minimist": {
"version": "1.2.5",
"resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
"integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
"dev": true
},
"schema-utils": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-3.0.0.tgz",
"integrity": "sha512-6D82/xSzO094ajanoOSbe4YvXWMfn2A//8Y1+MUqFAJul5Bs+yn36xbK9OtNDcRVSBJ9jjeoXftM6CfztsjOAA==",
"dev": true,
"requires": {
"@types/json-schema": "^7.0.6",
"ajv": "^6.12.5",
"ajv-keywords": "^3.5.2"
}
}
}
},
"file-saver": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/file-saver/-/file-saver-2.0.2.tgz",
@ -5217,6 +5302,11 @@
"debug": "=3.1.0"
}
},
"fontsource-open-sans": {
"version": "3.0.9",
"resolved": "https://registry.npmjs.org/fontsource-open-sans/-/fontsource-open-sans-3.0.9.tgz",
"integrity": "sha512-NEgZAgtpvz7iYZ/IlojOOy6hRLaLmxnxzEKYXnq0KU/X8lb9cD7d0XImykhfksK1/JZ6xyKQKjYq4PycHQZK9w=="
},
"for-in": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
@ -5927,8 +6017,7 @@
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
"dev": true
"integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A=="
},
"function.prototype.name": {
"version": "1.1.1",
@ -6242,7 +6331,6 @@
"version": "1.0.3",
"resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
"integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
"dev": true,
"requires": {
"function-bind": "^1.1.1"
}
@ -6842,8 +6930,7 @@
"is-arguments": {
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz",
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA==",
"dev": true
"integrity": "sha512-xPh0Rmt8NE65sNzvyUmWgI1tz3mKq74lGA0mL8LYZcoIzKOzDh6HmrYm3d18k60nHerC8A9Km8kYu87zfSFnLA=="
},
"is-arrayish": {
"version": "0.2.1",
@ -6915,8 +7002,7 @@
"is-date-object": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.1.tgz",
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY=",
"dev": true
"integrity": "sha1-mqIOtq7rv/d/vTPnTKAbM1gdOhY="
},
"is-decimal": {
"version": "1.0.3",
@ -7075,7 +7161,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.0.4.tgz",
"integrity": "sha1-VRdIm1RwkbCTDglWVM7SXul+lJE=",
"dev": true,
"requires": {
"has": "^1.0.1"
}
@ -9236,14 +9321,12 @@
"object-is": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/object-is/-/object-is-1.0.1.tgz",
"integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY=",
"dev": true
"integrity": "sha1-CqYOyZiaCz7Xlc9NBvYs8a1lObY="
},
"object-keys": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
"dev": true
"integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA=="
},
"object-visit": {
"version": "1.0.1",
@ -9885,9 +9968,9 @@
"dev": true
},
"popper.js": {
"version": "1.15.0",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.15.0.tgz",
"integrity": "sha512-w010cY1oCUmI+9KwwlWki+r5jxKfTFDVoadl7MSrIujHU5MJ5OR6HTDj6Xo8aoR/QsA56x8jKjA59qGH4ELtrA=="
"version": "1.16.1",
"resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
"integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
},
"portfinder": {
"version": "1.0.25",
@ -10894,9 +10977,9 @@
}
},
"react-day-picker": {
"version": "7.4.0",
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-7.4.0.tgz",
"integrity": "sha512-dqfr96EY7mHSpbW23hJI6of2JvxClDfHLNQ7VqctxBvNsJIzEiwh3zS8hEhqNza7xuR0vC4KN517zxndgb3/fw==",
"version": "7.4.8",
"resolved": "https://registry.npmjs.org/react-day-picker/-/react-day-picker-7.4.8.tgz",
"integrity": "sha512-pp0hnxFVoRuBQcRdR1Hofw4CQtOCGVmzCNrscyvS0Q8NEc+UiYLEDqE5dk37bf0leSnBW4lheIt0CKKhuKzDVw==",
"requires": {
"prop-types": "^15.6.2"
}
@ -10934,16 +11017,32 @@
"integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA=="
},
"react-popper": {
"version": "1.3.4",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.4.tgz",
"integrity": "sha512-9AcQB29V+WrBKk6X7p0eojd1f25/oJajVdMZkywIoAV6Ag7hzE1Mhyeup2Q1QnvFRtGQFQvtqfhlEoDAPfKAVA==",
"version": "1.3.7",
"resolved": "https://registry.npmjs.org/react-popper/-/react-popper-1.3.7.tgz",
"integrity": "sha512-nmqYTx7QVjCm3WUZLeuOomna138R1luC4EqkW3hxJUrAe+3eNz3oFCLYdnPwILfn0mX1Ew2c3wctrjlUMYYUww==",
"requires": {
"@babel/runtime": "^7.1.2",
"create-react-context": "^0.3.0",
"deep-equal": "^1.1.1",
"popper.js": "^1.14.4",
"prop-types": "^15.6.1",
"typed-styles": "^0.0.7",
"warning": "^4.0.2"
},
"dependencies": {
"deep-equal": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.1.tgz",
"integrity": "sha512-yd9c5AdiqVcR+JjcwUQb9DkhJc8ngNr0MahEBGvDiJw8puWab2yZlh+nkasOnZP+EGTAP6rRp2JzJhJZzvNF8g==",
"requires": {
"is-arguments": "^1.0.4",
"is-date-object": "^1.0.1",
"is-regex": "^1.0.4",
"object-is": "^1.0.1",
"object-keys": "^1.1.1",
"regexp.prototype.flags": "^1.2.0"
}
}
}
},
"react-router": {
@ -11221,7 +11320,6 @@
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.2.0.tgz",
"integrity": "sha512-ztaw4M1VqgMwl9HlPpOuiYgItcHlunW0He2fE6eNfT6E/CF2FtYi9ofOYe4mKntstYk0Fyh/rDRBdS3AnxjlrA==",
"dev": true,
"requires": {
"define-properties": "^1.1.2"
}

View File

@ -52,13 +52,13 @@
"sasslint-changed-only": "git diff --diff-filter=ACMR --name-only | grep -E \\.scss$ | xargs ./node_modules/.bin/stylelint --config sasslint.json",
"sasslint-fix-changed-only": "npm run sasslint-changed-only -- --fix",
"generate-licenses-file": "license-checker --production --json --out licenses.json",
"check-licenses": "license-checker --production --onlyAllow 'Apache-1.1;Apache-2.0;BSD-2-Clause;BSD-3-Clause;MIT;CC0-1.0' --summary",
"check-licenses": "license-checker --production --onlyAllow 'Apache-1.1;Apache-2.0;BSD-2-Clause;BSD-3-Clause;0BSD;MIT;CC0-1.0' --summary",
"start": "webpack-dev-server --hot --open"
},
"dependencies": {
"@blueprintjs/core": "^3.19.1",
"@blueprintjs/datetime": "^3.11.0",
"@blueprintjs/icons": "^3.11.0",
"@blueprintjs/core": "^3.33.0",
"@blueprintjs/datetime": "^3.19.2",
"@blueprintjs/icons": "^3.22.0",
"axios": "^0.19.0",
"brace": "^0.11.1",
"classnames": "^2.2.6",
@ -70,6 +70,7 @@
"d3-selection": "^1.4.0",
"druid-query-toolkit": "^0.9.15",
"file-saver": "^2.0.2",
"fontsource-open-sans": "^3.0.9",
"has-own-prop": "^2.0.0",
"hjson": "^3.2.1",
"lodash.debounce": "^4.0.8",
@ -119,6 +120,7 @@
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.15.1",
"enzyme-to-json": "^3.4.3",
"file-loader": "^6.1.1",
"fs-extra": "^8.1.0",
"identity-obj-proxy": "^3.0.0",
"ignore-styles": "^5.0.1",

View File

@ -41,6 +41,17 @@ const extraLinesForLib = {
***************************************************************************** */`
}
const extraPackages = {
// This is a OSS font so it is not listed by the npm scraper but we still want to attribute it so pretend to inject it
// as a phantom package
'opensans@1.101.0': {
licenses: 'Apache-2.0',
repository: 'https://github.com/google/fonts/tree/master/apache/opensans',
publisher: 'Google',
url: 'https://fonts.google.com/specimen/Open+Sans',
}
}
function injectConsoleLicenses(consoleLicenses) {
const text = fs.readFileSync(LICENSES_FILE, 'utf-8');
const textLines = text.split('\n');
@ -91,6 +102,8 @@ checker.init(
return;
}
Object.assign(packages, extraPackages);
const seen = {};
const mapped = Object.keys(packages)
.sort()

View File

@ -17,3 +17,9 @@
*/
@import 'common/colors';
@import 'common/color-aliases';
@import 'common/variables';
@import 'components/button/common';
@import 'components/forms/common';
@import 'components/navbar/navbar';
@import 'components/card/card';

View File

@ -0,0 +1,58 @@
/*
* 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.
*/
$pt-intent-primary: $blue3;
$pt-intent-success: $green3;
$pt-intent-warning: $orange3;
$pt-intent-danger: $red3;
$pt-app-background-color: $light-gray5;
$pt-dark-app-background-color: $dark-gray3;
$pt-outline-color: rgba($blue3, 0.6);
$pt-text-color: $dark-gray1;
$pt-text-color-muted: $gray1;
$pt-text-color-disabled: rgba($pt-text-color-muted, 0.6);
$pt-heading-color: $pt-text-color;
$pt-link-color: $blue2;
$pt-dark-text-color: $light-gray5;
$pt-dark-text-color-muted: $gray4;
$pt-dark-text-color-disabled: rgba($pt-dark-text-color-muted, 1);
$pt-dark-heading-color: $pt-dark-text-color;
$pt-dark-link-color: $blue5;
// Default text selection color using #7dbcff
$pt-text-selection-color: rgba(125, 188, 255, 0.6);
$pt-icon-color: $pt-text-color-muted;
$pt-icon-color-hover: $pt-text-color;
$pt-icon-color-disabled: $pt-text-color-disabled;
$pt-icon-color-selected: $pt-intent-primary;
$pt-dark-icon-color: $pt-dark-text-color-muted;
$pt-dark-icon-color-hover: $pt-dark-text-color;
$pt-dark-icon-color-disabled: $pt-dark-text-color-disabled;
$pt-dark-icon-color-selected: $pt-intent-primary;
$pt-divider-black: rgba($black, 0.15);
$pt-dark-divider-black: rgba($black, 0.4);
$pt-dark-divider-white: rgba($white, 0.15);
$pt-code-text-color: $pt-text-color-muted;
$pt-dark-code-text-color: $pt-dark-text-color-muted;
$pt-code-background-color: rgba($white, 0.7);
$pt-dark-code-background-color: rgba($black, 0.3);

View File

@ -16,8 +16,114 @@
* limitations under the License.
*/
$blue1: #0e5a8a;
$blue2: #106ba3;
$blue3: #137cbe; // Changed as a proof of concept
$blue4: #2b95d6;
$blue5: #48aff0;
// Gray scale
$black: #0f1320; // Changed
$dark-gray1: #181c2d; // Changed
$dark-gray2: #24283b;
$dark-gray3: #2f344e;
$dark-gray4: #383d57;
$dark-gray5: #414765;
$gray1: #606580; // Changed
$gray2: #787d96;
$gray3: #8489a1;
$gray4: #a1a6ba;
$gray5: #bdc1d1;
$light-gray1: #cdd4e0; // Changed
$light-gray2: #dce0e9;
$light-gray3: #e2e6ed;
$light-gray4: #edeff3;
$light-gray5: #f4f5f8;
$white: #ffffff;
// Core colors
$blue1: #115794; // Changed
$blue2: #1367af;
$blue3: #0083dc;
$blue4: #1f95e5;
$blue5: #3eadf9;
$green1: #0a6640;
$green2: #0d8050;
$green3: #0f9960;
$green4: #15b371;
$green5: #3dcc91;
$orange1: #a66321;
$orange2: #bf7326;
$orange3: #d9822b;
$orange4: #f29d49;
$orange5: #ffb366;
$red1: #a82a2a;
$red2: #c23030;
$red3: #db3737;
$red4: #f55656;
$red5: #ff7373;
// Extended colors
$vermilion1: #9e2b0e;
$vermilion2: #b83211;
$vermilion3: #d13913;
$vermilion4: #eb532d;
$vermilion5: #ff6e4a;
$rose1: #a82255;
$rose2: #c22762;
$rose3: #db2c6f;
$rose4: #f5498b;
$rose5: #ff66a1;
$violet1: #5c255c;
$violet2: #752f75;
$violet3: #8f398f;
$violet4: #a854a8;
$violet5: #c274c2;
$indigo1: #5642a6;
$indigo2: #634dbf;
$indigo3: #7157d9;
$indigo4: #9179f2;
$indigo5: #ad99ff;
$cobalt1: #1f4b99;
$cobalt2: #2458b3;
$cobalt3: #2965cc;
$cobalt4: #4580e6;
$cobalt5: #669eff;
$turquoise1: #008075;
$turquoise2: #00998c;
$turquoise3: #00b3a4;
$turquoise4: #14ccbd;
$turquoise5: #2ee6d6;
$forest1: #1d7324;
$forest2: #238c2c;
$forest3: #29a634;
$forest4: #43bf4d;
$forest5: #62d96b;
$lime1: #728c23;
$lime2: #87a629;
$lime3: #9bbf30;
$lime4: #b6d94c;
$lime5: #d1f26d;
$gold1: #a67908;
$gold2: #bf8c0a;
$gold3: #d99e0b;
$gold4: #f2b824;
$gold5: #ffc940;
$sepia1: #63411e;
$sepia2: #7d5125;
$sepia3: #96622d;
$sepia4: #b07b46;
$sepia5: #c99765;

View File

@ -0,0 +1,112 @@
/*
* 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.
*/
// Namespace appended to the beginning of each CSS class: `.#{$ns}-button`.
// Do not quote this value, for Less consumers.
$ns: bp3;
// easily the most important variable, so it comes up top
// (so other variables can use it to define themselves)
$pt-grid-size: 10px;
// see https://bitsofco.de/the-new-system-font-stack/
$pt-font-family: 'Open Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Helvetica Neue', 'Icons16',
// support inline Palantir icons
sans-serif;
$pt-font-family-monospace: monospace;
$pt-font-size: $pt-grid-size * 1.3;
$pt-font-size-large: $pt-grid-size * 1.6;
$pt-font-size-small: $pt-grid-size * 1.2;
// a little bit extra to ensure the height comes out to just over 18px (and browser rounds to 18px)
$pt-line-height: ($pt-grid-size * 1.8) / $pt-font-size + 0.0001;
// Icon variables
$icons16-family: 'Icons16';
$icons20-family: 'Icons20';
$pt-icon-size-standard: 16px;
$pt-icon-size-large: 20px;
// Grids & dimensions
$pt-border-radius: 3px;
// Buttons
$pt-button-height: $pt-grid-size * 3;
$pt-button-height-small: $pt-grid-size * 2.4;
$pt-button-height-smaller: $pt-grid-size * 2;
$pt-button-height-large: $pt-grid-size * 4;
// Inputs
$pt-input-height: $pt-grid-size * 3;
$pt-input-height-large: $pt-grid-size * 4;
$pt-input-height-small: $pt-grid-size * 2.4;
// Others
$pt-navbar-height: $pt-grid-size * 5;
// Z-indices
$pt-z-index-base: 0;
$pt-z-index-content: $pt-z-index-base + 10;
$pt-z-index-overlay: $pt-z-index-content + 10;
// Shadow opacities
$pt-border-shadow-opacity: 0.1;
$pt-drop-shadow-opacity: 0.16;
$pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2.8;
$pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2.8;
// Elevations
// all shadow lists must be the same length to avoid flicker in transitions.
$pt-elevation-shadow-0: 0 0 0 transparent;
$pt-elevation-shadow-1: 0 1px 3px rgba($black, $pt-drop-shadow-opacity);
$pt-elevation-shadow-2: 0 3px 9px rgba($black, $pt-drop-shadow-opacity);
$pt-elevation-shadow-3: 0 5px 15px rgba($black, $pt-drop-shadow-opacity);
$pt-elevation-shadow-4: 0 8px 24px rgba($black, $pt-drop-shadow-opacity);
$pt-dark-elevation-shadow-0: 0 0 0 transparent;
$pt-dark-elevation-shadow-1: 0 1px 3px rgba($black, $pt-dark-drop-shadow-opacity);
$pt-dark-elevation-shadow-2: 0 3px 9px rgba($black, $pt-dark-drop-shadow-opacity);
$pt-dark-elevation-shadow-3: 0 5px 15px rgba($black, $pt-dark-drop-shadow-opacity);
$pt-dark-elevation-shadow-4: 0 8px 24px rgba($black, $pt-dark-drop-shadow-opacity);
// Transitions
$pt-transition-ease: cubic-bezier(0.4, 1, 0.75, 0.9);
$pt-transition-ease-bounce: cubic-bezier(0.4, 1, 0.75, 0.9);
$pt-transition-duration: 30ms;
// Light theme styles
$pt-input-box-shadow: 0 0 0 1px rgba($black, 0.12), inset 0 1px 3px 0 rgba($black, 0.12);
$pt-dialog-box-shadow: $pt-elevation-shadow-4;
$pt-popover-box-shadow: $pt-elevation-shadow-3;
$pt-tooltip-box-shadow: $pt-popover-box-shadow;
// Dark theme styles
$pt-dark-input-box-shadow: 0 0 0 1px rgba($black, 0.4), inset 0 1px 3px 0 rgba($black, 0.5);
$pt-dark-dialog-box-shadow: $pt-dark-elevation-shadow-4;
$pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3;
$pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow;

View File

@ -0,0 +1,112 @@
/*
* 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.
*/
$button-border-width: 1px;
$button-padding: ($pt-grid-size / 2) ($pt-grid-size * 1.3);
$button-padding-small: 0 ($pt-grid-size * 0.7);
$button-padding-large: ($pt-grid-size / 2) ($pt-grid-size * 1.5);
$button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) / 1.6;
$button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) / 1.8;
/*
CSS `border` property issues:
- An element can only have one border.
- Borders can't stack with shadows.
- Borders modify the size of the element they're applied to.
- Border positioning requires the extra `box-sizing` property.
`box-shadow` doesn't have these issues, we're using it instead of `border`.
*/
$button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2),
inset 0 (-$button-border-width) 0 rgba($black, 0.1);
$button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2),
inset 0 1px 2px rgba($black, 0.2);
$button-intent-box-shadow: none;
$button-intent-box-shadow-active: none;
/*
Overlay shadows are used for default buttons
floating on top of other elements. This way, the
shadows blend with the colors beneath it.
Switches and slider handles both use these variables.
*/
$button-box-shadow-overlay: 0 0 0 $button-border-width rgba($black, 0.2),
0 1px 1px rgba($black, 0.2);
$button-box-shadow-overlay-active: 0 0 0 $button-border-width rgba($black, 0.2),
inset 0 1px 1px rgba($black, 0.1);
$dark-button-box-shadow: 0 0 0 $button-border-width rgba($black, 0.4);
$dark-button-box-shadow-active: 0 0 0 $button-border-width rgba($black, 0.6),
inset 0 1px 2px rgba($black, 0.2);
$dark-button-intent-box-shadow: none;
$dark-button-intent-box-shadow-active: none;
$button-gradient: none;
$button-intent-gradient: none;
$dark-button-gradient: none;
$button-color-disabled: $pt-text-color-disabled;
$button-background-color: white;
$button-background-color-hover: $light-gray4;
$button-background-color-active: $light-gray2;
$button-background-color-disabled: rgba($light-gray1, 0.5);
$button-background-color-active-disabled: rgba($light-gray1, 0.7);
$button-intent-color-disabled: rgba($white, 0.6);
$dark-button-color-disabled: $pt-dark-text-color-disabled;
$dark-button-background-color: $dark-gray4;
$dark-button-background-color-hover: $dark-gray5;
$dark-button-background-color-active: $dark-gray2;
$dark-button-background-color-disabled: rgba($dark-gray5, 0.5);
$dark-button-background-color-active-disabled: rgba($dark-gray5, 0.7);
$dark-button-intent-color-disabled: rgba($white, 0.3);
$minimal-button-divider-width: 1px;
$minimal-button-background-color: none;
$minimal-button-background-color-hover: rgba($gray4, 0.3);
$minimal-button-background-color-active: rgba($gray2, 0.3);
$dark-minimal-button-background-color: none;
$dark-minimal-button-background-color-hover: rgba($gray3, 0.15);
$dark-minimal-button-background-color-active: rgba($gray3, 0.3);
$button-outlined-width: 1px;
$button-outlined-border-intent-opacity: 0.6;
$button-outlined-border-disabled-intent-opacity: 0.2;
// "intent": (default, hover, active colors)
$button-intents: (
'primary': (
$pt-intent-primary,
$blue2,
$blue1,
),
'success': (
$pt-intent-success,
$green2,
$green1,
),
'warning': (
$pt-intent-warning,
$orange2,
$orange1,
),
'danger': (
$pt-intent-danger,
$red2,
$red1,
),
);

View File

@ -0,0 +1,22 @@
/*
* 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.
*/
$card-padding: $pt-grid-size * 2;
$card-background-color: $white;
$dark-card-background-color: $dark-gray3;

View File

@ -0,0 +1,43 @@
/*
* 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.
*/
$input-padding-horizontal: $pt-grid-size;
$input-small-padding: $pt-input-height-small - $pt-icon-size-standard;
$input-font-weight: 400;
$input-transition: box-shadow $pt-transition-duration $pt-transition-ease;
$input-color: $pt-text-color;
$input-color-disabled: $button-color-disabled;
$input-placeholder-color: $pt-text-color-disabled;
$input-background-color: $white;
$input-background-color-disabled: rgba($light-gray1, 0.5);
$input-shadow-color-focus: $pt-intent-primary;
$dark-input-color: $pt-dark-text-color;
$dark-input-color-disabled: $dark-button-color-disabled;
$dark-input-placeholder-color: $pt-dark-text-color-disabled;
$dark-input-background-color: $dark-gray4;
$dark-input-background-color-disabled: rgba($dark-gray5, 0.5);
$dark-input-shadow-color-focus: $pt-intent-primary;
$control-indicator-size: $pt-icon-size-standard;
$control-indicator-size-large: $pt-icon-size-large;
// avoids edge blurriness for light theme focused default input
// second box-shadow of $pt-input-box-shadow
$input-box-shadow-focus: inset 0 0 0 1px transparent;

View File

@ -0,0 +1,22 @@
/*
* 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.
*/
$navbar-padding: $pt-grid-size * 1.5;
$navbar-background-color: $white;
$dark-navbar-background-color: $dark-gray3;

View File

@ -16,21 +16,32 @@
* limitations under the License.
*/
@import '../blueprint-overrides/common/colors';
@import '../blueprint-overrides/common/variables';
.ReactTable {
.-pageJump {
.bp3-input {
background-color: #374653;
position: relative;
top: -2px;
border: none;
.bp3-dark & {
background-color: $dark-gray4;
}
}
}
.-pageSizeOptions {
.bp3-html-select select {
background-color: #394b59;
width: 90px;
position: relative;
top: -2px;
border: none;
.bp3-dark & {
background-color: $dark-gray4;
}
}
}
}

View File

@ -12,6 +12,7 @@ exports[`auto-form snapshot matches snapshot 1`] = `
allowNumericCharactersOnly={true}
buttonPosition="right"
clampValueOnBlur={false}
defaultValue=""
disabled={false}
fill={true}
large={false}
@ -24,7 +25,6 @@ exports[`auto-form snapshot matches snapshot 1`] = `
selectAllOnFocus={false}
selectAllOnIncrement={false}
stepSize={1}
value=""
/>
</Memo(FormGroupWithInfo)>
<Memo(FormGroupWithInfo)
@ -35,6 +35,7 @@ exports[`auto-form snapshot matches snapshot 1`] = `
allowNumericCharactersOnly={true}
buttonPosition="right"
clampValueOnBlur={false}
defaultValue=""
disabled={false}
fill={true}
large={false}
@ -46,7 +47,6 @@ exports[`auto-form snapshot matches snapshot 1`] = `
selectAllOnFocus={false}
selectAllOnIncrement={false}
stepSize={1000}
value=""
/>
</Memo(FormGroupWithInfo)>
<Memo(FormGroupWithInfo)

View File

@ -16,3 +16,25 @@ exports[`BracedText matches snapshot 1`] = `
</span>
</span>
`;
exports[`BracedText matches snapshot with padFractionalPart 1`] = `
<span
className="braced-text"
>
<span
className="brace-text"
>
00,000.000
</span>
<span
className="real-text"
>
23.3
<span
className="zero-pad"
>
00
</span>
</span>
</span>
`;

View File

@ -34,5 +34,9 @@
right: 0;
top: 0;
bottom: 0;
.zero-pad {
visibility: hidden;
}
}
}

View File

@ -27,4 +27,12 @@ describe('BracedText', () => {
expect(bracedText).toMatchSnapshot();
});
it('matches snapshot with padFractionalPart', () => {
const bracedText = shallow(
<BracedText text="23.3" braces={['34', '23,423.437']} padFractionalPart />,
);
expect(bracedText).toMatchSnapshot();
});
});

View File

@ -16,6 +16,7 @@
* limitations under the License.
*/
import { max } from 'd3-array';
import React from 'react';
import './braced-text.scss';
@ -23,6 +24,7 @@ import './braced-text.scss';
export interface BracedTextProps {
text: string;
braces: string[];
padFractionalPart?: boolean;
}
export function findMostNumbers(strings: string[]): string {
@ -43,13 +45,54 @@ export function findMostNumbers(strings: string[]): string {
return longest;
}
function lengthAfterLastDot(str: string): number | undefined {
const parts = str.split('.');
const n = parts.length;
if (n < 2) return;
return parts[n - 1].length;
}
function zerosOfLength(n: number): string {
return new Array(n + 1).join('0');
}
export const BracedText = React.memo(function BracedText(props: BracedTextProps) {
const { text, braces } = props;
const { text, braces, padFractionalPart } = props;
let effectiveBraces = braces.concat(text);
let zeroPad: JSX.Element | undefined;
if (padFractionalPart) {
const lengthsAfterDot = effectiveBraces.map(lengthAfterLastDot);
const maxLengthAfterLastDot = max(lengthsAfterDot, x => x);
if (maxLengthAfterLastDot) {
const textLengthAfterLastDot = lengthAfterLastDot(text);
if (typeof textLengthAfterLastDot !== 'undefined') {
const padLength = Math.max(maxLengthAfterLastDot - textLengthAfterLastDot, 0);
zeroPad = <span className="zero-pad">{zerosOfLength(padLength)}</span>;
} else {
zeroPad = <span className="zero-pad">{`.${zerosOfLength(maxLengthAfterLastDot)}`}</span>;
}
effectiveBraces = effectiveBraces.map((brace, i) => {
const braceLengthAfterLastDot = lengthsAfterDot[i];
if (typeof braceLengthAfterLastDot !== 'undefined') {
const padLength = Math.max(maxLengthAfterLastDot - braceLengthAfterLastDot, 0);
return `${brace}${zerosOfLength(padLength)}`;
} else {
return `${brace}.${zerosOfLength(maxLengthAfterLastDot)}`;
}
});
}
}
return (
<span className="braced-text">
<span className="brace-text">{findMostNumbers(braces.concat(text))}</span>
<span className="real-text">{text}</span>
<span className="brace-text">{findMostNumbers(effectiveBraces)}</span>
<span className="real-text">
{text}
{zeroPad}
</span>
</span>
);
});

View File

@ -17,6 +17,7 @@
*/
@import '../../variables';
@import '../../blueprint-overrides/common/colors';
.header-bar {
overflow: hidden;
@ -32,11 +33,57 @@
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 75px;
height: 48px;
.letter {
fill: $dark-gray2;
}
.swirl {
fill: $druid-brand2;
}
.bp3-dark & {
.letter {
fill: $white;
}
.swirl {
fill: $druid-brand;
}
}
}
}
* {
white-space: nowrap;
}
.bp3-navbar-divider {
margin: 0 11px;
}
.bp3-button.bp3-minimal {
border-radius: 20px;
margin: 0 1px;
.bp3-icon {
svg {
fill: $blue3;
.bp3-dark & {
fill: $druid-brand;
}
}
}
.bp3-dark & {
&:hover {
background: rgba($dark-gray5, 0.5);
}
&.bp3-active {
background: rgba($dark-gray5, 0.9);
}
}
}
}

File diff suppressed because one or more lines are too long

View File

@ -33,14 +33,14 @@ function removeLocalTimezone(localDate: Date): Date {
function parseInterval(interval: string): DateRange {
const dates = interval.split('/');
if (dates.length !== 2) {
return [undefined, undefined];
return [null, null];
}
const startDate = Date.parse(dates[0]) ? new Date(dates[0]) : undefined;
const endDate = Date.parse(dates[1]) ? new Date(dates[1]) : undefined;
const startDate = Date.parse(dates[0]) ? new Date(dates[0]) : null;
const endDate = Date.parse(dates[1]) ? new Date(dates[1]) : null;
// Must check if the start and end dates are within range
return [
startDate && startDate.getFullYear() < CURRENT_YEAR - 20 ? undefined : startDate,
endDate && endDate.getFullYear() > CURRENT_YEAR ? undefined : endDate,
startDate && startDate.getFullYear() < CURRENT_YEAR - 20 ? null : startDate,
endDate && endDate.getFullYear() > CURRENT_YEAR ? null : endDate,
];
}
function stringifyDateRange(localRange: DateRange): string {

View File

@ -1,29 +1,31 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`json collapse matches snapshot 1`] = `
exports[`JsonCollapse matches snapshot 1`] = `
<div
class="json-collapse"
className="json-collapse"
>
<button
class="bp3-button bp3-minimal"
type="button"
>
<span
class="bp3-button-text"
>
test
</span>
</button>
<div>
<div
class="bp3-collapse"
className="collapse-buttons"
>
<div
aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(-0px);"
<Blueprint3.Button
active={false}
minimal={true}
onClick={[Function]}
text="test"
/>
</div>
</div>
<Blueprint3.Collapse
component="div"
isOpen={false}
keepChildrenMounted={false}
transitionDuration={200}
>
<Blueprint3.TextArea
readOnly={true}
value="{
\\"name\\": \\"test\\"
}"
/>
</Blueprint3.Collapse>
</div>
`;

View File

@ -0,0 +1,34 @@
/*
* 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.
*/
.json-collapse {
.collapse-buttons {
height: 30px;
margin-bottom: 5px;
text-align: right;
& > * {
display: inline-block;
}
}
textarea {
width: 100%;
height: 100px;
}
}

View File

@ -16,17 +16,16 @@
* limitations under the License.
*/
import { render } from '@testing-library/react';
import { shallow } from 'enzyme';
import React from 'react';
import { JsonCollapse } from './json-collapse';
describe('json collapse', () => {
describe('JsonCollapse', () => {
it('matches snapshot', () => {
const jsonCollapse = (
<JsonCollapse buttonText={'test'} stringValue={JSON.stringify({ name: 'test' })} />
const jsonCollapse = shallow(
<JsonCollapse buttonText={'test'} stringValue={JSON.stringify({ name: 'test' })} />,
);
const { container } = render(jsonCollapse);
expect(container.firstChild).toMatchSnapshot();
expect(jsonCollapse).toMatchSnapshot();
});
});

View File

@ -19,6 +19,8 @@
import { Button, Collapse, TextArea } from '@blueprintjs/core';
import React, { useState } from 'react';
import './json-collapse.scss';
interface JsonCollapseProps {
stringValue: string;
buttonText: string;
@ -31,12 +33,12 @@ export const JsonCollapse = React.memo(function JsonCollapse(props: JsonCollapse
const prettyValue = JSON.stringify(JSON.parse(stringValue), undefined, 2);
return (
<div className="json-collapse">
<div className="collapse-buttons">
<Button minimal active={isOpen} onClick={() => setIsOpen(!isOpen)} text={buttonText} />
<div>
</div>
<Collapse isOpen={isOpen}>
<TextArea readOnly value={prettyValue} />
</Collapse>
</div>
</div>
);
});

View File

@ -74,7 +74,7 @@ exports[`rule editor matches snapshot no tier in rule 1`] = `
style="transform: translateY(0); transition: none;"
>
<div
class="bp3-card bp3-elevation-0"
class="bp3-card bp3-elevation-2"
>
<div
class="bp3-form-group"
@ -288,7 +288,7 @@ exports[`rule editor matches snapshot with broadcast rule 1`] = `
style="transform: translateY(0); transition: none;"
>
<div
class="bp3-card bp3-elevation-0"
class="bp3-card bp3-elevation-2"
>
<div
class="bp3-form-group"
@ -380,7 +380,6 @@ exports[`rule editor matches snapshot with broadcast rule 1`] = `
<input
class="bp3-input"
placeholder="2010-01-01/2020-01-01"
style="padding-right: 10px;"
type="text"
value=""
/>
@ -468,7 +467,7 @@ exports[`rule editor matches snapshot with existing tier and non existing tier i
style="transform: translateY(0); transition: none;"
>
<div
class="bp3-card bp3-elevation-0"
class="bp3-card bp3-elevation-2"
>
<div
class="bp3-form-group"
@ -560,7 +559,6 @@ exports[`rule editor matches snapshot with existing tier and non existing tier i
<input
class="bp3-input"
placeholder="2010-01-01/2020-01-01"
style="padding-right: 10px;"
type="text"
value=""
/>
@ -599,7 +597,6 @@ exports[`rule editor matches snapshot with existing tier and non existing tier i
class="bp3-input"
max="256"
min="1"
style="padding-right: 10px;"
type="text"
value="1"
/>
@ -632,7 +629,9 @@ exports[`rule editor matches snapshot with existing tier and non existing tier i
</span>
</button>
<button
class="bp3-button"
class="bp3-button bp3-disabled"
disabled=""
tabindex="-1"
type="button"
>
<span
@ -758,7 +757,6 @@ exports[`rule editor matches snapshot with existing tier and non existing tier i
class="bp3-input"
max="256"
min="1"
style="padding-right: 10px;"
type="text"
value="2"
/>
@ -1011,7 +1009,7 @@ exports[`rule editor matches snapshot with existing tier in rule 1`] = `
style="transform: translateY(0); transition: none;"
>
<div
class="bp3-card bp3-elevation-0"
class="bp3-card bp3-elevation-2"
>
<div
class="bp3-form-group"
@ -1103,7 +1101,6 @@ exports[`rule editor matches snapshot with existing tier in rule 1`] = `
<input
class="bp3-input"
placeholder="2010-01-01/2020-01-01"
style="padding-right: 10px;"
type="text"
value=""
/>
@ -1142,7 +1139,6 @@ exports[`rule editor matches snapshot with existing tier in rule 1`] = `
class="bp3-input"
max="256"
min="1"
style="padding-right: 10px;"
type="text"
value="2"
/>
@ -1397,7 +1393,7 @@ exports[`rule editor matches snapshot with non existing tier in rule 1`] = `
style="transform: translateY(0); transition: none;"
>
<div
class="bp3-card bp3-elevation-0"
class="bp3-card bp3-elevation-2"
>
<div
class="bp3-form-group"
@ -1489,7 +1485,6 @@ exports[`rule editor matches snapshot with non existing tier in rule 1`] = `
<input
class="bp3-input"
placeholder="2010-01-01/2020-01-01"
style="padding-right: 10px;"
type="text"
value=""
/>
@ -1528,7 +1523,6 @@ exports[`rule editor matches snapshot with non existing tier in rule 1`] = `
class="bp3-input"
max="256"
min="1"
style="padding-right: 10px;"
type="text"
value="2"
/>

View File

@ -157,7 +157,7 @@ export const RuleEditor = React.memo(function RuleEditor(props: RuleEditorProps)
</div>
<Collapse isOpen={isOpen}>
<Card>
<Card elevation={2}>
<FormGroup>
<ControlGroup>
<HTMLSelect

View File

@ -53,7 +53,7 @@ export interface TableCellProps {
export const TableCell = React.memo(function TableCell(props: TableCellProps) {
const { value, unlimited } = props;
const [showValue, setShowValue] = useState();
const [showValue, setShowValue] = useState<string | undefined>();
function renderShowValueDialog(): JSX.Element | undefined {
if (!showValue) return;

View File

@ -29,8 +29,9 @@
}
.control-label {
font-size: 30px;
font-size: 21px;
line-height: 30px;
font-weight: 600;
cursor: default;
margin-right: 20px;
}
@ -38,7 +39,8 @@
label.bp3-control,
label.bp3-label {
display: inline-block;
margin-bottom: 8px;
margin-bottom: 0;
line-height: 30px;
}
.table-column-selector {

View File

@ -26,9 +26,14 @@
right: 0;
bottom: 0;
padding: $standard-padding;
overflow-y: auto;
&.narrow-pad {
padding: $standard-padding 10px;
padding: $standard-padding $thin-padding;
}
&.thin {
padding: 10px;
}
.app-view {
@ -41,4 +46,8 @@
height: 22px;
border-top: 2px solid #6d8ea9;
}
.ace-solarized-dark {
background-color: rgba($dark-gray1, 0.5);
}
}

View File

@ -171,7 +171,7 @@ export class ConsoleApplication extends React.PureComponent<
private wrapInViewContainer = (
active: HeaderActiveTab,
el: JSX.Element,
classType: 'normal' | 'narrow-pad' = 'normal',
classType: 'normal' | 'narrow-pad' | 'thin' = 'normal',
) => {
const { capabilities } = this.state;
@ -213,6 +213,7 @@ export class ConsoleApplication extends React.PureComponent<
defaultQueryContext={defaultQueryContext}
mandatoryQueryContext={mandatoryQueryContext}
/>,
'thin',
);
};

View File

@ -54,6 +54,9 @@ exports[`history dialog matches snapshot 1`] = `
<p />
<div
class="json-collapse"
>
<div
class="collapse-buttons"
>
<button
class="bp3-button bp3-minimal"
@ -65,20 +68,19 @@ exports[`history dialog matches snapshot 1`] = `
Payload
</span>
</button>
<div>
</div>
<div
class="bp3-collapse"
>
<div
aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(-0px);"
style="transform: translateY(-undefinedpx);"
/>
</div>
</div>
</div>
</div>
</div>
<div
class="history-record-entry"
>
@ -101,6 +103,9 @@ exports[`history dialog matches snapshot 1`] = `
<p />
<div
class="json-collapse"
>
<div
class="collapse-buttons"
>
<button
class="bp3-button bp3-minimal"
@ -112,14 +117,14 @@ exports[`history dialog matches snapshot 1`] = `
Payload
</span>
</button>
<div>
</div>
<div
class="bp3-collapse"
>
<div
aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(-0px);"
style="transform: translateY(-undefinedpx);"
/>
</div>
</div>
@ -127,7 +132,6 @@ exports[`history dialog matches snapshot 1`] = `
</div>
</div>
</div>
</div>
<div
class="bp3-dialog-footer"
>

View File

@ -23,8 +23,6 @@
}
.history-record-container {
padding: 15px 15px 0 15px;
.history-dialog-title {
padding-left: 10px;
margin-bottom: 2px;
@ -63,20 +61,6 @@
font-size: 16px;
}
}
.json-collapse {
button {
position: relative;
left: 86%;
margin-bottom: 5px;
}
textarea {
width: 100%;
height: 30vh;
margin-bottom: 5px;
}
}
}
}
}

View File

@ -145,7 +145,7 @@ exports[`retention dialog matches snapshot 1`] = `
style="transform: translateY(0); transition: none;"
>
<div
class="bp3-card bp3-elevation-0"
class="bp3-card bp3-elevation-2"
>
<div
class="bp3-form-group"
@ -324,7 +324,6 @@ exports[`retention dialog matches snapshot 1`] = `
class="bp3-input"
max="256"
min="1"
style="padding-right: 10px;"
type="text"
value="2"
/>

View File

@ -17,6 +17,7 @@
*/
@import '../node_modules/normalize.css/normalize';
@import '~fontsource-open-sans/index.css';
@import './blueprint-overrides';
@import '~@blueprintjs/core/src/blueprint';
@import '~@blueprintjs/datetime/src/blueprint-datetime';
@ -25,7 +26,6 @@
html,
body {
//font-family: 'Open Sans', Helvetica, Arial, sans-serif;
position: fixed;
height: 100%;
width: 100%;
@ -34,8 +34,10 @@ body {
}
body {
background: $light-gray4;
&.bp3-dark {
background: rgb(41, 55, 66);
background: $dark-gray2;
}
&.mouse-mode {

View File

@ -16,6 +16,27 @@
* limitations under the License.
*/
@import '/blueprint-overrides/common/colors';
@import '/blueprint-overrides/common/variables';
$header-bar-height: 50px;
$view-control-bar-height: 30px;
$standard-padding: 15px;
$thin-padding: 10px;
// various style variables
$druid-brand: #2ceefb;
$druid-brand2: #00b6bf;
$druid-brand-background: #1c1c26;
@mixin card-like {
background: $white;
border-radius: $pt-border-radius;
box-shadow: $pt-elevation-shadow-1;
.bp3-dark & {
background: $dark-gray3;
box-shadow: $pt-dark-elevation-shadow-1;
}
}

View File

@ -431,8 +431,8 @@ GROUP BY 1`;
return resp.data;
}}
confirmButtonText="Mark as unused all segments"
successText="All segments in data source have been marked as unused"
failText="Failed to mark as unused all segments in data source"
successText="All segments in datasource have been marked as unused"
failText="Failed to mark as unused all segments in datasource"
intent={Intent.DANGER}
onClose={() => {
this.setState({ datasourceToMarkAsUnusedAllSegmentsIn: undefined });
@ -462,8 +462,8 @@ GROUP BY 1`;
return resp.data;
}}
confirmButtonText="Mark as used all segments"
successText="All non-overshadowed segments in data source have been marked as used"
failText="Failed to mark as used all non-overshadowed segments in data source"
successText="All non-overshadowed segments in datasource have been marked as used"
failText="Failed to mark as used all non-overshadowed segments in datasource"
intent={Intent.PRIMARY}
onClose={() => {
this.setState({ datasourceToMarkAllNonOvershadowedSegmentsAsUsedIn: undefined });
@ -497,8 +497,8 @@ GROUP BY 1`;
}}
confirmButtonText={`Mark as ${usedWord} segments in the interval`}
confirmButtonDisabled={!/.\/./.test(useUnuseInterval)}
successText={`Segments in the interval in data source have been marked as ${usedWord}`}
failText={`Failed to mark as ${usedWord} segments in the interval in data source`}
successText={`Segments in the interval in datasource have been marked as ${usedWord}`}
failText={`Failed to mark as ${usedWord} segments in the interval in datasource`}
intent={Intent.PRIMARY}
onClose={() => {
this.setState({ datasourceToMarkSegmentsByIntervalIn: undefined });
@ -536,7 +536,7 @@ GROUP BY 1`;
return resp.data;
}}
confirmButtonText="Permanently delete unused segments"
successText="Kill task was issued. Unused segments in data source will be deleted"
successText="Kill task was issued. Unused segments in datasource will be deleted"
failText="Failed submit kill task"
intent={Intent.DANGER}
onClose={() => {

View File

@ -6,7 +6,7 @@ exports[`datasources card matches snapshot 1`] = `
href="#datasources"
>
<div
class="bp3-card bp3-interactive bp3-elevation-0"
class="bp3-card bp3-interactive bp3-elevation-1"
>
<h5
class="bp3-heading"

View File

@ -6,7 +6,7 @@ exports[`home view card matches snapshot 1`] = `
href="#somewhere"
>
<div
class="bp3-card bp3-interactive bp3-elevation-0"
class="bp3-card bp3-interactive bp3-elevation-1"
>
<h5
class="bp3-heading"

View File

@ -16,6 +16,9 @@
* limitations under the License.
*/
@import '../../../variables';
@import '../../../blueprint-overrides/common/colors';
.home-view-card {
.bp3-card {
height: 170px;
@ -26,11 +29,30 @@
}
p {
padding-left: 20px;
padding-left: 34px;
}
h5 span {
vertical-align: middle;
margin-top: -2px;
margin-right: 10px;
svg {
width: 20px;
height: 20px;
fill: $blue3;
.bp3-dark & {
fill: $druid-brand;
}
}
}
}
.bp3-dark a.home-view-card,
.bp3-dark a.home-view-card:hover {
color: inherit;
a.home-view-card,
a.home-view-card:hover {
.bp3-dark & {
color: $gray4;
}
color: $gray2;
}

View File

@ -43,7 +43,7 @@ export const HomeViewCard = React.memo(function HomeViewCard(props: HomeViewCard
href={href}
target={href && href[0] === '/' ? '_blank' : undefined}
>
<Card interactive>
<Card interactive elevation={1}>
<H5>
<Icon color="#bfccd5" icon={icon} />
&nbsp;{title}

View File

@ -20,7 +20,21 @@
.home-view {
display: grid;
gap: $standard-padding;
gap: $thin-padding;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 0 60px;
padding: 10px 60px;
@media (max-width: 1200px) {
grid-template-columns: 1fr 1fr 1fr;
padding: 10px 40px;
}
@media (max-width: 900px) {
grid-template-columns: 1fr 1fr;
padding: 10px;
}
@media (max-width: 600px) {
grid-template-columns: 1fr;
}
}

View File

@ -6,7 +6,7 @@ exports[`lookups card matches snapshot 1`] = `
href="#lookups"
>
<div
class="bp3-card bp3-interactive bp3-elevation-0"
class="bp3-card bp3-interactive bp3-elevation-1"
>
<h5
class="bp3-heading"

View File

@ -6,7 +6,7 @@ exports[`segments card matches snapshot 1`] = `
href="#segments"
>
<div
class="bp3-card bp3-interactive bp3-elevation-0"
class="bp3-card bp3-interactive bp3-elevation-1"
>
<h5
class="bp3-heading"

View File

@ -6,7 +6,7 @@ exports[`services card matches snapshot 1`] = `
href="#services"
>
<div
class="bp3-card bp3-interactive bp3-elevation-0"
class="bp3-card bp3-interactive bp3-elevation-1"
>
<h5
class="bp3-heading"

View File

@ -5,7 +5,7 @@ exports[`status card matches snapshot 1`] = `
class="home-view-card status-card"
>
<div
class="bp3-card bp3-interactive bp3-elevation-0"
class="bp3-card bp3-interactive bp3-elevation-1"
>
<h5
class="bp3-heading"

View File

@ -6,7 +6,7 @@ exports[`supervisors card matches snapshot 1`] = `
href="#ingestion"
>
<div
class="bp3-card bp3-interactive bp3-elevation-0"
class="bp3-card bp3-interactive bp3-elevation-1"
>
<h5
class="bp3-heading"

View File

@ -6,7 +6,7 @@ exports[`tasks card matches snapshot 1`] = `
href="#ingestion"
>
<div
class="bp3-card bp3-interactive bp3-elevation-0"
class="bp3-card bp3-interactive bp3-elevation-1"
>
<h5
class="bp3-heading"

View File

@ -17,6 +17,7 @@
*/
@import '../../variables';
@import '../../blueprint-overrides/common/colors';
.ingestion-view {
height: 100%;
@ -35,7 +36,7 @@
&.splitter-layout.splitter-layout-vertical > .layout-splitter {
height: 3px;
background-color: #6d8ea9;
background-color: $gray1;
}
.bottom-pane {

View File

@ -164,8 +164,12 @@ exports[`load data view matches snapshot 1`] = `
</div>
</div>
<div
className="main bp3-input"
className="main"
>
<div
className="ingestion-cards"
/>
</div>
<div
className="control"
>

View File

@ -16,16 +16,19 @@
* limitations under the License.
*/
@import '../../../variables';
@import '../../../blueprint-overrides/common/colors';
.filter-table {
.rt-th {
&.filtered {
background: rgba(201, 128, 22, 0.2);
background: rgba($druid-brand, 0.2);
}
}
.rt-td {
&.filtered {
background: rgba(201, 128, 22, 0.05);
background: rgba($druid-brand, 0.06);
}
}
}

View File

@ -19,12 +19,19 @@
@import '~@blueprintjs/core/src/common/colors';
@import '../../variables';
@mixin sunk-panel {
background: rgba($dark-gray1, 0.5);
border-radius: $pt-border-radius;
box-shadow: inset 0 1px 3px rgba($black, 0.32);
}
.load-data-view {
//height: 100%;
height: 100%;
display: grid;
grid-gap: 15px 5px;
grid-gap: $thin-padding 5px;
grid-template-columns: 1fr 280px;
grid-template-rows: 55px 1fr 28px;
grid-template-rows: 60px 1fr 28px;
grid-template-areas:
'navi navi'
'main ctrl'
@ -43,18 +50,27 @@
.spec-card-icon {
vertical-align: top;
margin-top: 6px;
svg {
width: 20px;
height: 20px;
}
}
.spec-card-header {
font-size: 25px;
line-height: 30px;
font-size: 16px;
font-weight: 600;
line-height: 32px;
display: inline-block;
vertical-align: top;
padding-left: 10px;
padding-left: 16px;
.spec-card-caption {
font-size: 15px;
font-size: 13px;
line-height: 20px;
font-weight: 400;
color: $gray4;
}
}
}
@ -66,15 +82,30 @@
padding: 0;
overflow: auto;
.ingestion-cards {
@include sunk-panel;
display: grid;
gap: $thin-padding;
grid-template-columns: 1fr 1fr 1fr 1fr;
padding: 10px;
@media (max-width: 1200px) {
grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 900px) {
grid-template-columns: 1fr 1fr;
}
@media (max-width: 600px) {
grid-template-columns: 1fr;
}
}
.bp3-card {
position: relative;
display: inline-block;
vertical-align: top;
width: 220px;
height: 140px;
margin-top: 10px;
margin-left: 10px;
font-size: 16px;
text-align: center;
& > * {
@ -89,8 +120,12 @@
bottom: 0;
left: 0;
content: '';
border: 2px solid #48aff0;
border-radius: 2px;
border: 2px solid $blue3;
border-radius: $pt-border-radius;
.bp3-dark & {
border: 2px solid $blue4;
}
}
&.disabled {
@ -127,17 +162,17 @@
grid-area: navi;
white-space: nowrap;
overflow: auto;
padding: 0 5px;
padding: 5px 5px 0 5px;
.step-section {
display: inline-block;
vertical-align: top;
margin-right: 15px;
margin-right: $thin-padding;
}
.step-nav-l1 {
height: 25px;
font-weight: bold;
height: 24px;
font-weight: 600;
color: #eeeeee;
}
@ -196,8 +231,8 @@
left: 0;
right: 0;
content: '';
border: 2px solid #ff5d10;
border-radius: 2px;
border: 2px solid $blue4;
border-radius: $pt-border-radius;
}
.clickable {
@ -205,21 +240,21 @@
}
&.timestamp {
background: rgba(19, 129, 201, 0.5);
background: rgba($cobalt3, 0.44);
}
&.used {
background: rgba(99, 129, 137, 0.5);
background: rgba($gray3, 0.3);
}
}
.rt-td {
&.timestamp {
background: rgba(19, 129, 201, 0.15);
background: rgba($cobalt3, 0.16);
}
&.used {
background: rgba(99, 129, 137, 0.15);
background: rgba($gray3, 0.16);
}
}
}
@ -261,7 +296,7 @@
.edit-controls {
background: rgba($gray3, 0.15);
padding: 10px;
border-radius: 2px;
border-radius: $pt-border-radius;
margin-bottom: 15px;
}
@ -284,8 +319,4 @@
width: 100%;
height: 100% !important;
}
.ace-solarized-dark {
background-color: #232c35;
}
}

View File

@ -520,7 +520,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
renderActionCard(icon: IconName, title: string, caption: string, onClick: () => void) {
return (
<Card className={'spec-card'} interactive onClick={onClick}>
<Card className={'spec-card'} interactive onClick={onClick} elevation={1}>
<Icon className="spec-card-icon" icon={icon} iconSize={30} />
<div className={'spec-card-header'}>
{title}
@ -683,6 +683,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
<Card
className={classNames({ disabled: !goodToGo, active: selectedComboType === comboType })}
interactive
elevation={1}
onClick={() => {
this.setState({
selectedComboType: selectedComboType !== comboType ? comboType : undefined,
@ -706,7 +707,8 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
const welcomeMessage = this.renderWelcomeStepMessage();
return (
<>
<div className="main bp3-input">
<div className="main">
<div className="ingestion-cards">
{this.renderIngestionCard('kafka')}
{this.renderIngestionCard('kinesis')}
{this.renderIngestionCard('azure-event-hubs')}
@ -721,6 +723,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
{exampleManifestsUrl && this.renderIngestionCard('example', noExamples)}
{this.renderIngestionCard('other')}
</div>
</div>
<div className="control">
{welcomeMessage && <Callout className="intro">{welcomeMessage}</Callout>}
{this.renderWelcomeStepControls()}
@ -2894,7 +2897,7 @@ export class LoadDataView extends React.PureComponent<LoadDataViewProps, LoadDat
name: 'spec.dataSchema.dataSource',
label: 'Datasource name',
type: 'string',
info: <>This is the name of the data source (table) in Druid.</>,
info: <>This is the name of the datasource (table) in Druid.</>,
},
{
name: 'spec.ioConfig.appendToExisting',

View File

@ -16,16 +16,19 @@
* limitations under the License.
*/
@import '../../../variables';
@import '../../../blueprint-overrides/common/colors';
.parse-data-table {
.rt-th {
&.flattened {
background: rgba(201, 128, 22, 0.2);
background: rgba($druid-brand, 0.2);
}
}
.rt-td {
&.flattened {
background: rgba(201, 128, 22, 0.05);
background: rgba($druid-brand, 0.06);
}
}

View File

@ -16,44 +16,47 @@
* limitations under the License.
*/
@import '../../../variables';
@import '../../../blueprint-overrides/common/colors';
.schema-table {
.rt-th {
&.dimension {
background: rgba(38, 170, 201, 0.5);
background: rgba($green3, 0.3);
&.long {
background: rgba(19, 129, 201, 0.5);
background: rgba($blue3, 0.3);
}
&.float {
background: rgba(22, 129, 201, 0.5);
background: rgba($blue3, 0.3);
}
&.double {
background: rgba(25, 129, 201, 0.5);
background: rgba($blue3, 0.3);
}
}
&.metric {
background: rgba(201, 191, 55, 0.5);
background: rgba($rose2, 0.16);
}
}
.rt-td {
&.dimension {
background: rgba(38, 170, 201, 0.1);
background: rgba($green3, 0.12);
&.long {
background: rgba(19, 129, 201, 0.1);
background: rgba($blue3, 0.1);
}
&.float {
background: rgba(22, 129, 201, 0.1);
background: rgba($blue3, 0.1);
}
&.double {
background: rgba(25, 129, 201, 0.1);
background: rgba($blue3, 0.1);
}
}
&.metric {
background: rgba(201, 191, 55, 0.1);
background: rgba($rose2, 0.07);
}
}
}

View File

@ -16,16 +16,19 @@
* limitations under the License.
*/
@import '../../../variables';
@import '../../../blueprint-overrides/common/colors';
.transform-table {
.rt-th {
&.transformed {
background: rgba(201, 128, 22, 0.2);
background: rgba($druid-brand, 0.2);
}
}
.rt-td {
&.transformed {
background: rgba(201, 128, 22, 0.05);
background: rgba($druid-brand, 0.06);
}
}
}

View File

@ -53,8 +53,8 @@ exports[`sql view matches snapshot 1`] = `
>
<Blueprint3.Switch
checked={true}
className="smart-query-limit"
label="Smart query limit"
className="auto-limit"
label="Auto limit"
onChange={[Function]}
/>
</Blueprint3.Tooltip>
@ -130,8 +130,8 @@ exports[`sql view matches snapshot with query 1`] = `
>
<Blueprint3.Switch
checked={true}
className="smart-query-limit"
label="Smart query limit"
className="auto-limit"
label="Auto limit"
onChange={[Function]}
/>
</Blueprint3.Tooltip>

View File

@ -1,301 +1,174 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`column tree matches snapshot 1`] = `
exports[`ColumnTree matches snapshot 1`] = `
<div
class="column-tree"
className="column-tree"
>
<div
class="bp3-html-select bp3-fill bp3-large bp3-minimal schema-selector"
<HTMLSelect
className="schema-selector"
fill={true}
large={true}
minimal={true}
onChange={[Function]}
value={0}
>
<select>
<option
value="0"
key="0"
value={0}
>
druid
</option>
<option
value="1"
key="1"
value={1}
>
sys
</option>
</select>
<span
class="bp3-icon bp3-icon-double-caret-vertical"
icon="double-caret-vertical"
</HTMLSelect>
<div
className="tree-container"
>
<svg
data-icon="double-caret-vertical"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
double-caret-vertical
</desc>
<path
d="M5 7h6a1.003 1.003 0 00.71-1.71l-3-3C8.53 2.11 8.28 2 8 2s-.53.11-.71.29l-3 3A1.003 1.003 0 005 7zm6 2H5a1.003 1.003 0 00-.71 1.71l3 3c.18.18.43.29.71.29s.53-.11.71-.29l3-3A1.003 1.003 0 0011 9z"
fill-rule="evenodd"
<Blueprint3.Tree
contents={
Array [
Object {
"childNodes": Array [
Object {
"icon": "time",
"id": "__time",
"label": <Blueprint3.Popover
autoFocus={false}
boundary="window"
captureDismiss={false}
content={
<Memo(Deferred)
content={[Function]}
/>
</svg>
</span>
</div>
<div
class="tree-container"
>
<div
class="bp3-tree"
>
<ul
class="bp3-tree-node-list bp3-tree-root"
>
<li
class="bp3-tree-node bp3-tree-node-expanded"
>
<div
class="bp3-tree-node-content bp3-tree-node-content-0"
>
<span
class="bp3-icon bp3-icon-chevron-right bp3-tree-node-caret bp3-tree-node-caret-open"
icon="chevron-right"
>
<svg
data-icon="chevron-right"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
chevron-right
</desc>
<path
d="M10.71 7.29l-4-4a1.003 1.003 0 00-1.42 1.42L8.59 8 5.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71l4-4c.18-.18.29-.43.29-.71 0-.28-.11-.53-.29-.71z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-icon bp3-icon-th bp3-tree-node-icon"
icon="th"
>
<svg
data-icon="th"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
th
</desc>
<path
d="M15 1H1c-.6 0-1 .5-1 1v12c0 .6.4 1 1 1h14c.6 0 1-.4 1-1V2c0-.5-.4-1-1-1zM6 13H2v-2h4v2zm0-3H2V8h4v2zm0-3H2V5h4v2zm8 6H7v-2h7v2zm0-3H7V8h7v2zm0-3H7V5h7v2z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-tree-node-label"
>
<span
class="bp3-popover-wrapper"
>
<span
class="bp3-popover-target"
>
<div
class=""
>
wikipedia
</div>
</span>
</span>
</span>
</div>
<div
class="bp3-collapse"
style="height: auto; overflow-y: visible; transition: none;"
>
<div
aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(0); transition: none;"
>
<ul
class="bp3-tree-node-list"
>
<li
class="bp3-tree-node"
>
<div
class="bp3-tree-node-content bp3-tree-node-content-1"
>
<span
class="bp3-tree-node-caret-none"
/>
<span
class="bp3-icon bp3-icon-time bp3-tree-node-icon"
icon="time"
>
<svg
data-icon="time"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
time
</desc>
<path
d="M8 0C3.58 0 0 3.58 0 8s3.58 8 8 8 8-3.58 8-8-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6zm1-6.41V4c0-.55-.45-1-1-1s-1 .45-1 1v4c0 .28.11.53.29.71l2 2a1.003 1.003 0 001.42-1.42L9 7.59z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-tree-node-label"
>
<span
class="bp3-popover-wrapper"
>
<span
class="bp3-popover-target bp3-popover-open"
>
<div
class=""
}
defaultIsOpen={false}
disabled={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={300}
hoverOpenDelay={150}
inheritDarkTheme={true}
interactionKind="click"
minimal={false}
modifiers={Object {}}
openOnTargetFocus={true}
position="right"
targetClassName="bp3-popover-open"
targetTagName="span"
transitionDuration={300}
usePortal={true}
wrapperTagName="span"
>
__time
</div>
</span>
</span>
</span>
</div>
<div
class="bp3-collapse"
>
<div
aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(-0px);"
</Blueprint3.Popover>,
},
Object {
"icon": "numerical",
"id": "added",
"label": <Blueprint3.Popover
autoFocus={false}
boundary="window"
captureDismiss={false}
content={
<Memo(Deferred)
content={[Function]}
/>
</div>
</li>
<li
class="bp3-tree-node"
>
<div
class="bp3-tree-node-content bp3-tree-node-content-1"
>
<span
class="bp3-tree-node-caret-none"
/>
<span
class="bp3-icon bp3-icon-numerical bp3-tree-node-icon"
icon="numerical"
>
<svg
data-icon="numerical"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
numerical
</desc>
<path
d="M2.79 4.61c-.13.17-.29.3-.48.41-.18.11-.39.18-.62.23-.23.04-.46.07-.71.07v1.03h1.74V12h1.26V4h-.94c-.04.23-.12.44-.25.61zm4.37 5.31c.18-.14.37-.28.58-.42l.63-.45c.21-.16.41-.33.61-.51s.37-.38.52-.59c.15-.21.28-.45.37-.7.09-.25.13-.54.13-.85 0-.25-.04-.52-.12-.8-.07-.29-.2-.55-.39-.79a2.18 2.18 0 00-.73-.6c-.29-.15-.66-.23-1.11-.23-.41 0-.77.08-1.08.23-.31.16-.58.37-.79.64-.22.27-.38.59-.49.96-.11.37-.16.77-.16 1.2h1.19c.01-.27.03-.53.08-.77.04-.24.11-.45.21-.62.09-.18.22-.32.38-.42.16-.1.35-.15.59-.15.26 0 .47.05.63.14.15.09.28.21.37.35.09.14.15.29.18.45.03.16.05.31.05.45-.01.31-.08.58-.22.82-.14.23-.32.45-.53.65-.22.21-.46.39-.71.57-.26.18-.51.36-.75.54-.5.36-.89.78-1.17 1.27-.28.49-.43 1.06-.44 1.71h5v-1.15H6.43c.05-.17.14-.33.27-.49.13-.15.29-.29.46-.44zm8.5-1.56c-.23-.35-.54-.57-.95-.65v-.02c.34-.13.6-.34.76-.63.16-.29.24-.63.24-1.02 0-.34-.06-.64-.19-.9s-.3-.47-.51-.64c-.21-.17-.45-.3-.72-.38-.27-.09-.54-.13-.82-.13-.36 0-.68.07-.96.2-.28.13-.53.32-.72.55-.2.23-.36.51-.47.83-.11.32-.18.66-.19 1.04h1.15c-.01-.2.01-.39.06-.58.05-.19.12-.36.22-.51.1-.15.22-.27.37-.36.15-.09.32-.13.53-.13.32 0 .59.1.79.3.21.2.31.46.31.79 0 .23-.05.43-.14.59-.09.16-.21.29-.35.38-.15.09-.32.16-.51.19-.19.04-.38.05-.57.04v.93c.23-.01.45 0 .67.02.22.02.42.08.59.17.18.09.32.23.43.4.11.18.16.41.16.71 0 .44-.13.78-.39 1.02s-.58.36-.97.36c-.45 0-.79-.16-1.02-.47-.23-.31-.33-.7-.32-1.17H11c.01.4.06.77.17 1.1.11.33.26.61.47.85.21.23.46.42.77.54.31.13.67.19 1.08.19.34 0 .66-.05.96-.16.3-.11.57-.27.8-.47.23-.2.41-.45.55-.74.13-.27.2-.6.2-.97 0-.5-.11-.92-.34-1.27z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-tree-node-label"
>
<span
class="bp3-popover-wrapper"
>
<span
class="bp3-popover-target bp3-popover-open"
>
<div
class=""
}
defaultIsOpen={false}
disabled={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={300}
hoverOpenDelay={150}
inheritDarkTheme={true}
interactionKind="click"
minimal={false}
modifiers={Object {}}
openOnTargetFocus={true}
position="right"
targetClassName="bp3-popover-open"
targetTagName="span"
transitionDuration={300}
usePortal={true}
wrapperTagName="span"
>
added
</div>
</span>
</span>
</span>
</div>
<div
class="bp3-collapse"
>
<div
aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(-0px);"
</Blueprint3.Popover>,
},
Object {
"icon": "numerical",
"id": "addedBy10",
"label": <Blueprint3.Popover
autoFocus={false}
boundary="window"
captureDismiss={false}
content={
<Memo(Deferred)
content={[Function]}
/>
</div>
</li>
<li
class="bp3-tree-node"
>
<div
class="bp3-tree-node-content bp3-tree-node-content-1"
>
<span
class="bp3-tree-node-caret-none"
/>
<span
class="bp3-icon bp3-icon-numerical bp3-tree-node-icon"
icon="numerical"
>
<svg
data-icon="numerical"
height="16"
viewBox="0 0 16 16"
width="16"
>
<desc>
numerical
</desc>
<path
d="M2.79 4.61c-.13.17-.29.3-.48.41-.18.11-.39.18-.62.23-.23.04-.46.07-.71.07v1.03h1.74V12h1.26V4h-.94c-.04.23-.12.44-.25.61zm4.37 5.31c.18-.14.37-.28.58-.42l.63-.45c.21-.16.41-.33.61-.51s.37-.38.52-.59c.15-.21.28-.45.37-.7.09-.25.13-.54.13-.85 0-.25-.04-.52-.12-.8-.07-.29-.2-.55-.39-.79a2.18 2.18 0 00-.73-.6c-.29-.15-.66-.23-1.11-.23-.41 0-.77.08-1.08.23-.31.16-.58.37-.79.64-.22.27-.38.59-.49.96-.11.37-.16.77-.16 1.2h1.19c.01-.27.03-.53.08-.77.04-.24.11-.45.21-.62.09-.18.22-.32.38-.42.16-.1.35-.15.59-.15.26 0 .47.05.63.14.15.09.28.21.37.35.09.14.15.29.18.45.03.16.05.31.05.45-.01.31-.08.58-.22.82-.14.23-.32.45-.53.65-.22.21-.46.39-.71.57-.26.18-.51.36-.75.54-.5.36-.89.78-1.17 1.27-.28.49-.43 1.06-.44 1.71h5v-1.15H6.43c.05-.17.14-.33.27-.49.13-.15.29-.29.46-.44zm8.5-1.56c-.23-.35-.54-.57-.95-.65v-.02c.34-.13.6-.34.76-.63.16-.29.24-.63.24-1.02 0-.34-.06-.64-.19-.9s-.3-.47-.51-.64c-.21-.17-.45-.3-.72-.38-.27-.09-.54-.13-.82-.13-.36 0-.68.07-.96.2-.28.13-.53.32-.72.55-.2.23-.36.51-.47.83-.11.32-.18.66-.19 1.04h1.15c-.01-.2.01-.39.06-.58.05-.19.12-.36.22-.51.1-.15.22-.27.37-.36.15-.09.32-.13.53-.13.32 0 .59.1.79.3.21.2.31.46.31.79 0 .23-.05.43-.14.59-.09.16-.21.29-.35.38-.15.09-.32.16-.51.19-.19.04-.38.05-.57.04v.93c.23-.01.45 0 .67.02.22.02.42.08.59.17.18.09.32.23.43.4.11.18.16.41.16.71 0 .44-.13.78-.39 1.02s-.58.36-.97.36c-.45 0-.79-.16-1.02-.47-.23-.31-.33-.7-.32-1.17H11c.01.4.06.77.17 1.1.11.33.26.61.47.85.21.23.46.42.77.54.31.13.67.19 1.08.19.34 0 .66-.05.96-.16.3-.11.57-.27.8-.47.23-.2.41-.45.55-.74.13-.27.2-.6.2-.97 0-.5-.11-.92-.34-1.27z"
fill-rule="evenodd"
/>
</svg>
</span>
<span
class="bp3-tree-node-label"
>
<span
class="bp3-popover-wrapper"
>
<span
class="bp3-popover-target bp3-popover-open"
>
<div
class=""
}
defaultIsOpen={false}
disabled={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={300}
hoverOpenDelay={150}
inheritDarkTheme={true}
interactionKind="click"
minimal={false}
modifiers={Object {}}
openOnTargetFocus={true}
position="right"
targetClassName="bp3-popover-open"
targetTagName="span"
transitionDuration={300}
usePortal={true}
wrapperTagName="span"
>
addedBy10
</div>
</span>
</span>
</span>
</div>
<div
class="bp3-collapse"
>
<div
aria-hidden="false"
class="bp3-collapse-body"
style="transform: translateY(-0px);"
</Blueprint3.Popover>,
},
],
"icon": "th",
"id": "wikipedia",
"isExpanded": true,
"label": <Blueprint3.Popover
boundary="window"
captureDismiss={false}
content={
<Memo(Deferred)
content={[Function]}
/>
}
defaultIsOpen={false}
disabled={false}
fill={false}
hasBackdrop={false}
hoverCloseDelay={300}
hoverOpenDelay={150}
inheritDarkTheme={true}
interactionKind="click"
minimal={false}
modifiers={Object {}}
openOnTargetFocus={true}
position="right"
targetTagName="span"
transitionDuration={300}
usePortal={true}
wrapperTagName="span"
>
wikipedia
</Blueprint3.Popover>,
},
]
}
onNodeCollapse={[Function]}
onNodeExpand={[Function]}
/>
</div>
</li>
</ul>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
`;

View File

@ -16,8 +16,12 @@
* limitations under the License.
*/
@import '../../../blueprint-overrides/common/colors';
.column-tree {
background: #27313b;
.bp3-dark & {
background: $dark-gray3;
}
.schema-selector {
position: absolute;
@ -41,7 +45,14 @@
}
}
.bp3-popover-wrapper {
width: 188px;
display: inline-block;
.bp3-popover-target {
width: 100%;
display: inline-block;
cursor: pointer;
}
}
}

View File

@ -16,17 +16,17 @@
* limitations under the License.
*/
import { render } from '@testing-library/react';
import { SqlQuery } from 'druid-query-toolkit';
import { shallow } from 'enzyme';
import React from 'react';
import { ColumnMetadata } from '../../../utils/column-metadata';
import { ColumnMetadata } from '../../../utils';
import { ColumnTree } from './column-tree';
describe('column tree', () => {
describe('ColumnTree', () => {
it('matches snapshot', () => {
const columnTree = (
const columnTree = shallow(
<ColumnTree
getParsedQuery={() => {
return SqlQuery.parse(`SELECT channel, count(*) as cnt FROM wikipedia GROUP BY 1`);
@ -63,10 +63,9 @@ describe('column tree', () => {
] as ColumnMetadata[]
}
onQueryChange={() => {}}
/>
/>,
);
const { container } = render(columnTree);
expect(container.firstChild).toMatchSnapshot();
expect(columnTree).toMatchSnapshot();
});
});

View File

@ -305,7 +305,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
/>
}
>
<div>{tableName}</div>
{tableName}
</Popover>
),
childNodes: metadata
@ -384,7 +384,7 @@ export class ColumnTree extends React.PureComponent<ColumnTreeProps, ColumnTreeS
/>
}
>
<div>{columnData.COLUMN_NAME}</div>
{columnData.COLUMN_NAME}
</Popover>
),
}),

View File

@ -16,22 +16,25 @@
* limitations under the License.
*/
@import '../../../variables';
@import '../../../blueprint-overrides/common/colors';
.live-query-mode-selector {
.auto.auto-on {
color: #7ce87c;
color: $druid-brand;
}
.on {
color: #7ce87c;
color: $druid-brand;
}
}
.live-query-mode-selector-portal {
.auto.auto-on .bp3-text-overflow-ellipsis {
color: #7ce87c;
color: $druid-brand;
}
.on .bp3-text-overflow-ellipsis {
color: #7ce87c;
color: $druid-brand;
}
}

View File

@ -16,14 +16,19 @@
* limitations under the License.
*/
@import '../../../blueprint-overrides/common/colors';
.query-error {
background: #232d35;
padding: 20px 22px;
.bp3-dark & {
background: $dark-gray3;
}
.cursor-link,
.more-or-less,
.suggestion {
color: #2aabd2;
color: $blue4;
text-decoration: underline;
cursor: pointer;
}

View File

@ -29,7 +29,7 @@ exports[`query input matches snapshot 1`] = `
<div
class=" ace_editor ace-tm ace_focus"
id="ace-editor"
style="width: 100%; height: 200px; font-size: 14px;"
style="width: 100%; height: 200px; font-size: 13px;"
>
<textarea
autocapitalize="off"
@ -61,7 +61,7 @@ exports[`query input matches snapshot 1`] = `
>
<div
class="ace_print-margin"
style="left: 4px; visibility: hidden;"
style="left: 10px; visibility: hidden;"
/>
</div>
<div
@ -69,7 +69,7 @@ exports[`query input matches snapshot 1`] = `
/>
<div
class="ace_layer ace_text-layer"
style="padding: 0px 4px;"
style="padding: 0px 10px;"
/>
<div
class="ace_layer ace_marker-layer"

View File

@ -17,6 +17,7 @@
*/
@import '../../../variables';
@import '../../../blueprint-overrides/common/colors';
.query-input {
.ace-container {
@ -25,24 +26,47 @@
height: 100%;
.ace-solarized-dark {
background-color: #232c35;
background-color: transparent;
}
.ace_gutter-layer {
background-color: #27313c;
width: 50px;
.ace_gutter {
background-color: $gray5;
color: $gray1;
.bp3-dark & {
background-color: $dark-gray4;
color: $gray5;
}
}
.ace_placeholder {
// This padding is needed because there is a bug in this current version of ACE Editor where the padding set in
// code is not being applied to the placeholder element
margin-top: 10px;
}
.ace_gutter-active-line {
background-color: rgba($gray1, 0.6);
}
.ace_text-layer {
filter: brightness(1.3) saturate(0.8);
}
}
}
.ace_tooltip {
padding: 10px;
background-color: #333d47;
color: #c1ccd5;
width: 500px;
display: block;
height: auto;
white-space: initial;
background: $gray2;
.bp3-dark & {
background: $dark-gray2;
}
hr {
margin: 10px 0;

View File

@ -238,7 +238,7 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
name="ace-editor"
onChange={this.handleChange}
focus
fontSize={14}
fontSize={13}
width="100%"
height={`${editorHeight}px`}
showPrintMargin={false}
@ -255,6 +255,8 @@ export class QueryInput extends React.PureComponent<QueryInputProps, QueryInputS
style={{}}
placeholder="SELECT * FROM ..."
onLoad={(editor: any) => {
editor.renderer.setPadding(10);
editor.renderer.setScrollMargin(10);
this.aceEditor = editor;
}}
/>

View File

@ -16,6 +16,9 @@
* limitations under the License.
*/
@import '../../../variables';
@import '../../../blueprint-overrides/common/colors';
.query-output {
.ReactTable {
position: absolute;
@ -25,10 +28,12 @@
font-feature-settings: tnum;
font-variant-numeric: tabular-nums;
.rt-thead {
.rt-thead.-header {
box-shadow: 0 1px 0 0 rgba(black, 0.2); // This is a hack! this line is sometimes too weak in tables.
.rt-th {
&.aggregate-header {
background: rgb(75, 122, 148);
background: rgba($druid-brand, 0.06);
}
&.renaming {
@ -64,6 +69,6 @@
}
.aggregate-column {
background-color: rgba(98, 205, 255, 0.1);
background-color: rgba($druid-brand, 0.06);
}
}

View File

@ -29,10 +29,11 @@ import {
import React, { useState } from 'react';
import ReactTable from 'react-table';
import { TableCell } from '../../../components';
import { BracedText, TableCell } from '../../../components';
import { ShowValueDialog } from '../../../dialogs/show-value-dialog/show-value-dialog';
import { copyAndAlert, prettyPrintSql } from '../../../utils';
import { copyAndAlert, filterMap, prettyPrintSql } from '../../../utils';
import { BasicAction, basicActionsToMenu } from '../../../utils/basic-action';
import { deepSet } from '../../../utils/object-change';
import { ColumnRenameInput } from './column-rename-input/column-rename-input';
@ -54,6 +55,34 @@ function stringifyValue(value: unknown): string {
}
}
interface Pagination {
page: number;
pageSize: number;
}
function getNumericColumnBraces(
queryResult: QueryResult | undefined,
pagination: Pagination,
): Record<number, string[]> {
const numericColumnBraces: Record<number, string[]> = {};
if (queryResult) {
const index = pagination.page * pagination.pageSize;
const rows = queryResult.rows.slice(index, index + pagination.pageSize);
if (rows.length) {
const numColumns = queryResult.header.length;
for (let c = 0; c < numColumns; c++) {
const brace = filterMap(rows, row =>
typeof row[c] === 'number' ? String(row[c]) : undefined,
);
if (rows.length === brace.length) {
numericColumnBraces[c] = brace;
}
}
}
}
return numericColumnBraces;
}
export interface QueryOutputProps {
queryResult?: QueryResult;
onQueryChange: (query: SqlQuery, run?: boolean) => void;
@ -63,6 +92,7 @@ export interface QueryOutputProps {
export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputProps) {
const { queryResult, onQueryChange, runeMode } = props;
const parsedQuery = queryResult ? queryResult.sqlQuery : undefined;
const [pagination, setPagination] = useState<Pagination>({ page: 0, pageSize: 20 });
const [showValue, setShowValue] = useState<string>();
const [renamingColumn, setRenamingColumn] = useState<number>(-1);
@ -341,11 +371,16 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
}
}
const numericColumnBraces = getNumericColumnBraces(queryResult, pagination);
return (
<div className="query-output">
<ReactTable
data={queryResult ? (queryResult.rows as any[][]) : []}
noDataText={queryResult && !queryResult.rows.length ? 'Query returned no data' : ''}
page={pagination.page}
pageSize={pagination.pageSize}
onPageChange={page => setPagination(deepSet(pagination, 'page', page))}
onPageSizeChange={(pageSize, page) => setPagination({ page, pageSize })}
sortable={false}
columns={(queryResult ? queryResult.header : []).map((column, i) => {
const h = column.name;
@ -372,7 +407,15 @@ export const QueryOutput = React.memo(function QueryOutput(props: QueryOutputPro
return (
<div>
<Popover content={getCellMenu(h, i, value)}>
{numericColumnBraces[i] ? (
<BracedText
text={String(value)}
braces={numericColumnBraces[i]}
padFractionalPart
/>
) : (
<TableCell value={value} unlimited />
)}
</Popover>
</div>
);

View File

@ -30,13 +30,14 @@ $nav-width: 250px;
left: 0;
height: 100%;
width: $nav-width;
@include card-like;
}
.splitter-layout {
position: absolute;
top: 0;
height: 100%;
left: $nav-width + $standard-padding;
left: $nav-width + $thin-padding;
right: 0;
width: auto;
@ -51,7 +52,9 @@ $nav-width: 250px;
top: 0;
left: 0;
right: 0;
bottom: 30px + $standard-padding;
bottom: 30px + $thin-padding;
@include card-like;
overflow: hidden;
}
.control-bar {
@ -64,10 +67,10 @@ $nav-width: 250px;
margin-right: 10px;
}
.smart-query-limit {
.auto-limit {
display: inline-block;
margin-bottom: 6px;
font-size: 14px;
font-size: $pt-font-size;
.bp3-control-indicator {
margin-top: -1px;
@ -85,7 +88,7 @@ $nav-width: 250px;
&.splitter-layout-vertical > .layout-splitter {
height: 3px;
background-color: #6d8ea9;
background-color: $gray1;
}
.output-pane {
@ -93,6 +96,8 @@ $nav-width: 250px;
width: 100%;
top: 10px;
bottom: 0;
@include card-like;
overflow: hidden;
> * {
position: absolute;
@ -101,13 +106,12 @@ $nav-width: 250px;
}
.init-state {
background: #232d35;
text-align: center;
p {
position: relative;
top: 38%;
font-size: 14px;
font-size: 15px;
}
}
}

View File

@ -426,9 +426,9 @@ export class QueryView extends React.PureComponent<QueryViewProps, QueryViewStat
hoverOpenDelay={800}
>
<Switch
className="smart-query-limit"
className="auto-limit"
checked={Boolean(wrapQueryLimit)}
label="Smart query limit"
label="Auto limit"
onChange={() => this.handleWrapQueryLimitChange(wrapQueryLimit ? undefined : 100)}
/>
</Tooltip>

View File

@ -31,10 +31,5 @@
.-totalPages {
display: none;
}
.segment-detail {
padding: 20px;
background: #212d36;
}
}
}

View File

@ -20,7 +20,10 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1"
/>
<title>Apache Druid</title>
<meta name="description" content="Apache Druid console" />
<link rel="shortcut icon" href="favicon.png" />

View File

@ -57,7 +57,7 @@ module.exports = env => {
path: path.resolve(__dirname, './public'),
filename: `[name]-${version}.js`,
chunkFilename: `[name]-${version}.js`,
publicPath: '/public',
publicPath: 'public/',
},
target: 'web',
resolve: {
@ -129,6 +129,15 @@ module.exports = env => {
{ loader: 'sass-loader' }, // compiles Sass to CSS, using Node Sass by default
],
},
{
test: /\.(woff|woff2|ttf|eot)$/,
use: {
loader: 'file-loader',
options: {
name: '[name].[ext]'
}
}
}
],
},
performance: {