wip

Author: dumbbell

deps/rabbitmq_management/priv/www/js/tmpl/feature-flags.ejs

@@ -1,8 +1,14 @@
 <h1>Feature Flags</h1>
   <%
        var needs_enabling = false;
+       var nonreq_feature_flags = [];
        for (var i = 0; i < feature_flags.length; i++) {
-         var feature_flag = feature_flags[i];
+         if (feature_flags[i].stability == 'required')
+           continue;
+         nonreq_feature_flags.push(feature_flags[i]);
+       }
+       for (var i = 0; i < nonreq_feature_flags.length; i++) {
+         var feature_flag = nonreq_feature_flags[i];
          if (feature_flag.state == "disabled" && feature_flag.stability != "experimental") {
            needs_enabling = true;
          }
@@ -15,9 +21,57 @@
 <div class="section">
   <h2>Feature Flags</h2>
   <div class="hider">
-<%= filter_ui(feature_flags) %>
+<%= filter_ui(nonreq_feature_flags) %>
   <div class="updatable">
-<% if (feature_flags.length > 0) { %>
+<% if (nonreq_feature_flags.length > 0) { %>
+<%
+function fmt_feature_flag(feature_flag) {
+    var output = '{';
+    for (const [key, value] of Object.entries(feature_flag)) {
+        output += fmt_string(key) + ': "' + fmt_string(value) + '", ';
+    }
+    output += '}';
+    return output;
+}
+%>
+
+<script>
+function handle_feature_flag(checkbox, feature_flag) {
+    console.log(checkbox, feature_flag);
+
+    if (feature_flag.stability == 'experimental') {
+        var dialog = document.getElementById("ff-exp-dialog");
+        var name_placeholders = document.querySelectorAll("#ff-exp-dialog .ff-name");
+        var confirm_button = document.querySelector("#ff-exp-dialog button");
+
+        /* Fill name placeholders with the feature flag name. */
+        name_placeholders.forEach(function (name_placeholder) {
+            name_placeholder.innerText = feature_flag.name;
+        });
+
+        confirm_button.addEventListener("click", () => {
+            dialog.close();
+            enable_feature_flag(feature_flag);
+        });
+
+        dialog.showModal();
+    } else {
+        enable_feature_flag(feature_flag);
+    }
+}
+
+function enable_feature_flag(feature_flag) {
+    console.log('Enable', feature_flag);
+
+    var name_field = document.getElementById('ff-enable-form-name');
+    name_field.value = feature_flag.name;
+
+    var form = document.getElementById('ff-enable-form');
+    console.log(form);
+    form.requestSubmit();
+}
+</script>
+
 <table class="list">
   <thead>
     <tr>
@@ -28,15 +82,11 @@
   </thead>
   <tbody>
     <%
-       for (var i = 0; i < feature_flags.length; i++) {
-         var feature_flag = feature_flags[i];
-         if (feature_flag.stability == "required") {
-           /* Hide required feature flags. There is nothing the user can do
-            * about them and they just add noise to the UI. */
-           continue;
-         }
+       for (var i = 0; i < nonreq_feature_flags.length; i++) {
+         var feature_flag = nonreq_feature_flags[i];
          if (feature_flag.stability == "experimental") {
-           continue;
+           /* Experimental feature flags are displayed in a separate table. */
+           //continue;
          }
          var state_color = "grey";
          if (feature_flag.state == "enabled") {
@@ -49,24 +99,11 @@
     %>
        <tr<%= alt_rows(i)%>>
          <td><%= fmt_string(feature_flag.name) %></td>
-         <td class="c">
-           <% if (feature_flag.stability == "experimental") { %>
-              <span>Experimental</span>
-           <% } else if (feature_flag.stability == "stable" && feature_flag.state == "disabled") { %>
-              <p><span>&#9888;</span>Disabled!</p>
-           <% } %>
-           <% if (feature_flag.state == "disabled") { %>
-           <form action="#/feature-flags-enable" method="put" style="display: inline-block" class="enable-feature-flag">
-           <input type="hidden" name="name" value="<%= fmt_string(feature_flag.name) %>"/>
-           <input type="submit" value="Enable" class="c"/>
-           </form>
-           <% } else { %>
-           <abbr class="status-<%= fmt_string(state_color) %>"
-             style="text-transform: capitalize"
-             title="Feature flag state: <%= fmt_string(feature_flag.state) %>">
-           <%= fmt_string(feature_flag.state) %>
-           </abbr>
-           <% } %>
+         <td class="c ff-stability-<%= feature_flag.stability %> ff-state-<%= feature_flag.state %>">
+           <input type="checkbox" class="toggle"
+                  onchange='handle_feature_flag(
+                              this,
+                              <%= fmt_feature_flag(feature_flag) %>);'/>
          </td>
          <td>
          <p><%= fmt_string(feature_flag.desc) %></p>
@@ -78,6 +115,16 @@
     <% } %>
   </tbody>
 </table>
+<dialog id="ff-exp-dialog">
+    <h1>Enabling an experimental feature flag</h1>
+    <p>
+    The <span class="ff-name"></span> feature flag is experimental!
+    <button>Enable <span class="ff-name"></span></button>
+    </p>
+</dialog>
+<form id="ff-enable-form" action="#/feature-flags-enable" method="put">
+    <input id="ff-enable-form-name" type="hidden" name="name"/>
+</form>
 <% } else { %>
     <p>... no feature_flags ...</p>
 <% } %>
@@ -90,7 +137,7 @@
 <div class="section">
   <h2>Opt-in Feature Flags</h2>
   <div class="hider">
-<% if (feature_flags.length > 0) { %>
+<% if (nonreq_feature_flags.length > 0) { %>
 <p class="warning">
 These feature flags opt-in.
 
@@ -106,8 +153,8 @@ These flags can be enabled in production deployments after an appropriate amount
   </thead>
   <tbody>
     <%
-       for (var i = 0; i < feature_flags.length; i++) {
-         var feature_flag = feature_flags[i];
+       for (var i = 0; i < nonreq_feature_flags.length; i++) {
+         var feature_flag = nonreq_feature_flags[i];
          if (feature_flag.stability != "experimental") {
            continue;
          }