2014-01-05 23:54:57 +01:00
<!DOCTYPE html>
< html lang = "en" ng-app = "syncthing" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=edge" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< meta name = "description" content = "" >
< meta name = "author" content = "" >
2014-02-07 22:33:58 +01:00
< link rel = "shortcut icon" href = "favicon.png" >
2014-01-05 23:54:57 +01:00
< title > syncthing</ title >
2014-01-20 23:17:57 +01:00
< link href = "bootstrap/css/bootstrap.min.css" rel = "stylesheet" >
2014-01-05 23:54:57 +01:00
< style type = "text/css" >
2014-01-08 13:52:17 +01:00
html , body {
height : 100 % ;
}
# wrap {
2014-01-05 23:54:57 +01:00
padding-top : 20 px ;
2014-01-08 13:52:17 +01:00
min-height : 100 % ;
height : auto ;
margin : 0 auto -50 px ;
padding : 20 px 0 50 px 0 ;
}
# footer {
height : 50 px ;
padding : 12 px ;
background-color : #f5f5f5 ;
2014-01-05 23:54:57 +01:00
}
. header {
border-bottom : 1 px solid #e5e5e5 ;
padding-bottom : 10 px ;
}
. text-monospace {
font-family : monospace ;
}
2014-02-01 20:23:19 +01:00
. table-condensed > thead > tr > th , . table-condensed > tbody > tr > th , . table-condensed > tfoot > tr > th , . table-condensed > thead > tr > td , . table-condensed > tbody > tr > td , . table-condensed > tfoot > tr > td {
border-top : none ;
}
2014-01-05 23:54:57 +01:00
</ style >
</ head >
< body ng-controller = "SyncthingCtrl" >
2014-01-08 13:52:17 +01:00
< div id = "wrap" >
< div class = "container" >
2014-02-07 22:33:58 +01:00
< div class = "page-header" >
< h1 class = "text-muted" >< img width = "64" height = "64" src = "st-logo-128.png" > syncthing</ h1 >
2014-01-08 13:52:17 +01:00
</ div >
2014-01-05 23:54:57 +01:00
2014-01-08 13:52:17 +01:00
< div class = "row" >
< div class = "col-md-12" >
2014-01-10 00:09:27 +01:00
< div class = "panel" ng-class = "{'panel-success': model.needBytes === 0, 'panel-primary': model.needBytes !== 0}" >
< div class = "panel-heading" >< h3 class = "panel-title" > Synchronization</ h3 ></ div >
< div class = "panel-body" >
< div class = "progress" >
< div class = "progress-bar" role = "progressbar" aria-valuenow = "60" aria-valuemin = "0" aria-valuemax = "100"
ng-class = "{'progress-bar-success': model.needBytes === 0, 'progress-bar-info': model.needBytes !== 0}"
style = "width: {{100 * model.inSyncBytes / model.globalBytes | number:2}}%;" >
2014-01-12 15:19:03 -07:00
{{100 * model.inSyncBytes / model.globalBytes | alwaysNumber | number:0}}%
2014-01-10 00:09:27 +01:00
</ div >
</ div >
< p ng-show = "model.needBytes > 0" > Need {{model.needFiles | alwaysNumber}} files, {{model.needBytes | binary}}B</ p >
2014-01-08 13:52:17 +01:00
</ div >
2014-01-06 06:38:01 +01:00
</ div >
2014-01-05 23:54:57 +01:00
</ div >
</ div >
2014-02-01 20:23:19 +01:00
< div class = "row" >
< div class = "col-md-12" >
< div class = "panel panel-info" >
< div class = "panel-heading" >< h3 class = "panel-title" > Cluster</ h3 ></ div >
< table class = "table table-condensed" >
< tbody >
2014-02-05 21:30:04 +01:00
<!-- myself -->
< tr class = "text-muted" >
2014-02-05 22:42:23 +01:00
< td style = "width:13%" >
2014-02-05 21:30:04 +01:00
< span class = "label label-default" >
2014-02-05 22:42:23 +01:00
< span class = "glyphicon glyphicon-ok" ></ span > This node
2014-02-05 21:30:04 +01:00
</ span >
</ td >
2014-02-05 22:42:23 +01:00
< td style = "width:12%" >
2014-02-05 21:30:04 +01:00
< span class = "text-monospace" > {{myID | short}}</ span >
</ td >
2014-02-05 22:42:23 +01:00
< td style = "width:20%" > {{version}}</ td >
< td style = "width:25%" ></ td >
< td style = "width:10%" class = "text-right" >
2014-02-05 21:30:04 +01:00
< span ng-show = "nodeCfg.NodeID != myID" >
{{inbps | metric}}bps
< span class = "text-muted glyphicon glyphicon-chevron-down" ></ span >
</ span >
</ td >
2014-02-05 22:42:23 +01:00
< td style = "width:10%" class = "text-right" >
2014-02-05 21:30:04 +01:00
< span ng-show = "nodeCfg.NodeID != myID" >
{{outbps | metric}}bps
< span class = "text-muted glyphicon glyphicon-chevron-up" ></ span >
</ span >
</ td >
2014-02-05 22:42:23 +01:00
< td style = "width:10%" class = "text-right" ></ td >
2014-02-05 21:30:04 +01:00
</ tr >
<!-- all other nodes -->
< tr ng-repeat = "nodeCfg in nodes" >
2014-02-01 20:23:19 +01:00
< td >
< span class = "label label-{{nodeClass(nodeCfg)}}" >
2014-02-05 22:42:23 +01:00
< span class = "glyphicon glyphicon-{{nodeIcon(nodeCfg)}}" ></ span > {{nodeStatus(nodeCfg)}}
2014-02-01 20:23:19 +01:00
</ span >
</ td >
< td >
2014-02-05 22:49:26 +01:00
< span class = "text-monospace" > {{nodeName(nodeCfg)}}</ span >
2014-02-01 20:23:19 +01:00
</ td >
< td >
{{nodeVer(nodeCfg)}}
</ td >
< td >
{{nodeAddr(nodeCfg)}}
</ td >
< td class = "text-right" >
2014-02-05 21:30:04 +01:00
< abbr title = "{{connections[nodeCfg.NodeID].InBytesTotal | binary}}B" > {{connections[nodeCfg.NodeID].inbps | metric}}bps</ abbr >
< span class = "text-muted glyphicon glyphicon-chevron-down" ></ span >
2014-02-01 20:23:19 +01:00
</ td >
< td class = "text-right" >
2014-02-05 21:30:04 +01:00
< abbr title = "{{connections[nodeCfg.NodeID].OutBytesTotal | binary}}B" > {{connections[nodeCfg.NodeID].outbps | metric}}bps</ abbr >
< span class = "text-muted glyphicon glyphicon-chevron-up" ></ span >
2014-02-01 20:23:19 +01:00
</ td >
< td class = "text-right" >
2014-02-05 21:30:04 +01:00
< button type = "button" ng-click = "editNode(nodeCfg)" class = "btn btn-default btn-xs" >< span class = "glyphicon glyphicon-pencil" ></ span > Edit</ button >
2014-02-01 20:23:19 +01:00
</ td >
</ tr >
< tr >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td ></ td >
< td class = "text-right" >
< button type = "button" class = "btn btn-default btn-xs" ng-click = "addNode()" >< span class = "glyphicon glyphicon-plus" ></ span > Add</ button >
</ td >
</ tr >
</ tbody >
</ table >
</ div >
</ div >
</ div >
2014-01-08 13:52:17 +01:00
< div class = "row" >
< div class = "col-md-6" >
2014-01-10 00:09:27 +01:00
< div class = "panel panel-info" >
< div class = "panel-heading" >< h3 class = "panel-title" > Repository</ h3 ></ div >
< div class = "panel-body" >
< p > Cluster contains {{model.globalFiles | alwaysNumber}} files, {{model.globalBytes | binary}}B
< span class = "text-muted" > (+{{model.globalDeleted | alwaysNumber}} delete records)</ span ></ p >
2014-01-05 23:54:57 +01:00
2014-01-10 00:09:27 +01:00
< p > Local repository has {{model.localFiles | alwaysNumber}} files, {{model.localBytes | binary}}B
< span class = "text-muted" > (+{{model.localDeleted | alwaysNumber}} delete records)</ span ></ p >
</ div >
</ div >
2014-02-01 20:23:19 +01:00
</ div >
2014-01-05 23:54:57 +01:00
2014-02-01 20:23:19 +01:00
< div class = "col-md-6" >
2014-01-10 00:09:27 +01:00
< div class = "panel panel-info" >
< div class = "panel-heading" >< h3 class = "panel-title" > System</ h3 ></ div >
< div class = "panel-body" >
< p > {{system.sys | binary}}B RAM allocated, {{system.alloc | binary}}B in use</ p >
< p > {{system.cpuPercent | alwaysNumber | natural:1}}% CPU, {{system.goroutines | alwaysNumber}} goroutines</ p >
</ div >
</ div >
2014-01-08 13:52:17 +01:00
</ div >
2014-02-01 20:23:19 +01:00
</ div >
< div class = "row" >
2014-01-08 13:52:17 +01:00
< div class = "col-md-6" >
2014-01-10 00:09:27 +01:00
< div class = "panel panel-info" >
2014-02-01 20:23:19 +01:00
< div class = "panel-heading" >< h3 class = "panel-title" >< a href = "" data-toggle = "collapse" data-target = "#settingsTable" > Settings</ a ></ h3 ></ div >
< div id = "settingsTable" class = "panel-collapse collapse" >
< div class = "panel-body" >
< form role = "form" >
< div class = "form-group" ng-repeat = "setting in settings" >
< div ng-if = "setting.type == 'string'" >
< label for = "{{setting.id}}" > {{setting.descr}}</ label >
< input id = "{{setting.id}}" class = "form-control" type = "text" ng-model = "config.Options[setting.id]" ></ input >
</ div >
< div class = "checkbox" ng-if = "setting.type == 'bool'" >
< label >
{{setting.descr}} < input id = "{{setting.id}}" type = "checkbox" ng-model = "config.Options[setting.id]" ></ input >
</ label >
</ div >
</ div >
</ form >
</ div >
< div class = "panel-footer" >
< button type = "button" class = "btn btn-sm btn-default" ng-click = "saveSettings()" > Save</ button >
< small >< span class = "text-muted" > Changes take effect when restarting syncthing.</ span ></ small >
</ div >
</ div >
2014-01-10 00:09:27 +01:00
</ div >
2014-01-05 23:54:57 +01:00
</ div >
</ div >
</ div >
2014-01-08 13:52:17 +01:00
</ div >
< div id = "footer" class = "text-center" >
syncthing {{version}}
| < a href = "https://github.com/calmh/syncthing/releases" > Latest Release</ a >
| < a href = "https://github.com/calmh/syncthing/wiki" > Documentation</ a >
| < a href = "https://github.com/calmh/syncthing/issues" > Bugs</ a >
| < a href = "https://github.com/calmh/syncthing" > Source Code</ a >
2014-01-05 23:54:57 +01:00
</ div >
2014-01-09 10:31:27 +01:00
< div id = "networkError" class = "modal fade" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header alert alert-danger" >
< h4 class = "modal-title" >
2014-01-10 00:09:27 +01:00
< span class = "glyphicon glyphicon-exclamation-sign" ></ span >
2014-01-09 10:31:27 +01:00
Connection Error
</ h4 >
</ div >
< div class = "modal-body" >
< p >
Syncthing seems to be down, or there is a problem with your Internet connection.
Retrying…
</ p >
</ div >
</ div >
</ div >
</ div >
2014-02-01 20:23:19 +01:00
< div id = "editNode" class = "modal fade" >
< 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" > Edit Node</ h4 >
</ div >
< div class = "modal-body" >
< form role = "form" >
< div class = "form-group" >
< label for = "nodeID" > Node ID</ label >
< input placeholder = "YUFJOUDPORCMA..." ng-disabled = "editingExisting" id = "nodeID" class = "form-control" type = "text" ng-model = "currentNode.NodeID" ></ input >
< p class = "help-block" > The node ID can be found in the logs or in the "Add Node" dialog on the other node.</ p >
</ div >
2014-02-05 22:49:26 +01:00
< div class = "form-group" >
< label for = "name" > Name</ label >
< input placeholder = "Home Server" id = "name" class = "form-control" type = "text" ng-model = "currentNode.Name" ></ input >
< p class = "help-block" > Shown instead of Node ID in the cluster status.</ p >
</ div >
2014-02-01 20:23:19 +01:00
< div class = "form-group" >
< label for = "addresses" > Addresses</ label >
< input placeholder = "dynamic" id = "addresses" class = "form-control" type = "text" ng-model = "currentNode.AddressesStr" ></ input >
< p class = "help-block" > Enter comma separated < span class = "text-monospace" > ip:port</ span > addresses or < span class = "text-monospace" > dynamic</ span > to perform automatic discovery of the address.</ p >
</ div >
</ form >
< div ng-show = "!editingExisting" >
2014-02-05 21:30:04 +01:00
When adding a new node, keep in mind that < em > this node</ em > must be added on the other side too. The Node ID of this node is:
< pre > {{myID}}</ pre >
2014-02-01 20:23:19 +01:00
</ div >
</ div >
< div class = "modal-footer" >
< button type = "button" class = "btn btn-primary" ng-click = "saveNode()" > Save</ button >
< button type = "button" class = "btn btn-default" data-dismiss = "modal" > Close</ button >
< button ng-if = "editingExisting" type = "button" class = "btn btn-danger pull-left" ng-click = "deleteNode()" > Delete</ button >
</ div >
</ div >
</ div >
</ div >
2014-01-05 23:54:57 +01:00
< script src = "angular.min.js" ></ script >
< script src = "jquery-2.0.3.min.js" ></ script >
< script src = "bootstrap/js/bootstrap.min.js" ></ script >
< script src = "app.js" ></ script >
</ body >
</ html >
