Skip to content

Commit 679631b

Browse files
author
Inigo Goiri
committed
HDFS-13470. RBF: Add Browse the Filesystem button to the UI.
1 parent 50f7f6d commit 679631b

File tree

3 files changed

+879
-1
lines changed

3 files changed

+879
-1
lines changed

‎hadoop-hdfs-project/hadoop-hdfs-rbf/src/main/webapps/router/explorer.html‎

Lines changed: 323 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,323 @@
1+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
2+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
3+
<!--
4+
Licensed to the Apache Software Foundation (ASF) under one or more
5+
contributor license agreements. See the NOTICE file distributed with
6+
this work for additional information regarding copyright ownership.
7+
The ASF licenses this file to You under the Apache License, Version 2.0
8+
(the "License"); you may not use this file except in compliance with
9+
the License. You may obtain a copy of the License at
10+
11+
http://www.apache.org/licenses/LICENSE-2.0
12+
13+
Unless required by applicable law or agreed to in writing, software
14+
distributed under the License is distributed on an "AS IS" BASIS,
15+
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
16+
See the License for the specific language governing permissions and
17+
limitations under the License.
18+
-->
19+
<html xmlns="http://www.w3.org/1999/xhtml">
20+
<head>
21+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
22+
<link rel="stylesheet" type="text/css" href="/static/bootstrap-3.4.1/css/bootstrap.min.css" />
23+
<link rel="stylesheet" type="text/css" href="/static/bootstrap-3.4.1/css/bootstrap-editable.css"/>
24+
<link rel="stylesheet" type="text/css" href="/static/dataTables.bootstrap.css" />
25+
<link rel="stylesheet" type="text/css" href="/static/hadoop.css" />
26+
<title>Browsing HDFS</title>
27+
</head>
28+
<body>
29+
30+
<header class="navbar navbar-inverse bs-docs-nav" role="banner">
31+
<div class="container">
32+
<div class="navbar-header">
33+
<div class="navbar-brand">Hadoop</div>
34+
</div>
35+
36+
<ul class="nav navbar-nav" id="ui-tabs">
37+
<li><a href="federationhealth.html#tab-overview">Overview</a></li>
38+
<li><a href="federationhealth.html#tab-namenode">Subclusters</a></li>
39+
<li><a href="federationhealth.html#tab-router">Routers</a></li>
40+
<li><a href="federationhealth.html#tab-datanode">Datanodes</a></li>
41+
<li><a href="federationhealth.html#tab-mounttable">Mount table</a></li>
42+
<li class="dropdown">
43+
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Utilities <b class="caret"></b></a>
44+
<ul class="dropdown-menu">
45+
<li><a href="#">Browse the file system</a></li>
46+
<li><a href="logs">Logs</a></li>
47+
<li><a href="logLevel">Log Level</a></li>
48+
<li><a href="jmx">Metrics</a></li>
49+
<li><a href="conf">Configuration</a></li>
50+
<li><a href="stacks">Process Thread Dump</a></li>
51+
</ul>
52+
</li>
53+
</ul>
54+
</div>
55+
</header>
56+
57+
<div class="modal" id="file-info" tabindex="-1" role="dialog" aria-hidden="true">
58+
<div class="modal-dialog">
59+
<div class="modal-content">
60+
<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
61+
<h4 class="modal-title" id="file-info-title">File information</h4>
62+
</div>
63+
<div class="modal-body" id="file-info-body">
64+
<div class=row>
65+
<span class="col-xs-4">
66+
<a id="file-info-download">Download</a>
67+
</span>
68+
<span class="col-xs-4">
69+
<a id="file-info-preview-head" style="cursor:pointer">Head the file (first 32K)</a>
70+
</span>
71+
<span class="col-xs-4">
72+
<a id="file-info-preview-tail" style="cursor:pointer">Tail the file (last 32K)</a>
73+
</span>
74+
</div>
75+
<hr />
76+
<div class="panel panel-success" id="file-info-blockinfo-panel">
77+
<div class="panel-heading">
78+
Block information --
79+
<select class="btn btn-default" id="file-info-blockinfo-list">
80+
</select>
81+
</div>
82+
<div class="panel-body" id="file-info-blockinfo-body"></div>
83+
</div>
84+
<div class="panel panel-info" id="file-info-tail" style="display:none">
85+
<div class="panel-heading">File contents</div>
86+
<div class="panel-body">
87+
<div class="input-group-sm">
88+
<textarea class="form-control" style="height: 150px" id="file-info-preview-body"></textarea>
89+
</div>
90+
</div>
91+
</div>
92+
</div>
93+
<div class="modal-footer"><button type="button" class="btn btn-success"
94+
data-dismiss="modal">Close</button></div>
95+
</div>
96+
</div>
97+
</div>
98+
<div class="container">
99+
<div class="page-header">
100+
<h1>Browse Directory</h1>
101+
</div>
102+
<div class="alert alert-danger" id="alert-panel" style="display:none">
103+
<button type="button" class="close" onclick="$('#alert-panel').hide();">&times;</button>
104+
<div class="alert-body" id="alert-panel-body"></div>
105+
</div>
106+
<div class="modal" id="btn-create-directory" tabindex="-1" role="dialog"
107+
aria-hidden="true">
108+
<div class="modal-dialog">
109+
<div class="modal-content">
110+
<div class="modal-header">
111+
<button type="button" class="close"
112+
data-dismiss="modal" aria-hidden="true">&times;</button>
113+
<h4 class="modal-title">Create Directory</h4>
114+
</div>
115+
<div class="modal-body">
116+
<div class="form-group">
117+
<div class="input-group">
118+
<span class="input-group-addon" id="new_directory_pwd"></span>
119+
<input type="text" class="form-control" id="new_directory"
120+
placeholder="New Directory Name" />
121+
</div>
122+
</div>
123+
</div>
124+
<div class="modal-footer">
125+
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
126+
<button type="button" class="btn btn-success"
127+
id="btn-create-directory-send" data-complete-text="Creating...">
128+
Create
129+
</button>
130+
</div>
131+
</div>
132+
</div>
133+
</div>
134+
135+
<div class="modal" id="modal-upload-file" tabindex="-1" role="dialog" aria-hidden="true">
136+
<div class="modal-dialog">
137+
<div class="modal-content">
138+
<div class="modal-header"><button type="button" class="close"
139+
data-dismiss="modal" aria-hidden="true">&times;</button>
140+
<h4 class="modal-title" id="file-upload-title">Upload File</h4>
141+
</div>
142+
<div class="modal-body" id="file-upload-body">
143+
<input id="modal-upload-file-input" type="file" class="file" multiple>
144+
</div>
145+
<div class="modal-footer">
146+
<button type="button" class="btn btn-success" data-dismiss="modal">Close</button>
147+
<button type="button" class="btn btn-success" id="modal-upload-file-button" data-complete-text="Uploading...">Upload</button>
148+
</div>
149+
</div>
150+
</div>
151+
</div>
152+
<div class="modal" id="delete-modal" tabindex="-1" role="dialog" aria-hidden="true">
153+
<div class="modal-dialog">
154+
<div class="modal-content">
155+
<div class="modal-header">
156+
<button type="button" class="close" data-dismiss="modal"
157+
aria-hidden="true">&times;</button>
158+
<h4 class="modal-title" id="delete-modal-title">Delete</h4>
159+
</div>
160+
<div class="modal-body">
161+
<div class="panel-body">
162+
<div id="delete-prompt"></div>
163+
</div>
164+
</div>
165+
<div class="modal-footer">
166+
<button type="button" class="btn" data-dismiss="modal">Cancel</button>
167+
<button type="button" class="btn btn-success" id="delete-button"
168+
data-complete-text="Deleting...">Delete</button>
169+
</div>
170+
</div>
171+
</div>
172+
</div>
173+
174+
<div class="row">
175+
<div class="col-xs-10 col-md-10">
176+
<form onsubmit="return false;">
177+
<div class="input-group">
178+
<input type="text" class="form-control" id="directory"/>
179+
<span class="input-group-btn">
180+
<button class="btn btn-default" type="button" id="btn-nav-directory">Go!</button>
181+
</span>
182+
</div>
183+
</form>
184+
</div>
185+
<div class="col-xs-2 col-md-2">
186+
<button type="button" class="btn btn-default" data-toggle="modal"
187+
aria-label="New Directory" data-target="#btn-create-directory"
188+
title="Create Directory" id="btn-create-dir">
189+
<span class="glyphicon glyphicon-folder-open"></span>
190+
</button>
191+
<button type="button" class="btn btn-default" data-toggle="modal"
192+
data-target="#modal-upload-file" title="Upload Files" id="btn-upload-files">
193+
<span class="glyphicon glyphicon-cloud-upload"></span>
194+
</button>
195+
<button class="btn btn-default dropdown-toggle" type="button"
196+
data-toggle="dropdown" title="Cut & Paste">
197+
<span class="glyphicon glyphicon-list-alt"></span></button>
198+
<ul class="dropdown-menu cut-paste">
199+
<li><a id="explorer-cut">Cut</a></li>
200+
<li><a id="explorer-paste">Paste</a></li>
201+
</ul>
202+
</div>
203+
</div>
204+
205+
<br />
206+
<div id="panel"></div>
207+
208+
<div class="row">
209+
<hr />
210+
<div class="col-xs-2"><p>Hadoop, {release-year-token}.</p></div>
211+
</div>
212+
213+
</div>
214+
215+
<script type="text/x-template" id="explorer-popover-perm-info">
216+
<div class="explorer-popover-perm-body">
217+
<table class="table table-striped">
218+
<thead>
219+
<tr>
220+
<th class="text-center">User</th>
221+
<th class="text-center">Group</th>
222+
<th class="text-center">Other</th>
223+
</tr>
224+
</thead>
225+
<tbody>
226+
<tr>
227+
<td><label><input type="checkbox" data-bit="8" /> Read</label></td>
228+
<td><label><input type="checkbox" data-bit="5" /> Read</label></td>
229+
<td><label><input type="checkbox" data-bit="2" /> Read</label></td>
230+
</tr>
231+
<tr>
232+
<td><label><input type="checkbox" data-bit="7" /> Write</label></td>
233+
<td><label><input type="checkbox" data-bit="4" /> Write</label></td>
234+
<td><label><input type="checkbox" data-bit="1" /> Write</label></td>
235+
</tr>
236+
<tr>
237+
<td><label><input type="checkbox" data-bit="6" /> Execute</label></td>
238+
<td><label><input type="checkbox" data-bit="3" /> Execute</label></td>
239+
<td><label><input type="checkbox" data-bit="0" /> Execute</label></td>
240+
</tr>
241+
</tbody>
242+
</table>
243+
<div style="text-align: right; margin-right: 10px">
244+
<label><input type="checkbox" id="explorer-perm-sticky" data-bit="9" /> Sticky bit</label>
245+
</div>
246+
<hr/>
247+
<div style="text-align: right">
248+
<button type="button" class="btn" id="explorer-perm-cancel">Cancel</button>
249+
<button type="button" class="btn btn-success" id="explorer-set-perm-button"
250+
data-complete-text="Updating...">Set</button>
251+
</div>
252+
</div>
253+
</script>
254+
255+
<script type="text/x-dust-template" id="tmpl-explorer">
256+
<table class="table" id="table-explorer">
257+
<thead>
258+
<tr>
259+
<th><input type="checkbox" id="file-selector-all"></th>
260+
<th title="Permissions">Permission</th>
261+
<th>Owner</th>
262+
<th>Group</th>
263+
<th>Size</th>
264+
<th title="Last Modified">Last Modified</th>
265+
<th title="Replication">Replication</th>
266+
<th>Block Size</th>
267+
<th>Name</th>
268+
<th></th>
269+
</tr>
270+
</thead>
271+
<tbody>
272+
{#FileStatus}
273+
<tr inode-path="{pathSuffix}" data-permission="{permission}"
274+
class="explorer-entry">
275+
<td><input type="checkbox" class="file_selector"> </td>
276+
<td><span class="explorer-perm-links editable-click">
277+
{type|helper_to_directory}{permission|helper_to_permission}
278+
{aclBit|helper_to_acl_bit}
279+
</span></td>
280+
<td><span class="explorer-owner-links">{owner}</span></td>
281+
<td><span class="explorer-group-links">{group}</span></td>
282+
<td>{length}</td>
283+
<td>{modificationTime}</td>
284+
<td><span class="explorer-replication-links">{replication}</span></td>
285+
<td>{blockSize|fmt_bytes}</td>
286+
<td><a inode-type="{type}" class="explorer-browse-links">{pathSuffix}</a></td>
287+
<td><span class="glyphicon glyphicon-trash"></span></td>
288+
</tr>
289+
{/FileStatus}
290+
</tbody>
291+
</table>
292+
</script>
293+
294+
<script type="text/x-dust-template" id="tmpl-block-info">
295+
{#block}
296+
<p>Block ID: {blockId}</p>
297+
<p>Block Pool ID: {blockPoolId}</p>
298+
<p>Generation Stamp: {generationStamp}</p>
299+
<p>Size: {numBytes}</p>
300+
{/block}
301+
<p>Availability:
302+
<ul>
303+
{#locations}
304+
<li>{hostName}</li>
305+
{/locations}
306+
</ul>
307+
</p>
308+
</script>
309+
<script type="text/javascript" src="/static/jquery-3.4.1.min.js">
310+
</script><script type="text/javascript" src="/static/jquery.dataTables.min.js">
311+
</script><script type="text/javascript" src="/static/bootstrap-3.4.1/js/bootstrap.min.js">
312+
</script><script type="text/javascript" src="/static/bootstrap-3.4.1/js/bootstrap-editable.min.js">
313+
</script><script type="text/javascript" src="/static/dataTables.bootstrap.js">
314+
</script><script type="text/javascript" src="/static/dust-full-2.0.0.min.js">
315+
</script><script type="text/javascript" src="/static/dust-helpers-1.1.1.min.js">
316+
</script><script type="text/javascript" src="/static/dfs-dust.js">
317+
</script><script type="text/javascript" src="/static/json-bignum.js">
318+
</script><script type="text/javascript" src="/static/rest-csrf.js">
319+
</script><script type="text/javascript" src="explorer.js">
320+
</script><script type="text/javascript" src="/static/moment.min.js">
321+
</script>
322+
</body>
323+
</html>

0 commit comments

Comments
 (0)