<!--
Copyright 2016 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.
-->

<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="stage()" ng-disabled="setUnstage" style="width:100px">{{stageButton}}</a>
<a href="" class="btn btn-default" ng-click="scaleTest()" ng-disabled="runStatus" style="width:100px">{{runButton}}</a>
</div>
</div>
</div>
</div>
<div class="supercontainer">
<div class="container">
<div id="sidebar">
<div>

<accordion close-others="oneAtATime">
<accordion-group heading="" is-open="status1.open">
<accordion-heading>
Staging Settings (VM Count:{{config.server.number_tenants*config.server.routers_per_tenant*config.server.networks_per_router*config.server.vms_per_network*config.server.secgroups_per_network}})
<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" name="interactive_staging_settings" novalidate>
<md-content layout-padding style="padding:0">
<md-input-container class="col-md-12" style="padding-top:0">
<label>Tenants</label>
<input type="number" min="1" max="9999" step="1" id="number_tenants" ng-model="config.server.number_tenants" name="number_tenants" ng-pattern="/^[1-9][0-9]{0,3}$/i" required style="text-align:left">
<div ng-messages="interactive_staging_settings.number_tenants.$error" ng-if="interactive_staging_settings.number_tenants.$dirty">
<div ng-message="required" style="text-align:left">This field is required</div>
<div ng-message="pattern" style="text-align:left">Must be a number between 1 and 9999</div>
</div>
</md-input-container>
<md-input-container class="col-md-12">
<label>Routers/Tenant</label>
<input type="number" min="1" max="999" step="1" id="server_routers_per_tenant" ng-model="config.server.routers_per_tenant" name="server_routers_per_tenant" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="interactive_staging_settings.server_routers_per_tenant.$error" ng-if="interactive_staging_settings.server_routers_per_tenant.$dirty">
<div ng-message="required" style="text-align:left">This field is required</div>
<div ng-message="pattern" style="text-align:left">Must be a number between 1 and 999</div>
</div>
</md-input-container>
<md-input-container class="col-md-12">
<label>Networks/Router</label>
<input type="number" min="1" max="999" step="1" id="server_networks_per_router" ng-model="config.server.networks_per_router" name="server_networks_per_router" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="interactive_staging_settings.server_networks_per_router.$error" ng-if="interactive_staging_settings.server_networks_per_router.$dirty">
<div ng-message="required" style="text-align:left">This field is required</div>
<div ng-message="pattern" style="text-align:left">Must be a number between 1 and 999</div>
</div>
</md-input-container>
<md-input-container class="col-md-12">
<label>VMs/Network</label>
<input type="number" min="1" max="999" step="1" id="server_vms_per_network" ng-model="config.server.vms_per_network" name="server_vms_per_network" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="interactive_staging_settings.server_vms_per_network.$error" ng-if="interactive_staging_settings.server_vms_per_network.$dirty">
<div ng-message="required" style="text-align:left">This field is required</div>
<div ng-message="pattern" style="text-align:left">Must be a number between 1 and 999</div>
</div>
</md-input-container>
<md-input-container class="col-md-12">
<label>Secgroups/Network</label>
<input type="number" min="1" max="999" step="1" id="server_secgroups_per_network" ng-model="config.server.secgroups_per_network" name="server_secgroups_per_network" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="interactive_staging_settings.server_secgroups_per_network.$error" ng-if="interactive_staging_settings.server_secgroups_per_network.$dirty">
<div ng-message="required" style="text-align:left">This field is required</div>
<div ng-message="pattern" style="text-align:left">Must be a number between 1 and 999</div>
</div>
</md-input-container>
</md-content>
</form>
</div>
</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" name="interactive_progression_settings">
<div class="input-group col-sm-12" style="margin:0 auto" popover="If enabled, KloudBuster will give multiple runs (progression) on the cloud, unless it reaches the scale defined in the upper sections, or the stop limit." popover-trigger="mouseenter" popover-placement="right">
<md-checkbox id="client_progression_enabled" ng-model="config.client.progression.enabled" class="md-primary">
Progression Test
</md-checkbox>
</div>
<md-content layout-padding style="padding:0">
<md-input-container class="col-md-12">
<label>Series VM multiple</label>
<input type="number" min="1" step="1" id="client_progression_vm_multiple" ng-model="config.client.progression.vm_multiple" ng-disabled="!config.client.progression.enabled" name="client_progression_vm_multiple" ng-pattern="/^[1-9][0-9]*$/i" required style="text-align:left">
<div ng-messages="interactive_progression_settings.client_progression_vm_multiple.$error" ng-if="interactive_progression_settings.client_progression_vm_multiple.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a number no less than 1</div>
</div>
</md-input-container>
<div class="input-group col-sm-12" style="margin:0 auto;padding-left: 7px">
<md-checkbox id="client_progression_vm_start" ng-checked="config.client.progression.vm_start==1" ng-click="config.client.progression.vm_start==1? config.client.progression.vm_start=0:config.client.progression.vm_start=1" class="md-primary" ng-disabled="!config.client.progression.enabled">
Start series with 1 VM
</md-checkbox>
</div>
<md-input-container class="col-md-12">
<label>Stop When Num of Err Packets ></label>
<input type="number" min="1" step="1" id="client_progression_http_stop_limit0" ng-model="config.client.progression.http_stop_limit[0]" ng-disabled="!config.client.progression.enabled" name="client_progression_http_stop_limit0" ng-pattern="/^[1-9][0-9]*$/i" required style="text-align:left">
<div ng-messages="interactive_progression_settings.client_progression_http_stop_limit0.$error" ng-if="interactive_progression_settings.client_progression_http_stop_limit0.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a number no less than 1</div>
</div>
</md-input-container>
</md-content>
<span class="label col-md-12" style="color:grey;text-align: left">VM count series: {{config.client.progression.vm_start==1?1:''}} {{config.client.progression.vm_multiple}} {{config.client.progression.vm_multiple*2}} {{config.client.progression.vm_multiple*3}} {{config.client.progression.vm_multiple*4}} {{config.client.progression.vm_multiple*5}}...
</span>
</form>
</div>

