From 6e3a2f7a3a43c9a950c0772c60cbd74becd476ae Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 15:04:21 -0700 Subject: [PATCH 01/30] Add react-custom-scrollbars package and default styles --- ui/package.json | 1 + ui/src/shared/components/FancyScrollbar.js | 40 ++++++++++++++ ui/src/style/chronograf.scss | 1 + ui/src/style/components/fancy-scrollbars.scss | 34 ++++++++++++ ui/yarn.lock | 52 ++++++++++++++++++- 5 files changed, 127 insertions(+), 1 deletion(-) create mode 100644 ui/src/shared/components/FancyScrollbar.js create mode 100644 ui/src/style/components/fancy-scrollbars.scss diff --git a/ui/package.json b/ui/package.json index b1108ffde1..173317a871 100644 --- a/ui/package.json +++ b/ui/package.json @@ -101,6 +101,7 @@ "react": "^15.0.2", "react-addons-shallow-compare": "^15.0.2", "react-addons-update": "^15.1.0", + "react-custom-scrollbars": "^4.1.1", "react-dimensions": "^1.2.0", "react-dom": "^15.0.2", "react-grid-layout": "^0.13.9", diff --git a/ui/src/shared/components/FancyScrollbar.js b/ui/src/shared/components/FancyScrollbar.js new file mode 100644 index 0000000000..39505b14a6 --- /dev/null +++ b/ui/src/shared/components/FancyScrollbar.js @@ -0,0 +1,40 @@ +import React, {Component, PropTypes} from 'react' +import {Scrollbars} from 'react-custom-scrollbars' + +class FancyScrollbox extends Component { + constructor(props) { + super(props) + } + + // static defaultProps = { + // className: 'fancy-scroll--container', + // } + + render() { + const {children, className} = this.props + + return ( +
} + renderTrackVertical={props =>
} + renderThumbHorizontal={props =>
} + renderThumbVertical={props =>
} + > + {children} + + ) + } +} + +const {node, string} = PropTypes + +FancyScrollbox.propTypes = { + children: node.isRequired, + className: string.isRequired, +} + +export default FancyScrollbox diff --git a/ui/src/style/chronograf.scss b/ui/src/style/chronograf.scss index 25ad4af5a5..43a68392d1 100644 --- a/ui/src/style/chronograf.scss +++ b/ui/src/style/chronograf.scss @@ -46,6 +46,7 @@ @import 'components/source-indicator'; @import 'components/tables'; @import 'components/function-selector'; +@import 'components/fancy-scrollbars'; // Pages diff --git a/ui/src/style/components/fancy-scrollbars.scss b/ui/src/style/components/fancy-scrollbars.scss new file mode 100644 index 0000000000..d65de73a20 --- /dev/null +++ b/ui/src/style/components/fancy-scrollbars.scss @@ -0,0 +1,34 @@ +/* + Fancy Scrollbars + ------------------------------------------------------ +*/ + +$scrollbar-track-size: 12px; +$scrollbar-thumb-size: 6px; + +/* Horizontal Scrollbar Styles */ +.fancy-scroll--track-h { + padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2; + width: 100%; + height: $scrollbar-track-size !important; + bottom: 0; + left: 0; +} +.fancy-scroll--thumb-h { + height: $scrollbar-thumb-size !important; + border-radius: ($scrollbar-thumb-size / 2); + @include gradient-h($c-pool,$c-comet); +} +/* Vertical Scrollbar Styles */ +.fancy-scroll--track-v { + padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2; + width: $scrollbar-track-size !important; + height: 100%; + top: 0; + right: 0; +} +.fancy-scroll--thumb-v { + width: $scrollbar-thumb-size !important; + border-radius: ($scrollbar-thumb-size / 2); + @include gradient-v($c-pool,$c-comet); +} \ No newline at end of file diff --git a/ui/yarn.lock b/ui/yarn.lock index 83f59bc6c3..4aa48477c6 100644 --- a/ui/yarn.lock +++ b/ui/yarn.lock @@ -144,6 +144,10 @@ acorn@^4.0.1: version "4.0.4" resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.4.tgz#17a8d6a7a6c4ef538b814ec9abac2779293bf30a" +add-px-to-style@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/add-px-to-style/-/add-px-to-style-1.0.0.tgz#d0c135441fa8014a8137904531096f67f28f263a" + after@0.8.1: version "0.8.1" resolved "https://registry.yarnpkg.com/after/-/after-0.8.1.tgz#ab5d4fb883f596816d3515f8f791c0af486dd627" @@ -2380,6 +2384,14 @@ dom-converter@~0.1: dependencies: utila "~0.3" +dom-css@^2.0.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/dom-css/-/dom-css-2.1.0.tgz#fdbc2d5a015d0a3e1872e11472bbd0e7b9e6a202" + dependencies: + add-px-to-style "1.0.0" + prefix-style "2.0.1" + to-camel-case "1.0.0" + dom-serialize@^2.2.0: version "2.2.1" resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b" @@ -5151,6 +5163,10 @@ pend@~1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/pend/-/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50" +performance-now@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b" + phantomjs-prebuilt@^2.1.7: version "2.1.14" resolved "https://registry.yarnpkg.com/phantomjs-prebuilt/-/phantomjs-prebuilt-2.1.14.tgz#d53d311fcfb7d1d08ddb24014558f1188c516da0" @@ -5628,6 +5644,10 @@ precss@^1.4.0: postcss-selector-matches "^2.0.0" postcss-selector-not "^2.0.0" +prefix-style@2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/prefix-style/-/prefix-style-2.0.1.tgz#66bba9a870cfda308a5dc20e85e9120932c95a06" + prelude-ls@~1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54" @@ -5673,7 +5693,7 @@ promise@^7.1.1: dependencies: asap "~2.0.3" -prop-types@^15.5.6: +prop-types@^15.5.6, prop-types@^15.5.8: version "15.5.8" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.8.tgz#6b7b2e141083be38c8595aa51fc55775c7199394" dependencies: @@ -5737,6 +5757,12 @@ querystringify@0.0.x: version "0.0.4" resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-0.0.4.tgz#0cf7f84f9463ff0ae51c4c4b142d95be37724d9c" +raf@^3.1.0: + version "3.3.2" + resolved "https://registry.yarnpkg.com/raf/-/raf-3.3.2.tgz#0c13be0b5b49b46f76d6669248d527cf2b02fe27" + dependencies: + performance-now "^2.1.0" + randomatic@^1.1.3: version "1.1.6" resolved "https://registry.yarnpkg.com/randomatic/-/randomatic-1.1.6.tgz#110dcabff397e9dcff7c0789ccc0a49adf1ec5bb" @@ -5781,6 +5807,14 @@ react-addons-update@^15.1.0: version "15.4.1" resolved "https://registry.yarnpkg.com/react-addons-update/-/react-addons-update-15.4.1.tgz#00c07f45243aa9715e1706bbfd1f23d3d8d80bd1" +react-custom-scrollbars@^4.1.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/react-custom-scrollbars/-/react-custom-scrollbars-4.1.1.tgz#cf08cd43b1297ab11e6fcc5c9a800e7b70b6f248" + dependencies: + dom-css "^2.0.0" + prop-types "^15.5.8" + raf "^3.1.0" + react-dimensions@^1.2.0: version "1.3.0" resolved "https://registry.yarnpkg.com/react-dimensions/-/react-dimensions-1.3.0.tgz#f5dec8e7b84644a605a900cae0f4a6654acf4e9f" @@ -6960,6 +6994,12 @@ to-arraybuffer@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43" +to-camel-case@1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-camel-case/-/to-camel-case-1.0.0.tgz#1a56054b2f9d696298ce66a60897322b6f423e46" + dependencies: + to-space-case "^1.0.0" + to-fast-properties@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.2.tgz#f3f5c0c3ba7299a7ef99427e44633257ade43320" @@ -6968,6 +7008,16 @@ to-iso-string@0.0.2: version "0.0.2" resolved "https://registry.yarnpkg.com/to-iso-string/-/to-iso-string-0.0.2.tgz#4dc19e664dfccbe25bd8db508b00c6da158255d1" +to-no-case@^1.0.0: + version "1.0.2" + resolved "https://registry.yarnpkg.com/to-no-case/-/to-no-case-1.0.2.tgz#c722907164ef6b178132c8e69930212d1b4aa16a" + +to-space-case@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/to-space-case/-/to-space-case-1.0.0.tgz#b052daafb1b2b29dc770cea0163e5ec0ebc9fc17" + dependencies: + to-no-case "^1.0.0" + toposort@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.0.tgz#b66cf385a1a8a8e68e45b8259e7f55875e8b06ef" From 982ab41be69fa31c135180cea6d210f06530ed7a Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 15:04:48 -0700 Subject: [PATCH 02/30] Use yellow for warning dot in tables --- ui/src/style/layout/page.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/style/layout/page.scss b/ui/src/style/layout/page.scss index c5d3494c61..7ff8714a95 100644 --- a/ui/src/style/layout/page.scss +++ b/ui/src/style/layout/page.scss @@ -424,7 +424,7 @@ table .monotype { background-color: $c-pool; } &.dot-warning { - background-color: $c-comet; + background-color: $c-pineapple; } &.dot-danger { background-color: $c-dreamsicle; From 8304c178e1871c21186a44dc08b152e36e500af7 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 15:54:58 -0700 Subject: [PATCH 03/30] Clean up layout styles Moving misc styles to unsorted, removing dupes --- .../dashboards/containers/DashboardsPage.js | 2 +- ui/src/data_explorer/containers/Header.js | 2 +- ui/src/kapacitor/components/RuleHeader.js | 2 +- ui/src/style/components/tables.scss | 2 +- ui/src/style/layout/page-header.scss | 16 +- ui/src/style/layout/page.scss | 430 +----------------- ui/src/style/unsorted.scss | 56 +++ 7 files changed, 67 insertions(+), 443 deletions(-) diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js index 99f6b5fd23..52c689d5af 100644 --- a/ui/src/dashboards/containers/DashboardsPage.js +++ b/ui/src/dashboards/containers/DashboardsPage.js @@ -63,7 +63,7 @@ const DashboardsPage = React.createClass({
-

+

Dashboards

