Skip to content

[ZEPPELIN-1446] Fix broken layout of Create new interpreter UI. #1431

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
astroshim wants to merge 5 commits into from
Closed

[ZEPPELIN-1446] Fix broken layout of Create new interpreter UI. #1431

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5f0a461
fix align checkboxs.
Sep 16, 2016
2d3ec76
fix space
Sep 18, 2016
fada36b
fix spaces
Sep 19, 2016
69cc1a0
Merge branch 'master' into ZEPPELIN-1446
Sep 21, 2016
729215b
Merge branch 'master' into ZEPPELIN-1446
Sep 22, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
230 changes: 122 additions & 108 deletions zeppelin-web/src/app/interpreter/interpreter-create/interpreter-create.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ <h4>Create new interpreter</h4>
</select>
</div>

<b>Option</b>
<div>
<h5>Option</h5>
<span class="btn-group">
<button type="button" class="btn btn-default btn-xs dropdown-toggle"
data-toggle="dropdown">
Expand Down Expand Up @@ -68,130 +68,144 @@ <h4>Create new interpreter</h4>
</span>
<span>Interpreter for note</span>
</div>
<br />

<div class="col-md-12" style="padding-left:0px">
<div class="checkbox">
<span class="input-group" style="line-height:30px;">
<label><input type="checkbox" style="width:20px" ng-model="newInterpreterSetting.option.isExistingProcess"/> Connect to existing process </label>
</span>
<div class="row interpreter" style="margin-top: 5px;">
<div class="col-md-12">
<div class="checkbox remove-margin-top-bottom">
<span class="input-group" style="line-height:30px;">
<label>
<input type="checkbox" style="width:20px" id="isExistingProcess" ng-model="newInterpreterSetting.option.isExistingProcess"/>
Connect to existing process
</label>
</span>
</div>
</div>
</div>
<div ng-show="newInterpreterSetting.option.isExistingProcess" class="form-group" style="width:200px">
<b>Host</b>
<div class="row interpreter" ng-show="newInterpreterSetting.option.isExistingProcess" >
<div class="col-md-12">
<b>Host</b>
<input id="newInterpreterSettingHost" input pu-elastic-input
pu-elastic-input-minwidth="180px" ng-model="newInterpreterSetting.option.host" />
</div>
<div ng-show="newInterpreterSetting.option.isExistingProcess" class="form-group" style="width:200px">
<b>Port</b>
<input id="newInterpreterSettingPort" input pu-elastic-input
pu-elastic-input-minwidth="180px" ng-model="newInterpreterSetting.option.port" />
pu-elastic-input-minwidth="180px" ng-model="newInterpreterSetting.option.host"/>
</div>
<div class="col-md-12">
<b>Port</b>
<input id="newInterpreterSettingPort" input pu-elastic-input
pu-elastic-input-minwidth="180px" ng-model="newInterpreterSetting.option.port"/>
</div>
</div>

<div class="col-md-12">
<div class="checkbox">
<div class="row interpreter">
<div class="col-md-12">
<div class="checkbox remove-margin-top-bottom">
<span class="input-group" style="line-height:30px;">
<label><input type="checkbox" style="width:18px !important" id="idShowPermission" ng-click="togglePermissions('newInterpreter')" ng-model="newInterpreterSetting.option.setPermission"/>
Set permission </label>
<label>
<input type="checkbox" style="width:20px !important" id="idShowPermission" ng-click="togglePermissions('newInterpreter')" ng-model="newInterpreterSetting.option.setPermission"/>
Set permission
</label>
</span>
</div>
</div>
</div>
<br/>

<div class="col-md-12">
<!-- permissions -->
<div ng-show="newInterpreterSetting.option.setPermission" class="permissionsForm">
<div>
<p>
Enter comma separated users in the fields. <br />
Empty field (*) implies anyone can run this interpreter.
</p>
<div class="row interpreter">
<div class="col-md-12">
<!-- permissions -->
<div ng-show="newInterpreterSetting.option.setPermission" class="permissionsForm">
<div>

<span class="owners">Owners </span>
<select id="newInterpreterUsers" class="form-control" multiple="multiple">
<option ng-repeat="user in newInterpreterSetting.option.users" selected="selected">{{user}}</option>
</select>
<p>
Enter comma separated users in the fields. <br />
Empty field (*) implies anyone can run this interpreter.
</p>
<div>
<span class="owners">Owners </span>
<select id="newInterpreterUsers" class="form-control" multiple="multiple">
<option ng-repeat="user in newInterpreterSetting.option.users" selected="selected">{{user}}</option>
</select>
</div>
</div>
</div>
</div>
</div>

