Browse Source
Merge pull request #2183 from bingoohuang/master
Merge pull request #2183 from bingoohuang/master
extract embed html of master/volume/filer ui to separate filespull/2184/head
Chris Lu
4 years ago
committed by
GitHub
GitHub
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 498 additions and 469 deletions
-
182weed/server/filer_ui/filer.html
-
178weed/server/filer_ui/templates.go
-
110weed/server/master_ui/master.html
-
112weed/server/master_ui/templates.go
-
191weed/server/volume_server_ui/templates.go
-
194weed/server/volume_server_ui/volume.html
@ -0,0 +1,182 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>SeaweedFS Filer</title> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1"> |
|||
<link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css"> |
|||
<style> |
|||
body { |
|||
padding-bottom: 128px; |
|||
} |
|||
|
|||
#drop-area { |
|||
border: 1px transparent; |
|||
} |
|||
|
|||
#drop-area.highlight { |
|||
border-color: purple; |
|||
border: 2px dashed #ccc; |
|||
} |
|||
|
|||
.button { |
|||
display: inline-block; |
|||
padding: 2px; |
|||
background: #ccc; |
|||
cursor: pointer; |
|||
border-radius: 2px; |
|||
border: 1px solid #ccc; |
|||
float: right; |
|||
} |
|||
|
|||
.button:hover { |
|||
background: #ddd; |
|||
} |
|||
|
|||
#fileElem { |
|||
display: none; |
|||
} |
|||
|
|||
.qrImage { |
|||
display: block; |
|||
margin-left: auto; |
|||
margin-right: auto; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="container"> |
|||
<div class="page-header"> |
|||
<h1> |
|||
<a href="https://github.com/chrislusf/seaweedfs"><img src="/seaweedfsstatic/seaweed50x50.png"></img></a> |
|||
SeaweedFS Filer |
|||
</h1> |
|||
</div> |
|||
<div class="row"> |
|||
<div> |
|||
{{ range $entry := .Breadcrumbs }} |
|||
<a href="{{ printpath $entry.Link }}"> |
|||
{{ $entry.Name }} |
|||
</a> |
|||
{{ end }} |
|||
<label class="button" for="fileElem">Upload</label> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row" id="drop-area"> |
|||
<form class="upload-form"> |
|||
<input type="file" id="fileElem" multiple onchange="handleFiles(this.files)"> |
|||
|
|||
<table width="90%"> |
|||
{{$path := .Path }} |
|||
{{ range $entry_index, $entry := .Entries }} |
|||
<tr> |
|||
<td> |
|||
{{if $entry.IsDirectory}} |
|||
<img src="/seaweedfsstatic/images/folder.gif" width="20" height="23"> |
|||
<a href="{{ printpath $path "/" $entry.Name "/"}}" > |
|||
{{ $entry.Name }} |
|||
</a> |
|||
{{else}} |
|||
<a href="{{ printpath $path "/" $entry.Name }}" > |
|||
{{ $entry.Name }} |
|||
</a> |
|||
{{end}} |
|||
</td> |
|||
<td align="right" nowrap> |
|||
{{if $entry.IsDirectory}} |
|||
{{else}} |
|||
{{ $entry.Mime }} |
|||
{{end}} |
|||
</td> |
|||
<td align="right" nowrap> |
|||
{{if $entry.IsDirectory}} |
|||
{{else}} |
|||
{{ $entry.Size | humanizeBytes }} |
|||
{{end}} |
|||
</td> |
|||
<td nowrap> |
|||
{{ $entry.Timestamp.Format "2006-01-02 15:04" }} |
|||
</td> |
|||
</tr> |
|||
{{ end }} |
|||
|
|||
</table> |
|||
</form> |
|||
</div> |
|||
|
|||
{{if .ShouldDisplayLoadMore}} |
|||
<div class="row"> |
|||
<a href={{ print .Path "?limit=" .Limit "&lastFileName=" .LastFileName}} > |
|||
Load more |
|||
</a> |
|||
</div> |
|||
{{end}} |
|||
|
|||
<br/> |
|||
<br/> |
|||
|
|||
<div class="navbar navbar-fixed-bottom"> |
|||
<img src="data:image/png;base64,{{.QrImage}}" class="qrImage"/> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
<script type="text/javascript"> |
|||
// ************************ Drag and drop ***************** // |
|||
let dropArea = document.getElementById("drop-area") |
|||
|
|||
// Prevent default drag behaviors |
|||
;['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { |
|||
dropArea.addEventListener(eventName, preventDefaults, false) |
|||
document.body.addEventListener(eventName, preventDefaults, false) |
|||
}) |
|||
|
|||
// Highlight drop area when item is dragged over it |
|||
;['dragenter', 'dragover'].forEach(eventName => { |
|||
dropArea.addEventListener(eventName, highlight, false) |
|||
}) |
|||
|
|||
;['dragleave', 'drop'].forEach(eventName => { |
|||
dropArea.addEventListener(eventName, unhighlight, false) |
|||
}) |
|||
|
|||
// Handle dropped files |
|||
dropArea.addEventListener('drop', handleDrop, false) |
|||
|
|||
function preventDefaults(e) { |
|||
e.preventDefault() |
|||
e.stopPropagation() |
|||
} |
|||
|
|||
function highlight(e) { |
|||
dropArea.classList.add('highlight') |
|||
} |
|||
|
|||
function unhighlight(e) { |
|||
dropArea.classList.remove('highlight') |
|||
} |
|||
|
|||
function handleDrop(e) { |
|||
var dt = e.dataTransfer |
|||
var files = dt.files |
|||
|
|||
handleFiles(files) |
|||
} |
|||
|
|||
function handleFiles(files) { |
|||
files = [...files] |
|||
files.forEach(uploadFile) |
|||
window.location.reload() |
|||
} |
|||
|
|||
function uploadFile(file, i) { |
|||
var url = window.location.href |
|||
var xhr = new XMLHttpRequest() |
|||
var formData = new FormData() |
|||
xhr.open('POST', url, false) |
|||
|
|||
formData.append('file', file) |
|||
xhr.send(formData) |
|||
} |
|||
</script> |
|||
</html> |
|||
@ -0,0 +1,110 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>SeaweedFS {{ .Version }}</title> |
|||
<link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css"> |
|||
</head> |
|||
<body> |
|||
<div class="container"> |
|||
<div class="page-header"> |
|||
<h1> |
|||
<a href="https://github.com/chrislusf/seaweedfs"><img src="/seaweedfsstatic/seaweed50x50.png"></img></a> |
|||
SeaweedFS <small>{{ .Version }}</small> |
|||
</h1> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-sm-6"> |
|||
<h2>Cluster status</h2> |
|||
<table class="table table-condensed table-striped"> |
|||
<tbody> |
|||
<tr> |
|||
<th>Volume Size Limit</th> |
|||
<td>{{ .VolumeSizeLimitMB }}MB</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Free</th> |
|||
<td>{{ .Topology.Free }}</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Max</th> |
|||
<td>{{ .Topology.Max }}</td> |
|||
</tr> |
|||
{{ with .RaftServer }} |
|||
<tr> |
|||
<th>Leader</th> |
|||
<td><a href="http://{{ .Leader }}">{{ .Leader }}</a></td> |
|||
</tr> |
|||
<tr> |
|||
<th>Other Masters</th> |
|||
<td class="col-sm-5"> |
|||
<ul class="list-unstyled"> |
|||
{{ range $k, $p := .Peers }} |
|||
<li><a href="http://{{ $p.Name }}/ui/index.html">{{ $p.Name }}</a></li> |
|||
{{ end }} |
|||
</ul> |
|||
</td> |
|||
</tr> |
|||
{{ end }} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="col-sm-6"> |
|||
<h2>System Stats</h2> |
|||
<table class="table table-condensed table-striped"> |
|||
<tr> |
|||
<th>Concurrent Connections</th> |
|||
<td>{{ .Counters.Connections.WeekCounter.Sum }}</td> |
|||
</tr> |
|||
{{ range $key, $val := .Stats }} |
|||
<tr> |
|||
<th>{{ $key }}</th> |
|||
<td>{{ $val }}</td> |
|||
</tr> |
|||
{{ end }} |
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<h2>Topology</h2> |
|||
<table class="table table-striped"> |
|||
<thead> |
|||
<tr> |
|||
<th>Data Center</th> |
|||
<th>Rack</th> |
|||
<th>RemoteAddr</th> |
|||
<th>#Volumes</th> |
|||
<th>Volume Ids</th> |
|||
<th>#ErasureCodingShards</th> |
|||
<th>Max</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{{ range $dc_index, $dc := .Topology.DataCenters }} |
|||
{{ range $rack_index, $rack := $dc.Racks }} |
|||
{{ range $dn_index, $dn := $rack.DataNodes }} |
|||
<tr> |
|||
<td><code>{{ $dc.Id }}</code></td> |
|||
<td>{{ $rack.Id }}</td> |
|||
<td><a href="http://{{ $dn.Url }}/ui/index.html">{{ $dn.Url }}</a> |
|||
{{ if ne $dn.PublicUrl $dn.Url }} |
|||
/ <a href="http://{{ $dn.PublicUrl }}/ui/index.html">{{ $dn.PublicUrl }}</a> |
|||
{{ end }} |
|||
</td> |
|||
<td>{{ $dn.Volumes }}</td> |
|||
<td>{{ $dn.VolumeIds}}</td> |
|||
<td>{{ $dn.EcShards }}</td> |
|||
<td>{{ $dn.Max }}</td> |
|||
</tr> |
|||
{{ end }} |
|||
{{ end }} |
|||
{{ end }} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
</html> |
|||
@ -1,115 +1,11 @@ |
|||
package master_ui |
|||
|
|||
import ( |
|||
_ "embed" |
|||
"html/template" |
|||
) |
|||
|
|||
var StatusTpl = template.Must(template.New("status").Parse(`<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>SeaweedFS {{ .Version }}</title> |
|||
<link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css"> |
|||
</head> |
|||
<body> |
|||
<div class="container"> |
|||
<div class="page-header"> |
|||
<h1> |
|||
<a href="https://github.com/chrislusf/seaweedfs"><img src="/seaweedfsstatic/seaweed50x50.png"></img></a> |
|||
SeaweedFS <small>{{ .Version }}</small> |
|||
</h1> |
|||
</div> |
|||
//go:embed master.html
|
|||
var masterHtml string |
|||
|
|||
<div class="row"> |
|||
<div class="col-sm-6"> |
|||
<h2>Cluster status</h2> |
|||
<table class="table table-condensed table-striped"> |
|||
<tbody> |
|||
<tr> |
|||
<th>Volume Size Limit</th> |
|||
<td>{{ .VolumeSizeLimitMB }}MB</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Free</th> |
|||
<td>{{ .Topology.Free }}</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Max</th> |
|||
<td>{{ .Topology.Max }}</td> |
|||
</tr> |
|||
{{ with .RaftServer }} |
|||
<tr> |
|||
<th>Leader</th> |
|||
<td><a href="http://{{ .Leader }}">{{ .Leader }}</a></td> |
|||
</tr> |
|||
<tr> |
|||
<th>Other Masters</th> |
|||
<td class="col-sm-5"><ul class="list-unstyled"> |
|||
{{ range $k, $p := .Peers }} |
|||
<li><a href="http://{{ $p.Name }}/ui/index.html">{{ $p.Name }}</a></li> |
|||
{{ end }} |
|||
</ul></td> |
|||
</tr> |
|||
{{ end }} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="col-sm-6"> |
|||
<h2>System Stats</h2> |
|||
<table class="table table-condensed table-striped"> |
|||
<tr> |
|||
<th>Concurrent Connections</th> |
|||
<td>{{ .Counters.Connections.WeekCounter.Sum }}</td> |
|||
</tr> |
|||
{{ range $key, $val := .Stats }} |
|||
<tr> |
|||
<th>{{ $key }}</th> |
|||
<td>{{ $val }}</td> |
|||
</tr> |
|||
{{ end }} |
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<h2>Topology</h2> |
|||
<table class="table table-striped"> |
|||
<thead> |
|||
<tr> |
|||
<th>Data Center</th> |
|||
<th>Rack</th> |
|||
<th>RemoteAddr</th> |
|||
<th>#Volumes</th> |
|||
<th>Volume Ids</th> |
|||
<th>#ErasureCodingShards</th> |
|||
<th>Max</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{{ range $dc_index, $dc := .Topology.DataCenters }} |
|||
{{ range $rack_index, $rack := $dc.Racks }} |
|||
{{ range $dn_index, $dn := $rack.DataNodes }} |
|||
<tr> |
|||
<td><code>{{ $dc.Id }}</code></td> |
|||
<td>{{ $rack.Id }}</td> |
|||
<td><a href="http://{{ $dn.Url }}/ui/index.html">{{ $dn.Url }}</a> |
|||
{{ if ne $dn.PublicUrl $dn.Url }} |
|||
/ <a href="http://{{ $dn.PublicUrl }}/ui/index.html">{{ $dn.PublicUrl }}</a> |
|||
{{ end }} |
|||
</td> |
|||
<td>{{ $dn.Volumes }}</td> |
|||
<td>{{ $dn.VolumeIds}}</td> |
|||
<td>{{ $dn.EcShards }}</td> |
|||
<td>{{ $dn.Max }}</td> |
|||
</tr> |
|||
{{ end }} |
|||
{{ end }} |
|||
{{ end }} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
</html> |
|||
`)) |
|||
var StatusTpl = template.Must(template.New("status").Parse(masterHtml)) |
|||
@ -0,0 +1,194 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
<head> |
|||
<title>SeaweedFS {{ .Version }}</title> |
|||
<link rel="stylesheet" href="/seaweedfsstatic/bootstrap/3.3.1/css/bootstrap.min.css"> |
|||
<script type="text/javascript" src="/seaweedfsstatic/javascript/jquery-3.6.0.min.js"></script> |
|||
<script type="text/javascript" |
|||
src="/seaweedfsstatic/javascript/jquery-sparklines/2.1.2/jquery.sparkline.min.js"></script> |
|||
<script type="text/javascript"> |
|||
$(function () { |
|||
var periods = ['second', 'minute', 'hour', 'day']; |
|||
for (i = 0; i < periods.length; i++) { |
|||
var period = periods[i]; |
|||
$('.inlinesparkline-' + period).sparkline('html', { |
|||
type: 'line', |
|||
barColor: 'red', |
|||
tooltipSuffix: ' request per ' + period, |
|||
}); |
|||
} |
|||
}); |
|||
</script> |
|||
<style> |
|||
#jqstooltip { |
|||
height: 28px !important; |
|||
width: 150px !important; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
<div class="container"> |
|||
<div class="page-header"> |
|||
<h1> |
|||
<a href="https://github.com/chrislusf/seaweedfs"><img src="/seaweedfsstatic/seaweed50x50.png"></img></a> |
|||
SeaweedFS <small>{{ .Version }}</small> |
|||
</h1> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<div class="col-sm-6"> |
|||
<h2>Disk Stats</h2> |
|||
<table class="table table-striped"> |
|||
<thead> |
|||
<tr> |
|||
<th>Path</th> |
|||
<th>Disk</th> |
|||
<th>Total</th> |
|||
<th>Free</th> |
|||
<th>Usage</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{{ range .DiskStatuses }} |
|||
<tr> |
|||
<td>{{ .Dir }}</td> |
|||
<td>{{ .DiskType }}</td> |
|||
<td>{{ bytesToHumanReadable .All }}</td> |
|||
<td>{{ bytesToHumanReadable .Free }}</td> |
|||
<td>{{ percentFrom .All .Used}}%</td> |
|||
</tr> |
|||
{{ end }} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="col-sm-6"> |
|||
<h2>System Stats</h2> |
|||
<table class="table table-condensed table-striped"> |
|||
<tr> |
|||
<th>Masters</th> |
|||
<td>{{.Masters}}</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Weekly # ReadRequests</th> |
|||
<td><span class="inlinesparkline-day">{{ .Counters.ReadRequests.WeekCounter.ToList | join }}</span> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Daily # ReadRequests</th> |
|||
<td><span class="inlinesparkline-hour">{{ .Counters.ReadRequests.DayCounter.ToList | join }}</span> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Hourly # ReadRequests</th> |
|||
<td><span |
|||
class="inlinesparkline-minute">{{ .Counters.ReadRequests.HourCounter.ToList | join }}</span> |
|||
</td> |
|||
</tr> |
|||
<tr> |
|||
<th>Last Minute # ReadRequests</th> |
|||
<td><span |
|||
class="inlinesparkline-second">{{ .Counters.ReadRequests.MinuteCounter.ToList | join }}</span> |
|||
</td> |
|||
</tr> |
|||
{{ range $key, $val := .Stats }} |
|||
<tr> |
|||
<th>{{ $key }}</th> |
|||
<td>{{ $val }}</td> |
|||
</tr> |
|||
{{ end }} |
|||
</table> |
|||
</div> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<h2>Volumes</h2> |
|||
<table class="table table-striped"> |
|||
<thead> |
|||
<tr> |
|||
<th>Id</th> |
|||
<th>Collection</th> |
|||
<th>Disk</th> |
|||
<th>Data Size</th> |
|||
<th>Files</th> |
|||
<th>Trash</th> |
|||
<th>TTL</th> |
|||
<th>ReadOnly</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{{ range .Volumes }} |
|||
<tr> |
|||
<td><code>{{ .Id }}</code></td> |
|||
<td>{{ .Collection }}</td> |
|||
<td>{{ .DiskType }}</td> |
|||
<td>{{ bytesToHumanReadable .Size }}</td> |
|||
<td>{{ .FileCount }}</td> |
|||
<td>{{ .DeleteCount }} / {{bytesToHumanReadable .DeletedByteCount}}</td> |
|||
<td>{{ .Ttl }}</td> |
|||
<td>{{ .ReadOnly }}</td> |
|||
</tr> |
|||
{{ end }} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<h2>Remote Volumes</h2> |
|||
<table class="table table-striped"> |
|||
<thead> |
|||
<tr> |
|||
<th>Id</th> |
|||
<th>Collection</th> |
|||
<th>Size</th> |
|||
<th>Files</th> |
|||
<th>Trash</th> |
|||
<th>Remote</th> |
|||
<th>Key</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{{ range .RemoteVolumes }} |
|||
<tr> |
|||
<td><code>{{ .Id }}</code></td> |
|||
<td>{{ .Collection }}</td> |
|||
<td>{{ bytesToHumanReadable .Size }}</td> |
|||
<td>{{ .FileCount }}</td> |
|||
<td>{{ .DeleteCount }} / {{bytesToHumanReadable .DeletedByteCount}}</td> |
|||
<td>{{ .RemoteStorageName }}</td> |
|||
<td>{{ .RemoteStorageKey }}</td> |
|||
</tr> |
|||
{{ end }} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
<div class="row"> |
|||
<h2>Erasure Coding Shards</h2> |
|||
<table class="table table-striped"> |
|||
<thead> |
|||
<tr> |
|||
<th>Id</th> |
|||
<th>Collection</th> |
|||
<th>Shard Size</th> |
|||
<th>Shards</th> |
|||
<th>CreatedAt</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
{{ range .EcVolumes }} |
|||
<tr> |
|||
<td><code>{{ .VolumeId }}</code></td> |
|||
<td>{{ .Collection }}</td> |
|||
<td>{{ bytesToHumanReadable .ShardSize }}</td> |
|||
<td>{{ .ShardIdList }}</td> |
|||
<td>{{ .CreatedAt.Format "02 Jan 06 15:04 -0700" }}</td> |
|||
</tr> |
|||
{{ end }} |
|||
</tbody> |
|||
</table> |
|||
</div> |
|||
|
|||
</div> |
|||
</body> |
|||
</html> |
|||
Write
Preview
Loading…
Cancel
Save
Reference in new issue