<!--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>

          <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>
    <!--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&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" 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>