<div>
<h5>Properties</h5>
<table class="table table-striped properties">
<tr>
<th>name</th>
<th>value</th>
<th>description</th>
<th>action</th>
</tr>
<tr ng-repeat="(key, value) in newInterpreterSetting.properties">
<td>{{key}}</td>
<td><textarea msd-elastic ng-model="value.value"></textarea></td>
<td>{{value.description}}</td>
<td>
<button class="btn btn-default btn-sm fa fa-remove" ng-click="removeInterpreterProperty(key)">
</button>
</td>
</tr>

<tr>
<td>
<input pu-elastic-input pu-elastic-input-minwidth="180px"
ng-model="newInterpreterSetting.propertyKey" />
</td>
<td><textarea msd-elastic ng-model="newInterpreterSetting.propertyValue"></textarea></td>
<td></td>
<td>
<button class="btn btn-default btn-sm fa fa-plus" ng-click="addNewInterpreterProperty()">
</button>
</td>
</tr>
</table>
</div>

<b>Properties</b>
<table class="table table-striped properties">
<tr>
<th>name</th>
<th>value</th>
<th>description</th>
<th>action</th>
</tr>
<tr ng-repeat="(key, value) in newInterpreterSetting.properties">
<td>{{key}}</td>
<td><textarea msd-elastic ng-model="value.value"></textarea></td>
<td>{{value.description}}</td>
<td>
<button class="btn btn-default btn-sm fa fa-remove" ng-click="removeInterpreterProperty(key)">
</button>
</td>
</tr>

<tr>
<td>
<input pu-elastic-input pu-elastic-input-minwidth="180px"
ng-model="newInterpreterSetting.propertyKey" />
</td>
<td><textarea msd-elastic ng-model="newInterpreterSetting.propertyValue"></textarea></td>
<td></td>
<td>
<button class="btn btn-default btn-sm fa fa-plus" ng-click="addNewInterpreterProperty()">
</button>
</td>
</tr>
</table>

<b>Dependencies</b>
<table class="table table-striped properties">
<tr>
<th>artifact</th>
<th>exclude</th>
<th>action</th>
</tr>

<tr ng-repeat="dep in newInterpreterSetting.dependencies">
<td>
<input ng-model="dep.groupArtifactVersion" style="width:100%" />
</td>
<td>
<textarea msd-elastic ng-model="dep.exclusions"
ng-list
placeholder="(Optional) comma separated groupId:artifactId list">
</textarea>
</td>
<td>
<button class="btn btn-default btn-sm fa fa-remove"
ng-click="removeInterpreterDependency(dep.groupArtifactVersion)">
</button>
</td>
</tr>

<tr>
<td>
<input ng-model="newInterpreterSetting.depArtifact"
placeholder="groupId:artifactId:version or local file path"
style="width: 100%" />
</td>
<td>
<textarea msd-elastic ng-model="newInterpreterSetting.depExclude"
ng-list
placeholder="(Optional) comma separated groupId:artifactId list">
</textarea>
</td>
<td>
<button class="btn btn-default btn-sm fa fa-plus" ng-click="addNewInterpreterDependency()">
</button>
</td>
</tr>
</table>
<div>
<h5>Dependencies</h5>
<table class="table table-striped properties">
<tr>
<th>artifact</th>
<th>exclude</th>
<th>action</th>
</tr>

<tr ng-repeat="dep in newInterpreterSetting.dependencies">
<td>
<input ng-model="dep.groupArtifactVersion" style="width:100%" />
</td>
<td>
<textarea msd-elastic ng-model="dep.exclusions"
ng-list
placeholder="(Optional) comma separated groupId:artifactId list">
</textarea>
</td>
<td>
<button class="btn btn-default btn-sm fa fa-remove"
ng-click="removeInterpreterDependency(dep.groupArtifactVersion)">
</button>
</td>
</tr>

<tr>
<td>
<input ng-model="newInterpreterSetting.depArtifact"
placeholder="groupId:artifactId:version or local file path"
style="width: 100%" />
</td>
<td>
<textarea msd-elastic ng-model="newInterpreterSetting.depExclude"
ng-list
placeholder="(Optional) comma separated groupId:artifactId list">
</textarea>
</td>
<td>
<button class="btn btn-default btn-sm fa fa-plus" ng-click="addNewInterpreterDependency()">
</button>
</td>
</tr>
</table>
</div>

<span class="btn btn-primary" ng-click="addNewInterpreterSetting()">
Save
Expand Down