More form prototyping

Author: dcramer

src/sentry/rules.py

@@ -55,7 +55,7 @@ class Rule(object):
 
     form_cls = None
     action_label = None
-    condition_label = None
+    trigger_label = None
 
     @classmethod
     def from_params(cls, project, data=None):
@@ -76,12 +76,12 @@ def after(self, event, is_new, is_regression, **kwargs):
         pass
 
     def render_label(self):
-        return ('%s %s' % (self.action_label, self.condition_label)).format(
+        return ('%s %s' % (self.action_label, self.trigger_label)).format(
             **self.instance.data)
 
     def render_form(self, form_data):
         if not self.form_cls:
-            return self.condition_label
+            return self.trigger_label
 
         form = self.form_cls(
             form_data,
@@ -93,7 +93,7 @@ def replace_field(match):
             field = match.group(1)
             return unicode(form[field])
 
-        return mark_safe(re.sub(r'{([^}]+)}', replace_field, escape(self.condition_label)))
+        return mark_safe(re.sub(r'{([^}]+)}', replace_field, escape(self.trigger_label)))
 
     def save(self, form_data):
         instance = self.instance
@@ -112,7 +112,7 @@ def save(self, form_data):
 
 
 class NotifyRule(Rule):
-    action_label = 'I want to send notifications when'
+    action_label = 'Send a notification'
 
     def notify(self, event):
         # TODO: fire off plugin notifications
@@ -127,14 +127,14 @@ def should_notify(self, event):
 
 
 class NotifyOnFirstSeenRule(NotifyRule):
-    condition_label = 'an event is first seen'
+    trigger_label = 'An event is first seen'
 
     def should_notify(self, event, is_new, **kwargs):
         return is_new
 
 
 class NotifyOnRegressionRule(NotifyRule):
-    condition_label = 'an event changes state from resolved to unresolved'
+    trigger_label = 'An event changes state from resolved to unresolved'
 
     def should_notify(self, event, is_regression, **kwargs):
         return is_regression
@@ -146,7 +146,7 @@ class NotifyOnTimesSeenForm(forms.Form):
 
 class NotifyOnTimesSeenRule(NotifyRule):
     form_cls = NotifyOnTimesSeenForm
-    condition_label = 'an event is seen more than {num} times'
+    trigger_label = 'An event is seen more than {num} times'
 
     def should_notify(self, event):
         return event.times_seen == self.get_option('num')

src/sentry/static/sentry/scripts/app.js

@@ -619,6 +619,77 @@
 
     });
 
+
+    app.NewProjectRulePage = BasePage.extend({
+
+        initialize: function(data){
+            BasePage.prototype.initialize.apply(this, arguments);
+
+            _.bindAll(this, 'populateTriggers', 'addRule');
+
+            this.rules_by_action = {}
+            this.triggers_by_id = {}
+            this.el = $(data.el);
+            this.action_sel = this.el.find('select[name="action"]');
+            this.trigger_sel = this.el.find('select[name="trigger"]');
+            this.trigger_table = this.el.find('table.trigger-list');
+            this.trigger_table_body = this.trigger_table.find('tbody');
+
+            this.action_sel.empty();
+            $.each(data.rules, _.bind(function(_, action) {
+                var opt = $('<option></option>');
+                opt.attr({
+                    value: action.label,
+                });
+                opt.text(action.label);
+                opt.appendTo(this.action_sel);
+
+                this.rules_by_action[action.label] = action;
+            }, this));
+
+            this.action_sel.change(this.populateTriggers).change();
+            this.trigger_sel.change(this.addRule);
+        },
+
+        populateTriggers: function(){
+            var rule = this.rules_by_action[this.action_sel.val()];
+
+            this.trigger_table.hide();
+            this.trigger_table_body.empty();
+
+            this.trigger_sel.empty();
+            this.trigger_sel.append($('<option></option>'));
+            $.each(rule.triggers, _.bind(function(_, trigger) {
+                this.triggers_by_id[trigger.id] = trigger;
+                var opt = $('<option></option>');
+                opt.attr({
+                    value: trigger.id,
+                });
+                opt.text(trigger.label);
+                opt.appendTo(this.trigger_sel);
+            }, this));
+        },
+
+        addRule: function() {
+            var trigger = this.triggers_by_id[this.trigger_sel.val()];
+            var row = $('<tr></tr>');
+            var remove_btn = $('<button class="btn btn-small" data-action="remove-rule">Remove</button>');
+
+            row.append($('<td>' + trigger.html + '</td>'));
+            row.append($('<td></td>').append(remove_btn));
+            row.appendTo(this.trigger_table_body);
+
+            remove_btn.click(function(){
+                row.remove();
+                return false;
+            });
+
+            this.trigger_sel.data("select2").clear();
+            this.trigger_table.show();
+        }
+
+    });
+
     Backbone.sync = function(method, model, success, error){
         success();
     };

