rollout-ui 0.8.1 → 0.9.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6d9fab3c48e549993d1e00275c95b7346a51a99751e0385c8602bdadef24ba3f
-  data.tar.gz: 52ff38014c4a74f4a53261edc266b04da7cd3b5f02a31a167c2971b30f3abf23
+  metadata.gz: 4206916ef324d7cfb3884b9a3c49529ce13c1775c48d3de796ae2cea639355b7
+  data.tar.gz: 9e0702e530a5dc7b9e22b5201e7a6165395573b3f4154236823cfc1dfe91a18c
 SHA512:
-  metadata.gz: b298705af03edb6097e9bf8a1fa7ca5a4f94e793f18a619410d9600759d3d5781ec608a92123f97bd29531f983c1068d26669313d397dd279cd872ebe16b2a32
-  data.tar.gz: 3ac6cea06516db2ed27b865dc0d16a86eea1f567c3d0813560392f8d834971d009ec80829fa8e9a415ef8855cc5fae5612218c4711c37cda1bb493fa0201f2fc
+  metadata.gz: 2023c3c6b08fe1d9ea02b976b1b8feacf96b64175c69fc9fcb673343a603afd3fb24674ed7adb852006b7f14b7da24dcd0a0fb4c3433ac24bdeb2bf6d303f0ce
+  data.tar.gz: 1c881df9faa5d1f7ae3bafe43e09491bd37f0b6b5d38b21190ad826f4741a776f58d22a5cf9d8a90f79fbd38242e3eb98f647d34389ef799f11131432a9149ae

data/.github/workflows/release.yml

@@ -8,6 +8,9 @@ on:
 jobs:
   release:
     runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      id-token: write
     services:
       redis:
         image: redis:7-alpine
@@ -21,12 +24,16 @@ jobs:
     steps:
       - name: Checkout code
         uses: actions/checkout@v4
+        with:
+          persist-credentials: false
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
           bundler-cache: true
       - name: Run tests
-        run: bundle exec rspec 
+        run: bundle exec rspec
+      - name: Release to RubyGems
+        uses: rubygems/release-gem@v1
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v2
         with:
@@ -34,13 +41,4 @@ jobs:
           name: ${{ github.ref_name }}
           generate_release_notes: true
           draft: false
-          prerelease: false 
-      - name: Set up RubyGems credentials
-        env:
-          RUBYGEMS_API_KEY: ${{ secrets.RUBYGEMS_API_KEY }}
-        run: |
-          mkdir -p ~/.gem
-          echo ":rubygems_api_key: $RUBYGEMS_API_KEY" > ~/.gem/credentials
-          chmod 0600 ~/.gem/credentials
-      - name: Release to RubyGems
-        run: bundle exec rake release
+          prerelease: false

data/README.md

@@ -12,9 +12,13 @@ you can just mount as a Rack app and it will just work.
 Add it to your application's Gemfile:
 
 ```ruby
-gem 'rollout-ui'
+gem "rollout", "~> 3.1"
+gem "rollout-redis-adapter", "~> 0.1"
+gem "rollout-ui"
 ```
 
+`rollout-ui` 0.9+ requires Rollout 3.1 and does not support Rollout 2.x. The UI is backend-neutral: applications using Redis should add `rollout-redis-adapter` and pass a configured Rollout instance into the UI.
+
 Mount it
 
 ```ruby
@@ -73,7 +77,15 @@ To get the most out of **rollout-ui**, we recommend you to turn on logging
 on your rollout instance to see history of changes in the UI.
 
 ```ruby
