http://git-wip-us.apache.org/repos/asf/cloudstack/blob/16913a98/ui/index.html ---------------------------------------------------------------------- diff --git a/ui/index.html b/ui/index.html new file mode 100644 index 0000000..9402153 --- /dev/null +++ b/ui/index.html @@ -0,0 +1,1892 @@ +<!-- + 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"
<TRUNCATED>
