<!--
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="md-padding dialogdemoBasicUsage" id="popupContainer" ng-cloak=""></div>
<div class="row">
<div style="float:right;padding:1px 30px" id="getButton">
<div class="btn-group">
<a href="" class="btn btn-default btn-sm" style="width:80px">Action</a>
<a href="" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="" ng-click="import()">Import</a></li>
<li class="divider"></li>
<li><a href="" ng-click="export()">Export</a></li>
</ul>
</div>
<input type="button" value="Default/Reset" class="btn btn-default btn-sm" ng-click="getDefaultConfig()" style="width:110px">
<input type="button" value="Save" class="btn btn-primary btn-sm" ng-click="changeConfig()" style="width:80px" ng-disabled="general.$pristine && server.$pristine">
</div>
</div>
<br>
<div class="row-fluid" id="stagingConfig3">
<div id="dashboard_links" class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="{{dash1status1}}" ng-click="setDash1Status(1)"><a href="" class="tab-link">GENERAL CONFIGURATION</a>
</li>
<li class="{{dash1status2}}" ng-click="setDash1Status(2)"><a href="" class="tab-link">STORAGE WORKLOADS</a>
</li>
</ul>
</div>
<div id="dashboard_tabs" class="col-md-8">

<div id="dashboard_general" class="row" ng-show="dash1status1vis">
<h4 class="page-header" style="margin-top: 5px">GENERAL CONFIGURATION</h4>
<form name="general">
<div class="form-group">
<md-content layout-padding>
<md-input-container class="col-md-12">
<label>VM Creation Concurrency</label>
<input type="number" min="1" max="999" step="1" name="vm_creation_concurrency" id="vm_creation_concurrency" ng-model="config.vm_creation_concurrency" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="general.vm_creation_concurrency.$error" ng-if="general.vm_creation_concurrency.$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number between 1 and 999</div>
</div>
</md-input-container>
</md-content>
<div class="panel panel-default" style="margin: 0">
<div class="panel-body">
<h6>Volume Types Used for Storage Test:</h6>
<md-radio-group ng-model="config.client.storage_stage_configs.target">
<md-radio-button value="volume" class="md-primary" style="display: inline">Cinder Volume (Block Storage)
</md-radio-button>
<md-radio-button value="ephemeral" class="md-primary" style="display: inline">Ephemeral Volume
</md-radio-button>
</md-radio-group>
<md-content layout-padding>
<md-input-container class="col-md-12">
<label>Volume Size (GB)</label>
<input type="number" min="1" max="999" step="1" name="disk_size" id="disk_size" ng-model="config.client.storage_stage_configs.disk_size" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="general.disk_size.$error" ng-if="general.disk_size.$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number between 1 and 999</div>
</div>
</md-input-container>
</md-content>
</div>
</div>
<md-content layout-padding>
<md-input-container class="col-md-12">
<label>Storage Test IO File Size (GB)</label>
<input type="number" min="1" max="999" step="1" name="io_file_size" id="io_file_size" ng-model="config.client.storage_stage_configs.io_file_size" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="general.io_file_size.$error" ng-if="general.io_file_size.$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number between 1 and 999</div>
</div>
</md-input-container>
</md-content>
<div class="panel panel-default">
<div class="panel-heading">Flavor (per instance)</div>
<div class="panel-body">
<md-content layout-padding>
<md-input-container class="col-md-6">
<label>vCPUs</label>
<input type="number" min="1" max="999" step="1" name="client_vcpus" id="client_vcpus" ng-model="config.client.flavor.vcpus" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="general.client_vcpus.$error" ng-if="general.client_vcpus.$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number between 1 and 999</div>
</div>
</md-input-container>
<md-input-container class="col-md-6">
<label>RAM (MB)</label>
<input type="number" min="0" max="" step="128" name="client_ram" id="client_ram" ng-model="config.client.flavor.ram" ng-pattern="/^[0-9]*$/i" required style="text-align:left">
<div ng-messages="general.client_ram.$error" ng-if="general.client_ram.$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number no less than 0</div>
</div>
</md-input-container>
</md-content>
<div class="panel panel-default" style="margin: 0">
<div class="panel-body">
<md-radio-group ng-model="choose_disk_size">
<md-radio-button value="0" ng-click="config.client.flavor.disk=0" class="md-primary" style="margin:5px">Use default root disk size
</md-radio-button>
<md-radio-button value="1" class="md-primary" style="margin:5px">Use specific root disk size
</md-radio-button>
</md-radio-group>
<md-content layout-padding ng-if="choose_disk_size==1" ng-init="config.client.flavor.disk==0?config.client.flavor.disk=20:''">
<md-input-container class="col-md-6">
<label>Root Disk Size (GB)</label>
<input type="number" min="1" max="" step="" name="client_disk" id="client_disk" ng-model="config.client.flavor.disk" ng-pattern="/^[1-9][0-9]*$/i" required style="text-align:left">
<div ng-messages="general.client_disk.$error" role="alert">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number no less than 1</div>
</div>
</md-input-container>
</md-content>
</div>
</div>
</div>
</div>
</div>
</form>
</div>


