forked from awslabs/aws-js-s3-explorer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
539 lines (514 loc) · 34.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
<!DOCTYPE html>
<!--
Copyright 2018 Amazon.com, Inc. or its affiliates. All Rights Reserved.
Licensed under the Apache License, Version 2.0 (the "License").
You may not use this file except in compliance with the License. A copy
of the License is located at
http://aws.amazon.com/apache2.0/
or in the "license" file accompanying this file. This file is distributed
on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,
either express or implied. See the License for the specific language governing
permissions and limitations under the License.
-->
<html lang="en" ng-app="aws-js-s3-explorer">
<head>
<title>Amazon S3 Explorer (v2 alpha)</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="https://aws.amazon.com/favicon.ico">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css" integrity="sha384-PmY9l28YgO4JwMKbTvgaS7XNZJ30MK9FAZjjzXtlqyZCqBY6X6bXIkM++IkyinN+" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap-theme.min.css" integrity="sha384-jzngWsPS6op3fgRCDTESqrEJwRKck+CILhJVO5VvaAZCq8JYf8HsR/HPpBOOPZfR" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="explorer.css">
</head>
<!-- DEBUG: Enable this for red outline on all elements -->
<!-- <style media="screen" type="text/css"> * { outline: 1px red solid; } </style> -->
<body>
<!-- Modal Settings dialog -->
<div id="SettingsModal" class="modal fade" ng-controller="SettingsController" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form name="settings_form" ng-submit="update()">
<fieldset>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">S3 Explorer: Settings</h4>
</div>
<div class="modal-body">
<div class="col-md-18">
<div class="panel panel-default">
<div class="panel-body">
<p><b>Bucket</b>: Please indicate which region and S3 bucket you want to explore.</p>
<div class="input-group bottom-marg-10">
<span class="input-group-addon">Region</span>
<select name="region" class="form-control" ng-model="settings.region">
<option value="ap-south-1">Asia Pacific (Mumbai)</option>
<option value="ap-northeast-3">Asia Pacific (Osaka-Local)</option>
<option value="ap-northeast-2">Asia Pacific (Seoul)</option>
<option value="ap-southeast-1">Asia Pacific (Singapore)</option>
<option value="ap-southeast-2">Asia Pacific (Sydney)</option>
<option value="ap-northeast-1">Asia Pacific (Tokyo)</option>
<option value="ca-central-1">Canada (Central)</option>
<option value="eu-central-1">EU (Frankfurt)</option>
<option value="eu-west-1">EU (Ireland)</option>
<option value="eu-west-2">EU (London)</option>
<option value="eu-west-3">EU (Paris)</option>
<option value="eu-north-1">EU (Stockholm)</option>
<option value="sa-east-1">South America (São Paulo)</option>
<option value="">US East (N. Virginia)</option>
<option value="us-east-2">US East (Ohio)</option>
<option value="us-west-1">US West (N. California)</option>
<option value="us-west-2">US West (Oregon)</option>
</select>
</div>
<div class="input-group bottom-marg-10" ng-show="settings.buckets.length">
<span class="input-group-addon">Bucket</span>
<select name="bucketlist" class="form-control" ng-model="settings.selected_bucket" placeholder="bucket" ng-required="buckets.length">
<!-- <option value="" disabled selected>Select a bucket ...</option> -->
<option ng-repeat="bucket in settings.buckets" value="{{bucket}}">{{bucket}}</option>
<option value="">Other ...</option>
</select>
</div>
<div class="input-group bottom-marg-10" ng-hide="settings.buckets.length && settings.selected_bucket!=''">
<span class="input-group-addon">Bucket</span>
<input name="bucket" ng-model="settings.entered_bucket" type="text" class="form-control" placeholder="bucket" ng-required="!buckets.length"/>
</div>
<p><b>Authentication</b>: Please provide any credentials needed to access the bucket.</p>
<div class="input-group bottom-marg-10">
<span class="input-group-addon">Authentication</span>
<select name="county" class="form-control" ng-model="settings.auth" required>
<option value="anon">Public Bucket (no authentication needed)</option>
<option value="auth">Private Bucket (I have AWS credentials)</option>
<option value="temp">Private Bucket (I have temporary AWS credentials)</option>
</select>
</div>
<p ng-hide="settings.auth=='anon'"><b>Credentials</b>: this web page uses the <a href="http://aws.amazon.com/sdk-for-browser/" target="_blank">AWS SDK for JavaScript in the Browser</a>. Your AWS credentials are kept in memory and used by the SDK for authentication. Your secret access key is used to sign API requests but it is <b>not</b> sent to the S3 service.</p>
<div class="input-group bottom-marg-10" ng-hide="settings.auth=='anon'">
<span class="input-group-addon">Access Key ID</span>
<input name="accesskey" type="text" ng-model="settings.cred.accessKeyId" class="form-control" ng-disabled="settings.auth=='anon'" placeholder="access key id" required/>
</div>
<div class="input-group bottom-marg-10" ng-hide="settings.auth=='anon'">
<span class="input-group-addon">Secret Access Key</span>
<input name="secretkey" type="password" ng-model="settings.cred.secretAccessKey" class="form-control" ng-disabled="settings.auth=='anon'" placeholder="secret access key" required/>
</div>
<div class="input-group bottom-marg-10" ng-show="settings.auth=='temp'">
<span class="input-group-addon">Session Token</span>
<input name="token" type="text" ng-model="settings.cred.sessionToken" class="form-control" ng-disabled="settings.auth!='temp'" placeholder="session token" required/>
</div>
<div class="input-group bottom-marg-10" ng-show="settings.auth=='auth'">
<span class="input-group-addon">Multi-Factor</span>
<select name="county" class="form-control" ng-model="settings.mfa.use" required>
<option value="no">No (I do not need to provide an MFA code)</option>
<option value="yes">Yes (I need to provide an MFA code)</option>
</select>
</div>
<div class="input-group bottom-marg-10" ng-show="settings.mfa.use=='yes'">
<span class="input-group-addon">MFA Code</span>
<input name="token" type="text" ng-model="settings.mfa.code" class="form-control" ng-disabled="settings.mfa.use=='no'" placeholder="MFA code" required/>
</div>
<p><b>Options</b>: S3 Explorer can show your S3 bucket contents folder-by-folder or it can show
a flat view of the entire bucket. Also, if you want to start in a folder that is not the root folder then enter the initial prefix below, for example <i>songs/</i>.</p>
<div class="input-group bottom-marg-10">
<span class="input-group-addon">Initial View</span>
<select name="view" class="form-control" ng-model="settings.delimiter" required>
<option value="/">Folder (shows folder-by-folder)</option>
<option value="">Bucket (shows entire bucket contents)</option>
</select>
</div>
<div class="input-group bottom-marg-10">
<span class="input-group-addon">Initial Prefix</span>
<input name="prefix" type="text" ng-model="settings.prefix" class="form-control" placeholder="prefix e.g. songs/"/>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"><i class='fa fa-cloud-download-alt fa-lg'></i> Query S3</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- Modal Add Folder dialog -->
<div id="AddFolderModal" class="modal fade" ng-controller="AddFolderController" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<form name="add_folder_form" ng-submit="addFolder()">
<fieldset>
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">S3 Explorer: New Folder</h4>
</div>
<div class="modal-body">
<div class="col-md-18">
<div class="panel panel-default">
<div class="panel-body">
<p>Please enter the relative path of the S3 folder to add, for example folder-01 or wallpaper/animals/dogs</p>
<div class="input-group bottom-marg-10">
<span class="input-group-addon">{{add_folder.view_prefix}}</span>
<input name="folder" ng-model="add_folder.entered_folder" type="text" class="form-control" placeholder="folder" ng-required="true"/>
</div>
<p>The new S3 folder will be {{add_folder.view_prefix}}{{add_folder.entered_folder}}.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-primary"><i class='fa fa-folder-plus fa-lg'></i> Add Folder</button>
</div>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- Info dialog -->
<div id="InfoModal" class="modal fade" ng-controller="InfoController" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">S3 Explorer: Information</h4>
</div>
<div class="modal-body">
<div class="col-md-18">
<ul class="nav nav-tabs" data-tabs="tabs">
<li role="presentation" class="active"><a href="#about" data-toggle="tab">About</a></li>
<li role="presentation"><a href="#cors" ng-hide="!info.bucket || !info.cors" data-toggle="tab">CORS</a></li>
<li role="presentation"><a href="#policy" ng-hide="!info.bucket || !info.policy" data-toggle="tab">Bucket Policy</a></li>
<li role="presentation"><a href="#corsref" data-toggle="tab">CORS Reference</a></li>
<li role="presentation"><a href="#policyref" data-toggle="tab">Policy Reference</a></li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="about">
<br/>
<p>Amazon S3 Explorer is an application that uses the AWS JavaScript SDK in the Browser to make the contents of an S3 bucket easy to view in a web browser.</p>
<p>To upload files, first navigate to the bucket & folder of your choice and then drag & drop files onto the main S3 Explorer table.</p>
<p>To delete files, first choose the files you want to delete by clicking checkboxes in the Select column, then click the Trash icon. You will be asked to confirm this action.</p>
<p>For more details and to download the source code, see our <a target="_blank" href="https://github.com/awslabs/aws-js-s3-explorer">GitHub page</a>.</p>
</div>
<div class="tab-pane" id="cors" ng-hide="!info.cors">
<br/>
<p>The currently-configured CORS Configuration for {{info.bucket}} is below.</p>
<pre><span id="info-cors"></span></pre>
</div>
<div class="tab-pane" id="policy" ng-hide="!info.policy">
<br/>
<p>The currently-configured Bucket Policy for {{info.bucket}} is below.</p>
<pre><span id="info-policy"></span></pre>
</div>
<div class="tab-pane" id="corsref">
<br/>
<p>
JavaScript in the browser cannot display the contents of an Amazon S3 bucket unless the bucket has the proper cross-origin resource sharing (CORS) configuration.
</p>
<p>
To configure CORS, you create a CORS configuration that identifies the origins allowed to access your bucket and the operations (HTTP methods) supported.
</p>
<p>
To do this, select your bucket in the buckets panel of the Amazon S3 Console and click to reveal Permissions in the Properties pane. Click Edit CORS Configuration. The CORS Configuration Editor panel will open up with a field where you can enter a CORS Configuration. Enter a configuration similar to the following:
</p>
<p>
<pre>
<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
<AllowedOrigin>*</AllowedOrigin>
<AllowedMethod>GET</AllowedMethod>
<AllowedMethod>POST</AllowedMethod>
<AllowedMethod>PUT</AllowedMethod>
<AllowedMethod>HEAD</AllowedMethod>
<MaxAgeSeconds>3000</MaxAgeSeconds>
<AllowedHeader>*</AllowedHeader>
<ExposeHeader>ETag</ExposeHeader>
<ExposeHeader>x-amz-meta-myheader</ExposeHeader>
</CORSRule>
</CORSConfiguration>
</pre>
<p>
Please see the project <a target="_blank" href="https://github.com/awslabs/aws-js-s3-explorer/blob/v2-alpha/README.md">README</a> for more specific details on how to create an appropriate CORS configuration.
</p>
</p>
</div>
<div class="tab-pane" id="policyref">
<br/>
<p>Here is a sample S3 bucket policy that you can use. Change <i>999999999999</i> to your AWS account number and change <i>mybucket</i> to your bucket name.</p>
<p>
<pre>
{
"Version": "2012-10-17",
"Statement": [{
"Sid": "AllPermissionsForOwner",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::999999999999:root"
},
"Action": "s3:*",
"Resource": "arn:aws:s3:::mybucket/*"
}]
}
</pre>
<p>
Please see the project <a target="_blank" href="https://github.com/awslabs/aws-js-s3-explorer/blob/v2-alpha/README.md">README</a> for more specific details on how to create an appropriate S3 bucket policy.
</p>
</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Trash modal -->
<div id="TrashModal" class="modal fade" ng-controller="TrashController" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">S3 Explorer: Delete {{trash.count}} objects</h4>
</div>
<div class="modal-body">
<div class="col-md-18">
<div class="panel-body">
<p>
Please confirm that you want to delete the following objects from S3.
</p>
<br/>
<table class="table table-bordered table-hover table-striped" id="trash-table">
<thead id="trash-thead">
<tr>
<th></th>
<th>Object</th>
<th>Folder</th>
<th>Last Modified</th>
<th>Timestamp</th>
<th>Class</th>
<th>Size</th>
<th>Result</th>
</tr>
</thead>
<tbody id="trash-tbody">
<tr ng-repeat="o in trash.objects" ng-attr-id="trash-tr-{{$index}}">
<td>{{$index + 1}}</td>
<td>{{o.object}}</td>
<td>{{o.folder}}</td>
<td>{{o.last_modified}}</td>
<td>{{o.timestamp}}</td>
<td>{{o.class}}</td>
<td>{{o.size}}</td>
<td ng-attr-id="trash-td-{{$index}}"><i>n/a</i></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button id="trash-btn-cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button id="trash-btn-delete" type="submit" class="btn btn-danger" ng-disabled="trash.trashing"><i class="fa fa-trash-alt fa-lg"></i> {{trash.button}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Error modal -->
<div id="ErrorModal" class="modal fade" ng-controller="ErrorController" tabindex="-1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">S3 Explorer: Error ({{error.code}})</h4>
</div>
<div class="modal-body">
<div class="col-md-18">
<div class="panel-body">
<p>An error was detected: {{error.message}}</p>
<div class="collapse" id="collapseAdvanced">
<div class="well-sm">
<table class="table table-bordered table-hover table-striped" id="error-table">
<thead id="error-thead">
<tr>
<th>#</th>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody id="error-tbody">
<tr ng-repeat="e in error.errors">
<td>{{$index + 1}}</td>
<td>{{e.key}}</td>
<td>{{e.value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default" data-toggle="collapse" data-target="#collapseAdvanced" aria-expanded="false" aria-controls="collapseAdvanced"><i class="fa fa-cog" aria-hidden="true"> </i>Advanced</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Hidden selector for adding files -->
<input id="addedFiles" type="file" ng-hide="true" multiple/>
<!-- Upload modal -->
<div id="UploadModal" class="modal fade" ng-controller="UploadController" tabindex="-1">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Upload to: {{upload.title}}</h4>
</div>
<div class="modal-body">
<div class="col-md-18">
<div class="panel-body">
<p>
Please confirm that you want to upload the following files to S3.
</p>
<table class="table table-bordered table-hover table-striped" id="upload-table">
<thead id="upload-thead">
<tr>
<th></th>
<th>Filename</th>
<th>Type</th>
<th>Size</th>
<th>Progress</th>
</tr>
</thead>
<tbody id="upload-tbody">
<tr ng-repeat="file in upload.files">
<td>{{$index + 1}}</td>
<td>{{file.short}}</td>
<td>{{file.type}}</td>
<td>{{file.size}}</td>
<td id="upload-td-{{$index}}">
<span id="upload-td-progress-{{$index}}" class="progress-bar" data-percent="0"></span>
</td>
</tr>
</tbody>
</table>
<p>
The selected files will be uploaded to {{upload.title}}
</p>
</div>
</div>
</div>
<div class="modal-footer">
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<!-- <button id="upload-btn-cancel" type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> -->
<button id="upload-btn-cancel" type="button" class="btn btn-default">Cancel</button>
<button id="upload-btn-upload" type="submit" class="btn btn-primary" ng-disabled="upload.uploading"><i class="fa fa-cloud-upload-alt fa-lg"></i> {{upload.button}}</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Main Explorer View -->
<div id="page-wrapper" ng-controller="ViewController">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-primary dropzone">
<!-- Panel including bucket/folder information and controls -->
<div class="panel-heading clearfix">
<!-- Bucket selection and breadcrumbs -->
<div class="btn-group pull-left">
<!-- Utility name -->
<div class="title pull-left">
Amazon S3 Explorer (v2 alpha)
</div>
<!-- Bucket breadcrumbs -->
<div class="pull-right" ng-hide="!view.settings">
<ul id="breadcrumb" class="breadcrumb pull-right">
<li class="active">
<a href="#"><bucket></a>
</li>
</ul>
</div>
</div>
<!-- Folder/Bucket radio group and progress spinner -->
<div id="navbuttons" class="pull-right hidden">
<div>
<!-- Info/Refresh/Settings buttons -->
<div class="btn-group">
<span id="bucket-plus" style="cursor: pointer;" class="btn fa fa-folder-plus fa-2x" ng-hide="!view.settings" title="New folder" data-target="#AddFolderModal" data-toggle="modal"></span>
<span id="bucket-upload" style="cursor: pointer;" class="btn fa fa-cloud-upload-alt fa-2x" ng-hide="!view.settings" ng-click="upload()" title="Upload files"></span>
<span id="bucket-trash" style="cursor: pointer;" class="btn fa fa-trash-alt fa-2x" title="Delete {{view.keys_selected.length}} selected object(s)" ng-hide="!view.settings || !view.keys_selected.length" ng-disabled="!view.keys_selected.length" ng-click="trash()"></span>
<span id="bucket-info" style="cursor: pointer;" class="btn fa fa-info-circle fa-2x" title="Info" data-target="#InfoModal" data-toggle="modal"></span>
<span id="bucket-loader" style="cursor: pointer;" class="btn fa fa-sync fa-2x" ng-hide="!view.settings" ng-click="refresh()" title="Refresh"></span>
<span id="bucket-settings" style="cursor: pointer;" class="btn fa fa-cog fa-2x" title="Settings" data-target="#SettingsModal" data-toggle="modal"></span>
</div>
<!-- Record count -->
<div class="btn-group" ng-hide="!view.settings || view.keys_selected.length > 0">
<span id="badgecount" style="cursor: default;" class="btn badge pull-right" title="Object count">{{view.objectCount}}</span>
</div>
<!-- Record/checked count -->
<div class="btn-group" ng-hide="!view.settings || view.keys_selected.length == 0">
<span id="badgecount" style="cursor: default;" class="btn badge pull-right" title="Selected object count">{{view.keys_selected.length}} of {{view.objectCount}}</span>
</div>
</div>
</div>
</div>
<!-- Panel including S3 object table -->
<div class="panel-body">
<table class="table table-bordered table-hover table-striped" style="width:100%" id="s3objects-table">
<thead>
<tr>
<th class="text-center">Select</th>
<th>Object</th>
<th>Folder</th>
<th>Last Modified</th>
<th>Timestamp</th>
<th>Class</th>
<th>Size</th>
</tr>
</thead>
<tbody id="s3objects-tbody"></tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js" integrity="sha384-vhJnz1OVIdLktyixHY4Uk3OHEwdQqPppqYR8+5mjsauETgLOcEynD9oPHhhz18Nw" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootbox.js/4.4.0/bootbox.min.js"></script>
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.437.0.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap.min.js"></script>
<script src="explorer.js"></script>