290 lines
16 KiB
HTML
290 lines
16 KiB
HTML
<!--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">
|
||
<input type="button" value="Default/Reset" class="btn btn-default btn-sm" ng-click="getDefaultConfig()"
|
||
style="width:110px"/>
|
||
<!--<button type="submit" class="btn btn-default btn-sm" ng-click="getRunConfig()">Get Current Config</button>-->
|
||
<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>
|
||
<!--<li class="{{dash1status3}}" ng-click="setDash1Status(3)"><a href="" class="tab-link">CLIENT SIDE CONFIG-->
|
||
<!--OPTIONS</a>-->
|
||
<!--</li>-->
|
||
</ul>
|
||
</div>
|
||
<div id="dashboard_tabs" class="col-md-8">
|
||
<!--Start Dashboard Tab 1-->
|
||
<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>
|
||
|
||
<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="volume_size"
|
||
id="volume_size" ng-model="config.client.volume_size"
|
||
ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left;"/>
|
||
|
||
<div ng-messages="general.volume_size.$error" ng-if="general.volume_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>
|
||
|
||
<md-content layout-padding>
|
||
<md-input-container class="col-md-12">
|
||
<label>IO File Size (GiB)</label>
|
||
<input type="number" min="1" max="999" step="1" name="io_file_size"
|
||
id="io_file_size" ng-model="config.client.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-4">
|
||
<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-4">
|
||
<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-input-container class="col-md-4">
|
||
<label>DISK (GB)</label>
|
||
<input type="number" min="0" max="" step="" name="client_disk" id="client_disk"
|
||
ng-model="config.client.flavor.disk" ng-pattern="/^[0-9]*$/i" required
|
||
style="text-align:left;"/>
|
||
|
||
<div ng-messages="general.client_disk.$error" ng-if="general.client_disk.$dirty" 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 0</div>
|
||
</div>
|
||
</md-input-container>
|
||
</md-content>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
<!--End Dashboard Tab 1-->
|
||
<!--Start Dashboard Tab 2-->
|
||
<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 Workload <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']}}
|
||
<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" ng-if="server[$index+'+description'].$dirty">
|
||
<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" 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" 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" 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" 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" 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" 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" name="{{$index}}+extra_opts"
|
||
ng-model="config.client.storage_tool_configs[$index]['extra_opts']"
|
||
style="text-align:left;"/>
|
||
</md-input-container>
|
||
<!--<md-input-container ng-repeat="(option,result) in item" flex="33%">-->
|
||
<!--<label>{{options[option]['name']}}</label>-->
|
||
<!--<input id=$parent.$index+{{option}}"-->
|
||
<!--ng-model="config.client.storage_tool_configs[$parent.$index][option]" required-->
|
||
<!--style="text-align:left;" ng-disabled="option == 'mode'"/>-->
|
||
<!--</md-input-container>-->
|
||
</md-content>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</form>
|
||
</div>
|
||
<!--End Dashboard Tab 2-->
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|