flipper-ui 0.2.0.beta1

data/lib/flipper/ui/action_collection.rb

@@ -0,0 +1,20 @@
+module Flipper
+  module UI
+    # Internal: Used to detect the action that should be used in the middleware.
+    class ActionCollection
+      def initialize
+        @action_classes = []
+      end
+
+      def add(action_class)
+        @action_classes << action_class
+      end
+
+      def action_for_request(request)
+        @action_classes.detect { |action_class|
+          request.path_info =~ action_class.regex
+        }
+      end
+    end
+  end
+end

data/lib/flipper/ui/actions/features.rb

@@ -0,0 +1,21 @@
+require 'flipper/ui/action'
+require 'flipper/ui/decorators/feature'
+
+module Flipper
+  module UI
+    module Actions
+      class Features < UI::Action
+
+        route %r{features/?\Z}
+
+        def get
+          features = flipper.features.map { |feature|
+            Decorators::Feature.new(feature)
+          }.sort_by(&:pretty_name)
+
+          json_response features.map(&:as_json)
+        end
+      end
+    end
+  end
+end

data/lib/flipper/ui/actions/file.rb

@@ -0,0 +1,17 @@
+require 'rack/file'
+require 'flipper/ui/action'
+
+module Flipper
+  module UI
+    module Actions
+      class File < UI::Action
+
+        route %r{(images|css|js)/.*\Z}
+
+        def get
+          Rack::File.new(public_path).call(request.env)
+        end
+      end
+    end
+  end
+end

data/lib/flipper/ui/actions/gate.rb

@@ -0,0 +1,143 @@
+require 'flipper/ui/util'
+require 'flipper/ui/action'
+require 'flipper/ui/actions/index'
+require 'flipper/ui/decorators/feature'
+
+module Flipper
+  module UI
+    module Actions
+      class Gate < UI::Action
+
+        # Private: Struct to wrap actors so they can respond to flipper_id.
+        FakeActor = Struct.new(:flipper_id)
+
+        route %r{features/.*/.*/?\Z}
+
+        # Get should run the index route. All the url does is control what is
+        # opened and closed when the page is loaded.
+        def get
+          run_other_action Index
+        end
+
+        # FIXME: Return more than just the gate as json response?
+        def post
+          feature_name, gate_name = request.path.split('/').pop(2).map{|value| Rack::Utils.unescape value }
+          update_gate_method_name = "update_#{gate_name}"
+
+          unless respond_to?(update_gate_method_name)
+            update_gate_method_undefined(gate_name)
+          end
+
+          feature = flipper[feature_name.to_sym]
+          send(update_gate_method_name, feature)
+          gate = feature.gate(gate_name)
+          value = feature.gate_values[gate.key]
+
+          json_response Decorators::Gate.new(gate, value).as_json
+        end
+
+        def update_boolean(feature)
+          if params['value'] == 'true'
+            feature.enable
+          else
+            feature.disable
+          end
+        end
+
+        def update_actor(feature)
+          value = params['value']
+
+          if Util.blank?(value)
+            invalid_actor_value(value)
+          end
+
+          thing = FakeActor.new(value)
+          actor = flipper.actor(thing)
+
+          case params['operation']
+          when 'enable'
+            feature.enable actor
+          when 'disable'
+            feature.disable actor
+          end
+        end
+
+        def update_group(feature)
+          group_name = params['value']
+          group = flipper.group(group_name)
+
+          case params['operation']
+          when 'enable'
+            feature.enable group
+          when 'disable'
+            feature.disable group
+          end
+        rescue Flipper::GroupNotRegistered => e
+          group_not_registered group_name
+        end
+
+        def update_percentage_of_actors(feature)
+          value = params['value']
+          feature.enable_percentage_of_actors value
+        rescue ArgumentError => exception
+          invalid_percentage value, exception
+        end
+
+        def update_percentage_of_random(feature)
+          value = params['value']
+          feature.enable_percentage_of_random value
+        rescue ArgumentError => exception
+          invalid_percentage value, exception
+        end
+
+        # Private: Returns error response for invalid actor value.
+        def invalid_actor_value(value)
+          response = {
+            status: 'error',
+            message: "#{value.inspect} is not a valid actor value.",
+          }
+
+          status 422
+          halt json_response(response)
+        end
+
+        # Private: Returns error response for invalid percentage value.
+        def invalid_percentage(value, exception)
+          response = {
+            status: 'error',
+            message: exception.message,
+          }
+
+          status 422
+          halt json_response(response)
+        end
+
+        # Private: Returns error response that group was not registered.
+        def group_not_registered(group_name)
+          response = {status: 'error'}
+
+          if Util.blank?(group_name)
+            status 422
+            response[:message] = "Group name is required."
+          else
+            status 404
+            response[:message] = "The group named #{group_name.inspect} has not been registered."
+          end
+
+          halt json_response(response)
+        end
+
+        # Private: Returns error response that gate update method is not defined.
+        def update_gate_method_undefined(gate_name)
+          response = {
+            status: 'error',
+            message: "I have no clue how to update the gate named #{gate_name.inspect}.",
+          }
+
+          status 404
+          halt json_response(response)
+        end
+      end
+    end
+  end
+end

