<!--Copyright 2015 Cisco Systems, Inc. All rights reserved.-->

<!--Licensed under the Apache License, Version 2.0 (the "License"); you may-->
<!--not use this file except in compliance with the License. You may obtain-->
<!--a copy of the License at-->

<!--http://www.apache.org/licenses/LICENSE-2.0-->

<!--Unless required by applicable law or agreed to in writing, software-->
<!--distributed under the License is distributed on an "AS IS" BASIS, WITHOUT-->
<!--WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the-->
<!--License for the specific language governing permissions and limitations-->
<!--under the License.-->

<!--<alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)" style="background-color:#ffcc99;color:white">{{alert.msg}}</alert>-->

<!--<h6></h6>-->

<div class="row">
  <div class="col-md-8">
  </div>
  <div class="col-md-4">
    <div style="text-align:right;">
      <div class="btn-group">
        <a href="" class="btn btn-default" ng-click="CleanUp()" ng-disabled="setUnstage">Unstage</a>
        <a herf="" class="btn btn-default" ng-click="setConfig()" ng-disabled="setStatus">Save Settings</a>
        <a href="" class="btn btn-default" ng-click="scaleTest()" ng-disabled="runStatus">{{runButton}}</a>
      </div>
      <!--<button type="submit" class="btn btn-default" ng-click="CleanUp()">Unstage</button>-->
      <!--<button type="submit" class="btn btn-warning" ng-click="setConfig()" ng-disabled="setStatus">Save Settings</button>-->
      <!--<button type="submit" class="btn btn-primary" ng-click="scaleTest()" ng-disabled="runStatus">{{runButton}}</button>-->
    </div>
  </div>
</div>

