Skip to content

Commit

Permalink
Merge 1fa2c04 into eae5e72
Browse files Browse the repository at this point in the history
  • Loading branch information
@aldipower
aldipower committed Mar 3, 2016
2 parents eae5e72 + 1fa2c04 commit 7c1153d
Show file tree
Hide file tree
Showing 25 changed files with 676 additions and 621 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
- \#3124 - Improve usability of labels filter dropdown
- \#3239 - Move docker volumes to volumes section
- \#3269 - Sort ENV variables in application details page
- \#3243 - Simplify port management in Marathon UI

### Fixed
- \#3133 - Interrupted scaling operations can leave the health bar in an
Expand Down
8 changes: 8 additions & 0 deletions src/css/components/modal.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,14 @@
display: none;
}
}

.duplicable-row .port-input-field {
margin: -@base-spacing-unit*2 0 0;

label {
display: inline-block;
}
}
}
.reduced-padding .row {
> div[class^="col-"] {
Expand Down
133 changes: 74 additions & 59 deletions src/js/components/AppConfigEditFormComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,8 @@ import HealthChecksComponent from "../components/HealthChecksComponent";
import OptionalEnvironmentComponent
from "../components/OptionalEnviromentComponent";
import OptionalLabelsComponent from "../components/OptionalLabelsComponent";
import OptionalPortsAndServiceDiscoveryComponent
from "../components/OptionalPortsAndServiceDiscoveryComponent";
import OptionalSettingsComponent
from "../components/OptionalSettingsComponent";
import OptionalVolumesComponent
Expand All @@ -26,6 +28,7 @@ var AppConfigEditFormComponent = React.createClass({

propTypes: {
app: React.PropTypes.object,
handleModeToggle: React.PropTypes.func.isRequired,
onChange: React.PropTypes.func.isRequired,
onError: React.PropTypes.func.isRequired
},
Expand Down Expand Up @@ -150,106 +153,118 @@ var AppConfigEditFormComponent = React.createClass({
return (
<div>
<FormGroupComponent
errorMessage={this.getErrorMessage("appId")}
fieldId="appId"
value={state.fields.appId}
label="ID"
onChange={this.handleFieldUpdate}>
<input ref="appId"/>
errorMessage={this.getErrorMessage("appId")}
fieldId="appId"
value={state.fields.appId}
label="ID"
onChange={this.handleFieldUpdate}>
<input ref="appId" />
</FormGroupComponent>

<div className="row">
<div className="col-sm-3">
<FormGroupComponent
errorMessage={this.getErrorMessage("cpus")}
fieldId="cpus"
label="CPUs"
value={state.fields.cpus}
onChange={this.handleFieldUpdate}>
<input min="0" step="any" type="number"/>
errorMessage={this.getErrorMessage("cpus")}
fieldId="cpus"
label="CPUs"
value={state.fields.cpus}
onChange={this.handleFieldUpdate}>
<input min="0" step="any" type="number" />
</FormGroupComponent>
</div>
<div className="col-sm-3">
<FormGroupComponent
fieldId="mem"
label="Memory (MiB)"
errorMessage={this.getErrorMessage("mem")}
value={state.fields.mem}
onChange={this.handleFieldUpdate}>
<input min="0" step="any" type="number"/>
fieldId="mem"
label="Memory (MiB)"
errorMessage={this.getErrorMessage("mem")}
value={state.fields.mem}
onChange={this.handleFieldUpdate}>
<input min="0" step="any" type="number" />
</FormGroupComponent>
</div>
<div className="col-sm-3">
<FormGroupComponent
fieldId="disk"
label="Disk Space (MiB)"
errorMessage={this.getErrorMessage("disk")}
value={state.fields.disk}
onChange={this.handleFieldUpdate}>
<input min="0" step="any" type="number"/>
fieldId="disk"
label="Disk Space (MiB)"
errorMessage={this.getErrorMessage("disk")}
value={state.fields.disk}
onChange={this.handleFieldUpdate}>
<input min="0" step="any" type="number" />
</FormGroupComponent>
</div>
<div className="col-sm-3">
<FormGroupComponent
fieldId="instances"
label="Instances"
errorMessage={this.getErrorMessage("instances")}
value={state.fields.instances}
onChange={this.handleFieldUpdate}>
<input min="0" step="1" type="number"/>
fieldId="instances"
label="Instances"
errorMessage={this.getErrorMessage("instances")}
value={state.fields.instances}
onChange={this.handleFieldUpdate}>
<input min="0" step="1" type="number" />
</FormGroupComponent>
</div>
</div>
<FormGroupComponent
errorMessage={this.getErrorMessage("cmd")}
fieldId="cmd"
label="Command"
help="May be left blank if a container image is supplied"
value={state.fields.cmd}
onChange={this.handleFieldUpdate}>
<textarea style={{resize: "vertical"}}/>
errorMessage={this.getErrorMessage("cmd")}
fieldId="cmd"
label="Command"
help="May be left blank if a container image is supplied"
value={state.fields.cmd}
onChange={this.handleFieldUpdate}>
<textarea style={{resize: "vertical"}} />
</FormGroupComponent>

<div className="row full-bleed">
<CollapsiblePanelComponent
isOpen=
{this.fieldsHaveError(ContainerSettingsComponent.fieldIds)}
title="Docker container settings">
isOpen=
{this.fieldsHaveError(ContainerSettingsComponent.fieldIds)}
title="Docker container settings">
<ContainerSettingsComponent
errorIndices={state.errorIndices}
fields={state.fields}
getErrorMessage={this.getErrorMessage}/>
getErrorMessage={this.getErrorMessage} />
</CollapsiblePanelComponent>
</div>
<div className="row full-bleed">
<CollapsiblePanelComponent
isOpen={this.fieldsHaveError({env: "env"})}
title="Environment variables">
<OptionalEnvironmentComponent
isOpen=
{this.fieldsHaveError({portDefinitions: "portDefinitions"})}
title="Ports">
<OptionalPortsAndServiceDiscoveryComponent
errorIndices={state.errorIndices}
fields={state.fields}
getErrorMessage={this.getErrorMessage}
fields={state.fields}/>
handleModeToggle={this.props.handleModeToggle} />
</CollapsiblePanelComponent>
</div>
<div className="row full-bleed">
<CollapsiblePanelComponent
isOpen={this.fieldsHaveError({labels: "labels"})}
title="Labels">
isOpen={this.fieldsHaveError({env: "env"})}
title="Environment variables">
<OptionalEnvironmentComponent
errorIndices={state.errorIndices}
fields={state.fields}
getErrorMessage={this.getErrorMessage} />
</CollapsiblePanelComponent>
</div>
<div className="row full-bleed">
<CollapsiblePanelComponent
isOpen={this.fieldsHaveError({labels: "labels"})}
title="Labels">
<OptionalLabelsComponent
errorIndices={state.errorIndices}
getErrorMessage={this.getErrorMessage}
fields={state.fields}/>
fields={state.fields}
getErrorMessage={this.getErrorMessage} />
</CollapsiblePanelComponent>
</div>
<div className="row full-bleed reduced-padding">
<CollapsiblePanelComponent
isOpen=
{this.fieldsHaveError({healthChecks: "healthChecks"})}
title="Health checks">
isOpen=
{this.fieldsHaveError({healthChecks: "healthChecks"})}
title="Health checks">
<HealthChecksComponent
errorIndices={state.errorIndices}
fields={state.fields}
getErrorMessage={this.getErrorMessage}/>
getErrorMessage={this.getErrorMessage} />
</CollapsiblePanelComponent>
</div>
<div className="row full-bleed">
Expand All @@ -258,19 +273,19 @@ var AppConfigEditFormComponent = React.createClass({
title="Volumes">
<OptionalVolumesComponent
errorIndices={state.errorIndices}
getErrorMessage={this.getErrorMessage}
fields={state.fields} />
fields={state.fields}
getErrorMessage={this.getErrorMessage} />
</CollapsiblePanelComponent>
</div>
<div className="row full-bleed">
<CollapsiblePanelComponent
isOpen=
{this.fieldsHaveError(OptionalSettingsComponent.fieldIds)}
title="Optional settings">
isOpen=
{this.fieldsHaveError(OptionalSettingsComponent.fieldIds)}
title="Optional settings">
<OptionalSettingsComponent
errorIndices={state.errorIndices}
fields={state.fields}
getErrorMessage={this.getErrorMessage}/>
getErrorMessage={this.getErrorMessage} />
</CollapsiblePanelComponent>
</div>
</div>
Expand Down
8 changes: 4 additions & 4 deletions src/js/components/AppVersionComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -211,9 +211,9 @@ var AppVersionComponent = React.createClass({
return <dd key={k}>{k + "=" + appVersion.labels[k]}</dd>;
});

var portsNode = (appVersion.ports == null || appVersion.ports.length === 0)
var portDefinitionsNode = (appVersion.portDefinitions == null)
? <UnspecifiedNodeComponent />
: <dd>{appVersion.ports.join(", ")}</dd>;
: getHighlightNode(appVersion.portDefinitions);

var urisNode = (appVersion.uris == null || appVersion.uris.length === 0)
? <UnspecifiedNodeComponent />
Expand Down Expand Up @@ -263,8 +263,8 @@ var AppVersionComponent = React.createClass({
{invalidateValue(appVersion.mem, "MiB")}
<dt>Disk Space</dt>
{invalidateValue(appVersion.disk, "MiB")}
<dt>Ports</dt>
{portsNode}
<dt>Port Definitions</dt>
{portDefinitionsNode}
<dt>Backoff Factor</dt>
{invalidateValue(appVersion.backoffFactor)}
<dt>Backoff</dt>
Expand Down
104 changes: 0 additions & 104 deletions src/js/components/ContainerSettingsComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,13 +8,6 @@ import dockerRowSchemes from "../stores/schemes/dockerRowSchemes";
import FormActions from "../actions/FormActions";
import FormGroupComponent from "../components/FormGroupComponent";

const portInputAttributes = {
min: 0,
max: 65535,
step: 1,
type: "number"
};

var ContainerSettingsComponent = React.createClass({
displayName: "ContainerSettingsComponent",

Expand All @@ -28,7 +21,6 @@ var ContainerSettingsComponent = React.createClass({
dockerImage: "dockerImage",
dockerNetwork: "dockerNetwork",
dockerParameters: "dockerParameters",
dockerPortMappings: "dockerPortMappings",
dockerPrivileged: "dockerPrivileged"
})
},
Expand Down Expand Up @@ -60,100 +52,6 @@ var ContainerSettingsComponent = React.createClass({
FormActions.update(fieldId, value);
},

getPortMappingRow: function (row, i, disableRemoveButton = false) {
var fieldsetId = ContainerSettingsComponent.fieldIds.dockerPortMappings;
var error = this.getError(fieldsetId, row.consecutiveKey);
var getErrorMessage = this.props.getErrorMessage;
var handleChange = this.handleChangeRow.bind(null, fieldsetId, i);
var handleAddRow =
this.handleAddRow.bind(null, fieldsetId, i + 1);
var handleRemoveRow =
this.handleRemoveRow.bind(null, fieldsetId, i);

var rowClassSet = classNames({
"has-error": !!error,
"duplicable-row": true
});

return (
<div key={row.consecutiveKey} className={rowClassSet}>
<fieldset className="row duplicable-row" onChange={handleChange}>
<div className="col-sm-3">
<FormGroupComponent
errorMessage={
getErrorMessage(`${fieldsetId}.${i}.containerPort`)
}
fieldId={`${fieldsetId}.${i}.containerPort`}
label="Container Port"
value={row.containerPort}>
<input ref={`containerPort${i}`} {...portInputAttributes}/>
</FormGroupComponent>
</div>
<div className="col-sm-3">
<FormGroupComponent
errorMessage={
getErrorMessage(`${fieldsetId}.${i}.hostPort`)
}
fieldId={`${fieldsetId}.${i}.hostPort`}
label="Host Port"
value={row.hostPort}>
<input ref={`hostPort${i}`} {...portInputAttributes}/>
</FormGroupComponent>
</div>
<div className="col-sm-2">
<FormGroupComponent
errorMessage={
getErrorMessage(`${fieldsetId}.${i}.servicePort`)
}
fieldId={`${fieldsetId}.${i}.servicePort`}
label="Service Port"
value={row.servicePort}>
<input ref={`servicePort${i}`} {...portInputAttributes}/>
</FormGroupComponent>
</div>
<div className="col-sm-4">
<FormGroupComponent
errorMessage={
getErrorMessage(`${fieldsetId}.${i}.protocol`)
}
fieldId={`${fieldsetId}.${i}.protocol`}
label="Protocol"
value={row.protocol}>
<select defaultValue={row.protocol} ref={`protocol${i}`}>
<option value="">Select</option>
<option value={ContainerConstants.PORTMAPPINGS.PROTOCOL.TCP}>
{ContainerConstants.PORTMAPPINGS.PROTOCOL.TCP}
</option>
<option value={ContainerConstants.PORTMAPPINGS.PROTOCOL.UDP}>
{ContainerConstants.PORTMAPPINGS.PROTOCOL.UDP}
</option>
</select>
</FormGroupComponent>
<DuplicableRowControls disableRemoveButton={disableRemoveButton}
handleAddRow={handleAddRow}
handleRemoveRow={handleRemoveRow} />
</div>
</fieldset>
{error}
</div>
);
},

getPortMappingRows: function () {
var rows = this.state.rows.dockerPortMappings;

if (rows == null) {
return null;
}

let disableRemoveButton =
this.hasOnlyOneSingleEmptyRow("dockerPortMappings");

return rows.map((row, i) => {
return this.getPortMappingRow(row, i, disableRemoveButton);
});
},

getParametersRow: function (row, i, disableRemoveButton = false) {
var fieldsetId = ContainerSettingsComponent.fieldIds.dockerParameters;
var error = this.getError(fieldsetId, row.consecutiveKey);
Expand Down Expand Up @@ -269,8 +167,6 @@ var ContainerSettingsComponent = React.createClass({
onChange={this.handleSingleFieldUpdate}>
<input type="checkbox" />
</FormGroupComponent>
<h4>Port Mappings</h4>
<div className="duplicable-list">{this.getPortMappingRows()}</div>
<h4>Parameters</h4>
<div className="duplicable-list">{this.getParametersRows()}</div>
<div>You can set your Docker volume settings below.</div>
Expand Down
Loading

0 comments on commit 7c1153d

Please sign in to comment.