diff --git a/presto-main/src/main/resources/webapp/dist/index.js b/presto-main/src/main/resources/webapp/dist/index.js
index 78c508a1b..30e2a4a2a 100644
--- a/presto-main/src/main/resources/webapp/dist/index.js
+++ b/presto-main/src/main/resources/webapp/dist/index.js
@@ -130,7 +130,7 @@ eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});
/***/ (function(module, exports, __webpack_require__) {
"use strict";
-eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.QueryList = exports.QueryListItem = undefined;\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _newUtils = __webpack_require__(/*! ../newUtils */ \"./newUtils.js\");\n\nvar _Header = __webpack_require__(/*! ../queryeditor/components/Header */ \"./queryeditor/components/Header.jsx\");\n\nvar _Header2 = _interopRequireDefault(_Header);\n\nvar _Footer = __webpack_require__(/*! ../queryeditor/components/Footer */ \"./queryeditor/components/Footer.jsx\");\n\nvar _Footer2 = _interopRequireDefault(_Footer);\n\nvar _StatusFooter = __webpack_require__(/*! ../queryeditor/components/StatusFooter */ \"./queryeditor/components/StatusFooter.jsx\");\n\nvar _StatusFooter2 = _interopRequireDefault(_StatusFooter);\n\nvar _NavigationMenu = __webpack_require__(/*! ../NavigationMenu */ \"./NavigationMenu.jsx\");\n\nvar _NavigationMenu2 = _interopRequireDefault(_NavigationMenu);\n\nvar _rcPagination = __webpack_require__(/*! rc-pagination */ \"./node_modules/rc-pagination/es/index.js\");\n\nvar _rcPagination2 = _interopRequireDefault(_rcPagination);\n\nvar _rcSelect = __webpack_require__(/*! rc-select */ \"./node_modules/rc-select/es/index.js\");\n\nvar _rcSelect2 = _interopRequireDefault(_rcSelect);\n\nvar _en_US = __webpack_require__(/*! ../node_modules/rc-pagination/es/locale/en_US */ \"./node_modules/rc-pagination/es/locale/en_US.js\");\n\nvar _en_US2 = _interopRequireDefault(_en_US);\n\nvar _lodash = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\n\nvar _lodash2 = _interopRequireDefault(_lodash);\n\nvar _ModalDialog = __webpack_require__(/*! ../queryeditor/components/ModalDialog */ \"./queryeditor/components/ModalDialog.jsx\");\n\nvar _ModalDialog2 = _interopRequireDefault(_ModalDialog);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /*\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nvar QueryListItem = exports.QueryListItem = function (_React$Component) {\n _inherits(QueryListItem, _React$Component);\n\n function QueryListItem(props) {\n _classCallCheck(this, QueryListItem);\n\n var _this = _possibleConstructorReturn(this, (QueryListItem.__proto__ || Object.getPrototypeOf(QueryListItem)).call(this, props));\n\n _this.state = {\n show: false\n };\n _this.showModal = _this.showModal.bind(_this);\n _this.isShowMore = _this.isShowMore.bind(_this);\n return _this;\n }\n\n _createClass(QueryListItem, [{\n key: \"showModal\",\n value: function showModal(e) {\n var newShow = this.state.show;\n this.setState({\n show: !newShow\n });\n }\n }, {\n key: \"isShowMore\",\n value: function isShowMore(queryText) {\n var formattedQueryText = QueryListItem.getAllQueryText(queryText);\n var row = formattedQueryText.split(\"\\n\").length;\n\n if (formattedQueryText && (formattedQueryText.length > 550 || row > 8)) {\n return true;\n } else {\n return false;\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var query = this.props.query;\n var progressBarStyle = { width: 100 + \"%\", backgroundColor: (0, _newUtils.getQueryStateColor)(query) };\n\n var splitDetails = _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 tinystat-row\" },\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Completed splits\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-ok\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.completedDrivers\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Running splits\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-play\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.state === \"FINISHED\" || query.state === \"FAILED\" ? 0 : query.runningDrivers\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Queued splits\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-pause\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.state === \"FINISHED\" || query.state === \"FAILED\" ? 0 : query.queuedDrivers\n )\n );\n\n var timingDetails = _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 tinystat-row\" },\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Wall time spent executing the query (not including queued time)\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-hourglass\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.executionTime\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Total query wall time\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-time\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.elapsedTime\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"CPU time spent by this query\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-dashboard\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.totalCpuTime\n )\n );\n\n var memoryDetails = _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 tinystat-row\" },\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Current total reserved memory\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-scale\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.totalMemoryReservation\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Peak total memory\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-fire\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.peakTotalMemoryReservation\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Cumulative user memory\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-equalizer\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n (0, _newUtils.formatDataSizeBytes)(query.cumulativeUserMemory / 1000.0)\n )\n );\n\n var user = _react2.default.createElement(\n \"span\",\n null,\n query.user\n );\n // if (query.session.principal) {\n // user = (\n // {query.user}\n // );\n // }\n\n return _react2.default.createElement(\n \"div\",\n { className: \"query\" },\n _react2.default.createElement(\n \"div\",\n { className: \"row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-4\" },\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row query-header query-header-queryid\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-9\", \"data-toggle\": \"tooltip\", \"data-placement\": \"bottom\", title: \"Query ID\" },\n _react2.default.createElement(\n \"a\",\n { href: \"../ui/query.html?history_\" + query.queryId, target: \"_blank\" },\n query.queryId\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-3 query-header-timestamp\", \"data-toggle\": \"tooltip\", \"data-placement\": \"bottom\", title: \"Submit time\" },\n _react2.default.createElement(\n \"span\",\n null,\n (0, _newUtils.formatShortTime)(new Date(Date.parse(query.createTime)))\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"span\",\n { \"data-toggle\": \"tooltip\", \"data-placement\": \"right\", title: \"User\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-user\", style: _newUtils.GLYPHICON_DEFAULT }),\n \"\\xA0\\xA0\",\n _react2.default.createElement(\n \"span\",\n null,\n (0, _newUtils.truncateString)(user, 35)\n )\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"span\",\n { \"data-toggle\": \"tooltip\", \"data-placement\": \"right\", title: \"Source\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-log-in\", style: _newUtils.GLYPHICON_DEFAULT }),\n \"\\xA0\\xA0\",\n _react2.default.createElement(\n \"span\",\n null,\n (0, _newUtils.truncateString)(query.source, 35)\n )\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"span\",\n { \"data-toggle\": \"tooltip\", \"data-placement\": \"right\", title: \"Resource Group\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-road\", style: _newUtils.GLYPHICON_DEFAULT }),\n \"\\xA0\\xA0\",\n _react2.default.createElement(\n \"span\",\n null,\n (0, _newUtils.truncateString)(query.resource ? query.resource : \"n/a\", 35)\n )\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n splitDetails\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n timingDetails\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n memoryDetails\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-8\" },\n _react2.default.createElement(\n \"div\",\n { className: \"row query-header\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 query-progress-container\" },\n _react2.default.createElement(\n \"div\",\n { className: \"progress\" },\n _react2.default.createElement(\n \"div\",\n { className: \"progress-bar progress-bar-info\", role: \"progressbar\", \"aria-valuemin\": \"0\",\n \"aria-valuemax\": \"100\", style: progressBarStyle },\n _react2.default.createElement(\n \"div\",\n { className: \"progress-catalog-schema-container\" },\n _react2.default.createElement(\n \"span\",\n { className: \"progress-catalog-schema\" },\n \"catalog:\"\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"text-catalog-schema\" },\n query.catalog\n ),\n \"\\xA0\\xA0\",\n _react2.default.createElement(\n \"span\",\n { className: \"progress-catalog-schema\" },\n \"schema:\"\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"text-catalog-schema\" },\n query.schemata\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"progress-state\" },\n (0, _newUtils.getHumanReadableState)(query)\n )\n )\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row query-row-bottom\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"pre\",\n { className: \"query-snippet\" },\n _react2.default.createElement(\n \"code\",\n { className: \"sql\" },\n QueryListItem.stripQueryTextWhitespace(query.query)\n )\n ),\n this.isShowMore(query.query) ? _react2.default.createElement(\n \"div\",\n { className: \"query-showmore\" },\n _react2.default.createElement(\n \"a\",\n { onClick: this.showModal, style: { color: '#1E90FF', cursor: 'pointer' } },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-arrow-right\", style: { color: '#1E90FF' } }),\n \"\\xA0Show More\"\n ),\n _react2.default.createElement(\n _ModalDialog2.default,\n { onClose: this.showModal, header: (0, _newUtils.getHumanReadableState)(query), footer: \"\",\n show: this.state.show },\n _react2.default.createElement(\n \"div\",\n { className: \"modal-querytext\" },\n QueryListItem.getAllQueryText(query.query)\n )\n )\n ) : null\n )\n )\n )\n )\n );\n }\n }], [{\n key: \"getAllQueryText\",\n value: function getAllQueryText(queryText) {\n var lines = queryText.split(\"\\n\");\n var minLeadingWhitespace = -1;\n for (var i = 0; i < lines.length; i++) {\n if (minLeadingWhitespace === 0) {\n break;\n }\n\n if (lines[i].trim().length === 0) {\n continue;\n }\n\n var leadingWhitespace = lines[i].search(/\\S/);\n\n if (leadingWhitespace > -1 && (leadingWhitespace < minLeadingWhitespace || minLeadingWhitespace === -1)) {\n minLeadingWhitespace = leadingWhitespace;\n }\n }\n\n var formattedQueryText = \"\";\n\n for (var _i = 0; _i < lines.length; _i++) {\n var trimmedLine = lines[_i].substring(minLeadingWhitespace).replace(/\\s+$/g, '');\n\n if (trimmedLine.length > 0) {\n formattedQueryText += trimmedLine;\n\n if (_i < lines.length - 1) {\n formattedQueryText += \"\\n\";\n }\n }\n }\n\n return formattedQueryText;\n }\n }, {\n key: \"stripQueryTextWhitespace\",\n value: function stripQueryTextWhitespace(queryText) {\n var formattedQueryText = QueryListItem.getAllQueryText(queryText);\n\n return (0, _newUtils.truncateString)(formattedQueryText, 550);\n }\n }]);\n\n return QueryListItem;\n}(_react2.default.Component);\n\nvar DisplayedQueriesList = function (_React$Component2) {\n _inherits(DisplayedQueriesList, _React$Component2);\n\n function DisplayedQueriesList() {\n _classCallCheck(this, DisplayedQueriesList);\n\n return _possibleConstructorReturn(this, (DisplayedQueriesList.__proto__ || Object.getPrototypeOf(DisplayedQueriesList)).apply(this, arguments));\n }\n\n _createClass(DisplayedQueriesList, [{\n key: \"render\",\n value: function render() {\n var queryNodes = this.props.queries.map(function (query) {\n return _react2.default.createElement(QueryListItem, { key: query.queryId, query: query });\n }.bind(this));\n return _react2.default.createElement(\n \"div\",\n { className: \"queryListContainer\" },\n queryNodes\n );\n }\n }]);\n\n return DisplayedQueriesList;\n}(_react2.default.Component);\n\nvar SELECT_ALL = \"all\";\n\nvar FILTER_TYPE = {\n QUEUED: \"queued\",\n WAITING_FOR_RESOURCES: \"waiting_for_resources\",\n DISPATCHING: \"dispatching\",\n PLANNING: \"planning\",\n STARTING: \"starting\",\n RUNNING: \"running\",\n FINISHING: \"finishing\",\n FINISHED: \"finished\",\n FAILED: \"failed\"\n};\n\nvar SORT_TYPE = {\n CREATED: \"creation\",\n ELAPSED: \"elapsed\",\n EXECUTION: \"execution\",\n CPU: \"cpu\",\n CUMULATIVE_MEMORY: \"cumulative\",\n CURRENT_MEMORY: \"memory\"\n};\n\nvar ERROR_TYPE = {\n USER_ERROR: \"user_error\",\n INTERNAL_ERROR: \"internal_error\",\n INSUFFICIENT_RESOURCES: \"insufficient_resources\",\n EXTERNAL: \"external\"\n};\n\nvar SORT_ORDER = {\n ASCENDING: \"ascending\",\n DESCENDING: \"descending\"\n};\n\nvar QueryList = exports.QueryList = function (_React$Component3) {\n _inherits(QueryList, _React$Component3);\n\n function QueryList(props) {\n _classCallCheck(this, QueryList);\n\n var _this3 = _possibleConstructorReturn(this, (QueryList.__proto__ || Object.getPrototypeOf(QueryList)).call(this, props));\n\n _this3.state = {\n allQueries: [],\n currentSortType: SORT_TYPE.CREATED,\n currentSortOrder: SORT_ORDER.DESCENDING,\n stateFilters: [FILTER_TYPE.QUEUED, FILTER_TYPE.WAITING_FOR_RESOURCES, FILTER_TYPE.DISPATCHING, FILTER_TYPE.PLANNING, FILTER_TYPE.STARTING, FILTER_TYPE.RUNNING, FILTER_TYPE.FINISHING, FILTER_TYPE.FINISHED, FILTER_TYPE.FAILED],\n errorTypeFilters: [ERROR_TYPE.INTERNAL_ERROR, ERROR_TYPE.INSUFFICIENT_RESOURCES, ERROR_TYPE.EXTERNAL, ERROR_TYPE.USER_ERROR],\n stateSelectAll: true,\n errorSelectAll: true,\n searchStringUser: '',\n searchStringDate: '',\n searchStringSql: '',\n searchStringQueryId: '',\n searchStringResourceGroup: '',\n currentPage: 1,\n pageSize: 10,\n total: 0,\n queryString: '',\n queryNums: -1,\n metaStoreType: ''\n };\n\n _this3.refreshLoop = _this3.refreshLoop.bind(_this3);\n _this3.handleSearchStringChange = _this3.handleSearchStringChange.bind(_this3);\n _this3.renderDateRangePicker = _this3.renderDateRangePicker.bind(_this3);\n _this3.handleSortClick = _this3.handleSortClick.bind(_this3);\n _this3.refreshData = _this3.refreshData.bind(_this3);\n _this3.onPageChange = _this3.onPageChange.bind(_this3);\n _this3.onPageSizeChange = _this3.onPageSizeChange.bind(_this3);\n _this3.debounceSearch = _lodash2.default.debounce(function () {\n _lodash2.default.defer(_this3.refreshData);\n }, 200);\n return _this3;\n }\n\n _createClass(QueryList, [{\n key: \"resetTimer\",\n value: function resetTimer() {\n clearTimeout(this.timeoutId);\n // stop refreshing when query finishes or fails\n if (this.state.query === null || !this.state.ended) {\n this.timeoutId = setTimeout(this.refreshLoop, 1000);\n }\n }\n }, {\n key: \"refreshLoop\",\n value: function refreshLoop() {\n clearTimeout(this.timeoutId); // to stop multiple series of refreshLoop from going on simultaneously\n this.refreshData();\n }\n }, {\n key: \"refreshData\",\n value: function refreshData() {\n var _state = this.state,\n stateFilters = _state.stateFilters,\n errorTypeFilters = _state.errorTypeFilters,\n currentSortType = _state.currentSortType,\n currentSortOrder = _state.currentSortOrder,\n searchStringUser = _state.searchStringUser,\n searchStringDate = _state.searchStringDate,\n searchStringSql = _state.searchStringSql,\n searchStringQueryId = _state.searchStringQueryId,\n searchStringResourceGroup = _state.searchStringResourceGroup,\n currentPage = _state.currentPage,\n pageSize = _state.pageSize;\n\n var queryParam = {\n state: stateFilters.join(\",\"),\n failed: errorTypeFilters.join(\",\"),\n sort: currentSortType,\n sortOrder: currentSortOrder,\n searchUser: searchStringUser,\n searchDate: searchStringDate,\n searchSql: searchStringSql,\n searchQueryId: searchStringQueryId,\n searchResourceGroup: searchStringResourceGroup,\n pageNum: currentPage,\n pageSize: pageSize\n };\n var queryArray = [];\n _lodash2.default.each(queryParam, function (value, key) {\n queryArray.push(key + \"=\" + value);\n });\n var queryString = queryArray.join(\"&&\");\n $.get(\"../v1/query/queryNums\", function (num) {\n var queryNum = this.state.queryNums;\n if (queryNum == num) {} else {\n this.state.queryNums = num;\n $.get(\"../v1/query/queryInfo?\" + queryString, function (queryList) {\n this.setState({\n allQueries: queryList.queries,\n total: queryList.total\n });\n this.resetTimer();\n }.bind(this)).fail(function () {\n this.resetTimer();\n }.bind(this));\n }\n this.resetTimer();\n }.bind(this));\n if (queryString !== this.state.queryString) {\n $.get(\"../v1/query/queryInfo?\" + queryString, function (queryList) {\n this.setState({\n allQueries: queryList.queries,\n total: queryList.total\n });\n this.resetTimer();\n }.bind(this)).fail(function () {\n this.resetTimer();\n }.bind(this));\n }\n\n this.setState({\n queryString: queryString\n });\n }\n }, {\n key: \"componentDidMount\",\n value: function componentDidMount() {\n $.get(\"../v1/query/hetuMetastoreType\", function (metaStoreType) {\n this.state.metaStoreType = metaStoreType;\n if (this.state.metaStoreType != \"jdbc\") {\n alert(\"Page error. Please change the storage type of hetu-metastore to JDBC.\");\n }\n this.resetTimer();\n }.bind(this)).fail(function () {\n this.resetTimer();\n }.bind(this));\n\n this.refreshLoop();\n }\n }, {\n key: \"handleSearchStringChange\",\n value: function handleSearchStringChange(event) {\n var newSearchString = event.target.value;\n if (event.target.name === \"User\") {\n this.setState({\n currentPage: 1,\n searchStringUser: newSearchString\n });\n } else if (event.target.name === \"Date\") {\n this.setState({\n currentPage: 1,\n searchStringDate: newSearchString\n });\n } else if (event.target.name === \"Sql\") {\n this.setState({\n currentPage: 1,\n searchStringSql: newSearchString\n });\n } else if (event.target.name === \"QueryId\") {\n this.setState({\n currentPage: 1,\n searchStringQueryId: newSearchString\n });\n } else if (event.target.name === \"ResourceGroup\") {\n this.setState({\n currentPage: 1,\n searchStringResourceGroup: newSearchString\n });\n }\n\n this.debounceSearch();\n }\n }, {\n key: \"renderDateRangePicker\",\n value: function renderDateRangePicker() {\n var that = this;\n $('#date-picker').daterangepicker({\n \"timePicker\": true,\n \"timePicker24Hour\": true,\n \"linkedCalendars\": false,\n \"autoUpdateInput\": false,\n \"timePickerMinutes\": true,\n \"locale\": {\n format: 'YYYY-MM-DD.HH:mm',\n separator: ' ~ ',\n applyLabel: \"apply\",\n cancelLabel: \"clear\",\n resetLabel: \"reset\"\n }\n }, function (start, end, label) {});\n\n $('#date-picker').on('apply.daterangepicker', function (ev, picker) {\n picker.element.val(picker.startDate.format(picker.locale.format) + picker.locale.separator + picker.endDate.format(picker.locale.format));\n that.state.searchStringDate = picker.startDate.format(picker.locale.format) + picker.locale.separator + picker.endDate.format(picker.locale.format);\n setTimeout(that.debounceSearch, 0);\n });\n\n $('#date-picker').on('hide.daterangepicker', function (ev, picker) {\n if (that.state.searchStringDate !== \"\") {\n that.state.searchStringDate = picker.startDate.format(picker.locale.format) + picker.locale.separator + picker.endDate.format(picker.locale.format);\n }\n setTimeout(that.debounceSearch, 0);\n });\n\n $('#date-picker').on('cancel.daterangepicker', function (ev, picker) {\n $('#date-picker').val('');\n that.state.searchStringDate = \"\";\n setTimeout(that.debounceSearch, 0);\n });\n }\n }, {\n key: \"renderSortListItem\",\n value: function renderSortListItem(sortType, sortText) {\n if (this.state.currentSortType === sortType) {\n var directionArrow = this.state.currentSortOrder === SORT_ORDER.ASCENDING ? _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-triangle-top\" }) : _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-triangle-bottom\" });\n return _react2.default.createElement(\n \"li\",\n null,\n _react2.default.createElement(\n \"a\",\n { href: \"#\", className: \"selected\", onClick: this.handleSortClick.bind(this, sortType) },\n sortText,\n \" \",\n directionArrow\n )\n );\n } else {\n return _react2.default.createElement(\n \"li\",\n null,\n _react2.default.createElement(\n \"a\",\n { href: \"#\", onClick: this.handleSortClick.bind(this, sortType) },\n sortText\n )\n );\n }\n }\n }, {\n key: \"handleSortClick\",\n value: function handleSortClick(sortType) {\n var newSortType = sortType;\n var newSortOrder = SORT_ORDER.DESCENDING;\n\n if (this.state.currentSortType === sortType && this.state.currentSortOrder === SORT_ORDER.DESCENDING) {\n newSortOrder = SORT_ORDER.ASCENDING;\n }\n this.setState({\n currentPage: 1,\n currentSortType: newSortType,\n currentSortOrder: newSortOrder\n });\n _lodash2.default.defer(this.refreshData);\n document.getElementById(\"query-history-sort\").setAttribute(\"class\", \"input-group-btn open\");\n }\n }, {\n key: \"renderFilterButton\",\n value: function renderFilterButton(filterType, filterText) {\n var stateSelectAll = this.state.stateSelectAll;\n\n var checkmarkStyle = { color: '#ffffff' };\n if (this.state.stateFilters.indexOf(filterType) > -1 || filterType == SELECT_ALL && stateSelectAll) {\n checkmarkStyle = _newUtils.GLYPHICON_HIGHLIGHT;\n }\n return _react2.default.createElement(\n \"li\",\n null,\n _react2.default.createElement(\n \"a\",\n { href: \"#\", onClick: this.handleStateFilterClick.bind(this, filterType) },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-ok\", style: checkmarkStyle }),\n \"\\xA0\",\n filterText\n )\n );\n }\n }, {\n key: \"handleStateFilterClick\",\n value: function handleStateFilterClick(filter) {\n var newFilters = [];\n var stateSelectAll = this.state.stateSelectAll;\n\n if (filter == SELECT_ALL) {\n !stateSelectAll && _lodash2.default.each(FILTER_TYPE, function (value, key) {\n newFilters.push(value);\n });\n stateSelectAll = !stateSelectAll;\n } else {\n newFilters = this.state.stateFilters.slice();\n if (this.state.stateFilters.indexOf(filter) > -1) {\n newFilters.splice(newFilters.indexOf(filter), 1);\n } else {\n newFilters.push(filter);\n }\n stateSelectAll = newFilters.length == Object.keys(FILTER_TYPE).length ? true : false;\n }\n this.setState({\n currentPage: 1,\n stateSelectAll: stateSelectAll,\n stateFilters: newFilters\n });\n _lodash2.default.defer(this.refreshData);\n document.getElementById(\"query-history-filter\").setAttribute(\"class\", \"input-group-btn open\");\n }\n }, {\n key: \"renderErrorTypeListItem\",\n value: function renderErrorTypeListItem(errorType, errorTypeText) {\n var errorSelectAll = this.state.errorSelectAll;\n\n var checkmarkStyle = { color: '#ffffff' };\n if (this.state.errorTypeFilters.indexOf(errorType) > -1 || errorType == SELECT_ALL && errorSelectAll) {\n checkmarkStyle = _newUtils.GLYPHICON_HIGHLIGHT;\n }\n return _react2.default.createElement(\n \"li\",\n null,\n _react2.default.createElement(\n \"a\",\n { href: \"#\", onClick: this.handleErrorTypeFilterClick.bind(this, errorType) },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-ok\", style: checkmarkStyle }),\n \"\\xA0\",\n errorTypeText\n )\n );\n }\n }, {\n key: \"handleErrorTypeFilterClick\",\n value: function handleErrorTypeFilterClick(errorType) {\n var newFilters = [];\n var errorSelectAll = this.state.errorSelectAll;\n\n if (errorType == SELECT_ALL) {\n !errorSelectAll && _lodash2.default.each(ERROR_TYPE, function (value, key) {\n newFilters.push(value);\n });\n errorSelectAll = !errorSelectAll;\n } else {\n newFilters = this.state.errorTypeFilters.slice();\n if (this.state.errorTypeFilters.indexOf(errorType) > -1) {\n newFilters.splice(newFilters.indexOf(errorType), 1);\n } else {\n newFilters.push(errorType);\n }\n errorSelectAll = newFilters.length == Object.keys(ERROR_TYPE).length ? true : false;\n }\n\n this.setState({\n currentPage: 1,\n errorSelectAll: errorSelectAll,\n errorTypeFilters: newFilters\n });\n _lodash2.default.defer(this.refreshData);\n document.getElementById(\"query-history-error\").setAttribute(\"class\", \"input-group-btn open\");\n }\n }, {\n key: \"onPageChange\",\n value: function onPageChange(current, pageSize) {\n this.setState({ currentPage: current });\n _lodash2.default.defer(this.refreshData);\n }\n }, {\n key: \"onPageSizeChange\",\n value: function onPageSizeChange(current, pageSize) {\n this.setState({ pageSize: pageSize });\n _lodash2.default.defer(this.refreshData);\n }\n }, {\n key: \"render\",\n value: function render() {\n var _state2 = this.state,\n allQueries = _state2.allQueries,\n currentPage = _state2.currentPage,\n total = _state2.total,\n stateFilters = _state2.stateFilters,\n pageSize = _state2.pageSize;\n // let queryList = ;\n\n var queryList = void 0;\n if (allQueries == null || total === 0) {\n var label = _react2.default.createElement(\n \"div\",\n { className: \"loader\" },\n \"Loading...\"\n );\n if (allQueries == null || total === 0) {\n label = \"No queries\";\n }\n queryList = _react2.default.createElement(\n \"div\",\n { className: \"row error-message\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"h4\",\n null,\n label\n )\n )\n );\n } else {\n queryList = _react2.default.createElement(DisplayedQueriesList, { queries: allQueries });\n }\n\n return _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n \"div\",\n { className: \"flex flex-row flex-initial header\" },\n _react2.default.createElement(_Header2.default, null)\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"flex flex-row content\" },\n _react2.default.createElement(_NavigationMenu2.default, { active: \"queryhistory\" }),\n _react2.default.createElement(\n \"div\",\n { className: \"container\" },\n _react2.default.createElement(\n \"div\",\n { className: \"row toolbar-row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 toolbar-col query-history\" },\n _react2.default.createElement(\n \"div\",\n { className: \"input-group input-group-sm\" },\n _react2.default.createElement(\"input\", { type: \"text\", className: \"form-control form-control-small search-bar\", placeholder: \"User\", name: \"User\",\n onChange: this.handleSearchStringChange, value: this.state.searchStringUser }),\n _react2.default.createElement(\"input\", { type: \"text\", id: \"date-picker\", className: \"form-control form-control-small search-bar\", placeholder: \"Date\", name: \"Date\",\n onFocus: this.renderDateRangePicker, onChange: this.handleSearchStringChange,\n value: this.state.searchStringDate }),\n _react2.default.createElement(\"input\", { type: \"text\", className: \"form-control form-control-small search-bar\", placeholder: \"Sql\", name: \"Sql\",\n onChange: this.handleSearchStringChange, value: this.state.searchStringSql }),\n _react2.default.createElement(\"input\", { type: \"text\", className: \"form-control form-control-small search-bar\", placeholder: \"QueryId\", name: \"QueryId\",\n onChange: this.handleSearchStringChange, value: this.state.searchStringQueryId }),\n _react2.default.createElement(\"input\", { type: \"text\", className: \"form-control form-control-small search-bar\", placeholder: \"ResourceGroup\", name: \"ResourceGroup\",\n onChange: this.handleSearchStringChange, value: this.state.searchStringResourceGroup }),\n _react2.default.createElement(\n \"div\",\n { className: \"input-group-btn\", id: \"query-history-filter\" },\n _react2.default.createElement(\n \"button\",\n { type: \"button\", className: \"btn btn-default dropdown-toggle\", \"data-toggle\": \"dropdown\", \"aria-haspopup\": \"true\", \"aria-expanded\": \"false\" },\n \"State \",\n _react2.default.createElement(\"span\", { className: \"caret\" })\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"dropdown-menu dropdown-menu-left\" },\n this.renderFilterButton(SELECT_ALL, \"Select All\"),\n this.renderFilterButton(FILTER_TYPE.QUEUED, \"Queued\"),\n this.renderFilterButton(FILTER_TYPE.WAITING_FOR_RESOURCES, \"Waiting For Resources\"),\n this.renderFilterButton(FILTER_TYPE.DISPATCHING, \"Dispatching\"),\n this.renderFilterButton(FILTER_TYPE.PLANNING, \"Planning\"),\n this.renderFilterButton(FILTER_TYPE.STARTING, \"Starting\"),\n this.renderFilterButton(FILTER_TYPE.RUNNING, \"Running\"),\n this.renderFilterButton(FILTER_TYPE.FINISHING, \"Finishing\"),\n this.renderFilterButton(FILTER_TYPE.FINISHED, \"Finished\"),\n this.renderFilterButton(FILTER_TYPE.FAILED, \"Failed\")\n )\n ),\n \"\\xA0\",\n stateFilters.indexOf(FILTER_TYPE.FAILED) > -1 && _react2.default.createElement(\n _react.Fragment,\n null,\n _react2.default.createElement(\n \"div\",\n { className: \"input-group-btn\", id: \"query-history-error\" },\n _react2.default.createElement(\n \"button\",\n { type: \"button\", className: \"btn btn-default dropdown-toggle\", \"data-toggle\": \"dropdown\", \"aria-haspopup\": \"true\", \"aria-expanded\": \"false\" },\n \"Failed \",\n _react2.default.createElement(\"span\", { className: \"caret\" })\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"dropdown-menu\" },\n this.renderErrorTypeListItem(SELECT_ALL, \"Select All\"),\n this.renderErrorTypeListItem(ERROR_TYPE.INTERNAL_ERROR, \"Internal Error\"),\n this.renderErrorTypeListItem(ERROR_TYPE.EXTERNAL, \"External Error\"),\n this.renderErrorTypeListItem(ERROR_TYPE.INSUFFICIENT_RESOURCES, \"Resources Error\"),\n this.renderErrorTypeListItem(ERROR_TYPE.USER_ERROR, \"User Error\")\n )\n ),\n \"\\xA0\"\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"input-group-btn\", id: \"query-history-sort\" },\n _react2.default.createElement(\n \"button\",\n { type: \"button\", className: \"btn btn-default dropdown-toggle\", \"data-toggle\": \"dropdown\", \"aria-haspopup\": \"true\", \"aria-expanded\": \"false\" },\n \"Sort \",\n _react2.default.createElement(\"span\", { className: \"caret\" })\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"dropdown-menu dropdown-menu-right\" },\n this.renderSortListItem(SORT_TYPE.CREATED, \"Creation Time\"),\n this.renderSortListItem(SORT_TYPE.ELAPSED, \"Elapsed Time\"),\n this.renderSortListItem(SORT_TYPE.CPU, \"CPU Time\"),\n this.renderSortListItem(SORT_TYPE.EXECUTION, \"Execution Time\"),\n this.renderSortListItem(SORT_TYPE.CURRENT_MEMORY, \"Current Memory\"),\n this.renderSortListItem(SORT_TYPE.CUMULATIVE_MEMORY, \"Cumulative User Memory\")\n )\n )\n )\n )\n ),\n queryList,\n _react2.default.createElement(_rcPagination2.default, {\n defaultCurrent: 1,\n current: currentPage,\n total: total,\n defaultPageSize: 10,\n pageSize: pageSize,\n onChange: this.onPageChange,\n showTotal: function showTotal(total) {\n return \"Total \" + total + \" queries\";\n },\n style: { marginTop: 10 },\n locale: _en_US2.default,\n showSizeChanger: true,\n onShowSizeChange: this.onPageSizeChange,\n selectComponentClass: _rcSelect2.default\n })\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"flex flex-row flex-initial statusFooter\" },\n _react2.default.createElement(_StatusFooter2.default, null)\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"flex flex-row flex-initial footer\" },\n _react2.default.createElement(_Footer2.default, null)\n )\n );\n }\n }]);\n\n return QueryList;\n}(_react2.default.Component);\n\n//# sourceURL=webpack:///./components/QueryList.jsx?");
+eval("\n\nObject.defineProperty(exports, \"__esModule\", {\n value: true\n});\nexports.QueryList = exports.QueryListItem = undefined;\n\nvar _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if (\"value\" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();\n\nvar _react = __webpack_require__(/*! react */ \"./node_modules/react/index.js\");\n\nvar _react2 = _interopRequireDefault(_react);\n\nvar _newUtils = __webpack_require__(/*! ../newUtils */ \"./newUtils.js\");\n\nvar _Header = __webpack_require__(/*! ../queryeditor/components/Header */ \"./queryeditor/components/Header.jsx\");\n\nvar _Header2 = _interopRequireDefault(_Header);\n\nvar _Footer = __webpack_require__(/*! ../queryeditor/components/Footer */ \"./queryeditor/components/Footer.jsx\");\n\nvar _Footer2 = _interopRequireDefault(_Footer);\n\nvar _StatusFooter = __webpack_require__(/*! ../queryeditor/components/StatusFooter */ \"./queryeditor/components/StatusFooter.jsx\");\n\nvar _StatusFooter2 = _interopRequireDefault(_StatusFooter);\n\nvar _NavigationMenu = __webpack_require__(/*! ../NavigationMenu */ \"./NavigationMenu.jsx\");\n\nvar _NavigationMenu2 = _interopRequireDefault(_NavigationMenu);\n\nvar _rcPagination = __webpack_require__(/*! rc-pagination */ \"./node_modules/rc-pagination/es/index.js\");\n\nvar _rcPagination2 = _interopRequireDefault(_rcPagination);\n\nvar _rcSelect = __webpack_require__(/*! rc-select */ \"./node_modules/rc-select/es/index.js\");\n\nvar _rcSelect2 = _interopRequireDefault(_rcSelect);\n\nvar _en_US = __webpack_require__(/*! ../node_modules/rc-pagination/es/locale/en_US */ \"./node_modules/rc-pagination/es/locale/en_US.js\");\n\nvar _en_US2 = _interopRequireDefault(_en_US);\n\nvar _lodash = __webpack_require__(/*! lodash */ \"./node_modules/lodash/lodash.js\");\n\nvar _lodash2 = _interopRequireDefault(_lodash);\n\nvar _ModalDialog = __webpack_require__(/*! ../queryeditor/components/ModalDialog */ \"./queryeditor/components/ModalDialog.jsx\");\n\nvar _ModalDialog2 = _interopRequireDefault(_ModalDialog);\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }\n\nfunction _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError(\"Cannot call a class as a function\"); } }\n\nfunction _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError(\"this hasn't been initialised - super() hasn't been called\"); } return call && (typeof call === \"object\" || typeof call === \"function\") ? call : self; }\n\nfunction _inherits(subClass, superClass) { if (typeof superClass !== \"function\" && superClass !== null) { throw new TypeError(\"Super expression must either be null or a function, not \" + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /*\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n * http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\nvar QueryListItem = exports.QueryListItem = function (_React$Component) {\n _inherits(QueryListItem, _React$Component);\n\n function QueryListItem(props) {\n _classCallCheck(this, QueryListItem);\n\n var _this = _possibleConstructorReturn(this, (QueryListItem.__proto__ || Object.getPrototypeOf(QueryListItem)).call(this, props));\n\n _this.state = {\n show: false\n };\n _this.showModal = _this.showModal.bind(_this);\n _this.isShowMore = _this.isShowMore.bind(_this);\n return _this;\n }\n\n _createClass(QueryListItem, [{\n key: \"showModal\",\n value: function showModal(e) {\n var newShow = this.state.show;\n this.setState({\n show: !newShow\n });\n }\n }, {\n key: \"isShowMore\",\n value: function isShowMore(queryText) {\n var formattedQueryText = QueryListItem.getAllQueryText(queryText);\n var row = formattedQueryText.split(\"\\n\").length;\n\n if (formattedQueryText && (formattedQueryText.length > 550 || row > 8)) {\n return true;\n } else {\n return false;\n }\n }\n }, {\n key: \"render\",\n value: function render() {\n var query = this.props.query;\n var progressBarStyle = { width: 100 + \"%\", backgroundColor: (0, _newUtils.getQueryStateColor)(query) };\n\n var splitDetails = _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 tinystat-row\" },\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Completed splits\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-ok\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.completedDrivers\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Running splits\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-play\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.state === \"FINISHED\" || query.state === \"FAILED\" ? 0 : query.runningDrivers\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Queued splits\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-pause\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.state === \"FINISHED\" || query.state === \"FAILED\" ? 0 : query.queuedDrivers\n )\n );\n\n var timingDetails = _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 tinystat-row\" },\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Wall time spent executing the query (not including queued time)\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-hourglass\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.executionTime\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Total query wall time\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-time\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.elapsedTime\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"CPU time spent by this query\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-dashboard\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.totalCpuTime\n )\n );\n\n var memoryDetails = _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 tinystat-row\" },\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Current total reserved memory\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-scale\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.totalMemoryReservation\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Peak total memory\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-fire\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n query.peakTotalMemoryReservation\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"tinystat\", \"data-toggle\": \"tooltip\", \"data-placement\": \"top\", title: \"Cumulative user memory\", \"data-container\": \"body\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-equalizer\", style: _newUtils.GLYPHICON_HIGHLIGHT }),\n \"\\xA0\\xA0\",\n (0, _newUtils.formatDataSizeBytes)(query.cumulativeUserMemory / 1000.0)\n )\n );\n\n var user = _react2.default.createElement(\n \"span\",\n null,\n query.user\n );\n // if (query.session.principal) {\n // user = (\n // {query.user}\n // );\n // }\n\n return _react2.default.createElement(\n \"div\",\n { className: \"query\" },\n _react2.default.createElement(\n \"div\",\n { className: \"row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-4\" },\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row query-header query-header-queryid\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-9\", \"data-toggle\": \"tooltip\", \"data-placement\": \"bottom\", title: \"Query ID\" },\n _react2.default.createElement(\n \"a\",\n { href: \"../ui/query.html?history_\" + query.queryId, target: \"_blank\" },\n query.queryId\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-3 query-header-timestamp\", \"data-toggle\": \"tooltip\", \"data-placement\": \"bottom\", title: \"Submit time\" },\n _react2.default.createElement(\n \"span\",\n null,\n (0, _newUtils.formatShortTime)(new Date(Date.parse(query.createTime)))\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"span\",\n { \"data-toggle\": \"tooltip\", \"data-placement\": \"right\", title: \"User\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-user\", style: _newUtils.GLYPHICON_DEFAULT }),\n \"\\xA0\\xA0\",\n _react2.default.createElement(\n \"span\",\n null,\n (0, _newUtils.truncateString)(user, 35)\n )\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"span\",\n { \"data-toggle\": \"tooltip\", \"data-placement\": \"right\", title: \"Source\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-log-in\", style: _newUtils.GLYPHICON_DEFAULT }),\n \"\\xA0\\xA0\",\n _react2.default.createElement(\n \"span\",\n null,\n (0, _newUtils.truncateString)(query.source, 35)\n )\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"span\",\n { \"data-toggle\": \"tooltip\", \"data-placement\": \"right\", title: \"Resource Group\" },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-road\", style: _newUtils.GLYPHICON_DEFAULT }),\n \"\\xA0\\xA0\",\n _react2.default.createElement(\n \"span\",\n null,\n (0, _newUtils.truncateString)(query.resource ? query.resource : \"n/a\", 35)\n )\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n splitDetails\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n timingDetails\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row stat-row\" },\n memoryDetails\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-8\" },\n _react2.default.createElement(\n \"div\",\n { className: \"row query-header\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 query-progress-container\" },\n _react2.default.createElement(\n \"div\",\n { className: \"progress\" },\n _react2.default.createElement(\n \"div\",\n { className: \"progress-bar progress-bar-info\", role: \"progressbar\", \"aria-valuemin\": \"0\",\n \"aria-valuemax\": \"100\", style: progressBarStyle },\n _react2.default.createElement(\n \"div\",\n { className: \"progress-catalog-schema-container\" },\n _react2.default.createElement(\n \"span\",\n { className: \"progress-catalog-schema\" },\n \"catalog:\"\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"text-catalog-schema\" },\n query.catalog\n ),\n \"\\xA0\\xA0\",\n _react2.default.createElement(\n \"span\",\n { className: \"progress-catalog-schema\" },\n \"schema:\"\n ),\n _react2.default.createElement(\n \"span\",\n { className: \"text-catalog-schema\" },\n query.schemata\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"progress-state\" },\n (0, _newUtils.getHumanReadableState)(query)\n )\n )\n )\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"row query-row-bottom\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"pre\",\n { className: \"query-snippet\" },\n _react2.default.createElement(\n \"code\",\n { className: \"sql\" },\n QueryListItem.stripQueryTextWhitespace(query.query)\n )\n ),\n this.isShowMore(query.query) ? _react2.default.createElement(\n \"div\",\n { className: \"query-showmore\" },\n _react2.default.createElement(\n \"a\",\n { onClick: this.showModal, style: { color: '#1E90FF', cursor: 'pointer' } },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-arrow-right\", style: { color: '#1E90FF' } }),\n \"\\xA0Show More\"\n ),\n _react2.default.createElement(\n _ModalDialog2.default,\n { onClose: this.showModal, header: (0, _newUtils.getHumanReadableState)(query), footer: \"\",\n show: this.state.show },\n _react2.default.createElement(\n \"div\",\n { className: \"modal-querytext\" },\n QueryListItem.getAllQueryText(query.query)\n )\n )\n ) : null\n )\n )\n )\n )\n );\n }\n }], [{\n key: \"getAllQueryText\",\n value: function getAllQueryText(queryText) {\n var lines = queryText.split(\"\\n\");\n var minLeadingWhitespace = -1;\n for (var i = 0; i < lines.length; i++) {\n if (minLeadingWhitespace === 0) {\n break;\n }\n\n if (lines[i].trim().length === 0) {\n continue;\n }\n\n var leadingWhitespace = lines[i].search(/\\S/);\n\n if (leadingWhitespace > -1 && (leadingWhitespace < minLeadingWhitespace || minLeadingWhitespace === -1)) {\n minLeadingWhitespace = leadingWhitespace;\n }\n }\n\n var formattedQueryText = \"\";\n\n for (var _i = 0; _i < lines.length; _i++) {\n var trimmedLine = lines[_i].substring(minLeadingWhitespace).replace(/\\s+$/g, '');\n\n if (trimmedLine.length > 0) {\n formattedQueryText += trimmedLine;\n\n if (_i < lines.length - 1) {\n formattedQueryText += \"\\n\";\n }\n }\n }\n\n return formattedQueryText;\n }\n }, {\n key: \"stripQueryTextWhitespace\",\n value: function stripQueryTextWhitespace(queryText) {\n var formattedQueryText = QueryListItem.getAllQueryText(queryText);\n\n return (0, _newUtils.truncateString)(formattedQueryText, 550);\n }\n }]);\n\n return QueryListItem;\n}(_react2.default.Component);\n\nvar DisplayedQueriesList = function (_React$Component2) {\n _inherits(DisplayedQueriesList, _React$Component2);\n\n function DisplayedQueriesList() {\n _classCallCheck(this, DisplayedQueriesList);\n\n return _possibleConstructorReturn(this, (DisplayedQueriesList.__proto__ || Object.getPrototypeOf(DisplayedQueriesList)).apply(this, arguments));\n }\n\n _createClass(DisplayedQueriesList, [{\n key: \"render\",\n value: function render() {\n var queryNodes = this.props.queries.map(function (query) {\n return _react2.default.createElement(QueryListItem, { key: query.queryId, query: query });\n }.bind(this));\n return _react2.default.createElement(\n \"div\",\n { className: \"queryListContainer\" },\n queryNodes\n );\n }\n }]);\n\n return DisplayedQueriesList;\n}(_react2.default.Component);\n\nvar SELECT_ALL = \"all\";\n\nvar FILTER_TYPE = {\n FINISHED: \"finished\",\n FAILED: \"failed\"\n};\n\nvar SORT_TYPE = {\n CREATED: \"creation\",\n ELAPSED: \"elapsed\",\n EXECUTION: \"execution\",\n CPU: \"cpu\",\n CUMULATIVE_MEMORY: \"cumulative\",\n CURRENT_MEMORY: \"memory\"\n};\n\nvar ERROR_TYPE = {\n USER_ERROR: \"user_error\",\n INTERNAL_ERROR: \"internal_error\",\n INSUFFICIENT_RESOURCES: \"insufficient_resources\",\n EXTERNAL: \"external\"\n};\n\nvar SORT_ORDER = {\n ASCENDING: \"ascending\",\n DESCENDING: \"descending\"\n};\n\nvar QueryList = exports.QueryList = function (_React$Component3) {\n _inherits(QueryList, _React$Component3);\n\n function QueryList(props) {\n _classCallCheck(this, QueryList);\n\n var _this3 = _possibleConstructorReturn(this, (QueryList.__proto__ || Object.getPrototypeOf(QueryList)).call(this, props));\n\n _this3.state = {\n allQueries: [],\n currentSortType: SORT_TYPE.CREATED,\n currentSortOrder: SORT_ORDER.DESCENDING,\n stateFilters: [FILTER_TYPE.FINISHED, FILTER_TYPE.FAILED],\n errorTypeFilters: [ERROR_TYPE.INTERNAL_ERROR, ERROR_TYPE.INSUFFICIENT_RESOURCES, ERROR_TYPE.EXTERNAL, ERROR_TYPE.USER_ERROR],\n stateSelectAll: true,\n errorSelectAll: true,\n searchStringUser: '',\n searchStringDate: '',\n searchStringSql: '',\n searchStringQueryId: '',\n searchStringResourceGroup: '',\n currentPage: 1,\n pageSize: 10,\n total: 0,\n queryString: '',\n queryNums: -1,\n metaStoreType: ''\n };\n\n _this3.refreshLoop = _this3.refreshLoop.bind(_this3);\n _this3.handleSearchStringChange = _this3.handleSearchStringChange.bind(_this3);\n _this3.renderDateRangePicker = _this3.renderDateRangePicker.bind(_this3);\n _this3.handleSortClick = _this3.handleSortClick.bind(_this3);\n _this3.refreshData = _this3.refreshData.bind(_this3);\n _this3.onPageChange = _this3.onPageChange.bind(_this3);\n _this3.onPageSizeChange = _this3.onPageSizeChange.bind(_this3);\n _this3.debounceSearch = _lodash2.default.debounce(function () {\n _lodash2.default.defer(_this3.refreshData);\n }, 200);\n return _this3;\n }\n\n _createClass(QueryList, [{\n key: \"resetTimer\",\n value: function resetTimer() {\n clearTimeout(this.timeoutId);\n // stop refreshing when query finishes or fails\n if (this.state.query === null || !this.state.ended) {\n this.timeoutId = setTimeout(this.refreshLoop, 1000);\n }\n }\n }, {\n key: \"refreshLoop\",\n value: function refreshLoop() {\n clearTimeout(this.timeoutId); // to stop multiple series of refreshLoop from going on simultaneously\n this.refreshData();\n }\n }, {\n key: \"refreshData\",\n value: function refreshData() {\n var _state = this.state,\n stateFilters = _state.stateFilters,\n errorTypeFilters = _state.errorTypeFilters,\n currentSortType = _state.currentSortType,\n currentSortOrder = _state.currentSortOrder,\n searchStringUser = _state.searchStringUser,\n searchStringDate = _state.searchStringDate,\n searchStringSql = _state.searchStringSql,\n searchStringQueryId = _state.searchStringQueryId,\n searchStringResourceGroup = _state.searchStringResourceGroup,\n currentPage = _state.currentPage,\n pageSize = _state.pageSize;\n\n var queryParam = {\n state: stateFilters.join(\",\"),\n failed: errorTypeFilters.join(\",\"),\n sort: currentSortType,\n sortOrder: currentSortOrder,\n searchUser: searchStringUser,\n searchDate: searchStringDate,\n searchSql: searchStringSql,\n searchQueryId: searchStringQueryId,\n searchResourceGroup: searchStringResourceGroup,\n pageNum: currentPage,\n pageSize: pageSize\n };\n var queryArray = [];\n _lodash2.default.each(queryParam, function (value, key) {\n queryArray.push(key + \"=\" + value);\n });\n var queryString = queryArray.join(\"&&\");\n $.get(\"../v1/query/queryNums\", function (num) {\n var queryNum = this.state.queryNums;\n if (queryNum == num) {} else {\n this.state.queryNums = num;\n $.get(\"../v1/query/queryInfo?\" + queryString, function (queryList) {\n this.setState({\n allQueries: queryList.queries,\n total: queryList.total\n });\n this.resetTimer();\n }.bind(this)).fail(function () {\n this.resetTimer();\n }.bind(this));\n }\n this.resetTimer();\n }.bind(this));\n if (queryString !== this.state.queryString) {\n $.get(\"../v1/query/queryInfo?\" + queryString, function (queryList) {\n this.setState({\n allQueries: queryList.queries,\n total: queryList.total\n });\n this.resetTimer();\n }.bind(this)).fail(function () {\n this.resetTimer();\n }.bind(this));\n }\n\n this.setState({\n queryString: queryString\n });\n }\n }, {\n key: \"componentDidMount\",\n value: function componentDidMount() {\n $.get(\"../v1/query/hetuMetastoreType\", function (metaStoreType) {\n this.state.metaStoreType = metaStoreType;\n if (this.state.metaStoreType != \"jdbc\") {\n alert(\"Page error. Please change the storage type of hetu-metastore to JDBC.\");\n }\n this.resetTimer();\n }.bind(this)).fail(function () {\n this.resetTimer();\n }.bind(this));\n\n this.refreshLoop();\n }\n }, {\n key: \"handleSearchStringChange\",\n value: function handleSearchStringChange(event) {\n var newSearchString = event.target.value;\n if (event.target.name === \"User\") {\n this.setState({\n currentPage: 1,\n searchStringUser: newSearchString\n });\n } else if (event.target.name === \"Date\") {\n this.setState({\n currentPage: 1,\n searchStringDate: newSearchString\n });\n } else if (event.target.name === \"Sql\") {\n this.setState({\n currentPage: 1,\n searchStringSql: newSearchString\n });\n } else if (event.target.name === \"QueryId\") {\n this.setState({\n currentPage: 1,\n searchStringQueryId: newSearchString\n });\n } else if (event.target.name === \"ResourceGroup\") {\n this.setState({\n currentPage: 1,\n searchStringResourceGroup: newSearchString\n });\n }\n\n this.debounceSearch();\n }\n }, {\n key: \"renderDateRangePicker\",\n value: function renderDateRangePicker() {\n var that = this;\n $('#date-picker').daterangepicker({\n \"timePicker\": true,\n \"timePicker24Hour\": true,\n \"linkedCalendars\": false,\n \"autoUpdateInput\": false,\n \"timePickerMinutes\": true,\n \"locale\": {\n format: 'YYYY-MM-DD.HH:mm',\n separator: ' ~ ',\n applyLabel: \"apply\",\n cancelLabel: \"clear\",\n resetLabel: \"reset\"\n }\n }, function (start, end, label) {});\n\n $('#date-picker').on('apply.daterangepicker', function (ev, picker) {\n picker.element.val(picker.startDate.format(picker.locale.format) + picker.locale.separator + picker.endDate.format(picker.locale.format));\n that.state.searchStringDate = picker.startDate.format(picker.locale.format) + picker.locale.separator + picker.endDate.format(picker.locale.format);\n setTimeout(that.debounceSearch, 0);\n });\n\n $('#date-picker').on('hide.daterangepicker', function (ev, picker) {\n if (that.state.searchStringDate !== \"\") {\n that.state.searchStringDate = picker.startDate.format(picker.locale.format) + picker.locale.separator + picker.endDate.format(picker.locale.format);\n }\n setTimeout(that.debounceSearch, 0);\n });\n\n $('#date-picker').on('cancel.daterangepicker', function (ev, picker) {\n $('#date-picker').val('');\n that.state.searchStringDate = \"\";\n setTimeout(that.debounceSearch, 0);\n });\n }\n }, {\n key: \"renderSortListItem\",\n value: function renderSortListItem(sortType, sortText) {\n if (this.state.currentSortType === sortType) {\n var directionArrow = this.state.currentSortOrder === SORT_ORDER.ASCENDING ? _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-triangle-top\" }) : _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-triangle-bottom\" });\n return _react2.default.createElement(\n \"li\",\n null,\n _react2.default.createElement(\n \"a\",\n { href: \"#\", className: \"selected\", onClick: this.handleSortClick.bind(this, sortType) },\n sortText,\n \" \",\n directionArrow\n )\n );\n } else {\n return _react2.default.createElement(\n \"li\",\n null,\n _react2.default.createElement(\n \"a\",\n { href: \"#\", onClick: this.handleSortClick.bind(this, sortType) },\n sortText\n )\n );\n }\n }\n }, {\n key: \"handleSortClick\",\n value: function handleSortClick(sortType) {\n var newSortType = sortType;\n var newSortOrder = SORT_ORDER.DESCENDING;\n\n if (this.state.currentSortType === sortType && this.state.currentSortOrder === SORT_ORDER.DESCENDING) {\n newSortOrder = SORT_ORDER.ASCENDING;\n }\n this.setState({\n currentPage: 1,\n currentSortType: newSortType,\n currentSortOrder: newSortOrder\n });\n _lodash2.default.defer(this.refreshData);\n document.getElementById(\"query-history-sort\").setAttribute(\"class\", \"input-group-btn open\");\n }\n }, {\n key: \"renderFilterButton\",\n value: function renderFilterButton(filterType, filterText) {\n var stateSelectAll = this.state.stateSelectAll;\n\n var checkmarkStyle = { color: '#ffffff' };\n if (this.state.stateFilters.indexOf(filterType) > -1 || filterType == SELECT_ALL && stateSelectAll) {\n checkmarkStyle = _newUtils.GLYPHICON_HIGHLIGHT;\n }\n return _react2.default.createElement(\n \"li\",\n null,\n _react2.default.createElement(\n \"a\",\n { href: \"#\", onClick: this.handleStateFilterClick.bind(this, filterType) },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-ok\", style: checkmarkStyle }),\n \"\\xA0\",\n filterText\n )\n );\n }\n }, {\n key: \"handleStateFilterClick\",\n value: function handleStateFilterClick(filter) {\n var newFilters = [];\n var stateSelectAll = this.state.stateSelectAll;\n\n if (filter == SELECT_ALL) {\n !stateSelectAll && _lodash2.default.each(FILTER_TYPE, function (value, key) {\n newFilters.push(value);\n });\n stateSelectAll = !stateSelectAll;\n } else {\n newFilters = this.state.stateFilters.slice();\n if (this.state.stateFilters.indexOf(filter) > -1) {\n newFilters.splice(newFilters.indexOf(filter), 1);\n } else {\n newFilters.push(filter);\n }\n stateSelectAll = newFilters.length == Object.keys(FILTER_TYPE).length ? true : false;\n }\n this.setState({\n currentPage: 1,\n stateSelectAll: stateSelectAll,\n stateFilters: newFilters\n });\n _lodash2.default.defer(this.refreshData);\n document.getElementById(\"query-history-filter\").setAttribute(\"class\", \"input-group-btn open\");\n }\n }, {\n key: \"renderErrorTypeListItem\",\n value: function renderErrorTypeListItem(errorType, errorTypeText) {\n var errorSelectAll = this.state.errorSelectAll;\n\n var checkmarkStyle = { color: '#ffffff' };\n if (this.state.errorTypeFilters.indexOf(errorType) > -1 || errorType == SELECT_ALL && errorSelectAll) {\n checkmarkStyle = _newUtils.GLYPHICON_HIGHLIGHT;\n }\n return _react2.default.createElement(\n \"li\",\n null,\n _react2.default.createElement(\n \"a\",\n { href: \"#\", onClick: this.handleErrorTypeFilterClick.bind(this, errorType) },\n _react2.default.createElement(\"span\", { className: \"glyphicon glyphicon-ok\", style: checkmarkStyle }),\n \"\\xA0\",\n errorTypeText\n )\n );\n }\n }, {\n key: \"handleErrorTypeFilterClick\",\n value: function handleErrorTypeFilterClick(errorType) {\n var newFilters = [];\n var errorSelectAll = this.state.errorSelectAll;\n\n if (errorType == SELECT_ALL) {\n !errorSelectAll && _lodash2.default.each(ERROR_TYPE, function (value, key) {\n newFilters.push(value);\n });\n errorSelectAll = !errorSelectAll;\n } else {\n newFilters = this.state.errorTypeFilters.slice();\n if (this.state.errorTypeFilters.indexOf(errorType) > -1) {\n newFilters.splice(newFilters.indexOf(errorType), 1);\n } else {\n newFilters.push(errorType);\n }\n errorSelectAll = newFilters.length == Object.keys(ERROR_TYPE).length ? true : false;\n }\n\n this.setState({\n currentPage: 1,\n errorSelectAll: errorSelectAll,\n errorTypeFilters: newFilters\n });\n _lodash2.default.defer(this.refreshData);\n document.getElementById(\"query-history-error\").setAttribute(\"class\", \"input-group-btn open\");\n }\n }, {\n key: \"onPageChange\",\n value: function onPageChange(current, pageSize) {\n this.setState({ currentPage: current });\n _lodash2.default.defer(this.refreshData);\n }\n }, {\n key: \"onPageSizeChange\",\n value: function onPageSizeChange(current, pageSize) {\n this.setState({ pageSize: pageSize });\n _lodash2.default.defer(this.refreshData);\n }\n }, {\n key: \"render\",\n value: function render() {\n var _state2 = this.state,\n allQueries = _state2.allQueries,\n currentPage = _state2.currentPage,\n total = _state2.total,\n stateFilters = _state2.stateFilters,\n pageSize = _state2.pageSize;\n // let queryList = ;\n\n var queryList = void 0;\n if (allQueries == null || total === 0) {\n var label = _react2.default.createElement(\n \"div\",\n { className: \"loader\" },\n \"Loading...\"\n );\n if (allQueries == null || total === 0) {\n label = \"No queries\";\n }\n queryList = _react2.default.createElement(\n \"div\",\n { className: \"row error-message\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12\" },\n _react2.default.createElement(\n \"h4\",\n null,\n label\n )\n )\n );\n } else {\n queryList = _react2.default.createElement(DisplayedQueriesList, { queries: allQueries });\n }\n\n return _react2.default.createElement(\n \"div\",\n null,\n _react2.default.createElement(\n \"div\",\n { className: \"flex flex-row flex-initial header\" },\n _react2.default.createElement(_Header2.default, null)\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"flex flex-row content\" },\n _react2.default.createElement(_NavigationMenu2.default, { active: \"queryhistory\" }),\n _react2.default.createElement(\n \"div\",\n { className: \"container\" },\n _react2.default.createElement(\n \"div\",\n { className: \"row toolbar-row\" },\n _react2.default.createElement(\n \"div\",\n { className: \"col-xs-12 toolbar-col query-history\" },\n _react2.default.createElement(\n \"div\",\n { className: \"input-group input-group-sm\" },\n _react2.default.createElement(\"input\", { type: \"text\", className: \"form-control form-control-small search-bar\", placeholder: \"User\", name: \"User\",\n onChange: this.handleSearchStringChange, value: this.state.searchStringUser }),\n _react2.default.createElement(\"input\", { type: \"text\", id: \"date-picker\", className: \"form-control form-control-small search-bar\", placeholder: \"Date\", name: \"Date\",\n onFocus: this.renderDateRangePicker, onChange: this.handleSearchStringChange,\n value: this.state.searchStringDate }),\n _react2.default.createElement(\"input\", { type: \"text\", className: \"form-control form-control-small search-bar\", placeholder: \"Sql\", name: \"Sql\",\n onChange: this.handleSearchStringChange, value: this.state.searchStringSql }),\n _react2.default.createElement(\"input\", { type: \"text\", className: \"form-control form-control-small search-bar\", placeholder: \"QueryId\", name: \"QueryId\",\n onChange: this.handleSearchStringChange, value: this.state.searchStringQueryId }),\n _react2.default.createElement(\"input\", { type: \"text\", className: \"form-control form-control-small search-bar\", placeholder: \"ResourceGroup\", name: \"ResourceGroup\",\n onChange: this.handleSearchStringChange, value: this.state.searchStringResourceGroup }),\n _react2.default.createElement(\n \"div\",\n { className: \"input-group-btn\", id: \"query-history-filter\" },\n _react2.default.createElement(\n \"button\",\n { type: \"button\", className: \"btn btn-default dropdown-toggle\", \"data-toggle\": \"dropdown\", \"aria-haspopup\": \"true\", \"aria-expanded\": \"false\" },\n \"State \",\n _react2.default.createElement(\"span\", { className: \"caret\" })\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"dropdown-menu dropdown-menu-left\" },\n this.renderFilterButton(SELECT_ALL, \"Select All\"),\n this.renderFilterButton(FILTER_TYPE.FINISHED, \"Finished\"),\n this.renderFilterButton(FILTER_TYPE.FAILED, \"Failed\")\n )\n ),\n \"\\xA0\",\n stateFilters.indexOf(FILTER_TYPE.FAILED) > -1 && _react2.default.createElement(\n _react.Fragment,\n null,\n _react2.default.createElement(\n \"div\",\n { className: \"input-group-btn\", id: \"query-history-error\" },\n _react2.default.createElement(\n \"button\",\n { type: \"button\", className: \"btn btn-default dropdown-toggle\", \"data-toggle\": \"dropdown\", \"aria-haspopup\": \"true\", \"aria-expanded\": \"false\" },\n \"Failed \",\n _react2.default.createElement(\"span\", { className: \"caret\" })\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"dropdown-menu\" },\n this.renderErrorTypeListItem(SELECT_ALL, \"Select All\"),\n this.renderErrorTypeListItem(ERROR_TYPE.INTERNAL_ERROR, \"Internal Error\"),\n this.renderErrorTypeListItem(ERROR_TYPE.EXTERNAL, \"External Error\"),\n this.renderErrorTypeListItem(ERROR_TYPE.INSUFFICIENT_RESOURCES, \"Resources Error\"),\n this.renderErrorTypeListItem(ERROR_TYPE.USER_ERROR, \"User Error\")\n )\n ),\n \"\\xA0\"\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"input-group-btn\", id: \"query-history-sort\" },\n _react2.default.createElement(\n \"button\",\n { type: \"button\", className: \"btn btn-default dropdown-toggle\", \"data-toggle\": \"dropdown\", \"aria-haspopup\": \"true\", \"aria-expanded\": \"false\" },\n \"Sort \",\n _react2.default.createElement(\"span\", { className: \"caret\" })\n ),\n _react2.default.createElement(\n \"ul\",\n { className: \"dropdown-menu dropdown-menu-right\" },\n this.renderSortListItem(SORT_TYPE.CREATED, \"Creation Time\"),\n this.renderSortListItem(SORT_TYPE.ELAPSED, \"Elapsed Time\"),\n this.renderSortListItem(SORT_TYPE.CPU, \"CPU Time\"),\n this.renderSortListItem(SORT_TYPE.EXECUTION, \"Execution Time\"),\n this.renderSortListItem(SORT_TYPE.CURRENT_MEMORY, \"Current Memory\"),\n this.renderSortListItem(SORT_TYPE.CUMULATIVE_MEMORY, \"Cumulative User Memory\")\n )\n )\n )\n )\n ),\n queryList,\n _react2.default.createElement(_rcPagination2.default, {\n defaultCurrent: 1,\n current: currentPage,\n total: total,\n defaultPageSize: 10,\n pageSize: pageSize,\n onChange: this.onPageChange,\n showTotal: function showTotal(total) {\n return \"Total \" + total + \" queries\";\n },\n style: { marginTop: 10 },\n locale: _en_US2.default,\n showSizeChanger: true,\n onShowSizeChange: this.onPageSizeChange,\n selectComponentClass: _rcSelect2.default\n })\n )\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"flex flex-row flex-initial statusFooter\" },\n _react2.default.createElement(_StatusFooter2.default, null)\n ),\n _react2.default.createElement(\n \"div\",\n { className: \"flex flex-row flex-initial footer\" },\n _react2.default.createElement(_Footer2.default, null)\n )\n );\n }\n }]);\n\n return QueryList;\n}(_react2.default.Component);\n\n//# sourceURL=webpack:///./components/QueryList.jsx?");
/***/ }),
diff --git a/presto-main/src/main/resources/webapp/src/components/QueryList.jsx b/presto-main/src/main/resources/webapp/src/components/QueryList.jsx
index 74760c841..5793f91be 100644
--- a/presto-main/src/main/resources/webapp/src/components/QueryList.jsx
+++ b/presto-main/src/main/resources/webapp/src/components/QueryList.jsx
@@ -283,13 +283,6 @@ class DisplayedQueriesList extends React.Component {
const SELECT_ALL = "all";
const FILTER_TYPE = {
- QUEUED: "queued",
- WAITING_FOR_RESOURCES: "waiting_for_resources",
- DISPATCHING: "dispatching",
- PLANNING: "planning",
- STARTING: "starting",
- RUNNING: "running",
- FINISHING: "finishing",
FINISHED: "finished",
FAILED: "failed",
};
@@ -323,13 +316,6 @@ export class QueryList extends React.Component {
currentSortType: SORT_TYPE.CREATED,
currentSortOrder: SORT_ORDER.DESCENDING,
stateFilters: [
- FILTER_TYPE.QUEUED,
- FILTER_TYPE.WAITING_FOR_RESOURCES,
- FILTER_TYPE.DISPATCHING,
- FILTER_TYPE.PLANNING,
- FILTER_TYPE.STARTING,
- FILTER_TYPE.RUNNING,
- FILTER_TYPE.FINISHING,
FILTER_TYPE.FINISHED,
FILTER_TYPE.FAILED],
errorTypeFilters: [
@@ -707,13 +693,6 @@ export class QueryList extends React.Component {
{this.renderFilterButton(SELECT_ALL, "Select All")}
- {this.renderFilterButton(FILTER_TYPE.QUEUED, "Queued")}
- {this.renderFilterButton(FILTER_TYPE.WAITING_FOR_RESOURCES, "Waiting For Resources")}
- {this.renderFilterButton(FILTER_TYPE.DISPATCHING, "Dispatching")}
- {this.renderFilterButton(FILTER_TYPE.PLANNING, "Planning")}
- {this.renderFilterButton(FILTER_TYPE.STARTING, "Starting")}
- {this.renderFilterButton(FILTER_TYPE.RUNNING, "Running")}
- {this.renderFilterButton(FILTER_TYPE.FINISHING, "Finishing")}
{this.renderFilterButton(FILTER_TYPE.FINISHED, "Finished")}
{this.renderFilterButton(FILTER_TYPE.FAILED, "Failed")}