rhtyd commented on a change in pull request #4518:
URL: https://github.com/apache/cloudstack/pull/4518#discussion_r536216136
##########
File path: ui/index.html
##########
@@ -16,1978 +16,14 @@
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";>
+<!doctype html>
+<html>
<head>
+ <meta charset="utf-8">
<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/jquery-ui/css/jquery-ui.css" />
- <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/custom.css" />
+ <title>Apache CloudStack</title>
</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-deployment">
- <h3><translate
key="label.select.deployment.infrastructure"/></h3>
- <p><translate
key="message.select.a.zone"/></p>
- <div class="select-area lower-area">
- <select name="zoneid" class="zoneid
required" required></select>
- <label for="zoneid"
class="desc"><translate key="label.zone"/></label>
- </div>
- <div class="select-area lower-area">
- <select name="podid"
class="podid"></select>
- <label for="podid"
class="desc"><translate key="label.pod"/></label>
- </div>
- <div class="select-area lower-area">
- <select name="clusterid"
class="clusterid"></select>
- <label for="clusterid"
class="desc"><translate key="label.cluster"/></label>
- </div>
- <div class="select-area lower-area">
- <select name="hostid"
class="hostid"></select>
- <label for="hostid"
class="desc"><translate key="label.host"/></label>
- </div>
- </div>
- <!-- Select template -->
- <div class="section select-template
smaller-height">
- <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
custom-no-limits">
- <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 size slider -->
- <div class="section custom-size
custom-slider-container">
- <div class="slider-cpu-cores">
- <label><translate
key="label.num.cpu.cores"/></label>
- <!-- Slider -->
- <label class="size
min"><span></span></label>
- <div class="slider custom-size"></div>
- <label class="size
max"><span></span></label>
- <input type="text" class="required
digits" name="slider-compute-cpu-cores" value="0" />
- <label class="size">Cores</label>
- </div>
- <div class="slider-memory-mb">
- <label><translate
key="label.memory.mb"/></label>
- <!-- Slider -->
- <label class="size
min"><span></span></label>
- <div class="slider custom-size"></div>
- <label class="size
max"><span></span></label>
- <input type="text" class="required
disallowSpecialCharacters" name="slider-compute-memory" value="0"/>
- <label class="size">MB</label>
- </div>
- <div class="slider-cpu-speed">
- <input type="text"
style="display:none;" name="slider-compute-cpu-speed" value="0" />
- </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-slider-container">
- <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"
/>
- </label>
- (<label><translate
key="label.optional"></translate></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>
-
- <!-- Pre-step 8: Configure OVF properties if available
-->
- <div class="step ovf-properties"
wizard-step-id="ovfProperties">
- <div class="content">
- <!-- 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><label><translate
key="label.name" /></label> (<label><translate
key="label.optional"/></label>)</span>
- </div>
- <div class="value">
- <input type="text"
name="displayname" class="disallowSpecialCharacters" />
- </div>
- </div>
- <!-- Add to group -->
- <div class="select">
- <div class="name">
- <span><label><translate
key="label.add.to.group"/></label> (<label><translate
key="label.optional"/></label>)</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>
-
- <!-- UEFI Boot -->
- <div class="select" odd>
- <div class="name">
- <span><translate
key="label.vm.boottype" /></span>
- </div>
- <div class="value">
- <select name="customboot"
id="customboot">
- <option
value="BIOS">BIOS</option>
- <option
value="UEFI">UEFI</option>
- </select>
- </div>
- </div>
-
- <div class="select field
hide-if-unselected">
- <div class="name">
- <span><translate
key="label.vm.bootmode" /></span>
- </div>
- <div class="value">
- <select name="bootmode"
id="bootmode">
- <option
value="LEGACY">LEGACY</option>
- </select>
- </div>
- </div>
-
- <div class="select-area">
- <div class="value">
- <input type="checkbox"
name="bootintosetup" id="bootintosetup" />
- <label><translate
key="label.vm.enterhardwaresetup" /></label>
- </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><label><translate
key="label.add.userdata"/></label> (<label><translate
key="label.optional"/></label>)</span>
- </div>
- <div class="value">
- <textarea
name="userdata"></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>
- <th><translate
key="label.user.conflict"/></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>
- <li class="block management-servers">
- <span class="header"><translate
key="label.management.servers"/></span>
- <span class="icon"> </span>
- <span class="overview total"
data-item="managementServerCount"></span>
- <span class="button view-all clusters"
- tr="label.management.servers"
trf="view-all-title"
- view-all-title="label.management.servers"
-
view-all-target="managementServers"><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">
- <label><translate
key="label.zone"/></label>: <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><label><translate
key="label.latest.events"/></label> <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><label><translate
key="label.network"/></label> <div class="button view-all network"><translate
key="label.view.all"/></div></th>
- </tr>
- </thead>
- </table>
- <table>
- <tbody>
- <tr>
- <td>
- <div
class="desc"><span><label><translate
key="label.isolated.networks"/></label>:</span></div>
- <div class="value"><span
data-item="netTotal"></span></div>
- </td>
- </tr>
- <tr class="odd">
- <td>
- <div
class="desc"><span><label><translate
key="label.public.ips"/></label>:</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"
class="formContainer">
- <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>
-
- <!-- Tags -->
- <div class="field taggerContainer"></div>
- </form>
- </div>
-
- <!-- Daily -->
- <div id="recurring-snapshots-daily"
class="formContainer">
- <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" maxlength="9"/>
- <label for="maxsnaps"><translate
key="label.snapshots" /></label>
- </div>
- </div>
-
- <!-- Tags -->
- <div class="field taggerContainer"></div>
- </form>
- </div>
-
- <!-- Weekly -->
- <div id="recurring-snapshots-weekly"
class="formContainer">
- <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>
-
- <!-- Tags -->
- <div class="field taggerContainer"></div>
- </form>
- </div>
-
- <!-- Monthly -->
- <div id="recurring-snapshots-monthly"
class="formContainer">
- <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>
-
- <!-- Tags -->
- <div class="field taggerContainer"></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"></translate> <span></span> <translate
key="label.min.past.the.hr"></translate></td>
- <td class="day-of-week"><span></span></td>
- <td class="timezone"><translate
key="label.timezone.colon"></translate><br/><span></span></td>
- <td class="keep"><translate
key="label.keep.colon"></translate> <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"></translate> <span></span></td>
- <td class="day-of-week"><span></span></td>
- <td class="timezone"><translate
key="label.timezone.colon"></translate><br/><span></span></td>
- <td class="keep"><translate
key="label.keep.colon"></translate> <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"></translate> <span></span></td>
- <td class="day-of-week"><translate
key="label.every"></translate> <span></span></td>
- <td class="timezone"><translate
key="label.timezone.colon"></translate><br/><span></span></td>
- <td class="keep"><translate
key="label.keep.colon"></translate> <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"></translate> <span></span></td>
- <td class="day-of-week"><translate
key="label.day"></translate> <span></span> <translate
key="label.of.month"></translate></td>
- <td class="timezone"><translate
key="label.timezone.colon"></translate><br/><span></span></td>
- <td class="keep"><translate
key="label.keep.colon"></translate> <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>
- <script type="text/javascript" src="config.js"></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).html(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: 'English'}));
- l10nDropdown.append($('<option>', {value: 'ja_JP', text: '日本語'}));
- l10nDropdown.append($('<option>', {value: 'zh_CN', text: '简体中文'}));
- l10nDropdown.append($('<option>', {value: 'ru_RU', text:
'Русский'}));
- l10nDropdown.append($('<option>', {value: 'fr_FR', text:
'Français'}));
- l10nDropdown.append($('<option>', {value: 'pt_BR', text:
'Português brasileiro'}));
- l10nDropdown.append($('<option>', {value: 'ca', text: 'Catalan'}));
- l10nDropdown.append($('<option>', {value: 'ko_KR', text: '한국어'}));
- l10nDropdown.append($('<option>', {value: 'es', text: 'Españo'}));
- l10nDropdown.append($('<option>', {value: 'de_DE', text:
'Deutsch'}));
- l10nDropdown.append($('<option>', {value: 'it_IT', text:
'Italiano'}));
- l10nDropdown.append($('<option>', {value: 'nb_NO', text:
'Norsk'}));
- l10nDropdown.append($('<option>', {value: 'ar', text: 'Arabic'}));
- l10nDropdown.append($('<option>', {value: 'nl_NL', text:
'Nederlands (Nederlands)'}));
- l10nDropdown.append($('<option>', {value: 'pl', text: 'Polish'}));
- l10nDropdown.append($('<option>', {value: 'hu', text: 'Magyar'}));
-
- // Inject translated keyboard options
- var keyboardDropdown = $($.find('#keyboard-options'));
- for (var key in cloudStackOptions.keyboardOptions) {
- keyboardDropdown.append($('<option>', {value: key, text:
translate(cloudStackOptions.keyboardOptions[key])}));
- }
- </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/lbCertificatePolicy.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/ui-custom/backupSchedule.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/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>
-
- <!-- Load this script after all scripts have executed to populate data
-->
- <script type="text/javascript" src="scripts/postLoad.js"></script>
+ <p>The legacy UI has been deprecated in this version as notified in
the <a
href="http://docs.cloudstack.apache.org/en/4.14.0.0/releasenotes/about.html#new-user-interface-depreciation-notice-of-existing-ui";>previous
release</a>. The legacy UI will be <a
href="http://docs.cloudstack.apache.org/en/4.15.0.0/releasenotes/about.html#primate-ga-and-legacy-ui-deprecation-and-removal-notice";>removed
in the next release</a>.<br/>To access the legacy UI <a href="legacy">click
here</a>.</p>
Review comment:
Actually most users won't see this as the new UI (Primate) will get
installed over the folder overwriting this index.html with its own.
----------------------------------------------------------------
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.
For queries about this service, please contact Infrastructure at:
[email protected]