-$rollout = Rollout.new(Redis.current, logging: { history_length: 100, global: true })
+require "redis"
+require "rollout"
+require "rollout/adapters/redis"
+
+$redis = Redis.new
+$rollout = Rollout.new(
+  adapter: Rollout::Adapters::Redis.new($redis),
+  logging: { history_length: 100, global: true },
+)
 ```
 
 To also see who updated states of your rollouts, you can configure `actor` and

data/config.ru

@@ -2,13 +2,17 @@
 
 require_relative 'lib/rollout/ui'
 require 'redis'
+require 'rollout/adapters/redis'
 
 redis_host = ENV.fetch('REDIS_HOST', 'localhost')
 redis_port = ENV.fetch('REDIS_PORT', '6379')
 redis_db = ENV.fetch('REDIS_DB', '10')
 
-redis = Redis.new(host: redis_host, port: redis_port, db: redis_db)
-rollout = Rollout.new(redis, logging: { history_length: 100, global: true })
+redis = ::Redis.new(host: redis_host, port: redis_port, db: redis_db)
+rollout = Rollout.new(
+  adapter: Rollout::Adapters::Redis.new(redis),
+  logging: { history_length: 100, global: true },
+)
 
 %i[employees developers subscribers].each do |group|
   rollout.define_group(group) { }

data/lib/rollout/ui/helpers.rb

@@ -109,8 +109,8 @@ module Rollout::UI
       }
     end
 
-    def sanitized_name(feature_name)
-      Rack::Utils.escape_html(feature_name)
+    def h(value)
+      Rack::Utils.escape_html(value)
     end
   end
 end

data/lib/rollout/ui/version.rb

@@ -1,5 +1,5 @@
 class Rollout
   module UI
-    VERSION = "0.8.1"
+    VERSION = "0.9.0"
   end
 end

data/lib/rollout/ui/views/features/index.erb

@@ -0,0 +1,75 @@
+<h2 class="font-semibold text-xl text-gray-500 pt-12 flex items-center">
+  <div class="flex-auto">Features<span class="text-sm p-1 bg-gray-100 ml-1 rounded-sm font-bold leading-none"><%= h(@features.count) %></span></div>
+  <form class="flex-none" action="<%= h(new_feature_path) %>" method="GET">
+    <button class="text-sm text-gray-600 p-3 bg-gray-100 ml-1 rounded-sm font-bold leading-none transition-colors duration-150 hover:bg-gray-200" type="submit">Add New Feature </button>
+  </form>
+</h2>
+
+<div class="w-8 h-1 bg-gray-300 my-10"></div>
+
+<div class="overflow-auto scrolling-touch">
+  <table class="text-sm w-100 text-left w-full">
+    <thead class="font-semibold text-gray-500 border-b border-gray-200">
+      <th class="pb-2 pr-3">Name</th>
+      <th class="pb-2 pr-3">Percentage</th>
+      <th class="pb-2 pr-3">Groups</th>
+      <th class="pb-2 pr-3">Users</th>
+      <% if @rollout.respond_to?(:logging) %>
+        <th class="pb-2 pr-3">Updated</th>
+      <% end %>
+      <th class="pl-2"></th>
+    </thead>
+
+    <tbody class="text-gray-600">
+      <% @features.each do |feature_name| %>
+        <% feature = @rollout.get(feature_name) %>
+        <tr class="border-b border-gray-200">
+          <td class="py-2">
+            <a class="text-blue-600 hover:text-blue-700 hover:underline" href="<%= h(feature_path(feature.name)) %>"><%= h(feature_name) %></a>
+            <div class="text-gray-500 text-xs"><%= h(feature.data['description']) %></div>
+          </td>
+          <td class="py-2 whitespace-no-wrap">
+            <% if feature.percentage == 0 %>
+              <span class="text-gray-400"><%= h(feature.percentage) %>%</span>
+            <% else %>
+              <%= h(feature.percentage) %>%
+            <% end %>
+          </td>
+          <td class="py-2 whitespace-no-wrap"><%= h(feature.groups.join(', ')) %></td>
+          <td class="py-2 whitespace-no-wrap">
+            <% if feature.users.count == 0 %>
+              <span class="text-gray-400"><%= h(feature.users.count) %></span>
+            <% else %>
+              <%= h(feature.users.count) %>
+            <% end %>
+          </td>
+          <% if @rollout.respond_to?(:logging) %>
+            <td class="py-2 whitespace-no-wrap">
+              <% updated_at = @rollout.logging.updated_at(feature_name) %>
+              <% if updated_at.nil? %>
+                <span class="text-gray-400">Never</span>
+              <% else %>
+                <span title="<%= h(updated_at.strftime(Rollout::UI.config.timestamp_format)) %>"><%= h(time_ago(updated_at)) %></span>
+              <% end %>
+            </td>
+          <% end %>
+          <td class="flex items-center py-2 justify-end whitespace-no-wrap pl-3">
+            <form action="<%= h(activate_percentage_feature_path(feature_name, 100)) %>" method="POST">
+              <button class="p-3 bg-gray-100 ml-1 rounded-sm font-bold leading-none transition-colors duration-150 hover:bg-gray-200" type="submit" onclick="return confirm(<%= h("Are you sure you want activate #{feature_name} to 100%?".to_json) %>)">100% </button>
+            </form>
+            <form action="<%= h(activate_percentage_feature_path(feature_name, 0)) %>" method="POST">
+              <button class="p-3 bg-gray-100 ml-1 rounded-sm font-bold leading-none transition-colors duration-150 hover:bg-gray-200" type="submit" onclick="return confirm(<%= h("Are you sure you want activate #{feature_name} to 0%?".to_json) %>)">0% </button>
+            </form>
+            <form action="<%= h(delete_feature_path(feature_name)) %>" method="POST">
+              <button class="p-3 bg-gray-100 ml-1 rounded-sm font-bold leading-none transition-colors duration-150 hover:bg-gray-200" type="submit" onclick="return confirm(<%= h("Are you sure you want to delete #{feature_name}?".to_json) %>)">Delete </button>
+            </form>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+
+<% global_history_events = @rollout.respond_to?(:logging) ? @rollout.logging.global_events.reverse : [] %>
+
+<%= erb :"features/partials/event_log", layout: false, locals: { events: global_history_events, show_feature: true, show_header: true, existing_features: @features } %>

data/lib/rollout/ui/views/features/new.erb

@@ -0,0 +1,16 @@
+<a class="text-sm text-blue-600 hover:text-blue-700 hover:underline" href="<%= h(index_path) %>">&larr; back to overview</a>
+
+<h2 class="font-semibold text-xl text-gray-500 pt-12">New Feature </h2>
+
+<div class="w-8 h-1 bg-gray-300 my-10"></div>
+
+<form class="p-6 bg-gray-100 max-w-lg w-full text-sm rounded-sm" action="<%= h(new_feature_path) %>" method="POST">
+  <div class="mb-5">
+    <label class="block text-gray-500 mb-2" for="name">Name</label>
+    <input class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="name" id="name">
+  </div>
+
+  <div class="flex items-center justify-end">
+    <button class="py-4 px-5 bg-gray-700 text-gray-200 rounded-sm font-bold leading-none transition-colors duration-200 hover:bg-gray-800" type="submit">Create</button>
+  </div>
+</form>

data/lib/rollout/ui/views/features/partials/event_log.erb

@@ -0,0 +1,65 @@
+<% show_feature ||= false %>
+<% show_header ||= false %>
+<% existing_features = existing_features.map(&:to_s) if show_feature %>
+
+<% if events.any? %>
+  <h2 class="font-semibold text-xl text-gray-500 pt-20 flex items-center">History</h2>
+  <div class="w-8 h-1 bg-gray-300 my-10"></div>
+
+  <div class="overflow-auto scrolling-touch">
+    <table class="text-sm w-100 text-left w-full">
+      <% if show_header %>
+        <thead class="font-semibold text-gray-600 border-b border-gray-200">
+          <% if show_feature %>
+            <th class="pb-2 pr-3 whitespace-nowrap">Feature</th>
+          <% end %>
+          <th class="pb-2 pr-3 w-full">Action</th>
+          <th class="pl-2 whitespace-nowrap" style="min-width: 160px;"></th>
+        </thead>
+      <% end %>
+
+      <tbody class="text-gray-600 border-t border-gray-200">
+        <% events.each do |event| %>
+          <tr class="border-b border-gray-200">
+            <% if show_feature %>
+              <td class="py-2 pr-3 whitespace-nowrap">
+                <% if existing_features.include?(event.feature.to_s) %>
+                  <a class="text-blue-600 hover:text-blue-700 hover:underline" href="<%= h(feature_path(event.feature)) %>"><%= h(event.feature) %></a>
+                <% else %>
+                  <%= h(event.feature) %>
+                <% end %>
+              </td>
+            <% end %>
+            <td class="py-2 pr-3 break-words w-full">
+              <% if event.name == "update" %>
+                <% if event.context && event.context[:actor] %>
+                  <% if config.defined?(:actor_url) %>
+                    <a class="underline" href="<%= h(config.get(:actor_url, event.context[:actor])) %>" target="_blank"><%= h(event.context[:actor]) %></a>
+                  <% else %>
+                    <%= h(event.context[:actor]) %>
+                  <% end %>
+                <% else %>
+                  unidentified user
+                <% end %>
+                <%
+                  changes = event.data.fetch(:before).keys.reject { |key| key.to_s == 'data.updated_at' }.map do |key|
+                    before = format_change_value(event.data.fetch(:before).fetch(key))
+                    after = format_change_value(event.data.fetch(:after).fetch(key))
+                    "#{format_change_key(key)} from #{before} to #{after}"
+                  end
+                %>
+                changed <%= h(changes.empty? ? 'nothing!' : changes.join(', ')) %>
+              <% else %>
+                <%= h(event.data) %>
+              <% end %>
+            </td>
+
+            <td class="py-2 text-right whitespace-nowrap pl-3" style="min-width: 160px;">
+              <span title="<%= h(event.created_at.strftime(Rollout::UI.config.timestamp_format)) %>"><%= h(time_ago(event.created_at)) %></span>
+            </td>
+          </tr>
+        <% end %>
+      </tbody>
+    </table>
+  </div>
+<% end %>

data/lib/rollout/ui/views/features/show.erb

@@ -0,0 +1,52 @@
+<a class="text-sm text-blue-600 hover:text-blue-700 hover:underline" href="<%= h(index_path) %>">&larr; back to overview </a>
+
+<% if params[:error] %>
+  <pre class="text-red-500"><%= h(params[:error]) %></pre>
+<% end %>
+<h2 class="font-semibold text-xl text-gray-500 pt-12"><%= h(@feature.name) %></h2>
+
+<div class="w-8 h-1 bg-gray-300 my-10"></div>
+<main class="p-6 bg-gray-100 max-w-lg w-full text-sm rounded-sm">
+  <form id="updateFormSubmit" action="<%= h(feature_path(@feature.name)) %>" method="POST">
+    <input type="hidden" name="last_updated_at" value="<%= h(@feature.data['updated_at']) %>">
+    <div class="mb-5">
+      <label class="block text-gray-500 mb-2" for="description">Description</label>
+      <input class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="description" id="description" value="<%= h(@feature.data['description']) %>">
+    </div>
+
+    <div class="mb-5">
+      <label class="block text-gray-500 mb-2" for="groups">Groups<span class="ml-1 text-gray-400">(multi-select)</span></label>
+      <select class="block appearance-none w-full bg-white border border-gray-300 px-4 py-3 rounded-sm leading-relaxed" name="groups[]" id="groups" multiple size="<%= h(@rollout.groups.count + 1) %>">
+        <option class="py-1 px-1" value=""<% if @feature.groups.count == 0 %> selected<% end %>>(none)</option>
+        <% @rollout.groups.each do |group| %>
+          <option class="py-1 px-1" value="<%= h(group) %>"<% if @feature.groups.include?(group) %> selected<% end %>><%= h(group) %></option>
+        <% end %>
+      </select>
+    </div>
+
+    <div class="mb-5">
+      <label class="block text-gray-500 mb-2" for="percentage">Percentage</label>
+      <input class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="percentage" id="percentage" value="<%= h(@feature.percentage) %>" type="number" step="0.1">
+    </div>
+
+    <div class="mb-5">
+      <label class="block text-gray-500 mb-2">Users</label>
+      <% if @feature.users.count > 150 %>
+        <div class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-gray-100"><%= h(@feature.users.count) %></div>
+      <% else %>
+        <textarea class="appearance-none border rounded-sm w-full py-2 px-4 text-gray-600 leading-relaxed bg-white hover:border-gray-500" name="users" id="users" value="<%= h(@feature.users.join(', ')) %>" rows="2"><%= h(@feature.users.join(', ')) %></textarea>
+      <% end %>
+    </div>
+  </form>
+
+  <div class="flex items-center justify-end">
+    <form action="<%= h(delete_feature_path(@feature.name)) %>" method="POST">
+      <button class="mr-5 text-gray-600 hover:underline" type="submit" onclick="return confirm(<%= h("Are you sure you want to delete #{@feature.name}?".to_json) %>)">Delete</button>
+    </form>
+    <button class="py-4 px-5 bg-gray-700 text-gray-200 rounded-sm font-bold leading-none transition-colors duration-200 hover:bg-gray-800" type="submit" form="updateFormSubmit">Update</button>
+  </div>
+</main>
+
+<% history_events = @rollout.respond_to?(:logging) ? @rollout.logging.events(@feature.name).reverse : [] %>
+
+<%= erb :"features/partials/event_log", layout: false, locals: { events: history_events } %>

data/lib/rollout/ui/views/layout.erb

@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Rollout UI</title>
+    <meta name="viewport" content="width=device-width initial-scale=1">
+    <meta name="color-scheme" content="light dark">
+    <link rel="stylesheet" href="<%= h(stylesheet_path('tailwind.min')) %>">
+    <style>
+      :root { color-scheme: light; }
+      :root.dark { color-scheme: dark; }
+      body { transition: background-color 0.2s, color 0.2s; }
+      .dark { background-color: #1a1a1a; color: #e5e5e5; }
+      .dark .text-gray-700 { color: #d1d1d1; }
+      .dark .text-gray-600 { color: #b8b8b8; }
+      .dark .text-gray-500 { color: #9ca3af; }
+      .dark .text-gray-400 { color: #6b7280; }
+      .dark .bg-gray-100 { background-color: #2a2a2a; }
+      .dark .bg-gray-200 { background-color: #333333; }
+      .dark .bg-gray-300 { background-color: #404040; }
+      .dark .border { border-color: #555555; }
+      .dark .border-gray-200 { border-color: #404040; }
+      .dark .hover\:bg-gray-200:hover { background-color: #3a3a3a; }
+      .dark .text-blue-600 { color: #60a5fa; }
+      .dark .hover\:text-blue-700:hover { color: #93c5fd; }
+      .dark .bg-white { background-color: #333333; }
+      .dark .border-gray-300 { border-color: #555555; }
+      .dark .hover\:bg-gray-800:hover { background-color: #4a4a4a; }
+    </style>
+  </head>
+  <body>
+    <!-- Addresses https://stackoverflow.com/questions/21147149/flash-of-unstyled-content-fouc-in-firefox-only-is-ff-slow-renderer -->
+    <script>0</script>
+    <script>
+      (function() {
+        const theme = localStorage.getItem('theme') || 'system';
+        function applyTheme(t) {
+          const root = document.documentElement;
+          if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
+            root.classList.add('dark');
+          } else {
+            root.classList.remove('dark');
+          }
+        }
+        applyTheme(theme);
+        window.addEventListener('DOMContentLoaded', function() {
+          const btn = document.getElementById('theme-toggle');
+          btn.textContent = theme;
+          btn.addEventListener('click', function() {
+            const current = localStorage.getItem('theme') || 'system';
+            const next = current === 'light' ? 'dark' : current === 'dark' ? 'system' : 'light';
+            localStorage.setItem('theme', next);
+            applyTheme(next);
+            btn.textContent = next;
+          });
+          window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
+            if (localStorage.getItem('theme') === 'system') applyTheme('system');
+          });
+        });
+      })();
+    </script>
+    <div class="container mx-auto font-mono text-gray-700 px-5 pb-20">
+      <div class="flex items-center pt-20">
+        <h1 class="font-light text-4xl text-gray-600 flex-auto">
+          <a href="<%= h(index_path) %>" class="hover:text-blue-700">Rollout </a>
+        </h1>
+        <button id="theme-toggle" class="text-sm text-gray-600 p-2 bg-gray-100 rounded-sm transition-colors duration-150 hover:bg-gray-200">system</button>
+      </div>
+      <%= yield %>
+    </div>
+  </body>
+</html>

data/lib/rollout/ui/web.rb

@@ -23,12 +23,12 @@ module Rollout::UI
           end
         )
       else
-        slim :'features/index'
+        erb :'features/index'
       end
     end
 
     get '/features/new' do
-      slim :'features/new'
+      erb :'features/new'
     end
 
     post '/features/new' do
@@ -42,7 +42,7 @@ module Rollout::UI
       if json_request?
         json(feature_to_hash(@feature))
       else
-        slim :'features/show'
+        erb :'features/show'
       end
     end
 
@@ -60,8 +60,8 @@ module Rollout::UI
           if params[:users]
             feature.users = params[:users].split(',').map(&:strip).uniq.sort
           end
-          feature.data.update(description: params[:description])
-          feature.data.update(updated_at: Time.now.to_i)
+          feature.data["description"] = params[:description]
+          feature.data["updated_at"] = Time.now.to_i
         end
       end
 
@@ -75,7 +75,7 @@ module Rollout::UI
       with_rollout_context(rollout, actor: actor) do
         rollout.with_feature(params[:feature_name]) do |feature|
           feature.percentage = params[:percentage].to_f.clamp(0.0, 100.0)
-          feature.data.update(updated_at: Time.now.to_i)
+          feature.data["updated_at"] = Time.now.to_i
         end
       end
 

data/rollout-ui.gemspec

@@ -22,11 +22,12 @@ Gem::Specification.new do |spec|
   spec.executables   = spec.files.grep(%r{^exe/}) { |f| File.basename(f) }
   spec.require_paths = ['lib']
 
-  spec.add_dependency 'rollout', '~> 2.6'
+  spec.add_dependency 'rollout', '>= 3.1', '< 4'
   spec.add_dependency 'sinatra', ['>= 2.0', '< 5.0']
   spec.add_dependency 'sinatra-contrib', ['>= 2.0', '< 5.0']
-  spec.add_dependency 'slim', ['>= 3.0', '< 6.0']
 
+  spec.add_development_dependency 'rollout-redis-adapter', '~> 0.1'
+  spec.add_development_dependency 'redis-namespace'
   spec.add_development_dependency 'bundler', '>= 1.17'
   spec.add_development_dependency 'rake'
   spec.add_development_dependency 'rspec', '~> 3.13'

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: rollout-ui
 version: !ruby/object:Gem::Version
-  version: 0.8.1
+  version: 0.9.0
 platform: ruby
 authors:
 - FetLife
@@ -13,16 +13,22 @@ dependencies:
   name: rollout
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.1'
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '2.6'
+        version: '4'
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
-    - - "~>"
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '3.1'
+    - - "<"
       - !ruby/object:Gem::Version
-        version: '2.6'
+        version: '4'
 - !ruby/object:Gem::Dependency
   name: sinatra
   requirement: !ruby/object:Gem::Requirement
@@ -64,25 +70,33 @@ dependencies:
       - !ruby/object:Gem::Version
         version: '5.0'
 - !ruby/object:Gem::Dependency
-  name: slim
+  name: rollout-redis-adapter
   requirement: !ruby/object:Gem::Requirement
     requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '3.0'
-    - - "<"
+    - - "~>"
       - !ruby/object:Gem::Version
-        version: '6.0'
-  type: :runtime
+        version: '0.1'
+  type: :development
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '0.1'
+- !ruby/object:Gem::Dependency
+  name: redis-namespace
+  requirement: !ruby/object:Gem::Requirement
     requirements:
     - - ">="
       - !ruby/object:Gem::Version
-        version: '3.0'
-    - - "<"
+        version: '0'
+  type: :development
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
       - !ruby/object:Gem::Version
-        version: '6.0'
+        version: '0'
 - !ruby/object:Gem::Dependency
   name: bundler
   requirement: !ruby/object:Gem::Requirement
@@ -221,11 +235,11 @@ files:
 - lib/rollout/ui/helpers.rb
 - lib/rollout/ui/public/css/tailwind.min.css
 - lib/rollout/ui/version.rb
-- lib/rollout/ui/views/features/index.slim
-- lib/rollout/ui/views/features/new.slim
-- lib/rollout/ui/views/features/partials/event_log.slim
-- lib/rollout/ui/views/features/show.slim
-- lib/rollout/ui/views/layout.slim
+- lib/rollout/ui/views/features/index.erb
+- lib/rollout/ui/views/features/new.erb
+- lib/rollout/ui/views/features/partials/event_log.erb
+- lib/rollout/ui/views/features/show.erb
+- lib/rollout/ui/views/layout.erb
 - lib/rollout/ui/web.rb
 - rollout-ui.gemspec
 - screenshot_index.png

data/lib/rollout/ui/views/features/index.slim

@@ -1,63 +0,0 @@
-h2.font-semibold.text-xl.text-gray-500.pt-12.flex.items-center
-  .flex-auto
-    | Features
-    span.text-sm.p-1.bg-gray-100.ml-1.rounded-sm.font-bold.leading-none #{@features.count}
-
-  form.flex-none action=new_feature_path method='GET'
-    button.text-sm.text-gray-600.p-3.bg-gray-100.ml-1.rounded-sm.font-bold.leading-none.transition-colors.duration-150(class='hover:bg-gray-200' type='submit')
-      ' Add New Feature
-
-.w-8.h-1.bg-gray-300.my-10
-
-.overflow-auto.scrolling-touch
-  table.text-sm.w-100.text-left.w-full
-    thead.font-semibold.text-gray-500.border-b.border-gray-200
-      th.pb-2.pr-3 Name
-      th.pb-2.pr-3 Percentage
-      th.pb-2.pr-3 Groups
-      th.pb-2.pr-3 Users
-      - if @rollout.respond_to?(:logging)
-        th.pb-2.pr-3 Updated
-      th.pl-2
-
-    tbody.text-gray-600
-      - @features.each do |feature_name|
-        - feature = @rollout.get(feature_name)
-        tr.border-b.border-gray-200
-          td.py-2
-            a.text-blue-600(href=feature_path(feature.name) class='hover:text-blue-700 hover:underline')
-              = feature_name
-            div.text-gray-500.text-xs = feature.data['description']
-          td.py-2.whitespace-no-wrap
-            - if feature.percentage == 0
-              span.text-gray-400 #{feature.percentage}%
-            - else
-              | #{feature.percentage}%
-          td.py-2.whitespace-no-wrap
-            = feature.groups.join(', ')
-          td.py-2.whitespace-no-wrap
-            - if feature.users.count == 0
-              span.text-gray-400 = feature.users.count
-            - else
-              = feature.users.count
-          - if @rollout.respond_to?(:logging)
-            td.py-2.whitespace-no-wrap
-              - updated_at = @rollout.logging.updated_at(feature_name)
-              - if updated_at.nil?
-                span.text-gray-400 Never
-              - else
-                span title=updated_at.strftime(Rollout::UI.config.timestamp_format) = time_ago(updated_at)
-          td.flex.items-center.py-2.justify-end.whitespace-no-wrap.pl-3
-            form action=activate_percentage_feature_path(feature_name, 100) method='POST'
-              button.p-3.bg-gray-100.ml-1.rounded-sm.font-bold.leading-none.transition-colors.duration-150(class='hover:bg-gray-200' type='submit' onclick="return confirm('Are you sure you want activate #{sanitized_name(feature_name)} to 100%?')")
-                ' 100%
-            form action=activate_percentage_feature_path(feature_name, 0) method='POST'
-              button.p-3.bg-gray-100.ml-1.rounded-sm.font-bold.leading-none.transition-colors.duration-150(class='hover:bg-gray-200' type='submit' onclick="return confirm('Are you sure you want activate #{sanitized_name(feature_name)} to 0%?')")
-                ' 0%
-            form action=delete_feature_path(feature_name) method='POST'
-              button.p-3.bg-gray-100.ml-1.rounded-sm.font-bold.leading-none.transition-colors.duration-150(class='hover:bg-gray-200' type='submit' onclick="return confirm('Are you sure you want to delete #{sanitized_name(feature_name)}?')")
-                ' Delete
-
-- global_history_events = @rollout.respond_to?(:logging) ? @rollout.logging.global_events.reverse : []
-
-== slim :"features/partials/event_log", locals: { events: global_history_events, show_feature: true, show_header: true }

data/lib/rollout/ui/views/features/new.slim

@@ -1,14 +0,0 @@
-a.text-sm.text-blue-600(href=index_path class='hover:text-blue-700 hover:underline') ← back to overview
-
-h2.font-semibold.text-xl.text-gray-500.pt-12
-  ' New Feature
-
-.w-8.h-1.bg-gray-300.my-10
-
-form.p-6.bg-gray-100.max-w-lg.w-full.text-sm.rounded-sm action=new_feature_path method='POST'
-  .mb-5
-    label.block.text-gray-500.mb-2(for='name') Name
-    input.appearance-none.border.rounded-sm.w-full.py-2.px-4.text-gray-600.leading-relaxed.bg-white(name='name' id='name' class='hover:border-gray-500')
-
-  .flex.items-center.justify-end
-    button.py-4.px-5.bg-gray-700.text-gray-200.rounded-sm.font-bold.leading-none.transition-colors.duration-200(class='hover:bg-gray-800' type='submit') Create

data/lib/rollout/ui/views/features/partials/event_log.slim

@@ -1,49 +0,0 @@
-- show_feature ||= false
-- show_header ||= false
-
-- if events.any?
-  h2.font-semibold.text-xl.text-gray-500.pt-20.flex.items-center
-    | History
-  .w-8.h-1.bg-gray-300.my-10
-
-  .overflow-auto.scrolling-touch
-    table.text-sm.w-100.text-left.w-full
-      - if show_header
-        thead.font-semibold.text-gray-600.border-b.border-gray-200
-          - if show_feature
-            th.pb-2.pr-3.whitespace-nowrap Feature
-          th.pb-2.pr-3.w-full Action
-          th.pl-2.whitespace-nowrap style="min-width: 160px;"
-
-      tbody.text-gray-600.border-t.border-gray-200
-        - events.each do |event|
-          tr.border-b.border-gray-200
-            - if show_feature
-              td.py-2.pr-3.whitespace-nowrap
-                a.text-blue-600(href=feature_path(event.feature) class='hover:text-blue-700 hover:underline')
-                  = event.feature
-            td.py-2.pr-3.break-words.w-full
-              - if event.name == "update"
-                - if event.context && event.context[:actor]
-                  - if config.defined?(:actor_url)
-                    a.underline> href=config.get(:actor_url, event.context[:actor]) target='_blank'
-                      = event.context[:actor]
-                  - else
-                    ' #{event.context[:actor]}
-                - else
-                  ' unidentified user
-                - changes = event.data.fetch(:before).keys.reject { |key| key.to_s == 'data.updated_at' }.map do |key|
-                  - before = format_change_value(event.data.fetch(:before).fetch(key))
-                  - after = format_change_value(event.data.fetch(:after).fetch(key))
-                  - "#{format_change_key(key)} from #{before} to #{after}"
-
-                ' changed
-                - unless changes.empty?
-                  = changes.join(', ')
-                - else
-                  ' nothing!
-              - else
-                = event.data
-
-            td.py-2.text-right.whitespace-nowrap.pl-3 style="min-width: 160px;"
-              span title=event.created_at.strftime(Rollout::UI.config.timestamp_format) = time_ago(event.created_at)

data/lib/rollout/ui/views/features/show.slim

@@ -1,77 +0,0 @@
-a.text-sm.text-blue-600(href=index_path class='hover:text-blue-700 hover:underline')
-  ' ← back to overview
-
-- if params[:error]
-  pre.text-red-500= params[:error]
-h2.font-semibold.text-xl.text-gray-500.pt-12
-  = @feature.name
-
-.w-8.h-1.bg-gray-300.my-10
-main.p-6.bg-gray-100.max-w-lg.w-full.text-sm.rounded-sm
-  form#updateFormSubmit action=feature_path(@feature.name) method='POST'
-    input type='hidden' name='last_updated_at' value=(@feature.data['updated_at'])
-    .mb-5
-      label.block.text-gray-500.mb-2(for='description') Description
-      input.appearance-none.border.rounded-sm.w-full.py-2.px-4.text-gray-600.leading-relaxed.bg-white(
-        name='description'
-        id='description'
-        value=@feature.data['description']
-        class='hover:border-gray-500'
-      )
-
-    .mb-5
-      label.block.text-gray-500.mb-2(for='groups')
-        | Groups
-        span.ml-1.text-gray-400
-          | (multi-select)
-      select.block.appearance-none.w-full.bg-white.border.border-gray-300.px-4.py-3.rounded-sm.leading-relaxed(name="groups[]" id='groups' multiple=true size=(@rollout.groups.count + 1))
-        option.py-1.px-1(value='' selected=(@feature.groups.count == 0))
-          = '(none)'
-        - @rollout.groups.each do |group|
-          option.py-1.px-1(
-            value=group
-            selected=@feature.groups.include?(group)
-          )
-            = group
-
-    .mb-5
-      label.block.text-gray-500.mb-2(for='percentage') Percentage
-      input.appearance-none.border.rounded-sm.w-full.py-2.px-4.text-gray-600.leading-relaxed.bg-white(
-        name='percentage'
-        id='percentage'
-        value=@feature.percentage
-        class='hover:border-gray-500'
-        type='number'
-        step='0.1'
-      )
-
-    .mb-5
-      label.block.text-gray-500.mb-2 Users
-
-      - if @feature.users.count > 150
-        .appearance-none.border.rounded-sm.w-full.py-2.px-4.text-gray-600.leading-relaxed.bg-gray-100
-          = @feature.users.count
-      - else
-        textarea.appearance-none.border.rounded-sm.w-full.py-2.px-4.text-gray-600.leading-relaxed.bg-white(
-          name='users'
-          id='users'
-          value=@feature.users.join(', ')
-          class='hover:border-gray-500'
-          rows='2'
-        )
-          = @feature.users.join(', ')
-
-  .flex.items-center.justify-end
-    form action=delete_feature_path(@feature.name) method='POST'
-      button.mr-5.text-gray-600(class='hover:underline' type='submit' onclick="return confirm('Are you sure you want to delete #{sanitized_name(@feature.name)}?')")
-        | Delete
-    button.py-4.px-5.bg-gray-700.text-gray-200.rounded-sm.font-bold.leading-none.transition-colors.duration-200(
-      type='submit'
-      class='hover:bg-gray-800'
-      form='updateFormSubmit'
-    )
-      | Update
-
-- history_events = @rollout.respond_to?(:logging) ? @rollout.logging.events(@feature.name).reverse : []
-
-== slim :"features/partials/event_log", locals: { events: history_events }

data/lib/rollout/ui/views/layout.slim

@@ -1,68 +0,0 @@
-doctype html
-html
-  head
-    title Rollout UI
-    meta name='viewport' content='width=device-width initial-scale=1'
-    meta name='color-scheme' content='light dark'
-    link rel='stylesheet' href=stylesheet_path('tailwind.min')
-    style
-      | :root { color-scheme: light; }
-      | :root.dark { color-scheme: dark; }
-      | body { transition: background-color 0.2s, color 0.2s; }
-      | .dark { background-color: #1a1a1a; color: #e5e5e5; }
-      | .dark .text-gray-700 { color: #d1d1d1; }
-      | .dark .text-gray-600 { color: #b8b8b8; }
-      | .dark .text-gray-500 { color: #9ca3af; }
-      | .dark .text-gray-400 { color: #6b7280; }
-      | .dark .bg-gray-100 { background-color: #2a2a2a; }
-      | .dark .bg-gray-200 { background-color: #333333; }
-      | .dark .bg-gray-300 { background-color: #404040; }
-      | .dark .border { border-color: #555555; }
-      | .dark .border-gray-200 { border-color: #404040; }
-      | .dark .hover\:bg-gray-200:hover { background-color: #3a3a3a; }
-      | .dark .text-blue-600 { color: #60a5fa; }
-      | .dark .hover\:text-blue-700:hover { color: #93c5fd; }
-      | .dark .bg-white { background-color: #333333; }
-      | .dark .border-gray-300 { border-color: #555555; }
-      | .dark .hover\:bg-gray-800:hover { background-color: #4a4a4a; }
-
-  body
-    / Addresses https://stackoverflow.com/questions/21147149/flash-of-unstyled-content-fouc-in-firefox-only-is-ff-slow-renderer
-    script 0
-
-    script
-      | (function() {
-      |   const theme = localStorage.getItem('theme') || 'system';
-      |   function applyTheme(t) {
-      |     const root = document.documentElement;
-      |     if (t === 'dark' || (t === 'system' && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
-      |       root.classList.add('dark');
-      |     } else {
-      |       root.classList.remove('dark');
-      |     }
-      |   }
-      |   applyTheme(theme);
-      |   window.addEventListener('DOMContentLoaded', function() {
-      |     const btn = document.getElementById('theme-toggle');
-      |     btn.textContent = theme;
-      |     btn.addEventListener('click', function() {
-      |       const current = localStorage.getItem('theme') || 'system';
-      |       const next = current === 'light' ? 'dark' : current === 'dark' ? 'system' : 'light';
-      |       localStorage.setItem('theme', next);
-      |       applyTheme(next);
-      |       btn.textContent = next;
-      |     });
-      |     window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function() {
-      |       if (localStorage.getItem('theme') === 'system') applyTheme('system');
-      |     });
-      |   });
-      | })();
-
-    .container.mx-auto.font-mono.text-gray-700.px-5.pb-20
-      .flex.items-center.pt-20
-        h1.font-light.text-4xl.text-gray-600.flex-auto
-          a href=index_path class='hover:text-blue-700'
-            ' Rollout
-        button#theme-toggle.text-sm.text-gray-600.p-2.bg-gray-100.rounded-sm.transition-colors.duration-150(class='hover:bg-gray-200') system
-
-      == yield