github.com/sl1pm4t/consul@v1.4.5-0.20190325224627-74c31c540f9c/ui/index.html (about)

     1  <!DOCTYPE html>
     2  <html>
     3  <head>
     4    <meta charset="utf-8">
     5    <meta http-equiv="X-UA-Compatible" content="IE=edge">
     6    <meta name="viewport" content="width=device-width, initial-scale=0.7, user-scalable=no">
     7    <title>Consul by HashiCorp</title>
     8    <link rel="stylesheet" href="static/bootstrap.min.css">
     9    <link rel="stylesheet" href="static/base.css">
    10    <link rel="icon" type="image/png" href="static/favicon-32x32.png" sizes="32x32">
    11    <link rel="icon" type="image/png" href="static/favicon-16x16.png" sizes="16x16">
    12  
    13    <script type="text/javascript">
    14      // Change this value to your consul host if you are not running
    15      // the UI on the same host as a consul instance.
    16      // e.g. "http://myserver.com:8500"
    17      var consulHost = ''
    18    </script>
    19  
    20  </head>
    21  <body>
    22  
    23    <noscript>
    24      <center>
    25        <h2>JavaScript Required</h2>
    26        <p>Please enable JavaScript in your web browser to use Consul UI.</p>
    27      </center>
    28    </noscript>
    29  
    30    <div class="wrapper">
    31      <div class="container">
    32        <div class="col-md-12">
    33          <div id="app">
    34          </div>
    35        </div>
    36      </div>
    37  
    38      <div class="push"></div>
    39    </div>
    40  
    41      <div class="footer">
    42          <div class="container">
    43            <div class="col-md-12">
    44            </div>
    45          </div>
    46      </div>
    47  
    48    <script type="text/x-handlebars">
    49      {{outlet}}
    50    </script>
    51  
    52    <script type="text/x-handlebars" data-template-name="error">
    53      <div class="row">
    54        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
    55          <div class="text-center vertical-center">
    56            {{#if controller.model.statusText }}
    57              <p class="bold">HTTP error code from Consul: <code>{{controller.model.status}} {{controller.model.statusText}}</code></p>
    58            {{/if}}
    59            {{#if controller.model.responseText }}
    60              <p class="bold">Error message from Consul: <code>{{limit controller.model.responseText 255}}</code></p>
    61            {{/if}}
    62            <p>Consul returned an error. You may have visited a URL that is loading an unknown resource, so you
    63              can try going back to the root. If your ACL token was not found you can reset it, and then you
    64              will be redirected to the settings page to enter a new ACL token.</p>
    65            <div class="form-group">
    66              <button {{ action "resetToken" }} {{ bind-attr class=":btn :btn-danger" }}>Reset ACL Token</button>
    67              <button {{ action "backHome" }} {{ bind-attr class=":btn :btn-default" }}>Go Back to Root</button>
    68            </div>
    69          </div>
    70        </div>
    71      </div>
    72    </script>
    73  
    74    <script type="text/x-handlebars" data-template-name="dc/unauthorized">
    75      <div class="row">
    76        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
    77          <div class="text-center vertical-center">
    78            <p class="bold">Access Denied</p>
    79            <p>Your ACL token does not have the appropriate permissions to perform the expected action.</p>
    80            <p>Learn more in the <a href="https://www.consul.io/docs/guides/acl.html" target="_blank">ACL documentation</a>.</p>
    81          </div>
    82        </div>
    83      </div>
    84    </script>
    85  
    86    <script type="text/x-handlebars" data-template-name="dc/aclsdisabled">
    87      <div class="row">
    88        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
    89          <div class="text-center vertical-center">
    90            <p class="bold">ACLs Disabled</p>
    91            <p>ACLs are disabled in this Consul cluster. This is the default behavior, as you have to explicitly enable them.</p>
    92            <p>Learn more in the <a href="https://www.consul.io/docs/guides/acl.html" target="_blank">ACL documentation</a>.</p>
    93          </div>
    94        </div>
    95      </div>
    96    </script>
    97  
    98    <script type="text/x-handlebars" data-template-name="loading">
    99      <div class="row">
   100        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
   101          <div class="text-center vertical-center">
   102            <img src="static/loading-cylon-pink.svg" width="384" height="48">
   103            <p><small>Loading...</small></p>
   104          </div>
   105        </div>
   106      </div>
   107    </script>
   108  
   109    <script type="text/x-handlebars" id="actionbar">
   110      <div class="row">
   111        <div class="action-bar">
   112          <div {{ bind-attr class="searchBar:col-md-10:col-md-5" }} >
   113            <div class="form-group">
   114              {{ input type="text" value=filter class="form-control form-control-mini" placeholder=filterText}}
   115            </div>
   116          </div>
   117          {{#if newAclButton }}
   118            <div class="col-md-2">
   119              <div class="form-group">
   120                {{#link-to 'acls' class='btn btn-mini btn-default btn-noactive pull-right'}}New ACL{{/link-to}}
   121              </div>
   122            </div>
   123          {{/if}}
   124          {{#if statuses}}
   125          <div class="col-md-5">
   126            <div class="form-group">
   127              {{view Ember.Select content=statuses value=status class="form-control form-control-mini"}}
   128            </div>
   129          </div>
   130          {{/if}}
   131          {{#if hasExpanded }}
   132          <div class="col-md-2 hidden-xs hidden-sm">
   133            <div class="form-group">
   134              <button {{ bind-attr class=":btn :btn-mini :pull-right condensed:btn-default:btn-primary" }} {{action toggleCondensed }}>Expand</button>
   135            </div>
   136          </div>
   137          {{/if}}
   138        </div>
   139      </div>
   140    </script>
   141  
   142    <script type="text/x-handlebars" data-template-name="dc">
   143      <div class="row">
   144        <div {{ bind-attr class=":col-md-12 :col-sm-12 :col-xs-12 :topbar" }}>
   145  
   146          <div class="col-md-1 col-sm-2 col-xs-8 col-sm-offset-0 col-xs-offset-1">
   147            <a href="#"><div class="top-brand"></div></a>
   148          </div>
   149          <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
   150            {{#link-to 'services' class='btn btn-default col-xs-12'}}Services{{/link-to}}
   151          </div>
   152  
   153          <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
   154            {{#link-to 'nodes' class='btn btn-default col-xs-12'}}Nodes{{/link-to}}
   155          </div>
   156  
   157          <div class="col-md-2 col-sm-3 col-xs-8 col-sm-offset-0 col-xs-offset-1">
   158            {{#link-to 'kv' class='btn btn-default col-xs-12'}}Key/Value{{/link-to}}
   159          </div>
   160  
   161          <div class="col-md-2 col-sm-2 col-xs-8 col-md-offset-0 col-sm-offset-2 col-xs-offset-1">
   162            {{#link-to 'acls' class='btn btn-default col-xs-12'}}ACL{{/link-to}}
   163          </div>
   164  
   165          <div class="col-md-2 col-sm-2 col-xs-6 col-md-offset-0 col-sm-offset-4 col-xs-offset-1">
   166            <a {{bind-attr class=":col-xs-12 :btn hasFailingChecks:btn-warning:btn-success"}} {{action "toggle"}}> <span class="elip-overflow">{{model}} <span class="caret"></span></span> </a>
   167  
   168            {{#if isDropdownVisible}}
   169              <ul class="dropdown-menu col-xs-8" style="display:block;">
   170                {{#each dc in dcs}}
   171                  <li {{action "hideDrop"}}>{{#link-to 'services' dc}}{{dc}}{{/link-to}}</li>
   172                {{/each}}
   173              </ul>
   174            {{/if}}
   175  
   176          </div>
   177  
   178          <div class="col-md-1 col-sm-2 col-xs-2 col-md-offset-0 col-sm-offset-0 col-xs-offset-0">
   179            {{#link-to 'settings' class='btn btn-default col-xs-6 icon'}}
   180            <svg xmlns="http://www.w3.org/2000/svg" data-icon="cog" viewBox="0 0 32 40">
   181              <path d="M14 0l-1.313 4c-1 .3-1.975.688-2.875 1.188l-3.72-1.875-2.78 2.78 1.875 3.72c-.5.9-.888 1.875-1.188 2.875L0 14v4l4 1.314c.3 1 .687 1.975 1.187 2.875l-1.78 3.718 2.78 2.78 3.72-1.874c.9.5 1.905.887 2.905 1.188l1.28 4h4l1.314-4c1-.3 2.006-.688 2.906-1.188L26 28.594l2.813-2.78-1.906-3.72c.5-.9.887-1.905 1.188-2.905L32 18v-4l-4-1.312c-.3-1-.687-1.975-1.187-2.875l1.78-3.72-2.78-2.78-3.72 1.875c-.9-.5-1.905-.888-2.905-1.188L18 0h-4zm2 9c3.9 0 7 3.1 7 7s-3.1 7-7 7-7-3.1-7-7 3.1-7 7-7z"/>
   182            </svg>
   183            {{/link-to}}
   184          </div>
   185        </div>
   186      </div>
   187  
   188      {{outlet}}
   189    </script>
   190  
   191    <script type="text/x-handlebars" data-template-name="kv/show">
   192      <div class="row">
   193        <div class="col-md-6 col-lg-5 padded-right-middle">
   194          <h4 class="breadcrumbs"><a href="" {{action 'linkToKey' grandParentKey }}>{{parentKey}}</a> <a href="" {{action 'linkToKey' parentKey }}>+</a></h4>
   195          </div>
   196      </div>
   197  
   198      <div class="row">
   199        <div class="col-md-6 col-lg-5 padded-right-middle">
   200  
   201            {{#each item in model }}
   202              {{#link-to item.linkToRoute item.Key tagName="div" href=false class="list-group-item list-condensed-link" }}
   203                <div {{bind-attr class="item.isFolder:bg-gray:bg-light-gray :list-bar-horizontal"}}></div>
   204                <div class="name">
   205                  {{item.keyWithoutParent}}
   206                </div>
   207              {{/link-to}}
   208  
   209            {{/each}}
   210        </div>
   211  
   212        <div class="border-left hidden-xs hidden-sm">
   213        </div>
   214  
   215        <div class="visible-xs visible-sm">
   216          <hr>
   217        </div>
   218  
   219        <div class="col-md-6 col-lg-7 border-left">
   220          <div class="padded-border">
   221            <div class="panel">
   222              <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
   223                <div class="panel-heading">
   224                  <h4 class="panel-title">
   225                    Create Key
   226                  </h4>
   227                </div>
   228  
   229                <div class="panel-body panel-form">
   230                  <form class="form">
   231  
   232                    <div class="form-group">
   233                      <p>{{errorMessage}}</p>
   234                    </div>
   235  
   236                    <div {{ bind-attr class=":form-group newKey.keyValid:valid" }}>
   237                      <div class="input-group">
   238                        <span class="input-group-addon">{{parentKey}}</span>
   239                        {{ input value=newKey.Key class="form-control" required=true }}
   240                      </div>
   241                      <span class="help-block">To create a folder, end the key with <code>/</code></span>
   242                    </div>
   243  
   244                    {{#if newKey.isFolder }}
   245                    <p>No value needed for nested keys.</p>
   246                    {{else}}
   247                    <div {{ bind-attr class=":form-group newKey.validateJson:validate newKey.isValidJson:success:error" }}>
   248                      {{ textarea value=newKey.Value class="form-control"}}
   249                      <span class="help-block">Value can be any format and length</span>
   250                    </div>
   251                    {{/if}}
   252  
   253                    <button {{ action "createKey"}} {{bind-attr disabled=newKey.isInvalid }} {{ bind-attr class=":btn newKey.isValid:btn-success:btn-default" }}>Create</button>
   254                    {{#unless newKey.isFolder }}
   255                    <label class="form-checkbox">{{ input type=checkbox checked=newKey.validateJson }}Validate JSON</label>
   256                    {{/unless}}
   257                    <button {{ action "deleteFolder"}} {{ bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger isRoot:hidden" }}>Delete folder</button>
   258                  </form>
   259                </div>
   260              </div>
   261          </div>
   262        </div>
   263      </div>
   264    </script>
   265  
   266    <script type="text/x-handlebars" data-template-name="kv/edit">
   267      <div class="row">
   268        <div class="col-md-6 col-lg-5 padded-right-middle">
   269          <h4 class="breadcrumbs"><a href="" {{action 'linkToKey' grandParentKey }}>{{parentKey}}</a> <a href="" {{action 'linkToKey' parentKey }}>+</a></h4>
   270        </div>
   271      </div>
   272  
   273      <div class="row">
   274        <div class="col-md-6 col-lg-5 padded-right-middle">
   275            {{#each item in siblings }}
   276              {{#link-to item.linkToRoute item.Key tagName="div" href=false class="list-group-item list-condensed-link" }}
   277                <div {{bind-attr class="item.isFolder:bg-gray:bg-light-gray :list-bar-horizontal"}}></div>
   278                <div class="name">
   279                  {{item.keyWithoutParent}}
   280                </div>
   281              {{/link-to}}
   282            {{/each}}
   283        </div>
   284  
   285        <div class="border-left hidden-xs hidden-sm">
   286        </div>
   287  
   288        <div class="visible-xs visible-sm">
   289          <hr>
   290        </div>
   291  
   292        <div class="col-md-6 col-lg-7 border-left sticky-scroll">
   293          <div class="padded-border">
   294  
   295            <div class="panel">
   296              <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-green isLocked:bg-light-gray" }}></div>
   297              <div class="panel-heading">
   298                <h4 {{bind-attr class=":panel-title isLocked:locked"}}>
   299                  {{model.Key}}
   300                  {{#if model.isLocked}}
   301                  <small class="pull-right">
   302                  KEY LOCKED
   303                  </small>
   304                  {{/if}}
   305                </h4>
   306              </div>
   307  
   308              <div class="panel-body panel-form">
   309                <div class="form-group">
   310                  {{errorMessage}}
   311                </div>
   312                <form class="form">
   313                  <div {{ bind-attr class=":form-group model.validateJson:validate model.isValidJson:success:error" }}>
   314                    {{ textarea value=model.valueDecoded class="form-control" disabled=model.isLocked}}
   315                  </div>
   316                  <button {{action "updateKey"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-success"}} {{bind-attr disabled=isLocked}}>Update</button>
   317                  <button {{action "cancelEdit"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn isLoading:btn-warning:btn-default"}}>Cancel</button>
   318                  <label class="form-checkbox">{{ input type=checkbox checked=model.validateJson }}Validate JSON</label>
   319                  <button {{action "deleteKey"}} {{bind-attr disabled=isLoading}} {{bind-attr class=":btn :pull-right isLoading:btn-warning:btn-danger"}} {{bind-attr disabled=isLocked}}>Delete key</button>
   320                </form>
   321              </div>
   322            </div>
   323  
   324            {{#if model.isLocked}}
   325              <h5>Lock Session</h5>
   326  
   327              {{#link-to 'nodes.show' model.session.Node tagName="div" href=false class="list-group-item list-condensed-link" }}
   328                <div class="bg-light-gray list-bar-horizontal"></div>
   329                <div class="name">
   330                  {{ sessionName session }}
   331                  <small class="pull-right">
   332                    {{session.Node}}
   333                  </small>
   334                </div>
   335              {{/link-to}}
   336            {{/if}}
   337  
   338          </div>
   339        </div>
   340  
   341      </div>
   342    </script>
   343  
   344    <script type="text/x-handlebars" data-template-name="item/loading">
   345      <div class="row">
   346        <div class="col-md-8 col-md-offset-2 col-sm-12 col-xs-12">
   347          <div class="text-center vertical-center">
   348            <img src="static/loading-cylon-pink.svg" width="384" height="48">
   349            <p><small>Loading...</small></p>
   350          </div>
   351        </div>
   352      </div>
   353    </script>
   354  
   355    <script type="text/x-handlebars" id="services">
   356      <div class="row">
   357        <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
   358          {{view App.ActionBarView }}
   359  
   360          {{#if filteredContent}}
   361  
   362                {{#if condensed }}
   363  
   364                  {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
   365                    {{#link-to 'services.show' Name tagName="div" href=false class="list-group-item list-condensed-link" }}
   366                      <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
   367                      <div class="name">
   368                        {{Name}}
   369                        <small class="pull-right">
   370                          {{ checkMessage }}
   371                        </small>
   372                      </div>
   373                    {{/link-to}}
   374                  {{/collection}}
   375  
   376                {{else}}
   377  
   378                  {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=120 }}
   379                    {{#link-to 'services.show' Name tagName="div" href=false class="list-group-item list-link" }}
   380                      <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
   381                      <h4 class="list-group-item-heading">
   382                        {{#link-to 'services.show' Name class='subtle'}}{{Name}}{{/link-to}}
   383                        <div class="heading-helper">
   384                          <a class="subtle" href="#">{{checkMessage}}</a>
   385                        </div>
   386                      </h4>
   387                      <ul class="list-inline">
   388                        {{#each node in nodes }}
   389                        <li class="bold">{{node}}</li>
   390                        {{/each}}
   391                      </ul>
   392                    {{/link-to}}
   393                  {{/collection}}
   394  
   395                {{/if}}
   396  
   397          {{else}}
   398          <p class="light">There are no services to show.</p>
   399          {{/if}}
   400  
   401        </div>
   402  
   403        <div class="border-left hidden-xs hidden-sm">
   404        </div>
   405  
   406        <div class="visible-xs visible-sm">
   407          <hr>
   408        </div>
   409  
   410        <div class="col-md-6 col-lg-7 border-left scrollable">
   411          <div class="row padded-border">
   412            {{outlet}}
   413          </div>
   414        </div>
   415      </div>
   416    </script>
   417  
   418    <script type="text/x-handlebars" id="service">
   419        <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
   420          {{#link-to "services" class="btn btn-default btn-block" }}Back to all services{{/link-to}}
   421          <hr>
   422        </div>
   423  
   424        <h3 class="no-margin">{{ model.0.Service.Service }}</h3>
   425        <hr>
   426  
   427        <h5>Tags</h5>
   428        {{#if tags}}
   429          <p>{{tags}}</p>
   430        {{else}}
   431          <p>No tags</p>
   432        {{/if}}
   433  
   434        <h5>Nodes</h5>
   435  
   436        {{#each node in model }}
   437  
   438          {{#link-to 'nodes.show' node.Node.Node tagName="div" href=false class="panel panel-link panel-list" }}
   439            <div {{bind-attr class="node.hasFailingChecks:bg-orange:bg-green :panel-bar-horizontal"}}></div>
   440  
   441            <div class="panel-heading">
   442              <h3 class="panel-title">
   443                {{node.Node.Node}}
   444                <small>{{node.Node.Address}}</small>
   445                <span class="panel-note">{{node.checkMessage}}</span>
   446              </h3>
   447            </div>
   448  
   449            <ul class="list-unstyled">
   450              {{#each check in node.Checks }}
   451                <li class="list-group-item list-condensed-link">
   452                  {{listBar check.Status}}
   453                  <div class="name">
   454                    {{check.Name}}
   455                    <small>{{ check.CheckID }}</small>
   456                    <small class="pull-right">
   457                    {{check.Status}}
   458                    </small>
   459                  </div>
   460                </li>
   461              {{/each}}
   462            </ul>
   463  
   464          {{/link-to}}
   465  
   466        {{/each}}
   467    </script>
   468  
   469    <script type="text/x-handlebars" id="nodes">
   470      <div class="row">
   471        <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
   472          {{view App.ActionBarView }}
   473  
   474            {{#if filteredContent}}
   475  
   476                  {{#if condensed }}
   477                      {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
   478                        {{#link-to 'nodes.show' Node tagName="div" href=false class="list-group-item list-condensed-link" }}
   479                          <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar-horizontal"}}></div>
   480                          <div class="name">
   481                            {{Node}}
   482                            <small class="pull-right">
   483                              {{ numServices }} services
   484                            </small>
   485                          </div>
   486                        {{/link-to}}
   487                      {{/collection}}
   488  
   489                  {{else}}
   490  
   491                    {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=120 }}
   492                      {{#link-to 'nodes.show' Node tagName="div" href=false class="list-group-item list-link" }}
   493                        <div {{bind-attr class="hasFailingChecks:bg-orange:bg-green :list-bar"}}></div>
   494                        <h4 class="list-group-item-heading">
   495                          {{Node}}
   496                          <small>{{Address}}</small>
   497                          <div class="heading-helper">
   498                            <a class="subtle" href="#">{{checkMessage}}</a>
   499                          </div>
   500                        </h4>
   501                        <ul class="list-inline">
   502                          {{#each service in services}}
   503                            <li class="bold">{{service.Service}}</li>
   504                          {{/each}}
   505                        </ul>
   506                      {{/link-to}}
   507                    {{/collection}}
   508  
   509                  {{/if}}
   510  
   511            {{else}}
   512            <p class="light">There are no nodes to show.</p>
   513            {{/if}}
   514        </div>
   515  
   516        <div class="border-left hidden-xs hidden-sm">
   517        </div>
   518  
   519        <div class="col-md-6 col-lg-7 border-left scrollable">
   520          <div class="row padded-border">
   521            {{outlet}}
   522          </div>
   523        </div>
   524      </div>
   525    </script>
   526  
   527    <script type="text/x-handlebars" id="node">
   528        <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
   529          {{#link-to "nodes" class="btn btn-default btn-block" }}Back to all nodes{{/link-to}}
   530          <hr>
   531        </div>
   532  
   533        <h3 class="no-margin">
   534          {{ model.Node }} <small> {{ model.Address }}</small>
   535        </h3>
   536        <hr>
   537  
   538        <h5>Services</h5>
   539  
   540        {{#each service in model.Services }}
   541          {{#link-to 'services.show' service.Service tagName="div" href=false class="list-group-item list-condensed-link double-line" }}
   542            <div class="list-bar-horizontal bg-light-gray"></div>
   543              <div class="name">
   544                {{service.Service}}
   545                <small class="pull-right">
   546                  {{service.Address}}:{{service.Port}}
   547                </small>
   548              </div>
   549              <ul class="list-inline sub">
   550                {{#each tag in service.Tags}}
   551                  <li>{{tag}}</li>
   552                {{/each}}
   553                {{serviceTagMessage service.Tags}}
   554              </ul>
   555          {{/link-to}}
   556  
   557        {{/each}}
   558  
   559        <h5>Checks</h5>
   560  
   561        {{#each check in model.Checks }}
   562  
   563          <div class="panel">
   564            {{ panelBar check.Status }}
   565            <div class="panel-heading">
   566              <h3 class="panel-title">
   567                {{check.Name}}
   568                <small>{{check.CheckID}}</small>
   569                <span class="panel-note">{{check.Status}}</span>
   570              </h3>
   571            </div>
   572  
   573            <div class="panel-body">
   574              <h5>Notes</h5>
   575              <p>{{ check.Notes }}</p>
   576              <h5>Output</h5>
   577              <pre>{{check.Output}}</pre>
   578            </div>
   579          </div>
   580  
   581        {{/each}}
   582  
   583        <h5>Lock Sessions</h5>
   584  
   585        {{#if sessions }}
   586          {{errorMessage}}
   587  
   588          {{#each session in sessions }}
   589            <div class="list-group-item list-condensed double-line">
   590              <div class="bg-light-gray list-bar-horizontal"></div>
   591              <div class="name">
   592                {{ sessionName session }}
   593                <button {{ action "invalidateSession" session.ID }} {{ bind-attr class=":btn :btn-danger :pull-right :btn-list isLoading:btn-warning" }}>Invalidate</button>
   594              </div>
   595  
   596                <ul class="list-inline sub">
   597                  {{#each check in session.Checks}}
   598                    <li class="bold">{{check}}</li>
   599                  {{/each}}
   600                </ul>
   601            {{ sessionMeta session }}
   602            </div>
   603          {{/each}}
   604  
   605        {{else}}
   606          <p class="light small">No sessions</p>
   607        {{/if}}
   608  
   609        <h5>Network Tomography</h5>
   610  
   611        {{ tomographyGraph tomography 336 }}
   612  
   613        <p class="light small">Node: <span id="tomography-node-info"></span></p>
   614        <p class="light small">Minimum: {{ tomography.min }}ms</p>
   615        <p class="light small">Median: {{ tomography.median }}ms</p>
   616        <p class="light small">Maximum: {{ tomography.max }}ms</p>
   617    </script>
   618  
   619    <script type="text/x-handlebars" id="acls">
   620      <div class="row">
   621        <div {{ bind-attr class=":col-md-6 :col-lg-5 :padded-right-middle isShowingItem:hidden-xs isShowingItem:hidden-sm" }}>
   622          {{view App.ActionBarView }}
   623  
   624            {{#if filteredContent}}
   625                {{#collection Ember.ListView contentBinding="filteredContent" height=800 rowHeight=44 }}
   626                  {{#link-to 'acls.show' ID tagName="div" href=false class="list-group-item list-condensed-link" }}
   627                    <div class="bg-light-gray list-bar-horizontal"></div>
   628                    <div class="name">
   629                      {{ aclName Name ID }}
   630                    </div>
   631                  {{/link-to}}
   632                {{/collection}}
   633            {{else}}
   634              <p class="light">There are no ACLs to show.</p>
   635            {{/if}}
   636        </div>
   637  
   638        <div class="border-left hidden-xs hidden-sm">
   639        </div>
   640  
   641        {{#if isShowingItem}}
   642        <div class="col-md-6 col-lg-7 border-left scrollable">
   643          <div class="row padded-border">
   644            {{outlet}}
   645          </div>
   646        </div>
   647        {{else}}
   648          <div class="col-md-6 col-lg-7 border-left">
   649            <div class="row padded-border">
   650              <div class="panel">
   651                <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
   652                  <div class="panel-heading">
   653                    <h4 class="panel-title">
   654                      New ACL
   655                    </h4>
   656                  </div>
   657  
   658                  <div class="panel-body panel-form">
   659                    <div class="form-group"></div>
   660  
   661                    <form class="form">
   662                      <div class="form-group">
   663                        {{ input value=newAcl.Name class="form-control" }}
   664                        <span class="help-block">Set the optional name for the ACL.</span>
   665                      </div>
   666  
   667                      <div class="form-group">
   668                        {{view Ember.Select content=types value=newAcl.Type class="form-control form-control-mini"}}
   669                        <span class="help-block">The type of ACL this is.</span>
   670                      </div>
   671  
   672                      <div class="form-group">
   673                        <label>Rules</label>
   674                        {{ textarea value=newAcl.Rules class="form-control" }}
   675                        <span class="help-block">For more information on rules, visit the <a href="https://www.consul.io/docs/guides/acl.html" target="_blank">ACL documentation.</a></span>
   676                      </div>
   677  
   678                      <button {{ action "createAcl"}} {{ bind-attr class=":btn :btn-success" }}>Create</button>
   679                    </form>
   680                  </div>
   681                </div>
   682            </div>
   683          </div>
   684        {{/if}}
   685      </div>
   686    </script>
   687  
   688    <script type="text/x-handlebars" id="acl">
   689      <div class="row">
   690        <div class="col-xs-12 col-sm-12 visible-xs visible-sm">
   691          {{#link-to "acls" class="btn btn-default btn-block" }}Back to all ACLs{{/link-to}}
   692          <hr>
   693        </div>
   694      </div>
   695  
   696          <div class="panel">
   697            <div {{ bind-attr class=":panel-bar isLoading:bg-orange:bg-light-gray" }}></div>
   698              <div class="panel-heading">
   699                <h4 class="panel-title">
   700                  {{ aclName "Update ACL" model.ID }}
   701                </h4>
   702              </div>
   703  
   704              <div class="panel-body panel-form">
   705                <div class="form-group"></div>
   706  
   707                <form class="form">
   708                  <div class="form-group">
   709                    {{ input value=model.Name class="form-control" }}
   710                    <span class="help-block">Set the optional name for the ACL.</span>
   711                  </div>
   712  
   713                  <div class="form-group">
   714                    {{view Ember.Select content=types value=model.Type class="form-control form-control-mini"}}
   715                    <span class="help-block">The type of ACL this is.</span>
   716                  </div>
   717  
   718                  <div class="form-group">
   719                    <label>Rules</label>
   720                    {{ textarea value=model.Rules class="form-control" }}
   721                    <span class="help-block">For more information on rules, visit the <a href="https://www.consul.io/docs/guides/acl.html" target="_blank">ACL documentation.</a></span>
   722                  </div>
   723  
   724                  <button {{ action "updateAcl"}} {{ bind-attr class=":btn :btn-success" }}>Update</button>
   725                  <button {{ action "clone" }} {{ bind-attr class=":btn :btn-default" }}>Clone</button>
   726                  <button {{ action "set" }} {{ bind-attr class=":btn :btn-default" }}>Use Token</button>
   727                  {{# if model.isNotAnon }}
   728                  <button {{ action "delete"}} {{ bind-attr class=":btn isLoading:btn-warning:btn-danger :pull-right" }}>Delete</button>
   729                  {{/if}}
   730  
   731                </form>
   732              </div>
   733            </div>
   734        <hr>
   735    </script>
   736  
   737    <script type="text/x-handlebars" id="index">
   738      <div class="col-md-8 col-md-offset-2 col-xs-offset-0 col-sm-offset-0 col-xs-12 col-sm-12 vertical-center">
   739        <h5>Select a datacenter</h5>
   740        {{#each item in model}}
   741          {{#link-to 'services' item }}
   742              <div class="panel panel-link panel-short">
   743                <div class="panel-bar bg-light-gray"></div>
   744                <div class="panel-heading">
   745                  <h3 class="panel-title">
   746                    {{item}}
   747                    <span class="panel-note"></span>
   748                  </h3>
   749                </div>
   750              </div>
   751          {{/link-to}}
   752        {{/each}}
   753      </div>
   754    </script>
   755  
   756    <script type="text/x-handlebars" id="settings">
   757      <div class="col-md-8 col-md-offset-2 col-xs-offset-0 col-sm-offset-0 col-xs-12 col-sm-12">
   758        <h3>Settings</h3>
   759        <p>These settings allow you to configure your browser for the Consul Web UI. Everything is saved to localstorage,
   760        and should persist through visits and browser usage.</p>
   761        <p>Settings are automatically persisted upon modification, so no manual save is required.</p>
   762        <h5>ACL Token</h5>
   763        <div class="form-group">
   764          {{ input type="text" value=model.token class="form-control form-mono" placeholder="token"}}
   765          <span class="help-block">The token is sent with requests as the <code>?token</code> parameter. This is used to control the ACL for the
   766          web UI.</span>
   767        </div>
   768        <div class="form-group">
   769          <button {{ action "reset" }} {{ bind-attr class=":btn :btn-danger" }}>Reset Defaults</button>
   770          <button {{ action "close" }} {{ bind-attr class=":btn :btn-default" }}>Close</button>
   771        </div>
   772      </div>
   773    </script>
   774  
   775  
   776    <script>
   777    // Enable query params, must be loaded before ember is
   778    EmberENV = {FEATURES: {'query-params-new': true}};
   779    </script>
   780  
   781    <!-- ASSETS -->
   782    <script src="javascripts/libs/jquery-1.10.2.min.js"></script>
   783    <script src="javascripts/libs/handlebars-1.3.0.min.js"></script>
   784    <script src="javascripts/libs/base64.min.js"></script>
   785    <script src="javascripts/libs/ember-debug.min.js"></script>
   786    <script src="javascripts/libs/ember-validations.min.js"></script>
   787    <script src="javascripts/libs/list-view.min.js"></script>
   788    <script src="javascripts/libs/classie.js"></script>
   789    <script src="javascripts/libs/notificationFx.js"></script>
   790    <script src="javascripts/fixtures.js"></script>
   791    <script src="javascripts/app/router.js"></script>
   792    <script src="javascripts/app/routes.js"></script>
   793    <script src="javascripts/app/models.js"></script>
   794    <script src="javascripts/app/views.js"></script>
   795    <script src="javascripts/app/controllers.js"></script>
   796    <script src="javascripts/app/helpers.js"></script>
   797    <!-- to activate the test runner, add the "?test" query string parameter -->
   798    <script src="tests/runner.js"></script>
   799    <!-- <script src="static/application.min.js"></script> -->
   800    <!-- /ASSETS -->
   801  
   802  </body>
   803  </html>