<div id="dashboard_server" class="row" ng-show="dash1status2vis" style="margin-bottom: 2%">
<h4 class="page-header" style="margin-top: 5px">LIST OF STORAGE WORKLOADS TO EXECUTE IN SEQUENCE
<div class="btn-group" style="text-align: center;float:right">
<a href="" class="btn btn-xs btn-primary dropdown-toggle" style="width:150px; text-align: center" data-toggle="dropdown" aria-expanded="false">
Add&nbsp;&nbsp;Workload&nbsp;&nbsp;<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li id="dropdown{{mode}}" ng-repeat="(mode,detail) in storageMode">
<a ng-click="addMode(mode)">{{detail.name}}</a>
</li>
</ul>
</div>
</h4>
<form name="server">
<div class="form-group">
<div ng-repeat="item in config.client.storage_tool_configs" class="panel panel-primary {{storageMode[item['mode']]['type']}}">
<div class="panel-heading">
<h3 class="panel-title">{{$index+1}}. {{item['description']}} - {{storageMode[item['mode']]['name']}}&nbsp;
<a style="float:right;text-decoration: none;cursor: pointer; margin-left: 4%" ng-click="switchIndex($index,0)">×
</a>
<a style="float:right;text-decoration: none;cursor: pointer; margin-left: 2%" ng-show="$index<config.client.storage_tool_configs.length-1" ng-click="switchIndex($index,-1)">
<span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span>
</a>
<a style="float:right;text-decoration: none;cursor: pointer" ng-show="$index>0" ng-click="switchIndex($index,1)">
<span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span>
</a>
</h3>
</div>
<div class="panel-body">
<md-content layout-gt-sm="row" layout-padding layout-wrap>
<md-input-container flex="100">
<label>{{options['description']['name']}}</label>
<input id="{{$index}}+description" name="{{$index}}+description" type="text" ng-model="config.client.storage_tool_configs[$index]['description']" required style="text-align:left">
<div ng-messages="server[$index+'+description'].$error">
<div ng-message="required" style="padding-right: 0">This field is required</div>
</div>
</md-input-container>
<md-input-container flex="33%" ng-if="item['mode'].slice(0,4)=='rand'">
<label>{{options['rate_iops']['name']}}</label>
<input id="{{$index}}+rate_iops&quot;" name="{{$index}}+rate_iops" type="number" min="1" ng-pattern="/^[1-9][0-9]*$/i" ng-model="config.client.storage_tool_configs[$index]['rate_iops']" required style="text-align:left">
<div ng-messages="server[$index+'+rate_iops'].$error" ng-if="server[$index+'+rate_iops'].$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number no less than 1</div>
</div>
</md-input-container>
<md-input-container flex="33%" ng-if="item['mode'].slice(0,4)!='rand'">
<label>{{options['rate']['name']}}</label>
<input id="{{$index}}+rate&quot;" name="{{$index}}+rate" type="number" min="1" ng-pattern="/^[1-9][0-9]*$/i" ng-model="tem_rate" required ng-init="tem_rate = parseInt(config.client.storage_tool_configs[$index]['rate'].slice(0,-1))" ng-change="config.client.storage_tool_configs[$index]['rate'] = tem_rate + 'M'" style="text-align:left">
<div ng-messages="server[$index+'+rate'].$error" ng-if="server[$index+'+rate'].$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number no less than 1</div>
</div>
</md-input-container>
<md-input-container flex="33%">
<label>{{options['block_size']['name']}}</label>
<input id="{{$index}}+block_size&quot;" name="{{$index}}+block_size" type="number" min="1" ng-pattern="/^[1-9][0-9]*/i" ng-model="tem_block_size" required style="text-align:left" ng-init="tem_block_size = parseInt(config.client.storage_tool_configs[$index]['block_size'].slice(0,-1))" ng-change="config.client.storage_tool_configs[$index]['block_size'] = tem_block_size + 'k'">
<div ng-messages="server[$index+'+block_size'].$error" ng-if="server[$index+'+block_size'].$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number no less than 1</div>
</div>
</md-input-container>
<md-input-container flex="33%">
<label>{{options['iodepth']['name']}}</label>
<input id="{{$index}}+iodepth&quot;" name="{{$index}}+iodepth" type="number" min="1" ng-pattern="/^[1-9][0-9]*$/i" ng-model="config.client.storage_tool_configs[$index]['iodepth']" required style="text-align:left">
<div ng-messages="server[$index+'+iodepth'].$error" ng-if="server[$index+'+iodepth'].$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number no less than 1</div>
</div>
</md-input-container>
<md-input-container flex="33%" ng-if="item['mode']=='rw' || item['mode']=='randrw'">
<label>{{options['rwmixread']['name']}}</label>
<input id="{{$index}}+rwmixread&quot;" name="{{$index}}+rwmixread" type="number" min="1" max="99" ng-pattern="/^[1-9][0-9]{0,1}$/i" ng-model="config.client.storage_tool_configs[$index]['rwmixread']" required style="text-align:left">
<div ng-messages="server[$index+'+rwmixread'].$error" ng-if="server[$index+'+rwmixread'].$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number between 1 and 99</div>
</div>
</md-input-container>
<md-input-container flex="33%">
<label>{{options['runtime']['name']}}</label>
<input id="{{$index}}+runtime&quot;" name="{{$index}}+runtime" type="number" min="1" ng-pattern="/^[1-9][0-9]{0,2}$/i" ng-model="config.client.storage_tool_configs[$index]['runtime']" required style="text-align:left">
<div ng-messages="server[$index+'+runtime'].$error" ng-if="server[$index+'+runtime'].$dirty">
<div ng-message="required" style="padding-right: 0">This field is required</div>
<div ng-message="pattern" style="padding-right: 0">Must be a number between 1 and 999</div>
</div>
</md-input-container>
<md-input-container flex="33%">
<label>{{options['extra_opts']['name']}}</label>
<input id="{{$index}}+extra_opts&quot;" name="{{$index}}+extra_opts" ng-model="config.client.storage_tool_configs[$index]['extra_opts']" style="text-align:left">
</md-input-container>
</md-content>
</div>
</div>
</div>
</form>
</div>

</div>
</div>