src/sentry/static/sentry/scripts/global.min.js

@@ -34,7 +34,7 @@
 
             if (href.indexOf('?') == -1)
                 return vars;
-            
+
             hashes = href.slice(href.indexOf('?') + 1, (href.indexOf('#') != -1 ? href.indexOf('#') : href.length)).split('&');
             $.each(hashes, function(_, chunk){
                 hash = chunk.split('=');
@@ -56,7 +56,7 @@
             var b, x, y, o, p;
 
             number = parseInt(number, 10);
-            
+
             for (var i=0; (b=number_formats[i]); i++){
                 x = b[0];
                 y = b[1];
@@ -107,7 +107,7 @@
         slugify: function(str) {
             str = str.replace(/^\s+|\s+$/g, ''); // trim
             str = str.toLowerCase();
-          
+
             // remove accents, swap ñ for n, etc
             var from = "àáäâèéëêìíïîòóöôùúüûñç·/_,:;";
             var to   = "aaaaeeeeiiiioooouuuunc------";
@@ -278,7 +278,8 @@
             var $this = $(this),
                 options = {
                     width: 'element',
-                    allowClear: false
+                    allowClear: false,
+                    minimumResultsForSearch: 10,
                 };
 
             if ($this.attr('data-allowClear')) {

src/sentry/static/sentry/scripts/utils.js

@@ -7551,7 +7551,7 @@ a.icon-share:hover {
   padding: 0 5px 0 45px;
   line-height: 20px;
   height: 20px;
-  min-width: 20px;
+  width: 20px;
   text-align: right;
   float: left;
   display: block;

src/sentry/static/sentry/styles/global.min.css

@@ -7551,7 +7551,7 @@ a.icon-share:hover {
   padding: 0 5px 0 45px;
   line-height: 20px;
   height: 20px;
-  min-width: 20px;
+  width: 20px;
   text-align: right;
   float: left;
   display: block;

src/sentry/static/sentry/styles/sentry.css

@@ -7,22 +7,45 @@
     <div class="page-header">
         <h2>{% trans "New Rule" %}</h2>
     </div>
-    <form method="POST" action="">
+    <form method="POST" action="" id="new-rule-form">
         {% csrf_token %}
-        <ul class="rule-list">
-            {% for action_label, rule_choices in rules_by_action %}
-                <li class="rule-action">
-                    <label><input type="radio" name="action" value="{{ action_label }}"> {{ action_label }}</label>
-                    <ul class="rule-choices">
-                        {% for rule_id, rule in rule_choices %}
-                            <li><label><input type="radio" name="rule" value="{{ rule_id }}"{% if rule_id == selected_rule %} checked="checked"{% endif %}> {{ rule }}</label></li>
-                        {% endfor %}
-                    </ul>
-                </li>
-            {% endfor %}
-        </ul>
+
+        <p>A rule consists of a single action and one or more triggers.</p>
+        <fieldset>
+            <div><legend>Details</legend></div>
+            {% include "sentry/partial/form_base.html" %}
+        </fieldset>
+
+        <fieldset>
+            <div><legend>Action</legend></div>
+            <div class="controls">
+                <select name="action" class="span6" placeholder="select an action"></select>
+            </div>
+        </fieldset>
+
+        <fieldset>
+            <div><legend>Triggers</legend></div>
+            <table class="trigger-list table table-striped">
+                <colgroup>
+                    <col>
+                    <col style="width:50px">
+                </colgroup>
+                <tbody></tbody>
+            </table>
+            <div class="controls">
+                <select name="trigger" class="span6" placeholder="add a trigger"></select>
+            </div>
+        </fieldset>
+
         <div class="actions">
             <button type="submit" class="btn btn-primary">{% trans "Save Rule" %}</button>
         </div>
     </form>
+
+    <script>
+    new app.NewProjectRulePage({
+        el: '#new-rule-form',
+        rules: {{ rules_by_action|safe }}
+    });
+    </script>
 {% endblock %}

src/sentry/templates/sentry/projects/rules/new.html

@@ -209,3 +209,10 @@ def save(self):
         ProjectOption.objects.set_value(
             self.project, 'quotas:per_minute', self.cleaned_data['per_minute'] or ''
         )
+
+
+class NewRuleForm(forms.Form):
+    label = forms.CharField(
+        label=_('Label'),
+        widget=forms.TextInput(attrs={'placeholder': 'e.g. My Custom Rule'}),
+    )

src/sentry/web/forms/projects.py

@@ -22,10 +22,12 @@
 from sentry.permissions import (
     can_remove_project, can_add_project_key, can_remove_project_key)
 from sentry.plugins import plugins
+from sentry.utils import json
 from sentry.web.decorators import login_required, has_access
 from sentry.web.forms.projects import (
     ProjectTagsForm, RemoveProjectForm, EditProjectForm,
-    NotificationTagValuesForm, AlertSettingsForm, ProjectQuotasForm)
+    NotificationTagValuesForm, AlertSettingsForm, ProjectQuotasForm,
+    NewRuleForm)
 from sentry.web.helpers import render_to_response, plugin_config
 
 
@@ -56,7 +58,8 @@ def remove_project(request, team, project):
             delete_project.delay(object_id=project.id)
             project.update(status=STATUS_HIDDEN)
 
-            messages.add_message(request, messages.SUCCESS,
+            messages.add_message(
+                request, messages.SUCCESS,
                 _('Deletion has been queued and should occur shortly.'))
         elif removal_type == '2':
             new_project = form.cleaned_data['project']
@@ -454,12 +457,12 @@ def list_rules(request, team, project):
 def new_rule(request, team, project):
     from sentry.rules import RULES
 
-    selected_rule = request.POST.get('rule')
+    form = NewRuleForm(request.POST or None)
 
-    if request.POST:
-        rule_cls = RULES[selected_rule]
-        rule = rule_cls.from_params(project)
-        rule.save(request.POST)
+    if request.POST and form.is_valid():
+        # rule_cls = RULES[selected_rule]
+        # rule = rule_cls.from_params(project)
+        # rule.save(request.POST)
 
         messages.add_message(
             request, messages.SUCCESS,
@@ -471,16 +474,23 @@ def new_rule(request, team, project):
     rules_by_action = defaultdict(list)
     for rule_id, rule_cls in RULES.iteritems():
         rule = rule_cls.from_params(project)
-        rules_by_action[rule.action_label].append(
-            (rule_id, rule.render_form(request.POST))
-        )
+        rules_by_action[rule.action_label].append({
+            'id': rule_id,
+            'label': rule.trigger_label,
+            'html': rule.render_form(request.POST),
+        })
+
+    rule_list = [{
+        'label': k,
+        'triggers': v,
+    } for k, v in rules_by_action.iteritems()]
 
     context = csrf(request)
     context.update({
         'team': team,
         'page': 'rules',
-        'rules_by_action': rules_by_action.items(),
-        'selected_rule': selected_rule,
+        'rules_by_action': json.dumps(rule_list),
+        'form': form,
         'project': project,
     })