data/lib/flipper/ui/actions/index.rb

@@ -0,0 +1,17 @@
+require 'flipper/ui/action'
+require 'flipper/ui/decorators/feature'
+
+module Flipper
+  module UI
+    module Actions
+      class Index < UI::Action
+
+        route %r{.*}
+
+        def get
+          view_response :index
+        end
+      end
+    end
+  end
+end

data/lib/flipper/ui/assets/javascripts/application.coffee

@@ -0,0 +1,305 @@
+class Feature extends Spine.Model
+  @configure "Feature", "id", "name", "state", "description", "gates"
+  @extend Spine.Model.Ajax
+  @extend url: "#{Flipper.Config.url}/features"
+
+  constructor: ->
+    super
+    @gates = @gates.map (data) =>
+      data.feature_id = @id
+      new Gate(data)
+
+  gate: (name) ->
+    gates = @gates.filter (gate) ->
+      gate.name == name
+    gates[0]
+
+window.Feature = Feature
+
+class Gate extends Spine.Model
+  @configure "Gate", "feature_id", "key", "name", "value"
+
+  constructor: ->
+    super
+
+  url: ->
+    "#{Flipper.Config.url}/features/#{encodeURIComponent @feature_id}/#{encodeURIComponent @name}"
+
+  disableSetMember: (member, success_callback, error_callback) ->
+    @setMember('disable', member, success_callback, error_callback)
+
+  enableSetMember: (member, success_callback, error_callback) ->
+    @setMember('enable', member, success_callback, error_callback)
+
+  setMember: (operation, member, success_callback, error_callback) ->
+    options =
+      type: 'POST'
+      url: @url()
+      data:
+        operation: operation
+        value: member
+      success: (data, status, xhr) =>
+        Feature.trigger('reload')
+        @value = data.value
+        success_callback(data, status, xhr) if success_callback
+      error: (data, status, error) =>
+        response = if data.responseText then $.parseJSON data.responseText else message: "Something went wrong..."
+        alert "ERROR: #{response.message}"
+        error_callback(data, status) if error_callback
+
+    $.ajax options
+
+  save: (opts) ->
+    result = super
+    @ajaxSave(opts)
+    Feature.trigger('reload')
+    result
+
+  ajaxSave: (opts) ->
+    options =
+      type: 'POST'
+      url: @url()
+      data:
+        value: @value
+      error: (data, status, error) =>
+        response = if data.responseText then $.parseJSON data.responseText else message: "Something went wrong..."
+        alert "ERROR: #{response.message}"
+
+    $.ajax options
+
+class App extends Spine.Controller
+  constructor: ->
+    super
+    @feature_list = new App.FeatureList(el: $('#features'))
+
+class App.FeatureList extends Spine.Controller
+  constructor: ->
+    super
+    @feature_controllers = {}
+    Feature.bind "refresh", @addAll
+    Feature.bind "reload", @reload
+
+    Feature.one 'refresh', ->
+      Spine.Route.setup
+        history: true
+
+    Feature.fetch()
+
+    Spine.Route.add /features\/(.*)\/(.*)\/?/, (matches) =>
+      params =
+        id: matches.match[1]
+        gate: matches.match[2]
+      if controller = @feature_controllers[params.id]
+        controller.edit()
+        controller.activateGate(params)
+
+    Spine.Route.add /features\/(.*)\/?/, (matches) =>
+      params =
+        id: matches.match[1]
+      if controller = @feature_controllers[params.id]
+        controller.edit()
+        controller.openDefaultGate()
+
+  addOne: (feature) =>
+    controller = new App.Feature(feature: feature)
+    @feature_controllers[feature.id] = controller
+    @append controller.render()
+
+  addAll: =>
+    @html ''
+    $('#no_features').hide()
+    all_features = Feature.all()
+    if all_features.length > 0
+      @addOne feature for feature in all_features
+    else
+      $('#no_features').show()
+
+  reload: =>
+    Feature.fetch()
+    @addAll
+
+class App.Feature extends Spine.Controller
+  elements:
+    '.feature': 'dom_feature'
+    '.gates': 'dom_gates'
+
+  events:
+    'click .show-settings': 'openFeature'
+    'click .hide-settings': 'hide'
+    'click [data-tab]': 'clickTab'
+
+  constructor: ->
+    super
+    throw "@feature required" if !@feature?
+
+  render: ->
+    @html @template(@feature)
+    @gate_list = new App.GateList
+      el: @dom_gates
+    @el
+
+  openFeature: (event) ->
+    event.preventDefault() if event
+    @navigate "#{Flipper.Config.url}/features/#{@feature.id}"
+
+  openDefaultGate: ->
+    @navigate "#{Flipper.Config.url}/features/#{@feature.id}/boolean"
+
+  template: (feature) ->
+    source   = $("#feature-template").html()
+    template = Handlebars.compile(source)
+    template(feature)
+
+  clickTab: (event) ->
+    event.preventDefault()
+    tab = $(event.currentTarget)
+    name = tab.attr('data-tab')
+    @navigate "#{Flipper.Config.url}/features/#{@feature.id}/#{name}"
+
+  activateGate: (params) ->
+    name = params.gate
+    @gate_list[name].active(params)
+    @el.find('[data-tab]').removeClass('active')
+    @el.find("[data-tab=#{name}]").addClass('active')
+
+  edit: (event) ->
+    event.preventDefault() if event
+    @dom_feature.addClass('settings')
+
+  hide: (event) ->
+    event.preventDefault() if event
+    @dom_feature.removeClass('settings')
+    @navigate "#{Flipper.Config.url}/"
+
+class App.Gate extends Spine.Controller
+  constructor: ->
+    super
+    @active @renderForParams
+
+  renderForParams: (params) ->
+    @feature = Feature.find(params.id)
+    @gate = @feature.gate(params.gate)
+    @render()
+
+  render: ->
+    @html @template("#gate-#{@name.replace(/_/g, '-')}-template", @gate)
+    $slider = $(".slider-range")
+    $slider_value = $slider.siblings("input[type='text']")
+
+    $slider.slider
+      range: "min",
+      value: @gate.value,
+      min: 0,
+      max: 100,
+      slide: ( event, ui ) ->
+        $slider_value.val( ui.value )
+        return
+
+    $slider_value.val $slider.slider( "value" )
+    $slider_value.change ()->
+      $slider.slider "value", $(@).val()
+      return
+
+  template: (html_id, context) ->
+    source   = $(html_id).html()
+    template = Handlebars.compile(source)
+    template(context)
+
+class App.Gate.Boolean extends App.Gate
+  elements:
+    'input[value=true]': 'input'
+
+  events:
+    'submit form': 'submit'
+
+  constructor: ->
+    @name = 'boolean'
+    super
+
+  submit: (event) ->
+    event.preventDefault()
+    @gate.value = @input.is(':checked')
+    @gate.save()
+    @navigate "#{Flipper.Config.url}/"
+
+class App.Gate.Set extends App.Gate
+  elements:
+    '.disable': 'dom_disable'
+    '.members': 'dom_members'
+    '[name=value]': 'dom_input'
+
+  events:
+    'click .disable': 'disable'
+    'submit form': 'submit'
+
+  disable: (event) ->
+    event.preventDefault()
+    member = $(event.currentTarget).closest('.member')
+    value = member.attr('data-value')
+    @gate.disableSetMember value, (data, status, xhr) ->
+      member.remove()
+
+  submit: (event) ->
+    event.preventDefault()
+    value = @dom_input.val()
+    self = @
+
+    @gate.enableSetMember value, (data, status, xhr) ->
+      html = self.template "#gate-member-template", value
+      self.dom_members.append html
+      self.dom_input.val ''
+
+class App.Gate.Group extends App.Gate.Set
+  constructor: ->
+    @name = 'group'
+    super
+
+class App.Gate.Actor extends App.Gate.Set
+  constructor: ->
+    @name = 'actor'
+    super
+
+class App.Gate.Percentage extends App.Gate
+  elements:
+    'input[type=text]': 'input'
+
+  events:
+    'submit form': 'submit'
+
+  validate: ()->
+    float_value = parseFloat(@gate.value)
+    valid = true
+
+    if isNaN(float_value) || float_value < 0 || float_value > 100
+      alert "The percentage value provided is not valid"
+      valid = false
+
+    return valid
+
+  submit: (event) ->
+    event.preventDefault()
+    @gate.value = @input.val()
+    return unless @validate()
+    @gate.save()
+    @navigate "#{Flipper.Config.url}/"
+
+class App.Gate.PercentageOfActors extends App.Gate.Percentage
+  constructor: ->
+    @name = 'percentage_of_actors'
+    super
+
+class App.Gate.PercentageOfRandom extends App.Gate.Percentage
+  constructor: ->
+    @name = 'percentage_of_random'
+    super
+
+class App.GateList extends Spine.Stack
+  controllers:
+    boolean: App.Gate.Boolean
+    group: App.Gate.Group
+    actor: App.Gate.Actor
+    percentage_of_actors: App.Gate.PercentageOfActors
+    percentage_of_random: App.Gate.PercentageOfRandom
+
+jQuery ->
+  new App(el: $('#app'))