LENS-1258: len-ui changes for session list page.
Project: http://git-wip-us.apache.org/repos/asf/lens/repo Commit: http://git-wip-us.apache.org/repos/asf/lens/commit/37136a57 Tree: http://git-wip-us.apache.org/repos/asf/lens/tree/37136a57 Diff: http://git-wip-us.apache.org/repos/asf/lens/diff/37136a57 Branch: refs/heads/master Commit: 37136a5771e05c7e7354c9b3d60131f4c6820c00 Parents: b95e915 Author: Lavkesh Lahngir <[email protected]> Authored: Tue Aug 9 17:51:10 2016 +0530 Committer: Rajat Khandelwal <[email protected]> Committed: Tue Aug 9 17:51:10 2016 +0530 ---------------------------------------------------------------------- lens-ui/app/actions/SessionAction.js | 26 ++++++ lens-ui/app/adapters/SessionAdapter.js | 15 ++++ lens-ui/app/app.js | 2 + lens-ui/app/components/SessionListComponent.js | 89 +++++++++++++++++++++ lens-ui/app/constants/SessionConstants.js | 8 ++ lens-ui/app/stores/SessionStore.js | 42 ++++++++++ lens-ui/app/styles/less/globals.less | 1 + lens-ui/package.json | 3 +- 8 files changed, 185 insertions(+), 1 deletion(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/lens/blob/37136a57/lens-ui/app/actions/SessionAction.js ---------------------------------------------------------------------- diff --git a/lens-ui/app/actions/SessionAction.js b/lens-ui/app/actions/SessionAction.js new file mode 100644 index 0000000..c3d78f9 --- /dev/null +++ b/lens-ui/app/actions/SessionAction.js @@ -0,0 +1,26 @@ +import AppDispatcher from "../dispatcher/AppDispatcher"; +import SessionConstants from "../constants/SessionConstants"; +import SessionAdapter from "../adapters/SessionAdapter"; + +let SessionActions = { + getSessions() { + SessionAdapter.getSessions() + .then(function (response) { + AppDispatcher.dispatch({ + actionType: SessionConstants.RECEIVE_SESSIONS, + payload: { sessions : response } + }); + }, function (error) { + // propagating the error message + AppDispatcher.dispatch({ + actionType: SessionConstants.RECEIVE_SESSIONS_FAILED, + payload: { + responseCode: error.status, + responseMessage: error.statusText + } + }); + }); + } +}; + +export default SessionActions; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/lens/blob/37136a57/lens-ui/app/adapters/SessionAdapter.js ---------------------------------------------------------------------- diff --git a/lens-ui/app/adapters/SessionAdapter.js b/lens-ui/app/adapters/SessionAdapter.js new file mode 100644 index 0000000..8e4fe74 --- /dev/null +++ b/lens-ui/app/adapters/SessionAdapter.js @@ -0,0 +1,15 @@ +import BaseAdapter from "./BaseAdapter"; +import Config from 'config.json'; + +let baseUrl = Config.baseURL; +let urls = { + sessionUrl: 'session/sessions' +}; +let SessionAdpater = { + getSessions() { + let handlesUrl = baseUrl + urls.sessionUrl; + return BaseAdapter.get(handlesUrl); + } +}; + +export default SessionAdpater; \ No newline at end of file http://git-wip-us.apache.org/repos/asf/lens/blob/37136a57/lens-ui/app/app.js ---------------------------------------------------------------------- diff --git a/lens-ui/app/app.js b/lens-ui/app/app.js index 18237d2..bc496fa 100644 --- a/lens-ui/app/app.js +++ b/lens-ui/app/app.js @@ -35,6 +35,7 @@ import CubeSchema from './components/CubeSchemaComponent'; import QueryDetailResult from './components/QueryDetailResultComponent'; import TableSchema from './components/TableSchemaComponent'; import SavedQueries from './components/SavedQueriesComponent'; +import SessionList from './components/SessionListComponent' let routes = ( <Route name='app' path='/' handler={App} > @@ -50,6 +51,7 @@ let routes = ( <Route name='tableschema' path='table/:tableName' handler={TableSchema}/> </Route> + <Route name='sessions' path='sessions' handler={SessionList}/> <Route name='about' handler={About} /> <DefaultRoute handler={AdhocQuery} /> </Route> http://git-wip-us.apache.org/repos/asf/lens/blob/37136a57/lens-ui/app/components/SessionListComponent.js ---------------------------------------------------------------------- diff --git a/lens-ui/app/components/SessionListComponent.js b/lens-ui/app/components/SessionListComponent.js new file mode 100644 index 0000000..a71281c --- /dev/null +++ b/lens-ui/app/components/SessionListComponent.js @@ -0,0 +1,89 @@ +import React from "react"; +import Session from "../stores/SessionStore"; +import SessionAction from "../actions/SessionAction"; +import {BootstrapTable, TableHeaderColumn} from "react-bootstrap-table"; + +class SessionList extends React.Component { + constructor(props) { + super(props); + this.state = {sessionList: [], sessionReceived: false}; + this._onChange = this._onChange.bind(this); + SessionAction.getSessions(); + } + + componentDidMount() { + Session.addChangeListener(this._onChange); + } + + componentWillUnmount() { + Session.removeChangeListener(this._onChange); + } + + componentWillReceiveProps(props) { + } + + _onChange() { + var sessions = Session.getSessions(); + var mod = sessions.map(function(l){ + var acq = l['activeQueries']; + if (acq == undefined){ + l['queries'] = 0 + } else{ + l['queries'] = acq.length; + } + l['creationTime'] = (new Date(l['creationTime'])).toString(); + l['lastAccessTime'] = (new Date(l['lastAccessTime'])).toString(); + }); + this.setState({sessionList: Session.getSessions(), sessionReceived: true}); + } + + renderShowsTotal(start, to, total) { + return ( + <p style={ { color: 'blue' } }> + From { start } to { to }, totals is { total } (its a customize text) + </p> + ); + } + render() { + var options = { + page: 1, // which page you want to show as default + sizePerPageList: [50, 100, 150], // you can change the dropdown list for size per page + sizePerPage: 50, // which size per page you want to locate as default + pageStartIndex: 0, // where to start counting the pages + sortOrder : 'desc', + sortName : null, + prePage: 'Prev', // Previous page button text + nextPage: 'Next', // Next page button text + firstPage: 'First', // First page button text + lastPage: 'Last', // Last page button text + paginationShowsTotal: this.renderShowsTotal // Accept bool or function + // hideSizePerPage: true //> You can hide the dropdown for sizePerPage + }; + var selectRowProp = { + mode: "checkbox", //checkbox for multi select, radio for single select. + clickToSelect: true, //click row will trigger a selection on that row. + bgColor: "rgb(238, 193, 213)" //selected row background color + }; + return ( + <section> + <div className='container-fluid'> + <BootstrapTable data={this.state.sessionList} pagination={true} striped={true} search={true} + columnFilter={true} + hover={true} + condensed={true} options={options}> + <TableHeaderColumn dataField="handle" isKey={true} dataAlign="center" + dataSort={true}>Session Handle</TableHeaderColumn> + <TableHeaderColumn dataField="userName" dataSort={true}>User Name</TableHeaderColumn> + <TableHeaderColumn dataField="queries" dataSort={true}>Number of Queries</TableHeaderColumn> + <TableHeaderColumn dataField="creationTime" + dataSort={true}>Creation Time</TableHeaderColumn> + <TableHeaderColumn dataField="lastAccessTime" + dataSort={true}>Last Access Time</TableHeaderColumn> + </BootstrapTable> + </div> + </section> + ); + } +} + +export default SessionList; http://git-wip-us.apache.org/repos/asf/lens/blob/37136a57/lens-ui/app/constants/SessionConstants.js ---------------------------------------------------------------------- diff --git a/lens-ui/app/constants/SessionConstants.js b/lens-ui/app/constants/SessionConstants.js new file mode 100644 index 0000000..3c31e5d --- /dev/null +++ b/lens-ui/app/constants/SessionConstants.js @@ -0,0 +1,8 @@ +import KeyMirror from 'keymirror'; + +const SessionConstants = KeyMirror({ + RECEIVE_SESSIONS: null, + RECEIVE_SESSIONS_FAILED :null +}); + +export default SessionConstants http://git-wip-us.apache.org/repos/asf/lens/blob/37136a57/lens-ui/app/stores/SessionStore.js ---------------------------------------------------------------------- diff --git a/lens-ui/app/stores/SessionStore.js b/lens-ui/app/stores/SessionStore.js new file mode 100644 index 0000000..3840720 --- /dev/null +++ b/lens-ui/app/stores/SessionStore.js @@ -0,0 +1,42 @@ +import assign from "object-assign"; +import SessionConstants from "../constants/SessionConstants"; +import AppDispatcher from "../dispatcher/AppDispatcher"; +import {EventEmitter} from "events"; + +let CHANGE_EVENT = 'change'; +var sessionList = []; + +let Sessions = assign({}, EventEmitter.prototype, { + getSessions() { + return sessionList; + }, + + emitChange (hash) { + this.emit(CHANGE_EVENT, hash); + }, + + addChangeListener (callback) { + this.on(CHANGE_EVENT, callback); + }, + + removeChangeListener (callback) { + this.removeListener(CHANGE_EVENT, callback); + } +}); + +function receiveSessions(payload) { + var list = payload.sessions; + sessionList = list.map(function(l) { + return l['userSessionInfo']; + }) +} +AppDispatcher.register((action) => { + switch (action.actionType) { + case SessionConstants.RECEIVE_SESSIONS: + receiveSessions(action.payload); + break; + } + Sessions.emitChange(); +}); + +export default Sessions; http://git-wip-us.apache.org/repos/asf/lens/blob/37136a57/lens-ui/app/styles/less/globals.less ---------------------------------------------------------------------- diff --git a/lens-ui/app/styles/less/globals.less b/lens-ui/app/styles/less/globals.less index 05cc30e..a00103f 100644 --- a/lens-ui/app/styles/less/globals.less +++ b/lens-ui/app/styles/less/globals.less @@ -20,3 +20,4 @@ // IMPORTS @import "~bootstrap/less/bootstrap.less"; +@import "~react-bootstrap-table/css/react-bootstrap-table.min.css"; http://git-wip-us.apache.org/repos/asf/lens/blob/37136a57/lens-ui/package.json ---------------------------------------------------------------------- diff --git a/lens-ui/package.json b/lens-ui/package.json index c90c91e..2cdf1df 100644 --- a/lens-ui/package.json +++ b/lens-ui/package.json @@ -34,7 +34,8 @@ "react-sidebar": "~1.1.0", "react-treeview": "^0.3.12", "react-widgets": "^2.8.0", - "serve-favicon": "~2.2.1" + "serve-favicon": "~2.2.1", + "react-bootstrap-table" : "0.9.17" }, "devDependencies": { "autoprefixer-loader": "^1.2.0",