diff --git a/ui/src/data_explorer/containers/Header.js b/ui/src/data_explorer/containers/Header.js index 65c1c7b58a..a9932a8a05 100644 --- a/ui/src/data_explorer/containers/Header.js +++ b/ui/src/data_explorer/containers/Header.js @@ -39,7 +39,7 @@ const Header = React.createClass({ } = this.props return ( -
+

diff --git a/ui/src/kapacitor/components/RuleHeader.js b/ui/src/kapacitor/components/RuleHeader.js index 47913a524b..19655adce2 100644 --- a/ui/src/kapacitor/components/RuleHeader.js +++ b/ui/src/kapacitor/components/RuleHeader.js @@ -112,7 +112,7 @@ export const RuleHeader = React.createClass({ placeholder="Name your rule" /> :

*:only-child { - margin: 0; - } - } - &__left { - > * { - margin: 0 4px 0 0; - } - } - &__right { - > * { - margin: 0 0 0 4px; - } - } - &.full-width .page-header__container { - max-width: 100%; - } -} - -/* - Custom Search Widget - ---------------------------------------------- -*/ -.users__search-widget { - position: relative; - - input.form-control { - position: relative; - width: 100%; - z-index: 1; - padding-left: 34px; - border-radius: 4px !important; - - &:focus + .input-group-addon { - color: $c-pool; - } - } - .input-group-addon { - padding: 0; - text-align: center; - line-height: 38px; - position: absolute; - color: $g10-wolf; - top: 0; - left: 0; - height: 100%; - z-index: 4; - border: 0; - width: 40px; - background-color: transparent; - transition: - color 0.25s ease; - } -} - -/* - Unsorted - ---------------------------------------------- -*/ -.select-source-page { - position: absolute; - top: 0; - left: 0; - width: 100%; - height: 100%; - overflow: auto; - @include custom-scrollbar($g2-kevlar, $c-pool); - @include gradient-v($g2-kevlar, $g0-obsidian); -} -.text-right .btn { - margin: 0 0 0 4px; -} -.text-center .btn { - margin: 0 2px; -} -.default-source-label { - display: inline-block; - vertical-align: middle; - font-size: 13px; - font-weight: 500; - background-color: $g5-pepper; - color: $c-pool; - border-radius: 3px; - padding: 2px 6px; - margin-left: 4px; -} -.progress-label { - margin-bottom: 4px; - color: $g11-sidewalk; - width: 100%; - - strong { - font-weight: 500; - color: $g8-storm; - } -} -.btn-block.dropdown-toggle { - text-align: left; - position: relative; - - .caret { - position: absolute; - top: 50%; - right: 18px; - transform: translateY(-50%); - } - - & + .dropdown-menu { - width: 100%; - } -} -.modal { - form { - padding: 0; - margin: 0; - background-color: transparent; - } - .form-grid { - width: 100%; - display: inline-block; - - &.padding-top { - padding-top: 15px; - } - } -} - -/* - Custom Tabs - ---------------------------------------------- -*/ -.tab-group { - display: flex; - justify-content: flex-start; - margin-bottom: 20px; - display: inline-block; - - .btn.tab { - border: 2px solid $g17-whisper; - border-right-width: 0; - padding: 10px 20px; - margin: 0 !important; - font-weight: 400; - color: $g11-sidewalk; - background-color: $g17-whisper; - box-shadow: none; - transition: - color 0.25s ease, - background-color 0.25s ease; - - &:hover { - cursor: pointer; - background-color: $g18-cloud; - color: $g9-mountain; - } - - &:first-child { - border-radius: 5px 0 0 5px; - } - - &:last-child { - border-radius: 0 5px 5px 0; - border-right-width: 2px; - } - &.active { - background-color: white; - color: $g8-storm; - } - } -} - - -/* - Error Pages - ---------------------------------------------- -*/ -.panel-error { - margin-top: $page-wrapper-padding; - margin-bottom: $page-wrapper-padding; -} -table.table.error-table { - margin-bottom: 0; - .label { - padding: 4px 7px; - font-size: 14px; - font-weight: 700; - } - tbody { - td { - border: none; - } - } - tbody tr:nth-child(odd) { - background-color: $g19-ghost; - td:last-child { - background-color: $g5-pepper; - } - } - tbody tr:nth-child(even) { - background-color: $g18-cloud; - td:last-child { - background-color: $g4-onyx; - } - } - pre { - border: none; - background-color: transparent; - color: $c-moonstone; - font-weight: 600; - border-radius: 0; - padding: 4px; - } -} - -/* - Generic Empty State - ---------------------------------------------- -*/ -.generic-empty-state { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - color: $g12-forge; - padding: 20px 0; - - .icon { - margin-bottom: 11px; - } -} - -/* - Static Form Controls - ---------------------------------------------- -*/ -$form-static-checkbox-size: 16px; -.form-control-static { - border: 2px solid $g5-pepper; - height: auto; - border-radius: 4px; - padding: 7px 12px; - position: relative; - - input[type="checkbox"] { - position: relative; - left: -9999px; - visibility: hidden; - width: 0; - height: 0; - margin: 0; - - // Faux Checkbox - & + label { - font-size: 14px !important; - line-height: 16px; - color: $g11-sidewalk; - font-weight: 500; - transition: color 0.25s ease; - margin: 0; - padding: 0 0 0 (12px + $form-static-checkbox-size + 6px); - user-select: none; - -ms-user-select: none; - -moz-user-selct: none; - -webkit-user-select: none; - - &:before { - content: ''; - position: absolute; - top: 50%; - left: 12px; - transform: translateY(-50%); - width: $form-static-checkbox-size; - height: $form-static-checkbox-size; - background-color: $g2-kevlar; - border: 2px solid $g5-pepper; - border-radius: 3px; - z-index: 2; - transition: - border-color 0.25s ease; - } - &:after { - content: ''; - position: absolute; - top: 50%; - left: (12px + ($form-static-checkbox-size / 2)); - transform: translate(-50%,-50%) scale(2,2); - opacity: 0; - width: 6px; - height: 6px; - border-radius: 50%; - background-color: $c-pool; - z-index: 3; - transition: - opacity 0.25s ease, - transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); - } - &:hover { - cursor: pointer; - color: $g20-white; - - &:before { - border-color: $g6-smoke; - } - } - } - // Faux Checkbox (Checked) - &:checked + label { - color: $g20-white; - - &:after { - opacity: 1; - transform: translate(-50%,-50%) scale(1,1); - } - } - } -} - -/* - Stuff for making Tables of Data more readable - ---------------------------------------------- -*/ -table .monotype { - font-family: 'RobotoMono', monospace !important; - letter-spacing: 0.69px; - font-size: 12px; - font-weight: 500; - color: $g9-mountain; -} -.table-dot { - display: inline-block; - width: 12px; - height: 12px; - border-radius: 50%; - background-color: $g17-whisper; - - &.dot-success { - background-color: $c-rainforest; - } - &.dot-primary { - background-color: $c-pool; - } - &.dot-warning { - background-color: $c-pineapple; - } - &.dot-danger { - background-color: $c-dreamsicle; - } - &.dot-critical { - background-color: $c-fire; - } -} - -/* - Empty State for Tables - ---------------------------------------------- -*/ -.table-empty-state { - > th { - text-align: center; - - > p { - font-weight: 400; - font-size: 18px; - color: $g9-mountain; - margin-bottom: 16px; - } - > *:first-child { - margin-top: 75px; - } - > *:last-child { - margin-bottom: 75px; - } - } -} +} \ No newline at end of file diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index 3aae03605b..c8b9d7c29f 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -178,4 +178,60 @@ } } +/* + Custom Tabs + ---------------------------------------------- +*/ +.tab-group { + display: flex; + justify-content: flex-start; + margin-bottom: 20px; + display: inline-block; + .btn.tab { + border: 2px solid $g17-whisper; + border-right-width: 0; + padding: 10px 20px; + margin: 0 !important; + font-weight: 400; + color: $g11-sidewalk; + background-color: $g17-whisper; + box-shadow: none; + transition: + color 0.25s ease, + background-color 0.25s ease; + + &:hover { + cursor: pointer; + background-color: $g18-cloud; + color: $g9-mountain; + } + + &:first-child { + border-radius: 5px 0 0 5px; + } + + &:last-child { + border-radius: 0 5px 5px 0; + border-right-width: 2px; + } + &.active { + background-color: white; + color: $g8-storm; + } + } +} + + + + +.select-source-page { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + overflow: auto; + @include custom-scrollbar($g2-kevlar, $c-pool); + @include gradient-v($g2-kevlar, $g0-obsidian); +} \ No newline at end of file From 76aeda2ccaff70ef767a3fbe0c4d6256da779168 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 15:55:32 -0700 Subject: [PATCH 04/30] Remove defaultProps --- ui/src/shared/components/FancyScrollbar.js | 4 ---- 1 file changed, 4 deletions(-) diff --git a/ui/src/shared/components/FancyScrollbar.js b/ui/src/shared/components/FancyScrollbar.js index 39505b14a6..e1dc36d705 100644 --- a/ui/src/shared/components/FancyScrollbar.js +++ b/ui/src/shared/components/FancyScrollbar.js @@ -6,10 +6,6 @@ class FancyScrollbox extends Component { super(props) } - // static defaultProps = { - // className: 'fancy-scroll--container', - // } - render() { const {children, className} = this.props From 8983cbfe4897c116daf01c284ea278be705b7caa Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 15:55:57 -0700 Subject: [PATCH 05/30] Use FancyScrollbox instead of page-contents --- ui/src/admin/containers/AdminPage.js | 5 +- ui/src/alerts/containers/AlertsApp.js | 5 +- ui/src/dashboards/components/Dashboard.js | 63 ++++++++++--------- .../dashboards/containers/DashboardsPage.js | 5 +- ui/src/hosts/containers/HostPage.js | 13 ++-- ui/src/hosts/containers/HostsPage.js | 5 +- ui/src/kapacitor/components/KapacitorForm.js | 5 +- ui/src/kapacitor/components/KapacitorRule.js | 5 +- ui/src/kapacitor/components/KapacitorRules.js | 5 +- ui/src/sources/containers/ManageSources.js | 5 +- ui/src/sources/containers/SourcePage.js | 5 +- 11 files changed, 65 insertions(+), 56 deletions(-) diff --git a/ui/src/admin/containers/AdminPage.js b/ui/src/admin/containers/AdminPage.js index 46b464a304..3b748e0346 100644 --- a/ui/src/admin/containers/AdminPage.js +++ b/ui/src/admin/containers/AdminPage.js @@ -27,6 +27,7 @@ import { import AdminTabs from 'src/admin/components/AdminTabs' import {publishAutoDismissingNotification} from 'shared/dispatchers' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' const isValidUser = user => { const minLen = 3 @@ -170,7 +171,7 @@ class AdminPage extends Component {

-
+
{users @@ -202,7 +203,7 @@ class AdminPage extends Component { : Loading...}
-
+
) } diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index 00f8813f65..927a030c2f 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/ui/src/alerts/containers/AlertsApp.js @@ -3,6 +3,7 @@ import SourceIndicator from '../../shared/components/SourceIndicator' import AlertsTable from '../components/AlertsTable' import NoKapacitorError from '../../shared/components/NoKapacitorError' import CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' import {getAlerts} from '../apis' import AJAX from 'utils/ajax' @@ -148,7 +149,7 @@ class AlertsApp extends Component {
-
+
@@ -156,7 +157,7 @@ class AlertsApp extends Component {
-
+
) } diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js index 0d4e97f497..8c48b4f98d 100644 --- a/ui/src/dashboards/components/Dashboard.js +++ b/ui/src/dashboards/components/Dashboard.js @@ -3,6 +3,7 @@ import classnames from 'classnames' import TemplateControlBar from 'src/dashboards/components/TemplateControlBar' import LayoutRenderer from 'shared/components/LayoutRenderer' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' const Dashboard = ({ source, @@ -40,37 +41,37 @@ const Dashboard = ({ }) return ( -
- - {cells.length - ? - :
-

This Dashboard has no Graphs

- -
} -
+ +
+ + {cells.length + ? + :
+

This Dashboard has no Graphs

+ +
} +
+ ) } diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js index 52c689d5af..a36b51b219 100644 --- a/ui/src/dashboards/containers/DashboardsPage.js +++ b/ui/src/dashboards/containers/DashboardsPage.js @@ -10,6 +10,7 @@ import {createDashboard} from 'src/dashboards/apis' import {getDashboardsAsync, deleteDashboardAsync} from 'src/dashboards/actions' import {NEW_DASHBOARD} from 'src/dashboards/constants' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' const {arrayOf, func, string, shape} = PropTypes @@ -72,7 +73,7 @@ const DashboardsPage = React.createClass({
-
+
@@ -130,7 +131,7 @@ const DashboardsPage = React.createClass({
-
+ ) }, diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index 2bfd28f47b..5ef94ce15b 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -18,6 +18,7 @@ import {fetchLayouts} from 'shared/apis' import {setAutoRefresh} from 'shared/actions/app' import {presentationButtonDispatcher} from 'shared/dispatchers' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' const {shape, string, bool, func, number} = PropTypes @@ -199,16 +200,14 @@ export const HostPage = React.createClass({ ) })} -
+
{layouts.length > 0 ? this.renderLayouts(layouts) : ''}
-
+ ) }, diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js index 66b8c4214b..67c46d5f81 100644 --- a/ui/src/hosts/containers/HostsPage.js +++ b/ui/src/hosts/containers/HostsPage.js @@ -3,6 +3,7 @@ import _ from 'lodash' import HostsTable from '../components/HostsTable' import SourceIndicator from '../../shared/components/SourceIndicator' import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' export const HostsPage = React.createClass({ propTypes: { @@ -87,7 +88,7 @@ export const HostsPage = React.createClass({ -
+
@@ -100,7 +101,7 @@ export const HostsPage = React.createClass({
-
+ ) }, diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js index 4918dd3bb1..a5dbb61232 100644 --- a/ui/src/kapacitor/components/KapacitorForm.js +++ b/ui/src/kapacitor/components/KapacitorForm.js @@ -1,5 +1,6 @@ import React, {Component, PropTypes} from 'react' import AlertTabs from './AlertTabs' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' class KapacitorForm extends Component { render() { @@ -17,7 +18,7 @@ class KapacitorForm extends Component { -
+
@@ -100,7 +101,7 @@ class KapacitorForm extends Component {
-
+ ) } diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index e04a08c9d6..cba376c322 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -7,6 +7,7 @@ import RuleMessage from 'src/kapacitor/components/RuleMessage' import {createRule, editRule} from 'src/kapacitor/apis' import buildInfluxQLQuery from 'utils/influxql' import timeRanges from 'hson!../../shared/data/timeRanges.hson' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' export const KapacitorRule = React.createClass({ propTypes: { @@ -57,7 +58,7 @@ export const KapacitorRule = React.createClass({ timeRange={timeRange} source={source} /> -
+
@@ -89,7 +90,7 @@ export const KapacitorRule = React.createClass({
-
+ ) }, diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index a6d4027ceb..d4907b78d1 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -4,6 +4,7 @@ import {Link} from 'react-router' import NoKapacitorError from '../../shared/components/NoKapacitorError' import SourceIndicator from '../../shared/components/SourceIndicator' import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' const KapacitorRules = ({ source, @@ -62,7 +63,7 @@ const PageContents = ({children, source}) => ( -
+
@@ -72,7 +73,7 @@ const PageContents = ({children, source}) => (
-
+ ) diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js index 573749fc9d..c4facf2763 100644 --- a/ui/src/sources/containers/ManageSources.js +++ b/ui/src/sources/containers/ManageSources.js @@ -1,6 +1,7 @@ import React, {Component, PropTypes} from 'react' import {connect} from 'react-redux' import {bindActionCreators} from 'redux' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' import { removeAndLoadSources, @@ -57,7 +58,7 @@ class ManageSources extends Component { -
+
-
+ ) } diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js index 56ea90e3ef..dde8405d6a 100644 --- a/ui/src/sources/containers/SourcePage.js +++ b/ui/src/sources/containers/SourcePage.js @@ -8,6 +8,7 @@ import { } from 'shared/actions/sources' import {connect} from 'react-redux' import SourceForm from 'src/sources/components/SourceForm' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' const {func, shape, string} = PropTypes @@ -123,7 +124,7 @@ export const SourcePage = React.createClass({ -
+
@@ -139,7 +140,7 @@ export const SourcePage = React.createClass({
-
+ ) }, From b6886a8bd83d8eea08e61c1c9cf71c1af236e6ce Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 16:01:52 -0700 Subject: [PATCH 06/30] Make scrollbars green themed on Kapacitor pages --- ui/src/kapacitor/components/KapacitorRule.js | 2 +- ui/src/kapacitor/components/KapacitorRules.js | 2 +- ui/src/style/components/fancy-scrollbars.scss | 16 ++++++++++++++-- 3 files changed, 16 insertions(+), 4 deletions(-) diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index cba376c322..566d60c0f9 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -58,7 +58,7 @@ export const KapacitorRule = React.createClass({ timeRange={timeRange} source={source} /> - +
diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index d4907b78d1..335fc9e8c0 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -63,7 +63,7 @@ const PageContents = ({children, source}) => (
- +
diff --git a/ui/src/style/components/fancy-scrollbars.scss b/ui/src/style/components/fancy-scrollbars.scss index d65de73a20..565f7364ac 100644 --- a/ui/src/style/components/fancy-scrollbars.scss +++ b/ui/src/style/components/fancy-scrollbars.scss @@ -6,6 +6,9 @@ $scrollbar-track-size: 12px; $scrollbar-thumb-size: 6px; +$scrollbar-color-a: $c-pool; +$scrollbar-color-b: $c-comet; + /* Horizontal Scrollbar Styles */ .fancy-scroll--track-h { padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2; @@ -17,7 +20,7 @@ $scrollbar-thumb-size: 6px; .fancy-scroll--thumb-h { height: $scrollbar-thumb-size !important; border-radius: ($scrollbar-thumb-size / 2); - @include gradient-h($c-pool,$c-comet); + @include gradient-h($scrollbar-color-a,$scrollbar-color-b); } /* Vertical Scrollbar Styles */ .fancy-scroll--track-v { @@ -30,5 +33,14 @@ $scrollbar-thumb-size: 6px; .fancy-scroll--thumb-v { width: $scrollbar-thumb-size !important; border-radius: ($scrollbar-thumb-size / 2); - @include gradient-v($c-pool,$c-comet); + @include gradient-v($scrollbar-color-a,$scrollbar-color-b); +} + +/* Kapacitor Theme Scrollbars */ +$scrollbar-color-kap-a: $c-rainforest; +$scrollbar-color-kap-b: $c-pool; + +.fancy-scroll--kapacitor { + .fancy-scroll--thumb-h { @include gradient-h($scrollbar-color-kap-a,$scrollbar-color-kap-b); } + .fancy-scroll--thumb-v { @include gradient-v($scrollbar-color-kap-a,$scrollbar-color-kap-b); } } \ No newline at end of file From 4e1e54de9662bf4e65ee88f2ce40702f6587659b Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 17:41:50 -0700 Subject: [PATCH 07/30] Fix presentation mode --- ui/src/style/layout/page.scss | 10 +++++++++- ui/src/style/pages/dashboards.scss | 11 +---------- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/ui/src/style/layout/page.scss b/ui/src/style/layout/page.scss index cc70e6fd19..ad2ce16087 100644 --- a/ui/src/style/layout/page.scss +++ b/ui/src/style/layout/page.scss @@ -22,7 +22,6 @@ width: 100%; height: calc(100% - #{$chronograf-page-header-height}) !important; @include gradient-v($g2-kevlar,$g0-obsidian); - } .container-fluid { padding: ($chronograf-page-header-height / 2) $page-wrapper-padding; @@ -31,4 +30,13 @@ &.full-width { max-width: 100%; } +} + +/* Presentation Mode */ +.page-contents.presentation-mode { + top: 0; + height: 100% !important; + + .container-fluid {padding: 8px !important;} + .template-control--manage {display: none;} } \ No newline at end of file diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss index 89f4d98084..714e10deba 100644 --- a/ui/src/style/pages/dashboards.scss +++ b/ui/src/style/pages/dashboards.scss @@ -41,18 +41,9 @@ $dash-graph-options-arrow: 8px; } .dashboard { - &.container-fluid.full-width.page-contents { + &.container-fluid.full-width { padding-top: 8px; } - &.presentation-mode { - top: 0; - height: 100%; - padding: 12px; - - .template-control--manage { - display: none; - } - } .react-grid-item { @extend .cell-shell; } From b3e712daae55ede6e176ec3b115406790a3bf0ff Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 18:00:11 -0700 Subject: [PATCH 08/30] Add autoHide prop to pass down --- ui/src/shared/components/FancyScrollbar.js | 18 ++++++++++++------ 1 file changed, 12 insertions(+), 6 deletions(-) diff --git a/ui/src/shared/components/FancyScrollbar.js b/ui/src/shared/components/FancyScrollbar.js index e1dc36d705..1fdc15f47e 100644 --- a/ui/src/shared/components/FancyScrollbar.js +++ b/ui/src/shared/components/FancyScrollbar.js @@ -1,4 +1,5 @@ import React, {Component, PropTypes} from 'react' +import classnames from 'classnames' import {Scrollbars} from 'react-custom-scrollbars' class FancyScrollbox extends Component { @@ -6,13 +7,17 @@ class FancyScrollbox extends Component { super(props) } + static defaultProps = { + autoHide: true, + } + render() { - const {children, className} = this.props + const {autoHide, children, className} = this.props return (
} @@ -26,11 +31,12 @@ class FancyScrollbox extends Component { } } -const {node, string} = PropTypes +const {bool, node, string} = PropTypes FancyScrollbox.propTypes = { children: node.isRequired, - className: string.isRequired, + className: string, + autoHide: bool, } -export default FancyScrollbox +export default FancyScrollbox \ No newline at end of file From b673822dc796b06048bee3e7f01ab0d476571357 Mon Sep 17 00:00:00 2001 From: Alex P Date: Mon, 8 May 2017 20:53:59 -0700 Subject: [PATCH 09/30] Add fancy scrollbars to the DE --- .../data_explorer/components/DatabaseList.js | 37 ++++++------ ui/src/data_explorer/components/FieldList.js | 33 ++++++----- .../components/MeasurementList.js | 59 ++++++++++--------- 3 files changed, 69 insertions(+), 60 deletions(-) diff --git a/ui/src/data_explorer/components/DatabaseList.js b/ui/src/data_explorer/components/DatabaseList.js index 044fd93d94..54b2b5948b 100644 --- a/ui/src/data_explorer/components/DatabaseList.js +++ b/ui/src/data_explorer/components/DatabaseList.js @@ -1,6 +1,7 @@ import React, {PropTypes} from 'react' import classnames from 'classnames' import _ from 'lodash' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery' import showDatabasesParser from 'shared/parsing/showDatabases' @@ -67,24 +68,26 @@ const DatabaseList = React.createClass({
Databases
- {this.state.namespaces.map(namespace => { - const {database, retentionPolicy} = namespace - const isActive = - database === query.database && - retentionPolicy === query.retentionPolicy + + {this.state.namespaces.map(namespace => { + const {database, retentionPolicy} = namespace + const isActive = + database === query.database && + retentionPolicy === query.retentionPolicy - return ( -
- {database}.{retentionPolicy} -
- ) - })} + return ( +
+ {database}.{retentionPolicy} +
+ ) + })} +
) diff --git a/ui/src/data_explorer/components/FieldList.js b/ui/src/data_explorer/components/FieldList.js index 47304ad7a7..86e7a4d79b 100644 --- a/ui/src/data_explorer/components/FieldList.js +++ b/ui/src/data_explorer/components/FieldList.js @@ -2,6 +2,7 @@ import React, {PropTypes} from 'react' import FieldListItem from './FieldListItem' import GroupByTimeDropdown from './GroupByTimeDropdown' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' import {showFieldKeys} from 'shared/apis/metaQuery' import showFieldKeysParser from 'shared/parsing/showFieldKeys' @@ -109,21 +110,23 @@ const FieldList = React.createClass({ return (
- {this.state.fields.map(fieldFunc => { - const selectedField = this.props.query.fields.find( - f => f.field === fieldFunc.field - ) - return ( - - ) - })} + + {this.state.fields.map(fieldFunc => { + const selectedField = this.props.query.fields.find( + f => f.field === fieldFunc.field + ) + return ( + + ) + })} +
) }, diff --git a/ui/src/data_explorer/components/MeasurementList.js b/ui/src/data_explorer/components/MeasurementList.js index 9841b4b812..49c47008ec 100644 --- a/ui/src/data_explorer/components/MeasurementList.js +++ b/ui/src/data_explorer/components/MeasurementList.js @@ -1,6 +1,7 @@ import React, {PropTypes} from 'react' import classnames from 'classnames' import _ from 'lodash' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' import {showMeasurements} from 'shared/apis/metaQuery' import showMeasurementsParser from 'shared/parsing/showMeasurements' @@ -120,39 +121,41 @@ const MeasurementList = React.createClass({ return (
- {measurements.map(measurement => { - const isActive = measurement === this.props.query.measurement - const numTagsActive = Object.keys(this.props.query.tags).length + + {measurements.map(measurement => { + const isActive = measurement === this.props.query.measurement + const numTagsActive = Object.keys(this.props.query.tags).length - return ( -
-
- -
- {measurement} - - {(isActive && numTagsActive >= 1) - ?
-
-
!=
-
=
+ return ( +
+
+ +
+ {measurement} + + {(isActive && numTagsActive >= 1) + ?
+
+
!=
+
=
+
-
+ : null + } +
+ { + isActive ? + : null }
- { - isActive ? - - : null - } -
- ) - })} + ) + })} +
) }, From b4522c0496d7b2c43728cc42300138290994476c Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 17:26:30 -0700 Subject: [PATCH 10/30] Use proper cursor when hovering over a scrollbar track --- ui/src/style/components/fancy-scrollbars.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/ui/src/style/components/fancy-scrollbars.scss b/ui/src/style/components/fancy-scrollbars.scss index 565f7364ac..5e1eaa32d2 100644 --- a/ui/src/style/components/fancy-scrollbars.scss +++ b/ui/src/style/components/fancy-scrollbars.scss @@ -9,6 +9,10 @@ $scrollbar-thumb-size: 6px; $scrollbar-color-a: $c-pool; $scrollbar-color-b: $c-comet; +.fancy-scroll--track-h, +.fancy-scroll--track-v { + &:hover {cursor: pointer;} +} /* Horizontal Scrollbar Styles */ .fancy-scroll--track-h { padding: ($scrollbar-track-size - $scrollbar-thumb-size) / 2; From efaade347bbed5a43e467f60009f78a299078f8c Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 17:33:27 -0700 Subject: [PATCH 11/30] Remove browser scrollbars on query builder lists This way no conflict with fancy scroll --- ui/src/style/components/query-builder.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/ui/src/style/components/query-builder.scss b/ui/src/style/components/query-builder.scss index 66e920acba..29d65a1197 100644 --- a/ui/src/style/components/query-builder.scss +++ b/ui/src/style/components/query-builder.scss @@ -43,10 +43,6 @@ } .query-builder--list { padding: 0; - overflow: auto; - overflow-x: hidden; - overflow-y: scroll; - @include custom-scrollbar($query-builder--list-bg,$c-pool); background-color: $query-builder--list-bg; } .query-builder--list-empty { From 1eed46b4626f1f5d29d3c8c89ad66f0cbb42fd0d Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 17:34:03 -0700 Subject: [PATCH 12/30] Clean up dropdown styles --- ui/src/sources/components/InfluxTable.js | 2 +- ui/src/style/components/dropdown.scss | 18 +++++++++++++++--- ui/src/style/unsorted.scss | 23 ----------------------- 3 files changed, 16 insertions(+), 27 deletions(-) diff --git a/ui/src/sources/components/InfluxTable.js b/ui/src/sources/components/InfluxTable.js index 9974d215e8..8f0d7bce66 100644 --- a/ui/src/sources/components/InfluxTable.js +++ b/ui/src/sources/components/InfluxTable.js @@ -34,7 +34,7 @@ const kapacitorDropdown = ( return ( .icon { - font-size: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; - position: relative; - top: -1px; } + .dropdown-selected { + display: inline-block; + flex: 1 0 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + padding-right: 15px; + } +} +.dropdown .dropdown-toggle.btn-xs { + height: 22px !important; + line-height: 22px !important; + padding: 0 9px !important; } /* diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index c8b9d7c29f..96274f0d46 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -155,29 +155,6 @@ } -/* - Kapacitor selector dropdown - ---------------------------------------------- -*/ -.dropdown .dropdown-toggle.btn-xs { - height: 22px !important; - line-height: 22px !important; - padding: 0 9px !important; -} -.dropdown-selected { - display: inline-block; - width: 100%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - padding-right: 15px; -} -.dropdown.sources--kapacitor-selector { - .dropdown-toggle { - width: 160px; - } -} - /* Custom Tabs ---------------------------------------------- From c7809f82f9ddf88e88dd71983f8fc2dbe47db273 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 18:17:35 -0700 Subject: [PATCH 13/30] Make dropdowns fancy --- ui/src/shared/components/Dropdown.js | 154 +++++++++++++----- ui/src/shared/constants/index.js | 3 + ui/src/style/components/dropdown.scss | 43 ++--- ui/src/style/components/fancy-scrollbars.scss | 6 + 4 files changed, 133 insertions(+), 73 deletions(-) diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js index f1858c7a6b..510e12502f 100644 --- a/ui/src/shared/components/Dropdown.js +++ b/ui/src/shared/components/Dropdown.js @@ -2,6 +2,8 @@ import React, {Component, PropTypes} from 'react' import {Link} from 'react-router' import classnames from 'classnames' import OnClickOutside from 'shared/components/OnClickOutside' +import FancyScrollbox from 'shared/components/FancyScrollbar' +import {DROPDOWN_MENU_MAX_HEIGHT, DROPDOWN_MENU_ITEM_THRESHOLD} from 'shared/constants/index' class Dropdown extends Component { constructor(props) { @@ -52,17 +54,116 @@ class Dropdown extends Component { action.handler(item) } + renderShortMenu() { + const {actions, addNew, items, menuWidth, menuLabel} = this.props + return ( +
    + {menuLabel + ?
  • {menuLabel}
    • + : null + } + {items.map((item, i) => { + if (item.text === 'SEPARATOR') { + return
  • + } + return ( +
  • + this.handleSelection(item)}> + {item.text} + + {actions.length > 0 + ?
    + {actions.map(action => { + return ( + + ) + })} +
    + : null} +
    • + ) + })} + {addNew + ?
  • + + {addNew.text} + +
    • + : null} +
+ ) + } + + renderLongMenu() { + const {actions, addNew, items, menuWidth, menuLabel} = this.props + return ( +
    + + {menuLabel + ?
  • {menuLabel}
    • + : null + } + {items.map((item, i) => { + if (item.text === 'SEPARATOR') { + return
  • + } + return ( +
  • + this.handleSelection(item)}> + {item.text} + + {actions.length > 0 + ?
    + {actions.map(action => { + return ( + + ) + })} +
    + : null} +
    • + ) + })} + {addNew + ?
  • + + {addNew.text} + +
    • + : null} +     +
+ ) + } + render() { const { items, selected, className, iconName, - actions, - addNew, buttonSize, buttonColor, - menuWidth, } = this.props const {isOpen} = this.state @@ -78,47 +179,11 @@ class Dropdown extends Component { {selected}
- {isOpen - ?
    - {items.map((item, i) => { - if (item.text === 'SEPARATOR') { - return
  • - } - return ( -
  • - this.handleSelection(item)}> - {item.text} - - {actions.length > 0 - ?
    - {actions.map(action => { - return ( - - ) - })} -
    - : null} -
    • - ) - })} - {addNew - ?
  • - - {addNew.text} - -
    • - : null} -
+ {(isOpen && items.length < DROPDOWN_MENU_ITEM_THRESHOLD) + ? this.renderShortMenu() + : null} + {(isOpen && items.length >= DROPDOWN_MENU_ITEM_THRESHOLD) + ? this.renderLongMenu() : null}
) @@ -152,6 +217,7 @@ Dropdown.propTypes = { buttonSize: string, buttonColor: string, menuWidth: string, + menuLabel: string, } export default OnClickOutside(Dropdown) diff --git a/ui/src/shared/constants/index.js b/ui/src/shared/constants/index.js index f7867058b0..48aeb02b81 100644 --- a/ui/src/shared/constants/index.js +++ b/ui/src/shared/constants/index.js @@ -379,6 +379,9 @@ export const STROKE_WIDTH = { light: 1.5, } +export const DROPDOWN_MENU_MAX_HEIGHT = '270px' +export const DROPDOWN_MENU_ITEM_THRESHOLD = 10 + export const HEARTBEAT_INTERVAL = 10000 // ms export const PRESENTATION_MODE_ANIMATION_DELAY = 0 // In milliseconds. diff --git a/ui/src/style/components/dropdown.scss b/ui/src/style/components/dropdown.scss index 06b5713d31..4e96bc0b40 100644 --- a/ui/src/style/components/dropdown.scss +++ b/ui/src/style/components/dropdown.scss @@ -6,7 +6,7 @@ */ $dropdown-menu-default-width: 100%; -$dropdown-menu-max-height: 290px; +$dropdown-menu-max-height: 270px; /* Generic width modifiers @@ -73,27 +73,26 @@ $dropdown-menu-max-height: 290px; ---------------------------------------------- */ .dropdown-menu { - float: none !important; width: $dropdown-menu-default-width; - min-width: $dropdown-menu-default-width; - max-width: $dropdown-menu-default-width; - margin: 0 !important; - padding: 0 !important; + min-width: initial; + margin: 0; + padding: 0; + overflow: hidden; max-height: $dropdown-menu-max-height; - overflow: auto; - @include custom-scrollbar-round($c-pool, $c-laser); @include gradient-h($c-ocean, $c-pool); box-shadow: 0 2px 5px 0.6px fade-out($g0-obsidian, 0.8); - > li { + li.dropdown-item { + position: relative; width: 100%; - font-size: 0px; &:hover { @include gradient-h($c-laser, $c-pool); } } - > li > a { + li.dropdown-item > a { + position: relative; + @include no-user-select(); width: 100%; border-radius: 0 !important; display: inline-block; @@ -119,12 +118,6 @@ $dropdown-menu-max-height: 290px; @include gradient-h($c-ocean, $c-pool); } } - > li:last-child a { - border-radius: 0 0 3px 3px; - } - > li:first-child a { - border-radius: 3px 3px 0 0; - } } .dropdown.dropdown-kapacitor .dropdown-toggle { color: $c-rainforest !important; @@ -135,10 +128,10 @@ $dropdown-menu-max-height: 290px; @include custom-scrollbar($c-rainforest, $c-honeydew); @include gradient-h($c-pool, $c-rainforest); - > li:hover { + li.dropdown-item:hover { @include gradient-h($c-laser, $c-rainforest); } - > li > a { + li.dropdown-item > a { color: $c-mint !important; &:hover { color: $g20-white !important; @@ -149,10 +142,10 @@ $dropdown-menu-max-height: 290px; @include custom-scrollbar($c-comet, $c-potassium); @include gradient-h($c-ocean, $c-comet); - > li:hover { + li.dropdown-item:hover { @include gradient-h($c-laser, $c-comet); } - > li > a { + li.dropdown-item > a { color: $c-twilight !important; &:hover { color: $g20-white !important; @@ -187,14 +180,6 @@ $dropdown-menu-max-height: 290px; Dropdown Actions ---------------------------------------------- */ -.dropdown-item { - position: relative; - - > a { - position: relative; - z-index: 1; - } -} .dropdown-item__actions { z-index: 2; position: absolute; diff --git a/ui/src/style/components/fancy-scrollbars.scss b/ui/src/style/components/fancy-scrollbars.scss index 5e1eaa32d2..53f4793851 100644 --- a/ui/src/style/components/fancy-scrollbars.scss +++ b/ui/src/style/components/fancy-scrollbars.scss @@ -47,4 +47,10 @@ $scrollbar-color-kap-b: $c-pool; .fancy-scroll--kapacitor { .fancy-scroll--thumb-h { @include gradient-h($scrollbar-color-kap-a,$scrollbar-color-kap-b); } .fancy-scroll--thumb-v { @include gradient-v($scrollbar-color-kap-a,$scrollbar-color-kap-b); } +} + +/* Dropdown Theme Scrollbars */ +ul.dropdown-menu { + .fancy-scroll--thumb-h { @include gradient-h($c-neutrino,$c-laser); } + .fancy-scroll--thumb-v { @include gradient-v($c-neutrino,$c-laser); } } \ No newline at end of file From 572fe17a8f51fc4ff487775ce3c1d2f824dfd4e4 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 18:25:43 -0700 Subject: [PATCH 14/30] Update dropdowns, use FancyScroll when possible --- .../shared/components/AutoRefreshDropdown.js | 8 ++--- ui/src/shared/components/Dropdown.js | 2 +- ui/src/shared/components/TimeRangeDropdown.js | 29 ++++++++++--------- .../components/template-control-bar.scss | 11 +++---- 4 files changed, 27 insertions(+), 23 deletions(-) diff --git a/ui/src/shared/components/AutoRefreshDropdown.js b/ui/src/shared/components/AutoRefreshDropdown.js index 2eb7e5faf0..94244add73 100644 --- a/ui/src/shared/components/AutoRefreshDropdown.js +++ b/ui/src/shared/components/AutoRefreshDropdown.js @@ -44,7 +44,7 @@ const AutoRefreshDropdown = React.createClass({ const {milliseconds, inputValue} = this.findAutoRefreshItem(selected) return ( -
+
self.toggleMenu()} @@ -55,14 +55,14 @@ const AutoRefreshDropdown = React.createClass({ +milliseconds > 0 ? 'refresh' : 'pause' )} /> - {inputValue} + {inputValue}
-
    +
    • AutoRefresh Interval
      • {autoRefreshItems.map(item => { return ( -
    • +
    • self.handleSelection(item.milliseconds)} diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js index 510e12502f..1abafc9870 100644 --- a/ui/src/shared/components/Dropdown.js +++ b/ui/src/shared/components/Dropdown.js @@ -94,7 +94,7 @@ class Dropdown extends Component { ) })} {addNew - ?
    • + ?
    • {addNew.text} diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js index 0fab5289bb..2969e40931 100644 --- a/ui/src/shared/components/TimeRangeDropdown.js +++ b/ui/src/shared/components/TimeRangeDropdown.js @@ -1,6 +1,7 @@ import React from 'react' import classnames from 'classnames' import OnClickOutside from 'shared/components/OnClickOutside' +import FancyScrollbox from 'src/shared/components/FancyScrollbar' import moment from 'moment' @@ -55,28 +56,30 @@ const TimeRangeDropdown = React.createClass({ const {isOpen} = self.state return ( -
      + ) diff --git a/ui/src/style/components/template-control-bar.scss b/ui/src/style/components/template-control-bar.scss index 75925673fc..f6e3b70dc7 100644 --- a/ui/src/style/components/template-control-bar.scss +++ b/ui/src/style/components/template-control-bar.scss @@ -59,14 +59,15 @@ $template-control--min-height: 52px; @include gradient-h($c-star,$c-pool); @include custom-scrollbar-round($c-pool,$c-laser); - > li > a { - &, &:active {background-color: transparent !important;} + li.dropdown-item { + &:hover {@include gradient-h($c-comet,$c-pool);} + } + li.dropdown-item > a { + &, &:focus {background: none;} + &:active, &:active:focus {@include gradient-h($c-amethyst,$c-pool);} font-size: 12px; font-family: $code-font; } - > li { - &:hover {@include gradient-h($c-comet,$c-pool);} - } } } .template-control--label { From df6935d849ee1258f1ef70faf828134e7e4d90e9 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 18:28:01 -0700 Subject: [PATCH 15/30] Remove odd border Looked okay on editable dashboards, but kinda cramped on pre-canned dashboards --- ui/src/style/pages/dashboards.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/ui/src/style/pages/dashboards.scss b/ui/src/style/pages/dashboards.scss index 714e10deba..088ef542a2 100644 --- a/ui/src/style/pages/dashboards.scss +++ b/ui/src/style/pages/dashboards.scss @@ -41,9 +41,6 @@ $dash-graph-options-arrow: 8px; } .dashboard { - &.container-fluid.full-width { - padding-top: 8px; - } .react-grid-item { @extend .cell-shell; } From 70ea2d705ffb08dde44acf183e885c9d05d71aca Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 18:31:56 -0700 Subject: [PATCH 16/30] Enforce dropdown styles on page-header-dropdown --- ui/src/dashboards/containers/DashboardPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ui/src/dashboards/containers/DashboardPage.js b/ui/src/dashboards/containers/DashboardPage.js index 1632b238f2..4535fcbbf1 100644 --- a/ui/src/dashboards/containers/DashboardPage.js +++ b/ui/src/dashboards/containers/DashboardPage.js @@ -292,7 +292,7 @@ class DashboardPage extends Component { > {dashboards ? dashboards.map((d, i) => ( -
    • +
    • Date: Tue, 9 May 2017 19:14:26 -0700 Subject: [PATCH 17/30] Update Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bcc1af782..0a5a054b9d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ ### Features ### UI Improvements + 1. [#1451](https://github.com/influxdata/chronograf/pull/1451): Using cross browser aesthetically pleasing scrollbars in place of browser defaults ## v1.3.0 [2017-05-09] From 1177cf56740ae05f823391fbeca1423b72c854c4 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 19:42:09 -0700 Subject: [PATCH 18/30] Use proper mixins --- ui/src/style/layout/sidebar.scss | 12 ++---------- 1 file changed, 2 insertions(+), 10 deletions(-) diff --git a/ui/src/style/layout/sidebar.scss b/ui/src/style/layout/sidebar.scss index e93b9d85a5..342d8a28c9 100644 --- a/ui/src/style/layout/sidebar.scss +++ b/ui/src/style/layout/sidebar.scss @@ -58,11 +58,7 @@ $sidebar-logo-color: $g8-storm; display: flex; flex-direction: column; width: $sidebar-width; - background: $sidebar-light; - background: -moz-linear-gradient(top, $sidebar-light 0%, $sidebar-dark 100%); - background: -webkit-linear-gradient(top, $sidebar-light 0%,$sidebar-dark 100%); - background: linear-gradient(to bottom, $sidebar-light 0%,$sidebar-dark 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$sidebar-light', endColorstr='$sidebar-dark',GradientType=0 ); + @include gradient-v($sidebar-light,$sidebar-dark); &__logo { width: $sidebar-width; @@ -283,11 +279,7 @@ $sidebar-logo-color: $g8-storm; } } &.active { - background: $sidebar-active-bg; - background: -moz-linear-gradient(left, $sidebar-active-bg 0%, $sidebar-active-accent 100%); - background: -webkit-linear-gradient(left, $sidebar-active-bg 0%,$sidebar-active-accent 100%); - background: linear-gradient(to right, $sidebar-active-bg 0%,$sidebar-active-accent 100%); - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$sidebar-active-bg', endColorstr='$sidebar-active-accent',GradientType=1 ); + @include gradient-h($sidebar-active-bg,$sidebar-active-accent); color: $sidebar-icon-hover; &:link, From 8123cda148b867a84e5ac20346bbda6af6ea1ac5 Mon Sep 17 00:00:00 2001 From: Alex P Date: Tue, 9 May 2017 19:53:18 -0700 Subject: [PATCH 19/30] Make sure this works in Safari --- ui/src/style/components/fancy-scrollbars.scss | 9 +++++++++ ui/src/style/layout/page.scss | 2 +- 2 files changed, 10 insertions(+), 1 deletion(-) diff --git a/ui/src/style/components/fancy-scrollbars.scss b/ui/src/style/components/fancy-scrollbars.scss index 53f4793851..b9239adda6 100644 --- a/ui/src/style/components/fancy-scrollbars.scss +++ b/ui/src/style/components/fancy-scrollbars.scss @@ -53,4 +53,13 @@ $scrollbar-color-kap-b: $c-pool; ul.dropdown-menu { .fancy-scroll--thumb-h { @include gradient-h($c-neutrino,$c-laser); } .fancy-scroll--thumb-v { @include gradient-v($c-neutrino,$c-laser); } +} + +/* Hacky Fix to make this work in Safari */ +.query-builder--list { + position: relative; + + .fancy-scroll--container { + position: absolute !important; + } } \ No newline at end of file diff --git a/ui/src/style/layout/page.scss b/ui/src/style/layout/page.scss index ad2ce16087..51680d3cec 100644 --- a/ui/src/style/layout/page.scss +++ b/ui/src/style/layout/page.scss @@ -16,7 +16,7 @@ flex-grow: 1; } .page-contents { - position: absolute; + position: absolute !important; top: $chronograf-page-header-height; left: 0; width: 100%; From 70f6e01657b1fc5b738da9db6c00510f1b84ce24 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 10:58:17 -0700 Subject: [PATCH 20/30] Rename Component to match filename MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit “FancyScrollbox” —> “FancyScrollbar” Also went through all the components I touched and made sure to import the FancyScrollbar in the correct spot PPS changed relative paths to absolute along the way --- ui/src/admin/containers/AdminPage.js | 8 ++++---- ui/src/alerts/containers/AlertsApp.js | 13 +++++++------ ui/src/dashboards/components/Dashboard.js | 6 +++--- ui/src/dashboards/containers/DashboardsPage.js | 6 +++--- ui/src/data_explorer/components/DatabaseList.js | 7 ++++--- ui/src/data_explorer/components/FieldList.js | 10 +++++----- ui/src/data_explorer/components/MeasurementList.js | 9 +++++---- ui/src/hosts/containers/HostPage.js | 7 ++++--- ui/src/hosts/containers/HostsPage.js | 12 +++++++----- ui/src/kapacitor/components/KapacitorForm.js | 9 +++++---- ui/src/kapacitor/components/KapacitorRule.js | 12 +++++++----- ui/src/kapacitor/components/KapacitorRules.js | 10 +++++----- ui/src/shared/components/Dropdown.js | 6 +++--- ui/src/shared/components/FancyScrollbar.js | 6 +++--- ui/src/shared/components/TimeRangeDropdown.js | 10 +++++----- ui/src/sources/containers/ManageSources.js | 10 +++++----- ui/src/sources/containers/SourcePage.js | 8 ++++---- 17 files changed, 79 insertions(+), 70 deletions(-) diff --git a/ui/src/admin/containers/AdminPage.js b/ui/src/admin/containers/AdminPage.js index 2687566acc..fcbedd0866 100644 --- a/ui/src/admin/containers/AdminPage.js +++ b/ui/src/admin/containers/AdminPage.js @@ -25,10 +25,10 @@ import { } from 'src/admin/actions' import AdminTabs from 'src/admin/components/AdminTabs' -import SourceIndicator from '../../shared/components/SourceIndicator' +import SourceIndicator from 'src/shared/components/SourceIndicator' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' import {publishAutoDismissingNotification} from 'shared/dispatchers' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' const isValidUser = user => { const minLen = 3 @@ -175,7 +175,7 @@ class AdminPage extends Component {
- +
{users @@ -207,7 +207,7 @@ class AdminPage extends Component { : Loading...}
- +
) } diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index 927a030c2f..6206a3a0cc 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/ui/src/alerts/containers/AlertsApp.js @@ -1,9 +1,10 @@ import React, {PropTypes, Component} from 'react' -import SourceIndicator from '../../shared/components/SourceIndicator' -import AlertsTable from '../components/AlertsTable' -import NoKapacitorError from '../../shared/components/NoKapacitorError' + +import SourceIndicator from 'src/shared/components/SourceIndicator' +import AlertsTable from 'src/alerts/components/AlertsTable' +import NoKapacitorError from 'src/shared/components/NoKapacitorError' import CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' import {getAlerts} from '../apis' import AJAX from 'utils/ajax' @@ -149,7 +150,7 @@ class AlertsApp extends Component {
- +
@@ -157,7 +158,7 @@ class AlertsApp extends Component {
- + ) } diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js index 8c48b4f98d..80a2be61af 100644 --- a/ui/src/dashboards/components/Dashboard.js +++ b/ui/src/dashboards/components/Dashboard.js @@ -3,7 +3,7 @@ import classnames from 'classnames' import TemplateControlBar from 'src/dashboards/components/TemplateControlBar' import LayoutRenderer from 'shared/components/LayoutRenderer' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' const Dashboard = ({ source, @@ -41,7 +41,7 @@ const Dashboard = ({ }) return ( - @@ -71,7 +71,7 @@ const Dashboard = ({ } - + ) } diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js index a36b51b219..fdfea5f83f 100644 --- a/ui/src/dashboards/containers/DashboardsPage.js +++ b/ui/src/dashboards/containers/DashboardsPage.js @@ -5,12 +5,12 @@ import {bindActionCreators} from 'redux' import SourceIndicator from 'shared/components/SourceIndicator' import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' import {createDashboard} from 'src/dashboards/apis' import {getDashboardsAsync, deleteDashboardAsync} from 'src/dashboards/actions' import {NEW_DASHBOARD} from 'src/dashboards/constants' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' const {arrayOf, func, string, shape} = PropTypes @@ -73,7 +73,7 @@ const DashboardsPage = React.createClass({ - +
@@ -131,7 +131,7 @@ const DashboardsPage = React.createClass({
- + ) }, diff --git a/ui/src/data_explorer/components/DatabaseList.js b/ui/src/data_explorer/components/DatabaseList.js index 54b2b5948b..41542723be 100644 --- a/ui/src/data_explorer/components/DatabaseList.js +++ b/ui/src/data_explorer/components/DatabaseList.js @@ -1,12 +1,13 @@ import React, {PropTypes} from 'react' import classnames from 'classnames' import _ from 'lodash' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery' import showDatabasesParser from 'shared/parsing/showDatabases' import showRetentionPoliciesParser from 'shared/parsing/showRetentionPolicies' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' + const {func, shape, string} = PropTypes const DatabaseList = React.createClass({ @@ -68,7 +69,7 @@ const DatabaseList = React.createClass({
Databases
- + {this.state.namespaces.map(namespace => { const {database, retentionPolicy} = namespace const isActive = @@ -87,7 +88,7 @@ const DatabaseList = React.createClass({
) })} - +
) diff --git a/ui/src/data_explorer/components/FieldList.js b/ui/src/data_explorer/components/FieldList.js index 86e7a4d79b..85ad478260 100644 --- a/ui/src/data_explorer/components/FieldList.js +++ b/ui/src/data_explorer/components/FieldList.js @@ -1,8 +1,8 @@ import React, {PropTypes} from 'react' -import FieldListItem from './FieldListItem' -import GroupByTimeDropdown from './GroupByTimeDropdown' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' +import FieldListItem from 'src/data_explorer/components/FieldListItem' +import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' import {showFieldKeys} from 'shared/apis/metaQuery' import showFieldKeysParser from 'shared/parsing/showFieldKeys' @@ -110,7 +110,7 @@ const FieldList = React.createClass({ return (
- + {this.state.fields.map(fieldFunc => { const selectedField = this.props.query.fields.find( f => f.field === fieldFunc.field @@ -126,7 +126,7 @@ const FieldList = React.createClass({ /> ) })} - +
) }, diff --git a/ui/src/data_explorer/components/MeasurementList.js b/ui/src/data_explorer/components/MeasurementList.js index eb09c67ce1..98d6e05ff9 100644 --- a/ui/src/data_explorer/components/MeasurementList.js +++ b/ui/src/data_explorer/components/MeasurementList.js @@ -1,10 +1,11 @@ import React, {PropTypes} from 'react' import classnames from 'classnames' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' import {showMeasurements} from 'shared/apis/metaQuery' import showMeasurementsParser from 'shared/parsing/showMeasurements' -import TagList from './TagList' + +import TagList from 'src/data_explorer/components/TagList' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' const {func, shape, string} = PropTypes @@ -120,7 +121,7 @@ const MeasurementList = React.createClass({ return (
- + {measurements.map(measurement => { const isActive = measurement === this.props.query.measurement const numTagsActive = Object.keys(this.props.query.tags).length @@ -167,7 +168,7 @@ const MeasurementList = React.createClass({
) })} - + ) }, diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index 5ef94ce15b..ed47502f15 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -7,6 +7,8 @@ import classnames from 'classnames' import LayoutRenderer from 'shared/components/LayoutRenderer' import DashboardHeader from 'src/dashboards/components/DashboardHeader' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' + import timeRanges from 'hson!../../shared/data/timeRanges.hson' import { getMappings, @@ -18,7 +20,6 @@ import {fetchLayouts} from 'shared/apis' import {setAutoRefresh} from 'shared/actions/app' import {presentationButtonDispatcher} from 'shared/dispatchers' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' const {shape, string, bool, func, number} = PropTypes @@ -200,14 +201,14 @@ export const HostPage = React.createClass({ ) })} -
{layouts.length > 0 ? this.renderLayouts(layouts) : ''}
- + ) }, diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js index 67c46d5f81..24d7f94aa2 100644 --- a/ui/src/hosts/containers/HostsPage.js +++ b/ui/src/hosts/containers/HostsPage.js @@ -1,9 +1,11 @@ import React, {PropTypes} from 'react' import _ from 'lodash' -import HostsTable from '../components/HostsTable' -import SourceIndicator from '../../shared/components/SourceIndicator' + +import HostsTable from 'src/hosts/components/HostsTable' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import SourceIndicator from 'src/shared/components/SourceIndicator' + import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' export const HostsPage = React.createClass({ propTypes: { @@ -88,7 +90,7 @@ export const HostsPage = React.createClass({ - +
@@ -101,7 +103,7 @@ export const HostsPage = React.createClass({
- + ) }, diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js index a5dbb61232..6ba8c51080 100644 --- a/ui/src/kapacitor/components/KapacitorForm.js +++ b/ui/src/kapacitor/components/KapacitorForm.js @@ -1,6 +1,7 @@ import React, {Component, PropTypes} from 'react' -import AlertTabs from './AlertTabs' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' + +import AlertTabs from 'src/kapacitor/components/AlertTabs' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' class KapacitorForm extends Component { render() { @@ -18,7 +19,7 @@ class KapacitorForm extends Component { - +
@@ -101,7 +102,7 @@ class KapacitorForm extends Component {
- + ) } diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index 566d60c0f9..11b03d33c2 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -1,13 +1,15 @@ import React, {PropTypes} from 'react' -import DataSection from '../components/DataSection' -import ValuesSection from '../components/ValuesSection' + +import DataSection from 'src/kapacitor/components/DataSection' +import ValuesSection from 'src/kapacitor/components/ValuesSection' import RuleHeader from 'src/kapacitor/components/RuleHeader' import RuleGraph from 'src/kapacitor/components/RuleGraph' import RuleMessage from 'src/kapacitor/components/RuleMessage' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' + import {createRule, editRule} from 'src/kapacitor/apis' import buildInfluxQLQuery from 'utils/influxql' import timeRanges from 'hson!../../shared/data/timeRanges.hson' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' export const KapacitorRule = React.createClass({ propTypes: { @@ -58,7 +60,7 @@ export const KapacitorRule = React.createClass({ timeRange={timeRange} source={source} /> - +
@@ -90,7 +92,7 @@ export const KapacitorRule = React.createClass({
- + ) }, diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index 335fc9e8c0..ebc269e44c 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -1,10 +1,10 @@ import React, {PropTypes} from 'react' import {Link} from 'react-router' -import NoKapacitorError from '../../shared/components/NoKapacitorError' -import SourceIndicator from '../../shared/components/SourceIndicator' +import NoKapacitorError from 'src/shared/components/NoKapacitorError' +import SourceIndicator from 'src/shared/components/SourceIndicator' import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' const KapacitorRules = ({ source, @@ -63,7 +63,7 @@ const PageContents = ({children, source}) => ( - +
@@ -73,7 +73,7 @@ const PageContents = ({children, source}) => (
- + ) diff --git a/ui/src/shared/components/Dropdown.js b/ui/src/shared/components/Dropdown.js index 1abafc9870..52867449e8 100644 --- a/ui/src/shared/components/Dropdown.js +++ b/ui/src/shared/components/Dropdown.js @@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react' import {Link} from 'react-router' import classnames from 'classnames' import OnClickOutside from 'shared/components/OnClickOutside' -import FancyScrollbox from 'shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {DROPDOWN_MENU_MAX_HEIGHT, DROPDOWN_MENU_ITEM_THRESHOLD} from 'shared/constants/index' class Dropdown extends Component { @@ -108,7 +108,7 @@ class Dropdown extends Component { const {actions, addNew, items, menuWidth, menuLabel} = this.props return (
    - + {menuLabel ?
  • {menuLabel}
    • : null @@ -151,7 +151,7 @@ class Dropdown extends Component { : null} -     +
) } diff --git a/ui/src/shared/components/FancyScrollbar.js b/ui/src/shared/components/FancyScrollbar.js index 1fdc15f47e..d573347012 100644 --- a/ui/src/shared/components/FancyScrollbar.js +++ b/ui/src/shared/components/FancyScrollbar.js @@ -2,7 +2,7 @@ import React, {Component, PropTypes} from 'react' import classnames from 'classnames' import {Scrollbars} from 'react-custom-scrollbars' -class FancyScrollbox extends Component { +class FancyScrollbar extends Component { constructor(props) { super(props) } @@ -33,10 +33,10 @@ class FancyScrollbox extends Component { const {bool, node, string} = PropTypes -FancyScrollbox.propTypes = { +FancyScrollbar.propTypes = { children: node.isRequired, className: string, autoHide: bool, } -export default FancyScrollbox \ No newline at end of file +export default FancyScrollbar \ No newline at end of file diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js index 2969e40931..619fab5d71 100644 --- a/ui/src/shared/components/TimeRangeDropdown.js +++ b/ui/src/shared/components/TimeRangeDropdown.js @@ -1,10 +1,10 @@ import React from 'react' import classnames from 'classnames' -import OnClickOutside from 'shared/components/OnClickOutside' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' - import moment from 'moment' +import OnClickOutside from 'src/shared/components/OnClickOutside' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' + import timeRanges from 'hson!../data/timeRanges.hson' const TimeRangeDropdown = React.createClass({ @@ -68,7 +68,7 @@ const TimeRangeDropdown = React.createClass({
    - +
  • Time Range
    • {timeRanges.map(item => { return ( @@ -79,7 +79,7 @@ const TimeRangeDropdown = React.createClass({ ) })} -     +
) diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js index 823f5ae895..495cb58565 100644 --- a/ui/src/sources/containers/ManageSources.js +++ b/ui/src/sources/containers/ManageSources.js @@ -1,7 +1,6 @@ import React, {Component, PropTypes} from 'react' import {connect} from 'react-redux' import {bindActionCreators} from 'redux' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' import { removeAndLoadSources, @@ -10,8 +9,9 @@ import { deleteKapacitorAsync, } from 'src/shared/actions/sources' -import SourceIndicator from '../../shared/components/SourceIndicator' -import InfluxTable from '../components/InfluxTable' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import SourceIndicator from 'src/shared/components/SourceIndicator' +import InfluxTable from 'src/sources/components/InfluxTable' class ManageSources extends Component { constructor(props) { @@ -62,7 +62,7 @@ class ManageSources extends Component { - +
- + ) } diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js index 3c1d8ab43d..c4a2e14faa 100644 --- a/ui/src/sources/containers/SourcePage.js +++ b/ui/src/sources/containers/SourcePage.js @@ -9,8 +9,8 @@ import { import {connect} from 'react-redux' import SourceForm from 'src/sources/components/SourceForm' -import FancyScrollbox from 'src/shared/components/FancyScrollbar' -import SourceIndicator from '../../shared/components/SourceIndicator' +import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import SourceIndicator from 'src/shared/components/SourceIndicator' const {func, shape, string} = PropTypes @@ -129,7 +129,7 @@ export const SourcePage = React.createClass({ - +
@@ -145,7 +145,7 @@ export const SourcePage = React.createClass({
- + ) }, From 05c571efc45c0d6bf7c39c9c0f6d0f4b26e1cf58 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 11:02:56 -0700 Subject: [PATCH 21/30] Import without using src/ --- ui/src/admin/containers/AdminPage.js | 2 +- ui/src/alerts/containers/AlertsApp.js | 2 +- ui/src/dashboards/components/Dashboard.js | 2 +- ui/src/dashboards/containers/DashboardsPage.js | 2 +- ui/src/data_explorer/components/DatabaseList.js | 2 +- ui/src/data_explorer/components/FieldList.js | 2 +- ui/src/data_explorer/components/MeasurementList.js | 2 +- ui/src/hosts/containers/HostPage.js | 2 +- ui/src/hosts/containers/HostsPage.js | 2 +- ui/src/kapacitor/components/KapacitorForm.js | 2 +- ui/src/kapacitor/components/KapacitorRule.js | 2 +- ui/src/kapacitor/components/KapacitorRules.js | 2 +- ui/src/shared/components/TimeRangeDropdown.js | 2 +- ui/src/sources/containers/ManageSources.js | 2 +- ui/src/sources/containers/SourcePage.js | 2 +- 15 files changed, 15 insertions(+), 15 deletions(-) diff --git a/ui/src/admin/containers/AdminPage.js b/ui/src/admin/containers/AdminPage.js index fcbedd0866..42d5a0240c 100644 --- a/ui/src/admin/containers/AdminPage.js +++ b/ui/src/admin/containers/AdminPage.js @@ -26,7 +26,7 @@ import { import AdminTabs from 'src/admin/components/AdminTabs' import SourceIndicator from 'src/shared/components/SourceIndicator' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {publishAutoDismissingNotification} from 'shared/dispatchers' diff --git a/ui/src/alerts/containers/AlertsApp.js b/ui/src/alerts/containers/AlertsApp.js index 6206a3a0cc..b308995cc8 100644 --- a/ui/src/alerts/containers/AlertsApp.js +++ b/ui/src/alerts/containers/AlertsApp.js @@ -4,7 +4,7 @@ import SourceIndicator from 'src/shared/components/SourceIndicator' import AlertsTable from 'src/alerts/components/AlertsTable' import NoKapacitorError from 'src/shared/components/NoKapacitorError' import CustomTimeRangeDropdown from 'shared/components/CustomTimeRangeDropdown' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {getAlerts} from '../apis' import AJAX from 'utils/ajax' diff --git a/ui/src/dashboards/components/Dashboard.js b/ui/src/dashboards/components/Dashboard.js index 80a2be61af..6f97e0ced4 100644 --- a/ui/src/dashboards/components/Dashboard.js +++ b/ui/src/dashboards/components/Dashboard.js @@ -3,7 +3,7 @@ import classnames from 'classnames' import TemplateControlBar from 'src/dashboards/components/TemplateControlBar' import LayoutRenderer from 'shared/components/LayoutRenderer' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' const Dashboard = ({ source, diff --git a/ui/src/dashboards/containers/DashboardsPage.js b/ui/src/dashboards/containers/DashboardsPage.js index fdfea5f83f..230d574a3d 100644 --- a/ui/src/dashboards/containers/DashboardsPage.js +++ b/ui/src/dashboards/containers/DashboardsPage.js @@ -5,7 +5,7 @@ import {bindActionCreators} from 'redux' import SourceIndicator from 'shared/components/SourceIndicator' import DeleteConfirmTableCell from 'shared/components/DeleteConfirmTableCell' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {createDashboard} from 'src/dashboards/apis' import {getDashboardsAsync, deleteDashboardAsync} from 'src/dashboards/actions' diff --git a/ui/src/data_explorer/components/DatabaseList.js b/ui/src/data_explorer/components/DatabaseList.js index 41542723be..23ad6143a1 100644 --- a/ui/src/data_explorer/components/DatabaseList.js +++ b/ui/src/data_explorer/components/DatabaseList.js @@ -6,7 +6,7 @@ import {showDatabases, showRetentionPolicies} from 'shared/apis/metaQuery' import showDatabasesParser from 'shared/parsing/showDatabases' import showRetentionPoliciesParser from 'shared/parsing/showRetentionPolicies' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' const {func, shape, string} = PropTypes diff --git a/ui/src/data_explorer/components/FieldList.js b/ui/src/data_explorer/components/FieldList.js index 85ad478260..45d8e4bb79 100644 --- a/ui/src/data_explorer/components/FieldList.js +++ b/ui/src/data_explorer/components/FieldList.js @@ -2,7 +2,7 @@ import React, {PropTypes} from 'react' import FieldListItem from 'src/data_explorer/components/FieldListItem' import GroupByTimeDropdown from 'src/data_explorer/components/GroupByTimeDropdown' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {showFieldKeys} from 'shared/apis/metaQuery' import showFieldKeysParser from 'shared/parsing/showFieldKeys' diff --git a/ui/src/data_explorer/components/MeasurementList.js b/ui/src/data_explorer/components/MeasurementList.js index 98d6e05ff9..f4b7f68c83 100644 --- a/ui/src/data_explorer/components/MeasurementList.js +++ b/ui/src/data_explorer/components/MeasurementList.js @@ -5,7 +5,7 @@ import {showMeasurements} from 'shared/apis/metaQuery' import showMeasurementsParser from 'shared/parsing/showMeasurements' import TagList from 'src/data_explorer/components/TagList' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' const {func, shape, string} = PropTypes diff --git a/ui/src/hosts/containers/HostPage.js b/ui/src/hosts/containers/HostPage.js index ed47502f15..459eccaf49 100644 --- a/ui/src/hosts/containers/HostPage.js +++ b/ui/src/hosts/containers/HostPage.js @@ -7,7 +7,7 @@ import classnames from 'classnames' import LayoutRenderer from 'shared/components/LayoutRenderer' import DashboardHeader from 'src/dashboards/components/DashboardHeader' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import timeRanges from 'hson!../../shared/data/timeRanges.hson' import { diff --git a/ui/src/hosts/containers/HostsPage.js b/ui/src/hosts/containers/HostsPage.js index 24d7f94aa2..94785de387 100644 --- a/ui/src/hosts/containers/HostsPage.js +++ b/ui/src/hosts/containers/HostsPage.js @@ -2,7 +2,7 @@ import React, {PropTypes} from 'react' import _ from 'lodash' import HostsTable from 'src/hosts/components/HostsTable' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import SourceIndicator from 'src/shared/components/SourceIndicator' import {getCpuAndLoadForHosts, getMappings, getAppsForHosts} from '../apis' diff --git a/ui/src/kapacitor/components/KapacitorForm.js b/ui/src/kapacitor/components/KapacitorForm.js index 6ba8c51080..8b8d5b514b 100644 --- a/ui/src/kapacitor/components/KapacitorForm.js +++ b/ui/src/kapacitor/components/KapacitorForm.js @@ -1,7 +1,7 @@ import React, {Component, PropTypes} from 'react' import AlertTabs from 'src/kapacitor/components/AlertTabs' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' class KapacitorForm extends Component { render() { diff --git a/ui/src/kapacitor/components/KapacitorRule.js b/ui/src/kapacitor/components/KapacitorRule.js index 11b03d33c2..08a0b03789 100644 --- a/ui/src/kapacitor/components/KapacitorRule.js +++ b/ui/src/kapacitor/components/KapacitorRule.js @@ -5,7 +5,7 @@ import ValuesSection from 'src/kapacitor/components/ValuesSection' import RuleHeader from 'src/kapacitor/components/RuleHeader' import RuleGraph from 'src/kapacitor/components/RuleGraph' import RuleMessage from 'src/kapacitor/components/RuleMessage' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import {createRule, editRule} from 'src/kapacitor/apis' import buildInfluxQLQuery from 'utils/influxql' diff --git a/ui/src/kapacitor/components/KapacitorRules.js b/ui/src/kapacitor/components/KapacitorRules.js index ebc269e44c..05f710dd19 100644 --- a/ui/src/kapacitor/components/KapacitorRules.js +++ b/ui/src/kapacitor/components/KapacitorRules.js @@ -4,7 +4,7 @@ import {Link} from 'react-router' import NoKapacitorError from 'src/shared/components/NoKapacitorError' import SourceIndicator from 'src/shared/components/SourceIndicator' import KapacitorRulesTable from 'src/kapacitor/components/KapacitorRulesTable' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' const KapacitorRules = ({ source, diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js index 619fab5d71..f0dbdb5cab 100644 --- a/ui/src/shared/components/TimeRangeDropdown.js +++ b/ui/src/shared/components/TimeRangeDropdown.js @@ -3,7 +3,7 @@ import classnames from 'classnames' import moment from 'moment' import OnClickOutside from 'src/shared/components/OnClickOutside' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import timeRanges from 'hson!../data/timeRanges.hson' diff --git a/ui/src/sources/containers/ManageSources.js b/ui/src/sources/containers/ManageSources.js index 495cb58565..83364b92ae 100644 --- a/ui/src/sources/containers/ManageSources.js +++ b/ui/src/sources/containers/ManageSources.js @@ -9,7 +9,7 @@ import { deleteKapacitorAsync, } from 'src/shared/actions/sources' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import SourceIndicator from 'src/shared/components/SourceIndicator' import InfluxTable from 'src/sources/components/InfluxTable' diff --git a/ui/src/sources/containers/SourcePage.js b/ui/src/sources/containers/SourcePage.js index c4a2e14faa..aeb9b93563 100644 --- a/ui/src/sources/containers/SourcePage.js +++ b/ui/src/sources/containers/SourcePage.js @@ -9,7 +9,7 @@ import { import {connect} from 'react-redux' import SourceForm from 'src/sources/components/SourceForm' -import FancyScrollbar from 'src/shared/components/FancyScrollbar' +import FancyScrollbar from 'shared/components/FancyScrollbar' import SourceIndicator from 'src/shared/components/SourceIndicator' const {func, shape, string} = PropTypes From 8018e99b47f58d7e7da64634ac56643bddb9a21a Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 11:20:28 -0700 Subject: [PATCH 22/30] Use newest pattern --- ui/src/shared/components/ResizeContainer.js | 67 +++++++++++---------- 1 file changed, 36 insertions(+), 31 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index 996094a80c..0947f2cbcf 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -1,47 +1,43 @@ -import React, {PropTypes} from 'react' -import ResizeHandle from 'shared/components/ResizeHandle' +import React, {Component, PropTypes} from 'react' import classnames from 'classnames' -const {node, number, string} = PropTypes +import ResizeHandle from 'shared/components/ResizeHandle' const maximumNumChildren = 2 const minimumTopHeight = 200 const minimumBottomHeight = 200 -const ResizeContainer = React.createClass({ - propTypes: { - children: node.isRequired, - containerClass: string.isRequired, - minTopHeight: number, - minBottomHeight: number, - }, - - getDefaultProps() { - return { - minTopHeight: minimumTopHeight, - minBottomHeight: minimumBottomHeight, - } - }, - - getInitialState() { - return { +class ResizeContainer extends Component { + constructor(props) { + super(props) + this.state = { + isDragging: false, topHeight: '60%', bottomHeight: '40%', - isDragging: false, } - }, - handleStopDrag() { - this.setState({isDragging: false}) - }, + this.handleStartDrag = ::this.handleStartDrag + this.handleStopDrag = ::this.handleStopDrag + this.handleMouseLeave = ::this.handleMouseLeave + this.handleDrag = ::this.handleDrag + } + + static defaultProps = { + minTopHeight: minimumTopHeight, + minBottomHeight: minimumBottomHeight, + } handleStartDrag() { this.setState({isDragging: true}) - }, + } + + handleStopDrag() { + this.setState({isDragging: false}) + } handleMouseLeave() { this.setState({isDragging: false}) - }, + } handleDrag(e) { if (!this.state.isDragging) { @@ -85,7 +81,7 @@ const ResizeContainer = React.createClass({ topHeight: `${newTopPanelPercent}%`, bottomHeight: `${newBottomPanelPercent}%`, }) - }, + } renderHandle() { const {isDragging, topHeight} = this.state @@ -96,7 +92,7 @@ const ResizeContainer = React.createClass({ top={topHeight} /> ) - }, + } render() { const {topHeight, bottomHeight, isDragging} = this.state @@ -124,7 +120,16 @@ const ResizeContainer = React.createClass({ ) - }, -}) + } +} + +const {node, number, string} = PropTypes + +ResizeContainer.propTypes = { + children: node.isRequired, + containerClass: string.isRequired, + minTopHeight: number, + minBottomHeight: number, +} export default ResizeContainer From b88e54e4dffaa10656490695b81e30ecd8dd5c43 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 11:27:57 -0700 Subject: [PATCH 23/30] Add initial height props Default is now 50/50 instead of 60/40, but can be specified on a per use basis --- ui/src/shared/components/ResizeContainer.js | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index 0947f2cbcf..b955c0db0c 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -6,14 +6,15 @@ import ResizeHandle from 'shared/components/ResizeHandle' const maximumNumChildren = 2 const minimumTopHeight = 200 const minimumBottomHeight = 200 +const initialHeight = '50%' class ResizeContainer extends Component { constructor(props) { super(props) this.state = { isDragging: false, - topHeight: '60%', - bottomHeight: '40%', + topHeight: this.props.initialTopHeight, + bottomHeight: this.props.initialBottomHeight, } this.handleStartDrag = ::this.handleStartDrag @@ -25,12 +26,14 @@ class ResizeContainer extends Component { static defaultProps = { minTopHeight: minimumTopHeight, minBottomHeight: minimumBottomHeight, + initialTopHeight: initialHeight, + initialBottomHeight: initialHeight, } handleStartDrag() { this.setState({isDragging: true}) } - + handleStopDrag() { this.setState({isDragging: false}) } @@ -130,6 +133,8 @@ ResizeContainer.propTypes = { containerClass: string.isRequired, minTopHeight: number, minBottomHeight: number, + initialTopHeight: string, + initialBottomHeight: string, } export default ResizeContainer From 6a5fc4d05a054c3d32084e179a031b1506668320 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 11:32:32 -0700 Subject: [PATCH 24/30] Create and use constants for initial heights of QueryMaker and Visualization Fix for #1427 --- ui/src/dashboards/components/CellEditorOverlay.js | 4 +++- ui/src/data_explorer/constants/index.js | 4 ++++ ui/src/data_explorer/containers/DataExplorer.js | 4 +++- 3 files changed, 10 insertions(+), 2 deletions(-) diff --git a/ui/src/dashboards/components/CellEditorOverlay.js b/ui/src/dashboards/components/CellEditorOverlay.js index ab237b2bca..79e6c2d036 100644 --- a/ui/src/dashboards/components/CellEditorOverlay.js +++ b/ui/src/dashboards/components/CellEditorOverlay.js @@ -12,7 +12,7 @@ import * as queryModifiers from 'src/utils/queryTransitions' import defaultQueryConfig from 'src/utils/defaultQueryConfig' import buildInfluxQLQuery from 'utils/influxql' import {getQueryConfig} from 'shared/apis' -import {MINIMUM_HEIGHTS} from 'src/data_explorer/constants' +import {MINIMUM_HEIGHTS, INITIAL_HEIGHTS} from 'src/data_explorer/constants' import {removeUnselectedTemplateValues} from 'src/dashboards/constants' class CellEditorOverlay extends Component { @@ -159,6 +159,8 @@ class CellEditorOverlay extends Component { containerClass="resizer--full-size" minTopHeight={MINIMUM_HEIGHTS.visualization} minBottomHeight={MINIMUM_HEIGHTS.queryMaker} + initialTopHeight={INITIAL_HEIGHTS.visualization} + initialBottomHeight={INITIAL_HEIGHTS.queryMaker} > Date: Wed, 10 May 2017 11:42:18 -0700 Subject: [PATCH 25/30] Update Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4bcc1af782..e95080903a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,7 @@ ### Features ### UI Improvements + 1. [#1453](https://github.com/influxdata/chronograf/pull/1453): Initial height of QueryMaker is 2/3 of the screen when in ResizeContainer, improved usability ## v1.3.0 [2017-05-09] From 2962922d10912996a04a327058ae659c320e213b Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 11:55:59 -0700 Subject: [PATCH 26/30] Remove style causing the janky --- ui/src/style/unsorted.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/ui/src/style/unsorted.scss b/ui/src/style/unsorted.scss index 96274f0d46..a0bb2f420c 100644 --- a/ui/src/style/unsorted.scss +++ b/ui/src/style/unsorted.scss @@ -162,7 +162,6 @@ .tab-group { display: flex; justify-content: flex-start; - margin-bottom: 20px; display: inline-block; .btn.tab { From e2fb1ac0d65fe3a59367b3d11c20d2e98b1ac906 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 13:53:03 -0700 Subject: [PATCH 27/30] Fix the things --- ui/src/shared/components/FancyScrollbar.js | 2 +- ui/src/shared/components/TimeRangeDropdown.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/src/shared/components/FancyScrollbar.js b/ui/src/shared/components/FancyScrollbar.js index d573347012..6b0db459c9 100644 --- a/ui/src/shared/components/FancyScrollbar.js +++ b/ui/src/shared/components/FancyScrollbar.js @@ -39,4 +39,4 @@ FancyScrollbar.propTypes = { autoHide: bool, } -export default FancyScrollbar \ No newline at end of file +export default FancyScrollbar diff --git a/ui/src/shared/components/TimeRangeDropdown.js b/ui/src/shared/components/TimeRangeDropdown.js index f0dbdb5cab..c6cf9a2ded 100644 --- a/ui/src/shared/components/TimeRangeDropdown.js +++ b/ui/src/shared/components/TimeRangeDropdown.js @@ -2,7 +2,7 @@ import React from 'react' import classnames from 'classnames' import moment from 'moment' -import OnClickOutside from 'src/shared/components/OnClickOutside' +import OnClickOutside from 'shared/components/OnClickOutside' import FancyScrollbar from 'shared/components/FancyScrollbar' import timeRanges from 'hson!../data/timeRanges.hson' From 28d5224b6fb83b57d2f626c5bd6fb2209b05f021 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 17:30:22 -0700 Subject: [PATCH 28/30] Make prettier --- ui/src/shared/components/ResizeContainer.js | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index b955c0db0c..6b158e835c 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -70,7 +70,8 @@ class ResizeContainer extends Component { } const topHeightPixels = newTopPanelPercent / oneHundred * containerHeight - const bottomHeightPixels = newBottomPanelPercent / oneHundred * containerHeight + const bottomHeightPixels = + newBottomPanelPercent / oneHundred * containerHeight // Don't trigger a resize if the new sizes are too small if ( @@ -102,13 +103,17 @@ class ResizeContainer extends Component { const {containerClass, children} = this.props if (React.Children.count(children) > maximumNumChildren) { - console.error(`There cannot be more than ${maximumNumChildren}' children in ResizeContainer`) + console.error( + `There cannot be more than ${maximumNumChildren}' children in ResizeContainer` + ) return } return (
{this.renderHandle()} -
+
{React.cloneElement(children[1])}
From e90acb13817653a3dd5d5be45657cb41896766f8 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 17:36:30 -0700 Subject: [PATCH 29/30] Rename constants to be more explicit --- ui/src/shared/components/ResizeContainer.js | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index 6b158e835c..c9893c3c6c 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -4,9 +4,10 @@ import classnames from 'classnames' import ResizeHandle from 'shared/components/ResizeHandle' const maximumNumChildren = 2 -const minimumTopHeight = 200 -const minimumBottomHeight = 200 -const initialHeight = '50%' +const defaultMinTopHeight = 200 +const defaultMinBottomHeight = 200 +const defaultInitialTopHeight = '50%' +const defaultInitialBottomHeight = '50%' class ResizeContainer extends Component { constructor(props) { @@ -24,10 +25,10 @@ class ResizeContainer extends Component { } static defaultProps = { - minTopHeight: minimumTopHeight, - minBottomHeight: minimumBottomHeight, - initialTopHeight: initialHeight, - initialBottomHeight: initialHeight, + minTopHeight: defaultMinTopHeight, + minBottomHeight: defaultMinBottomHeight, + initialTopHeight: defaultInitialTopHeight, + initialBottomHeight: defaultInitialBottomHeight, } handleStartDrag() { From 9c9cec95a7a3c937993af7aeecca25e71147d159 Mon Sep 17 00:00:00 2001 From: Alex P Date: Wed, 10 May 2017 17:43:09 -0700 Subject: [PATCH 30/30] Move renderHandle directly into class render function --- ui/src/shared/components/ResizeContainer.js | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/ui/src/shared/components/ResizeContainer.js b/ui/src/shared/components/ResizeContainer.js index c9893c3c6c..cb3fb19baf 100644 --- a/ui/src/shared/components/ResizeContainer.js +++ b/ui/src/shared/components/ResizeContainer.js @@ -14,8 +14,8 @@ class ResizeContainer extends Component { super(props) this.state = { isDragging: false, - topHeight: this.props.initialTopHeight, - bottomHeight: this.props.initialBottomHeight, + topHeight: props.initialTopHeight, + bottomHeight: props.initialBottomHeight, } this.handleStartDrag = ::this.handleStartDrag @@ -88,17 +88,6 @@ class ResizeContainer extends Component { }) } - renderHandle() { - const {isDragging, topHeight} = this.state - return ( - - ) - } - render() { const {topHeight, bottomHeight, isDragging} = this.state const {containerClass, children} = this.props @@ -123,7 +112,11 @@ class ResizeContainer extends Component {
{React.cloneElement(children[0])}
- {this.renderHandle()} +