stop using jquery for ajax calls

server/sonar-web/src/main/js/api/metrics.ts

@@ -19,7 +19,16 @@
  */
 import { getJSON } from '../helpers/request';
 import { Metric } from '../app/types';
+import throwGlobalError from '../app/utils/throwGlobalError';
 
 export function getMetrics(): Promise<Metric[]> {
   return getJSON('/api/metrics/search', { ps: 9999 }).then(r => r.metrics);
 }
+
+export function getMetricDomains(): Promise<string[]> {
+  return getJSON('/api/metrics/domains').then(r => r.domains, throwGlobalError);
+}
+
+export function getMetricTypes(): Promise<string[]> {
+  return getJSON('/api/metrics/types').then(r => r.types, throwGlobalError);
+}

server/sonar-web/src/main/js/api/rules.ts

@@ -17,7 +17,7 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import { getJSON, RequestData } from '../helpers/request';
+import { post, getJSON, RequestData } from '../helpers/request';
 import throwGlobalError from '../app/utils/throwGlobalError';
 
 export interface GetRulesAppResponse {
@@ -29,10 +29,28 @@ export function getRulesApp(): Promise<GetRulesAppResponse> {
 }
 
 export function searchRules(data: RequestData) {
-  return getJSON('/api/rules/search', data);
+  return getJSON('/api/rules/search', data).catch(throwGlobalError);
 }
 
 export function takeFacet(response: any, property: string) {
   const facet = response.facets.find((facet: any) => facet.property === property);
   return facet ? facet.values : [];
 }
+
+export interface GetRuleDetailsParameters {
+  actives?: boolean;
+  key: string;
+  organization?: string;
+}
+
+export function getRuleDetails({ key }: GetRuleDetailsParameters): Promise<any> {
+  return getJSON('/api/rules/show', { key }).catch(throwGlobalError);
+}
+
+export function getRuleTags(parameters: { organization?: string }): Promise<string[]> {
+  return getJSON('/api/rules/tags', parameters).then(r => r.tags, throwGlobalError);
+}
+
+export function deleteRule({ key }: { key: string }) {
+  return post('/api/rules/delete', { key }).catch(throwGlobalError);
+}

server/sonar-web/src/main/js/api/tests.ts

@@ -0,0 +1,38 @@
+/*
+* SonarQube
+* Copyright (C) 2009-2016 SonarSource SA
+* mailto:contact AT sonarsource DOT com
+*
+* This program is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 3 of the License, or (at your option) any later version.
+*
+* This program is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public License
+* along with this program; if not, write to the Free Software Foundation,
+* Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+*/
+import throwGlobalError from '../app/utils/throwGlobalError';
+import { getJSON } from '../helpers/request';
+
+export interface GetTestsParameters {
+  branch?: string;
+  testFileKey: string;
+}
+
+export function getTests(parameters: GetTestsParameters) {
+  return getJSON('/api/tests/list', parameters).catch(throwGlobalError);
+}
+
+export interface GetCoveredFilesParameters {
+  testId: string;
+}
+
+export function getCoveredFiles(parameters: GetCoveredFilesParameters) {
+  return getJSON('/api/tests/covered_files', parameters).catch(throwGlobalError);
+}

server/sonar-web/src/main/js/apps/coding-rules/bulk-change-modal-view.js

@@ -17,10 +17,10 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import $ from 'jquery';
 import ModalFormView from '../../components/common/modal-form';
 import Template from './templates/coding-rules-bulk-change-modal.hbs';
 import { translateWithParameters } from '../../helpers/l10n';
+import { postJSON } from '../../helpers/request';
 
 export default ModalFormView.extend({
   template: Template,
@@ -75,12 +75,12 @@ export default ModalFormView.extend({
 
   sendRequests(url, options, profiles) {
     const that = this;
-    let looper = $.Deferred().resolve();
+    let looper = Promise.resolve();
     this.disableForm();
     profiles.forEach(profile => {
       const opts = { ...options, profile_key: profile };
-      looper = looper.then(() => {
-        return $.post(url, opts).done(r => {
+      looper = looper.then(() =>
+        postJSON(url, opts).then(r => {
           if (!that.isDestroyed) {
             if (r.failed) {
               that.showWarnMessage(profile, r.succeeded, r.failed);
@@ -88,18 +88,21 @@ export default ModalFormView.extend({
               that.showSuccessMessage(profile, r.succeeded);
             }
           }
-        });
-      });
-    });
-    looper.done(() => {
-      that.options.app.controller.fetchList();
-      if (!that.isDestroyed) {
-        that.$(that.ui.codingRulesSubmitBulkChange.selector).hide();
-        that.enableForm();
-        that.$('.modal-field').hide();
-        that.$('.js-modal-close').focus();
-      }
+        })
+      );
     });
+    looper.then(
+      () => {
+        that.options.app.controller.fetchList();
+        if (!that.isDestroyed) {
+          that.$(that.ui.codingRulesSubmitBulkChange.selector).hide();
+          that.enableForm();
+          that.$('.modal-field').hide();
+          that.$('.js-modal-close').focus();
+        }
+      },
+      () => {}
+    );
   },
 
   getAvailableQualityProfiles() {

server/sonar-web/src/main/js/apps/coding-rules/controller.js

@@ -17,12 +17,11 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import $ from 'jquery';
 import key from 'keymaster';
 import Controller from '../../components/navigator/controller';
 import Rule from './models/rule';
 import RuleDetailsView from './rule-details-view';
-import throwGlobalError from '../../app/utils/throwGlobalError';
+import { searchRules, getRuleDetails } from '../../api/rules';
 
 export default Controller.extend({
   pageSize: 200,
@@ -67,36 +66,34 @@ export default Controller.extend({
 
     this.hideDetails(firstPage);
 
-    const that = this;
-    const url = window.baseUrl + '/api/rules/search';
     const options = { ...this._searchParameters(), ...this.app.state.get('query') };
-    return $.get(url, options)
-      .done(r => {
-        const rules = that.app.list.parseRules(r);
+    return searchRules(options).then(
+      r => {
+        const rules = this.app.list.parseRules(r);
         if (firstPage) {
-          that.app.list.reset(rules);
+          this.app.list.reset(rules);
         } else {
-          that.app.list.add(rules);
+          this.app.list.add(rules);
         }
-        that.app.list.setIndex();
-        that.app.list.addExtraAttributes(that.app.repositories);
-        that.app.facets.reset(that._allFacets());
-        that.app.facets.add(r.facets, { merge: true });
-        that.enableFacets(that._enabledFacets());
-        that.app.state.set({
+        this.app.list.setIndex();
+        this.app.list.addExtraAttributes(this.app.repositories);
+        this.app.facets.reset(this._allFacets());
+        this.app.facets.add(r.facets, { merge: true });
+        this.enableFacets(this._enabledFacets());
+        this.app.state.set({
           page: r.p,
           pageSize: r.ps,
           total: r.total,
           maxResultsReached: r.p * r.ps >= r.total
         });
-        if (firstPage && that.isRulePermalink()) {
-          that.showDetails(that.app.list.first());
+        if (firstPage && this.isRulePermalink()) {
+          this.showDetails(this.app.list.first());
         }
-      })
-      .fail(error => {
+      },
+      () => {
         this.app.state.set({ maxResultsReached: true });
-        throwGlobalError(error);
-      });
+      }
+    );
   },
 
   isRulePermalink() {
@@ -105,10 +102,9 @@ export default Controller.extend({
   },
 
   requestFacet(id) {
-    const url = window.baseUrl + '/api/rules/search';
     const facet = this.app.facets.get(id);
     const options = { facets: id, ps: 1, ...this.app.state.get('query') };
-    return $.get(url, options).done(r => {
+    return searchRules(options).then(r => {
       const facetData = r.facets.find(facet => facet.property === id);
       if (facetData) {
         facet.set(facetData);
@@ -124,18 +120,11 @@ export default Controller.extend({
   },
 
   getRuleDetails(rule) {
-    const that = this;
-    const url = window.baseUrl + '/api/rules/show';
-    const options = {
-      key: rule.id,
-      actives: true
-    };
-    if (this.app.organization) {
-      options.organization = this.app.organization;
-    }
-    return $.get(url, options).done(data => {
-      rule.set(data.rule);
-      rule.addExtraAttributes(that.app.repositories);
+    const parameters = { key: rule.id, actives: true, organization: this.app.organization };
+    return getRuleDetails(parameters).then(r => {
+      rule.set(r.rule);
+      rule.addExtraAttributes(this.app.repositories);
+      return r;
     });
   },
 
@@ -143,18 +132,21 @@ export default Controller.extend({
     const that = this;
     const ruleModel = typeof rule === 'string' ? new Rule({ key: rule }) : rule;
     this.app.layout.workspaceDetailsRegion.reset();
-    this.getRuleDetails(ruleModel).done(data => {
-      key.setScope('details');
-      that.app.workspaceListView.unbindScrollEvents();
-      that.app.state.set({ rule: ruleModel });
-      that.app.workspaceDetailsView = new RuleDetailsView({
-        app: that.app,
-        model: ruleModel,
-        actives: data.actives
-      });
-      that.app.layout.showDetails();
-      that.app.layout.workspaceDetailsRegion.show(that.app.workspaceDetailsView);
-    });
+    this.getRuleDetails(ruleModel).then(
+      r => {
+        key.setScope('details');
+        that.app.workspaceListView.unbindScrollEvents();
+        that.app.state.set({ rule: ruleModel });
+        that.app.workspaceDetailsView = new RuleDetailsView({
+          app: that.app,
+          model: ruleModel,
+          actives: r.actives
+        });
+        that.app.layout.showDetails();
+        that.app.layout.workspaceDetailsRegion.show(that.app.workspaceDetailsView);
+      },
+      () => {}
+    );
   },
 
   showDetailsForSelected() {

server/sonar-web/src/main/js/apps/coding-rules/rule-details-view.js

@@ -17,7 +17,6 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import $ from 'jquery';
 import { union } from 'lodash';
 import Backbone from 'backbone';
 import Marionette from 'backbone.marionette';
@@ -32,6 +31,7 @@ import CustomRuleCreationView from './rule/custom-rule-creation-view';
 import DeleteRuleView from './rule/delete-rule-view';
 import IssuesView from './rule/rule-issues-view';
 import Template from './templates/coding-rules-rule-details.hbs';
+import { searchRules } from '../../api/rules';
 
 export default Marionette.LayoutView.extend({
   className: 'coding-rule-details',
@@ -107,15 +107,11 @@ export default Marionette.LayoutView.extend({
   },
 
   fetchCustomRules() {
-    const that = this;
-    const url = window.baseUrl + '/api/rules/search';
     const options = {
       template_key: this.model.get('key'),
       f: 'name,severity,params'
     };
-    return $.get(url, options).done(data => {
-      that.customRules.reset(data.rules);
-    });
+    searchRules(options).then(r => this.customRules.reset(r.rules), () => {});
   },
 
   getQualityProfiles() {

server/sonar-web/src/main/js/apps/coding-rules/rule/delete-rule-view.js

@@ -17,21 +17,21 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import $ from 'jquery';
 import ModalFormView from '../../../components/common/modal-form';
 import Template from '../templates/rule/coding-rules-delete-rule.hbs';
+import { deleteRule } from '../../../api/rules';
 
 export default ModalFormView.extend({
   template: Template,
 
   onFormSubmit() {
     ModalFormView.prototype.onFormSubmit.apply(this, arguments);
-
-    const url = window.baseUrl + '/api/rules/delete';
-    const options = { key: this.model.id };
-    $.post(url, options).done(() => {
-      this.destroy();
-      this.trigger('delete');
-    });
+    deleteRule({ key: this.model.id }).then(
+      () => {
+        this.destroy();
+        this.trigger('delete');
+      },
+      () => {}
+    );
   }
 });

server/sonar-web/src/main/js/apps/coding-rules/rule/rule-meta-view.js

@@ -22,6 +22,7 @@ import { difference, union } from 'lodash';
 import Marionette from 'backbone.marionette';
 import RuleFilterMixin from './rule-filter-mixin';
 import Template from '../templates/rule/coding-rules-rule-meta.hbs';
+import { getRuleTags } from '../../../api/rules';
 
 export default Marionette.ItemView.extend(RuleFilterMixin).extend({
   template: Template,
@@ -56,27 +57,21 @@ export default Marionette.ItemView.extend(RuleFilterMixin).extend({
     this.$('[data-toggle="tooltip"]').tooltip('destroy');
   },
 
-  requestTags() {
-    const url = window.baseUrl + '/api/rules/tags';
-    const data = this.options.app.organization
-      ? { organization: this.options.app.organization }
-      : undefined;
-    return $.get(url, data);
-  },
-
   changeTags() {
-    const that = this;
-    this.requestTags().done(r => {
-      that.ui.tagInput.select2({
-        tags: difference(difference(r.tags, that.model.get('tags')), that.model.get('sysTags')),
-        width: '300px'
-      });
+    getRuleTags({ organization: this.options.app.organization }).then(
+      tags => {
+        this.ui.tagInput.select2({
+          tags: difference(difference(tags, this.model.get('tags')), this.model.get('sysTags')),
+          width: '300px'
+        });
 
-      that.ui.tagsEdit.removeClass('hidden');
-      that.ui.tagsList.addClass('hidden');
-      that.tagsBuffer = that.ui.tagInput.select2('val');
-      that.ui.tagInput.select2('open');
-    });
+        this.ui.tagsEdit.removeClass('hidden');
+        this.ui.tagsList.addClass('hidden');
+        this.tagsBuffer = this.ui.tagInput.select2('val');
+        this.ui.tagInput.select2('open');
+      },
+      () => {}
+    );
   },
 
   cancelEdit() {

server/sonar-web/src/main/js/apps/metrics/init.js

@@ -17,13 +17,13 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
-import $ from 'jquery';
 import Marionette from 'backbone.marionette';
 import Layout from './layout';
 import Metrics from './metrics';
 import HeaderView from './header-view';
 import ListView from './list-view';
 import ListFooterView from './list-footer-view';
+import { getMetricDomains, getMetricTypes } from '../../api/metrics';
 
 const App = new Marionette.Application();
 const init = function(el) {
@@ -59,21 +59,15 @@ const init = function(el) {
   this.metrics.fetch();
 };
 
-App.requestDomains = function() {
-  return $.get(window.baseUrl + '/api/metrics/domains').done(r => {
-    App.domains = r.domains;
-  });
-};
-App.requestTypes = function() {
-  return $.get(window.baseUrl + '/api/metrics/types').done(r => {
-    App.types = r.types;
-  });
-};
-
 App.on('start', el => {
-  $.when(App.requestDomains(), App.requestTypes()).done(() => {
-    init.call(App, el);
-  });
+  Promise.all([getMetricDomains(), getMetricTypes()]).then(
+    ([domains, types]) => {
+      App.domains = domains;
+      App.types = types;
+      init.call(App, el);
+    },
+    () => {}
+  );
 });
 
 export default function(el) {

server/sonar-web/src/main/js/apps/overview/meta/MetaQualityProfiles.js

@@ -55,16 +55,19 @@ class MetaQualityProfiles extends React.PureComponent {
     const requests = this.props.profiles.map(profile =>
       this.loadDeprecatedRulesForProfile(profile.key)
     );
-    Promise.all(requests).then(responses => {
-      if (this.mounted) {
-        const deprecatedByKey = {};
-        responses.forEach((count, i) => {
-          const profileKey = this.props.profiles[i].key;
-          deprecatedByKey[profileKey] = count;
-        });
-        this.setState({ deprecatedByKey });
-      }
-    });
+    Promise.all(requests).then(
+      responses => {
+        if (this.mounted) {
+          const deprecatedByKey = {};
+          responses.forEach((count, i) => {
+            const profileKey = this.props.profiles[i].key;
+            deprecatedByKey[profileKey] = count;
+          });
+          this.setState({ deprecatedByKey });
+        }
+      },
+      () => {}
+    );
   }
 
   loadDeprecatedRulesForProfile(profileKey) {

server/sonar-web/src/main/js/apps/quality-profiles/details/ProfileRules.tsx

@@ -107,23 +107,26 @@ export default class ProfileRules extends React.PureComponent<Props, State> {
 
   loadRules() {
     this.setState({ loading: true });
-    Promise.all([
-      this.loadAllRules(),
-      this.loadActivatedRules(),
-      this.loadProfile()
-    ]).then(responses => {
-      if (this.mounted) {
-        const [allRules, activatedRules, showProfile] = responses;
-        this.setState({
-          activatedTotal: activatedRules.total,
-          allByType: keyBy<ByType>(takeFacet(allRules, 'types'), 'val'),
-          activatedByType: keyBy<ByType>(takeFacet(activatedRules, 'types'), 'val'),
-          compareToSonarWay: showProfile && showProfile.compareToSonarWay,
-          loading: false,
-          total: allRules.total
-        });
+    Promise.all([this.loadAllRules(), this.loadActivatedRules(), this.loadProfile()]).then(
+      responses => {
+        if (this.mounted) {
+          const [allRules, activatedRules, showProfile] = responses;
+          this.setState({
+            activatedTotal: activatedRules.total,
+            allByType: keyBy<ByType>(takeFacet(allRules, 'types'), 'val'),
+            activatedByType: keyBy<ByType>(takeFacet(activatedRules, 'types'), 'val'),
+            compareToSonarWay: showProfile && showProfile.compareToSonarWay,
+            loading: false,
+            total: allRules.total
+          });
+        }
+      },
+      () => {
+        if (this.mounted) {
+          this.setState({ loading: false });
+        }
       }
-    });
+    );
   }
 
   getRulesCountForType(type: string) {

server/sonar-web/src/main/js/apps/quality-profiles/home/EvolutionRules.tsx

@@ -82,14 +82,17 @@ export default class EvolutionRules extends React.PureComponent<Props, State> {
       f: 'name,langName,actives'
     };
 
-    searchRules(data).then((r: any) => {
-      if (this.mounted) {
-        this.setState({
-          latestRules: sortBy<Rule>(parseRules(r), 'langName'),
-          latestRulesTotal: r.total
-        });
-      }
-    });
+    searchRules(data).then(
+      (r: any) => {
+        if (this.mounted) {
+          this.setState({
+            latestRules: sortBy<Rule>(parseRules(r), 'langName'),
+            latestRulesTotal: r.total
+          });
+        }
+      },
+      () => {}
+    );
   }
 
   render() {

server/sonar-web/src/main/js/components/SourceViewer/views/measures-overlay.js

@@ -23,8 +23,10 @@ import { arc as d3Arc, pie as d3Pie } from 'd3-shape';
 import { groupBy, sortBy, toPairs } from 'lodash';
 import ModalView from '../../common/modals';
 import Template from './templates/source-viewer-measures.hbs';
+import { searchIssues } from '../../../api/issues';
 import { getMeasures } from '../../../api/measures';
 import { getMetrics } from '../../../api/metrics';
+import { getTests, getCoveredFiles } from '../../../api/tests';
 import { getLocalizedMetricName, getLocalizedMetricDomain } from '../../../helpers/l10n';
 import { formatMeasure } from '../../../helpers/measures';
 
@@ -174,17 +176,16 @@ export default ModalView.extend({
   },
 
   requestIssues() {
-    return new Promise(resolve => {
-      const url = window.baseUrl + '/api/issues/search';
-      const options = {
-        branch: this.options.branch,
-        componentKeys: this.options.component.key,
-        resolved: false,
-        ps: 1,
-        facets: 'types,severities,tags'
-      };
+    const options = {
+      branch: this.options.branch,
+      componentKeys: this.options.component.key,
+      resolved: false,
+      ps: 1,
+      facets: 'types,severities,tags'
+    };
 
-      $.get(url, options).done(data => {
+    return searchIssues(options).then(
+      data => {
         const typesFacet = data.facets.find(facet => facet.property === 'types').values;
         const typesOrder = ['BUG', 'VULNERABILITY', 'CODE_SMELL'];
         const sortedTypesFacet = sortBy(typesFacet, v => typesOrder.indexOf(v.val));
@@ -200,25 +201,21 @@ export default ModalView.extend({
         this.typesFacet = sortedTypesFacet;
         this.severitiesFacet = sortedSeveritiesFacet;
         this.issuesCount = data.total;
-
-        resolve();
-      });
-    });
+      },
+      () => {}
+    );
   },
 
   requestTests() {
-    return new Promise(resolve => {
-      const url = window.baseUrl + '/api/tests/list';
-      const options = { branch: this.options.branch, testFileKey: this.options.component.key };
-
-      $.get(url, options).done(data => {
+    return getTests({ branch: this.options.branch, testFileKey: this.options.component.key }).then(
+      data => {
         this.tests = data.tests;
         this.testSorting = 'status';
         this.testAsc = true;
         this.sortTests(test => `${this.testsOrder.indexOf(test.status)}_______${test.name}`);
-        resolve();
-      });
-    });
+      },
+      () => {}
+    );
   },
 
   sortTests(condition) {
@@ -261,16 +258,17 @@ export default ModalView.extend({
 
   showTest(e) {
     const testId = $(e.currentTarget).data('id');
-    const url = window.baseUrl + '/api/tests/covered_files';
-    const options = { testId };
     this.testsScroll = $(e.currentTarget)
       .scrollParent()
       .scrollTop();
-    return $.get(url, options).done(data => {
-      this.coveredFiles = data.files;
-      this.selectedTest = this.tests.find(test => test.id === testId);
-      this.render();
-    });
+    getCoveredFiles({ testId }).then(
+      data => {
+        this.coveredFiles = data.files;
+        this.selectedTest = this.tests.find(test => test.id === testId);
+        this.render();
+      },
+      () => {}
+    );
   },
 
   showAllMeasures() {

server/sonar-web/src/main/js/components/controls/SearchSelect.js

@@ -73,11 +73,18 @@ export default class SearchSelect extends React.PureComponent {
   }
 
   search = (query /*: string */) => {
-    this.props.onSearch(query).then(options => {
-      if (this.mounted) {
-        this.setState({ loading: false, options });
+    this.props.onSearch(query).then(
+      options => {
+        if (this.mounted) {
+          this.setState({ loading: false, options });
+        }
+      },
+      () => {
+        if (this.mounted) {
+          this.setState({ loading: false });
+        }
       }
-    });
+    );
   };
 
   handleBlur = () => {

server/sonar-web/src/main/js/components/navigator/controller.js

@@ -68,7 +68,7 @@ export default Marionette.Controller.extend({
     if (facet.has('values') || this.options.app.state.get('facetsFromServer').indexOf(id) === -1) {
       facet.set({ enabled: true });
     } else {
-      this.requestFacet(id).done(() => {
+      this.requestFacet(id).then(() => {
         facet.set({ enabled: true });
       });
     }
@@ -130,7 +130,7 @@ export default Marionette.Controller.extend({
       this.options.app.state.set({ selectedIndex: index });
     } else if (!this.options.app.state.get('maxResultsReached')) {
       const that = this;
-      this.fetchNextPage().done(() => {
+      this.fetchNextPage().then(() => {
         that.options.app.state.set({ selectedIndex: index });
       });
     } else {

server/sonar-web/src/main/js/components/navigator/workspace-list-view.js

@@ -95,7 +95,7 @@ export default Marionette.CompositeView.extend({
     if (!this.options.app.state.get('maxResultsReached')) {
       const that = this;
       this.unbindScrollEvents();
-      this.options.app.controller.fetchNextPage().done(() => {
+      this.options.app.controller.fetchNextPage().then(() => {
         that.bindScrollEvents();
       });
     }

server/sonar-web/src/main/js/components/workspace/main.js

@@ -24,6 +24,7 @@ import Items from './models/items';
 import ItemsView from './views/items-view';
 import ViewerView from './views/viewer-view';
 import RuleView from './views/rule-view';
+import { getRuleDetails } from '../../api/rules';
 
 let instance = null;
 const Workspace = function() {
@@ -117,23 +118,16 @@ Workspace.prototype = {
 
   showRule(model) {
     const that = this;
-    this.fetchRule(model)
-      .done(() => {
-        model.set({ exist: true });
+    getRuleDetails({ key: model.get('key') }).then(
+      r => {
+        model.set({ ...r.rule, exist: true });
         that.showViewer(RuleView, model);
-      })
-      .fail(() => {
+      },
+      () => {
         model.set({ exist: false });
         that.showViewer(RuleView, model);
-      });
-  },
-
-  fetchRule(model) {
-    const url = window.baseUrl + '/api/rules/show';
-    const options = { key: model.get('key') };
-    return $.get(url, options).done(r => {
-      model.set(r.rule);
-    });
+      }
+    );
   }
 };