Skip to content

Commit

Permalink
feat(nimbus): Launch control flow
Browse files Browse the repository at this point in the history
  • Loading branch information
@yashikakhurana
yashikakhurana committed Dec 24, 2024
1 parent fab606b commit c98ad23
Show file tree
Hide file tree
Showing 10 changed files with 215 additions and 224 deletions.
8 changes: 8 additions & 0 deletions experimenter/experimenter/experiments/models.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -681,10 +681,18 @@ def is_started(self):
def can_draft_to_preview(self):
return self.is_draft and not self.is_review

@property
def can_draft_to_review(self):
return self.can_draft_to_preview

@property
def can_preview_to_draft(self):
return self.is_preview

@property
def can_preview_to_review(self):
return self.is_preview

@property
def draft_date(self):
if change := self.changes.all().order_by("changed_on").first():
Expand Down
25 changes: 13 additions & 12 deletions experimenter/experimenter/nimbus_ui_new/static/js/control.js
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,14 @@
export default function toggleSubmitButton() {
const checkboxes = document.querySelectorAll(".form-check-input");
const submitButton = document.getElementById("request-launch-button");
const allChecked = Array.from(checkboxes).every(
(checkbox) => checkbox.checked,
window.showRecommendation = function () {
const defaultControls = document.getElementById("default-controls");
const recommendationMessage = document.getElementById(
"recommendation-message",
);
submitButton.disabled = !allChecked;
}
document.body.addEventListener("htmx:afterSwap", () => {
document.querySelectorAll(".form-check-input").forEach((checkbox) => {
checkbox.addEventListener("change", toggleSubmitButton);
});
});
defaultControls.classList.add("d-none");
recommendationMessage.classList.remove("d-none");
};
window.toggleSubmitButton = function () {
const checkbox1 = document.getElementById("checkbox-1");
const checkbox2 = document.getElementById("checkbox-2");
const submitButton = document.getElementById("request-launch-button");
submitButton.disabled = !(checkbox1.checked && checkbox2.checked);
};
43 changes: 2 additions & 41 deletions experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/detail.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,47 +22,8 @@
</div>
{% endfor %}
{% endif %}




<div id="launch-controls">
<form>
{% csrf_token %}

{% if experiment.is_draft %}
{% if experiment.can_draft_to_preview %}
<button type="button"
class="btn btn-primary"
hx-post="{% url 'nimbus-new-draft-to-preview' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML">
Preview
</button>
{% endif %}
{% if experiment.can_draft_to_review %}
<button type="button"
class="btn btn-primary"
hx-post="{% url 'nimbus-new-draft-to-preview' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML">
Request Launch without Preview
</button>
{% endif %}
{% elif experiment.is_preview %}
{% if experiment.can_preview_to_draft %}
{% endif %}
{% if eperiment.can_preview_to_review %}
{% endif %}
{% elif experiment.is_review %}
{% endif %}
</form>
</div>



<!-- Launch Controls Card-->
{% include "nimbus_experiments/launch_controls.html" %}

<!-- Takeaways Card -->
{% include "nimbus_experiments/takeaways_card.html" %}
Expand Down
159 changes: 129 additions & 30 deletions experimenter/experimenter/nimbus_ui_new/templates/nimbus_experiments/launch_controls.html
View file
Original file line number Diff line number Diff line change
@@ -1,31 +1,130 @@
{# templates/nimbus_experiments/launch_controls.html #}
<div class="alert alert-secondary">
<p>
Do you want to test this experiment before launching to production?
<a href="{{ EXTERNAL_URLS.PREVIEW_LAUNCH_DOC }}"
target="_blank"
class="mr-1">Learn more</a>
</p>
<div class="d-flex">
<form method="post"
action="{% url 'nimbus-new-draft-to-preview' slug=experiment.slug %}"
hx-post="{% url 'nimbus-new-draft-to-preview' slug=experiment.slug %}"
hx-target="#launch-controls, #experiment-timeline"
hx-swap="innerHTML">
{% csrf_token %}
<button type="submit"
class="btn btn-primary mx-2"
{% if is_loading %}disabled{% endif %}>Preview for Testing</button>
</form>
<form method="post"
action="{% url 'nimbus-new-draft-to-review' slug=experiment.slug %}"
hx-post="{% url 'nimbus-new-draft-to-review' slug=experiment.slug %}"
hx-target="#launch-controls, #experiment-timeline"
hx-swap="outerHTML">
{% csrf_token %}
<button type="submit"
class="btn btn-secondary"
{% if is_loading %}disabled{% endif %}>Request Launch without Preview</button>
</form>
</div>
<div id="launch-controls">
<form>
{% csrf_token %}
<!-- Draft Mode Controls -->
{% if experiment.is_draft %}
<div id="default-controls" class="alert alert-secondary">
<p>
Do you want to test this experiment before launching to production?
<a href="{{ EXTERNAL_URLS.PREVIEW_LAUNCH_DOC }}"
target="_blank"
class="mr-1">Learn more</a>
</p>
{% if experiment.can_draft_to_preview %}
<button type="button"
class="btn btn-primary"
hx-post="{% url 'nimbus-new-draft-to-preview' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML">Preview for Testing</button>
{% endif %}
{% if experiment.can_draft_to_review %}
<button type="button"
class="btn btn-secondary"
onclick="showRecommendation()">Request Launch without Preview</button>
{% endif %}
</div>
<!-- Recommendation Message -->
<div id="recommendation-message" class="d-none">
<div class="alert alert-warning">
<p>
<strong>We recommend previewing before launch</strong>
<button type="button"
class="btn btn-primary"
hx-post="{% url 'nimbus-new-draft-to-preview' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML">Preview Now</button>
</p>
<div class="form-check">
<input type="checkbox"
class="form-check-input"
id="checkbox-1"
onchange="toggleSubmitButton()">
<label class="form-check-label" for="checkbox-1">I understand the risks associated with launching an experiment</label>
</div>
<div class="form-check">
<input type="checkbox"
class="form-check-input"
id="checkbox-2"
onchange="toggleSubmitButton()">
<label class="form-check-label" for="checkbox-2">
I have gone through the <a href="{{ EXTERNAL_URLS.TRAINING_AND_PLANNING_DOC }}" target="_blank">experiment onboarding program</a>
</label>
</div>
<button type="button"
class="btn btn-primary"
id="request-launch-button"
hx-post="{% url 'nimbus-new-draft-to-review' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML"
disabled>Request Launch</button>
<button type="button"
class="btn btn-secondary"
hx-post="{% url 'nimbus-new-review-to-draft' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML">Cancel</button>
</div>
</div>
<!-- Preview Mode Controls -->
{% elif experiment.is_preview %}
<div class="alert alert-success bg-transparent text-success">
<p class="my-1">All set! Your experiment is in Preview mode and you can test it now.</p>
</div>
<div class="alert alert-secondary">
<p class="my-1">
This experiment is currently <strong>live for testing</strong>, but you will need to let QA know in your
<a href="{{ EXTERNAL_URLS.SIGNOFF_QA }}" target="_blank">PI request</a>. When you have received a sign-off, click “Request Launch” to launch the experiment.
<strong>Note: It can take up to an hour before clients receive a preview experiment.</strong>
</p>
<div class="form-check">
<input type="checkbox"
class="form-check-input"
id="checkbox-1"
onchange="toggleSubmitButton()">
<label class="form-check-label" for="checkbox-1">I understand the risks associated with launching an experiment</label>
</div>
<div class="form-check">
<input type="checkbox"
class="form-check-input"
id="checkbox-2"
onchange="toggleSubmitButton()">
<label class="form-check-label" for="checkbox-2">
I have gone through the <a href="{{ EXTERNAL_URLS.TRAINING_AND_PLANNING_DOC }}" target="_blank">experiment onboarding program</a>
</label>
</div>
{% if experiment.can_preview_to_review %}
<button type="button"
class="btn btn-primary"
id="request-launch-button"
hx-post="{% url 'nimbus-new-preview-to-review' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML"
disabled>Request Launch</button>
{% endif %}
{% if experiment.can_preview_to_draft %}
<button type="button"
class="btn btn-secondary"
hx-post="{% url 'nimbus-new-preview-to-draft' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML">Go back to Draft</button>
{% endif %}
</div>
<!-- Review Mode Controls -->
{% elif experiment.is_review %}
<div class="alert alert-warning">
<p>The experiment is currently under review. If you wish to cancel the review, click the button below:</p>
<button type="button"
class="btn btn-primary"
hx-post="{% url 'nimbus-new-review-to-draft' slug=experiment.slug %}"
hx-select="#content"
hx-target="#content"
hx-swap="outerHTML">Cancel Review</button>
</div>
{% endif %}
</form>
</div>
55 changes: 0 additions & 55 deletions ...experimenter/nimbus_ui_new/templates/nimbus_experiments/launch_with_preview_controls.html
View file

This file was deleted.

46 changes: 0 additions & 46 deletions ...erimenter/nimbus_ui_new/templates/nimbus_experiments/launch_without_preview_controls.html
View file

This file was deleted.

Loading

0 comments on commit c98ad23

Please sign in to comment.