Skip to content

Commit e4c1162

Browse files
zhuolTom Graves
zhuol
authored and
Tom Graves
committed
[SPARK-10873] Support column sort and search for History Server.
[SPARK-10873] Support column sort and search for History Server using jQuery DataTable and REST API. Before this commit, the history server was generated hard-coded html and can not support search, also, the sorting was disabled if there is any application that has more than one attempt. Supporting search and sort (over all applications rather than the 20 entries in the current page) in any case will greatly improve user experience. 1. Create the historypage-template.html for displaying application information in datables. 2. historypage.js uses jQuery to access the data from /api/v1/applications REST API, and use DataTable to display each application's information. For application that has more than one attempt, the RowsGroup is used to merge such entries while at the same time supporting sort and search. 3. "duration" and "lastUpdated" rest API are added to application's "attempts". 4. External javascirpt and css files for datatables, RowsGroup and jquery plugins are added with licenses clarified. Snapshots for how it looks like now: History page view: ![historypage](https://cloud.githubusercontent.com/assets/11683054/12184383/89bad774-b55a-11e5-84e4-b0276172976f.png) Search: ![search](https://cloud.githubusercontent.com/assets/11683054/12184385/8d3b94b0-b55a-11e5-869a-cc0ef0a4242a.png) Sort by started time: ![sort-by-started-time](https://cloud.githubusercontent.com/assets/11683054/12184387/8f757c3c-b55a-11e5-98c8-577936366566.png) Author: zhuol <[email protected]> Closes #10648 from zhuoliu/10873.
1 parent e51b6ea commit e4c1162

28 files changed

+1721
-202
lines changed

‎.rat-excludes‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,16 @@ graphlib-dot.min.js
2525
sorttable.js
2626
vis.min.js
2727
vis.min.css
28+
dataTables.bootstrap.css
29+
dataTables.bootstrap.min.js
30+
dataTables.rowsGroup.js
31+
jquery.blockUI.min.js
32+
jquery.cookies.2.2.0.min.js
33+
jquery.dataTables.1.10.4.min.css
34+
jquery.dataTables.1.10.4.min.js
35+
jquery.mustache.js
36+
jsonFormatter.min.css
37+
jsonFormatter.min.js
2838
.*avsc
2939
.*txt
3040
.*json

‎LICENSE‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -291,3 +291,9 @@ The text of each license is also included at licenses/LICENSE-[project].txt.
291291
(MIT License) dagre-d3 (https://github.com/cpettitt/dagre-d3)
292292
(MIT License) sorttable (https://github.com/stuartlangridge/sorttable)
293293
(MIT License) boto (https://github.com/boto/boto/blob/develop/LICENSE)
294+
(MIT License) datatables (http://datatables.net/license)
295+
(MIT License) mustache (https://github.com/mustache/mustache/blob/master/LICENSE)
296+
(MIT License) cookies (http://code.google.com/p/cookies/wiki/License)
297+
(MIT License) blockUI (http://jquery.malsup.com/block/)
298+
(MIT License) RowsGroup (http://datatables.net/license/mit)
299+
(MIT License) jsonFormatter (http://www.jqueryscript.net/other/jQuery-Plugin-For-Pretty-JSON-Formatting-jsonFormatter.html)

‎core/src/main/resources/org/apache/spark/ui/static/dataTables.bootstrap.css‎

Lines changed: 319 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,319 @@
1+
div.dataTables_length label {
2+
font-weight: normal;
3+
text-align: left;
4+
white-space: nowrap;
5+
}
6+
7+
div.dataTables_length select {
8+
width: 75px;
9+
display: inline-block;
10+
}
11+
12+
div.dataTables_filter {
13+
text-align: right;
14+
}
15+
16+
div.dataTables_filter label {
17+
font-weight: normal;
18+
white-space: nowrap;
19+
text-align: left;
20+
}
21+
22+
div.dataTables_filter input {
23+
margin-left: 0.5em;
24+
display: inline-block;
25+
}
26+
27+
div.dataTables_info {
28+
padding-top: 8px;
29+
white-space: nowrap;
30+
}
31+
32+
div.dataTables_paginate {
33+
margin: 0;
34+
white-space: nowrap;
35+
text-align: right;
36+
}
37+
38+
div.dataTables_paginate ul.pagination {
39+
margin: 2px 0;
40+
white-space: nowrap;
41+
}
42+
43+
@media screen and (max-width: 767px) {
44+
div.dataTables_length,
45+
div.dataTables_filter,
46+
div.dataTables_info,
47+
div.dataTables_paginate {
48+
text-align: center;
49+
}
50+
}
51+
52+
53+
table.dataTable td,
54+
table.dataTable th {
55+
-webkit-box-sizing: content-box;
56+
-moz-box-sizing: content-box;
57+
box-sizing: content-box;
58+
}
59+
60+
61+
table.dataTable {
62+
clear: both;
63+
margin-top: 6px !important;
64+
margin-bottom: 6px !important;
65+
max-width: none !important;
66+
}
67+
68+
table.dataTable thead .sorting,
69+
table.dataTable thead .sorting_asc,
70+
table.dataTable thead .sorting_desc,
71+
table.dataTable thead .sorting_asc_disabled,
72+
table.dataTable thead .sorting_desc_disabled {
73+
cursor: pointer;
74+
}
75+
76+
table.dataTable thead .sorting { background: url('../images/sort_both.png') no-repeat center right; }
77+
table.dataTable thead .sorting_asc { background: url('../images/sort_asc.png') no-repeat center right; }
78+
table.dataTable thead .sorting_desc { background: url('../images/sort_desc.png') no-repeat center right; }
79+
80+
table.dataTable thead .sorting_asc_disabled { background: url('../images/sort_asc_disabled.png') no-repeat center right; }
81+
table.dataTable thead .sorting_desc_disabled { background: url('../images/sort_desc_disabled.png') no-repeat center right; }
82+
83+
table.dataTable thead > tr > th {
84+
padding-left: 18px;
85+
padding-right: 18px;
86+
}
87+
88+
table.dataTable th:active {
89+
outline: none;
90+
}
91+
92+
/* Scrolling */
93+
div.dataTables_scrollHead table {
94+
margin-bottom: 0 !important;
95+
border-bottom-left-radius: 0;
96+
border-bottom-right-radius: 0;
97+
}
98+
99+
div.dataTables_scrollHead table thead tr:last-child th:first-child,
100+
div.dataTables_scrollHead table thead tr:last-child td:first-child {
101+
border-bottom-left-radius: 0 !important;
102+
border-bottom-right-radius: 0 !important;
103+
}
104+
105+
div.dataTables_scrollBody table {
106+
border-top: none;
107+
margin-top: 0 !important;
108+
margin-bottom: 0 !important;
109+
}
110+
111+
div.dataTables_scrollBody tbody tr:first-child th,
112+
div.dataTables_scrollBody tbody tr:first-child td {
113+
border-top: none;
114+
}
115+
116+
div.dataTables_scrollFoot table {
117+
margin-top: 0 !important;
118+
border-top: none;
119+
}
120+
121+
/* Frustratingly the border-collapse:collapse used by Bootstrap makes the column
122+
width calculations when using scrolling impossible to align columns. We have
123+
to use separate
124+
*/
125+
table.table-bordered.dataTable {
126+
border-collapse: separate !important;
127+
}
128+
table.table-bordered thead th,
129+
table.table-bordered thead td {
130+
border-left-width: 0;
131+
border-top-width: 0;
132+
}
133+
table.table-bordered tbody th,
134+
table.table-bordered tbody td {
135+
border-left-width: 0;
136+
border-bottom-width: 0;
137+
}
138+
table.table-bordered th:last-child,
139+
table.table-bordered td:last-child {
140+
border-right-width: 0;
141+
}
142+
div.dataTables_scrollHead table.table-bordered {
143+
border-bottom-width: 0;
144+
}
145+
146+
147+
148+
149+
/*
150+
* TableTools styles
151+
*/
152+
.table.dataTable tbody tr.active td,
153+
.table.dataTable tbody tr.active th {
154+
background-color: #08C;
155+
color: white;
156+
}
157+
158+
.table.dataTable tbody tr.active:hover td,
159+
.table.dataTable tbody tr.active:hover th {
160+
background-color: #0075b0 !important;
161+
}
162+
163+
.table.dataTable tbody tr.active th > a,
164+
.table.dataTable tbody tr.active td > a {
165+
color: white;
166+
}
167+
168+
.table-striped.dataTable tbody tr.active:nth-child(odd) td,
169+
.table-striped.dataTable tbody tr.active:nth-child(odd) th {
170+
background-color: #017ebc;
171+
}
172+
173+
table.DTTT_selectable tbody tr {
174+
cursor: pointer;
175+
}
176+
177+
div.DTTT .btn {
178+
color: #333 !important;
179+
font-size: 12px;
180+
}
181+
182+
div.DTTT .btn:hover {
183+
text-decoration: none !important;
184+
}
185+
186+
ul.DTTT_dropdown.dropdown-menu {
187+
z-index: 2003;
188+
}
189+
190+
ul.DTTT_dropdown.dropdown-menu a {
191+
color: #333 !important; /* needed only when demo_page.css is included */
192+
}
193+
194+
ul.DTTT_dropdown.dropdown-menu li {
195+
position: relative;
196+
}
197+
198+
ul.DTTT_dropdown.dropdown-menu li:hover a {
199+
background-color: #0088cc;
200+
color: white !important;
201+
}
202+
203+
div.DTTT_collection_background {
204+
z-index: 2002;
205+
}
206+
207+
/* TableTools information display */
208+
div.DTTT_print_info {
209+
position: fixed;
210+
top: 50%;
211+
left: 50%;
212+
width: 400px;
213+
height: 150px;
214+
margin-left: -200px;
215+
margin-top: -75px;
216+
text-align: center;
217+
color: #333;
218+
padding: 10px 30px;
219+
opacity: 0.95;
220+
221+
background-color: white;
222+
border: 1px solid rgba(0, 0, 0, 0.2);
223+
border-radius: 6px;
224+
225+
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
226+
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.5);
227+
}
228+
229+
div.DTTT_print_info h6 {
230+
font-weight: normal;
231+
font-size: 28px;
232+
line-height: 28px;
233+
margin: 1em;
234+
}
235+
236+
div.DTTT_print_info p {
237+
font-size: 14px;
238+
line-height: 20px;
239+
}
240+
241+
div.dataTables_processing {
242+
position: absolute;
243+
top: 50%;
244+
left: 50%;
245+
width: 100%;
246+
height: 60px;
247+
margin-left: -50%;
248+
margin-top: -25px;
249+
padding-top: 20px;
250+
padding-bottom: 20px;
251+
text-align: center;
252+
font-size: 1.2em;
253+
background-color: white;
254+
background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255,255,255,0)), color-stop(25%, rgba(255,255,255,0.9)), color-stop(75%, rgba(255,255,255,0.9)), color-stop(100%, rgba(255,255,255,0)));
255+
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
256+
background: -moz-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
257+
background: -ms-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
258+
background: -o-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
259+
background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 25%, rgba(255,255,255,0.9) 75%, rgba(255,255,255,0) 100%);
260+
}
261+
262+
263+
264+
/*
265+
* FixedColumns styles
266+
*/
267+
div.DTFC_LeftHeadWrapper table,
268+
div.DTFC_LeftFootWrapper table,
269+
div.DTFC_RightHeadWrapper table,
270+
div.DTFC_RightFootWrapper table,
271+
table.DTFC_Cloned tr.even {
272+
background-color: white;
273+
margin-bottom: 0;
274+
}
275+
276+
div.DTFC_RightHeadWrapper table ,
277+
div.DTFC_LeftHeadWrapper table {
278+
border-bottom: none !important;
279+
margin-bottom: 0 !important;
280+
border-top-right-radius: 0 !important;
281+
border-bottom-left-radius: 0 !important;
282+
border-bottom-right-radius: 0 !important;
283+
}
284+
285+
div.DTFC_RightHeadWrapper table thead tr:last-child th:first-child,
286+
div.DTFC_RightHeadWrapper table thead tr:last-child td:first-child,
287+
div.DTFC_LeftHeadWrapper table thead tr:last-child th:first-child,
288+
div.DTFC_LeftHeadWrapper table thead tr:last-child td:first-child {
289+
border-bottom-left-radius: 0 !important;
290+
border-bottom-right-radius: 0 !important;
291+
}
292+
293+
div.DTFC_RightBodyWrapper table,
294+
div.DTFC_LeftBodyWrapper table {
295+
border-top: none;
296+
margin: 0 !important;
297+
}
298+
299+
div.DTFC_RightBodyWrapper tbody tr:first-child th,
300+
div.DTFC_RightBodyWrapper tbody tr:first-child td,
301+
div.DTFC_LeftBodyWrapper tbody tr:first-child th,
302+
div.DTFC_LeftBodyWrapper tbody tr:first-child td {
303+
border-top: none;
304+
}
305+
306+
div.DTFC_RightFootWrapper table,
307+
div.DTFC_LeftFootWrapper table {
308+
border-top: none;
309+
margin-top: 0 !important;
310+
}
311+
312+
313+
/*
314+
* FixedHeader styles
315+
*/
316+
div.FixedHeader_Cloned table {
317+
margin: 0 !important
318+
}
319+

‎core/src/main/resources/org/apache/spark/ui/static/dataTables.bootstrap.min.js‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)