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-02-12 12:10:44 +01:00
body {
padding-top : 70 px ;
padding-bottom : 70 px ;
2014-01-05 23:54:57 +01:00
}
. 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-02-11 14:34:47 +01:00
thead tr th {
text-align : center ;
}
2014-02-12 12:10:44 +01:00
. logo {
margin : 0 ;
padding : 0 ;
top : -5 px ;
position : relative ;
}
2014-01-05 23:54:57 +01:00
</ style >
</ head >
< body ng-controller = "SyncthingCtrl" >
2014-02-12 12:10:44 +01:00
< div class = "navbar navbar-fixed-top navbar-default" >
2014-01-08 13:52:17 +01:00
< div class = "container" >
2014-02-12 12:10:44 +01:00
< a class = "navbar-brand" >< img class = "logo" src = "st-logo-128.png" width = "32" height = "32" > Syncthing</ a >
< div ng-if = "!configInSync" >
< form class = "navbar-form navbar-right" >
< button type = "button" class = "btn btn-primary" ng-click = "restart()" > Restart Now</ button >
</ form >
< p class = "navbar-text navbar-right" > The configuration has been changed but not activated. Syncthing must restart to activate the new configuration.</ p >
2014-01-08 13:52:17 +01:00
</ div >
2014-02-12 12:10:44 +01:00
</ div >
</ div >
2014-01-05 23:54:57 +01:00
2014-02-12 12:10:44 +01:00
< div class = "container" >
< div class = "row" >
< div class = "col-md-12" >
2014-02-12 23:18:41 +01:00
< div ng-if = "errorList().length > 0" class = "alert alert-warning" >
< p ng-repeat = "err in errorList()" >< small > {{err.Time | date:"hh:mm:ss.sss"}}:</ small > {{friendlyNodes(err.Error)}}</ p >
< button type = "button" class = "pull-right btn btn-warning" ng-click = "clearErrors()" > OK</ button >
< div class = "clearfix" ></ div >
</ div >
2014-02-12 12:10:44 +01:00
< div class = "panel panel-info" >
< div class = "panel-heading" >< h3 class = "panel-title" > Cluster</ h3 ></ div >
< table class = "table table-condensed" >
< tbody >
<!-- myself -->
< tr class = "text-muted" ng-repeat = "nodeCfg in thisNode()" >
2014-02-13 12:41:37 +01:00
< td style = "width:12%" >
2014-02-12 12:10:44 +01:00
< span class = "label label-default" >
< span class = "glyphicon glyphicon-ok" ></ span > This node
</ span >
</ td >
2014-02-13 12:41:37 +01:00
< td style = "width:10%" >
2014-02-12 12:10:44 +01:00
< span class = "text-monospace" > {{nodeName(nodeCfg)}}</ span >
</ td >
< td style = "width:20%" > {{version}}</ td >
< td style = "width:25%" > (this node)</ td >
2014-02-13 12:41:37 +01:00
< td style = "width:9%" class = "text-right" >
2014-02-12 12:10:44 +01:00
{{inbps | metric}}bps
< span class = "text-muted glyphicon glyphicon-chevron-down" ></ span >
</ td >
2014-02-13 12:41:37 +01:00
< td style = "width:9%" class = "text-right" >
2014-02-12 12:10:44 +01:00
{{outbps | metric}}bps
< span class = "text-muted glyphicon glyphicon-chevron-up" ></ span >
</ td >
2014-02-13 12:41:37 +01:00
< td style = "width:7%" class = "text-right" >
2014-02-12 12:10:44 +01:00
< button type = "button" ng-click = "editNode(nodeCfg)" class = "btn btn-default btn-xs" >< span class = "glyphicon glyphicon-pencil" ></ span > Edit</ button >
</ td >
</ tr >
<!-- all other nodes -->
< tr ng-repeat = "nodeCfg in otherNodes()" >
2014-02-13 12:41:37 +01:00
< td >
2014-02-12 12:10:44 +01:00
< span class = "label label-{{nodeClass(nodeCfg)}}" >
< span class = "glyphicon glyphicon-{{nodeIcon(nodeCfg)}}" ></ span > {{nodeStatus(nodeCfg)}}
</ span >
</ td >
< td >
< span class = "text-monospace" > {{nodeName(nodeCfg)}}</ span >
</ td >
2014-02-13 12:41:37 +01:00
< td > {{nodeVer(nodeCfg)}}</ td >
< td > {{nodeAddr(nodeCfg)}}</ td >
2014-02-12 12:10:44 +01:00
< td class = "text-right" >
< abbr title = "{{connections[nodeCfg.NodeID].InBytesTotal | binary}}B" > {{connections[nodeCfg.NodeID].inbps | metric}}bps</ abbr >
< span class = "text-muted glyphicon glyphicon-chevron-down" ></ span >
</ td >
< td class = "text-right" >
< abbr title = "{{connections[nodeCfg.NodeID].OutBytesTotal | binary}}B" > {{connections[nodeCfg.NodeID].outbps | metric}}bps</ abbr >
< span class = "text-muted glyphicon glyphicon-chevron-up" ></ span >
</ td >
< td class = "text-right" >
< button type = "button" ng-click = "editNode(nodeCfg)" class = "btn btn-default btn-xs" >< span class = "glyphicon glyphicon-pencil" ></ span > Edit</ button >
</ 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 >
2014-01-05 23:54:57 +01:00
</ div >
</ div >
2014-02-12 12:10:44 +01:00
</ div >
< div class = "row" >
< div class = "col-md-6" >
< 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-02-12 12:10:44 +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 >
2014-02-01 20:23:19 +01:00
</ div >
</ div >
</ div >
2014-02-12 12:10:44 +01:00
< div class = "col-md-6" >
< 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}}%;" >
{{100 * model.inSyncBytes / model.globalBytes | alwaysNumber | number:0}}%
</ div >
2014-01-10 00:09:27 +01:00
</ div >
2014-02-12 12:10:44 +01:00
< p ng-show = "model.needBytes > 0" > Need {{model.needFiles | alwaysNumber}} files, {{model.needBytes | binary}}B</ p >
2014-01-10 00:09:27 +01:00
</ div >
2014-02-01 20:23:19 +01:00
</ div >
2014-02-12 12:10:44 +01:00
</ div >
</ div >
2014-01-05 23:54:57 +01:00
2014-02-12 12:10:44 +01:00
< div class = "row" >
< div class = "col-md-6" >
< div class = "panel panel-info" >
2014-02-13 12:41:37 +01:00
< div class = "panel-heading" >< h3 class = "panel-title" >< a href = "" data-toggle = "collapse" data-target = "#system" > System</ a ></ h3 ></ div >
< div id = "system" class = "panel-collapse collapse" >
< 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 >
2014-01-10 00:09:27 +01:00
</ div >
2014-01-08 13:52:17 +01:00
</ div >
2014-02-01 20:23:19 +01:00
</ div >
2014-02-12 12:10:44 +01:00
< div class = "col-md-6" >
< div class = "panel panel-info" >
< 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 == 'text' || setting.type == 'number'" >
< label for = "{{setting.id}}" > {{setting.descr}}</ label >
< input id = "{{setting.id}}" class = "form-control" type = "{{setting.type}}" ng-model = "config.Options[setting.id]" ></ input >
2014-02-01 20:23:19 +01:00
</ div >
2014-02-12 12:10:44 +01:00
< 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 >
2014-02-01 20:23:19 +01:00
</ 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 >
2014-02-12 12:10:44 +01:00
< div class = "navbar navbar-default navbar-fixed-bottom" >
< div class = "container" >
< p class = "navbar-text" > {{version}}</ p >
< ul class = "nav navbar-nav navbar-right" >
< li >< a class = "navbar-link" href = "https://github.com/calmh/syncthing/releases" > Latest Release</ a ></ li >
< li >< a class = "navbar-link" href = "https://github.com/calmh/syncthing/wiki" > Documentation</ a ></ li >
< li >< a class = "navbar-link" href = "https://github.com/calmh/syncthing/issues" > Bugs</ a ></ li >
< li >< a class = "navbar-link" href = "https://github.com/calmh/syncthing" > Source Code</ a ></ li >
</ ul >
</ p >
</ div >
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 >
2014-02-10 20:54:37 +01:00
< input placeholder = "dynamic" ng-disabled = "currentNode.NodeID == myID" id = "addresses" class = "form-control" type = "text" ng-model = "currentNode.AddressesStr" ></ input >
2014-02-01 20:23:19 +01:00
< 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 >
