SONAR-6697 update UI of the custom measures page

6 files changed, 83 insertions, 79 deletions

diff --git a/server/sonar-web/src/main/js/apps/custom-measures/app.js b/server/sonar-web/src/main/js/apps/custom-measures/app.js
deleted file mode 100644
index de6316fb658..00000000000
--- a/server/sonar-web/src/main/js/apps/custom-measures/app.js
+++ /dev/null
@@ -1,53 +0,0 @@
-define([
-  './layout',
-  './custom-measures',
-  './header-view',
-  './list-view',
-  './list-footer-view'
-], function (Layout, CustomMeasures, HeaderView, ListView, ListFooterView) {
-
-  var App = new Marionette.Application(),
-      init = function (options) {
-        // Layout
-        this.layout = new Layout({
-          el: options.el
-        });
-        this.layout.render();
-
-        // Collection
-        this.customMeasures = new CustomMeasures({
-          projectId: options.projectId
-        });
-
-        // Header View
-        this.headerView = new HeaderView({
-          collection: this.customMeasures,
-          projectId: options.projectId
-        });
-        this.layout.headerRegion.show(this.headerView);
-
-        // List View
-        this.listView = new ListView({
-          collection: this.customMeasures
-        });
-        this.layout.listRegion.show(this.listView);
-
-        // List Footer View
-        this.listFooterView = new ListFooterView({
-          collection: this.customMeasures
-        });
-        this.layout.listFooterRegion.show(this.listFooterView);
-
-        // Go!
-        this.customMeasures.fetch();
-      };
-
-  App.on('start', function (options) {
-    window.requestMessages().done(function () {
-      init.call(App, options);
-    });
-  });
-
-  return App;
-
-});
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/app.jsx b/server/sonar-web/src/main/js/apps/custom-measures/app.jsx
new file mode 100644
index 00000000000..1a0d965348e
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/custom-measures/app.jsx
@@ -0,0 +1,50 @@
+import Layout from './layout';
+import CustomMeasures from './custom-measures';
+import HeaderView from './header-view';
+import ListView from './list-view';
+import ListFooterView from './list-footer-view';
+
+var App = new Marionette.Application(),
+    init = function (options) {
+      // Layout
+      this.layout = new Layout({
+        el: options.el
+      });
+      this.layout.render();
+
+      // Collection
+      this.customMeasures = new CustomMeasures({
+        projectId: options.projectId
+      });
+
+      // Header View
+      this.headerView = new HeaderView({
+        collection: this.customMeasures,
+        projectId: options.projectId
+      });
+      this.layout.headerRegion.show(this.headerView);
+
+      // List View
+      this.listView = new ListView({
+        collection: this.customMeasures
+      });
+      this.layout.listRegion.show(this.listView);
+
+      // List Footer View
+      this.listFooterView = new ListFooterView({
+        collection: this.customMeasures
+      });
+      this.layout.listFooterRegion.show(this.listFooterView);
+
+      // Go!
+      this.customMeasures.fetch();
+    };
+
+App.on('start', function (options) {
+  window.requestMessages().done(function () {
+    init.call(App, options);
+  });
+});
+
+export default App;
+
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/list-item-view.js b/server/sonar-web/src/main/js/apps/custom-measures/list-item-view.js
index 97d9671eb17..32ba7e691d8 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/list-item-view.js
+++ b/server/sonar-web/src/main/js/apps/custom-measures/list-item-view.js
@@ -5,8 +5,7 @@ define([
 ], function (UpdateView, DeleteView) {
 
   return Marionette.ItemView.extend({
-    tagName: 'li',
-    className: 'panel panel-vertical',
+    tagName: 'tr',
     template: Templates['custom-measures-list-item'],
 
     events: {
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/list-view.js b/server/sonar-web/src/main/js/apps/custom-measures/list-view.js
index 24878864d30..986ad559e98 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/list-view.js
+++ b/server/sonar-web/src/main/js/apps/custom-measures/list-view.js
@@ -3,9 +3,10 @@ define([
   './templates'
 ], function (ListItemView) {
 
-  return Marionette.CollectionView.extend({
-    tagName: 'ul',
-    childView: ListItemView
+  return Marionette.CompositeView.extend({
+    template: Templates['custom-measures-list'],
+    childView: ListItemView,
+    childViewContainer: 'tbody'
   });
 
 });
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list-item.hbs b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list-item.hbs
index a6497d08fa0..9567fcfdfcf 100644
--- a/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list-item.hbs
+++ b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list-item.hbs
@@ -1,20 +1,6 @@
-<div class="pull-right big-spacer-left nowrap">
-  <a class="js-custom-measure-update icon-edit" title="Update" data-toggle="tooltip" href="#"></a>
-  <a class="js-custom-measure-delete icon-delete" title="Delete" data-toggle="tooltip" href="#"></a>
-</div>
-
-<div class="display-inline-block text-middle text-right width-10 big-spacer-right text-ellipsis"
-     title="{{formatMeasure value metric.type}}">
-  <span class="js-custom-measure-value emphasised-measure">
-    {{formatMeasure value metric.type}}
-  </span>
-</div>
-
-<div class="display-inline-block text-middle width-20">
+<td class="nowrap">
   <div>
-    <strong class="js-custom-measure-metric-name">
-      {{metric.name}}
-    </strong>
+    <span class="js-custom-measure-metric-name">{{metric.name}}</span>
     {{#if pending}}
       <span class="js-custom-measure-pending badge badge-warning spacer-left"
             title="{{t 'custom_measures.pending_tooltip'}}"
@@ -22,17 +8,26 @@
     {{/if}}
   </div>
   <span class="js-custom-measure-domain note">{{metric.domain}}</span>
-</div>
+</td>
 
-<div class="display-inline-block text-top width-20">
+<td class="nowrap">
+  <strong class="js-custom-measure-value">{{formatMeasure value metric.type}}</strong>
+</td>
+
+<td class="">
   <span class="js-custom-measure-description">{{description}}</span>
-</div>
+</td>
 
-<div class="display-inline-block text-top width-30">
+<td class="">
   {{#if updatedAt}}
     Updated on <span class="js-custom-measure-created-at">{{d updatedAt}}</span>
   {{else}}
     Created on <span class="js-custom-measure-created-at">{{d createdAt}}</span>
   {{/if}}
   by <span class="js-custom-measure-user">{{user.name}}</span>
-</div>
+</td>
+
+<td class="thin nowrap">
+  <a class="js-custom-measure-update icon-edit" title="Update" data-toggle="tooltip" href="#"></a>
+  <a class="js-custom-measure-delete icon-delete" title="Delete" data-toggle="tooltip" href="#"></a>
+</td>
diff --git a/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs
new file mode 100644
index 00000000000..c01d062cd6c
--- /dev/null
+++ b/server/sonar-web/src/main/js/apps/custom-measures/templates/custom-measures-list.hbs
@@ -0,0 +1,12 @@
+<table class="data zebra">
+  <thead>
+  <tr>
+    <th>Metric</th>
+    <th>Value</th>
+    <th>Description</th>
+    <th>Date</th>
+    <th>&nbsp;</th>
+  </tr>
+  </thead>
+  <tbody></tbody>
+</table>