SONAR-5646 Widget configuration

10 files changed, 242 insertions, 23 deletions

diff --git a/server/sonar-web/src/main/coffee/dashboard/app.coffee b/server/sonar-web/src/main/coffee/dashboard/app.coffee
index b3bf24c3b74..678f4b3bdf3 100644
--- a/server/sonar-web/src/main/coffee/dashboard/app.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/app.coffee
@@ -32,6 +32,8 @@ requirejs [
   App = new Marionette.Application()
   App.dashboard = window.did
   App.resource = window.resource
+  App.state = new Backbone.Model configure: false
+
 
   App.addInitializer ->
     @widgetsView = new WidgetsView
@@ -41,11 +43,13 @@ requirejs [
       app: @
     @widgetsView.render();
 
+
   requestDetails = ->
     $.get "#{baseUrl}/api/dashboards/details", did: App.dashboard, (data) ->
       console.log JSON.stringify data
       App.dashboard = new Backbone.Model _.omit data, 'widgets'
       App.widgets = new Widgets data.widgets
 
+
   $.when(requestDetails(), window.requestMessages()).done -> App.start()
 
diff --git a/server/sonar-web/src/main/coffee/dashboard/mockjax.coffee b/server/sonar-web/src/main/coffee/dashboard/mockjax.coffee
index db00287aa64..141b2d372f9 100644
--- a/server/sonar-web/src/main/coffee/dashboard/mockjax.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/mockjax.coffee
@@ -11,16 +11,16 @@ define ['third-party/jquery.mockjax'], ->
       shared: true
       layout: '50%-50%'
 
-      canManageDashboards: true
       canManageWidgets: true
 
       widgets: [
         {
           key: 'measure_filter_list'
-          props: [
+          name: 'Measure Filter as List'
+          properties: [
             {
               key: 'filter'
-              value: '48'
+              value: 48
             }
           ]
           layout: {
@@ -30,15 +30,27 @@ define ['third-party/jquery.mockjax'], ->
         }
         {
           key: 'my_reviews'
-          props: []
+          name: 'My Unresolved Issues'
+          properties: [
+            {
+              key: 'numberOfLines'
+              value: 5
+            }
+          ]
           layout: {
-            column: 1,
+            column: 1
             row: 2
           }
-        },
+        }
         {
-          key: 'hotspot_most_violated_rules',
-          props: [],
+          key: 'hotspot_most_violated_rules'
+          name: 'Most Violated Rules'
+          properties: [
+            {
+              key: 'numberOfLines'
+              value: 5
+            }
+          ]
           layout: {
             column: 2
             row: 1
@@ -58,3 +70,65 @@ define ['third-party/jquery.mockjax'], ->
           props: []
         }
       ]
+
+
+  jQuery.mockjax
+    url: "#{baseUrl}/api/dashboards/configure_widget"
+    responseText: JSON.stringify
+      "widget": {
+        "key": "measure_filter_list",
+        "properties": [
+          {
+            "key": "filter",
+            "value": 48,
+            "type": "FILTER",
+            "optional": false,
+            "options": {
+              "39": "My favourites"
+              "86": "Nemo & Dory"
+              "36": "New recent issues by developer"
+              "37": "New recent violations by project"
+              "54": "Projects"
+              "50": "Projects Activity since last version"
+              "38": "Projects Treemap"
+              "49": "Projects by license"
+              "100": "Projects not analyzed since 2 days"
+              "82": "Quality Gate"
+              "57": "Super Heroes with new issues"
+              "32": "Super Heroes"
+              "48": "Teams"
+            }
+          },
+          {
+            "key": "pageSize",
+            "type": "INTEGER",
+            "defaultValue": "30",
+            "optional": true
+          },
+          {
+            "key": "displayFilterDescription",
+            "type": "BOOLEAN",
+            "defaultValue": "false",
+            "optional": true
+          }
+        ]
+      }
+
+
+    jQuery.mockjax
+      url: "#{baseUrl}/api/dashboards/save_widget"
+      responseText: JSON.stringify
+        widget: {
+          key: 'measure_filter_list'
+          name: 'Measure Filter as List'
+          properties: [
+            {
+              key: 'filter'
+              value: 48
+            }
+          ]
+          layout: {
+            column: 1
+            row: 1
+          }
+        }
diff --git a/server/sonar-web/src/main/coffee/dashboard/models/widget.coffee b/server/sonar-web/src/main/coffee/dashboard/models/widget.coffee
index 72de8631a7f..6665b537821 100644
--- a/server/sonar-web/src/main/coffee/dashboard/models/widget.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/models/widget.coffee
@@ -1,4 +1,13 @@
 define ['backbone'], (Backbone) ->
 
+
   class extends Backbone.Model
     idAttribute: 'key'
+
+
+    mergeProperties: (properties) ->
+      props = @get 'properties'
+      props = properties.map (prop) ->
+        data = _.findWhere props, key: prop.key
+        _.extend prop, data
+      @set 'properties', props
diff --git a/server/sonar-web/src/main/coffee/dashboard/views/widget-view.coffee b/server/sonar-web/src/main/coffee/dashboard/views/widget-view.coffee
index e34624fa02d..a4c3bf35a3f 100644
--- a/server/sonar-web/src/main/coffee/dashboard/views/widget-view.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/views/widget-view.coffee
@@ -12,8 +12,16 @@ define [
   class extends Marionette.ItemView
     template: Templates['widget']
 
-    initialize: ->
-        @requestContent()
+
+    events:
+      'click .js-edit-widget': 'editWidget'
+      'click .js-cancel-edit-widget': 'cancelEditWidget'
+      'submit .js-edit-widget-form': 'saveWidget'
+
+
+    initialize: (options) ->
+#      @listenTo options.app.state, 'change', @render
+      @requestContent()
 
 
     requestContent: ->
@@ -27,8 +35,41 @@ define [
 
 
     getWidgetProps: ->
-      props = @model.get 'props'
+      properties = @model.get 'properties'
       r = {}
-      props.forEach (prop) ->
-        r[prop.key] = prop.value
+      properties.forEach (prop) ->
+        r[prop.key] = prop.value if prop.value?
       r
+
+
+    editWidget: ->
+      $.get "#{baseUrl}/api/dashboards/configure_widget", id: @model.id, (data) =>
+        @model.mergeProperties data.widget.properties
+        @showEditForm()
+
+
+    showEditForm: ->
+      @render()
+      @$('.widget_props').removeClass 'hidden'
+      @$('.configure_widget').addClass 'hidden'
+
+
+    cancelEditWidget: ->
+      @$('.widget_props').addClass 'hidden'
+      @$('.configure_widget').removeClass 'hidden'
+
+
+    saveWidget: (e) ->
+      e.preventDefault()
+      data = id: @model.id
+      @$('.js-edit-widget-form').serializeArray().forEach (p) ->
+        data[p.name] = p.value
+      $.post "#{baseUrl}/api/dashboards/save_widget", data, (data) =>
+        @model.set data.widget
+        @requestContent()
+
+
+    serializeData: ->
+      _.extend super,
+        baseUrl: baseUrl
+        state: @options.app.state.toJSON()
diff --git a/server/sonar-web/src/main/coffee/dashboard/views/widgets-view.coffee b/server/sonar-web/src/main/coffee/dashboard/views/widgets-view.coffee
index 349d40e7cfb..d004647a845 100644
--- a/server/sonar-web/src/main/coffee/dashboard/views/widgets-view.coffee
+++ b/server/sonar-web/src/main/coffee/dashboard/views/widgets-view.coffee
@@ -14,8 +14,17 @@ define [
     itemViewContainer: '.dashboard-column'
 
 
+    events:
+      'click .js-configure-widgets': 'configureWidgets'
+      'click .js-back-to-dashboard': 'stopConfigureWidgets'
+
+
+    initialize: (options) ->
+      @listenTo options.app.state, 'change', @render
+
+
     itemViewOptions: ->
-      { app: @options.app }
+      app: @options.app
 
 
     appendHtml: (compositeView, itemView) ->
@@ -25,7 +34,16 @@ define [
       $container.eq(column).append itemView.el
 
 
+    configureWidgets: ->
+      @options.app.state.set configure: true
+
+
+    stopConfigureWidgets: ->
+      @options.app.state.set configure: false
+
+
     serializeData: ->
       _.extend super,
         dashboard: @options.dashboard.toJSON()
         manageDashboardsUrl: "#{baseUrl}/dashboards"
+        state: @options.app.state.toJSON()
diff --git a/server/sonar-web/src/main/hbs/dashboard/_widget-props.hbs b/server/sonar-web/src/main/hbs/dashboard/_widget-props.hbs
new file mode 100644
index 00000000000..68595b6a500
--- /dev/null
+++ b/server/sonar-web/src/main/hbs/dashboard/_widget-props.hbs
@@ -0,0 +1,43 @@
+<form class="js-edit-widget-form">
+  <table class="table width100">
+    <tbody>
+    {{! <% if !widget.java_definition.global && @dashboard.global %> }}
+
+    {{#each properties}}
+      <tr>
+        <td class="form-key-cell">
+          {{t 'widget' ../key 'property' key 'name'}}
+          {{#unless optional}}*{{/unless}}
+        </td>
+        <td class="form-val-cell">
+          {{#eq type "FILTER"}}
+            <select name="{{key}}">
+              {{#each options}}
+                <option value="{{@key}}" {{#eq @key ../value}}selected{{/eq}}>{{this}}</option>
+              {{/each}}
+            </select>
+            <a href="{{baseUrl}}/measures/manage">Edit my filters</a>
+          {{/eq}}
+          {{#eq type "INTEGER"}}
+            <input value="{{value}}" name="{{key}}" type="text" size="10">
+          {{/eq}}
+          {{#eq type "BOOLEAN"}}
+            <input type="checkbox" name="{{key}}">
+          {{/eq}}
+
+          {{#if defaultValue}}
+            <div class="form-val-note">Default: {{defaultValue}}</div>
+          {{/if}}
+        </td>
+      </tr>
+    {{/each}}
+
+    <tr>
+      <td colspan="2">
+        <input type="submit" value="Save">
+        <a class="js-cancel-edit-widget">Cancel</a>
+      </td>
+    </tr>
+    </tbody>
+  </table>
+</form>
diff --git a/server/sonar-web/src/main/hbs/dashboard/widget.hbs b/server/sonar-web/src/main/hbs/dashboard/widget.hbs
index 91dcae71e96..7b948096598 100644
--- a/server/sonar-web/src/main/hbs/dashboard/widget.hbs
+++ b/server/sonar-web/src/main/hbs/dashboard/widget.hbs
@@ -1,9 +1,31 @@
 <div class="block">
-  <div class="widget">
-    {{#if html}}
-      {{{html}}}
-    {{else}}
-      <i class="spinner spinner-margin"></i>
-    {{/if}}
-  </div>
+
+  {{#if state.configure}}
+
+    <div class="widget-header">
+      <div class="widget-actions">
+        {{#notEmpty properties}}<a class="js-edit-widget">Edit</a>{{/notEmpty}}
+        <a class="js-delete-widget">Delete</a>
+      </div>
+      <div class="widget-handle">{{name}}</div>
+    </div>
+
+    <div class="widget_props hidden">
+      {{> '_widget-props'}}
+    </div>
+
+    <div class="configure_widget">
+      <div class="transparent"></div>
+      <div class="widget">
+          {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
+      </div>
+    </div>
+
+  {{else}}
+
+    <div class="widget">
+      {{#if html}}{{{html}}}{{else}}<i class="spinner spinner-margin"></i>{{/if}}
+    </div>
+
+  {{/if}}
 </div>
diff --git a/server/sonar-web/src/main/hbs/dashboard/widgets.hbs b/server/sonar-web/src/main/hbs/dashboard/widgets.hbs
index 7dd17d1b8ea..1ae5f8b11a9 100644
--- a/server/sonar-web/src/main/hbs/dashboard/widgets.hbs
+++ b/server/sonar-web/src/main/hbs/dashboard/widgets.hbs
@@ -1,6 +1,10 @@
 <div class="line-block">
   <div class="operations noprint button-group">
-    <button>{{t 'dashboard.configure_widgets'}}</button>
+    {{#unless state.configure}}
+      <button class="js-configure-widgets">{{t 'dashboard.configure_widgets'}}</button>
+    {{else}}
+      <button class="js-back-to-dashboard">{{t 'dashboard.back_to_dashboard'}}</button>
+    {{/unless}}
     <a class="button" href="{{manageDashboardsUrl}}">{{t 'dashboard.manage_dashboards'}}</a>
   </div>
 </div>
diff --git a/server/sonar-web/src/main/less/dashboard.less b/server/sonar-web/src/main/less/dashboard.less
index dfcd068296b..a5bcb867a88 100644
--- a/server/sonar-web/src/main/less/dashboard.less
+++ b/server/sonar-web/src/main/less/dashboard.less
@@ -246,7 +246,6 @@
   line-height: 16px;
   padding: 3px 5px 5px;
   background-color: #efefef;
-  border: 1px solid #ddd;
   border-bottom: 0;
 }
 
diff --git a/server/sonar-web/src/main/less/ui.less b/server/sonar-web/src/main/less/ui.less
index a2e1b2f161d..eeea142f5c4 100644
--- a/server/sonar-web/src/main/less/ui.less
+++ b/server/sonar-web/src/main/less/ui.less
@@ -85,6 +85,11 @@ select::-moz-focus-inner, input::-moz-focus-inner, button::-moz-focus-inner {
   text-transform: none;
 }
 
+.hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
 
 /*
  * Links