Skip to content

Commit 26cce46

Browse files
committed
Render mocked list of notebook repo settings
1 parent 6109a93 commit 26cce46

File tree

4 files changed

+59
-275
lines changed

4 files changed

+59
-275
lines changed

zeppelin-web/src/app/app.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,8 @@
7373
})
7474
.when('/notebookRepos', {
7575
templateUrl: 'app/notebookRepos/notebookRepos.html',
76-
controller: 'NotebookReposCtrl'
76+
controller: 'NotebookReposCtrl',
77+
controllerAs: 'repo'
7778
})
7879
.when('/credential', {
7980
templateUrl: 'app/credential/credential.html',

zeppelin-web/src/app/notebookRepos/notebookRepos.controller.js

Lines changed: 39 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,50 @@
2020

2121
function NotebookReposCtrl($http, baseUrlSrv, ngToast) {
2222
var vm = this;
23-
vm.notebookRepos = [];
23+
vm.notebookRepos = [
24+
{
25+
name: 'Classic Repo',
26+
settings: [
27+
{
28+
name: 'defaulty',
29+
type: 'input',
30+
value: [],
31+
selected: 'Totooo'
32+
}
33+
]
34+
},
35+
{
36+
name: 'Empty Repo',
37+
settings: []
38+
},
39+
{
40+
name: 'ZeppelinHub',
41+
settings: [
42+
{
43+
name: 'instance',
44+
type: 'dropdown',
45+
value: [
46+
{
47+
name: 'instance1',
48+
value: 'id1'
49+
},
50+
{
51+
name: 'instanceKikoo',
52+
value: 'id2'
53+
}
54+
],
55+
selected: 'id2'
56+
}
57+
]
58+
}
59+
];
2460

2561
_init();
2662

2763
// Private functions
2864

2965
function _getInterpreterSettings() {
66+
/*
3067
$http.get(baseUrlSrv.getRestApiBase() + '/interpreter/setting')
3168
.success(function(data, status, headers, config) {
3269
vm.notebookRepos = data.body;
@@ -42,7 +79,7 @@
4279
}, 3000);
4380
}
4481
console.log('Error %o %o', status, data.message);
45-
});
82+
});*/
4683
}
4784

4885
function _init() {

zeppelin-web/src/app/notebookRepos/notebookRepos.html

Lines changed: 17 additions & 272 deletions
Original file line numberDiff line numberDiff line change
@@ -26,298 +26,43 @@ <h3 class="new_h3">
2626
</div>
2727
</div>
2828
</div>
29-
30-
<div class="row" ng-if="showRepositoryInfo">
31-
<div class="col-md-12">
32-
<hr />
33-
<h4>Repositories</h4>
34-
<p>Available repository lists. These repositories are used to resolve external dependencies of interpreter.</p>
35-
<ul class="noDot">
36-
<li class="liVertical" ng-repeat="repo in repositories">
37-
<a tabindex="0" class="btn btn-info" role="button"
38-
popover-trigger="focus"
39-
popover-placement="right"
40-
popover-html-unsafe="<label>URL: </label>
41-
{{repo.url}}<br>
42-
<label>Username: </label>
43-
{{repo.authentication.username}}">
44-
<span class="fa fa-database"></span>
45-
{{repo.id}}&nbsp;
46-
<span ng-if="!isDefaultRepository(repo.id)" class="fa fa-close blackOpc"
47-
ng-click="removeRepository(repo.id)"></span>
48-
</a>
49-
</li>
50-
<li class="liVertical">
51-
<div ng-include src="'components/repository-create/repository-dialog.html'"></div>
52-
<div class="btn btn-default"
53-
data-toggle="modal"
54-
data-target="#repoModal">
55-
<span class="fa fa-plus"></span>
56-
</div>
57-
</li>
58-
</ul>
59-
</div>
60-
</div>
61-
62-
<div ng-include src="'app/interpreter/interpreter-create/interpreter-create.html'"></div>
6329
</div>
6430

6531
<div class="box width-full"
66-
ng-repeat="setting in interpreterSettings | orderBy: 'name' | filter: searchInterpreter" interpreter-directive>
67-
<div id="{{setting.name | lowercase}}">
32+
ng-repeat="repo in repo.notebookRepos | orderBy: 'name'">
33+
<div id="{{repo.name | lowercase}}">
6834
<div class="row interpreter">
6935

7036
<div class="col-md-12">
71-
<h3 class="interpreter-title">{{setting.name}}
72-
<small>
73-
<span style="display:inline-block" ng-repeat="interpreter in setting.interpreterGroup"
74-
title="{{interpreter.class}}">
75-
<span ng-show="!$first">, </span>%<span ng-show="!$parent.$first || $first">{{setting.name}}</span>
76-
<span ng-show="(!$parent.$first || $first) && !$first">.</span>
77-
<span ng-show="!$first">{{interpreter.name}}</span>
78-
<span ng-show="$parent.$first && $first">(default)</span>
79-
</span>
80-
</small>
81-
82-
<small ng-switch="setting.status">
83-
<small ng-switch-when="READY">
84-
<i style="color: green; margin-right: 3px;" class="fa fa-circle"
85-
tooltip="Ready">
86-
</i>
87-
</small>
88-
<small ng-switch-when="ERROR">
89-
<i style="color: red; cursor: pointer" class="fa fa-circle"
90-
ng-click="showErrorMessage(setting)"
91-
tooltip="Error downloading dependencies">
92-
</i>
93-
</small>
94-
<small ng-switch-default>
95-
<i style="color: blue" class="fa fa-spinner spinAnimation"
96-
tooltip="Dependencies are downloading">
97-
</i>
98-
</small>
99-
</small>
100-
101-
</h3>
37+
<h3 class="interpreter-title">{{repo.name}}</h3>
10238
<span style="float:right">
10339
<button class="btn btn-default btn-xs"
10440
ng-click="valueform.$show();
10541
copyOriginInterpreterSettingProperties(setting.id)">
10642
<span class="fa fa-pencil"></span> edit</button>
107-
<button class="btn btn-default btn-xs"
108-
ng-click="restartInterpreterSetting(setting.id)">
109-
<span class="fa fa-refresh"></span> restart</button>
110-
<button class="btn btn-default btn-xs"
111-
ng-click="removeInterpreterSetting(setting.id)">
112-
<span class="fa fa-remove"></span> remove</button>
11343
</span>
11444
</div>
11545
</div>
11646
<div class="row interpreter">
117-
<div class="col-md-12">
118-
<h5>Option</h5>
119-
<span class="btn-group">
120-
<button type="button" class="btn btn-default btn-xs dropdown-toggle"
121-
data-toggle="dropdown"
122-
ng-disabled="!valueform.$visible">
123-
{{getSessionOption(setting.id)}} <span class="caret"></span>
124-
</button>
125-
<ul class="dropdown-menu" role="menu">
126-
<li>
127-
<a style="cursor:pointer"
128-
tooltip="Single interpreter instance are shared across notes"
129-
ng-click="setSessionOption(setting.id, 'shared')">
130-
shared
131-
</a>
132-
</li>
133-
<li>
134-
<a style="cursor:pointer"
135-
tooltip="Separate Interpreter instance for each note"
136-
ng-click="setSessionOption(setting.id, 'scoped')">
137-
scoped
138-
</a>
139-
</li>
140-
<li>
141-
<a style="cursor:pointer"
142-
tooltip="Separate Interpreter process for each note"
143-
ng-click="setSessionOption(setting.id, 'isolated')">
144-
isolated
145-
</a>
146-
</li>
147-
</ul>
148-
</span>
149-
<span>Interpreter for note</span>
150-
</div>
151-
</div>
152-
<div class="row interpreter" style="margin-top: 5px;">
153-
<div class="col-md-12">
154-
<div class="checkbox remove-margin-top-bottom">
155-
<span class="input-group" style="line-height:30px;">
156-
<label>
157-
<input type="checkbox" style="width:20px" id="isExistingProcess" ng-model="setting.option.isExistingProcess" ng-disabled="!valueform.$visible"/>
158-
Connect to existing process
159-
</label>
160-
</span>
161-
</div>
162-
</div>
163-
</div>
164-
<div class="row interpreter" ng-if="setting.option.isExistingProcess">
165-
<div class="col-md-12">
166-
<b>Host</b>
167-
<input id="newInterpreterSettingHost" input pu-elastic-input
168-
pu-elastic-input-minwidth="180px" ng-model="setting.option.host" ng-disabled="!valueform.$visible" />
169-
</div>
170-
<div class="col-md-12">
171-
<b>Port</b>
172-
<input id="newInterpreterSettingPort" input pu-elastic-input
173-
pu-elastic-input-minwidth="180px" ng-model="setting.option.port" ng-disabled="!valueform.$visible" />
174-
</div>
175-
</div>
176-
<div class="row interpreter">
177-
<div class="col-md-12">
178-
<div class="checkbox remove-margin-top-bottom">
179-
<span class="input-group" style="line-height:30px;">
180-
<label>
181-
<input type="checkbox" style="width:20px !important" id="idShowPermission" ng-click="togglePermissions(setting.name)" ng-model="setting.option.setPermission" ng-disabled="!valueform.$visible"/>
182-
Set permission
183-
</label>
47+
<div class="col-md-12" ng-show="repo.settings.length > 0">
48+
<h5>Settings</h5>
49+
<div ng-repeat="setting in repo.settings">
50+
<span ng-bind="setting.name" style='text-transform: capitalize;'></span>:
51+
<span class="btn-group">
52+
<form style="display:inline; margin-left:5px;" ng-show="setting.type === 'dropdown'">
53+
<select ng-model="setting.selected"
54+
class="selectpicker"
55+
ng-options="item.value as item.name for item in setting.value"></select>
56+
</form>
57+
<input id="newInterpreterSettingName" input pu-elastic-input
58+
ng-show="setting.type === 'input'" pu-elastic-input-minwidth="180px" ng-model="setting.selected" />
18459
</span>
18560
</div>
18661
</div>
18762
</div>
18863
<div class="row interpreter">
189-
<div class="col-md-12">
190-
<!-- permissions -->
191-
<div ng-show="setting.option.setPermission" class="permissionsForm">
192-
<div>
193-
<p>
194-
Enter comma separated users in the fields. <br />
195-
Empty field (*) implies anyone can run this interpreter.
196-
</p>
197-
<div>
198-
199-
<span class="owners">Owners </span>
200-
<select id="{{setting.name}}Users" class="form-control" multiple="multiple" ng-disabled="!valueform.$visible">
201-
<option ng-repeat="user in setting.option.users" selected="selected">{{user}}</option>
202-
</select>
203-
</div>
204-
</div>
205-
</div>
206-
</div>
207-
208-
<div ng-show="_.isEmpty(setting.properties) && _.isEmpty(setting.dependencies) || valueform.$hidden" class="col-md-12 gray40-message">
209-
<em>Currently there are no properties and dependencies set for this interpreter</em>
210-
</div>
211-
</div>
212-
<div class="row interpreter">
213-
<div class="col-md-12" ng-show="!_.isEmpty(setting.properties) || valueform.$visible">
214-
<h5>Properties</h5>
215-
<table class="table table-striped">
216-
<thead>
217-
<tr>
218-
<th style="width:40%">name</th>
219-
<th style="width:40%">value</th>
220-
<th style="width:20%" ng-if="valueform.$visible">action</th>
221-
</tr>
222-
</thead>
223-
<tr ng-repeat="key in setting.properties | sortByKey" >
224-
<td>{{key}}</td>
225-
<td>
226-
<span editable-textarea="setting.properties[key]" e-form="valueform" e-msd-elastic>
227-
{{setting.properties[key] | breakFilter}}
228-
</span>
229-
</td>
230-
<td ng-if="valueform.$visible">
231-
<button class="btn btn-default btn-sm fa fa-remove"
232-
ng-click="removeInterpreterProperty(key, setting.id)">
233-
</button>
234-
</td>
235-
</tr>
236-
<tr ng-if="valueform.$visible">
237-
<td>
238-
<input ng-model="setting.propertyKey"
239-
pu-elastic-input
240-
pu-elastic-input-minwidth="180px" />
241-
</td>
242-
<td>
243-
<textarea msd-elastic ng-model="setting.propertyValue"></textarea>
244-
</td>
245-
<td>
246-
<button class="btn btn-default btn-sm fa fa-plus"
247-
ng-click="addNewInterpreterProperty(setting.id)">
248-
</button>
249-
</td>
250-
</tr>
251-
</table>
252-
</div>
253-
</div>
254-
<div class="row interpreter">
255-
<div class="col-md-12" ng-show="!_.isEmpty(setting.dependencies) || valueform.$visible">
256-
<h5>Dependencies</h5>
257-
<p class="gray40-message" style="font-size:12px" ng-show="valueform.$visible">
258-
These dependencies will be added to classpath when interpreter process starts.</p>
259-
<table class="table table-striped">
260-
<thead>
261-
<tr>
262-
<th style="width:40%">artifact</th>
263-
<th>exclude</th>
264-
<th ng-if="valueform.$visible">action</th>
265-
</tr>
266-
</thead>
267-
<tr ng-repeat="dep in setting.dependencies">
268-
<td>
269-
<span editable-text="dep.groupArtifactVersion" e-placeholder="groupId:artifactId:version or local file path"
270-
e-form="valueform" e-msd-elastic e-style="width:100%">
271-
{{dep.groupArtifactVersion | breakFilter}}
272-
</span>
273-
</td>
274-
<td>
275-
<textarea ng-if="valueform.$visible" ng-model="dep.exclusions"
276-
placeholder="(Optional) comma separated groupId:artifactId list"
277-
form="valueform"
278-
e-msd-elastic
279-
ng-list="">
280-
</textarea>
281-
<div ng-if="!valueform.$visible">{{dep.exclusions.join()}}</div>
282-
</td>
283-
<td ng-if="valueform.$visible">
284-
<button class="btn btn-default btn-sm fa fa-remove"
285-
ng-click="removeInterpreterDependency(dep.groupArtifactVersion, setting.id)">
286-
</button>
287-
</td>
288-
</tr>
289-
<tr ng-if="valueform.$visible">
290-
<td>
291-
<input ng-model="setting.depArtifact"
292-
placeholder="groupId:artifactId:version or local file path"
293-
style="width: 100%" />
294-
</td>
295-
<td>
296-
<textarea ng-model="setting.depExclude"
297-
placeholder="(Optional) comma separated groupId:artifactId list"
298-
msd-elastic
299-
ng-list="">
300-
</textarea>
301-
</td>
302-
<td>
303-
<button class="btn btn-default btn-sm fa fa-plus"
304-
ng-click="addNewInterpreterDependency(setting.id)">
305-
</button>
306-
</td>
307-
</tr>
308-
</table>
309-
<form editable-form name="valueform"
310-
onaftersave="updateInterpreterSetting(valueform, setting.id)"
311-
ng-show="valueform.$visible">
312-
<button type="submit" class="btn btn-primary">
313-
Save
314-
</button>
315-
<button type="button" class="btn btn-default"
316-
ng-disabled="valueform.$waiting"
317-
ng-click="valueform.$cancel(); resetInterpreterSetting(setting.id)">
318-
Cancel
319-
</button>
320-
</form>
64+
<div ng-show="repo.settings.length === 0 || valueform.$hidden" class="col-md-12 gray40-message">
65+
<em>Currently there are no settings for this Notebook Repository</em>
32166
</div>
32267
</div>
32368
</div>

zeppelin-web/src/components/navbar/navbar.html

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -86,6 +86,7 @@
8686
<li><a href="" data-toggle="modal" data-target="#aboutModal">About Zeppelin</a></li>
8787
<li role="separator" style="margin: 5px 0;" class="divider"></li>
8888
<li><a href="#/interpreter">Interpreter</a></li>
89+
<li><a href="#/notebookRepos">Notebook Repos</a></li>
8990
<li><a href="#/credential">Credential</a></li>
9091
<li><a href="#/configuration">Configuration</a></li>
9192
<li ng-if="ticket.principal && ticket.principal !== 'anonymous'" role="separator" style="margin: 5px 0;" class="divider"></li>

0 commit comments

Comments
 (0)