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: 70px;
padding-bottom: 70px;
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: -5px;
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" >
< 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()" >
< td style = "width:13%" class = "text-center" >
< span class = "label label-default" >
< span class = "glyphicon glyphicon-ok" > < / span > This node
< / span >
< / td >
< td style = "width:12%" >
< span class = "text-monospace" > {{nodeName(nodeCfg)}}< / span >
< / td >
< td style = "width:20%" > {{version}}< / td >
< td style = "width:25%" > (this node)< / td >
< td style = "width:10%" class = "text-right" >
{{inbps | metric}}bps
< span class = "text-muted glyphicon glyphicon-chevron-down" > < / span >
< / td >
< td style = "width:10%" class = "text-right" >
{{outbps | metric}}bps
< 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 >
<!-- all other nodes -->
< tr ng-repeat = "nodeCfg in otherNodes()" >
< td class = "text-center" >
< 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 >
< td >
{{nodeVer(nodeCfg)}}
< / td >
< td >
{{nodeAddr(nodeCfg)}}
< / td >
< 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" >
< 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 >
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 >
