315 lines
17 KiB
HTML
315 lines
17 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="row">
|
|
<!--<div class="col-md-2">-->
|
|
<!--<h3>{{current_mode["title"]}}</h3>-->
|
|
<!--</div>-->
|
|
|
|
<div class="col-md-9">
|
|
<!--<a class="btn btn-primary btn-xs" style="margin: 1%;" ng-repeat="mode in modes" ng-class="{active: current_index==$index}"-->
|
|
<!--ng-click="handleEvent($event, $index)">{{mode.title}}-->
|
|
<!--</a>-->
|
|
|
|
<!--<ul class="nav nav-tabs">-->
|
|
<!--<li ng-repeat="mode in modes" ng-class="{active: current_index==$index}" ng-click="handleEvent($event, $index)">-->
|
|
<!--<a href="" data-toggle="tab" aria-expanded="true">{{mode.title}}</a>-->
|
|
<!--</li>-->
|
|
<!--</ul>-->
|
|
<ul class="nav nav-tabs">
|
|
<li ng-repeat="tag in config.client.storage_tool_configs" ng-class="{active: current_index==$index}" ng-click="handleEvent($event, $index,'')">
|
|
<a data-toggle="tab" aria-expanded="true">
|
|
{{tag.description}} <span class="{{modes[tag.mode]['span']}}"></span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
|
|
</div>
|
|
|
|
<div class="col-md-3">
|
|
<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 class="">
|
|
<!--Staging-->
|
|
<accordion close-others="oneAtATime">
|
|
<accordion-group heading="" is-open="status1.open">
|
|
<accordion-heading>
|
|
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">
|
|
|
|
<md-content layout-padding style="padding:0">
|
|
<md-input-container class="col-md-12">
|
|
<label>Max VM</label>
|
|
<input type="number" min="1" max="999" step="1" id="storage_stage_configs_vm_count"
|
|
ng-model="config.client.storage_stage_configs.vm_count" name="storage_stage_configs_vm_count"
|
|
ng-pattern="/^[1-9][0-9]{0,2}$/i" required style="text-align:left;"/>
|
|
|
|
<div ng-messages="interactive_staging_settings.storage_stage_configs_vm_count.$error"
|
|
ng-if="interactive_staging_settings.storage_stage_configs_vm_count.$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>
|
|
<!--Run-->
|
|
<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>
|
|
<!--<br/>-->
|
|
|
|
<md-content layout-padding style="padding:0">
|
|
<!--<md-input-container class="col-md-12" style="padding-top:0">-->
|
|
<!--<label>VM Count Start</label>-->
|
|
<!--<input type="number" min="1" step="1" id="client_progression_vm_start"-->
|
|
<!--ng-model="config.client.progression.vm_start"-->
|
|
<!--ng-disabled="!config.client.progression.enabled" name="client_progression_vm_start"-->
|
|
<!--ng-pattern="/^[1-9][0-9]*$/i" required style="text-align:left;"/>-->
|
|
|
|
<!--<div ng-messages="interactive_progression_settings.client_progression_vm_start.$error"-->
|
|
<!--ng-if="interactive_progression_settings.client_progression_vm_start.$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>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 Limit (%)</label>
|
|
<input type="number" min="1" step="1" id="client_progression_storage_stop_limit"
|
|
ng-model="config.client.progression.storage_stop_limit"
|
|
ng-disabled="!config.client.progression.enabled" name="client_progression_http_stop_limit"
|
|
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>
|
|
|
|
|
|
<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>
|
|
</md-content>
|
|
|
|
</form>
|
|
</div>
|
|
<!--Run-->
|
|
</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 class="bar"></span>-->
|
|
<!--<span class="bar"></span>-->
|
|
<!--<span class="bar"></span>-->
|
|
<span id="littleglyph" class="bar glyphicon glyphicon-triangle-right" style="color:white"></span>
|
|
</a>
|
|
|
|
<div class="content" id="content">
|
|
<div class="row">
|
|
<div class="my-chart" style="">
|
|
|
|
<!--<ul class="nav nav-pills" ng-style="{height:current_mode_name =='rw' || current_mode_name =='randrw'?'':0, width:current_mode_name =='rw' || current_mode_name =='randrw'?'':0}">-->
|
|
<!--<li ng-show="current_mode_name =='rw' || current_mode_name =='randrw'" ng-class="{active:current_mode['name']=='read' || current_mode['name']=='randread'}">-->
|
|
<!--<a ng-click="handleEvent($event, current_index,'read')">Read</a>-->
|
|
<!--</li>-->
|
|
<!--<li ng-show="current_mode_name =='rw' || current_mode_name =='randrw'" ng-class="{active:current_mode['name']=='write' || current_mode['name']=='randwrite'}">-->
|
|
<!--<a ng-click="handleEvent($event, current_index,'write')">Write</a>-->
|
|
<!--</li>-->
|
|
<!--</ul>-->
|
|
|
|
<ul class="nav nav-tabs" ng-style="{height:current_mode_name =='rw' || current_mode_name =='randrw'?'':0, width:current_mode_name =='rw' || current_mode_name =='randrw'?'':0}">
|
|
<li ng-show="current_mode_name =='rw' || current_mode_name =='randrw'" ng-class="{active:current_mode['name']=='read' || current_mode['name']=='randread'}">
|
|
<a ng-click="handleEvent($event, current_index,'read')">Read</a>
|
|
</li>
|
|
<li ng-show="current_mode_name =='rw' || current_mode_name =='randrw'" ng-class="{active:current_mode['name']=='write' || current_mode['name']=='randwrite'}">
|
|
<a ng-click="handleEvent($event, current_index,'write')">Write</a>
|
|
</li>
|
|
</ul>
|
|
|
|
<!--<div>-->
|
|
<!--<a style="text-decoration: none;cursor: pointer;color:black"-->
|
|
<!--ng-show="current_mode['name']!=current_mode_name && current_mode_name =='rw'" ng-style="current_mode['name']=='read'?{'font-weight':'bold'}:{};">| Read </a>-->
|
|
<!--<a style="text-decoration: none;cursor: pointer;color:black" ng-click="handleEvent($event, current_index,'write')"-->
|
|
<!--ng-show="current_mode['name']!=current_mode_name && current_mode_name =='rw'" ng-style="current_mode['name']=='write'?{'font-weight':'bold'}:{};">| Write |</a>-->
|
|
|
|
<!--<a style="text-decoration: none;cursor: pointer;color:black" ng-click="handleEvent($event, current_index,'read')"-->
|
|
<!--ng-show="current_mode['name']!=current_mode_name && current_mode_name =='randrw'" ng-style="current_mode['name']=='randread'?{'font-weight':'bold'}:{};">| Read </a>-->
|
|
<!--<a style="text-decoration: none;cursor: pointer;color:black" ng-click="handleEvent($event, current_index,'write')"-->
|
|
<!--ng-show="current_mode['name']!=current_mode_name && current_mode_name =='randrw'" ng-style="current_mode['name']=='randwrite'?{'font-weight':'bold'}:{};">| Write |</a>-->
|
|
<!--</div>-->
|
|
|
|
<h4 style="text-align: center">{{modes[current_mode_name]['title']}} {{current_title}} ({{current_mode_description}})</h4>
|
|
|
|
<h6 style="margin-bottom:0"><span>{{current_mode["y_axis"]}}</span><span
|
|
style="float:right">Latency(ms)</span></h6>
|
|
<linechart data="data" options="options" height="500"></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">
|
|
<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;">-->
|
|
<!--<button class="btn btn-default btn-xs {{row.seq}}" ng-click=""-->
|
|
<!--style="height: 22px;width: 24px;"></button>-->
|
|
<!--</td>-->
|
|
<!--<td title="cols[1].title" data-sortable="cols[1].field">{{row.mode}}</td>-->
|
|
<td title="cols[2].title" data-sortable="cols[2].field">{{row.total_client_vms}}</td>
|
|
<td title="cols[3].title" data-sortable="cols[3].field">{{row.block_size}}b</td>
|
|
<td title="cols[4].title" data-sortable="cols[4].field">{{row.iodepth}}</td>
|
|
<td title="cols[5].title" data-sortable="cols[5].field" ng-if="current_mode.group[0] == 'rand'">
|
|
{{row.rate_iops}}
|
|
</td>
|
|
<td title="cols[6].title" data-sortable="cols[6].field" ng-if="current_mode.group[1] == 'read'">
|
|
{{row.read_iops}}
|
|
</td>
|
|
<td title="cols[7].title" data-sortable="cols[7].field" ng-if="current_mode.group[1] == 'write'">
|
|
{{row.write_iops}}
|
|
</td>
|
|
<td title="cols[8].title" data-sortable="cols[8].field" ng-if="current_mode.group[0] == 'seq'">
|
|
{{row.rate}} KB/s
|
|
</td>
|
|
<td title="cols[9].title" data-sortable="cols[9].field" ng-if="current_mode.group[1] == 'read'">
|
|
{{row.read_bw}} KB/s
|
|
</td>
|
|
<td title="cols[10].title" data-sortable="cols[10].field" ng-if="current_mode.group[1] == 'write'">
|
|
{{row.write_bw}} KB/s
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<h6 style="margin-bottom: 3%"> </h6>
|
|
|
|
<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;">
|
|
<!--Status:-->
|
|
<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
|
|
<!--<button class="btn btn-primary btn-xs" ng-click="checkStatus()" style="height:24px;">{{server_vm_count}}-->
|
|
<!--</button>-->
|
|
<!-- Server VM(s), -->
|
|
<button class="btn btn-primary btn-xs" ng-click="checkStatus()" style="height:24px;">{{client_vm_count}}
|
|
</button>
|
|
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>
|
|
|
|
<!--sessionID: <button class="btn btn-info btn-xs" disabled>{{sessionID}}</button>-->
|
|
<!--<button style="float:right;" type="submit" class="btn btn-default btn-xs" ng-click="deleteSession()" popover="Session can be destroyed only if it is at READY." popover-trigger="mouseenter">Del Ses</button>-->
|
|
</h5>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|