mirror of https://github.com/apache/cloudstack.git
Update zone section
-Show separate info tooltips for basic/advanced zone -Update test data to reflect zone changes
This commit is contained in:
Brian Federle
parent
13e217356e
commit
49c27299a5
|
|
@ -3718,6 +3718,7 @@ Dialogs*/
|
|||
.zone-chart .side-info {
|
||||
width: 203px;
|
||||
float: right;
|
||||
display: none;
|
||||
margin: 58px 0 0;
|
||||
}
|
||||
|
||||
|
|
@ -3907,12 +3908,14 @@ Dialogs*/
|
|||
left: 23px;
|
||||
top: 8px;
|
||||
position: absolute;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zone-chart .resources.zone ul li .tooltip-icon {
|
||||
position: relative;
|
||||
float: left;
|
||||
left: 6px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.zone-chart ul li .tooltip-icon span {
|
||||
|
|
|
|||
2902
ui/index-test.html
2902
ui/index-test.html
File diff suppressed because it is too large
Load Diff
52
ui/index.jsp
52
ui/index.jsp
|
|
@ -825,8 +825,39 @@
|
|||
|
||||
<!-- Zone chart -->
|
||||
<div class="zone-chart">
|
||||
<!-- Side info -->
|
||||
<div class="side-info">
|
||||
<!-- Side info -- Basic zone -->
|
||||
<div class="side-info basic">
|
||||
<ul>
|
||||
<li>
|
||||
<div class="icon"><span>1</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>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>
|
||||
|
|
@ -868,7 +899,7 @@
|
|||
</div>
|
||||
<ul class="system-main">
|
||||
<li class="main public" rel="public">
|
||||
<div class="tooltip-icon"><span>1</span></div>
|
||||
<div class="tooltip-icon advanced"><span>1</span></div>
|
||||
<div class="name">Public</div>
|
||||
<div class="view-all configure">Configure</div>
|
||||
</li>
|
||||
|
|
@ -877,7 +908,8 @@
|
|||
<div class="view-all configure">Configure</div>
|
||||
</li>
|
||||
<li class="main guest" rel="guest">
|
||||
<div class="tooltip-icon"><span>2</span></div>
|
||||
<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>
|
||||
|
|
@ -895,22 +927,26 @@
|
|||
<div class="view-all" zone-target="pods">View All</div>
|
||||
</li>
|
||||
<li class="cluster">
|
||||
<div class="tooltip-icon"><span>3</span></div>
|
||||
<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"><span>4</span></div>
|
||||
<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"><span>5</span></div>
|
||||
<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"><span>6</span></div>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -774,136 +774,100 @@
|
|||
networktype: { label: 'Network Type' },
|
||||
allocationstate: { label: 'State' }
|
||||
},
|
||||
actions: {
|
||||
destroy: testData.actions.destroy('zone'),
|
||||
add: {
|
||||
label: 'Add zone',
|
||||
action: {
|
||||
custom: cloudStack.zoneWizard({
|
||||
steps: [
|
||||
// Step 1: Setup
|
||||
null,
|
||||
|
||||
// Step 2: Setup Zone
|
||||
function(args) {
|
||||
args.response.success({
|
||||
domains: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Domain A'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Domain B'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Domain C'
|
||||
}
|
||||
]
|
||||
});
|
||||
},
|
||||
|
||||
// Step 3: Setup Pod
|
||||
null,
|
||||
|
||||
// Step 4: Setup IP Range
|
||||
function(args) {
|
||||
args.response.success({
|
||||
domains: [
|
||||
{
|
||||
id: '1',
|
||||
name: 'Domain A'
|
||||
},
|
||||
{
|
||||
id: '2',
|
||||
name: 'Domain B'
|
||||
},
|
||||
{
|
||||
id: '3',
|
||||
name: 'Domain C'
|
||||
}
|
||||
]
|
||||
});
|
||||
}
|
||||
],
|
||||
action: function(args) {
|
||||
args.response.success({
|
||||
_custom: { jobID: new Date() }
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
messages: {
|
||||
confirm: function(args) {
|
||||
return 'Are you sure you want to add ' + args.name + '?';
|
||||
},
|
||||
notification: function(args) {
|
||||
return 'Created new zone';
|
||||
}
|
||||
},
|
||||
notification: {
|
||||
poll: testData.notifications.customPoll(testData.data.zones[0])
|
||||
}
|
||||
}
|
||||
},
|
||||
dataProvider: testData.dataProvider.listView('zones'),
|
||||
detailView: {
|
||||
isMaximized: true,
|
||||
pageGenerator: cloudStack.zoneChart({
|
||||
dataProvider: testData.dataProvider.detailView('zones'),
|
||||
detailView: {
|
||||
name: 'Zone details',
|
||||
viewAll: { path: '_zone.pods', label: 'Pods' },
|
||||
tabs: {
|
||||
details: {
|
||||
title: 'Details',
|
||||
fields: [
|
||||
{
|
||||
name: { label: 'Zone' }
|
||||
},
|
||||
{
|
||||
dns1: { label: 'DNS 1' },
|
||||
dns2: { label: 'DNS 2' },
|
||||
internaldns1: { label: 'Internal DNS 1' },
|
||||
internaldns2: { label: 'Internal DNS 2' }
|
||||
},
|
||||
{
|
||||
networktype: { label: 'Network Type' },
|
||||
allocationstate: { label: 'State' },
|
||||
vlan: { label: 'VLAN' },
|
||||
networktype: { label: 'Network Type' },
|
||||
securitygroupenabled: { label: 'Security Group?' }
|
||||
}
|
||||
],
|
||||
dataProvider: testData.dataProvider.detailView('zones')
|
||||
viewAll: {
|
||||
path: 'instances',
|
||||
label: 'Configuration',
|
||||
custom: cloudStack.zoneChart()
|
||||
},
|
||||
tabs: {
|
||||
details: {
|
||||
title: 'Details',
|
||||
fields: [
|
||||
{
|
||||
name: { label: 'Zone', isEditable: true }
|
||||
},
|
||||
resources: {
|
||||
title: 'Resources',
|
||||
fields: [
|
||||
{
|
||||
iptotal: { label: 'Total IPs' },
|
||||
cputotal: { label: 'Total CPU' },
|
||||
bandwidthout: { label: 'Bandwidth (Out)'},
|
||||
bandwidthin: { label: 'Bandwidth (In)'}
|
||||
{
|
||||
id: { label: 'ID' },
|
||||
allocationstate: { label: 'Allocation State' },
|
||||
dns1: { label: 'DNS 1', isEditable: true },
|
||||
dns2: { label: 'DNS 2', isEditable: true },
|
||||
internaldns1: { label: 'Internal DNS 1', isEditable: true },
|
||||
internaldns2: { label: 'Internal DNS 2', isEditable: true },
|
||||
networktype: { label: 'Network Type' },
|
||||
securitygroupsenabled: {
|
||||
label: 'Security Groups Enabled',
|
||||
},
|
||||
domain: {
|
||||
label: 'Network domain',
|
||||
isEditable: true
|
||||
}
|
||||
}
|
||||
],
|
||||
dataProvider: testData.dataProvider.detailView('zones')
|
||||
},
|
||||
systemVMs: {
|
||||
title: 'System VMs',
|
||||
listView: {
|
||||
label: 'System VMs',
|
||||
id: 'systemVMs',
|
||||
fields: {
|
||||
name: { label: 'Name' },
|
||||
systemvmtype: {
|
||||
label: 'Type',
|
||||
converter: function(args) {
|
||||
if(args == "consoleproxy")
|
||||
return "Console Proxy VM";
|
||||
else if(args == "secondarystoragevm")
|
||||
return "Secondary Storage VM";
|
||||
}
|
||||
],
|
||||
dataProvider: function(args) {
|
||||
setTimeout(function() {
|
||||
args.response.success({
|
||||
data: {
|
||||
iptotal: 1000,
|
||||
cputotal: '500 Ghz',
|
||||
bandwidthout: '14081 mb',
|
||||
bandwidthin: '31000 mb'
|
||||
},
|
||||
zonename: { label: 'Zone' },
|
||||
state: {
|
||||
label: 'Status',
|
||||
indicator: {
|
||||
'Running': 'on',
|
||||
'Stopped': 'off',
|
||||
'Error': 'off'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataProvider: testData.dataProvider.listView('instances'),
|
||||
|
||||
detailView: {
|
||||
name: 'System VM details',
|
||||
tabs: {
|
||||
details: {
|
||||
title: 'Details',
|
||||
fields: [
|
||||
{
|
||||
name: { label: 'Name' }
|
||||
},
|
||||
{
|
||||
id: { label: 'ID' },
|
||||
state: { label: 'State' },
|
||||
systemvmtype: {
|
||||
label: 'Type'
|
||||
},
|
||||
zonename: { label: 'Zone' },
|
||||
publicip: { label: 'Public IP' },
|
||||
privateip: { label: 'Private IP' },
|
||||
linklocalip: { label: 'Link local IP' },
|
||||
hostname: { label: 'Host' },
|
||||
gateway: { label: 'Gateway' },
|
||||
created: { label: 'Created' },
|
||||
activeviewersessions: { label: 'Active sessions' }
|
||||
}
|
||||
});
|
||||
}, 500);
|
||||
],
|
||||
dataProvider: testData.dataProvider.detailView('instances')
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -443,6 +443,13 @@
|
|||
$tabMain.tabs();
|
||||
$tabMain.find('li:first').addClass('first');
|
||||
$tabMain.find('li:last').addClass('last');
|
||||
|
||||
var $info = $charts.find('.side-info, .tooltip-icon').filter(function() {
|
||||
return $(this).hasClass(
|
||||
context.physicalResources[0].networktype == 'Basic' ?
|
||||
'basic' : 'advanced'
|
||||
);
|
||||
}).show();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue