Skip to content

Commit

Permalink
Improve server side experiments section of ab test admin page (#26967)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jakeii
Jakeii authored Mar 14, 2024
1 parent 191b55c commit cf99c27
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 82 deletions.
39 changes: 35 additions & 4 deletions admin/app/views/fragments/serverBasedExperiments.scala.html
View file
Original file line number Diff line number Diff line change
@@ -1,30 +1,40 @@
@import conf.switches.Switch
@import experiments.Experiment
@import experiments.ActiveExperiments.allExperiments
@import conf.Configuration

@()

<div class="abtests-server-based">
<h3 class="abtest-item__titlebar">Server-based tests</h3>

<div class="row">
<div class="col-md-7">
<table class="table table-bordered ">
<table class="table table-bordered table-r table-bordered table-hover">
<thead>
<th colspan="4">Name</th>
<th colspan="3">State</th>
<th colspan="5">Links</th>
<th colspan="3">Bucket</th>
<th colspan="3">Expires</th>
<th colspan="3">Audience</th>
</thead>
<tbody>
@allExperiments.map { experiment =>
<tr>
<td colspan="4">@experiment.name @status(experiment)</td>
<td colspan="4">@experiment.name</td>
<td colspan="3">@status(experiment)</td>
<td colspan="5">@links(experiment)</td>
<td colspan="3"><pre>@experiment.participationGroup</pre></td>
<td colspan="3">@Switch.expiry(experiment.switch).daysToExpiry days</td>
<td colspan="3">@experiment.participationGroup.percentage%</td>

</tr>
}
@if(allExperiments.isEmpty) {
<tr><td colspan="7">There are currently no server side tests</td></tr>
}
</tbody>
</table>
</div>
</div>
</div>

Expand All @@ -45,3 +55,24 @@ <h3 class="abtest-item__titlebar">Server-based tests</h3>
}
}
}

@links(experiment: Experiment) = {
<div class="abtest-item__participation">
<div class="component participation">
<span class="participation__links">
@if(experiment.switch.isSwitchedOn) {
<a class="participation__opt-out" href="@Configuration.site.host/opt/out/@experiment.name">opt out</a>
<a class="participation__opt-in" href="@Configuration.site.host/opt/in/@experiment.name">opt in</a>
@if(Configuration.environment.isDev) {
<p class="participation__help">
These links won't work locally.<br>See
<a href="https://github.com/guardian/frontend/blob/main/docs/03-dev-howtos/01-ab-testing.md#forcing-yourself-into-the-test">How to force yourself into the test locally</a>
</p>
}
} else {
<a href="/dev/switchboard#Server-side%20Experiments">Switch on the test to be able to opt in</a>
}
</span>
</div>
</div>
}
161 changes: 83 additions & 78 deletions admin/public/css/abtests.css
View file
Original file line number Diff line number Diff line change
@@ -1,170 +1,175 @@
.participation__test, .participation__variant {
display: inline;
.participation__test,
.participation__variant {
display: inline;
}

.participation__help {
font-size: 11px;
}

.well--table .table {
background-color: blanchedalmond;
background-color: blanchedalmond;
}

.ab-panel {
margin: 20px;
margin: 20px;
}

.ab-panel__label {
margin-right: 20px;
margin-right: 20px;
}

.abtests-active {
margin-top: 20px;
margin-top: 20px;
}

.abtest-item__titlebar {
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 4px;
margin-top: 10px;
margin-bottom: 10px;
padding-bottom: 4px;
}

.abtest-item--expired .abtest-item__expiry {
color: #a55;
color: #a55;
}

.abtests-expired-title a {
font-size: 20px;
font-size: 20px;
}

.abtest-item__active-label,
.abtest-item__expired-label,
.abtest-item__switched-on-label,
.abtest-item__switched-off-label {
display: none;
display: none;
}

.abtest-item--active .abtest-item__active-label,
.abtest-item--expired .abtest-item__expired-label,
.abtest-item--switched-on .abtest-item__switched-on-label,
.abtest-item--switched-off .abtest-item__switched-off-label,
.abtest-server-label {
display: inline-block;
position: relative;
top: -2px;
display: inline-block;
position: relative;
top: -2px;
}

.abtest-item__participation {
margin-bottom: 12px;
margin-bottom: 12px;
}

.abtest-item__chart-container {
position: relative;
height: 200px;
width: 100%;
position: relative;
height: 200px;
width: 100%;
}

.abtest-item__chart {
width: 100%;
background-color: #fff;
position: absolute;
width: 100%;
background-color: #fff;
position: absolute;
}

.abtest-item__chart-placeholder {
width: 97%;
margin-left: 2%;
text-align: center;
font-size: 32px;
margin-top: 0;
border-bottom: 1px solid;
line-height: 150px;
position: absolute;
color: #444;
width: 97%;
margin-left: 2%;
text-align: center;
font-size: 32px;
margin-top: 0;
border-bottom: 1px solid;
line-height: 150px;
position: absolute;
color: #444;
}

.abtest-item__chart-placeholder:after {
content: " ";
clear: both;
display: block;
content: ' ';
clear: both;
display: block;
}

.participation__links a {
display: inline-block;
margin-right: 20px;
display: inline-block;
margin-right: 20px;
}

.participation__label {
font-weight: bold;
display: inline-block;
margin-right: 20px;
font-weight: bold;
display: inline-block;
margin-right: 20px;
}

.participation__opt-out,
.participation__opt-out:hover {
color: #a55;
color: #a55;
}

.abtest-item__description-label,
.abtest-item__hypothesis-label {
font-weight: bold;
font-weight: bold;
}

.audience-breakdown__ruler-division {
width: 25%;
width: 25%;
}

.audience-breakdown__tests {
margin-bottom: 32px;
margin-bottom: 32px;
}

.audience-item__container {
position: relative;
position: relative;
}

.audience-item__test {
position: absolute;
top: 3px;
position: absolute;
top: 3px;
}

.audience-item__test-label {
display: block;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
padding: 8px 3px;
display: block;
text-align: center;
text-overflow: ellipsis;
overflow: hidden;
padding: 8px 3px;
}

.audience-item__caption {
background: #F8F8F8;
border: 2px solid #DFDFDF;
color: #717171;
font-size: 13px;
position: relative;
text-align: center;
top: -98px;
left:-100px;
display: none;
padding: 6px 6px 0;
width: 200px;
height: 50px;
background: #f8f8f8;
border: 2px solid #dfdfdf;
color: #717171;
font-size: 13px;
position: relative;
text-align: center;
top: -98px;
left: -100px;
display: none;
padding: 6px 6px 0;
width: 200px;
height: 50px;
}

.audience-item__caption:after {
content:'';
position: absolute;
bottom: -7px;
width: 10px;
height:10px;
border-bottom: 2px solid #dfdfdf;
border-right: 2px solid #dfdfdf;
background: #f8f8f8;
left: 50%;
margin-left: -10px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
position: absolute;
bottom: -7px;
width: 10px;
height: 10px;
border-bottom: 2px solid #dfdfdf;
border-right: 2px solid #dfdfdf;
background: #f8f8f8;
left: 50%;
margin-left: -10px;
-moz-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}

.audience-item__test:hover .audience-item__caption {
display: block;
display: block;
}

.audience-item__caption-test,
.audience-item__caption-range {
text-align: center;
text-align: center;
}

0 comments on commit cf99c27

Please sign in to comment.