<!--<h4>Triggers</h4>-->
<!--<p>-->
<!--<button popover="I appeared on mouse enter!" popover-trigger="mouseenter" type="button" class="btn btn-default">Mouseenter</button>-->
<!--</p>-->
<!--<input type="text" value="Click me!" popover="aa"  popover-trigger="focus" class="form-control">-->
<div class="supercontainer">
  <div class="container">
    <div id="sidebar">
      <div class="">
        <!--Staging-->
        <accordion close-others="oneAtATime">
          <accordion-group heading="" is-open="status1.open">
            <accordion-heading>
              Staging Settings <i class="pull-right glyphicon"
                                  ng-class="{'glyphicon-chevron-down': !status1.open, 'glyphicon-chevron-up': status1.open}"></i>
            </accordion-heading>
            <div class="col-lg-14" id="stagingConfig">
              <form class="bs-component">
                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">Tenants:</span>
                  <input type="number" min="1" max="10000" step="1" class="form-control" id="number_tenants"
                         ng-model="config.server.number_tenants"/>
                </div>
                <br/>

                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">Routers/Tenant:</span>
                  <input type="number" min="1" max="1000" step="1" class="form-control" id="server_routers_per_tenant"
                         ng-model="config.server.routers_per_tenant"/>
                </div>
                <br/>

                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">Networks/Router:</span>
                  <input type="number" min="1" max="1000" step="11" class="form-control" id="server_networks_per_router"
                         ng-model="config.server.networks_per_router"/>
                </div>
                <br/>

                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">VMs/Network:</span>
                  <input type="number" min="1" max="1000" step="11" class="form-control" id="server_vms_per_network"
                         ng-model="config.server.vms_per_network"/>
                </div>
                <br/>

                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">Secgroups/Network:</span>
                  <input type="number" min="1" max="1000" step="1" class="form-control"
                         id="server_secgroups_per_network" ng-model="config.server.secgroups_per_network"/>
                </div>
              </form>
            </div>
            <!--Run-->
          </accordion-group>
          <accordion-group heading="" is-open="status2.open">
            <accordion-heading>
              Progression Test <i class="pull-right glyphicon"
                                  ng-class="{'glyphicon-chevron-down': !status2.open, 'glyphicon-chevron-up': status2.open}"></i>
            </accordion-heading>
            <div class="col-lg-14" id="stagingConfig1">
              <form class="bs-component">
                <div class="input-group col-sm-11" style="margin:0 auto">
                  <input type="checkbox" id="client_progression_enabled" ng-model="config.client.progression.enabled"/>
                  Progression Test
                </div>
                <br/>

                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">VM Count Start:</span>
                  <input type="number" min="1" step="1" class="form-control" id="client_progression_vm_start"
                         ng-model="config.client.progression.vm_start"
                         ng-disabled="!config.client.progression.enabled"/>
                </div>
                <br/>

                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">VM Increment Step:</span>
                  <input type="number" min="1" step="1" class="form-control" id="client_progression_vm_step"
                         ng-model="config.client.progression.vm_step" ng-disabled="!config.client.progression.enabled"/>
                </div>
                <br/>
                Stop When
                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">Num of Err Packets > </span>
                  <input type="number" min="0" step="1" class="form-control" id="client_progression_stop_limit0"
                         ng-model="config.client.progression.stop_limit[0]"
                         ng-disabled="!config.client.progression.enabled"/>
                </div>
                <!--OR-->
                <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
                <!--<span class="input-group-addon">Percentile:</span>-->
                <!--<select class="form-control" id="client_progression_stop_limit1" ng-model="config.client.progression.stop_limit[1]" ng-disabled="!config.client.progression.enabled" convert-to-number>-->
                <!--<option value="50">50%</option>-->
                <!--<option value="75">75%</option>-->
                <!--<option value="90">90%</option>-->
                <!--<option value="99">99%</option>-->
                <!--<option value="99.9">99.9%</option>-->
                <!--<option value="99.99">99.99%</option>-->
                <!--<option value="99.999">99.999%</option>-->
                <!--</select>-->
                <!--</div>-->
              </form>
            </div>
            <!--Run-->
          </accordion-group>
          <accordion-group is-open="status3.open">
            <accordion-heading>
              Run Settings <i class="pull-right glyphicon"
                              ng-class="{'glyphicon-chevron-down': !status3.open, 'glyphicon-chevron-up': status3.open}"></i>
            </accordion-heading>
            <div class="col-lg-14" id="runningConfig">
              <form class="bs-component">
                <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
                <!--<span class="input-group-addon">connection Type:</span>-->
                <!--<input type="text" class="form-control" id="client_connection_type" ng-model="config.client.http_tool_configs.connection_type"/>-->
                <!--</div>-->
                <!--<br/>-->
                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">Duration/Run (sec):</span>
                  <input type="number" min="1" max="" step="1" class="form-control" id="client_uduration"
                         ng-model="config.client.http_tool_configs.duration"/>
                </div>
                <br/>
                <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
                <!--<span class="input-group-addon">Reporting Interval:</span>-->
                <!--<input type="number"  min="0" max="" step="10" class="form-control" id="report_interval" ng-model="config.client.http_tool_configs.report_interval"/>-->
                <!--</div>-->
                <!--<br/>-->
                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">Rate Limit/VM:</span>
                  <input type="number" min="0" max="" step="1000" class="form-control" id="client_rate_limit"
                         ng-model="config.client.http_tool_configs.rate_limit"/>
                </div>
                <br/>

                <div class="input-group col-sm-11" style="margin:0 auto">
                  <span class="input-group-addon">Connections/VM:</span>
                  <input type="number" min="0" max="" step="1000" min="0" max="" step="10" class="form-control"
                         id="client_connections" ng-model="config.client.http_tool_configs.connections"/>
                </div>
                <!--<br/>-->
                <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
                <!--<span class="input-group-addon">Threads:</span>-->
                <!--<input type="number"  min="0" max="" step="10" class="form-control" id="client_threads" ng-model="config.client.http_tool_configs.threads"/>-->
                <!--</div>-->
                <!--<br/>-->
                <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
                <!--<span class="input-group-addon">Timeout:</span>-->
                <!--<input type="number"  min="0" max="" step="5" class="form-control" id="client_timeout" ng-model="config.client.http_tool_configs.timeout"/>-->
                <!--</div>-->
                <!--<br/>-->
                <!--<div class="input-group col-sm-11"  style="margin:0 auto">-->
                <!--<span class="input-group-addon">Polling Interval:</span>-->
                <!--<input type="number"  min="0" max="" step="5" class="form-control" id="client_polling_interval" ng-model="config.client.polling_interval"/>-->
                <!--</div>-->
              </form>
            </div>
          </accordion-group>
        </accordion>
      </div>
    </div>

    <div class="main-content">
      <div class="swipe-area"></div>
      <a href="" data-toggle=".container" id="sidebar-toggle" style="text-decoration:none">
        <!--<span class="bar"></span>-->
        <!--<span class="bar"></span>-->
        <!--<span class="bar"></span>-->
        <span id="littleglyph" class="bar glyphicon glyphicon-triangle-right" style="color:white"></span>
      </a>

      <div class="content" id="content">
        <div class="row">
          <div class="">
            <h6>Latency(ms)</h6>
            <linechart data="data" options="options" mode="" width="" height="420"></linechart>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>


