From 88632b8222165a0606876cf72fc411a82df0edb8 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Tue, 22 Sep 2020 15:31:42 -0700 Subject: [PATCH 01/21] no hardcoded dark mode --- .../src/bootstrap/react-table-custom-pagination.scss | 10 ++++++++-- .../src/components/header-bar/header-bar.scss | 12 ++++++++++++ web-console/src/components/header-bar/header-bar.tsx | 12 ++++++------ .../views/query-view/column-tree/column-tree.scss | 4 +++- .../views/query-view/query-error/query-error.scss | 5 ++++- .../src/views/segments-view/segments-view.scss | 5 ----- 6 files changed, 33 insertions(+), 15 deletions(-) diff --git a/web-console/src/bootstrap/react-table-custom-pagination.scss b/web-console/src/bootstrap/react-table-custom-pagination.scss index 3d6a18b0f756..f37a25ff0ae6 100644 --- a/web-console/src/bootstrap/react-table-custom-pagination.scss +++ b/web-console/src/bootstrap/react-table-custom-pagination.scss @@ -19,18 +19,24 @@ .ReactTable { .-pageJump { .bp3-input { - background-color: #374653; position: relative; top: -2px; + + .bp3-dark & { + background-color: #374653; + } } } .-pageSizeOptions { .bp3-html-select select { - background-color: #394b59; width: 90px; position: relative; top: -2px; + + .bp3-dark & { + background-color: #394b59; + } } } } diff --git a/web-console/src/components/header-bar/header-bar.scss b/web-console/src/components/header-bar/header-bar.scss index d21c922ca45d..d0d9572ea1f1 100644 --- a/web-console/src/components/header-bar/header-bar.scss +++ b/web-console/src/components/header-bar/header-bar.scss @@ -33,6 +33,18 @@ left: 50%; transform: translate(-50%, -50%); height: 75px; + + .letter { + fill: #000000; + + .bp3-dark & { + fill: #ffffff; + } + } + + .swirl { + fill: #2ceefb; + } } } diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx index 31cd0fdbf5c4..bfb646b19f7f 100644 --- a/web-console/src/components/header-bar/header-bar.tsx +++ b/web-console/src/components/header-bar/header-bar.tsx @@ -66,39 +66,39 @@ const DruidLogo = React.memo(function DruidLogo() { height="134" > CURRENT_YEAR ? undefined : endDate, + startDate && startDate.getFullYear() < CURRENT_YEAR - 20 ? null : startDate, + endDate && endDate.getFullYear() > CURRENT_YEAR ? null : endDate, ]; } function stringifyDateRange(localRange: DateRange): string { From f08d7db9daa97dd42d558212846e1d80cd454d49 Mon Sep 17 00:00:00 2001 From: asherbitter Date: Thu, 8 Oct 2020 17:47:50 +0200 Subject: [PATCH 03/21] style pass --- web-console/favicon.png | Bin 1644 -> 1156 bytes web-console/lib/react-table.styl | 31 +++-- .../src/blueprint-overrides/_index.scss | 6 + .../common/_color-aliases.scss | 58 +++++++++ .../blueprint-overrides/common/_colors.scss | 116 ++++++++++++++++- .../common/_variables.scss | 120 ++++++++++++++++++ .../components/button/_common.scss | 102 +++++++++++++++ .../components/card/_card.scss | 22 ++++ .../components/forms/_common.scss | 43 +++++++ .../components/navbar/_navbar.scss | 22 ++++ .../react-table-custom-pagination.scss | 9 +- .../src/components/header-bar/header-bar.scss | 49 ++++++- .../src/components/header-bar/header-bar.tsx | 48 +------ .../view-control-bar/view-control-bar.scss | 6 +- web-console/src/console-application.scss | 11 +- web-console/src/console-application.tsx | 3 +- web-console/src/entry.scss | 4 +- web-console/src/variables.scss | 21 +++ .../home-view-card/home-view-card.scss | 30 ++++- .../home-view-card/home-view-card.tsx | 2 +- .../src/views/home-view/home-view.scss | 18 ++- .../views/ingestion-view/ingestion-view.scss | 3 +- .../filter-table/filter-table.scss | 7 +- .../views/load-data-view/load-data-view.scss | 85 +++++++++---- .../views/load-data-view/load-data-view.tsx | 33 ++--- .../parse-data-table/parse-data-table.scss | 7 +- .../schema-table/schema-table.scss | 23 ++-- .../transform-table/transform-table.scss | 7 +- .../query-view/column-tree/column-tree.scss | 4 +- .../live-query-mode-selector.scss | 11 +- .../query-view/query-error/query-error.scss | 6 +- .../query-view/query-input/query-input.scss | 17 ++- .../query-view/query-input/query-input.tsx | 4 +- .../query-view/query-output/query-output.scss | 11 +- .../src/views/query-view/query-view.scss | 13 +- web-console/unified-console.html | 5 +- 36 files changed, 793 insertions(+), 164 deletions(-) create mode 100644 web-console/src/blueprint-overrides/common/_color-aliases.scss create mode 100644 web-console/src/blueprint-overrides/common/_variables.scss create mode 100644 web-console/src/blueprint-overrides/components/button/_common.scss create mode 100644 web-console/src/blueprint-overrides/components/card/_card.scss create mode 100644 web-console/src/blueprint-overrides/components/forms/_common.scss create mode 100644 web-console/src/blueprint-overrides/components/navbar/_navbar.scss diff --git a/web-console/favicon.png b/web-console/favicon.png index ffe7cb4a3cb90fa2add0b7c5b93e8acd01631c08..96b9aff6791eb0e7ac3eb34d904a86227f3ec350 100644 GIT binary patch literal 1156 zcmV-~1bh35P)9(dC8rw}1A8fR~NFi-$)rjbe zR;1V$8;TDFpZq2Dhk_`ASSo@DRTM?jmEwbFwAeP-`cjD)4N00T)zSu%o85GO?(TTb z?B3?fXKR z%=n80dX&H$mr}AgPo&70cS4~%-xwSFF5@TXYXI-svU1&9b#-l#BO z^X87OTuz=LkZ27+OD#zNf&GcZpT9eWTn3bOez6YVHfDl6vBT+!fX(4EFS&iScWy&) zA7u>2vL`ir(AcQGO5+1IUB^C}&(BKJoEc&abp%D%TVvHk``XKN)t6{;K8eEg739wT zjLat=L#9$b(jukndOIJ5I)c(Yukot6^^4{vXxm~4Ki7}u!80&=_qYWVB^!&F%K?vQqLbj?x!DJa-6Ip5#u&39B%2AQXX<~S3t=5 zc@!qbksbURC={Ug+y`UlPUOCgLoO^hHHWfUoYOhCJ7?{&eb%#Gob~~mw)uWN0~97F zkooKsvhmYMpF9DrvlGUHyAVEn1PjMr^DL8nfzrd`Vbn&7h6Z*14X?k2(34LoCFu`O zs@~|`U7?h*MKszmN?zDf!L4CJw6q}fNFTySUr@(jKKd|3&_LwEB?!a7+ygz3$)rQG z_=|4=KdYwqTizw zg&Q}J{-_vy!F>-YwsrAWuNc!;1I04RkM}?4(rL(R*O2?+d!!CNt=z43+>PMlPbfv1 zQfxT2GB$ZY#OW6FI~mTgod=wA)r_^SZZy63KA>sHQeNQvP}xLW=K|6+3+75wv1o2a zU_%svO`8zhy%)xwy|gz0>%w{5eE01N>|!d`hSY1gabw2^l#UNqNcl|IF=2bgrYl4# z>a$;ciJQmYgv`-Z^fV#FiRtOlehxzNl0INr)-%;S#~wXpQqo;oICCVJUgbtQ1N)s7G3zfMfekh>F?yLxXQEg0IQYY4hxeO+G0Ro4Z2XqX3UYZIz`PGm4(@Y!>hwnNxK7M}AZ=EX!`~)~IZpp`~*O+>Jp8p4_ W+@ISyT9YmGAulag=} zR&pzYgXYio9Xb^NFX76jRCw*x?Wga1zIkcOKCIDNGpfM^0hTmk^Inp4~h z0FH107#09vB?4esSl%@^YXDg3uG`!lA;b_7NO_QOAf^x^2mnMFI=Ns;1->G~(poIN zhD&R3Q5j0jguX#Ym`YU)RnAi-!%;DuS%$t+lb+}JVi^Po9X*cXQ_%5bl#z=|DoOhz z`clc6W9Z;(d`=9J#sb0}KDeZcj!cr4PRO@`07AlpJAFwc$yAPk~@#+_&mxN(@6#$IEW6#;Ko~6 z)`mhO=mbM<-Y3oN^bLc8LQ!xSX}L?s)F|x?c{)u094DF>Kb)jvbI3XtDDg7Jt#9D z%YMU>N}PKUdhBKxCcd}UP*Yhg|1Y*W^hD@HY|@Z-!<@Vi0l-=LcC;eJpB>d47aexq z?zl*?aEZ3AWsc(WLQS1pogM7ly{`Y2-M#A%0c=&B$m@65?^Dk5H(k4*v4DAY!d z?mEd2Xn%8}ZeC6JGo$Io`e~zT;fLXjY1b^^2RXe?SiHU)KaQiK8?xTdN#Vm=0Z4t7} z$T#Oy@>Irh^W{ahpA=L3CM~mvg_}Rv9AW6O=2Wzk$On@LD|)jI6zl$n=jHh%nN^_o zj^6C17;D#W0)Jc_xH^($^7ZtJ*e_l0uqKD|Pu;!riAZHiCUY{@n|QxjvCSl~&*Xoe z!NTS~oZZz`apAfk@)0`|ZJoWLCuJqMrFW*9if)RwU9vFKGudnw^h;Xa<8a09_pNol z6>VDMQu~9v)GS7jSa-87vp%_HZp{u;!wn+guBg-8_+#_51!R6NJm;sC>Jf%aa9;u93?+;J$!FnI9AXz4Fs_ zwqY;EGu(^N{EPBc=|y?2P0I(roH4ikxWIa8xKHcZ@vC6znIdu6o#PGVdRaCGt2SQr zoDeGd#jTtSdz}P!vcJtk&WB}Rd&H#Fl{~cAQt)xMmtS|8ocq{ZyE4?r&$I9-+c36R>7}|nXVI7=t=u4Q2$~bvxK$@TQ!1L|Kk0_7Osm_HP*-9ckTO$l z%UZx54^_U~wp7|25p~R4Q*zV8j$ViN_#FRqF1@{J*ynQ3!?C9c9W-k!_4IFgNga7~l diff --git a/web-console/lib/react-table.styl b/web-console/lib/react-table.styl index 372dc03405ce..709bd142044c 100644 --- a/web-console/lib/react-table.styl +++ b/web-console/lib/react-table.styl @@ -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 diff --git a/web-console/src/blueprint-overrides/_index.scss b/web-console/src/blueprint-overrides/_index.scss index 0c058ce016f4..c91e9a48501e 100644 --- a/web-console/src/blueprint-overrides/_index.scss +++ b/web-console/src/blueprint-overrides/_index.scss @@ -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'; \ No newline at end of file diff --git a/web-console/src/blueprint-overrides/common/_color-aliases.scss b/web-console/src/blueprint-overrides/common/_color-aliases.scss new file mode 100644 index 000000000000..f7a59a129465 --- /dev/null +++ b/web-console/src/blueprint-overrides/common/_color-aliases.scss @@ -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 !default; +$pt-intent-success: $green3 !default; +$pt-intent-warning: $orange3 !default; +$pt-intent-danger: $red3 !default; + +$pt-app-background-color: $light-gray5 !default; +$pt-dark-app-background-color: $dark-gray3 !default; + +$pt-outline-color: rgba($blue3, 0.6); + +$pt-text-color: $dark-gray1 !default; +$pt-text-color-muted: $gray1 !default; +$pt-text-color-disabled: rgba($pt-text-color-muted, 0.6) !default; +$pt-heading-color: $pt-text-color !default; +$pt-link-color: $blue2 !default; +$pt-dark-text-color: $light-gray5 !default; +$pt-dark-text-color-muted: $gray4 !default; +$pt-dark-text-color-disabled: rgba($pt-dark-text-color-muted, 1); +$pt-dark-heading-color: $pt-dark-text-color !default; +$pt-dark-link-color: $blue5 !default; +// Default text selection color using #7dbcff +$pt-text-selection-color: rgba(125, 188, 255, 0.6) !default; + +$pt-icon-color: $pt-text-color-muted !default; +$pt-icon-color-hover: $pt-text-color !default; +$pt-icon-color-disabled: $pt-text-color-disabled !default; +$pt-icon-color-selected: $pt-intent-primary !default; +$pt-dark-icon-color: $pt-dark-text-color-muted !default; +$pt-dark-icon-color-hover: $pt-dark-text-color !default; +$pt-dark-icon-color-disabled: $pt-dark-text-color-disabled !default; +$pt-dark-icon-color-selected: $pt-intent-primary !default; + +$pt-divider-black: rgba($black, 0.15) !default; +$pt-dark-divider-black: rgba($black, 0.4) !default; +$pt-dark-divider-white: rgba($white, 0.15) !default; + +$pt-code-text-color: $pt-text-color-muted !default; +$pt-dark-code-text-color: $pt-dark-text-color-muted !default; +$pt-code-background-color: rgba($white, 0.7) !default; +$pt-dark-code-background-color: rgba($black, 0.3) !default; \ No newline at end of file diff --git a/web-console/src/blueprint-overrides/common/_colors.scss b/web-console/src/blueprint-overrides/common/_colors.scss index 92e532c385f1..d74cfb75f12b 100644 --- a/web-console/src/blueprint-overrides/common/_colors.scss +++ b/web-console/src/blueprint-overrides/common/_colors.scss @@ -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; \ No newline at end of file diff --git a/web-console/src/blueprint-overrides/common/_variables.scss b/web-console/src/blueprint-overrides/common/_variables.scss new file mode 100644 index 000000000000..2aed672066b0 --- /dev/null +++ b/web-console/src/blueprint-overrides/common/_variables.scss @@ -0,0 +1,120 @@ +/* + * 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 !default; + +// easily the most important variable, so it comes up top +// (so other variables can use it to define themselves) +$pt-grid-size: 10px !default; + +// 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 !default; + +$pt-font-size: $pt-grid-size * 1.3 !default; +$pt-font-size-large: $pt-grid-size * 1.6 !default; +$pt-font-size-small: $pt-grid-size * 1.2 !default; + +// 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 !default; + +// Icon variables + +$icons16-family: "Icons16" !default; +$icons20-family: "Icons20" !default; + +$pt-icon-size-standard: 16px !default; +$pt-icon-size-large: 20px !default; + +// Grids & dimensions + +$pt-border-radius: 3px; + +// Buttons +$pt-button-height: $pt-grid-size * 3 !default; +$pt-button-height-small: $pt-grid-size * 2.4 !default; +$pt-button-height-smaller: $pt-grid-size * 2 !default; +$pt-button-height-large: $pt-grid-size * 4 !default; + +// Inputs +$pt-input-height: $pt-grid-size * 3 !default; +$pt-input-height-large: $pt-grid-size * 4 !default; +$pt-input-height-small: $pt-grid-size * 2.4 !default; + +// Others +$pt-navbar-height: $pt-grid-size * 5 !default; + +// Z-indices +$pt-z-index-base: 0 !default; +$pt-z-index-content: $pt-z-index-base + 10 !default; +$pt-z-index-overlay: $pt-z-index-content + 10 !default; + +// Shadow opacities +$pt-border-shadow-opacity: 0.1 !default; +$pt-drop-shadow-opacity: 0.16 !default; +$pt-dark-border-shadow-opacity: $pt-border-shadow-opacity * 2.8 !default; +$pt-dark-drop-shadow-opacity: $pt-drop-shadow-opacity * 2.8 !default; + +// 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 !default; +$pt-popover-box-shadow: $pt-elevation-shadow-3 !default; +$pt-tooltip-box-shadow: $pt-popover-box-shadow !default; + +// 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 !default; +$pt-dark-popover-box-shadow: $pt-dark-elevation-shadow-3 !default; +$pt-dark-tooltip-box-shadow: $pt-dark-popover-box-shadow !default; diff --git a/web-console/src/blueprint-overrides/components/button/_common.scss b/web-console/src/blueprint-overrides/components/button/_common.scss new file mode 100644 index 000000000000..130859fe4ea7 --- /dev/null +++ b/web-console/src/blueprint-overrides/components/button/_common.scss @@ -0,0 +1,102 @@ +/* + * Licensed to the Apache Software Foundation (ASF) under one + * or more contributor license agreements. See the NOTICE file + * distributed with this work for additional information + * regarding copyright ownership. The ASF licenses this file + * to you under the Apache License, Version 2.0 (the + * "License"); you may not use this file except in compliance + * with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +$button-border-width: 1px !default; +$button-padding: ($pt-grid-size / 2) ($pt-grid-size * 1.3) !default; +$button-padding-small: 0 ($pt-grid-size * 0.7) !default; +$button-padding-large: ($pt-grid-size / 2) ($pt-grid-size * 1.5) !default; +$button-icon-spacing: ($pt-button-height - $pt-icon-size-standard) / 1.6 !default; +$button-icon-spacing-large: ($pt-button-height-large - $pt-icon-size-large) / 1.8 !default; + +/* +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) !default; +$button-box-shadow-active: + inset 0 0 0 $button-border-width rgba($black, 0.2), + inset 0 1px 2px rgba($black, 0.2) !default; +$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) !default; +$button-box-shadow-overlay-active: + 0 0 0 $button-border-width rgba($black, 0.2), + inset 0 1px 1px rgba($black, 0.1) !default; + +$dark-button-box-shadow: + 0 0 0 $button-border-width rgba($black, 0.4) !default; +$dark-button-box-shadow-active: + 0 0 0 $button-border-width rgba($black, 0.6), + inset 0 1px 2px rgba($black, 0.2) !default; +$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 !default; +$button-background-color: white; +$button-background-color-hover: $light-gray4 !default; +$button-background-color-active: $light-gray2 !default; +$button-background-color-disabled: rgba($light-gray1, 0.5) !default; +$button-background-color-active-disabled: rgba($light-gray1, 0.7) !default; +$button-intent-color-disabled: rgba($white, 0.6); +$dark-button-color-disabled: $pt-dark-text-color-disabled !default; +$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) !default; +$dark-button-background-color-active-disabled: rgba($dark-gray5, 0.7) !default; +$dark-button-intent-color-disabled: rgba($white, 0.3); + +$minimal-button-divider-width: 1px !default; +$minimal-button-background-color: none !default; +$minimal-button-background-color-hover: rgba($gray4, 0.3) !default; +$minimal-button-background-color-active: rgba($gray2, 0.3) !default; +$dark-minimal-button-background-color: none !default; +$dark-minimal-button-background-color-hover: rgba($gray3, 0.15) !default; +$dark-minimal-button-background-color-active: rgba($gray3, 0.3) !default; + +$button-outlined-width: 1px !default; +$button-outlined-border-intent-opacity: 0.6 !default; +$button-outlined-border-disabled-intent-opacity: 0.2 !default; + +// "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) +) !default; \ No newline at end of file diff --git a/web-console/src/blueprint-overrides/components/card/_card.scss b/web-console/src/blueprint-overrides/components/card/_card.scss new file mode 100644 index 000000000000..d00052ad33ce --- /dev/null +++ b/web-console/src/blueprint-overrides/components/card/_card.scss @@ -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 !default; + +$card-background-color: $white !default; +$dark-card-background-color: $dark-gray3; \ No newline at end of file diff --git a/web-console/src/blueprint-overrides/components/forms/_common.scss b/web-console/src/blueprint-overrides/components/forms/_common.scss new file mode 100644 index 000000000000..9b43394b1946 --- /dev/null +++ b/web-console/src/blueprint-overrides/components/forms/_common.scss @@ -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 !default; +$input-small-padding: $pt-input-height-small - $pt-icon-size-standard !default; +$input-font-weight: 400 !default; +$input-transition: box-shadow $pt-transition-duration $pt-transition-ease; + +$input-color: $pt-text-color !default; +$input-color-disabled: $button-color-disabled !default; +$input-placeholder-color: $pt-text-color-disabled !default; +$input-background-color: $white !default; +$input-background-color-disabled: rgba($light-gray1, 0.5) !default; +$input-shadow-color-focus: $pt-intent-primary !default; + +$dark-input-color: $pt-dark-text-color !default; +$dark-input-color-disabled: $dark-button-color-disabled !default; +$dark-input-placeholder-color: $pt-dark-text-color-disabled !default; +$dark-input-background-color: $dark-gray4; +$dark-input-background-color-disabled: rgba($dark-gray5, 0.5) !default; +$dark-input-shadow-color-focus: $pt-intent-primary !default; + +$control-indicator-size: $pt-icon-size-standard !default; +$control-indicator-size-large: $pt-icon-size-large !default; + +// 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; \ No newline at end of file diff --git a/web-console/src/blueprint-overrides/components/navbar/_navbar.scss b/web-console/src/blueprint-overrides/components/navbar/_navbar.scss new file mode 100644 index 000000000000..6ceff5617131 --- /dev/null +++ b/web-console/src/blueprint-overrides/components/navbar/_navbar.scss @@ -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 !default; + +$navbar-background-color: $white !default; +$dark-navbar-background-color: $dark-gray3; \ No newline at end of file diff --git a/web-console/src/bootstrap/react-table-custom-pagination.scss b/web-console/src/bootstrap/react-table-custom-pagination.scss index f37a25ff0ae6..1acacfe6633c 100644 --- a/web-console/src/bootstrap/react-table-custom-pagination.scss +++ b/web-console/src/bootstrap/react-table-custom-pagination.scss @@ -16,14 +16,18 @@ * limitations under the License. */ +@import '../blueprint-overrides/common/colors'; +@import '../blueprint-overrides/common/variables'; + .ReactTable { .-pageJump { .bp3-input { position: relative; top: -2px; + border: none; .bp3-dark & { - background-color: #374653; + background-color: $dark-gray4; } } } @@ -33,9 +37,10 @@ width: 90px; position: relative; top: -2px; + border: none; .bp3-dark & { - background-color: #394b59; + background-color: $dark-gray4; } } } diff --git a/web-console/src/components/header-bar/header-bar.scss b/web-console/src/components/header-bar/header-bar.scss index d0d9572ea1f1..30365db3be04 100644 --- a/web-console/src/components/header-bar/header-bar.scss +++ b/web-console/src/components/header-bar/header-bar.scss @@ -17,6 +17,7 @@ */ @import '../../variables'; +@import '../../blueprint-overrides/common/colors'; .header-bar { overflow: hidden; @@ -32,18 +33,24 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); - height: 75px; + height: 48px; .letter { - fill: #000000; - - .bp3-dark & { - fill: #ffffff; - } + fill: $dark-gray2; } .swirl { - fill: #2ceefb; + fill: $druid-brand2; + } + + .bp3-dark & { + .letter { + fill: $white; + } + + .swirl { + fill: $druid-brand; + } } } } @@ -51,4 +58,32 @@ * { 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); + } + } + } } diff --git a/web-console/src/components/header-bar/header-bar.tsx b/web-console/src/components/header-bar/header-bar.tsx index bfb646b19f7f..01e48a881620 100644 --- a/web-console/src/components/header-bar/header-bar.tsx +++ b/web-console/src/components/header-bar/header-bar.tsx @@ -58,54 +58,16 @@ export type HeaderActiveTab = const DruidLogo = React.memo(function DruidLogo() { return (
- + - - - -
diff --git a/web-console/src/components/view-control-bar/view-control-bar.scss b/web-console/src/components/view-control-bar/view-control-bar.scss index 8293384e374f..8b4b71a22443 100644 --- a/web-console/src/components/view-control-bar/view-control-bar.scss +++ b/web-console/src/components/view-control-bar/view-control-bar.scss @@ -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 { diff --git a/web-console/src/console-application.scss b/web-console/src/console-application.scss index a0dd2d4f2d65..d3015b7cc5ef 100644 --- a/web-console/src/console-application.scss +++ b/web-console/src/console-application.scss @@ -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); + } } diff --git a/web-console/src/console-application.tsx b/web-console/src/console-application.tsx index 60941482b4c5..c8b9001d47f1 100644 --- a/web-console/src/console-application.tsx +++ b/web-console/src/console-application.tsx @@ -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', ); }; diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss index d2a088ce0d77..756ad6c38e76 100644 --- a/web-console/src/entry.scss +++ b/web-console/src/entry.scss @@ -34,8 +34,10 @@ body { } body { + background: $light-gray4; + &.bp3-dark { - background: rgb(41, 55, 66); + background: $dark-gray2; } &.mouse-mode { diff --git a/web-console/src/variables.scss b/web-console/src/variables.scss index ef3c7701db96..25690bcd3bdb 100644 --- a/web-console/src/variables.scss +++ b/web-console/src/variables.scss @@ -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; + } +} diff --git a/web-console/src/views/home-view/home-view-card/home-view-card.scss b/web-console/src/views/home-view/home-view-card/home-view-card.scss index 3c63840af55f..ef5eb2bb0663 100644 --- a/web-console/src/views/home-view/home-view-card/home-view-card.scss +++ b/web-console/src/views/home-view/home-view-card/home-view-card.scss @@ -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; } diff --git a/web-console/src/views/home-view/home-view-card/home-view-card.tsx b/web-console/src/views/home-view/home-view-card/home-view-card.tsx index e88f2569b568..9e4507173ad1 100644 --- a/web-console/src/views/home-view/home-view-card/home-view-card.tsx +++ b/web-console/src/views/home-view/home-view-card/home-view-card.tsx @@ -43,7 +43,7 @@ export const HomeViewCard = React.memo(function HomeViewCard(props: HomeViewCard href={href} target={href && href[0] === '/' ? '_blank' : undefined} > - +
 {title} diff --git a/web-console/src/views/home-view/home-view.scss b/web-console/src/views/home-view/home-view.scss index 9f892c4fb109..a7407dd0f09e 100644 --- a/web-console/src/views/home-view/home-view.scss +++ b/web-console/src/views/home-view/home-view.scss @@ -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; + } } diff --git a/web-console/src/views/ingestion-view/ingestion-view.scss b/web-console/src/views/ingestion-view/ingestion-view.scss index 3c2e436224e2..03771b8dc2d5 100644 --- a/web-console/src/views/ingestion-view/ingestion-view.scss +++ b/web-console/src/views/ingestion-view/ingestion-view.scss @@ -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 { diff --git a/web-console/src/views/load-data-view/filter-table/filter-table.scss b/web-console/src/views/load-data-view/filter-table/filter-table.scss index d57d3179ff33..87d2a3cb185f 100644 --- a/web-console/src/views/load-data-view/filter-table/filter-table.scss +++ b/web-console/src/views/load-data-view/filter-table/filter-table.scss @@ -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); } } } diff --git a/web-console/src/views/load-data-view/load-data-view.scss b/web-console/src/views/load-data-view/load-data-view.scss index 9e4c9880c0fe..cc0bd58d36a8 100644 --- a/web-console/src/views/load-data-view/load-data-view.scss +++ b/web-console/src/views/load-data-view/load-data-view.scss @@ -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: 10px 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,7 +162,7 @@ grid-area: navi; white-space: nowrap; overflow: auto; - padding: 0 5px; + padding: 5px 5px 0 5px; .step-section { display: inline-block; @@ -136,8 +171,8 @@ } .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; - } } diff --git a/web-console/src/views/load-data-view/load-data-view.tsx b/web-console/src/views/load-data-view/load-data-view.tsx index af6056d48f68..d39b7690fc01 100644 --- a/web-console/src/views/load-data-view/load-data-view.tsx +++ b/web-console/src/views/load-data-view/load-data-view.tsx @@ -520,7 +520,7 @@ export class LoadDataView extends React.PureComponent void) { return ( - +
{title} @@ -683,6 +683,7 @@ export class LoadDataView extends React.PureComponent { this.setState({ selectedComboType: selectedComboType !== comboType ? comboType : undefined, @@ -706,20 +707,22 @@ export class LoadDataView extends React.PureComponent -
- {this.renderIngestionCard('kafka')} - {this.renderIngestionCard('kinesis')} - {this.renderIngestionCard('azure-event-hubs')} - {this.renderIngestionCard('index_parallel:s3')} - {this.renderIngestionCard('index_parallel:azure')} - {this.renderIngestionCard('index_parallel:google')} - {this.renderIngestionCard('index_parallel:hdfs')} - {this.renderIngestionCard('index_parallel:druid')} - {this.renderIngestionCard('index_parallel:http')} - {this.renderIngestionCard('index_parallel:local')} - {this.renderIngestionCard('index_parallel:inline')} - {exampleManifestsUrl && this.renderIngestionCard('example', noExamples)} - {this.renderIngestionCard('other')} +
+
+ {this.renderIngestionCard('kafka')} + {this.renderIngestionCard('kinesis')} + {this.renderIngestionCard('azure-event-hubs')} + {this.renderIngestionCard('index_parallel:s3')} + {this.renderIngestionCard('index_parallel:azure')} + {this.renderIngestionCard('index_parallel:google')} + {this.renderIngestionCard('index_parallel:hdfs')} + {this.renderIngestionCard('index_parallel:druid')} + {this.renderIngestionCard('index_parallel:http')} + {this.renderIngestionCard('index_parallel:local')} + {this.renderIngestionCard('index_parallel:inline')} + {exampleManifestsUrl && this.renderIngestionCard('example', noExamples)} + {this.renderIngestionCard('other')} +
{welcomeMessage && {welcomeMessage}} diff --git a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.scss b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.scss index 294617e77776..af8487b219cd 100644 --- a/web-console/src/views/load-data-view/parse-data-table/parse-data-table.scss +++ b/web-console/src/views/load-data-view/parse-data-table/parse-data-table.scss @@ -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); } } diff --git a/web-console/src/views/load-data-view/schema-table/schema-table.scss b/web-console/src/views/load-data-view/schema-table/schema-table.scss index 763d59843428..7906e58afa16 100644 --- a/web-console/src/views/load-data-view/schema-table/schema-table.scss +++ b/web-console/src/views/load-data-view/schema-table/schema-table.scss @@ -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); } } } diff --git a/web-console/src/views/load-data-view/transform-table/transform-table.scss b/web-console/src/views/load-data-view/transform-table/transform-table.scss index 0b85f72b94da..513294ed4f0a 100644 --- a/web-console/src/views/load-data-view/transform-table/transform-table.scss +++ b/web-console/src/views/load-data-view/transform-table/transform-table.scss @@ -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); } } } diff --git a/web-console/src/views/query-view/column-tree/column-tree.scss b/web-console/src/views/query-view/column-tree/column-tree.scss index 1a896ef2c2e1..c4f5b95e87f2 100644 --- a/web-console/src/views/query-view/column-tree/column-tree.scss +++ b/web-console/src/views/query-view/column-tree/column-tree.scss @@ -16,9 +16,11 @@ * limitations under the License. */ +@import '../../../blueprint-overrides/common/colors'; + .column-tree { .bp3-dark & { - background: #27313b; + background: $dark-gray3; } .schema-selector { diff --git a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.scss b/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.scss index b524e52fb584..2f86be2442af 100644 --- a/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.scss +++ b/web-console/src/views/query-view/live-query-mode-selector/live-query-mode-selector.scss @@ -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; } } diff --git a/web-console/src/views/query-view/query-error/query-error.scss b/web-console/src/views/query-view/query-error/query-error.scss index d738faa1094f..821084fba200 100644 --- a/web-console/src/views/query-view/query-error/query-error.scss +++ b/web-console/src/views/query-view/query-error/query-error.scss @@ -16,17 +16,19 @@ * limitations under the License. */ +@import '../../../blueprint-overrides/common/colors'; + .query-error { padding: 20px 22px; .bp3-dark & { - background: #232d35; + background: $dark-gray3; } .cursor-link, .more-or-less, .suggestion { - color: #2aabd2; + color: $blue4; text-decoration: underline; cursor: pointer; } diff --git a/web-console/src/views/query-view/query-input/query-input.scss b/web-console/src/views/query-view/query-input/query-input.scss index 577750942aab..a26559f060f8 100644 --- a/web-console/src/views/query-view/query-input/query-input.scss +++ b/web-console/src/views/query-view/query-input/query-input.scss @@ -17,6 +17,7 @@ */ @import '../../../variables'; +@import '../../../blueprint-overrides/common/colors'; .query-input { .ace-container { @@ -25,12 +26,20 @@ height: 100%; .ace-solarized-dark { - background-color: #232c35; + background-color: transparent; } - .ace_gutter-layer { - background-color: #27313c; - width: 50px; + .ace_gutter { + background-color: $dark-gray4; + color: $gray5; + } + + .ace_gutter-active-line { + background-color: rgba($gray1, 0.6); + } + + .ace_text-layer { + filter: brightness(1.3) saturate(0.8); } } } diff --git a/web-console/src/views/query-view/query-input/query-input.tsx b/web-console/src/views/query-view/query-input/query-input.tsx index 12862a3daa98..f94f805a10eb 100644 --- a/web-console/src/views/query-view/query-input/query-input.tsx +++ b/web-console/src/views/query-view/query-input/query-input.tsx @@ -238,7 +238,7 @@ export class QueryInput extends React.PureComponent { + editor.renderer.setPadding(10); + editor.renderer.setScrollMargin(10); this.aceEditor = editor; }} /> diff --git a/web-console/src/views/query-view/query-output/query-output.scss b/web-console/src/views/query-view/query-output/query-output.scss index 1c76974aa21f..b6ec4a332880 100644 --- a/web-console/src/views/query-view/query-output/query-output.scss +++ b/web-console/src/views/query-view/query-output/query-output.scss @@ -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); } } diff --git a/web-console/src/views/query-view/query-view.scss b/web-console/src/views/query-view/query-view.scss index d5e6a77696f2..37dba2927092 100644 --- a/web-console/src/views/query-view/query-view.scss +++ b/web-console/src/views/query-view/query-view.scss @@ -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 { @@ -67,7 +70,7 @@ $nav-width: 250px; .smart-query-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; diff --git a/web-console/unified-console.html b/web-console/unified-console.html index 4e289932d684..525aa4178004 100644 --- a/web-console/unified-console.html +++ b/web-console/unified-console.html @@ -20,7 +20,10 @@ - + Apache Druid From 0019da6326caa601e81e2055270aac8cf09ee0b1 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Mon, 12 Oct 2020 13:45:41 -0700 Subject: [PATCH 04/21] add open sans font --- web-console/package-lock.json | 90 +++++++++++++++++++++++++++++++++++ web-console/package.json | 2 + web-console/src/entry.scss | 2 +- web-console/webpack.config.js | 9 ++++ 4 files changed, 102 insertions(+), 1 deletion(-) diff --git a/web-console/package-lock.json b/web-console/package-lock.json index ae6372641ea3..6241ed521953 100644 --- a/web-console/package-lock.json +++ b/web-console/package-lock.json @@ -1470,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", @@ -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", diff --git a/web-console/package.json b/web-console/package.json index 405c89bb281c..ff39be30c89d 100644 --- a/web-console/package.json +++ b/web-console/package.json @@ -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", diff --git a/web-console/src/entry.scss b/web-console/src/entry.scss index 756ad6c38e76..38a0d1914eb0 100644 --- a/web-console/src/entry.scss +++ b/web-console/src/entry.scss @@ -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%; diff --git a/web-console/webpack.config.js b/web-console/webpack.config.js index 1dec2f401f08..9fb968349fd4 100644 --- a/web-console/webpack.config.js +++ b/web-console/webpack.config.js @@ -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]!static' + } + } + } ], }, performance: { From 480f720e94bcd62e167fc6d4a1b623316bd8bbeb Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Mon, 12 Oct 2020 15:12:06 -0700 Subject: [PATCH 05/21] fix public path --- web-console/webpack.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web-console/webpack.config.js b/web-console/webpack.config.js index 9fb968349fd4..533792a68921 100644 --- a/web-console/webpack.config.js +++ b/web-console/webpack.config.js @@ -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: { @@ -134,7 +134,7 @@ module.exports = env => { use: { loader: 'file-loader', options: { - name: '[name].[ext]!static' + name: '[name].[ext]' } } } From 058e16c4ebeef0a1999df31ca2299aa53f0a0437 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Mon, 12 Oct 2020 15:29:53 -0700 Subject: [PATCH 06/21] update licenses --- licenses.yaml | 131 ++++++++++++++++++++++-- licenses/bin/deep-equal.MIT | 21 ++++ licenses/bin/define-properties.MIT | 21 ++++ licenses/bin/fontsource-open-sans.MIT | 21 ++++ licenses/bin/function-bind.MIT | 20 ++++ licenses/bin/has.MIT | 22 ++++ licenses/bin/is-arguments.MIT | 20 ++++ licenses/bin/is-date-object.MIT | 22 ++++ licenses/bin/is-regex.MIT | 20 ++++ licenses/bin/object-is.MIT | 20 ++++ licenses/bin/object-keys.MIT | 21 ++++ licenses/bin/regexp.prototype.flags.MIT | 21 ++++ web-console/script/licenses | 11 ++ 13 files changed, 365 insertions(+), 6 deletions(-) create mode 100644 licenses/bin/deep-equal.MIT create mode 100644 licenses/bin/define-properties.MIT create mode 100644 licenses/bin/fontsource-open-sans.MIT create mode 100644 licenses/bin/function-bind.MIT create mode 100644 licenses/bin/has.MIT create mode 100644 licenses/bin/is-arguments.MIT create mode 100644 licenses/bin/is-date-object.MIT create mode 100644 licenses/bin/is-regex.MIT create mode 100644 licenses/bin/object-is.MIT create mode 100644 licenses/bin/object-keys.MIT create mode 100644 licenses/bin/regexp.prototype.flags.MIT diff --git a/licenses.yaml b/licenses.yaml index 4410ecc4d645..da059bf77c3d 100644 --- a/licenses.yaml +++ b/licenses.yaml @@ -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.32.1 --- @@ -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.1 --- @@ -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.21.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 diff --git a/licenses/bin/deep-equal.MIT b/licenses/bin/deep-equal.MIT new file mode 100644 index 000000000000..9b0ea42eeec3 --- /dev/null +++ b/licenses/bin/deep-equal.MIT @@ -0,0 +1,21 @@ +MIT License + +Copyright (c) 2012, 2013, 2014 James Halliday , 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. diff --git a/licenses/bin/define-properties.MIT b/licenses/bin/define-properties.MIT new file mode 100644 index 000000000000..8c271c14b62f --- /dev/null +++ b/licenses/bin/define-properties.MIT @@ -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. \ No newline at end of file diff --git a/licenses/bin/fontsource-open-sans.MIT b/licenses/bin/fontsource-open-sans.MIT new file mode 100644 index 000000000000..4770db605ba0 --- /dev/null +++ b/licenses/bin/fontsource-open-sans.MIT @@ -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. \ No newline at end of file diff --git a/licenses/bin/function-bind.MIT b/licenses/bin/function-bind.MIT new file mode 100644 index 000000000000..62d6d237ff17 --- /dev/null +++ b/licenses/bin/function-bind.MIT @@ -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. + diff --git a/licenses/bin/has.MIT b/licenses/bin/has.MIT new file mode 100644 index 000000000000..ae7014d385df --- /dev/null +++ b/licenses/bin/has.MIT @@ -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. diff --git a/licenses/bin/is-arguments.MIT b/licenses/bin/is-arguments.MIT new file mode 100644 index 000000000000..47b7b5078fce --- /dev/null +++ b/licenses/bin/is-arguments.MIT @@ -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. diff --git a/licenses/bin/is-date-object.MIT b/licenses/bin/is-date-object.MIT new file mode 100644 index 000000000000..b43df444e518 --- /dev/null +++ b/licenses/bin/is-date-object.MIT @@ -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. + diff --git a/licenses/bin/is-regex.MIT b/licenses/bin/is-regex.MIT new file mode 100644 index 000000000000..47b7b5078fce --- /dev/null +++ b/licenses/bin/is-regex.MIT @@ -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. diff --git a/licenses/bin/object-is.MIT b/licenses/bin/object-is.MIT new file mode 100644 index 000000000000..47b7b5078fce --- /dev/null +++ b/licenses/bin/object-is.MIT @@ -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. diff --git a/licenses/bin/object-keys.MIT b/licenses/bin/object-keys.MIT new file mode 100644 index 000000000000..28553fdd0684 --- /dev/null +++ b/licenses/bin/object-keys.MIT @@ -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. \ No newline at end of file diff --git a/licenses/bin/regexp.prototype.flags.MIT b/licenses/bin/regexp.prototype.flags.MIT new file mode 100644 index 000000000000..9a8e1e0e62e4 --- /dev/null +++ b/licenses/bin/regexp.prototype.flags.MIT @@ -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. \ No newline at end of file diff --git a/web-console/script/licenses b/web-console/script/licenses index 0ca2834d8dc8..0b8378ec54ba 100755 --- a/web-console/script/licenses +++ b/web-console/script/licenses @@ -41,6 +41,15 @@ const extraLinesForLib = { ***************************************************************************** */` } +const extraPackages = { + '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 +100,8 @@ checker.init( return; } + Object.assign(packages, extraPackages); + const seen = {}; const mapped = Object.keys(packages) .sort() From ec8299cf27e3cecd086e42fd6feb0921d8196938 Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Mon, 12 Oct 2020 15:31:27 -0700 Subject: [PATCH 07/21] add comment --- web-console/script/licenses | 2 ++ 1 file changed, 2 insertions(+) diff --git a/web-console/script/licenses b/web-console/script/licenses index 0b8378ec54ba..82522f9980c1 100755 --- a/web-console/script/licenses +++ b/web-console/script/licenses @@ -42,6 +42,8 @@ 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', From 42d77b9d6ddcdb9b6cd6e7d684d99b0d296e814b Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Mon, 12 Oct 2020 17:31:39 -0700 Subject: [PATCH 08/21] allow zero bsd --- web-console/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-console/package.json b/web-console/package.json index ff39be30c89d..e3660f03fe9a 100644 --- a/web-console/package.json +++ b/web-console/package.json @@ -52,7 +52,7 @@ "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": { From 7661a53a93e86f55bcd417cf0c5f5e3e0994c37b Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Mon, 12 Oct 2020 17:42:56 -0700 Subject: [PATCH 09/21] add new lines --- .../src/blueprint-overrides/_index.scss | 2 +- .../common/_color-aliases.scss | 2 +- .../blueprint-overrides/common/_colors.scss | 38 ++++++------- .../common/_variables.scss | 20 +++---- .../components/button/_common.scss | 54 +++++++++++-------- .../components/card/_card.scss | 2 +- .../components/forms/_common.scss | 2 +- .../components/navbar/_navbar.scss | 2 +- 8 files changed, 62 insertions(+), 60 deletions(-) diff --git a/web-console/src/blueprint-overrides/_index.scss b/web-console/src/blueprint-overrides/_index.scss index c91e9a48501e..821d8a395d6f 100644 --- a/web-console/src/blueprint-overrides/_index.scss +++ b/web-console/src/blueprint-overrides/_index.scss @@ -22,4 +22,4 @@ @import 'components/button/common'; @import 'components/forms/common'; @import 'components/navbar/navbar'; -@import 'components/card/card'; \ No newline at end of file +@import 'components/card/card'; diff --git a/web-console/src/blueprint-overrides/common/_color-aliases.scss b/web-console/src/blueprint-overrides/common/_color-aliases.scss index f7a59a129465..dd6c0c581f75 100644 --- a/web-console/src/blueprint-overrides/common/_color-aliases.scss +++ b/web-console/src/blueprint-overrides/common/_color-aliases.scss @@ -55,4 +55,4 @@ $pt-dark-divider-white: rgba($white, 0.15) !default; $pt-code-text-color: $pt-text-color-muted !default; $pt-dark-code-text-color: $pt-dark-text-color-muted !default; $pt-code-background-color: rgba($white, 0.7) !default; -$pt-dark-code-background-color: rgba($black, 0.3) !default; \ No newline at end of file +$pt-dark-code-background-color: rgba($black, 0.3) !default; diff --git a/web-console/src/blueprint-overrides/common/_colors.scss b/web-console/src/blueprint-overrides/common/_colors.scss index d74cfb75f12b..ca10be55628d 100644 --- a/web-console/src/blueprint-overrides/common/_colors.scss +++ b/web-console/src/blueprint-overrides/common/_colors.scss @@ -18,35 +18,35 @@ // Gray scale -$black: #0F1320; // Changed +$black: #0f1320; // Changed -$dark-gray1: #181C2D; // Changed -$dark-gray2: #24283B; -$dark-gray3: #2F344E; -$dark-gray4: #383D57; +$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; +$gray2: #787d96; +$gray3: #8489a1; +$gray4: #a1a6ba; +$gray5: #bdc1d1; -$light-gray1: #CDD4E0; // Changed -$light-gray2: #DCE0E9; -$light-gray3: #E2E6ED; -$light-gray4: #EDEFF3; -$light-gray5: #F4F5F8; +$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; +$blue2: #1367af; +$blue3: #0083dc; +$blue4: #1f95e5; +$blue5: #3eadf9; $green1: #0a6640; $green2: #0d8050; @@ -126,4 +126,4 @@ $sepia1: #63411e; $sepia2: #7d5125; $sepia3: #96622d; $sepia4: #b07b46; -$sepia5: #c99765; \ No newline at end of file +$sepia5: #c99765; diff --git a/web-console/src/blueprint-overrides/common/_variables.scss b/web-console/src/blueprint-overrides/common/_variables.scss index 2aed672066b0..d07aae7463ad 100644 --- a/web-console/src/blueprint-overrides/common/_variables.scss +++ b/web-console/src/blueprint-overrides/common/_variables.scss @@ -25,18 +25,10 @@ $ns: bp3 !default; $pt-grid-size: 10px !default; // 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: '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 !default; @@ -49,8 +41,8 @@ $pt-line-height: ($pt-grid-size * 1.8) / $pt-font-size + 0.0001 !default; // Icon variables -$icons16-family: "Icons16" !default; -$icons20-family: "Icons20" !default; +$icons16-family: 'Icons16' !default; +$icons20-family: 'Icons20' !default; $pt-icon-size-standard: 16px !default; $pt-icon-size-large: 20px !default; diff --git a/web-console/src/blueprint-overrides/components/button/_common.scss b/web-console/src/blueprint-overrides/components/button/_common.scss index 130859fe4ea7..924018a517ee 100644 --- a/web-console/src/blueprint-overrides/components/button/_common.scss +++ b/web-console/src/blueprint-overrides/components/button/_common.scss @@ -32,12 +32,10 @@ CSS `border` property issues: `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) !default; -$button-box-shadow-active: - inset 0 0 0 $button-border-width rgba($black, 0.2), - inset 0 1px 2px rgba($black, 0.2) !default; +$button-box-shadow: inset 0 0 0 $button-border-width rgba($black, 0.2), + inset 0 (-$button-border-width) 0 rgba($black, 0.1) !default; +$button-box-shadow-active: inset 0 0 0 $button-border-width rgba($black, 0.2), + inset 0 1px 2px rgba($black, 0.2) !default; $button-intent-box-shadow: none; $button-intent-box-shadow-active: none; @@ -47,18 +45,14 @@ 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) !default; -$button-box-shadow-overlay-active: - 0 0 0 $button-border-width rgba($black, 0.2), - inset 0 1px 1px rgba($black, 0.1) !default; +$button-box-shadow-overlay: 0 0 0 $button-border-width rgba($black, 0.2), + 0 1px 1px rgba($black, 0.2) !default; +$button-box-shadow-overlay-active: 0 0 0 $button-border-width rgba($black, 0.2), + inset 0 1px 1px rgba($black, 0.1) !default; -$dark-button-box-shadow: - 0 0 0 $button-border-width rgba($black, 0.4) !default; -$dark-button-box-shadow-active: - 0 0 0 $button-border-width rgba($black, 0.6), - inset 0 1px 2px rgba($black, 0.2) !default; +$dark-button-box-shadow: 0 0 0 $button-border-width rgba($black, 0.4) !default; +$dark-button-box-shadow-active: 0 0 0 $button-border-width rgba($black, 0.6), + inset 0 1px 2px rgba($black, 0.2) !default; $dark-button-intent-box-shadow: none; $dark-button-intent-box-shadow-active: none; @@ -95,8 +89,24 @@ $button-outlined-border-disabled-intent-opacity: 0.2 !default; // "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) -) !default; \ No newline at end of file + 'primary': ( + $pt-intent-primary, + $blue2, + $blue1, + ), + 'success': ( + $pt-intent-success, + $green2, + $green1, + ), + 'warning': ( + $pt-intent-warning, + $orange2, + $orange1, + ), + 'danger': ( + $pt-intent-danger, + $red2, + $red1, + ), +) !default; diff --git a/web-console/src/blueprint-overrides/components/card/_card.scss b/web-console/src/blueprint-overrides/components/card/_card.scss index d00052ad33ce..d3451b867148 100644 --- a/web-console/src/blueprint-overrides/components/card/_card.scss +++ b/web-console/src/blueprint-overrides/components/card/_card.scss @@ -19,4 +19,4 @@ $card-padding: $pt-grid-size * 2 !default; $card-background-color: $white !default; -$dark-card-background-color: $dark-gray3; \ No newline at end of file +$dark-card-background-color: $dark-gray3; diff --git a/web-console/src/blueprint-overrides/components/forms/_common.scss b/web-console/src/blueprint-overrides/components/forms/_common.scss index 9b43394b1946..7f5c3c5ca3bd 100644 --- a/web-console/src/blueprint-overrides/components/forms/_common.scss +++ b/web-console/src/blueprint-overrides/components/forms/_common.scss @@ -40,4 +40,4 @@ $control-indicator-size-large: $pt-icon-size-large !default; // 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; \ No newline at end of file +$input-box-shadow-focus: inset 0 0 0 1px transparent; diff --git a/web-console/src/blueprint-overrides/components/navbar/_navbar.scss b/web-console/src/blueprint-overrides/components/navbar/_navbar.scss index 6ceff5617131..bc547e720f08 100644 --- a/web-console/src/blueprint-overrides/components/navbar/_navbar.scss +++ b/web-console/src/blueprint-overrides/components/navbar/_navbar.scss @@ -19,4 +19,4 @@ $navbar-padding: $pt-grid-size * 1.5 !default; $navbar-background-color: $white !default; -$dark-navbar-background-color: $dark-gray3; \ No newline at end of file +$dark-navbar-background-color: $dark-gray3; From c794b545347053c7f43d9a691dd4c42f54b9339c Mon Sep 17 00:00:00 2001 From: Vadim Ogievetsky Date: Mon, 12 Oct 2020 18:41:37 -0700 Subject: [PATCH 10/21] update tests --- .../__snapshots__/auto-form.spec.tsx.snap | 4 +- .../__snapshots__/json-collapse.spec.tsx.snap | 44 +- .../json-collapse/json-collapse.scss | 34 ++ .../json-collapse/json-collapse.spec.tsx | 11 +- .../json-collapse/json-collapse.tsx | 12 +- .../__snapshots__/rule-editor.spec.tsx.snap | 22 +- .../components/rule-editor/rule-editor.tsx | 2 +- .../history-dialog.spec.tsx.snap | 72 +-- .../history-dialog/history-dialog.scss | 16 - .../retention-dialog.spec.tsx.snap | 3 +- .../datasources-card.spec.tsx.snap | 2 +- .../home-view-card.spec.tsx.snap | 2 +- .../__snapshots__/lookups-card.spec.tsx.snap | 2 +- .../__snapshots__/segments-card.spec.tsx.snap | 2 +- .../__snapshots__/services-card.spec.tsx.snap | 2 +- .../__snapshots__/status-card.spec.tsx.snap | 2 +- .../supervisors-card.spec.tsx.snap | 2 +- .../__snapshots__/tasks-card.spec.tsx.snap | 2 +- .../load-data-view.spec.tsx.snap | 8 +- .../__snapshots__/column-tree.spec.tsx.snap | 445 +++++++----------- .../column-tree/column-tree.spec.tsx | 13 +- .../__snapshots__/query-input.spec.tsx.snap | 6 +- .../query-view/query-input/query-input.scss | 6 + 23 files changed, 311 insertions(+), 403 deletions(-) create mode 100644 web-console/src/components/json-collapse/json-collapse.scss diff --git a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap index 544177ae1bdc..1a4000ef00fb 100644 --- a/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap +++ b/web-console/src/components/auto-form/__snapshots__/auto-form.spec.tsx.snap @@ -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="" /> - -
-
-
-
+
+ + +
`; diff --git a/web-console/src/components/json-collapse/json-collapse.scss b/web-console/src/components/json-collapse/json-collapse.scss new file mode 100644 index 000000000000..1f6a3d256521 --- /dev/null +++ b/web-console/src/components/json-collapse/json-collapse.scss @@ -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; + } +} diff --git a/web-console/src/components/json-collapse/json-collapse.spec.tsx b/web-console/src/components/json-collapse/json-collapse.spec.tsx index 2b3293593f63..33dbd8b89073 100644 --- a/web-console/src/components/json-collapse/json-collapse.spec.tsx +++ b/web-console/src/components/json-collapse/json-collapse.spec.tsx @@ -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 = ( - + const jsonCollapse = shallow( + , ); - const { container } = render(jsonCollapse); - expect(container.firstChild).toMatchSnapshot(); + expect(jsonCollapse).toMatchSnapshot(); }); }); diff --git a/web-console/src/components/json-collapse/json-collapse.tsx b/web-console/src/components/json-collapse/json-collapse.tsx index 6be4324c889b..09b4ee27c980 100644 --- a/web-console/src/components/json-collapse/json-collapse.tsx +++ b/web-console/src/components/json-collapse/json-collapse.tsx @@ -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 (
-