</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" name="interactive_running_settings">
<md-content layout-padding style="padding:0">
<md-input-container class="col-md-12" style="padding-top:0">
<label>Duration/Run (sec)</label>
<input type="number" min="1" max="" step="1" id="client_duration" ng-model="config.client.http_tool_configs.duration" name="client_duration" ng-pattern="/^[1-9][0-9]*$/i" required style="text-align:left">
<div ng-messages="interactive_running_settings.client_duration.$error" ng-if="interactive_running_settings.client_duration.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a number no less than 1</div>
</div>
</md-input-container>
<md-input-container class="col-md-12">
<label>Rate Limit/VM</label>
<input type="number" min="0" max="" step="1000" id="client_rate_limit" ng-model="config.client.http_tool_configs.rate_limit" name="client_rate_limit" ng-pattern="/^[0-9]*$/i" required style="text-align:left">
<div ng-messages="interactive_running_settings.client_rate_limit.$error" ng-if="interactive_running_settings.client_rate_limit.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a number no less than 0</div>
</div>
</md-input-container>
<md-input-container class="col-md-12">
<label>Connections/VM</label>
<input type="number" min="0" max="" step="1000" id="client_connections" ng-model="config.client.http_tool_configs.connections" name="client_connections" ng-pattern="/^[1-9][0-9]*$/i" required style="text-align:left">
<div ng-messages="interactive_running_settings.client_connections.$error" ng-if="interactive_running_settings.client_connections.$dirty">
<div ng-message="required">This field is required</div>
<div ng-message="pattern">Must be a number no less than 1</div>
</div>
</md-input-container>
</md-content>
</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 id="littleglyph" class="bar glyphicon glyphicon-triangle-right" style="color:white"></span>
</a>
<div class="content" id="content">
<div class="row">
<div>
<h6>Latency(ms)</h6>
<linechart data="data" options="options" mode="" width="" height="430"></linechart>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row" style="text-align:right;margin: 0 1%">
<button type="submit" class="btn btn-default btn-xs" ng-click="saveResult()">Save Result</button>
</div>
<br>
<table ng-table="tableParams" class="table table-responsive table-condensed table-bordered table-striped" style="margin-bottom: 5%">
<tr ng-repeat="row in tableParams.data" style="text-align:center">
<td title="cols[0].title" ng-if="cols[0].show" style="margin:0 auto;padding:0">
<md-checkbox class="{{row.seq}}" ng-click="" popover="{{row.description}}" popover-trigger="mouseenter" popover-placement="right" style="margin:0 auto;width:18px;padding:0" ng-checked="true"></md-checkbox>
</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>
</tr>
</table>
<div class="navbar navbar-default navbar-fixed-bottom" role="navigation" style="min-height: 48px;background: transparent">
<div style="height: 12px;background-color: transparent;width: 100%;margin:0;border:0;padding:0"></div>
<div style="background: white; width: 52px; height: 52px;border-radius: 50%;position:absolute;z-index: 10;top:0;left:60px">
<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 style="background: rgb(44,62,80);width: 100%;height: 36px;margin:0;border:0;padding:0">
<div style="margin: 0 80px 0 120px;vertical-align: middle">
<h5>
<div class="row">
<div class="col-md-2 col-xs-2" style="line-height:33px; height:20px; color:white">

<button class="btn {{statusButton}} btn-xs" ng-click="checkStatus()" style="height:24px">{{status}}
</button>
</div>
<div class="col-md-6 col-xs-6" style="line-height:35px; height:20px; color:white">Created&nbsp;
<button class="btn btn-primary btn-xs" ng-click="checkStatus()" style="height:24px">{{server_vm_count}}
</button>
&nbsp;Server VM(s),&nbsp;
<button class="btn btn-primary btn-xs" ng-click="checkStatus()" style="height:24px">{{client_vm_count}}
</button>
&nbsp;Client VM(s).
</div>
<div class="col-md-4 col-xs-4" style="line-height:33px; height:20px; color:white" ng-show="info">
<button class="btn btn-xs btn-info" style="width:220px;text-align: left">{{info}}</button>
</div>
</div>
</h5>
</div>
</div>
</div>