<div class="btn-group" style="margin-bottom: 20px;float:right;">
  <a href="" class="btn btn-default  btn-xs dropdown-toggle" data-toggle="dropdown" aria-expanded="true">
    cols to show
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li class="checkbox-inline" ng-repeat="col in cols" style="margin-left: 5px;">
      <input type="checkbox" ng-model="col.show">{{col.title}}
    </li>
  </ul>
</div>


<table ng-table="tableParams" class="table table-responsive table-condensed table-bordered table-striped">
  <tr ng-repeat="row in tableParams.data" style="text-align:center;">
    <td title="cols[0].title" ng-if="cols[0].show">
      <input type="checkbox" class="btn btn-default" ng-click="">
        <span style="background-color:{{row.color}};margin:1px 1px" popover="{{row.description}}"
              popover-trigger="mouseenter"> &nbsp; &nbsp; &nbsp;&nbsp;
          <!--{{row.seq}}-->
        </span>
      </input>
    </td>
    <td title="cols[1].title" data-sortable="cols[1].field" ng-if="cols[1].show">{{row.connection}}</td>
    <td title="cols[2].title" data-sortable="cols[2].field" ng-if="cols[2].show">{{row.server_vms}}</td>
    <td title="cols[3].title" data-sortable="cols[3].field" ng-if="cols[3].show">{{row.requests}}</td>
    <td title="cols[4].title" data-sortable="cols[4].field" ng-if="cols[4].show">{{row.sock_err}}</td>
    <td title="cols[5].title" data-sortable="cols[5].field" ng-if="cols[5].show">{{row.rps}}</td>
    <td title="cols[6].title" data-sortable="cols[6].field" ng-if="cols[6].show">{{row.rate_limit}}</td>
    <td title="cols[7].title" data-sortable="cols[7].field" ng-if="cols[7].show">{{row.throughput}} Gbps</td>
    <td title="cols[8].title" ng-if="cols[8].show" width="80px">

      <!--{{$index}}-->
      <button class="btn btn-default btn-xs" ng-click="saveResult($index)"><span
        class="glyphicon glyphicon-floppy-save"></span></button>

      <button class="btn btn-danger btn-xs" ng-click="delData($index)" disabled><span
        class="glyphicon glyphicon-trash"></span></button>
    </td>
  </tr>
</table>


<div class="navbar navbar-default navbar-fixed-bottom" role="navigation">
  <div style="margin: 0 8%;vertical-align: middle;">
    <h5>
      <div class="row">
        <div class="" style="float:left;background: white; width: 35px;height: 35px;border-radius: 50%;">
          <div class='loading spin-1'>
            <div class='loading spin-2'>
              <div class='loading spin-3'>
                <div class='loading spin-4'>
                  <div class='loading spin-5'>
                    <div class='loading spin-6'></div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-2" style="line-height:40px; height:40px; color:white;">Status:
          <button class="btn btn-default btn-xs" ng-click="checkStatus()">{{status}}</button>
        </div>

        <div class="col-md-3" style="line-height:40px; height:40px;  color:white;">Created Server VM(s):
          <button class="btn btn-default btn-xs" ng-click="checkStatus()">{{server_vm_count}}</button>
        </div>
        <div class="col-md-3" style="line-height:40px; height:40px;  color:white;">Created Client VM(s):
          <button class="btn btn-default btn-xs" ng-click="checkStatus()">{{client_vm_count}}</button>
        </div>
        <div class="col-md-3" style="line-height:40px; height:40px;  color:white;">
          {{info}}
        </div>
      </div>
      <!--sessionID: <button class="btn btn-info btn-xs" disabled>{{sessionID}}</button>-->
      <!--<button style="float:right;" type="submit" class="btn btn-default btn-xs" ng-click="deleteSession()" popover="Session can be destroyed only if it is at READY." popover-trigger="mouseenter">Del Ses</button>-->
    </h5>
  </div>
</div>

