Repository: couchdb-fauxton Updated Branches: refs/heads/master 91fc5e367 -> b65b98574
Convert Design Doc Metadata page to React This converts the Design Doc Metadata page to use React.js instead of Backbone.js Project: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/commit/b65b9857 Tree: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/tree/b65b9857 Diff: http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/diff/b65b9857 Branch: refs/heads/master Commit: b65b98574713fb92a97ae5c9042249ee8bc88643 Parents: 91fc5e3 Author: Garren Smith <[email protected]> Authored: Wed May 20 12:44:02 2015 +0200 Committer: Garren Smith <[email protected]> Committed: Mon May 25 11:29:51 2015 +0200 ---------------------------------------------------------------------- app/addons/documents/designdocinfo/actions.js | 60 +++++++++ .../documents/designdocinfo/actiontypes.js | 19 +++ .../designdocinfo/components.react.jsx | 124 +++++++++++++++++++ app/addons/documents/designdocinfo/stores.js | 87 +++++++++++++ .../designdocinfo/tests/actionsSpec.js | 51 ++++++++ app/addons/documents/routes-documents.js | 14 ++- app/addons/documents/templates/ddoc_info.html | 61 --------- .../tests/nightwatch/designDocInfoPresent.js | 26 ++++ app/addons/documents/views.js | 46 ------- 9 files changed, 376 insertions(+), 112 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/designdocinfo/actions.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/designdocinfo/actions.js b/app/addons/documents/designdocinfo/actions.js new file mode 100644 index 0000000..9e28019 --- /dev/null +++ b/app/addons/documents/designdocinfo/actions.js @@ -0,0 +1,60 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +define([ + 'app', + 'api', + 'addons/documents/designdocinfo/actiontypes', + 'addons/documents/designdocinfo/stores' +], +function (app, FauxtonAPI, ActionTypes, Stores) { + var store = Stores.designDocInfoStore; + + return { + fetchDesignDocInfo: function (options) { + var designDocInfo = options.designDocInfo; + + FauxtonAPI.dispatch({ + type: ActionTypes.DESIGN_FETCHING + }); + + designDocInfo.fetch().then(function () { + this.monitorDesignDoc({ + ddocName: options.ddocName, + designDocInfo: designDocInfo + }); + + }.bind(this)); + + }, + + monitorDesignDoc: function (options) { + options.intervalId = window.setInterval(_.bind(this.refresh, this), 5000); + FauxtonAPI.dispatch({ + type: ActionTypes.DESIGN_DOC_MONITOR, + options: options + }); + }, + + refresh: function () { + store.getDesignDocInfo().fetch().then(function () { + FauxtonAPI.dispatch({ + type: ActionTypes.DESIGN_REFRESH + }); + }); + }, + + stopRefresh: function () { + window.clearInterval(store.getIntervalId()); + } + }; +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/designdocinfo/actiontypes.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/designdocinfo/actiontypes.js b/app/addons/documents/designdocinfo/actiontypes.js new file mode 100644 index 0000000..d93a8fa --- /dev/null +++ b/app/addons/documents/designdocinfo/actiontypes.js @@ -0,0 +1,19 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +define([], function () { + return { + DESIGN_DOC_MONITOR: 'DESIGN_DOC_MONITOR', + DESIGN_FETCHING: 'DESIGN_FETCHING', + DESIGN_REFRESH: 'DESIGN_REFRESH' + }; +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/designdocinfo/components.react.jsx ---------------------------------------------------------------------- diff --git a/app/addons/documents/designdocinfo/components.react.jsx b/app/addons/documents/designdocinfo/components.react.jsx new file mode 100644 index 0000000..8b35f7a --- /dev/null +++ b/app/addons/documents/designdocinfo/components.react.jsx @@ -0,0 +1,124 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +define([ + 'app', + 'api', + 'react', + 'addons/documents/designdocinfo/stores', + 'addons/documents/designdocinfo/actions', + 'addons/components/react-components.react' +], + +function (app, FauxtonAPI, React, Stores, Actions, ReactComponents) { + var designDocInfoStore = Stores.designDocInfoStore; + var LoadLines = ReactComponents.LoadLines; + + + var DesignDocInfo = React.createClass({ + getStoreState: function () { + return { + viewIndex: designDocInfoStore.getViewIndex(), + isLoading: designDocInfoStore.isLoading(), + ddocName: designDocInfoStore.getDdocName() + }; + }, + + getInitialState: function () { + return this.getStoreState(); + }, + + componentDidMount: function () { + designDocInfoStore.on('change', this.onChange, this); + }, + + componentWillUnmount: function () { + designDocInfoStore.off('change', this.onChange); + Actions.stopRefresh(); + }, + + onChange: function () { + this.setState(this.getStoreState()); + }, + + render: function () { + var formatSize = app.helpers.formatSize; + var getDocUrl = app.helpers.getDocUrl; + var viewIndex = this.state.viewIndex; + + if (this.state.isLoading) { + return <LoadLines />; + } + + return ( + <div className="metadata-page"> + <header className="page-header"> + <h2>Design Document Metadata: _design/{this.state.ddocName} </h2> + <p className="help">Information about the specified design document, including the index, + index size and current status of the design document and associated index information. + <a href={getDocUrl('DESIGN_DOC_METADATA')} className="help-link" target="_blank" data-bypass="true"> + <i className="icon-question-sign" /> + </a> + </p> + </header> + <div className="row-fluid"> + <div className="span6"> + <header> + <h3>Status</h3> + </header> + <dl> + <dt>Updater</dt> + <dd>{viewIndex.updater_running}</dd> + <dt>Compact</dt> + <dd>{viewIndex.compact_running }</dd> + <dt>Waiting Commit</dt> + <dd>{viewIndex.waiting_commit }</dd> + <dt>Waiting Clients</dt> + <dd>{viewIndex.waiting_clients }</dd> + <dt>Update Sequence</dt> + <dd>{viewIndex.update_seq }</dd> + <dt>Purge Sequence</dt> + <dd>{viewIndex.purge_seq }</dd> + </dl> + </div> + <div className="span6"> + <header> + <h3>Information</h3> + </header> + <dl> + <dt>Language</dt> + <dd>{viewIndex.language }</dd> + <dt>Signature</dt> + <dd>{viewIndex.signature }</dd> + </dl> + <header> + <h3>Storage</h3> + </header> + <dl> + <dt>Data Size</dt> + <dd>{formatSize(viewIndex.data_size) }</dd> + <dt>Disk Size</dt> + <dd>{formatSize(viewIndex.disk_size) }</dd> + </dl> + </div> + </div> + </div> + ); + } + }); + + + + return { + DesignDocInfo: DesignDocInfo + }; +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/designdocinfo/stores.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/designdocinfo/stores.js b/app/addons/documents/designdocinfo/stores.js new file mode 100644 index 0000000..36d1269 --- /dev/null +++ b/app/addons/documents/designdocinfo/stores.js @@ -0,0 +1,87 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +define([ + 'api', + 'addons/documents/designdocinfo/actiontypes' +], + +function (FauxtonAPI, ActionTypes) { + var Stores = {}; + + Stores.DesignDocInfoStore = FauxtonAPI.Store.extend({ + + initialize: function () { + this._isLoading = true; + }, + + isLoading: function () { + return this._isLoading; + }, + + getDdocName: function () { + return this._ddocName; + }, + + getDesignDocInfo: function () { + return this._designDocInfo; + }, + + monitorDesignDoc: function (options) { + this._isLoading = false; + this._designDocInfo = options.designDocInfo; + this._ddocName = options.ddocName; + this._intervalId = options.intervalId; + }, + + getIntervalId: function () { + return this._intervalId; + }, + + getViewIndex: function () { + if (this._isLoading) { + return {}; + } + + return this._designDocInfo.get('view_index'); + }, + + dispatch: function (action) { + switch (action.type) { + case ActionTypes.DESIGN_FETCHING: + this._isLoading = true; + this.triggerChange(); + break; + + case ActionTypes.DESIGN_DOC_MONITOR: + this.monitorDesignDoc(action.options); + this.triggerChange(); + break; + + case ActionTypes.DESIGN_DOC_REFRESH: + this.triggerChange(); + break; + + default: + return; + // do nothing + } + } + + }); + + Stores.designDocInfoStore = new Stores.DesignDocInfoStore(); + + Stores.designDocInfoStore.dispatchToken = FauxtonAPI.dispatcher.register(Stores.designDocInfoStore.dispatch); + + return Stores; +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/designdocinfo/tests/actionsSpec.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/designdocinfo/tests/actionsSpec.js b/app/addons/documents/designdocinfo/tests/actionsSpec.js new file mode 100644 index 0000000..b9ee254 --- /dev/null +++ b/app/addons/documents/designdocinfo/tests/actionsSpec.js @@ -0,0 +1,51 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +define([ + 'api', + 'addons/documents/designdocinfo/actions', + 'testUtils' +], function (FauxtonAPI, Actions, testUtils) { + var assert = testUtils.assert; + var restore = testUtils.restore; + + describe('DesignDocInfo Actions', function () { + + describe('fetchDesignDocInfo', function () { + + afterEach(function () { + restore(Actions.monitorDesignDoc); + }); + + it('calls monitorDesignDoc on successful fetch', function () { + var promise = FauxtonAPI.Deferred(); + promise.resolve(); + var fakeDesignDocInfo = { + fetch: function () { + return promise; + } + }; + + var spy = sinon.spy(Actions, 'monitorDesignDoc'); + + + Actions.fetchDesignDocInfo({ + ddocName: 'test-designdoc-info', + designDocInfo: fakeDesignDocInfo + }); + + assert.ok(spy.calledOnce); + }); + }); + + }); +}); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/routes-documents.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/routes-documents.js b/app/addons/documents/routes-documents.js index 82fcc35..3231c89 100644 --- a/app/addons/documents/routes-documents.js +++ b/app/addons/documents/routes-documents.js @@ -29,12 +29,15 @@ define([ 'addons/documents/index-results/index-results.components.react', 'addons/documents/pagination/pagination.react', 'addons/documents/header/header.react', - 'addons/documents/header/header.actions' + 'addons/documents/header/header.actions', + 'addons/documents/designdocinfo/actions', + 'addons/documents/designdocinfo/components.react' ], function (app, FauxtonAPI, BaseRoute, Documents, Changes, ChangesActions, DocEditor, Databases, Resources, Components, PaginationStores, IndexResultsActions, - IndexResultsComponents, ReactPagination, ReactHeader, ReactActions) { + IndexResultsComponents, ReactPagination, ReactHeader, ReactActions, + DesignDocInfoActions, DesignDocInfoComponents) { var DocumentsRouteObject = BaseRoute.extend({ layout: "with_tabs_sidebar", @@ -88,10 +91,11 @@ function (app, FauxtonAPI, BaseRoute, Documents, Changes, ChangesActions, DocEdi this.removeComponent('#dashboard-upper-content'); var designDocInfo = new Resources.DdocInfo({ _id: "_design/" + ddoc }, { database: this.database }); - this.setView("#dashboard-lower-content", new Documents.Views.DdocInfo({ + DesignDocInfoActions.fetchDesignDocInfo({ ddocName: ddoc, - model: designDocInfo - })); + designDocInfo: designDocInfo + }); + this.setComponent("#dashboard-lower-content", DesignDocInfoComponents.DesignDocInfo); this.sidebar.setSelectedTab(app.utils.removeSpecialCharacters(ddoc) + "_metadata"); this.leftheader.updateCrumbs(this.getCrumbs(this.database)); http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/templates/ddoc_info.html ---------------------------------------------------------------------- diff --git a/app/addons/documents/templates/ddoc_info.html b/app/addons/documents/templates/ddoc_info.html deleted file mode 100644 index c06d5cf..0000000 --- a/app/addons/documents/templates/ddoc_info.html +++ /dev/null @@ -1,61 +0,0 @@ -<%/* -Licensed under the Apache License, Version 2.0 (the "License"); you may not -use this file except in compliance with the License. You may obtain a copy of -the License at - - http://www.apache.org/licenses/LICENSE-2.0 - -Unless required by applicable law or agreed to in writing, software -distributed under the License is distributed on an "AS IS" BASIS, WITHOUT -WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the -License for the specific language governing permissions and limitations under -the License. -*/%> -<div class="metadata-page"> - <header class="page-header"> - <h2>Design Document Metadata: _design/<%-Ddoc%> </h2> - <p class="help">Information about the specified design document, including the index, index size and current status of the design document and associated index information.<a href="<%- getDocUrl('DESIGN_DOC_METADATA') %>" class="help-link" target="_blank" data-bypass="true"><i class="icon-question-sign"></i></a></p> - </header> - <div class="row-fluid"> - <div class="span6"> - <header> - <h3>Status</h3> - </header> - - <dl> - <dt>Updater</dt> - <dd><%- view_index.updater_running %></dd> - <dt>Compact</dt> - <dd><%- view_index.compact_running %></dd> - <dt>Waiting Commit</dt> - <dd><%- view_index.waiting_commit %></dd> - <dt>Waiting Clients</dt> - <dd><%- view_index.waiting_clients %></dd> - <dt>Update Sequence</dt> - <dd><%- view_index.update_seq %></dd> - <dt>Purge Sequence</dt> - <dd><%- view_index.purge_seq %></dd> - </dl> - </div> - <div class="span6"> - <header> - <h3>Information</h3> - </header> - <dl> - <dt>Language</dt> - <dd><%- view_index.language %></dd> - <dt>Signature</dt> - <dd><%- view_index.signature %></dd> - </dl> - <header> - <h3>Storage</h3> - </header> - <dl> - <dt>Data Size</dt> - <dd><%- formatSize(view_index.data_size) %></dd> - <dt>Disk Size</dt> - <dd><%- formatSize(view_index.disk_size) %></dd> - </dl> - </div> - </div> -</div> http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/tests/nightwatch/designDocInfoPresent.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/tests/nightwatch/designDocInfoPresent.js b/app/addons/documents/tests/nightwatch/designDocInfoPresent.js new file mode 100644 index 0000000..2cc7930 --- /dev/null +++ b/app/addons/documents/tests/nightwatch/designDocInfoPresent.js @@ -0,0 +1,26 @@ +// Licensed under the Apache License, Version 2.0 (the "License"); you may not +// use this file except in compliance with the License. You may obtain a copy of +// the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT +// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the +// License for the specific language governing permissions and limitations under +// the License. + +module.exports = { + 'Design Doc Metadata present' : function (client) { + var waitTime = client.globals.maxWaitTime, + newDatabaseName = client.globals.testDatabaseName, + baseUrl = client.globals.test_settings.launch_url; + + client + .populateDatabase(newDatabaseName) + .loginToGUI() + .url(baseUrl + '/#/database/' + newDatabaseName + '/_design/testdesigndoc/_info') + .waitForElementVisible('.metadata-page', waitTime, false) + .end(); + } +}; http://git-wip-us.apache.org/repos/asf/couchdb-fauxton/blob/b65b9857/app/addons/documents/views.js ---------------------------------------------------------------------- diff --git a/app/addons/documents/views.js b/app/addons/documents/views.js index 6721e72..d0cdb5b 100644 --- a/app/addons/documents/views.js +++ b/app/addons/documents/views.js @@ -206,52 +206,6 @@ function (app, FauxtonAPI, Components, Documents, } }); - - - Views.DdocInfo = FauxtonAPI.View.extend({ - template: "addons/documents/templates/ddoc_info", - - initialize: function (options) { - this.ddocName = options.ddocName; - this.refreshTime = options.refreshTime || 5000; - this.listenTo(this.model, 'change', this.render); - }, - - establish: function () { - return this.model.fetch(); - }, - - afterRender: function () { - this.startRefreshInterval(); - }, - - serialize: function () { - return { - Ddoc: this.ddocName, - view_index: this.model.get('view_index') - }; - }, - - startRefreshInterval: function () { - var model = this.model; - - // Interval already set - if (this.intervalId) { this.stopRefreshInterval(); } - - this.intervalId = setInterval(function () { - model.fetch(); - }, this.refreshTime); - }, - - stopRefreshInterval: function () { - clearInterval(this.intervalId); - }, - - cleanup: function () { - this.stopRefreshInterval(); - } - }); - Documents.Views = Views; return Documents;
