CHUKWA-754. Improved graph explorer selection box performance. (Eric Yang)
Project: http://git-wip-us.apache.org/repos/asf/chukwa/repo Commit: http://git-wip-us.apache.org/repos/asf/chukwa/commit/b2bcd77b Tree: http://git-wip-us.apache.org/repos/asf/chukwa/tree/b2bcd77b Diff: http://git-wip-us.apache.org/repos/asf/chukwa/diff/b2bcd77b Branch: refs/heads/master Commit: b2bcd77b08e2392cc7c202ccd2594be7fa7f64d6 Parents: dfe84a2 Author: Eric Yang <[email protected]> Authored: Mon Jun 15 16:19:03 2015 -0700 Committer: Eric Yang <[email protected]> Committed: Mon Jun 15 16:19:03 2015 -0700 ---------------------------------------------------------------------- CHANGES.txt | 2 + LICENSE.txt | 13 + NOTICE.txt | 3 + src/main/web/hicc/WEB-INF/vm/unit-generic.vm | 3 + src/main/web/hicc/WEB-INF/vm/unit-ops.vm | 3 + src/main/web/hicc/WEB-INF/vm/unit-percent.vm | 3 + src/main/web/hicc/css/login.css | 2 + src/main/web/hicc/home/css/select2.min.css | 628 ++++++ src/main/web/hicc/home/graph-explorer.html | 288 +-- src/main/web/hicc/home/js/select2.min.js | 2430 +++++++++++++++++++++ 10 files changed, 3196 insertions(+), 179 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/CHANGES.txt ---------------------------------------------------------------------- diff --git a/CHANGES.txt b/CHANGES.txt index 40f85a2..a8c032d 100644 --- a/CHANGES.txt +++ b/CHANGES.txt @@ -14,6 +14,8 @@ Trunk (unreleased changes) IMPROVEMENTS + CHUKWA-754. Improved graph explorer selection box performance. (Eric Yang) + CHUKWA-745. Improved chart configuration management. (Eric Yang) CHUKWA-744. Implemented new parsers for extract and transform data to HBase format. (Eric Yang) http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/LICENSE.txt ---------------------------------------------------------------------- diff --git a/LICENSE.txt b/LICENSE.txt index 2cf9071..89b04f7 100644 --- a/LICENSE.txt +++ b/LICENSE.txt @@ -946,3 +946,16 @@ NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. + +------ +select2 + +The MIT License (MIT) + +Copyright (c) 2012-2015 Kevin Brown, Igor Vaynberg, and Select2 contributors + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/NOTICE.txt ---------------------------------------------------------------------- diff --git a/NOTICE.txt b/NOTICE.txt index 09ea5f1..12a079e 100644 --- a/NOTICE.txt +++ b/NOTICE.txt @@ -87,3 +87,6 @@ Copyright (c) 2009-2015 modernizr.com This product includes bonzo Copyright (c) 2012 Dustin Diaz, https://github.com/ded/bonzo + +This product includes select2 +Copyright (c) 2012-2015, https://github.com/select2/select2/ http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/src/main/web/hicc/WEB-INF/vm/unit-generic.vm ---------------------------------------------------------------------- diff --git a/src/main/web/hicc/WEB-INF/vm/unit-generic.vm b/src/main/web/hicc/WEB-INF/vm/unit-generic.vm index 2c56c1f..5f22a60 100644 --- a/src/main/web/hicc/WEB-INF/vm/unit-generic.vm +++ b/src/main/web/hicc/WEB-INF/vm/unit-generic.vm @@ -17,4 +17,7 @@ *# var parts = val.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); +if(parts.length>1) { + parts[1] = parts[1].slice(0,3); +} return parts.join("."); http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/src/main/web/hicc/WEB-INF/vm/unit-ops.vm ---------------------------------------------------------------------- diff --git a/src/main/web/hicc/WEB-INF/vm/unit-ops.vm b/src/main/web/hicc/WEB-INF/vm/unit-ops.vm index e863b6a..a17f08f 100644 --- a/src/main/web/hicc/WEB-INF/vm/unit-ops.vm +++ b/src/main/web/hicc/WEB-INF/vm/unit-ops.vm @@ -17,4 +17,7 @@ *# var parts = val.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); +if(parts.length>1) { + parts[1] = parts[1].slice(0,3); +} return parts.join(".") + "ops"; http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/src/main/web/hicc/WEB-INF/vm/unit-percent.vm ---------------------------------------------------------------------- diff --git a/src/main/web/hicc/WEB-INF/vm/unit-percent.vm b/src/main/web/hicc/WEB-INF/vm/unit-percent.vm index d37807a..e76028c 100644 --- a/src/main/web/hicc/WEB-INF/vm/unit-percent.vm +++ b/src/main/web/hicc/WEB-INF/vm/unit-percent.vm @@ -17,4 +17,7 @@ *# var parts = val.toString().split("."); parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ","); +if(parts.length>1) { + parts[1] = parts[1].slice(0,3); +} return parts.join(".") + "%"; http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/src/main/web/hicc/css/login.css ---------------------------------------------------------------------- diff --git a/src/main/web/hicc/css/login.css b/src/main/web/hicc/css/login.css index 43c45be..b28c03c 100644 --- a/src/main/web/hicc/css/login.css +++ b/src/main/web/hicc/css/login.css @@ -21,6 +21,8 @@ body { padding: 1px; /*background: #2370cf;*/ font: 12px 'Lucida Grande', Geneva, Verdana, Arial, sans-serif; color: #000; + min-height: 100%; + width: 100%; background-image: url('images/bg.jpg'); background-size: 100% auto; } http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/src/main/web/hicc/home/css/select2.min.css ---------------------------------------------------------------------- diff --git a/src/main/web/hicc/home/css/select2.min.css b/src/main/web/hicc/home/css/select2.min.css new file mode 100644 index 0000000..70ac9d2 --- /dev/null +++ b/src/main/web/hicc/home/css/select2.min.css @@ -0,0 +1,628 @@ +.select2-container { + box-sizing: border-box; + display: inline-block; + margin: 0; + position: relative; + vertical-align: middle; +} + +.select2-container .select2-selection--single { + box-sizing: border-box; + cursor: pointer; + display: block; + height: 28px; + user-select: none; + -webkit-user-select: none; +} + +.select2-container .select2-selection--single .select2-selection__rendered { + display: block; + padding-left: 8px; + padding-right: 20px; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.select2-container[dir="rtl"] .select2-selection--single .select2-selection__rendered { + padding-right: 8px; + padding-left: 20px; +} + +.select2-container .select2-selection--multiple { + box-sizing: border-box; + cursor: pointer; + display: block; + min-height: 32px; + user-select: none; + -webkit-user-select: none; +} + +.select2-container .select2-selection--multiple .select2-selection__rendered { + display: inline-block; + overflow: hidden; + padding-left: 8px; + text-overflow: ellipsis; + white-space: nowrap; +} + +.select2-container .select2-search--inline { + float: left; +} + +.select2-container .select2-search--inline .select2-search__field { + box-sizing: border-box; + border: none; + font-size: 100%; + margin-top: 5px; +} + +.select2-container .select2-search--inline .select2-search__field::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +.select2-dropdown { + background-color: white; + border: 1px solid #aaa; + border-radius: 4px; + box-sizing: border-box; + display: block; + position: absolute; + left: -100000px; + width: 100%; + z-index: 1051; +} + +.select2-results { + display: block; +} + +.select2-results__options { + list-style: none; + margin: 0; + padding: 0; +} + +.select2-results__option { + padding: 6px; + user-select: none; + -webkit-user-select: none; +} + +.select2-results__option[aria-selected] { + cursor: pointer; +} + +.select2-container--open .select2-dropdown { + left: 0; +} + +.select2-container--open .select2-dropdown--above { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-container--open .select2-dropdown--below { + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.select2-search--dropdown { + display: block; + padding: 4px; +} + +.select2-search--dropdown .select2-search__field { + padding: 4px; + width: 100%; + box-sizing: border-box; +} + +.select2-search--dropdown .select2-search__field::-webkit-search-cancel-button { + -webkit-appearance: none; +} + +.select2-search--dropdown.select2-search--hide { + display: none; +} + +.select2-close-mask { + border: 0; + margin: 0; + padding: 0; + display: block; + position: fixed; + left: 0; + top: 0; + min-height: 100%; + min-width: 100%; + height: auto; + width: auto; + opacity: 0; + z-index: 99; + background-color: #fff; + filter: alpha(opacity=0); +} + +.select2-hidden-accessible { + border: 0; + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.select2-container--default .select2-selection--single { + background-color: #fff; + border: 1px solid #aaa; + border-radius: 4px; +} + +.select2-container--default .select2-selection--single .select2-selection__rendered { + color: #444; + line-height: 28px; +} + +.select2-container--default .select2-selection--single .select2-selection__clear { + cursor: pointer; + float: right; + font-weight: bold; +} + +.select2-container--default .select2-selection--single .select2-selection__placeholder { + color: #999; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow { + height: 26px; + position: absolute; + top: 1px; + right: 1px; + width: 20px; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow b { + border-color: #888 transparent transparent transparent; + border-style: solid; + border-width: 5px 4px 0 4px; + height: 0; + left: 50%; + margin-left: -4px; + margin-top: -2px; + position: absolute; + top: 50%; + width: 0; +} + +.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__clear { + float: left; +} + +.select2-container--default[dir="rtl"] .select2-selection--single .select2-selection__arrow { + left: 1px; + right: auto; +} + +.select2-container--default.select2-container--disabled .select2-selection--single { + background-color: #eee; + cursor: default; +} + +.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__clear { + display: none; +} + +.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b { + border-color: transparent transparent #888 transparent; + border-width: 0 4px 5px 4px; +} + +.select2-container--default .select2-selection--multiple { + background-color: white; + border: 1px solid #aaa; + border-radius: 4px; + cursor: text; +} + +.select2-container--default .select2-selection--multiple .select2-selection__rendered { + box-sizing: border-box; + list-style: none; + margin: 0; + padding: 0 5px; + width: 100%; +} + +.select2-container--default .select2-selection--multiple .select2-selection__placeholder { + color: #999; + margin-top: 5px; + float: left; +} + +.select2-container--default .select2-selection--multiple .select2-selection__clear { + cursor: pointer; + float: right; + font-weight: bold; + margin-top: 5px; + margin-right: 10px; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice { + background-color: #e4e4e4; + border: 1px solid #aaa; + border-radius: 4px; + cursor: default; + float: left; + margin-right: 5px; + margin-top: 5px; + padding: 0 5px; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { + color: #999; + cursor: pointer; + display: inline-block; + font-weight: bold; + margin-right: 2px; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover { + color: #333; +} + +.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice, +.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder { + float: right; +} + +.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice { + margin-left: 5px; + margin-right: auto; +} + +.select2-container--default[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { + margin-left: 2px; + margin-right: auto; +} + +.select2-container--default.select2-container--focus .select2-selection--multiple { + border: solid black 1px; + outline: 0; +} + +.select2-container--default.select2-container--disabled .select2-selection--multiple { + background-color: #eee; + cursor: default; +} + +.select2-container--default.select2-container--disabled .select2-selection__choice__remove { + display: none; +} + +.select2-container--default.select2-container--open.select2-container--above .select2-selection--single, +.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.select2-container--default.select2-container--open.select2-container--below .select2-selection--single, +.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-container--default .select2-search--dropdown .select2-search__field { + border: 1px solid #aaa; +} + +.select2-container--default .select2-search--inline .select2-search__field { + background: transparent; + border: none; + outline: 0; +} + +.select2-container--default .select2-results>.select2-results__options { + max-height: 200px; + overflow-y: auto; +} + +.select2-container--default .select2-results__option[role=group] { + padding: 0; +} + +.select2-container--default .select2-results__option[aria-disabled=true] { + color: #999; +} + +.select2-container--default .select2-results__option[aria-selected=true] { + background-color: #ddd; +} + +.select2-container--default .select2-results__option .select2-results__option { + padding-left: 1em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__group { + padding-left: 0; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option { + margin-left: -1em; + padding-left: 2em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option { + margin-left: -2em; + padding-left: 3em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { + margin-left: -3em; + padding-left: 4em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { + margin-left: -4em; + padding-left: 5em; +} + +.select2-container--default .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { + margin-left: -5em; + padding-left: 6em; +} + +.select2-container--default .select2-results__option--highlighted[aria-selected] { + background-color: #5897fb; + color: white; +} + +.select2-container--default .select2-results__group { + cursor: default; + display: block; + padding: 6px; +} + +.select2-container--classic .select2-selection--single { + background-color: #f6f6f6; + border: 1px solid #aaa; + border-radius: 4px; + outline: 0; + background-image: -webkit-linear-gradient(top, #ffffff 50%, #eeeeee 100%); + background-image: -o-linear-gradient(top, #ffffff 50%, #eeeeee 100%); + background-image: linear-gradient(to bottom, #ffffff 50%, #eeeeee 100%); + background-repeat: repeat-x; + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); +} + +.select2-container--classic .select2-selection--single:focus { + border: 1px solid #5897fb; +} + +.select2-container--classic .select2-selection--single .select2-selection__rendered { + color: #444; + line-height: 28px; +} + +.select2-container--classic .select2-selection--single .select2-selection__clear { + cursor: pointer; + float: right; + font-weight: bold; + margin-right: 10px; +} + +.select2-container--classic .select2-selection--single .select2-selection__placeholder { + color: #999; +} + +.select2-container--classic .select2-selection--single .select2-selection__arrow { + background-color: #ddd; + border: none; + border-left: 1px solid #aaa; + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; + height: 26px; + position: absolute; + top: 1px; + right: 1px; + width: 20px; + background-image: -webkit-linear-gradient(top, #eeeeee 50%, #cccccc 100%); + background-image: -o-linear-gradient(top, #eeeeee 50%, #cccccc 100%); + background-image: linear-gradient(to bottom, #eeeeee 50%, #cccccc 100%); + background-repeat: repeat-x; + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#cccccc', GradientType=0); +} + +.select2-container--classic .select2-selection--single .select2-selection__arrow b { + border-color: #888 transparent transparent transparent; + border-style: solid; + border-width: 5px 4px 0 4px; + height: 0; + left: 50%; + margin-left: -4px; + margin-top: -2px; + position: absolute; + top: 50%; + width: 0; +} + +.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__clear { + float: left; +} + +.select2-container--classic[dir="rtl"] .select2-selection--single .select2-selection__arrow { + border: none; + border-right: 1px solid #aaa; + border-radius: 0; + border-top-left-radius: 4px; + border-bottom-left-radius: 4px; + left: 1px; + right: auto; +} + +.select2-container--classic.select2-container--open .select2-selection--single { + border: 1px solid #5897fb; +} + +.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow { + background: transparent; + border: none; +} + +.select2-container--classic.select2-container--open .select2-selection--single .select2-selection__arrow b { + border-color: transparent transparent #888 transparent; + border-width: 0 4px 5px 4px; +} + +.select2-container--classic.select2-container--open.select2-container--above .select2-selection--single { + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; + background-image: -webkit-linear-gradient(top, #ffffff 0%, #eeeeee 50%); + background-image: -o-linear-gradient(top, #ffffff 0%, #eeeeee 50%); + background-image: linear-gradient(to bottom, #ffffff 0%, #eeeeee 50%); + background-repeat: repeat-x; + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0); +} + +.select2-container--classic.select2-container--open.select2-container--below .select2-selection--single { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + background-image: -webkit-linear-gradient(top, #eeeeee 50%, #ffffff 100%); + background-image: -o-linear-gradient(top, #eeeeee 50%, #ffffff 100%); + background-image: linear-gradient(to bottom, #eeeeee 50%, #ffffff 100%); + background-repeat: repeat-x; + filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0); +} + +.select2-container--classic .select2-selection--multiple { + background-color: white; + border: 1px solid #aaa; + border-radius: 4px; + cursor: text; + outline: 0; +} + +.select2-container--classic .select2-selection--multiple:focus { + border: 1px solid #5897fb; +} + +.select2-container--classic .select2-selection--multiple .select2-selection__rendered { + list-style: none; + margin: 0; + padding: 0 5px; +} + +.select2-container--classic .select2-selection--multiple .select2-selection__clear { + display: none; +} + +.select2-container--classic .select2-selection--multiple .select2-selection__choice { + background-color: #e4e4e4; + border: 1px solid #aaa; + border-radius: 4px; + cursor: default; + float: left; + margin-right: 5px; + margin-top: 5px; + padding: 0 5px; +} + +.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove { + color: #888; + cursor: pointer; + display: inline-block; + font-weight: bold; + margin-right: 2px; +} + +.select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover { + color: #555; +} + +.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { + float: right; +} + +.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice { + margin-left: 5px; + margin-right: auto; +} + +.select2-container--classic[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { + margin-left: 2px; + margin-right: auto; +} + +.select2-container--classic.select2-container--open .select2-selection--multiple { + border: 1px solid #5897fb; +} + +.select2-container--classic.select2-container--open.select2-container--above .select2-selection--multiple { + border-top: none; + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +.select2-container--classic.select2-container--open.select2-container--below .select2-selection--multiple { + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.select2-container--classic .select2-search--dropdown .select2-search__field { + border: 1px solid #aaa; + outline: 0; +} + +.select2-container--classic .select2-search--inline .select2-search__field { + outline: 0; +} + +.select2-container--classic .select2-dropdown { + background-color: white; + border: 1px solid transparent; +} + +.select2-container--classic .select2-dropdown--above { + border-bottom: none; +} + +.select2-container--classic .select2-dropdown--below { + border-top: none; +} + +.select2-container--classic .select2-results>.select2-results__options { + max-height: 200px; + overflow-y: auto; +} + +.select2-container--classic .select2-results__option[role=group] { + padding: 0; +} + +.select2-container--classic .select2-results__option[aria-disabled=true] { + color: grey; +} + +.select2-container--classic .select2-results__option--highlighted[aria-selected] { + background-color: #3875d7; + color: white; +} + +.select2-container--classic .select2-results__group { + cursor: default; + display: block; + padding: 6px; +} + +.select2-container--classic.select2-container--open .select2-dropdown { + border-color: #5897fb; +} + + + http://git-wip-us.apache.org/repos/asf/chukwa/blob/b2bcd77b/src/main/web/hicc/home/graph-explorer.html ---------------------------------------------------------------------- diff --git a/src/main/web/hicc/home/graph-explorer.html b/src/main/web/hicc/home/graph-explorer.html index 71f7481..73580d5 100644 --- a/src/main/web/hicc/home/graph-explorer.html +++ b/src/main/web/hicc/home/graph-explorer.html @@ -22,8 +22,10 @@ <head> <link href="../css/bootstrap.min.css" type="text/css" rel="stylesheet" /> <link href="../css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" /> + <link href="css/select2.min.css" rel="stylesheet" /> <script src="../js/jquery.js" type="text/javascript"></script> <script src="../js/bootstrap.min.js" type="text/javascript"></script> + <script src="js/select2.min.js"></script> <style> .nowrap td { white-space: nowrap; @@ -38,6 +40,34 @@ min-height: 400px; } </style> + </head> + <body> + <form> + <div id="status"></div> + <div class="row"> + <div class="col-md-4 col-lg-4"> + <label>Metric Group</label> <select class="groups form-control" multiple="multiple"></select> + <label>Metrics</label> <select class="metrics form-control" multiple="multiple"></select> + <label>Sources</label> <select class="sources form-control" multiple="multiple"></select> + <label>Title</label> <input type=text id="title" class="form-control" /> + <label>Y-axis Min</label> <input type="text" id="ymin" class="form-control" /> + <label>Y-axis Max</label> <input type="text" id="ymax" class="form-control" /> + <label>Y-axis Unit</label> + <select id="yunit" class="form-control"> + <option>generic</option> + <option>bytes</option> + <option>bytes-decimal</option> + <option value="ops">op/s</option> + <option value="percent">%</option> + </select> + <div id="chartType"></div> + <input type=button name="action" value="Plot" class="btn btn-default" onClick="plot()"> + <input type=button name="action" value="Publish" class="btn btn-default" onClick="publishChart()"> + </div> + <div class="col-md-8 col-lg-8"> + <iframe id="graph" width="100%" height="700px" frameBorder="0" scrolling="no"></iframe> + </div> + </form> <script> function status(type, message) { $('#status').html('<div class="alert alert-'+type+' alert-dismissible" role="alert">'+ @@ -46,129 +76,111 @@ message+'</div>'); } - function randString(n) { - if(!n) { - n = 5; - } - - var text = ''; - var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789'; - - for(var i=0; i < n; i++) { - text += possible.charAt(Math.floor(Math.random() * possible.length)); - } - - return text; - } - - var checkDataLength = function(curOption) { - return function(data) { - if (data.length == 0) { - curOption.attr('disabled', 'disabled'); + var getGroups = function() { + $.ajax({ + url: "/hicc/v1/metrics/schema", + dataType: "json", + success: function(data) { + var array = $.map(data, function(val, i) { + return { + id : i, + text: val + }; + }); + $('.groups').select2({ + data: array, + tags: true, + theme: 'classic' + }); } - } + }); }; - $.ajax({ url: "/hicc/v1/metrics/schema", dataType: "json", success: function(data){ - for(var i in data) { - $('#table').append("<option>"+data[i]+"</option>"); - } - // Look through each table option and see if it has anything in its family? - $('#table').children().each( - function() { - var table = $(this).text(); - $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table), - dataType: "json", - success: checkDataLength($(this)) + var getMetrics = function (group) { + $.ajax({ + url: "/hicc/v1/metrics/schema/" + group, + dataType: "json", + success: function(data) { + var array = $.map(data, function(val, i) { + return { + id: i, + text: val + }; + }); + $('.metrics').select2({ + data: array, + tags: true, + theme: 'classic' }); } - ); - }}); - + }); + }; - function getFamilies() { - var size = $('#family option').size(); - $('#family').find('option').remove(); - var table = $('#table').val(); - $.ajax({ url: encodeURI("/hicc/v1/metrics/schema/"+table), dataType: "json", success: function(data){ - for(var i in data) { - $('#family').append("<option>"+data[i]+"</option>"); + var getSources = function(group) { + $.ajax({ + url: "/hicc/v1/metrics/source/" + group, + dataType: "json", + success: function(data) { + var array = $.map(data, function(val, i) { + return { + id: i, + text: val + }; + }); + $('.sources').select2({ + data: array, + tags: true, + theme: 'classic' + }); } - // Look through each family option and see if it has any columns - var table = $('#table').val(); - $('#family').children().each( - function() { - var family = $(this).text(); - $.ajax({ url: encodeURI("/hicc/v1/metrics/source/"+table), - dataType: "json", - success: checkDataLength($(this)) - }); - } - ); - }}); - } - - function getColumns() { - var size = $('#column option').size(); - $('#column').find('option').remove(); - var table = $('#table').val(); - var family = $('#family').val(); - $('#family :selected').each(function(i, selected) { - var family = $(selected).val(); - var url = encodeURI("/hicc/v1/metrics/schema/"+table+"/"+family); - var tableFamily = table+"/"+family; - // Look through each column option and see if it has any rows - $.ajax({ url: url, dataType: "json", success: function(data){ - for(var i in data) { - $('#column').append( - $("<option></option>") - .attr("value", tableFamily+"/"+data[i]) - .text(data[i]) - ); - } - }}); }); } - function getRows() { - var size = $('#row option').size(); - $('#row').find('option').remove(); +$(function() { + var groupData = getGroups(); + var $eventSelect = $(".groups"); + $eventSelect.on("select2:select", function(e) { + $('.groups :selected').each(function(i, selected) { + var group = $(selected).text(); + getMetrics(group); + getSources(group); + }); + }); + $eventSelect.on("select2:unselect", function (e) { + $('.metrics').not('.select2-container').empty(); + $('.sources').not('.select2-container').empty(); + }); + var $metricsEventSelect = $(".metrics"); + $metricsEventSelect.on("select2:select", function(e) { $('#chartType').html(""); - $('#family :selected').each(function(i, selected) { - var metric = $(selected).val(); + $('.metrics :selected').each(function(i, selected) { + var metric = $(selected).text(); var selection = metric+": <select id='ctype"+i+"' class='form-control'><option>lines</option><option>bars</option><option>points</option><option>area</option></select><br>"; $('#chartType').append(selection); }); - $('#table :selected').each(function(i, selected) { - var metricGroup = $(selected).val(); - var url = encodeURI("/hicc/v1/metrics/source/"+metricGroup); - $.ajax({ url: url, dataType: "json", success: function(data){ - for(var i in data) { - var test = $('#row').find('option[value="'+data[i]+'"]').val(); - if(typeof(test) == "undefined") { - $('#row').append('<option value="'+data[i]+'">'+data[i]+'</option>'); - } - } - }}); - }); - } + }); + $metricsEventSelect.on("select2:unselect", function(e) { + $('#chartType').html(""); + }); +}); + function buildChart() { - var test = $('#row').val(); + var test = $('.sources').val(); if(test == null) { - $('#row option:eq(0)').attr('selected',true); + $('.sources option:eq(0)').attr('selected',true); } var url = []; var idx = 0; - $('#family :selected').each(function(i, selected) { + $('.metrics :selected').each(function(i, selected) { var id = '#ctype' + i; var chartType = $(id).val(); var chartTypeOption = { show: true }; if (chartType=='area') { chartTypeOption = { show: true, fill: true }; } - $('#row :selected').each(function(j, rowSelected) { - var s = { 'label' : $(selected).val() + "/" + $(rowSelected).val(), 'url' : encodeURI("/hicc/v1/metrics/series/" + $(selected).val() + "/" + $(rowSelected).val())}; + $('.sources :selected').each(function(j, rowSelected) { + var s = { 'label' : $(selected).text() + "/" + $(rowSelected).text(), 'url' : encodeURI("/hicc/v1/metrics/series/" + $(selected).text() + "/" + $(rowSelected).text())}; if(chartType=='area') { s['lines']=chartTypeOption; } else { @@ -260,87 +272,5 @@ }); } </script> - </head> - <body> - <form> - <center> - <div id="status"></div> - <table class="nowrap"> - <tr> - <th>Metric Groups</th> - <th>Metrics</th> - <th>Sources</th> - <th>Options</th> - <th>Chart Type</th> - </tr> - <tr> - <td> - <select id="table" size="10" onMouseUp="getFamilies()" style="min-width: 100px;" class="form-control"> - </select> - </td> - <td> - <select id="family" multiple size="10" style="min-width: 110px;" onMouseUp="getRows()" class="form-control"> - </select> - </td> - <td> - <select id="row" size="10" style="min-width: 100px;" class="form-control"> - </select> - </td> - <td> - <table> - <tr> - <td> - <label>Title</label> - </td> - <td> - <input type=text id="title" class="form-control" /> - </td> - </tr> - <tr> - <td> - <label>Y-axis Min</label> - </td> - <td> - <input type="text" id="ymin" class="form-control" /> - </td> - </tr> - <tr> - <td> - <label>Y-axis Max</label> - </td> - <td> - <input type="text" id="ymax" class="form-control" /> - </td> - </tr> - <tr> - <td> - <label>Y-axis Unit</label> - </td> - <td> - <select id="yunit" class="form-control"> - <option>bytes</option> - <option>bytes-decimal</option> - <option value="ops">op/s</option> - <option value="percent">%</option> - <option>generic</option> - </select> - </td> - </tr> - </table> - </td> - <td> - <div id="chartType"></div> - </td> - </tr> - <tr> - <td colspan="5"> - <input type=button name="action" value="Plot" class="btn btn-default" onClick="plot()"> - <input type=button name="action" value="Publish" class="btn btn-default" onClick="publishChart()"> - </td> - </tr> - </table> - </form> - <iframe id="graph" width="95%" height="400px" frameBorder="0" scrolling="no"></iframe> - </center> </body> </html>
