Skip to content

Commit

Permalink
Hide extra options behind "Other settings" click
Browse files Browse the repository at this point in the history 
Settings like "Asynchronous", "Epsilon", and "Executor" are changed
rarely. Hiding them behind a click is intended to prevent people from
changing them unless they know they should.

Addresses issue mesos#166
  • Loading branch information
@ssorallen
ssorallen committed Dec 16, 2013
1 parent 5e1999c commit 9ef3eae
Show file tree
Hide file tree
Showing 4 changed files with 174 additions and 114 deletions.
4 changes: 3 additions & 1 deletion src/main/resources/assets/app/scripts/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ require.config({
'backbone/declarative' : 'vendor/backbone.declarative',
'backbone/validations' : 'vendor/backbone.validations',
'backbone/mousetrap' : 'vendor/backbone.mousetrap',
'bootstrap/tooltip' : 'vendor/bootstrap/js/bootstrap-tooltip',
'bootstrap/alert' : 'vendor/bootstrap/js/bootstrap-alert',
'bootstrap/button' : 'vendor/bootstrap/js/bootstrap-button',
'bootstrap/collapse' : 'vendor/bootstrap/js/bootstrap-collapse',
'bootstrap/dropdown' : 'vendor/bootstrap/js/bootstrap-dropdown',
'bootstrap/timepicker' : 'vendor/bootstrap-timepicker/js/bootstrap-timepicker',
'bootstrap/tooltip' : 'vendor/bootstrap/js/bootstrap-tooltip',
'bootstrap/transition' : 'vendor/bootstrap/js/bootstrap-transition',
'd3' : 'vendor/d3.v3',
'rivets' : 'vendor/rivets-0.5.13',
'underscore' : 'vendor/lodash',
Expand Down
44 changes: 38 additions & 6 deletions src/main/resources/assets/app/scripts/styles/core.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,22 @@ textarea::-webkit-input-placeholder {
color: rgba(255, 255, 255, 0.3);
}

.alert {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
text-shadow: none;
}

.alert-warning {
background: rgba(252, 248, 227, 0.10);
}

.close {
text-shadow: none;
}
/* /Bootstrap overrides */

.chronos .app .span5 {
overflow-y: auto;
overflow-x: hidden;
Expand Down Expand Up @@ -460,14 +476,21 @@ textarea::-webkit-input-placeholder {
}

.job-details-wrapper {
margin-bottom: 25px;
margin-bottom: 20px;
}

.job-details-wrapper-body {
background: rgba(0, 0, 0, 0.6);
display: block;
}

.job-details-wrapper-footer {
-moz-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.3);
background: rgba(0, 0, 0, 0.5);
}

.job-details-wrapper .save,
.job-details-wrapper .create,
.job-details-wrapper .cancel {
Expand Down Expand Up @@ -506,21 +529,22 @@ textarea::-webkit-input-placeholder {
display: block;
}

.job-details-wrapper.up {
margin-bottom: 10px;
}

.job-details-wrapper.up .toggle {
width: 70%;
opacity: 1;
}

.job-details-wrapper.up .details-wrapper {
.job-details-wrapper.up .job-details-wrapper-body,
.job-details-wrapper.up .job-details-wrapper-footer {
display: none;
}

.job-details-wrapper.up .nav-item {
display: none;

&.close {
display: list-item;
}
}

.lightbox-inner .content {
Expand Down Expand Up @@ -609,6 +633,14 @@ textarea::-webkit-input-placeholder {
display: none;
}

.visible-edit-job {
display: none;
}

.edit-job .visible-edit-job {
display: block;
}

.job-detail .detail {
color: rgba(255, 255, 255, 0.4);
text-transform: uppercase;
Expand Down
188 changes: 104 additions & 84 deletions src/main/resources/assets/app/scripts/templates/job_detail_view.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
<span class="help-inline hide"></span>
</div>

<div class="row-fluid control-group job-detail-row job-detail job-detail-tooltip"
<div class="row-fluid control-group job-detail-row job-detail"
data-toggle="tooltip"
data-html="true"
data-title="Command for the executor to run."
Expand Down Expand Up @@ -55,7 +55,7 @@

<div class="row-fluid job-detail-row">
<div class="span6">
<div class="control-group job-detail job-detail-tooltip"
<div class="control-group job-detail"
data-toggle="tooltip"
data-title="Owner's email address(es)<br>The owner(s) will be emailed in the event of a job failure or disruption."
data-html="true"
Expand All @@ -69,29 +69,12 @@
</div>
<span class="help-inline hide"></span>
</div>

<div class="control-group job-detail job-detail-tooltip"
data-title="Mesos executor to use. This can be a path that needs to be available on the Mesos slave, or it can be left blank in which case the shell-executor is assumed. The executor will receive the string specified in the command field."
data-toggle="tooltip"
data-placement="bottom">
<div class="detail">Executor</div>
<div class="display hightlight cmd executor"
data-rv-text="job.executor | orNone">{{orNone executor}}</div>
<div class="field cmd">
<input class="job-input"
data-rv-value="job.executor"
value="{{executor}}"
name="executor"
placeholder="/custom/executor"
tabindex="5">
</div>
</div>
</div>

{{#persisted}}
<div class="span6 small">
<div class="row-fluid">
<div class="span7 job-detail job-detail-tooltip no-edit"
<div class="span7 job-detail no-edit"
data-toggle="tooltip"
data-title="Last time the job ran successfully"
data-placement="bottom">
Expand All @@ -100,7 +83,7 @@
data-rv-text="job.lastSuccess | orNone">{{lastSuccess}}</div>
</div>

<div class="span5 job-detail job-detail-tooltip no-edit"
<div class="span5 job-detail no-edit"
data-toggle="tooltip"
data-title="Number of successful runs to date"
data-placement="bottom">
Expand All @@ -112,7 +95,7 @@

<div class="row-fluid">

<div class="span7 job-detail job-detail-tooltip no-edit"
<div class="span7 job-detail no-edit"
data-toggle="tooltip"
data-title="Last time an error occurred"
data-placement="bottom">
Expand All @@ -121,7 +104,7 @@
data-rv-text="job.lastError | orNone">{{lastError}}</div>
</div>

<div class="span5 job-detail job-detail-tooltip no-edit"
<div class="span5 job-detail no-edit"
data-toggle="tooltip"
data-title="Number of unsuccessful runs to date"
data-placement="bottom">
Expand Down Expand Up @@ -188,76 +171,113 @@
</div>
{{/hasSchedule}}

<div class="row-fluid job-detail-row job-detail epsilon">
<div class="span6">
<div class="detail">Epsilon</div>
<div class="display highlight cmd epsilon">{{epsilon}}</div>
<div class="field cmd epsilon control-group">
<input class="job-input" value="{{epsilon}}" name="epsilon" tabindex="10"
data-rv-value="job.epsilon"
data-title="Amount of time after a failure within which to retry the job."
data-html="true"
data-toggle="tooltip">

<span class="help-inline hide"></span>
<div class="row-fluid job-detail-row job-detail stats-row">
</div>
</div>
<div class="job-details-wrapper-footer">
<div class="collapse" id="collapse-{{cid}}">
<div class="job-detail-row job-detail visible-edit-job">
<div>
<div class="text-warning text-center">
Watch out! Most jobs should not require the settings below to be modified.
</div>
</div>
</div>
<div class="row-fluid job-detail-row">
<div class="span6">
<div class="control-group job-detail"
title="Mesos executor to use. This can be a path that needs to be available on the Mesos slave, or it can be left blank in which case the shell-executor is assumed. The executor will receive the string specified in the command field."
data-container=".job-{{cid}}"
data-toggle="tooltip"
data-placement="bottom">
<div class="detail">Executor</div>
<div class="display hightlight cmd executor"
data-rv-text="job.executor | orNone">{{orNone executor}}</div>
<div class="field cmd">
<input class="job-input"
data-rv-value="job.executor"
value="{{executor}}"
name="executor"
placeholder="/custom/executor"
tabindex="5">
</div>
</div>
</div>
</div>
<div class="row-fluid job-detail-row">
<div class="span6 job-detail">
<div class="detail">Epsilon</div>
<div class="display highlight cmd epsilon">{{epsilon}}</div>
<div class="field cmd epsilon control-group">
<input class="job-input" value="{{epsilon}}" name="epsilon" tabindex="10"
title="Amount of time after a failure within which to retry the job."
data-rv-value="job.epsilon"
data-container=".job-{{cid}}"
data-toggle="tooltip">

<div class="span3">
<div class="detail">Asynchronous</div>
<span class="help-inline hide"></span>
</div>
</div>
<div class="span3 job-detail">
<div class="detail">Asynchronous</div>

<div class="display hightlight cmd async"
data-rv-text="job.async | boolEnabled">{{boolEnabled async}}</div>
<div class="pseudo-field hightlight cmd async">
<label class="radio">
<input type="radio"
class="job-input"
name="async"
id="async-off"
value="0"
{{^async}}checked{{/async}}>
Disable
</label>
<label class="radio">
<input type="radio"
class="job-input"
name="async"
id="async-on"
value="1"
{{#async}}checked{{/async}}>
Enable
</label>
<div class="display hightlight cmd async"
data-rv-text="job.async | boolEnabled">{{boolEnabled async}}</div>
<div class="pseudo-field hightlight cmd async">
<label class="radio">
<input type="radio"
class="job-input"
name="async"
id="async-off"
value="0"
{{^async}}checked{{/async}}>
Disable
</label>
<label class="radio">
<input type="radio"
class="job-input"
name="async"
id="async-on"
value="1"
{{#async}}checked{{/async}}>
Enable
</label>
</div>
</div>
</div>
<div class="span3">
<div class="detail">Job Status</div>
<div class="span3 job-detail">
<div class="detail">Job Status</div>

<div class="display hightlight cmd async"
data-rv-text="job.disabled | boolDisabled">{{boolDisabled disabled}}</div>
<div class="pseudo-field hightlight cmd async">
<label class="radio">
<input type="radio"
class="job-input"
name="disabled"
id="disabled-off"
value="0"
{{#disabled}}checked{{/disabled}}>
Disable
</label>
<label class="radio">
<input type="radio"
class="job-input"
name="disabled"
id="disabled-on"
value="1"
{{^disabled}}checked{{/disabled}}>
Enable
</label>
<div class="display hightlight cmd async"
data-rv-text="job.disabled | boolDisabled">{{boolDisabled disabled}}</div>
<div class="pseudo-field hightlight cmd async">
<label class="radio">
<input type="radio"
class="job-input"
name="disabled"
id="disabled-off"
value="0"
{{#disabled}}checked{{/disabled}}>
Disable
</label>
<label class="radio">
<input type="radio"
class="job-input"
name="disabled"
id="disabled-on"
value="1"
{{^disabled}}checked{{/disabled}}>
Enable
</label>
</div>
</div>
</div>
</div>

<div class="row-fluid job-detail-row job-detail job-detail-tooltip stats-row">
<div class="job-detail-row job-detail">
<div>
<a data-toggle="collapse" data-target="#collapse-{{cid}}" href="javascript:void(0)">
Other settings
</a>
</div>
</div>
</div>
</form>
Loading

0 comments on commit 9ef3eae

Please sign in to comment.