<!--
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">
</div>
</div>
<br>
<div class="row-fluid" id="stagingConfig2">
<div id="dashboard_links" class="col-md-3">
<ul class="nav nav-pills nav-stacked">
<li class="{{dashstatus1}}" ng-click="setDashStatus(1)"><a href="" class="tab-link">GENERAL CONFIGURATION</a></li>
<li class="{{dashstatus2}}" ng-click="setDashStatus(2)"><a href="" class="tab-link">SERVER SIDE CONFIG OPTIONS</a>
</li>
<li class="{{dashstatus3}}" ng-click="setDashStatus(3)"><a href="" class="tab-link">CLIENT SIDE CONFIG OPTIONS</a>
</li>
</ul>
</div>
<div id="dashboard_tabs" class="col-md-8">

<div id="dashboard-general" class="row" ng-show="dashstatus1vis">
<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="1000" 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">
<div class="panel-heading">VM Placement</div>
<div class="panel-body">
<md-radio-group ng-model="availability_zone" ng-change="changeTopology()">
<md-radio-button value="1" class="md-primary">Let Nova Decide</md-radio-button>
<md-radio-button value="2" class="md-primary">Available Zone</md-radio-button>
<div class="row" ng-show="availability_zone==2;" popover="Leave empty if you prefer to have the Nova scheduler place the server VMs If you want to pick a particular AZ, put that AZ name (e.g. nova) If you want a paticular compute host, put the AZ and compute host names separated by ':' (e.g. nova:tme100) Note that this is ignored/overridden if you choose 'Use Topology'" popover-trigger="mouseenter" popover-placement="bottom">
<form name="userForm">
<div class="col-md-6">
<div layout="" layout-sm="column">
<md-input-container flex="">
<label>For Server</label>
<md-select ng-model="config.server.availability_zone">
<md-option ng-repeat="serverside in serversides" value="{{serverside}}">
{{serverside}}
</md-option>
</md-select>
</md-input-container>
</div>
</div>
<div class="col-md-6">
<div layout="" layout-sm="column">
<md-input-container flex="">
<label>For Client</label>
<md-select ng-model="config.client.availability_zone">
<md-option ng-repeat="clientside in clientsides" value="{{clientside}}">
{{clientside}}
</md-option>
</md-select>
</md-input-container>
</div>
</div>
</form>
</div>
<md-radio-button value="3" class="md-primary">Use Topology
<small> -- customized <cite title="Source Title">VM placement</cite></small>
</md-radio-button>
<div class="row" ng-show="availability_zone==3;">
<div class="col-md-3">
<div class="list-group" id="list3">
<span class="list-group-item active">Server Pool
<input title="Toggle all" ng-click="toggleC()" ng-model="toggle" type="checkbox" class="pull-right">
</span>
<span ng-repeat="user in listC">
<span class="list-group-item">{{user.firstName}}
<input ng-click="selectC(user.id)" name="selectedC[]" value="{{user.id}}" ng-checked="selectedC.indexOf(user.id) > -1" type="checkbox" class="pull-right">
</span>
</span>
</div>
</div>
<div class="col-md-1 v-center text-center">
<div class="btn-group-sm">
<button title="Send to list 1" class="btn btn-default btn-sm" ng-click="cToA()" style="margin:10px 0"><i class="glyphicon glyphicon-chevron-right"></i></button>
<button title="Send to list 3" class="btn btn-default btn-sm" ng-click="aToC()"><i class="glyphicon glyphicon-chevron-left"></i></button>
</div>
</div>
<div class="col-md-4">
<div class="list-group" id="list1">
<span class="list-group-item active">Available Hypervisors
<input title="Toggle all" ng-click="toggleA()" ng-model="toggle" type="checkbox" class="pull-right">
</span>
<span ng-repeat="user in listA">
<span class="list-group-item">{{user.firstName}}
<input ng-click="selectA(user.id)" name="selectedA[]" value="{{user.id}}" ng-checked="selectedA.indexOf(user.id) > -1" type="checkbox" class="pull-right">
</span>
</span>
</div>
</div>
<div class="col-md-1 v-center text-center" style="margin:0px 0px">
<div class="btn-group-sm">
<button title="Send to list 1" class="btn btn-default btn-sm" ng-click="bToA()" style="margin:10px 0"><i class="glyphicon glyphicon-chevron-left"></i></button>
<button title="Send to list 2" class="btn btn-default btn-sm" ng-click="aToB()"><i class="glyphicon glyphicon-chevron-right"></i></button>
</div>
</div>
<div class="col-md-3">
<div class="list-group" id="list2">
<span class="list-group-item active">Client Pool
<input title="Toggle all" ng-click="toggleB()" ng-model="toggle" type="checkbox" class="pull-right">
</span>
<span ng-repeat="user in listB">
<span class="list-group-item">{{user.firstName}}
<input ng-click="selectB(user.id)" name="selectedB[]" value="{{user.id}}" ng-checked="selectedB.indexOf(user.id) > -1" type="checkbox" class="pull-right">
</span>
</span>
</div>
</div>
<div class="col-md-12" style="text-align: right">
<small><cite title="Source Title">Set hypervisors for both sides!</cite></small>
</div>
</div>
</md-radio-group>
</div>
</div>
</div>
</form>
</div>


<div id="dashboard-server" class="row" ng-show="dashstatus2vis">
<h4 class="page-header" style="margin-top: 5px">SERVER SIDE CONFIG OPTIONS</h4>
<form name="server">
<div class="form-group">
<md-content layout-padding>
<md-input-container class="col-md-12">
<label>Html Payload Size (Bytes)</label>
<input type="number" min="0" step="1024" name="http_server_configs" id="html_size" ng-model="config.server.http_server_configs.html_size" ng-pattern="/^[0-9]*$/i" required style="text-align:left">
<div ng-messages="server.http_server_configs.$error" ng-if="server.http_server_configs.$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">
<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="server_vcpus" id="server_vcpus" ng-model="config.server.flavor.vcpus" ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left">
<div ng-messages="server.server_vcpus.$error" ng-if="server.server_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="server_ram" id="server_ram" ng-model="config.server.flavor.ram" ng-pattern="/^[0-9]*$/i" required style="text-align:left">
<div ng-messages="server.server_ram.$error" ng-if="server.server_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</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_size1">
<md-radio-button value="0" ng-click="config.server.flavor.disk=20" 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_size1==1" ng-init="config.server.flavor.disk==0?config.server.flavor.disk=20:''">
<md-input-container class="col-md-6">
<label>Root Disk Size (GB)</label>
<input type="number" min="1" max="" step="" name="server_disk" id="server_disk" ng-model="config.server.flavor.disk" ng-pattern="/^[1-9][0-9]*$/i" required style="text-align:left">
<div ng-messages="server.server_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-client" class="row" ng-show="dashstatus3vis">
<h4 class="page-header" style="margin-top: 5px">CLIENT SIDE CONFIG OPTIONS</h4>
<form name="client">
<div class="form-group">
<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="client.client_vcpus.$error" ng-if="client.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="client.client_ram.$error" ng-if="client.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_size2">
<md-radio-button value="0" ng-click="config.client.flavor.disk=20" 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_size2==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="client.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>
</div>
