| <!-- |
| Licensed to the Apache Software Foundation (ASF) under one |
| or more contributor license agreements. See the NOTICE file |
| distributed with this work for additional information |
| regarding copyright ownership. The ASF licenses this file |
| to you 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. |
| --> |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" |
| "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| <head> |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> |
| <title></title> |
| <link rel="shortcut icon" href="images/cloud.ico" /> |
| <link type="text/css" rel="stylesheet" href="lib/reset.css"/> |
| <link type="text/css" rel="stylesheet" href="css/cloudstack3.css" /> |
| <link type="text/css" rel="stylesheet" href="css/token-input-facebook.css" /> |
| <!--[if IE 7]> |
| <link type="text/css" rel="stylesheet" href="css/cloudstack3-ie7.css" /> |
| <![endif]--> |
| <link type="text/css" rel="stylesheet" href="css/custom.css" /> |
| </head> |
| <body> |
| <!-- CloudStack widget content --> |
| <div id="cloudStack3-container"></div> |
| <!-- Templates --> |
| <div id="template"> |
| <!-- Login form --> |
| <div class="login"> |
| <form> |
| <div class="logo"></div> |
| <div class="fields"> |
| <div id="login-dropdown"> |
| <select id="login-options" style="width: 260px"> |
| </select> |
| </div> |
| |
| <div id="cloudstack-login"> |
| <!-- User name --> |
| <div class="field username"> |
| <label for="username"><translate key="label.username"/></label> |
| <input type="text" name="username" class="required" /> |
| </div> |
| <!-- Password --> |
| <div class="field password"> |
| <label for="password"><translate key="label.password"/></label> |
| <input type="password" name="password" class="required" autocomplete="off" /> |
| </div> |
| <!-- Domain --> |
| <div class="field domain"> |
| <label for="domain"><translate key="label.domain"/></label> |
| <input type="text" name="domain" /> |
| </div> |
| </div> |
| |
| <div id="login-submit"> |
| <!-- Submit (login) --> |
| <input id="login-submit" type="submit" tr="label.login" trf='value' value="label.login" /> |
| </div> |
| <!-- Select language --> |
| <div class="select-language"> |
| <select name="language" id="l10n-options"> |
| <option value=""></option> <!-- when this blank option is selected, default language of the browser will be used --> |
| </select> |
| </div> |
| </div> |
| </form> |
| </div> |
| <!-- Instance wizard --> |
| <div class="multi-wizard instance-wizard"> |
| <div class="progress"> |
| <ul> |
| <li class="first"><span class="number">1</span><span><translate key="label.setup"/></span><span class="arrow"></span></li> |
| <li><span class="number">2</span><span class="multiline"><translate key="label.select.a.template"/></span><span class="arrow"></span></li> |
| <li><span class="number">3</span><span class="multiline"><translate key="label.compute.offering"/></span><span class="arrow"></span></li> |
| <li><span class="number">4</span><span class="multiline"><translate key="label.disk.offering"/></span><span class="arrow"></span></li> |
| <li><span class="number">5</span><span><translate key="label.affinity"/></span><span class="arrow"></span></li> |
| <li><span class="number">6</span><span><translate key="label.menu.network"/></span><span class="arrow"></span></li> |
| <li><span class="number">7</span><span><translate key="label.menu.sshkeypair"/></span><span class="arrow"></span></li> |
| <li class="last"><span class="number">8</span><span><translate key="label.review"/></span></li> |
| </ul> |
| </div> |
| <form> |
| <div class="steps"> |
| <!-- Step 1: Setup --> |
| <div class="step setup" wizard-step-id="setup"> |
| <div class="content"> |
| <!-- Select a zone --> |
| <div class="section select-zone"> |
| <h3><translate key="label.select.a.zone"/></h3> |
| <p><translate key="message.select.a.zone"/></p> |
| <div class="select-area"> |
| <div class="desc"></div> |
| <select name="zoneid" class="required"> |
| </select> |
| </div> |
| </div> |
| <!-- Select template --> |
| <div class="section select-template"> |
| <h3><translate key="label.select.iso.or.template" /></h3> |
| <p></p> |
| <div class="select-area"> |
| <div class="desc"><translate key="message.template.desc"/></div> |
| <input type="radio" name="select-template" value="select-template" /> |
| <label><translate key="label.template"/></label> |
| </div> |
| <div class="select-area"> |
| <div class="desc"><translate key="message.iso.desc"/></div> |
| <input type="radio" name="select-template" value="select-iso" /> |
| <label>ISO</label> |
| </div> |
| </div> |
| </div> |
| </div> |
| <!-- Step 2: Select ISO --> |
| <div class="step select-iso" wizard-step-id="select-iso"> |
| <!-- Select template --> |
| <div class="wizard-step-conditional select-template"> |
| <div class="main-desc"> |
| <p><translate key="message.select.template"/></p> |
| </div> |
| <div class="template-select content tab-view"> |
| <ul> |
| <li class="first"><a href="#instance-wizard-featured-templates"><translate key="label.featured"/></a></li> |
| <li><a href="#instance-wizard-community-templates"><translate key="label.community"/></a></li> |
| <li><a href="#instance-wizard-my-templates"><translate key="label.my.templates"/></a></li> |
| <li class="last"><a href="#instance-wizard-shared-templates"><translate key="label.shared"/></a></li> |
| </ul> |
| |
| <!-- Used for Select Template only --> |
| <input type="hidden" wizard-field="hypervisor" name="hypervisor" value="" disabled="disabled"/> |
| |
| <div id="instance-wizard-featured-templates"> |
| <div class="select-container"> |
| </div> |
| </div> |
| <div id="instance-wizard-community-templates"> |
| <div class="select-container"> |
| </div> |
| </div> |
| <div id="instance-wizard-my-templates"> |
| <div class="select-container"> |
| </div> |
| </div> |
| <div id="instance-wizard-shared-templates"> |
| <div class="select-container"> |
| </div> |
| </div> |
| |
| <!-- Root disk size --> |
| <div class="section custom-size"> |
| <label><translate key="label.root.disk.size"/></label> |
| <input type="text" name="rootDiskSize" /> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Select ISO --> |
| <div class="wizard-step-conditional select-iso"> |
| <div class="main-desc"> |
| <p><translate key="message.select.iso"/></p> |
| </div> |
| <div class="iso-select content tab-view"> |
| <ul> |
| <li class="first"><a href="#instance-wizard-featured-isos"><translate key="label.featured"/></a></li> |
| <li><a href="#instance-wizard-community-isos"><translate key="label.community"/></a></li> |
| <li><a href="#instance-wizard-my-isos"><translate key="label.menu.my.isos"/></a></li> |
| <li class="last"><a href="#instance-wizard-shared-isos"><translate key="label.shared"/></a></li> |
| </ul> |
| <div id="instance-wizard-featured-isos"> |
| <div class="select-container"> |
| </div> |
| </div> |
| <div id="instance-wizard-community-isos"> |
| <div class="select-container"> |
| </div> |
| </div> |
| <div id="instance-wizard-my-isos"> |
| <div class="select-container"> |
| </div> |
| </div> |
| <div id="instance-wizard-shared-isos"> |
| <div class="select-container"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Step 3: Service Offering --> |
| <div class="step service-offering" wizard-step-id="service-offering"> |
| <div class="content"> |
| <div class="select-container"> |
| </div> |
| |
| <!-- Custom size slider --> |
| <div class="section custom-size"> |
| <div class="field"> |
| <label><translate key="label.num.cpu.cores"/></label> |
| <input type="text" class="required disallowSpecialCharacters" name="compute-cpu-cores" /> |
| </div> |
| <div class="field"> |
| <label><translate key="label.cpu.mhz"/></label> |
| <input type="text" class="required disallowSpecialCharacters" name="compute-cpu" /> |
| </div> |
| <div class="field"> |
| <label><translate key="label.memory.mb"/></label> |
| <input type="text" class="required disallowSpecialCharacters" name="compute-memory" /> |
| </div> |
| </div> |
| |
| <!-- Custom iops --> |
| <div class="section custom-iops"> |
| <div class="field"> |
| <label><translate key="label.disk.iops.min"/></label> |
| <input type="text" class="disallowSpecialCharacters" name="disk-min-iops" /> |
| </div> |
| <div class="field"> |
| <label><translate key="label.disk.iops.max"/></label> |
| <input type="text" class="disallowSpecialCharacters" name="disk-max-iops" /> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Step 4: Data Disk Offering --> |
| <div class="step data-disk-offering" wizard-step-id="data-disk-offering"> |
| <div class="content"> |
| <div class="section no-thanks"> |
| <input type="radio" name="diskofferingid" value="0" /> |
| <label><translate key="label.no.thanks"/></label> |
| </div> |
| |
| <!-- Existing offerings --> |
| <div class="select-container"> |
| </div> |
| |
| <!-- Custom size slider --> |
| <div class="section custom-size custom-disk-size"> |
| <label><translate key="label.disk.size"/></label> |
| |
| <!-- Slider --> |
| <label class="size min"><span></span> GB</label> |
| <div class="slider custom-size"></div> |
| <label class="size max"><span></span> GB</label> |
| |
| <input type="text" class="required digits" name="size" value="1" /> |
| <label class="size">GB</label> |
| </div> |
| |
| <!-- Custom iops --> |
| <div class="section custom-iops-do"> |
| <div class="field"> |
| <label><translate key="label.disk.iops.min"/></label> |
| <input type="text" class="disallowSpecialCharacters" name="disk-min-iops-do" /> |
| </div> |
| <div class="field"> |
| <label><translate key="label.disk.iops.max"/></label> |
| <input type="text" class="disallowSpecialCharacters" name="disk-max-iops-do" /> |
| </div> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Step 5: Affinity groups --> |
| <div class="step affinity" wizard-step-id="affinity"> |
| <div class="content"> |
| <!-- Existing offerings --> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| |
| <!-- Step 6: Network --> |
| <div class="step network always-load" wizard-step-id="network"> |
| <!-- 5a: Network description --> |
| <div class="wizard-step-conditional nothing-to-select"> |
| <p id="from_instance_page_1"><translate key="message.zone.no.network.selection"/></p> |
| <p id="from_instance_page_2"><translate key="message.please.proceed"/></p> |
| <p id="from_vpc_tier"> |
| <div class="specify-ip"> |
| <label> |
| <translate key="label.ip.address"/> |
| (<translate key="label.optional"/>): |
| </label> |
| <input type="text" name="vpc-specify-ip" /> |
| </div> |
| </p> |
| </div> |
| |
| <!-- 5b: Select network --> |
| <div class="wizard-step-conditional select-network"> |
| <div class="content"> |
| <div class="main-desc"> |
| <translate key="message.please.select.networks"/> |
| </div> |
| <div class="select-vpc"> |
| <label>VPC:</label> |
| <select name="vpc-filter"> |
| <option value="-1">No VPC</option> |
| </select> |
| </div> |
| <div class="select my-networks"> |
| <table> |
| <thead> |
| <tr> |
| <th><translate key="label.networks"/></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td> |
| <div class="select-container"> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| <div class="select new-network"> |
| <table> |
| <thead> |
| <tr> |
| <th><translate key="label.add.network"/></th> |
| </tr> |
| </thead> |
| <tbody> |
| <tr> |
| <td> |
| <div class="select-container fixed"> |
| <div class="select even"> |
| <input type="checkbox" name="new-network" |
| wizard-field="my-networks" |
| value="create-new-network" |
| checked="checked" /> |
| <!-- Default (NEW) --> |
| <div class="select-desc hide-if-selected"> |
| <div class="name"><translate key="label.new"/></div> |
| </div> |
| |
| <!-- Name --> |
| <div class="field name hide-if-unselected"> |
| <div class="name"> <span class="field-required">*</span> <translate key="label.name"/></div> |
| <div class="value"> |
| <input type="text" class="required disallowSpecialCharacters" name="new-network-name" /> |
| </div> |
| </div> |
| |
| <!-- Service offering --> |
| <div class="select-desc field service-offering hide-if-unselected"> |
| <div class="name"><translate key="label.network.offering"/></div> |
| <div class="desc"> |
| <select name="new-network-networkofferingid"> |
| </select> |
| </div> |
| </div> |
| |
| <div class="secondary-input hide-if-unselected"> |
| <input type="radio" name="defaultNetwork" value="new-network" wizard-field="default-network" /> |
| <div class="name"><translate key="label.default"/></div> |
| </div> |
| </div> |
| </div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| <!-- Step 5c: Select security group --> |
| <div class="wizard-step-conditional select-security-group"> |
| <div class="main-desc"> |
| <translate key="message.select.security.groups"/> |
| </div> |
| <div class="content security-groups"> |
| <div class="select-container"> |
| </div> |
| </div> |
| </div> |
| </div> |
| <!-- Step 7: SSH Key pairs --> |
| <div class="step sshkeyPairs" wizard-step-id="sshkeyPairs"> |
| <div class="content"> |
| <div class="section no-thanks"> |
| <input type="radio" name="sshkeypair" value="" /> |
| <label><translate key="label.no.thanks"/></label> |
| </div> |
| <!-- Existing key pairs --> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 8: Review --> |
| <div class="step review" wizard-step-id="review"> |
| <div class="main-desc"> |
| <translate key="message.vm.review.launch"/> |
| </div> |
| <div class="content"> |
| <div class="select-container"> |
| <!-- Name --> |
| <div class="select odd vm-instance-name"> |
| <div class="name"> |
| <span><translate key="label.name"/> (<translate key="label.optional"/>)</span> |
| </div> |
| <div class="value"> |
| <input type="text" name="displayname" class="disallowSpecialCharacters" /> |
| </div> |
| </div> |
| <!-- Add to group --> |
| <div class="select"> |
| <div class="name"> |
| <span><translate key="label.add.to.group"/> (<translate key="label.optional"/>)</span> |
| </div> |
| <div class="value"> |
| <input type="text" name="groupname" class="disallowSpecialCharacters" /> |
| </div> |
| </div> |
| |
| <!-- Keyboard Language --> |
| <div class="select odd"> |
| <div class="name"> |
| <span><translate key="label.keyboard.language" /></span> |
| </div> |
| <div class="value"> |
| <select name="keyboardLanguage" id="keyboard-options"> |
| <option value=""></option> |
| </select> |
| </div> |
| </div> |
| |
| <!-- Zone --> |
| <div class="select"> |
| <div class="name"> |
| <span><translate key="label.zone"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="zone"></span> |
| </div> |
| <div class="edit"> |
| <a href="1"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| <!-- Hypervisor --> |
| <div class="select odd"> |
| <div class="name"> |
| <span><translate key="label.hypervisor"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="hypervisor"></span> |
| </div> |
| <div class="edit"> |
| <a href="2"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| <!-- Template --> |
| <div class="select"> |
| <div class="name"> |
| <span><translate key="label.template"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="template"></span> |
| </div> |
| <div class="edit"> |
| <a href="2"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| <!-- Service offering --> |
| <div class="select odd"> |
| <div class="name"> |
| <span><translate key="label.compute.offering"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="service-offering"></span> |
| </div> |
| <div class="edit"> |
| <a href="3"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| <!-- Disk offering --> |
| <div class="select"> |
| <div class="name"> |
| <span><translate key="label.disk.offering"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="disk-offering"></span> |
| </div> |
| <div class="edit"> |
| <a href="4"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| |
| <!-- Affinity --> |
| <div class="select"> |
| <div class="name"> |
| <span><translate key="label.affinity.groups"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="affinity-groups"></span> |
| </div> |
| <div class="edit"> |
| <a href="5"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| |
| <!-- Primary network --> |
| <div class="select odd"> |
| <div class="name"> |
| <span><translate key="label.network"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="default-network" conditional-field="select-network"></span> |
| </div> |
| <div class="edit"> |
| <a href="6"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| |
| <!-- Security groups --> |
| <div class="select odd"> |
| <div class="name"> |
| <span><translate key="label.security.groups"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="security-groups" conditional-field="select-security-group"></span> |
| </div> |
| <div class="edit"> |
| <a href="6"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| |
| <!-- SSH Key Pairs --> |
| <div class="select"> |
| <div class="name"> |
| <span><translate key="label.ssh.key.pairs"/></span> |
| </div> |
| <div class="value"> |
| <span wizard-field="sshkey-pairs"></span> |
| </div> |
| <div class="edit"> |
| <a href="7"><translate key="label.edit"/></a> |
| </div> |
| </div> |
| |
| <!-- userdata --> |
| <div class="select"> |
| <div class="name"> |
| <span><translate key="label.add.userdata"/> (<translate key="label.optional"/>)</span> |
| </div> |
| <div class="value"> |
| <textarea name="userdata" class="disallowSpecialCharacters"></textarea> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </form> |
| <!-- Computer diagram --> |
| <div class="diagram"> |
| <div> |
| <div class="part zone-plane"></div> |
| <div class="part computer-tower-front"></div> |
| <div class="part computer-tower-back"></div> |
| </div> |
| <div class="part os-drive"></div> |
| <div class="part cpu"></div> |
| <div class="part hd"></div> |
| <div class="part network-card"></div> |
| </div> |
| <!-- Buttons --> |
| <div class="buttons"> |
| <div class="button previous"><span><translate key="label.previous"/></span></div> |
| <div class="button cancel"><span><translate key="label.cancel"/></span></div> |
| <div class="button next"><span><translate key="label.next"/></span></div> |
| </div> |
| </div> |
| <!-- Accounts wizard --> |
| <div class="multi-wizard accounts-wizard"> |
| <form> |
| <div class="steps"> |
| <div class="content ldap-account-choice"> |
| <div class="select-container"> |
| <table> |
| <thead> |
| <tr> |
| <th><translate key="label.select"/></th> |
| <th><translate key="label.name"/></th> |
| <th><translate key="label.username"/></th> |
| <th><translate key="label.email"/></th> |
| </tr> |
| </thead> |
| <tbody> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| <div class="content input-area"> |
| <div class="select-container manual-account-details"> |
| </div> |
| </div> |
| </div> |
| </form> |
| <div class="buttons"> |
| <button class="cancel ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span><translate key="label.cancel"/></span></button> |
| <button class="next ok ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only"><span><translate key="label.add"/></span></button> |
| </div> |
| </div> |
| <!-- Zone wizard --> |
| <div class="multi-wizard zone-wizard"> |
| <div class="progress"> |
| <ul> |
| <li class="first"><span class="number">1</span><span><translate key="label.zone.type"/></span><span class="arrow"></span></li> |
| <li><span class="number">2</span><span><translate key="label.setup.zone"/></span><span class="arrow"></span></li> |
| <li><span class="number">3</span><span><translate key="label.setup.network"/></span><span class="arrow"></span></li> |
| <li style="display:none;"></li> |
| <li style="display:none;"></li> |
| <li style="display:none;"></li> |
| <li style="display:none;"></li> |
| <li><span class="number">4</span><span><translate key="label.add.resources"/></span><span class="arrow"></span></li> |
| <li style="display:none;"></li> |
| <li style="display:none;"></li> |
| <li style="display:none;"></li> |
| <li class="last"><span class="number">5</span><span><translate key="label.launch"/></span></li> |
| </ul> |
| </div> |
| <div class="steps"> |
| <!-- Step 1: Select network --> |
| <div class="select-network" zone-wizard-step-id="selectZoneType"> |
| <form> |
| <div class="content"> |
| <!-- Select template --> |
| <div class="section select-network-model"> |
| <h3><translate key="label.set.up.zone.type"/></h3> |
| <p><translate key="message.please.select.a.configuration.for.your.zone"/></p> |
| <div class="select-area basic-zone"> |
| <div class="desc"> |
| <translate key="message.desc.basic.zone"/> |
| </div> |
| <input type="radio" name="network-model" value="Basic" checked="checked" /> |
| <label><translate key="label.basic"/></label> |
| </div> |
| <div class="select-area advanced-zone disabled"> |
| <div class="desc"> |
| <translate key="message.desc.advanced.zone"/> |
| </div> |
| <input type="radio" name="network-model" value="Advanced" /> |
| <label><translate key="label.advanced"/></label> |
| <!-- Isolation mode --> |
| <div class="isolation-mode"> |
| <div class="title"> |
| <translate key="label.isolation.mode"/> |
| </div> |
| |
| <!-- Security groups --> |
| <div class="select-area"> |
| <div class="desc"> |
| <translate key="message.advanced.security.group"/> |
| </div> |
| <input type="checkbox" name="zone-advanced-sg-enabled" disabled="disabled" /> |
| <label><translate key="label.menu.security.groups"/></label> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </form> |
| </div> |
| <!-- Step 2: Add zone --> |
| <div class="setup-zone" zone-wizard-form="zone" |
| zone-wizard-step-id="addZone"> |
| <div class="info-desc"> |
| <translate key="message.desc.zone"/> |
| </div> |
| <div class="content input-area"> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 3.1: Setup Physical Network --> |
| <div class="setup-physical-network" |
| zone-wizard-step-id="setupPhysicalNetwork" |
| zone-wizard-prefilter="setupPhysicalNetwork"> |
| <ul class="subnav"> |
| <li class="physical-network active"><translate key="label.physical.network"/></li> |
| <li class="public-network"><translate key="label.public.traffic"/></li> |
| <li class="pod"><translate key="label.pod"/></li> |
| <li class="guest-traffic"><translate key="label.guest.traffic"/></li> |
| <li class="conditional storage-traffic"><translate key="label.storage.traffic"/></li> |
| </ul> |
| <div class="info-desc conditional advanced"> |
| <translate key="message.setup.physical.network.during.zone.creation"/> |
| </div> |
| <div class="info-desc conditional basic"> |
| <translate key="message.setup.physical.network.during.zone.creation.basic"/> |
| </div> |
| <div class="button add new-physical-network"><span class="icon"> </span><span><translate key="label.add.physical.network"/></span></div> |
| <!-- Traffic types drag area --> |
| <div class="traffic-types-drag-area"> |
| <div class="header"><translate key="label.traffic.types"/></div> |
| <ul> |
| <li class="management"> |
| <ul class="container"> |
| <li traffic-type-id="management" |
| tr="label.zoneWizard.trafficType.management" trf="title" |
| title="label.zoneWizard.trafficType.management" |
| class="traffic-type-draggable management"> |
| <!-- Edit buttton --> |
| <div class="edit-traffic-type"> |
| <span class="name"><translate key="label.management"/></span> |
| <span class="icon"> </span> |
| <span>Edit</span> |
| </div> |
| </li> |
| </ul> |
| <div class="info"> |
| <div class="title"><translate key="label.management"/></div> |
| <div class="desc"></div> |
| </div> |
| </li> |
| <li class="public"> |
| <ul class="container"> |
| <li traffic-type-id="public" |
| tr="label.zoneWizard.trafficType.public" trf="title" |
| title="label.zoneWizard.trafficType.public" |
| class="traffic-type-draggable public"> |
| <!-- Edit buttton --> |
| <div class="edit-traffic-type"> |
| <span class="name"><translate key="label.public"/></span> |
| <span class="icon"> </span> |
| <span>Edit</span> |
| </div> |
| </li> |
| </ul> |
| <div class="info"> |
| <div class="title"><translate key="label.public"/></div> |
| <div class="desc"></div> |
| </div> |
| </li> |
| <li class="guest"> |
| <ul class="container"> |
| <li traffic-type-id="guest" |
| tr="label.zoneWizard.trafficType.guest" trf="title" |
| title="label.zoneWizard.trafficType.guest" |
| class="traffic-type-draggable guest"> |
| <!-- Edit buttton --> |
| <div class="edit-traffic-type"> |
| <span class="name"><translate key="label.guest"/></span> |
| <span class="icon"> </span> |
| <span>Edit</span> |
| </div> |
| </li> |
| </ul> |
| <div class="info"> |
| <div class="title"><translate key="label.guest"/></div> |
| <div class="desc"></div> |
| </div> |
| </li> |
| <li class="storage"> |
| <ul class="container"> |
| <li traffic-type-id="storage" |
| tr="label.zoneWizard.trafficType.storage" trf="title" |
| title="label.zoneWizard.trafficType.storage" |
| class="traffic-type-draggable storage"> |
| <!-- Edit buttton --> |
| <div class="edit-traffic-type"> |
| <span class="name"><translate key="label.storage"/></span> |
| <span class="icon"> </span> |
| <span>Edit</span> |
| </div> |
| </li> |
| </ul> |
| <div class="info"> |
| <div class="title"><translate key="label.storage"/></div> |
| <div class="desc"></div> |
| </div> |
| </li> |
| </ul> |
| </div> |
| <div class="drag-helper-icon"></div> |
| <div class="content input-area"> |
| <form></form> |
| </div> |
| </div> |
| <!-- Step 3.1b: Add Netscaler device --> |
| <div class="setup-physical-network-basic" |
| zone-wizard-step-id="addNetscalerDevice" |
| zone-wizard-form="basicPhysicalNetwork" |
| zone-wizard-prefilter="addNetscalerDevice"> |
| <ul class="subnav"> |
| <li class="conditional netscaler physical-network active"><translate key="label.netScaler"/></li> |
| <li class="public-network"><translate key="label.public.traffic"/></li> |
| <li class="pod"><translate key="label.pod"/></li> |
| <li class="guest-traffic"><translate key="label.guest.traffic"/></li> |
| <li class="conditional storage-traffic"><translate key="label.storage.traffic"/></li> |
| </ul> |
| <div class="info-desc"><translate key="label.please.specify.netscaler.info"/></div> |
| <div class="content input-area"> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 3.2: Configure public traffic --> |
| <div class="setup-public-traffic" zone-wizard-prefilter="addPublicNetwork" |
| zone-wizard-step-id="configurePublicTraffic"> |
| <ul class="subnav"> |
| <li class="conditional netscaler physical-network"><translate key="label.netScaler"/></li> |
| <li class="public-network active"><translate key="label.public.traffic"/></li> |
| <li class="pod"><translate key="label.pod"/></li> |
| <li class="guest-traffic"><translate key="label.guest.traffic"/></li> |
| <li class="conditional storage-traffic"><translate key="label.storage.traffic"/></li> |
| </ul> |
| <div class="info-desc" id="add_zone_public_traffic_desc"> |
| <span id="for_basic_zone" style="display:none"><translate key="message.public.traffic.in.basic.zone"/></span> |
| <span id="for_advanced_zone" style="display:none"><translate key="message.public.traffic.in.advanced.zone"/></span> |
| </div> |
| <div ui-custom="publicTrafficIPRange"></div> |
| </div> |
| <!-- Step 3.3: Add pod --> |
| <div class="add-pod" zone-wizard-form="pod" |
| zone-wizard-step-id="addPod"> |
| <ul class="subnav"> |
| <li class="conditional netscaler physical-network"><translate key="label.netScaler"/></li> |
| <li class="public-network"><translate key="label.public.traffic"/></li> |
| <li class="pod active"><translate key="label.pod"/></li> |
| <li class="guest-traffic"><translate key="label.guest.traffic"/></li> |
| <li class="conditional storage-traffic"><translate key="label.storage.traffic"/></li> |
| </ul> |
| <div class="info-desc"> |
| <translate key="message.add.pod.during.zone.creation"/> |
| </div> |
| <div class="content input-area"> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 3.4: Configure guest traffic --> |
| <div class="setup-guest-traffic" |
| zone-wizard-form="guestTraffic" |
| zone-wizard-step-id="configureGuestTraffic" |
| zone-wizard-prefilter="configureGuestTraffic"> |
| <ul class="subnav"> |
| <li class="conditional netscaler physical-network"><translate key="label.netScaler"/></li> |
| <li class="public-network"><translate key="label.public.traffic"/></li> |
| <li class="pod"><translate key="label.pod"/></li> |
| <li class="guest-traffic active"><translate key="label.guest.traffic"/></li> |
| <li class="conditional storage-traffic"><translate key="label.storage.traffic"/></li> |
| </ul> |
| <div class="info-desc" id="add_zone_guest_traffic_desc"> |
| <span id="for_basic_zone" style="display:none"><translate key="message.guest.traffic.in.basic.zone"/></span> |
| <span id="for_advanced_zone" style="display:none"><translate key="message.guest.traffic.in.advanced.zone"/></span> |
| </div> |
| <div class="content input-area"> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 3.5: Configure storage traffic --> |
| <div class="setup-storage-traffic" zone-wizard-prefilter="configureStorageTraffic" |
| zone-wizard-step-id="configureStorageTraffic"> |
| <ul class="subnav"> |
| <li class="conditional netscaler physical-network"><translate key="label.netScaler"/></li> |
| <li class="public-network"><translate key="label.public.traffic"/></li> |
| <li class="pod"><translate key="label.pod"/><</li> |
| <li class="guest-traffic"><translate key="label.guest.traffic"/></li> |
| <li class="storage-traffic active"><translate key="label.storage.traffic"/></li> |
| </ul> |
| <div class="info-desc"> |
| <translate key="message.storage.traffic"/> |
| </div> |
| <div ui-custom="storageTrafficIPRange"></div> |
| </div> |
| <!-- Step 4.1: Add cluster --> |
| <div class="add-cluster" zone-wizard-form="cluster" |
| zone-wizard-step-id="addCluster"> |
| <ul class="subnav"> |
| <li class="cluster active"><translate key="label.cluster"/></li> |
| <li class="host"><translate key="label.host"/></li> |
| <li class="primary-storage"><translate key="label.primary.storage"/></li> |
| <li class="secondary-storage"><translate key="label.secondary.storage"/></li> |
| </ul> |
| |
| <div class="info-desc"> |
| <translate key="message.desc.cluster"/> |
| </div> |
| <div class="content input-area"> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 4.2: Add host --> |
| <div class="add-cluster" zone-wizard-form="host" |
| zone-wizard-step-id="addHost" zone-wizard-prefilter="addHost"> |
| <ul class="subnav"> |
| <li class="cluster"><translate key="label.cluster"/></li> |
| <li class="host active"><translate key="label.host"/></li> |
| <li class="primary-storage"><translate key="label.primary.storage"/></li> |
| <li class="secondary-storage"><translate key="label.secondary.storage"/></li> |
| </ul> |
| <div class="info-desc"> |
| <translate key="message.desc.host"/> |
| </div> |
| <div class="content input-area"> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 4.3: Add primary storage --> |
| <div class="add-cluster" zone-wizard-form="primaryStorage" zone-wizard-prefilter="addPrimaryStorage" |
| zone-wizard-step-id="addPrimaryStorage"> |
| <ul class="subnav"> |
| <li class="cluster"><translate key="label.cluster"/></li> |
| <li class="host"><translate key="label.host"/></li> |
| <li class="primary-storage active"><translate key="label.primary.storage"/></li> |
| <li class="secondary-storage"><translate key="label.secondary.storage"/></li> |
| </ul> |
| <div class="info-desc"> |
| <translate key="message.desc.primary.storage"/> |
| </div> |
| <div class="content input-area"> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 4.4: Add secondary storage --> |
| <div class="add-cluster" zone-wizard-form="secondaryStorage" |
| zone-wizard-step-id="addSecondaryStorage"> |
| <ul class="subnav"> |
| <li class="cluster"><translate key="label.cluster"/></li> |
| <li class="host"><translate key="label.host"/></li> |
| <li class="primary-storage"><translate key="label.primary.storage"/></li> |
| <li class="secondary-storage active"><translate key="label.secondary.storage"/></li> |
| </ul> |
| <div class="info-desc"> |
| <translate key="message.desc.secondary.storage"/> |
| </div> |
| <div class="content input-area"> |
| <div class="select-container"></div> |
| </div> |
| </div> |
| <!-- Step 5: Launch --> |
| <div class="review" zone-wizard-step-id="launch"> |
| <div class="main-desc pre-setup"><translate key="message.launch.zone"/></div> |
| <div class="main-desc launch" style="display:none;"> |
| <translate key="message.please.wait.while.zone.is.being.created"/> |
| </div> |
| <form> |
| </form> |
| <div class="launch-container" style="display: none"> |
| <ul></ul> |
| </div> |
| </div> |
| </div> |
| <!-- Buttons --> |
| <div class="buttons"> |
| <div class="button previous"><span><translate key="label.previous"/></span></div> |
| <div class="button cancel"><span><translate key="label.cancel"/></span></div> |
| <div class="button next"><span><translate key="label.next"/></span></div> |
| </div> |
| </div> |
| <!-- Network chart --> |
| <div class="network-chart normal"> |
| <ul> |
| <li class="firewall"> |
| <div class="name"><span><translate key="label.firewall"/></span></div> |
| <div class="view-details" net-target="firewall"><translate key="label.view.all"/></div> |
| </li> |
| <li class="loadBalancing"> |
| <div class="name"><span><translate key="label.load.balancing"/></span></div> |
| <div class="view-details" net-target="loadBalancing"><translate key="label.view.all"/></div> |
| </li> |
| <li class="portForwarding"> |
| <div class="name"><span><translate key="label.port.forwarding"/></span></div> |
| <div class="view-details" net-target="portForwarding"><translate key="label.view.all"/></div> |
| </li> |
| </ul> |
| </div> |
| <!-- Static NAT network chart --> |
| <div class="network-chart static-nat"> |
| <ul> |
| <li class="static-nat-enabled"> |
| <div class="name"><span><translate key="label.static.nat.enabled"/></span></div> |
| <div class="vmname"></div> |
| </li> |
| <li class="firewall"> |
| <div class="name"><span><translate key="label.firewall"/></span></div> |
| <!--<div class="view-details" net-target="staticNAT"><translate key="label.view.all"/></div>--> |
| <div class="view-details" net-target="firewall"><translate key="label.view.all" /></div> |
| </li> |
| </ul> |
| </div> |
| <!-- Project dashboard --> |
| <div class="project-dashboard-view"> |
| <div class="overview-area"> |
| <!-- Compute and storage --> |
| <div class="compute-and-storage"> |
| <div class="system-dashboard"> |
| <div class="head"> |
| <span><translate key="label.compute.and.storage"/></span> |
| </div> |
| <ul class="status_box good"> |
| <!-- Virtual Machines --> |
| <li class="block virtual-machines"> |
| <span class="header"><translate key="label.virtual.machines"/></span> |
| <div class="icon"></div> |
| <div class="overview"> |
| <!-- Running --> |
| <div class="overview-item running"> |
| <div class="total" data-item="runningInstances">5</div> |
| <div class="label"><translate key="state.Running"/></div> |
| </div> |
| |
| <!-- Stopped --> |
| <div class="overview-item stopped"> |
| <div class="total" data-item="stoppedInstances">10</div> |
| <div class="label"><translate key="state.Stopped"/></div> |
| </div> |
| </div> |
| </li> |
| |
| <!-- Storage --> |
| <li class="block storage"> |
| <span class="header"><translate key="label.storage"/></span> |
| <div class="icon"></div> |
| <div class="overview"> |
| <div class="total" data-item="totalVolumes">10</div> |
| <div class="label"><translate key="label.volumes"/></div> |
| </div> |
| </li> |
| |
| <!-- Bandwidth --> |
| <li class="block storage bandwidth"> |
| <span class="header"><translate key="label.bandwidth"/></span> |
| <div class="icon"></div> |
| <div class="overview"> |
| <div class="total" data-item="totalBandwidth">200</div> |
| <div class="label">mb/s</div> |
| </div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <!-- Users --> |
| <div class="users"> |
| <div class="system-dashboard"> |
| <div class="head"> |
| <span><translate key="label.users"/></span> |
| </div> |
| <ul class="status_box good" data-item="users"> |
| <li class="block user"> |
| <span class="header" data-list-item="account"></span> |
| <div class="icon"></div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <div class="info-boxes"> |
| <!-- Networking and security --> |
| <div class="info-box networking-and-security"> |
| <div class="title"> |
| <span><translate key="label.networking.and.security"/></span> |
| </div> |
| <ul> |
| <!-- IP addresses --> |
| <li class="odd"> |
| <div class="total"><span data-item="totalIPAddresses"></span></div> |
| <div class="desc"><translate key="label.menu.ipaddresses"/></div> |
| </li> |
| |
| <!-- Load balancing policies --> |
| <li> |
| <div class="total"><span data-item="totalLoadBalancers"></span></div> |
| <div class="desc"><translate key="label.load.balancing.policies"/></div> |
| </li> |
| |
| <!-- Port forwarding policies --> |
| <li class="odd"> |
| <div class="total"><span data-item="totalPortForwards"></span></div> |
| <div class="desc"><translate key="label.port.forwarding.policies"/></div> |
| </li> |
| |
| <!-- Blank --> |
| <li> |
| <div class="total"></div> |
| <div class="desc"></div> |
| </li> |
| |
| <!-- Manage resources --> |
| <li class="odd"> |
| <div class="total"></div> |
| <div class="desc"> |
| <div class="button manage-resources"> |
| <span><translate key="label.manage.resources"/></span> |
| <span class="arrow"></span> |
| </div> |
| </div> |
| </li> |
| </ul> |
| </div> |
| <!-- Events --> |
| <div class="info-box events"> |
| <div class="title"> |
| <span><translate key="label.menu.events"/></span> |
| <div class="button view-all"> |
| <span><translate key="label.view.all"/></span> |
| <span class="arrow"></span> |
| </div> |
| </div> |
| <ul data-item="events"> |
| <li class="odd"> |
| <div class="date"><span data-list-item="date"></span></div> |
| <div class="desc" data-list-item="desc"></div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| <!-- System dashboard --> |
| <div class="system-dashboard-view"> |
| <div class="toolbar"> |
| <div class="button refresh" id="refresh_button"> |
| <span><translate key="label.refresh"/></span> |
| </div> |
| <div id="update_ssl_button" class="button action main-action reduced-hide lock" title="Updates your SSL Certificate"> |
| <span class="icon"> </span> |
| <span><translate key="label.update.ssl.cert"/></span> |
| </div> |
| </div> |
| |
| <!-- Zone dashboard --> |
| <div class="system-dashboard zone"> |
| <div class="head"> |
| <span><translate key="label.menu.infrastructure"/></span> |
| </div> |
| <ul class="status_box good"> |
| <li class="block zones"> |
| <span class="header"><translate key="label.zones"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="zoneCount"></span> |
| <span class="button view-all zones" |
| tr="label.zones" trf="view-all-title" |
| view-all-title="label.zones" |
| view-all-target="zones"><translate key="label.view.all"/></span> |
| </li> |
| <li class="block pods"> |
| <span class="header"><translate key="label.pods"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="podCount"></span> |
| <span class="button view-all pods" |
| tr="label.pods" trf="view-all-title" |
| view-all-title="label.pods" |
| view-all-target="pods"><translate key="label.view.all"/></span> |
| </li> |
| <li class="block clusters"> |
| <span class="header"><translate key="label.clusters"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="clusterCount"></span> |
| <span class="button view-all clusters" |
| tr="label.clusters" trf="view-all-title" |
| view-all-title="label.clusters" |
| view-all-target="clusters"><translate key="label.view.all"/></span> |
| </li> |
| <li class="block last hosts"> |
| <span class="header"><translate key="label.hosts"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="hostCount"></span> |
| <span class="button view-all hosts" |
| tr="label.hosts" trf="view-all-title" |
| view-all-title="label.hosts" |
| view-all-target="hosts"><translate key="label.view.all"/></span> |
| </li> |
| <li class="block primary-storage"> |
| <span class="header"><translate key="label.primary.storage"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="primaryStorageCount"></span> |
| <span class="button view-all zones" |
| tr="label.primary.storage" trf="view-all-title" |
| view-all-title="label.primary.storage" |
| view-all-target="primaryStorage"><translate key="label.view.all"/></span> |
| </li> |
| <li class="block secondary-storage"> |
| <span class="header"><translate key="label.secondary.storage"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="secondaryStorageCount"></span> |
| <span class="button view-all pods" |
| tr="label.secondary.storage" trf="view-all-title" |
| view-all-title="label.secondary.storage" |
| view-all-target="secondaryStorage"><translate key="label.view.all"/></span> |
| </li> |
| <li class="block system-vms"> |
| <span class="header"><translate key="label.system.vms"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="systemVmCount"></span> |
| <span class="button view-all clusters" |
| tr="label.system.vms" trf="view-all-title" |
| view-all-title="label.system.vms" |
| view-all-target="systemVms"><translate key="label.view.all"/></span> |
| </li> |
| <li class="block virtual-routers"> |
| <span class="header"><translate key="label.virtual.routers"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="virtualRouterCount"></span> |
| <span class="button view-all hosts" |
| tr="label.virtual.routers" trf="view-all-title" |
| view-all-title="label.virtual.routers" |
| view-all-target="virtualRouters"><translate key="label.view.all"/></span> |
| </li> |
| <li class="block sockets"> |
| <span class="header"><translate key="label.sockets"/></span> |
| <span class="icon"> </span> |
| <span class="overview total" data-item="socketCount"></span> |
| <span class="button view-all sockets" |
| tr="label.sockets" trf="view-all-title" |
| view-all-title="label.sockets" |
| view-all-target="sockets"><translate key="label.view.all"/></span> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <!-- Zone chart --> |
| <div class="zone-chart"> |
| <!-- Side info -- Basic zone --> |
| <div class="side-info basic"> |
| <ul> |
| <li> |
| <div class="icon"><span>1</span></div> |
| <div class="title"><translate key="label.guest" /></div> |
| <p>Set up the network for traffic between end-user VMs.</p> |
| </li> |
| <li> |
| <div class="icon"><span>2</span></div> |
| <div class="title">Clusters</div> |
| <p>Define one or more clusters to group the compute hosts.</p> |
| </li> |
| <li> |
| <div class="icon"><span>3</span></div> |
| <div class="title">Hosts</div> |
| <p>Add hosts to clusters. Hosts run hypervisors and VMs.</p> |
| </li> |
| <li> |
| <div class="icon"><span>4</span></div> |
| <div class="title">Primary Storage</div> |
| <p>Add servers to store VM disk volumes in each cluster.</p> |
| </li> |
| <li> |
| <div class="icon"><span>5</span></div> |
| <div class="title">Secondary Storage</div> |
| <p>Add servers to store templates, ISOs, and snapshots for the whole zone.</p> |
| </li> |
| </ul> |
| </div> |
| |
| <!-- Side info -- Advanced zone --> |
| <div class="side-info advanced"> |
| <ul> |
| <li> |
| <div class="icon"><span>1</span></div> |
| <div class="title">Public</div> |
| <p>Set up the network for Internet traffic.</p> |
| </li> |
| <li> |
| <div class="icon"><span>2</span></div> |
| <div class="title">Guest</div> |
| <p>Set up the network for traffic between end-user VMs.</p> |
| </li> |
| <li> |
| <div class="icon"><span>3</span></div> |
| <div class="title">Clusters</div> |
| <p>Define one or more clusters to group the compute hosts.</p> |
| </li> |
| <li> |
| <div class="icon"><span>4</span></div> |
| <div class="title">Hosts</div> |
| <p>Add hosts to clusters. Hosts run hypervisors and VMs.</p> |
| </li> |
| <li> |
| <div class="icon"><span>5</span></div> |
| <div class="title">Primary Storage</div> |
| <p>Add servers to store VM disk volumes in each cluster.</p> |
| </li> |
| <li> |
| <div class="icon"><span>6</span></div> |
| <div class="title">Secondary Storage</div> |
| <p>Add servers to store templates, ISOs, and snapshots for the whole zone.</p> |
| </li> |
| </ul> |
| </div> |
| |
| <!-- NAAS configuration --> |
| <div class="resources naas"> |
| <div class="head"> |
| <span>Zone Configuration</span> |
| </div> |
| <ul class="system-main"> |
| <li class="main public" rel="public"> |
| <div class="tooltip-icon advanced"><span>1</span></div> |
| <div class="name">Public</div> |
| <div class="view-all configure">Configure</div> |
| </li> |
| <li class="main management" rel="management"> |
| <div class="name">Management</div> |
| <div class="view-all configure">Configure</div> |
| </li> |
| <li class="main guest" rel="guest"> |
| <div class="tooltip-icon advanced"><span>2</span></div> |
| <div class="tooltip-icon basic"><span>1</span></div> |
| <div class="name">Guest</div> |
| <div class="view-all configure">Configure</div> |
| </li> |
| </ul> |
| </div> |
| |
| <!-- Zone resources --> |
| <div class="resources zone"> |
| <div class="head"> |
| <div class="add" id="add_resource_button">Add Resource</div> |
| </div> |
| <ul> |
| <li class="pod"> |
| <div class="name"><span>Pods</span></div> |
| <div class="view-all" zone-target="pods">View All</div> |
| </li> |
| <li class="cluster"> |
| <div class="tooltip-icon advanced"><span>3</span></div> |
| <div class="tooltip-icon basic"><span>2</span></div> |
| <div class="name"><span>Clusters</span></div> |
| <div class="view-all" zone-target="clusters">View All</div> |
| </li> |
| <li class="host"> |
| <div class="tooltip-icon advanced"><span>4</span></div> |
| <div class="tooltip-icon basic"><span>3</span></div> |
| <div class="name"><span>Hosts</span></div> |
| <div class="view-all" zone-target="hosts">View All</div> |
| </li> |
| <li class="primary-storage"> |
| <div class="tooltip-icon advanced"><span>5</span></div> |
| <div class="tooltip-icon basic"><span>4</span></div> |
| <div class="name"><span>Primary Storage</span></div> |
| <div class="view-all" zone-target="primary-storage">View All</div> |
| </li> |
| <li class="secondary-storage"> |
| <div class="tooltip-icon advanced"><span>6</span></div> |
| <div class="tooltip-icon basic"><span>5</span></div> |
| <div class="name"><span>Secondary Storage</span></div> |
| <div class="view-all" zone-target="secondary-storage">View All</div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <!-- Admin dashboard --> |
| <div class="dashboard admin"> |
| <!-- General alerts--> |
| <div class="dashboard-container sub alerts first"> |
| <div class="top"> |
| <div class="title"><span></span></div> |
| <div class="button view-all"></div> |
| </div> |
| <ul data-item="alerts"> |
| <li class="error" concat-value="50"> |
| <div class="content"> |
| <span class="title" data-list-item="name">Alert 1</span> |
| <p data-list-item="description">Alert 1</p> |
| <p data-list-item="sent">Alert 1</p> |
| </div> |
| </li> |
| </ul> |
| </div> |
| |
| <!-- Host alerts--> |
| <div class="dashboard-container sub alerts last"> |
| <div class="top"> |
| <div class="title"><span></span></div> |
| </div> |
| <ul data-item="hostAlerts"> |
| <li class="error" concat-value="50"> |
| <div class="content"> |
| <span class="title" data-list-item="name">Alert 1</span> |
| <p data-list-item="description">Alert 1</p> |
| </div> |
| </li> |
| </ul> |
| </div> |
| <!-- Capacity / stats --> |
| <div class="dashboard-container head"> |
| <div class="top"> |
| <div class="title"> |
| <span></span> |
| </div> |
| |
| <div class="button fetch-latest"> |
| <span><translate key="label.fetch.latest"/></span> |
| </div> |
| |
| <div class="selects" style="display:none;"> |
| <div class="select"> |
| <label><translate key="label.zone"/>:</label> |
| <select> |
| </select> |
| </div> |
| <div class="select"> |
| <label><translate key="label.pods"/>:</label> |
| <select> |
| </select> |
| </div> |
| </div> |
| </div> |
| |
| <!-- Zone stat charts --> |
| <div class="zone-stats"> |
| <ul data-item="zoneCapacities"> |
| <li concat-value="25"> |
| <div class="label"> |
| <translate key="label.zone"/>: <span data-list-item="zoneName"></span> |
| </div> |
| <div class="pie-chart-container"> |
| <div class="percent-label"><span data-list-item="percent"></span>%</div> |
| <div class="pie-chart" data-list-item="percent"></div> |
| </div> |
| <div class="info"> |
| <div class="name" data-list-item="type"></div> |
| <div class="value"> |
| <span class="used" data-list-item="used"></span> |
| <span class="divider">/</span> |
| <span class="total" data-list-item="total"></span> |
| </div> |
| </div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| </div> |
| |
| <!-- User dashboard--> |
| <div class="dashboard user"> |
| <div class="vm-status"> |
| <div class="title"><span><translate key="label.virtual.machines"/></span></div> |
| |
| <div class="content"> |
| <ul> |
| <li class="running"> |
| <div class="name"><translate key="label.running.vms"/></div> |
| <div class="value" data-item="runningInstances"></div> |
| </li> |
| <li class="stopped"> |
| <div class="name"><translate key="label.stopped.vms"/></div> |
| <div class="value" data-item="stoppedInstances"></div> |
| </li> |
| <li class="total"> |
| <div class="name"><translate key="label.total.vms"/></div> |
| <div class="value" data-item="totalInstances"></div> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <div class="status-lists"> |
| <ul> |
| <li class="events"> |
| <table> |
| <thead> |
| <tr> |
| <th><translate key="label.latest.events"/> <div class="button view-all events"><translate key="label.view.all"/></div></th> |
| </tr> |
| </thead> |
| </table> |
| <div class="content"> |
| <ul data-item="events"> |
| <li data-list-item="description"> |
| <div class="title" data-list-item="type"></div> |
| <span data-list-item="description"></span> |
| </li> |
| </ul> |
| </div> |
| </li> |
| <li class="ip-addresses"> |
| <table> |
| <thead> |
| <tr> |
| <th><translate key="label.network"/> <div class="button view-all network"><translate key="label.view.all"/></div></th> |
| </tr> |
| </thead> |
| </table> |
| <table> |
| <tbody> |
| <tr> |
| <td> |
| <div class="desc"><span><translate key="label.isolated.networks"/>:</span></div> |
| <div class="value"><span data-item="netTotal"></span></div> |
| </td> |
| </tr> |
| <tr class="odd"> |
| <td> |
| <div class="desc"><span><translate key="label.public.ips"/>:</span></div> |
| <div class="value"><span data-item="ipTotal"></span></div> |
| </td> |
| </tr> |
| </tbody> |
| </table> |
| </li> |
| </ul> |
| </div> |
| </div> |
| |
| <!-- Recurring Snapshots --> |
| <div class="recurring-snapshots"> |
| <p class="desc"><translate key="label.description" /></p> |
| |
| <div class="schedule"> |
| <p>Schedule:</p> |
| |
| <div class="forms"> |
| <ul> |
| <li class="hourly"><a href="#recurring-snapshots-hourly"></a></li> |
| <li class="daily"><a href="#recurring-snapshots-daily"></a></li> |
| <li class="weekly"><a href="#recurring-snapshots-weekly"></a></li> |
| <li class="monthly"><a href="#recurring-snapshots-monthly"></a></li> |
| </ul> |
| |
| <!-- Hourly --> |
| <div id="recurring-snapshots-hourly"> |
| <form> |
| <input type="hidden" name="snapshot-type" value="hourly" /> |
| |
| <!-- Time --> |
| <div class="field time"> |
| <div class="name"></div> |
| <div class="value"> |
| <select name="schedule"></select> |
| <label for="schedule"><translate key="label.minutes.past.hour" /></label> |
| </div> |
| </div> |
| |
| <!-- Timezone --> |
| <div class="field timezone"> |
| <div class="name"></div> |
| <div class="value"> |
| <select name="timezone"> |
| </select> |
| </div> |
| </div> |
| |
| <!-- Max snapshots --> |
| <div class="field maxsnaps"> |
| <div class="name"><translate key="label.keep" /></div> |
| <div class="value"> |
| <input type="text" name="maxsnaps" class="required" /> |
| <label for="maxsnaps"><translate key="label.snapshots" /></label> |
| </div> |
| </div> |
| </form> |
| </div> |
| |
| <!-- Daily --> |
| <div id="recurring-snapshots-daily"> |
| <form> |
| <input type="hidden" name="snapshot-type" value="daily" /> |
| |
| <!-- Time --> |
| <div class="field time"> |
| <div class="name"><translate key="label.time" /></div> |
| <div class="value"> |
| <select name="time-hour"></select> |
| <select name="time-minute"></select> |
| <select name="time-meridiem"></select> |
| </div> |
| </div> |
| |
| <!-- Timezone --> |
| <div class="field timezone"> |
| <div class="name"><translate key="label.time.zone" /></div> |
| <div class="value"> |
| <select name="timezone"></select> |
| </div> |
| </div> |
| |
| <!-- Max snapshots --> |
| <div class="field maxsnaps"> |
| <div class="name"><translate key="label.keep" /></div> |
| <div class="value"> |
| <input type="text" name="maxsnaps" class="required" /> |
| <label for="maxsnaps"><translate key="label.snapshots" /></label> |
| </div> |
| </div> |
| </form> |
| </div> |
| |
| <!-- Weekly --> |
| <div id="recurring-snapshots-weekly"> |
| <form> |
| <input type="hidden" name="snapshot-type" value="weekly" /> |
| |
| <!-- Time --> |
| <div class="field time"> |
| <div class="name"><translate key="label.time" /></div> |
| <div class="value"> |
| <select name="time-hour"></select> |
| <select name="time-minute"></select> |
| <select name="time-meridiem"></select> |
| </div> |
| </div> |
| |
| <!-- Day of week --> |
| <div class="field day-of-week"> |
| <div class="name"><translate key="label.day.of.week" /></div> |
| <div class="value"> |
| <select name="day-of-week"></select> |
| </div> |
| </div> |
| |
| <!-- Timezone --> |
| <div class="field timezone"> |
| <div class="name"><translate key="label.time.zone" /></div> |
| <div class="value"> |
| <select name="timezone"></select> |
| </div> |
| </div> |
| |
| <!-- Max snapshots --> |
| <div class="field maxsnaps"> |
| <div class="name"><translate key="label.keep" /></div> |
| <div class="value"> |
| <input type="text" name="maxsnaps" class="required" /> |
| <label for="maxsnaps"><translate key="label.snapshots" /></label> |
| </div> |
| </div> |
| </form> |
| </div> |
| |
| <!-- Monthly --> |
| <div id="recurring-snapshots-monthly"> |
| <form> |
| <input type="hidden" name="snapshot-type" value="monthly" /> |
| |
| <!-- Time --> |
| <div class="field time"> |
| <div class="name"><translate key="label.time" /></div> |
| <div class="value"> |
| <select name="time-hour"></select> |
| <select name="time-minute"></select> |
| <select name="time-meridiem"></select> |
| </div> |
| </div> |
| |
| <!-- Day of week --> |
| <div class="field day-of-month"> |
| <div class="name"><translate key="label.day.of.month" /></div> |
| <div class="value"> |
| <select name="day-of-month"></select> |
| </div> |
| </div> |
| |
| <!-- Timezone --> |
| <div class="field timezone"> |
| <div class="name"><translate key="label.time.zone" /></div> |
| <div class="value"> |
| <select name="timezone"></select> |
| </div> |
| </div> |
| |
| <!-- Max snapshots --> |
| <div class="field maxsnaps"> |
| <div class="name"><translate key="label.keep" /></div> |
| <div class="value"> |
| <input type="text" name="maxsnaps" class="required" /> |
| <label for="maxsnaps"><translate key="label.snapshots" /></label> |
| </div> |
| </div> |
| </form> |
| </div> |
| </div> |
| |
| <div class="add-snapshot-actions"> |
| <div class="add-snapshot-action add"></div> |
| </div> |
| </div> |
| <!-- Scheduled snapshots --> |
| <div class="scheduled-snapshots"> |
| <p>Scheduled Snapshots</p> |
| <table> |
| <tbody> |
| <!-- Hourly --> |
| <tr class="hourly"> |
| <td class="time"><translate key="label.time.colon" /> <span></span> <translate key="label.min.past.the.hr" /></td> |
| <td class="day-of-week"><span></span></td> |
| <td class="timezone"><translate key="label.timezone.colon" /><br/><span></span></td> |
| <td class="keep"><translate key="label.keep.colon" /> <span></span></td> |
| <td class="actions"><div class="action destroy"><span class="icon"> </span></div></td> |
| </tr> |
| <!-- Daily --> |
| <tr class="daily"> |
| <td class="time"><translate key="label.time.colon" /> <span></span></td> |
| <td class="day-of-week"><span></span></td> |
| <td class="timezone"><translate key="label.timezone.colon" /><br/><span></span></td> |
| <td class="keep"><translate key="label.keep.colon" /> <span></span></td> |
| <td class="actions"><div class="action destroy"><span class="icon"> </span></div></td> |
| </tr> |
| <!-- Weekly --> |
| <tr class="weekly"> |
| <td class="time"><translate key="label.time.colon" /> <span></span></td> |
| <td class="day-of-week"><translate key="label.every" /> <span></span></td> |
| <td class="timezone"><translate key="label.timezone.colon" /><br/><span></span></td> |
| <td class="keep"><translate key="label.keep.colon" /> <span></span></td> |
| <td class="actions"><div class="action destroy"><span class="icon"> </span></div></td> |
| </tr> |
| <!-- Monthly --> |
| <tr class="monthly"> |
| <td class="time"><translate key="label.time.colon" /> <span></span></td> |
| <td class="day-of-week"><translate key="label.day" /> <span></span> <translate key="label.of.month" /></td> |
| <td class="timezone"><translate key="label.timezone.colon" /><br/><span></span></td> |
| <td class="keep"><translate key="label.keep.colon" /> <span></span></td> |
| <td class="actions"><div class="action destroy"><span class="icon"> </span></div></td> |
| </tr> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| |
| <!-- jQuery --> |
| <script src="lib/jquery.js" type="text/javascript"></script> |
| <script src="lib/jquery.easing.js" type="text/javascript"></script> |
| <script src="lib/jquery.validate.js" type="text/javascript"></script> |
| <script src="lib/jquery.validate.additional-methods.js" type="text/javascript"></script> |
| <script src="lib/jquery-ui/js/jquery-ui.js" type="text/javascript"></script> |
| <script src="lib/date.js" type="text/javascript"></script> |
| <script src="lib/jquery.cookies.js" type="text/javascript"></script> |
| <script src="lib/jquery.md5.js" type="text/javascript" ></script> |
| <script src="lib/require.js" type="text/javascript"></script> |
| |
| <!-- localized messages --> |
| <script type="text/javascript"> |
| var $head = $('head'); |
| $head.append('<script src="l10n/en.js">'); |
| var defaultDict = dictionary; |
| if ($.cookie('lang') && $.cookie('lang') != 'en') { |
| $head.append('<link type="text/css" rel="stylesheet" href="css/cloudstack3.' + $.cookie('lang') + '.css" />'); |
| $head.append('<script src="l10n/' + $.cookie('lang') + '.js">'); |
| } |
| |
| $.each(defaultDict, function(key, value) { |
| if (!(key in dictionary)) { |
| dictionary[key] = value; |
| } |
| }); |
| |
| var translate = function(key) { |
| if (key in dictionary) { |
| return dictionary[key]; |
| } |
| return key; |
| } |
| |
| // Translate labels on the fly |
| $.each($.find('translate[key]'), function(idx, elem) { |
| var key = $(elem).attr('key'); |
| $(elem).text(translate(key)); |
| }); |
| |
| // Translate element attributes |
| $.each($.find('[tr]'), function(idx, elem) { |
| var key = $(elem).attr('tr'); |
| var field = $(elem).attr('trf'); |
| $(elem).attr(field, translate(key)); |
| }); |
| |
| // Inject translated login options |
| var loginDropdown = $($.find('#login-options')); |
| loginDropdown.append($('<option>', {value: 'cloudstack-login', text: 'Local ' + translate('label.login')})); |
| |
| // Inject translated l10n language options |
| var l10nDropdown = $($.find('#l10n-options')); |
| l10nDropdown.append($('<option>', {value: 'en', text: translate('label.lang.english')})); |
| l10nDropdown.append($('<option>', {value: 'ja_JP', text: translate('label.lang.japanese')})); |
| l10nDropdown.append($('<option>', {value: 'zh_CN', text: translate('label.lang.chinese')})); |
| l10nDropdown.append($('<option>', {value: 'ru_RU', text: translate('label.lang.russian')})); |
| l10nDropdown.append($('<option>', {value: 'fr_FR', text: translate('label.lang.french')})); |
| l10nDropdown.append($('<option>', {value: 'pt_BR', text: translate('label.lang.brportugese')})); |
| l10nDropdown.append($('<option>', {value: 'ca', text: translate('label.lang.catalan')})); |
| l10nDropdown.append($('<option>', {value: 'ko_KR', text: translate('label.lang.korean')})); |
| l10nDropdown.append($('<option>', {value: 'es', text: translate('label.lang.spanish')})); |
| l10nDropdown.append($('<option>', {value: 'de_DE', text: translate('label.lang.german')})); |
| l10nDropdown.append($('<option>', {value: 'it_IT', text: translate('label.lang.italian')})); |
| l10nDropdown.append($('<option>', {value: 'nb_NO', text: translate('label.lang.norwegian')})); |
| l10nDropdown.append($('<option>', {value: 'ar', text: translate('label.lang.arabic')})); |
| l10nDropdown.append($('<option>', {value: 'nl_NL', text: translate('label.lang.dutch')})); |
| l10nDropdown.append($('<option>', {value: 'pl', text: translate('label.lang.polish')})); |
| l10nDropdown.append($('<option>', {value: 'hu', text: translate('label.lang.hungarian')})); |
| |
| // Inject translated keyboard options |
| var keyboardDropdown = $($.find('#keyboard-options')); |
| keyboardDropdown.append($('<option>', {value: 'us', text: translate('label.standard.us.keyboard')})); |
| keyboardDropdown.append($('<option>', {value: 'uk', text: translate('label.uk.keyboard')})); |
| keyboardDropdown.append($('<option>', {value: 'jp', text: translate('label.japanese.keyboard')})); |
| keyboardDropdown.append($('<option>', {value: 'sc', text: translate('label.simplified.chinese.keyboard')})); |
| </script> |
| |
| <script src="lib/excanvas.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.colorhelpers.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.crosshair.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.fillbetween.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.image.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.navigate.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.pie.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.resize.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.selection.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.stack.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.symbol.js" type="text/javascript"></script> |
| <script src="lib/flot/jquery.flot.threshold.js" type="text/javascript"></script> |
| <!-- jquery.tokeninput.js --> |
| <script src="lib/jquery.tokeninput.js" type="text/javascript"></script> |
| <!-- CloudStack --> |
| <script type="text/javascript" src="scripts/ui/core.js"></script> |
| <script type="text/javascript" src="scripts/ui/utils.js"></script> |
| <script type="text/javascript" src="scripts/ui/events.js"></script> |
| <script type="text/javascript" src="scripts/ui/dialog.js"></script> |
| |
| <script type="text/javascript" src="scripts/ui/widgets/multiEdit.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/overlay.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/dataTable.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/cloudBrowser.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/listView.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/detailView.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/treeView.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/notifications.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/tagger.js"></script> |
| <script type="text/javascript" src="scripts/ui/widgets/toolTip.js"></script> |
| <script type="text/javascript" src="scripts/cloud.core.callbacks.js"></script> |
| <script type="text/javascript" src="scripts/sharedFunctions.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/login.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/projects.js"></script> |
| <script type="text/javascript" src="scripts/cloudStack.js"></script> |
| <script type="text/javascript" src="scripts/lbStickyPolicy.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/autoscaler.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/healthCheck.js"></script> |
| <script type="text/javascript" src="scripts/autoscaler.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/granularSettings.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/zoneChart.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/dashboard.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/metricsView.js"></script> |
| <script type="text/javascript" src="scripts/installWizard.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/installWizard.js"></script> |
| <script type="text/javascript" src="scripts/projects.js"></script> |
| <script type="text/javascript" src="scripts/dashboard.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/instanceWizard.js"></script> |
| <script type="text/javascript" src="scripts/instanceWizard.js"></script> |
| <script type="text/javascript" src="scripts/affinity.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/affinity.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/migrate.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/copyTemplate.js"></script> |
| <script type="text/javascript" src="scripts/instances.js"></script> |
| <script type="text/javascript" src="scripts/events.js"></script> |
| <script type="text/javascript" src="scripts/regions.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/regions.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/ipRules.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/enableStaticNAT.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/securityRules.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/vpc.js"></script> |
| <script type="text/javascript" src="scripts/vpc.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/recurringSnapshots.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/uploadVolume.js"></script> |
| <script type="text/javascript" src="scripts/storage.js"></script> |
| <script type="text/javascript" src="scripts/templates.js"></script> |
| <script type="text/javascript" src="scripts/roles.js"></script> |
| <script type="text/javascript" src="scripts/accountsWizard.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/accountsWizard.js"></script> |
| <script type="text/javascript" src="scripts/accounts.js"></script> |
| <script type="text/javascript" src="scripts/configuration.js"></script> |
| <script type="text/javascript" src="scripts/globalSettings.js"></script> |
| <script type="text/javascript" src="scripts/zoneWizard.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/physicalResources.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/zoneWizard.js"></script> |
| <script type="text/javascript" src="scripts/system.js"></script> |
| <script type="text/javascript" src="scripts/network.js"></script> |
| <script type="text/javascript" src="scripts/domains.js"></script> |
| <script type="text/javascript" src="scripts/docs.js"></script> |
| <script type="text/javascript" src="scripts/vm_snapshots.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/projectSelect.js"></script> |
| <script type="text/javascript" src="scripts/ui-custom/saml.js"></script> |
| <script type="text/javascript" src="scripts/metrics.js"></script> |
| |
| <!-- Plugin/module API --> |
| <script type="text/javascript" src="scripts/ui-custom/pluginListing.js"></script> |
| <script type="text/javascript" src="plugins/plugins.js"></script> |
| <script type="text/javascript" src="modules/modules.js"></script> |
| <script type="text/javascript" src="scripts/plugins.js"></script> |
| </body> |
| </html> |
