From 9477e9e64502bcd33836e3ea8f7ae0bb3b53baec Mon Sep 17 00:00:00 2001 From: Stas Vilchik Date: Mon, 16 Nov 2015 15:46:23 +0100 Subject: [PATCH] SONAR-6972 improve loading UX of administration pages --- .../sonar-web/src/main/js/api/components.js | 19 +++++---- .../main/js/apps/global-permissions/main.js | 14 +++++-- .../global-permissions/permissions-list.js | 6 ++- .../src/main/js/apps/groups/header-view.js | 13 +++++++ .../src/main/js/apps/groups/list-view.js | 15 ++++++- .../apps/groups/templates/groups-header.hbs | 1 + .../js/apps/permission-templates/header.js | 8 ++++ .../main/js/apps/permission-templates/main.js | 7 ++-- .../permission-templates.js | 6 ++- .../main/js/apps/project-permissions/main.js | 39 ++++++++++++------- .../project-permissions/permissions-footer.js | 5 ++- .../apps/project-permissions/permissions.js | 6 ++- .../src/main/js/apps/projects/create-view.js | 31 +++++++-------- .../src/main/js/apps/projects/main.js | 22 +++++++---- .../src/main/js/apps/projects/projects.js | 4 +- .../src/main/js/apps/projects/search.js | 8 +++- .../src/main/js/apps/users/header-view.js | 13 +++++++ .../src/main/js/apps/users/list-view.js | 15 ++++++- .../js/apps/users/templates/users-header.hbs | 1 + .../main/js/components/shared/list-footer.js | 15 +++++-- .../sonar-web/src/main/js/helpers/request.js | 10 +++++ .../src/main/less/components/page.less | 6 +++ server/sonar-web/src/main/less/init/misc.less | 5 +++ 23 files changed, 204 insertions(+), 65 deletions(-) diff --git a/server/sonar-web/src/main/js/api/components.js b/server/sonar-web/src/main/js/api/components.js index a4eb949a2d7..e4f60f8110b 100644 --- a/server/sonar-web/src/main/js/api/components.js +++ b/server/sonar-web/src/main/js/api/components.js @@ -1,30 +1,29 @@ -import { getJSON } from '../helpers/request.js'; -import $ from 'jquery'; +import { getJSON, postJSON, post } from '../helpers/request.js'; + export function getComponents (data) { let url = baseUrl + '/api/components/search'; - return $.get(url, data); + return getJSON(url, data); } export function getProvisioned (data) { let url = baseUrl + '/api/projects/provisioned'; - return $.get(url, data); + return getJSON(url, data); } export function getGhosts (data) { let url = baseUrl + '/api/projects/ghosts'; - return $.get(url, data); + return getJSON(url, data); } export function deleteComponents (data) { let url = baseUrl + '/api/projects/bulk_delete'; - return $.post(url, data); + return post(url, data); } -export function createProject (options) { - options.url = baseUrl + '/api/projects/create'; - options.type = 'POST'; - return $.ajax(options); +export function createProject (data) { + let url = baseUrl + '/api/projects/create'; + return postJSON(url, data); } export function getChildren (componentKey, metrics = []) { diff --git a/server/sonar-web/src/main/js/apps/global-permissions/main.js b/server/sonar-web/src/main/js/apps/global-permissions/main.js index 11f6b032ebf..99efd69cbc2 100644 --- a/server/sonar-web/src/main/js/apps/global-permissions/main.js +++ b/server/sonar-web/src/main/js/apps/global-permissions/main.js @@ -4,7 +4,7 @@ import PermissionsList from './permissions-list'; export default React.createClass({ getInitialState() { - return { permissions: [] }; + return { ready: false, permissions: [] }; }, componentDidMount() { @@ -14,18 +14,26 @@ export default React.createClass({ requestPermissions() { const url = `${window.baseUrl}/api/permissions/search_global_permissions`; $.get(url).done(r => { - this.setState({ permissions: r.permissions }); + this.setState({ ready: true, permissions: r.permissions }); }); }, + renderSpinner () { + if (this.state.ready) { + return null; + } + return ; + }, + render() { return (

{window.t('global_permissions.page')}

+ {this.renderSpinner()}

{window.t('global_permissions.page.description')}

- +
); } diff --git a/server/sonar-web/src/main/js/apps/global-permissions/permissions-list.js b/server/sonar-web/src/main/js/apps/global-permissions/permissions-list.js index e019fbcbfec..c48769daab6 100644 --- a/server/sonar-web/src/main/js/apps/global-permissions/permissions-list.js +++ b/server/sonar-web/src/main/js/apps/global-permissions/permissions-list.js @@ -1,6 +1,9 @@ +import classNames from 'classnames'; import React from 'react'; + import Permission from './permission'; + export default React.createClass({ propTypes:{ permissions: React.PropTypes.arrayOf(React.PropTypes.object).isRequired @@ -13,6 +16,7 @@ export default React.createClass({ }, render() { - return ; + let className = classNames({ 'new-loading': !this.props.ready }); + return ; } }); diff --git a/server/sonar-web/src/main/js/apps/groups/header-view.js b/server/sonar-web/src/main/js/apps/groups/header-view.js index e4a118f2822..3ac152c4e98 100644 --- a/server/sonar-web/src/main/js/apps/groups/header-view.js +++ b/server/sonar-web/src/main/js/apps/groups/header-view.js @@ -5,10 +5,23 @@ import Template from './templates/groups-header.hbs'; export default Marionette.ItemView.extend({ template: Template, + collectionEvents: { + 'request': 'showSpinner', + 'sync': 'hideSpinner' + }, + events: { 'click #groups-create': 'onCreateClick' }, + showSpinner: function () { + this.$('.spinner').removeClass('hidden'); + }, + + hideSpinner: function () { + this.$('.spinner').addClass('hidden'); + }, + onCreateClick: function (e) { e.preventDefault(); this.createGroup(); diff --git a/server/sonar-web/src/main/js/apps/groups/list-view.js b/server/sonar-web/src/main/js/apps/groups/list-view.js index 699e9c76a85..22f699697e9 100644 --- a/server/sonar-web/src/main/js/apps/groups/list-view.js +++ b/server/sonar-web/src/main/js/apps/groups/list-view.js @@ -3,7 +3,20 @@ import ListItemView from './list-item-view'; export default Marionette.CollectionView.extend({ tagName: 'ul', - childView: ListItemView + childView: ListItemView, + + collectionEvents: { + 'request': 'showLoading', + 'sync': 'hideLoading' + }, + + showLoading: function () { + this.$el.addClass('new-loading'); + }, + + hideLoading: function () { + this.$el.removeClass('new-loading'); + } }); diff --git a/server/sonar-web/src/main/js/apps/groups/templates/groups-header.hbs b/server/sonar-web/src/main/js/apps/groups/templates/groups-header.hbs index 19ba74febf8..94cf4a1ec34 100644 --- a/server/sonar-web/src/main/js/apps/groups/templates/groups-header.hbs +++ b/server/sonar-web/src/main/js/apps/groups/templates/groups-header.hbs @@ -1,5 +1,6 @@

{{t 'user_groups.page'}}

+
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/header.js b/server/sonar-web/src/main/js/apps/permission-templates/header.js index 0325d4bf6cb..eb367d830bf 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/header.js +++ b/server/sonar-web/src/main/js/apps/permission-templates/header.js @@ -9,10 +9,18 @@ export default React.createClass({ }).render(); }, + renderSpinner () { + if (this.props.ready) { + return null; + } + return ; + }, + render() { return (

{window.t('permission_templates.page')}

+ {this.renderSpinner()}
diff --git a/server/sonar-web/src/main/js/apps/permission-templates/main.js b/server/sonar-web/src/main/js/apps/permission-templates/main.js index 1a0abfc8ead..5032bef5547 100644 --- a/server/sonar-web/src/main/js/apps/permission-templates/main.js +++ b/server/sonar-web/src/main/js/apps/permission-templates/main.js @@ -12,7 +12,7 @@ export default React.createClass({ }, getInitialState() { - return { permissions: [], permissionTemplates: [] }; + return { ready: false, permissions: [], permissionTemplates: [] }; }, componentDidMount() { @@ -53,6 +53,7 @@ export default React.createClass({ let permissionTemplates = this.mergePermissionsToTemplates(r.permissionTemplates, permissions); let permissionTemplatesWithDefaults = this.mergeDefaultsToTemplates(permissionTemplates, r.defaultTemplates); this.setState({ + ready: true, permissionTemplates: permissionTemplatesWithDefaults, permissions: permissions }); @@ -62,10 +63,10 @@ export default React.createClass({ render() { return (
-
+
; }); + let className = classNames('data zebra', { 'new-loading': !this.props.ready }); return ( - +
{permissionTemplates}
diff --git a/server/sonar-web/src/main/js/apps/project-permissions/main.js b/server/sonar-web/src/main/js/apps/project-permissions/main.js index 2c248f81344..6dbc6a4c837 100644 --- a/server/sonar-web/src/main/js/apps/project-permissions/main.js +++ b/server/sonar-web/src/main/js/apps/project-permissions/main.js @@ -14,7 +14,7 @@ export default React.createClass({ }, getInitialState() { - return { permissions: [], projects: [], total: 0 }; + return { ready: false, permissions: [], projects: [], total: 0 }; }, componentDidMount() { @@ -42,18 +42,21 @@ export default React.createClass({ if (this.props.componentId) { data = { projectId: this.props.componentId }; } - $.get(url, data).done(r => { - let permissions = this.sortPermissions(r.permissions); - let projects = this.mergePermissionsToProjects(r.projects, permissions); - if (page > 1) { - projects = [].concat(this.state.projects, projects); - } - this.setState({ - projects: projects, - permissions: permissions, - total: r.paging.total, - page: r.paging.pageIndex, - query: query + this.setState({ ready: false }, () => { + $.get(url, data).done(r => { + let permissions = this.sortPermissions(r.permissions); + let projects = this.mergePermissionsToProjects(r.projects, permissions); + if (page > 1) { + projects = [].concat(this.state.projects, projects); + } + this.setState({ + ready: true, + projects: projects, + permissions: permissions, + total: r.paging.total, + page: r.paging.pageIndex, + query: query + }); }); }); }, @@ -88,11 +91,19 @@ export default React.createClass({ ); }, + renderSpinner () { + if (this.state.ready) { + return null; + } + return ; + }, + render() { return (

{window.t('roles.page')}

+ {this.renderSpinner()}
{this.renderBulkApplyButton()}
@@ -103,12 +114,14 @@ export default React.createClass({ search={this.search}/> diff --git a/server/sonar-web/src/main/js/apps/project-permissions/permissions-footer.js b/server/sonar-web/src/main/js/apps/project-permissions/permissions-footer.js index cab1354e3ff..ad03541cbd6 100644 --- a/server/sonar-web/src/main/js/apps/project-permissions/permissions-footer.js +++ b/server/sonar-web/src/main/js/apps/project-permissions/permissions-footer.js @@ -1,5 +1,7 @@ +import classNames from 'classnames'; import React from 'react'; + export default React.createClass({ propTypes:{ count: React.PropTypes.number.isRequired, @@ -13,8 +15,9 @@ export default React.createClass({ } let hasMore = this.props.total > this.props.count; let loadMoreLink = show more; + let className = classNames('spacer-top note text-center', { 'new-loading': !this.props.ready }); return ( -