mirror of https://github.com/apache/cloudstack.git
Merge pull request #1038 from shapeblue/metrics-master
Metrics views for CloudStack UIFS: https://cwiki.apache.org/confluence/display/CLOUDSTACK/Metrics+Views+for+CloudStack+UI JIRA: https://issues.apache.org/jira/browse/CLOUDSTACK-9020 * pr/1038: CLOUDSTACK-9020: Increase UI container width by 200px CLOUDSTACK-9020: add ipaddress in instances view CLOUDSTACK-9020: Make UI pagesize configurable CLOUDSTACK-9020: Metrics views for CloudStack UI CLOUDSTACK-9020: Implement collapsible columns and threshold colorings CLOUDSTACK-9020: Implement sorting for tables CLOUDSTACK-9020: Method to remove last panel from the breadcrumb CLOUDSTACK-9020: Add new status icons and css rules Signed-off-by: Rohit Yadav <rohit.yadav@shapeblue.com>
This commit is contained in:
Rohit Yadav
commit
fe2917e91b
|
|
@ -26,6 +26,8 @@ public class ApiServiceConfiguration implements Configurable {
|
|||
public static final ConfigKey<String> ManagementHostIPAdr = new ConfigKey<String>("Advanced", String.class, "host", "localhost", "The ip address of management server", true);
|
||||
public static final ConfigKey<String> ApiServletPath = new ConfigKey<String>("Advanced", String.class, "endpointe.url", "http://localhost:8080/client/api",
|
||||
"API end point. Can be used by CS components/services deployed remotely, for sending CS API requests", true);
|
||||
public static final ConfigKey<Long> DefaultUIPageSize = new ConfigKey<Long>("Advanced", Long.class, "default.ui.page.size", "20",
|
||||
"The default pagesize to be used by UI and other clients when making list* API calls", true, ConfigKey.Scope.Global);
|
||||
|
||||
@Override
|
||||
public String getConfigComponentName() {
|
||||
|
|
@ -34,7 +36,7 @@ public class ApiServiceConfiguration implements Configurable {
|
|||
|
||||
@Override
|
||||
public ConfigKey<?>[] getConfigKeys() {
|
||||
return new ConfigKey<?>[] {ManagementHostIPAdr, ApiServletPath};
|
||||
return new ConfigKey<?>[] {ManagementHostIPAdr, ApiServletPath, DefaultUIPageSize};
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -842,6 +842,41 @@ label.menu.virtual.appliances=Virtual Appliances
|
|||
label.menu.virtual.resources=Virtual Resources
|
||||
label.menu.volumes=Volumes
|
||||
label.menu.sshkeypair=SSH KeyPair
|
||||
label.metrics=Metrics
|
||||
label.metrics.allocated=Allocated
|
||||
label.metrics.clusters=Clusters
|
||||
label.metrics.cpu.allocated=CPU Allocation
|
||||
label.metrics.cpu.max.dev=Deviation
|
||||
label.metrics.cpu.total=Total
|
||||
label.metrics.cpu.usage=CPU Usage
|
||||
label.metrics.cpu.used.avg=Used
|
||||
label.metrics.disk=Disk
|
||||
label.metrics.disk.iops.total=IOPS
|
||||
label.metrics.disk.read=Read
|
||||
label.metrics.disk.size=Size
|
||||
label.metrics.disk.storagetype=Type
|
||||
label.metrics.disk.usage=Disk Usage
|
||||
label.metrics.disk.used=Used
|
||||
label.metrics.disk.total=Total
|
||||
label.metrics.disk.allocated=Allocated
|
||||
label.metrics.disk.unallocated=Unallocated
|
||||
label.metrics.disk.write=Write
|
||||
label.metrics.hosts=Hosts
|
||||
label.metrics.memory.allocated=Mem Allocation
|
||||
label.metrics.memory.max.dev=Deviation
|
||||
label.metrics.memory.total=Total
|
||||
label.metrics.memory.usage=Mem Usage
|
||||
label.metrics.memory.used.avg=Used
|
||||
label.metrics.name=Name
|
||||
label.metrics.network.usage=Network Usage
|
||||
label.metrics.network.read=Read
|
||||
label.metrics.network.write=Write
|
||||
label.metrics.num.cpu.cores=Cores
|
||||
label.metrics.property=Property
|
||||
label.metrics.scope=Scope
|
||||
label.metrics.state=State
|
||||
label.metrics.storagepool=Storage Pool
|
||||
label.metrics.vm.name=VM Name
|
||||
label.migrate.instance.to.host=Migrate instance to another host
|
||||
label.migrate.instance.to.ps=Migrate instance to another primary storage
|
||||
label.migrate.instance.to=Migrate instance to
|
||||
|
|
|
|||
|
|
@ -46,7 +46,7 @@ div.toolbar,
|
|||
|
||||
/*+}*/
|
||||
body {
|
||||
min-width: 1024px;
|
||||
min-width: 1224px;
|
||||
font-family: sans-serif;
|
||||
overflow: auto;
|
||||
background: #EDE8E8;
|
||||
|
|
@ -61,7 +61,7 @@ body.install-wizard {
|
|||
}
|
||||
|
||||
#main-area {
|
||||
width: 1024px;
|
||||
width: 1224px;
|
||||
height: 729px;
|
||||
margin: auto;
|
||||
border: 1px solid #D4D4D4;
|
||||
|
|
@ -96,8 +96,8 @@ a:hover {
|
|||
|
||||
/*Table*/
|
||||
table {
|
||||
width: 740px;
|
||||
max-width: 777px;
|
||||
width: 940px;
|
||||
max-width: 977px;
|
||||
margin: 15px 15px 12px 12px;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
|
|
@ -146,7 +146,7 @@ table thead th.sorted.asc {
|
|||
|
||||
table tbody td,
|
||||
table th {
|
||||
padding: 10px 5px 8px;
|
||||
padding: 10px 5px 6px;
|
||||
border-right: 1px solid #BFBFBF;
|
||||
color: #282828;
|
||||
clear: none;
|
||||
|
|
@ -480,8 +480,8 @@ body.login {
|
|||
}
|
||||
|
||||
.login .logo {
|
||||
width: 250px;
|
||||
height: 31px;
|
||||
width: 290px;
|
||||
height: 40px;
|
||||
float: left;
|
||||
margin: 72px 0 0 209px;
|
||||
background: url(../images/logo-login.png) no-repeat 0 0;
|
||||
|
|
@ -1297,7 +1297,7 @@ div.panel div.list-view {
|
|||
}
|
||||
|
||||
.detail-view div.list-view {
|
||||
width: 730px;
|
||||
width: 930px;
|
||||
border: 1px solid #DAD4D4;
|
||||
margin: 41px auto auto !important;
|
||||
height: 536px !important;
|
||||
|
|
@ -1305,12 +1305,12 @@ div.panel div.list-view {
|
|||
}
|
||||
|
||||
div.panel div.list-view div.data-table table {
|
||||
width: 755px;
|
||||
width: 955px;
|
||||
margin-top: 44px;
|
||||
}
|
||||
|
||||
.detail-view div.list-view div.data-table table {
|
||||
width: 703px !important;
|
||||
width: 903px !important;
|
||||
}
|
||||
|
||||
.detail-view div.list-view div.data-table table td {
|
||||
|
|
@ -1321,7 +1321,7 @@ div.panel div.list-view div.fixed-header {
|
|||
position: absolute;
|
||||
top: 29px;
|
||||
left: 12px;
|
||||
width: 760px;
|
||||
width: 960px;
|
||||
height: 47px;
|
||||
display: table;
|
||||
background-color: #F7F7F7;
|
||||
|
|
@ -1330,9 +1330,9 @@ div.panel div.list-view div.fixed-header {
|
|||
}
|
||||
|
||||
.detail-view div.list-view div.fixed-header {
|
||||
width: 703px !important;
|
||||
width: 903px !important;
|
||||
top: 49px !important;
|
||||
left: 32px !important;
|
||||
left: 29px !important;
|
||||
background: #FFFFFF;
|
||||
}
|
||||
|
||||
|
|
@ -1354,7 +1354,7 @@ div.panel div.list-view div.fixed-header table {
|
|||
position: relative;
|
||||
left: 0px;
|
||||
top: 18px;
|
||||
width: 755px;
|
||||
width: 955px;
|
||||
/*+box-shadow:0px 4px 10px #DFE1E3;*/
|
||||
-moz-box-shadow: 0px 4px 10px #DFE1E3;
|
||||
-webkit-box-shadow: 0px 4px 10px #DFE1E3;
|
||||
|
|
@ -1393,7 +1393,7 @@ div.list-view td.state span {
|
|||
-webkit-text-shadow: 0px 1px 1px #FFFFFF;
|
||||
-o-text-shadow: 0px 1px 1px #FFFFFF;
|
||||
text-shadow: 0px 1px 1px #FFFFFF;
|
||||
background: url(../images/sprites.png) 1px -536px;
|
||||
background: url(../images/sprites.png) 1px -526px;
|
||||
}
|
||||
|
||||
div.list-view td.state.on span {
|
||||
|
|
@ -1407,7 +1407,69 @@ div.list-view td.state.off span {
|
|||
background-image: url(../images/sprites.png);
|
||||
background-repeat: no-repeat;
|
||||
color: #B90606;
|
||||
background-position: 1px -496px;
|
||||
background-position: 1px -492px;
|
||||
}
|
||||
|
||||
div.list-view td.state.warning span {
|
||||
background-image: url(../images/sprites.png);
|
||||
background-repeat: no-repeat;
|
||||
color: #B90606;
|
||||
background-position: 1px -558px;
|
||||
}
|
||||
|
||||
div.list-view td.state.transition span {
|
||||
background-image: url(../images/sprites.png);
|
||||
background-repeat: no-repeat;
|
||||
color: #B90606;
|
||||
background-position: 1px -432px;
|
||||
}
|
||||
|
||||
.horizontal-overflow tbody td, .horizontal-overflow thead th {
|
||||
min-width: 40px;
|
||||
padding: 10px 10px 5px 0px;
|
||||
}
|
||||
|
||||
.horizontal-overflow th.quick-view {
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.groupable-header {
|
||||
background: url(../images/bg-table-head.png);
|
||||
border-left: 1px solid #C6C3C3;
|
||||
border-right: 1px solid #C6C3C3;
|
||||
}
|
||||
|
||||
.groupable-header-columns th {
|
||||
border: none;
|
||||
}
|
||||
|
||||
table.horizontal-overflow td.state {
|
||||
width: 55px;
|
||||
min-width: 55px;
|
||||
max-width: 55px;
|
||||
}
|
||||
|
||||
table.no-split td.first {
|
||||
min-width: 150px;
|
||||
}
|
||||
|
||||
.groupable-header-border {
|
||||
border-left: 1px solid #C6C3C3;
|
||||
border-right: 1px solid #C6C3C3;
|
||||
}
|
||||
|
||||
td.alert-notification-threshold {
|
||||
color: #E87900;
|
||||
background-color: rgba(255, 231, 175, 0.75);
|
||||
}
|
||||
|
||||
td.alert-disable-threshold {
|
||||
color: #F50000;
|
||||
background-color: rgba(255, 190, 190, 0.75);
|
||||
}
|
||||
|
||||
span.compact {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
/** Quick view tooltip*/
|
||||
|
|
@ -1828,7 +1890,7 @@ div.list-view td.state.off span {
|
|||
}
|
||||
|
||||
.detail-group table {
|
||||
width: 96%;
|
||||
width: 98%;
|
||||
font-size: 12px;
|
||||
border-bottom: 1px solid #DFDFDF;
|
||||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#eaeaea',GradientType=0 );
|
||||
|
|
@ -2373,7 +2435,7 @@ div.detail-group.actions td {
|
|||
}
|
||||
|
||||
#header.nologo div.logo {
|
||||
width: 1024px;
|
||||
width: 1224px;
|
||||
height: 47px;
|
||||
margin: auto;
|
||||
background: url(../images/logo.png) no-repeat 0 center;
|
||||
|
|
@ -2384,7 +2446,7 @@ div.detail-group.actions td {
|
|||
}
|
||||
|
||||
#header div.controls {
|
||||
width: 1026px;
|
||||
width: 1226px;
|
||||
height: 48px;
|
||||
position: relative;
|
||||
margin: 27px auto 0;
|
||||
|
|
@ -2492,7 +2554,7 @@ div.detail-group.actions td {
|
|||
margin: 0;
|
||||
position: absolute;
|
||||
top: -47px;
|
||||
left: 890px;
|
||||
left: 1090px;
|
||||
cursor: default !important;
|
||||
display: inline-block;
|
||||
float: left;
|
||||
|
|
@ -2882,9 +2944,9 @@ div.detail-group.actions td {
|
|||
|
||||
/*Browser*/
|
||||
#browser {
|
||||
width: 794px;
|
||||
width: 994px;
|
||||
height: 100%;
|
||||
max-width: 794px;
|
||||
max-width: 994px;
|
||||
position: relative;
|
||||
float: left;
|
||||
overflow: hidden;
|
||||
|
|
@ -3006,7 +3068,7 @@ div.detail-group.actions td {
|
|||
}
|
||||
|
||||
.detail-view .ui-tabs-panel div.toolbar {
|
||||
width: 768px;
|
||||
width: 968px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
margin-top: 8px;
|
||||
|
|
@ -3172,7 +3234,7 @@ div.toolbar div.button.main-action span.icon {
|
|||
|
||||
div.toolbar div.button.refresh {
|
||||
float: right;
|
||||
margin: 0 15px 0 0;
|
||||
margin: 0 20px 0 0;
|
||||
}
|
||||
|
||||
div.toolbar div.button.refresh span {
|
||||
|
|
@ -4295,7 +4357,7 @@ textarea {
|
|||
}
|
||||
|
||||
.dashboard.admin .dashboard-container.sub {
|
||||
width: 368px;
|
||||
width: 468px;
|
||||
}
|
||||
|
||||
.dashboard.admin .dashboard-container.sub .button.view-all,
|
||||
|
|
@ -4353,7 +4415,7 @@ textarea {
|
|||
|
||||
/**** Head*/
|
||||
.dashboard.admin .dashboard-container.head {
|
||||
width: 766px;
|
||||
width: 966px;
|
||||
height: 331px;
|
||||
margin: 9px 0 0;
|
||||
float: left;
|
||||
|
|
@ -4413,7 +4475,7 @@ textarea {
|
|||
|
||||
/**** Charts / stats*/
|
||||
.dashboard.admin .zone-stats {
|
||||
width: 774px;
|
||||
width: 974px;
|
||||
height: 316px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -4424,7 +4486,7 @@ textarea {
|
|||
}
|
||||
|
||||
.dashboard.admin .zone-stats ul {
|
||||
width: 796px;
|
||||
width: 996px;
|
||||
/*+placement:shift -2px 11px;*/
|
||||
position: relative;
|
||||
left: -2px;
|
||||
|
|
@ -4432,7 +4494,7 @@ textarea {
|
|||
}
|
||||
|
||||
.dashboard.admin .zone-stats ul li {
|
||||
width: 388px;
|
||||
width: 488px;
|
||||
font-size: 14px;
|
||||
height: 79px;
|
||||
float: left;
|
||||
|
|
@ -4452,7 +4514,7 @@ textarea {
|
|||
}
|
||||
|
||||
.dashboard.admin .zone-stats ul li .label {
|
||||
width: 111px;
|
||||
width: 161px;
|
||||
float: left;
|
||||
font-weight: 100;
|
||||
border-bottom: 1px solid #E2E2E2;
|
||||
|
|
@ -4623,7 +4685,7 @@ textarea {
|
|||
}
|
||||
|
||||
.dashboard.admin .dashboard-container.sub.alerts ul {
|
||||
width: 368px;
|
||||
width: 468px;
|
||||
height: 234px;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
|
|
@ -5083,7 +5145,7 @@ textarea {
|
|||
}
|
||||
|
||||
.system-chart.dashboard.admin .dashboard-container {
|
||||
width: 740px;
|
||||
width: 930px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
|
|
@ -5104,7 +5166,7 @@ textarea {
|
|||
}
|
||||
|
||||
.system-chart.dashboard.admin .dashboard-container .stats .chart {
|
||||
width: 136px;
|
||||
width: 300px;
|
||||
}
|
||||
|
||||
/** Compute*/
|
||||
|
|
@ -5121,7 +5183,7 @@ textarea {
|
|||
}
|
||||
|
||||
.system-chart.compute ul.resources li.zone {
|
||||
left: 96px;
|
||||
left: 196px;
|
||||
}
|
||||
|
||||
.system-chart.compute ul.resources li.zone .label {
|
||||
|
|
@ -5133,32 +5195,32 @@ textarea {
|
|||
}
|
||||
|
||||
.system-chart.compute ul.resources li.pods {
|
||||
left: 199px;
|
||||
left: 299px;
|
||||
top: 112px;
|
||||
}
|
||||
|
||||
.system-chart.compute ul.resources li.clusters {
|
||||
left: 296px;
|
||||
left: 396px;
|
||||
top: 189px;
|
||||
}
|
||||
|
||||
.system-chart.compute ul.resources li.hosts {
|
||||
left: 407px;
|
||||
left: 507px;
|
||||
top: 265px;
|
||||
}
|
||||
|
||||
.system-chart.compute ul.resources li.primaryStorage {
|
||||
left: 407px;
|
||||
left: 507px;
|
||||
top: 375px;
|
||||
}
|
||||
|
||||
.system-chart.compute ul.resources li.secondaryStorage {
|
||||
left: 199px;
|
||||
left: 299px;
|
||||
top: 497px;
|
||||
}
|
||||
|
||||
.system-chart.compute ul.resources li.ucs {
|
||||
left: 199px;
|
||||
left: 299px;
|
||||
top: 406px;
|
||||
}
|
||||
|
||||
|
|
@ -8079,6 +8141,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
.detail-view .multi-edit select {
|
||||
width: 93%;
|
||||
font-size: 10px;
|
||||
min-width: 80px;
|
||||
}
|
||||
|
||||
.multi-edit input {
|
||||
|
|
@ -9017,7 +9080,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
.network-chart li.firewall {
|
||||
/*+placement:shift 282px 188px;*/
|
||||
position: relative;
|
||||
left: 282px;
|
||||
left: 356px;
|
||||
top: 188px;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -9025,7 +9088,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
.network-chart li.loadBalancing {
|
||||
/*+placement:shift 167px 342px;*/
|
||||
position: relative;
|
||||
left: 167px;
|
||||
left: 237px;
|
||||
top: 342px;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -9033,7 +9096,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
.network-chart li.portForwarding {
|
||||
/*+placement:shift 401px 342px;*/
|
||||
position: relative;
|
||||
left: 401px;
|
||||
left: 480px;
|
||||
top: 342px;
|
||||
position: absolute;
|
||||
}
|
||||
|
|
@ -9110,7 +9173,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
/*System Dashboard*/
|
||||
.system-dashboard {
|
||||
height: 258px;
|
||||
width: 762px;
|
||||
width: 962px;
|
||||
display: block;
|
||||
/*+border-radius:3px;*/
|
||||
-moz-border-radius: 3px;
|
||||
|
|
@ -9208,7 +9271,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
position: relative;
|
||||
left: 18px;
|
||||
top: 110px;
|
||||
width: 78%;
|
||||
width: 83%;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
padding: 8px 0;
|
||||
|
|
@ -9223,7 +9286,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
|
||||
.system-dashboard .status_box li {
|
||||
height: 178px;
|
||||
width: 178px;
|
||||
width: 228px;
|
||||
padding: 0;
|
||||
margin: 0 0 0 8px;
|
||||
/*+border-radius:3px;*/
|
||||
|
|
@ -9247,7 +9310,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
padding: 65px 80px 5px;
|
||||
/*+placement:shift 31px 19px;*/
|
||||
position: relative;
|
||||
left: 31px;
|
||||
left: 51px;
|
||||
top: 19px;
|
||||
position: absolute;
|
||||
/*+opacity:56%;*/
|
||||
|
|
@ -9284,7 +9347,7 @@ div.container div.panel div#details-tab-addloadBalancer.detail-group div.loadBal
|
|||
/*+placement:shift 13px 5px;*/
|
||||
position: relative;
|
||||
left: 13px;
|
||||
top: 5px;
|
||||
top: 13px;
|
||||
font-weight: 100;
|
||||
}
|
||||
|
||||
|
|
@ -12433,6 +12496,22 @@ div.ui-dialog div.autoscaler div.field-group div.form-container form div.form-it
|
|||
background-position: 0px -707px;
|
||||
}
|
||||
|
||||
.viewMetrics .icon {
|
||||
background-position: -40px -32px;
|
||||
}
|
||||
|
||||
.viewMetrics:hover .icon {
|
||||
background-position: -40px -32px;
|
||||
}
|
||||
|
||||
.refreshMetrics .icon {
|
||||
background-position: 0px -62px;
|
||||
}
|
||||
|
||||
.refreshMetrics:hover .icon {
|
||||
background-position: 0px -62px;
|
||||
}
|
||||
|
||||
.attach .icon,
|
||||
.attachISO .icon,
|
||||
.attachDisk .icon,
|
||||
|
|
|
|||
|
|
@ -837,6 +837,41 @@ dictionary = {
|
|||
'label.menu.virtual.resources': '<fmt:message key="label.menu.virtual.resources" />',
|
||||
'label.menu.volumes': '<fmt:message key="label.menu.volumes" />',
|
||||
'label.menu.sshkeypair': '<fmt:message key="label.menu.sshkeypair" />',
|
||||
'label.metrics': '<fmt:message key="label.metrics" />',
|
||||
'label.metrics.allocated': '<fmt:message key="label.metrics.allocated" />',
|
||||
'label.metrics.clusters': '<fmt:message key="label.metrics.clusters" />',
|
||||
'label.metrics.cpu.allocated': '<fmt:message key="label.metrics.cpu.allocated" />',
|
||||
'label.metrics.cpu.max.dev': '<fmt:message key="label.metrics.cpu.max.dev" />',
|
||||
'label.metrics.cpu.total': '<fmt:message key="label.metrics.cpu.total" />',
|
||||
'label.metrics.cpu.usage': '<fmt:message key="label.metrics.cpu.usage" />',
|
||||
'label.metrics.cpu.used.avg': '<fmt:message key="label.metrics.cpu.used.avg" />',
|
||||
'label.metrics.disk': '<fmt:message key="label.metrics.disk" />',
|
||||
'label.metrics.disk.iops.total': '<fmt:message key="label.metrics.disk.iops.total" />',
|
||||
'label.metrics.disk.read': '<fmt:message key="label.metrics.disk.read" />',
|
||||
'label.metrics.disk.size': '<fmt:message key="label.metrics.disk.size" />',
|
||||
'label.metrics.disk.storagetype': '<fmt:message key="label.metrics.disk.storagetype" />',
|
||||
'label.metrics.disk.usage': '<fmt:message key="label.metrics.disk.usage" />',
|
||||
'label.metrics.disk.used': '<fmt:message key="label.metrics.disk.used" />',
|
||||
'label.metrics.disk.total': '<fmt:message key="label.metrics.disk.total" />',
|
||||
'label.metrics.disk.allocated': '<fmt:message key="label.metrics.disk.allocated" />',
|
||||
'label.metrics.disk.unallocated': '<fmt:message key="label.metrics.disk.unallocated" />',
|
||||
'label.metrics.disk.write': '<fmt:message key="label.metrics.disk.write" />',
|
||||
'label.metrics.hosts': '<fmt:message key="label.metrics.hosts" />',
|
||||
'label.metrics.memory.allocated': '<fmt:message key="label.metrics.memory.allocated" />',
|
||||
'label.metrics.memory.max.dev': '<fmt:message key="label.metrics.memory.max.dev" />',
|
||||
'label.metrics.memory.total': '<fmt:message key="label.metrics.memory.total" />',
|
||||
'label.metrics.memory.usage': '<fmt:message key="label.metrics.memory.usage" />',
|
||||
'label.metrics.memory.used.avg': '<fmt:message key="label.metrics.memory.used.avg" />',
|
||||
'label.metrics.name': '<fmt:message key="label.metrics.name" />',
|
||||
'label.metrics.network.read': '<fmt:message key="label.metrics.network.read" />',
|
||||
'label.metrics.network.usage': '<fmt:message key="label.metrics.network.usage" />',
|
||||
'label.metrics.network.write': '<fmt:message key="label.metrics.network.write" />',
|
||||
'label.metrics.num.cpu.cores': '<fmt:message key="label.metrics.num.cpu.cores" />',
|
||||
'label.metrics.property': '<fmt:message key="label.metrics.property" />',
|
||||
'label.metrics.scope': '<fmt:message key="label.metrics.scope" />',
|
||||
'label.metrics.state': '<fmt:message key="label.metrics.state" />',
|
||||
'label.metrics.storagepool': '<fmt:message key="label.metrics.storagepool" />',
|
||||
'label.metrics.vm.name': '<fmt:message key="label.metrics.vm.name" />',
|
||||
'label.migrate.instance.to': '<fmt:message key="label.migrate.instance.to" />',
|
||||
'label.migrate.instance.to.host': '<fmt:message key="label.migrate.instance.to.host" />',
|
||||
'label.migrate.instance.to.ps': '<fmt:message key="label.migrate.instance.to.ps" />',
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 22 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 21 KiB After Width: | Height: | Size: 9.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB After Width: | Height: | Size: 194 KiB |
|
|
@ -1800,6 +1800,7 @@
|
|||
<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>
|
||||
|
|
@ -1836,6 +1837,7 @@
|
|||
<script type="text/javascript" src="scripts/vm_snapshots.js"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/projectSelect.js"></script>
|
||||
<script type="text/javascript" src="scripts/ui-custom/saml.js"></script>
|
||||
<script type="text/javascript" src="scripts/metrics.js"></script>
|
||||
|
||||
<!-- Plugin/module API -->
|
||||
<script type="text/javascript" src="scripts/ui-custom/pluginListing.js"></script>
|
||||
|
|
|
|||
|
|
@ -165,6 +165,26 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Update global pagesize for list APIs in UI
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
url: createURL('listConfigurations'),
|
||||
data: {name: 'default.ui.page.size'},
|
||||
dataType: 'json',
|
||||
async: false,
|
||||
success: function(data, textStatus, xhr) {
|
||||
if (data && data.listconfigurationsresponse && data.listconfigurationsresponse.configuration) {
|
||||
var config = data.listconfigurationsresponse.configuration[0];
|
||||
if (config && config.name == 'default.ui.page.size') {
|
||||
pageSize = parseInt(config.value);
|
||||
}
|
||||
}
|
||||
},
|
||||
error: function(xhr) { // ignore any errors, fallback to the default
|
||||
},
|
||||
});
|
||||
|
||||
|
||||
// Populate IDP list
|
||||
$.ajax({
|
||||
type: 'GET',
|
||||
|
|
|
|||
|
|
@ -170,6 +170,9 @@
|
|||
label: 'label.display.name',
|
||||
truncate: true
|
||||
},
|
||||
ipaddress: {
|
||||
label: 'label.ip.address'
|
||||
},
|
||||
zonename: {
|
||||
label: 'label.zone.name'
|
||||
},
|
||||
|
|
@ -294,7 +297,20 @@
|
|||
poll: pollAsyncJobResult
|
||||
}
|
||||
},
|
||||
snapshot: vmSnapshotAction({ listView: true })
|
||||
snapshot: vmSnapshotAction({ listView: true }),
|
||||
viewMetrics: {
|
||||
label: 'label.metrics',
|
||||
isHeader: true,
|
||||
addRow: false,
|
||||
action: {
|
||||
custom: cloudStack.uiCustom.metricsView({resource: 'vms'})
|
||||
},
|
||||
messages: {
|
||||
notification: function (args) {
|
||||
return 'label.metrics';
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
dataProvider: function(args) {
|
||||
|
|
@ -381,6 +397,11 @@
|
|||
data: data,
|
||||
success: function(json) {
|
||||
var items = json.listvirtualmachinesresponse.virtualmachine;
|
||||
$.each(items, function(idx, vm) {
|
||||
if (vm.nic && vm.nic.length > 0 && vm.nic[0].ipaddress) {
|
||||
items[idx].ipaddress = vm.nic[0].ipaddress;
|
||||
}
|
||||
});
|
||||
args.response.success({
|
||||
data: items
|
||||
});
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -245,6 +245,20 @@
|
|||
}
|
||||
},
|
||||
|
||||
viewMetrics: {
|
||||
label: 'label.metrics',
|
||||
isHeader: true,
|
||||
addRow: false,
|
||||
action: {
|
||||
custom: cloudStack.uiCustom.metricsView({resource: 'volumes'})
|
||||
},
|
||||
messages: {
|
||||
notification: function (args) {
|
||||
return 'label.metrics';
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
uploadVolume: {
|
||||
isHeader: true,
|
||||
label: 'label.upload',
|
||||
|
|
|
|||
|
|
@ -7709,7 +7709,7 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
show: cloudStack.uiCustom.physicalResources({
|
||||
physicalResourceSection: {
|
||||
sections: {
|
||||
physicalResources: {
|
||||
type: 'select',
|
||||
|
|
@ -7792,7 +7792,20 @@
|
|||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
viewMetrics: {
|
||||
label: 'label.metrics',
|
||||
isHeader: true,
|
||||
addRow: false,
|
||||
action: {
|
||||
custom: cloudStack.uiCustom.metricsView({resource: 'zones'})
|
||||
},
|
||||
messages: {
|
||||
notification: function (args) {
|
||||
return 'label.metrics';
|
||||
}
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
detailView: {
|
||||
|
|
@ -9484,7 +9497,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}),
|
||||
},
|
||||
subsections: {
|
||||
virtualRouters: {
|
||||
sectionSelect: {
|
||||
|
|
@ -14524,6 +14537,19 @@
|
|||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
viewMetrics: {
|
||||
label: 'label.metrics',
|
||||
isHeader: true,
|
||||
addRow: false,
|
||||
action: {
|
||||
custom: cloudStack.uiCustom.metricsView({resource: 'clusters'})
|
||||
},
|
||||
messages: {
|
||||
notification: function (args) {
|
||||
return 'label.metrics';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -15226,11 +15252,12 @@
|
|||
}
|
||||
|
||||
if (! args.context.instances) {
|
||||
array1.push("&zoneid=" + args.context.zones[0].id);
|
||||
if ("zones" in args.context)
|
||||
array1.push("&zoneid=" + args.context.zones[0].id);
|
||||
if ("pods" in args.context)
|
||||
array1.push("&podid=" + args.context.pods[0].id);
|
||||
array1.push("&podid=" + args.context.pods[0].id);
|
||||
if ("clusters" in args.context)
|
||||
array1.push("&clusterid=" + args.context.clusters[0].id);
|
||||
array1.push("&clusterid=" + args.context.clusters[0].id);
|
||||
} else {
|
||||
//Instances menu > Instance detailView > View Hosts
|
||||
array1.push("&id=" + args.context.instances[0].hostid);
|
||||
|
|
@ -15833,6 +15860,19 @@
|
|||
return 'label.add.host';
|
||||
}
|
||||
}
|
||||
},
|
||||
viewMetrics: {
|
||||
label: 'label.metrics',
|
||||
isHeader: true,
|
||||
addRow: false,
|
||||
action: {
|
||||
custom: cloudStack.uiCustom.metricsView({resource: 'hosts'})
|
||||
},
|
||||
messages: {
|
||||
notification: function (args) {
|
||||
return 'label.metrics';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
detailView: {
|
||||
|
|
@ -17647,6 +17687,19 @@
|
|||
return 'label.add.primary.storage';
|
||||
}
|
||||
}
|
||||
},
|
||||
viewMetrics: {
|
||||
label: 'label.metrics',
|
||||
isHeader: true,
|
||||
addRow: false,
|
||||
action: {
|
||||
custom: cloudStack.uiCustom.metricsView({resource: 'storagepool'})
|
||||
},
|
||||
messages: {
|
||||
notification: function (args) {
|
||||
return 'label.metrics';
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
@ -19883,6 +19936,9 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Inject cloudStack infra page
|
||||
cloudStack.sections.system.show = cloudStack.uiCustom.physicalResources(cloudStack.sections.system.physicalResourceSection);
|
||||
|
||||
function addExternalLoadBalancer(args, physicalNetworkObj, apiCmd, apiCmdRes, apiCmdObj) {
|
||||
var array1 =[];
|
||||
array1.push("&physicalnetworkid=" + physicalNetworkObj.id);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,140 @@
|
|||
// 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.
|
||||
(function($, cloudStack) {
|
||||
|
||||
cloudStack.uiCustom.metricsView = function(args) {
|
||||
return function() {
|
||||
var metricsListView = cloudStack.sections.metrics.listView;
|
||||
var metricsLabel = _l('label.metrics');
|
||||
|
||||
if (args.resource == 'zones') {
|
||||
metricsListView = cloudStack.sections.metrics.zones.listView;
|
||||
metricsLabel = _l('label.zones') + ' ' + metricsLabel;
|
||||
} else if (args.resource == 'clusters') {
|
||||
metricsListView = cloudStack.sections.metrics.clusters.listView;
|
||||
metricsLabel = _l('label.clusters') + ' ' + metricsLabel;
|
||||
} else if (args.resource == 'hosts') {
|
||||
metricsListView = cloudStack.sections.metrics.hosts.listView;
|
||||
metricsLabel = _l('label.hosts') + ' ' + metricsLabel;
|
||||
} else if (args.resource == 'storagepool') {
|
||||
metricsListView = cloudStack.sections.metrics.storagepool.listView;
|
||||
metricsLabel = _l('label.primary.storage') + ' ' + metricsLabel;
|
||||
} else if (args.resource == 'vms') {
|
||||
metricsListView = cloudStack.sections.metrics.instances.listView;
|
||||
metricsLabel = _l('label.instances') + ' ' + metricsLabel;
|
||||
} else if (args.resource == 'volumes') {
|
||||
metricsListView = cloudStack.sections.metrics.volumes.listView;
|
||||
metricsLabel = _l('label.volumes') + ' ' + metricsLabel;
|
||||
}
|
||||
|
||||
// list view refresh button
|
||||
metricsListView.actions = {
|
||||
refreshMetrics: {
|
||||
label: 'label.refresh',
|
||||
isHeader: true,
|
||||
addRow: true,
|
||||
action: {
|
||||
custom: function (args) {
|
||||
return function() {
|
||||
};
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
metricsListView.hideSearchBar = true;
|
||||
metricsListView.needsRefresh = true;
|
||||
metricsListView.noSplit = true;
|
||||
metricsListView.horizontalOverflow = true;
|
||||
metricsListView.groupableColumns = true;
|
||||
|
||||
if (args.resource == 'volumes') {
|
||||
metricsListView.groupableColumns = false;
|
||||
}
|
||||
|
||||
var metricsContext = cloudStack.context;
|
||||
if (metricsContext.metricsFilterData) {
|
||||
delete metricsContext.metricsFilterData;
|
||||
}
|
||||
if (args.filterBy) {
|
||||
metricsContext.metricsFilterData = {
|
||||
key: args.filterBy,
|
||||
value: args.id
|
||||
};
|
||||
}
|
||||
|
||||
var $browser = $('#browser .container');
|
||||
return $browser.cloudBrowser('addPanel', {
|
||||
title: metricsLabel,
|
||||
maximizeIfSelected: true,
|
||||
complete: function($newPanel) {
|
||||
$newPanel.listView({
|
||||
$browser: $browser,
|
||||
context: metricsContext,
|
||||
listView: metricsListView
|
||||
});
|
||||
// Make metrics tables horizontally scrollable
|
||||
$newPanel.find('.list-view').css({'overflow-x': 'visible'});
|
||||
// Refresh metrics when refresh button is clicked
|
||||
$newPanel.find('.refreshMetrics').click(function() {
|
||||
var sortedTh = $newPanel.find('table thead tr:last th.sorted');
|
||||
var thIndex = sortedTh.index();
|
||||
var thClassName = null;
|
||||
var wasSorted = false;
|
||||
var sortClassName = 'asc';
|
||||
if (sortedTh && sortedTh.hasClass('sorted')) {
|
||||
wasSorted = true;
|
||||
var classes = sortedTh.attr('class').split(/\s+/);
|
||||
thClassName = classes[0];
|
||||
if (classes.indexOf('desc') > -1) {
|
||||
sortClassName = 'desc';
|
||||
}
|
||||
}
|
||||
$browser.cloudBrowser('removeLastPanel', {});
|
||||
var refreshedPanel = cloudStack.uiCustom.metricsView(args)();
|
||||
if (wasSorted && thClassName) {
|
||||
refreshedPanel.find('th.' + thClassName).filter(function() {
|
||||
return $(this).index() == thIndex;
|
||||
}).addClass('sorted').addClass(sortClassName);
|
||||
}
|
||||
});
|
||||
|
||||
var filterMetricView = metricsListView.browseBy;
|
||||
if (filterMetricView) {
|
||||
$newPanel.bind('click', function(event) {
|
||||
event.stopPropagation();
|
||||
var $target = $(event.target);
|
||||
var id = $target.closest('tr').data('list-view-item-id');
|
||||
var jsonObj = $target.closest('tr').data('jsonObj');
|
||||
if (filterMetricView.filterKey && jsonObj) {
|
||||
if (jsonObj.hasOwnProperty(filterMetricView.filterKey)) {
|
||||
id = jsonObj[filterMetricView.filterKey];
|
||||
} else {
|
||||
return; // return if provided key is missing
|
||||
}
|
||||
}
|
||||
if (id && ($target.hasClass('first') || $target.parent().hasClass('first')) && ($target.is('td') || $target.parent().is('td'))) {
|
||||
filterMetricView.id = id;
|
||||
cloudStack.uiCustom.metricsView(filterMetricView)();
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
})(jQuery, cloudStack);
|
||||
|
|
@ -321,6 +321,14 @@
|
|||
return $panel;
|
||||
},
|
||||
|
||||
removeLastPanel: function(args) {
|
||||
$('div.panel:last').stop(); // Prevent destroyed panels from animating
|
||||
this.element.find('div.panel:last').remove();
|
||||
this.element.find('div.panel:last').removeClass('reduced');
|
||||
$('#breadcrumbs').find('ul li:last').remove();
|
||||
$('#breadcrumbs').find('ul div.end').remove();
|
||||
},
|
||||
|
||||
/**
|
||||
* Clear all panels
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -141,49 +141,100 @@
|
|||
* @param columnIndex Index of column (starting at 0) to sort by
|
||||
*/
|
||||
var sortTable = function(columnIndex) {
|
||||
return false;
|
||||
var direction = 'asc';
|
||||
|
||||
if ($table.find('thead th').hasClass('sorted ' + direction)) {
|
||||
if ($table.find('thead tr:last th').hasClass('sorted ' + direction)) {
|
||||
direction = 'desc';
|
||||
}
|
||||
|
||||
$table.find('thead th').removeClass('sorted desc asc');
|
||||
$($table.find('thead th')[columnIndex]).addClass('sorted').addClass(direction);
|
||||
$table.find('thead tr:last th').removeClass('sorted desc asc');
|
||||
$($table.find('thead tr:last th')[columnIndex]).addClass('sorted').addClass(direction);
|
||||
|
||||
var $elems = $table.find('tbody td').filter(function() {
|
||||
return $(this).index() == columnIndex;
|
||||
});
|
||||
|
||||
var sortData = [];
|
||||
$elems.each(function() {
|
||||
sortData.push($(this).html());
|
||||
sortData.sort();
|
||||
if ($elems.length < 2) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (direction == 'asc') {
|
||||
sortData.reverse();
|
||||
var stringComparator = function(a,b) {
|
||||
return a.html().localeCompare(b.html());
|
||||
};
|
||||
var numericComparator = function(a,b) {
|
||||
return parseFloat(a.children().html()) < parseFloat(b.children().html()) ? 1 : -1;
|
||||
};
|
||||
var stateComparator = function(a,b) {
|
||||
return a.attr('title').localeCompare(b.attr('title'));
|
||||
};
|
||||
var isNumeric = function(obj) {
|
||||
return !$.isArray(obj) && !isNaN(parseFloat(obj)) && isFinite(parseFloat(obj));
|
||||
}
|
||||
|
||||
var comparator = stringComparator;
|
||||
var hasAllRowsSameValue = true;
|
||||
var firstElem = $($elems[0]).html();
|
||||
var sortData = [];
|
||||
var numericDataCount = 0;
|
||||
$elems.each(function() {
|
||||
var text = $(this);
|
||||
if (hasAllRowsSameValue) {
|
||||
if (firstElem !== text.html()) {
|
||||
hasAllRowsSameValue = false;
|
||||
}
|
||||
}
|
||||
if (text.children()) {
|
||||
text = text.children().html();
|
||||
} else {
|
||||
text = text.html();
|
||||
}
|
||||
if (isNumeric(text) || !text) {
|
||||
numericDataCount += 1;
|
||||
}
|
||||
sortData.push($(this));
|
||||
});
|
||||
|
||||
$(sortData).each(function() {
|
||||
var sortKey = this;
|
||||
var $targetCell = $elems.filter(function() {
|
||||
return $(this).html() == sortKey;
|
||||
});
|
||||
var $targetContainer = $targetCell.parent();
|
||||
if ($($elems[0]).hasClass('state')) {
|
||||
comparator = stateComparator;
|
||||
} else {
|
||||
if (hasAllRowsSameValue) {
|
||||
return;
|
||||
}
|
||||
if (columnIndex != 0 && numericDataCount > ($elems.length / 4)) {
|
||||
comparator = numericComparator;
|
||||
}
|
||||
}
|
||||
|
||||
$targetContainer.remove().appendTo($table.find('tbody'));
|
||||
sortData.sort(comparator);
|
||||
|
||||
if (direction == 'asc') {
|
||||
sortData.reverse();
|
||||
}
|
||||
|
||||
var elements = [];
|
||||
$(sortData).each(function() {
|
||||
elements.push($(this).parent().clone(true));
|
||||
});
|
||||
|
||||
var $tbody = $table.find('tbody');
|
||||
$tbody.empty();
|
||||
$(elements).each(function() {
|
||||
$(this).appendTo($tbody);
|
||||
});
|
||||
|
||||
computeEvenOddRows();
|
||||
};
|
||||
|
||||
var resizeHeaders = function() {
|
||||
var $thead = $table.closest('div.data-table').find('thead');
|
||||
var $thead = $table.hasClass('no-split') ? $table.find('thead') : $table.closest('div.data-table').find('thead');
|
||||
var $tbody = $table.find('tbody');
|
||||
var $ths = $thead.find('th');
|
||||
var $tds = $tbody.find('tr:first td');
|
||||
|
||||
if ($table.hasClass('no-split')) {
|
||||
$tbody.width($thead.width());
|
||||
}
|
||||
|
||||
if ($ths.size() > $tds.size()) {
|
||||
$ths.width(
|
||||
$table.width() / $ths.size()
|
||||
|
|
@ -194,6 +245,10 @@
|
|||
$ths.each(function() {
|
||||
var $th = $(this);
|
||||
|
||||
if ($th.hasClass('collapsible-column')) {
|
||||
return true;
|
||||
}
|
||||
|
||||
var $td = $tds.filter(function() {
|
||||
return $(this).index() == $th.index();
|
||||
});
|
||||
|
|
@ -238,9 +293,12 @@
|
|||
$table.find('tbody').closest('table').addClass('body');
|
||||
}
|
||||
|
||||
$table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
|
||||
$table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout', resizeDragEvent);
|
||||
$table.find('th:not(:has(input))').bind('click', function(event) {
|
||||
if (!$table.hasClass('horizontal-overflow')) {
|
||||
$table.find('th:not(:has(input))').bind('mousemove mouseout', hoverResizableEvent);
|
||||
$table.find('th:not(:has(input))').bind('mousedown mousemove mouseup mouseout', resizeDragEvent);
|
||||
}
|
||||
|
||||
$table.find('thead tr:last th:not(:has(input)):not(.collapsible-column):not(.quick-view)').unbind('click').bind('click', function(event) {
|
||||
if ($(this).hasClass('resizable')) {
|
||||
return false;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -765,10 +765,12 @@
|
|||
var createHeader = function(preFilter, fields, $table, actions, options) {
|
||||
if (!options) options = {};
|
||||
|
||||
var $thead = $('<thead>').prependTo($table).append($('<tr>'));
|
||||
var $tr = $('<tr>');
|
||||
var $thead = $('<thead>').prependTo($table).append($tr);
|
||||
var reorder = options.reorder;
|
||||
var detailView = options.detailView;
|
||||
var multiSelect = options.multiSelect;
|
||||
var groupableColumns = options.groupableColumns;
|
||||
var viewArgs = $table.closest('.list-view').data('view-args');
|
||||
var uiCustom = viewArgs.uiCustom;
|
||||
var hiddenFields = [];
|
||||
|
|
@ -776,8 +778,110 @@
|
|||
if (preFilter != null)
|
||||
hiddenFields = preFilter();
|
||||
|
||||
var addColumnToTr = function($tr, key, colspan, label, needsCollapsibleColumn) {
|
||||
var trText = _l(label);
|
||||
var $th = $('<th>').addClass(key).attr('colspan', colspan).appendTo($tr);
|
||||
if ($th.index()) $th.addClass('reduced-hide');
|
||||
$th.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px solid #C6C3C3'});
|
||||
if (needsCollapsibleColumn) {
|
||||
var karetLeft = $('<span>').css({'margin-right': '10px'});
|
||||
karetLeft.attr('title', trText);
|
||||
karetLeft.appendTo($th);
|
||||
$('<span>').html('«').css({'font-size': '15px', 'float': 'right'}).appendTo(karetLeft);
|
||||
$('<span>').html(trText).appendTo(karetLeft);
|
||||
|
||||
$th.click(function(event) {
|
||||
event.stopPropagation();
|
||||
var $th = $(this);
|
||||
var startIndex = 0;
|
||||
$th.prevAll('th').each(function() {
|
||||
startIndex += parseInt($(this).attr('colspan'));
|
||||
});
|
||||
var endIndex = startIndex + parseInt($th.attr('colspan'));
|
||||
// Hide Column group
|
||||
$th.hide();
|
||||
$th.closest('table').find('tbody td').filter(function() {
|
||||
return $(this).index() >= startIndex && $(this).index() < endIndex;
|
||||
}).hide();
|
||||
$th.closest('table').find('thead tr:last th').filter(function() {
|
||||
return $(this).index() >= startIndex && $(this).index() < endIndex;
|
||||
}).hide();
|
||||
// Show collapsible column with blank cells
|
||||
$th.next('th').show();
|
||||
$th.closest('table').find('tbody td').filter(function() {
|
||||
return $(this).index() == endIndex;
|
||||
}).show();
|
||||
$th.closest('table').find('thead tr:last th').filter(function() {
|
||||
return $(this).index() == endIndex;
|
||||
}).show();
|
||||
// Refresh list view
|
||||
$tr.closest('.list-view').find('.no-split').dataTable('refresh');
|
||||
});
|
||||
|
||||
var karetRight = addColumnToTr($tr, 'collapsible-column', 1, '');
|
||||
$('<span>').html(trText.substring(0,3)).appendTo(karetRight);
|
||||
$('<span>').css({'font-size': '15px'}).html(' »').appendTo(karetRight);
|
||||
karetRight.attr('title', trText);
|
||||
karetRight.css({'border-right': '1px solid #C6C3C3', 'border-left': '1px solid #C6C3C3', 'min-width': '10px', 'width': '10px', 'max-width': '45px', 'padding': '2px'});
|
||||
karetRight.hide();
|
||||
karetRight.click(function(event) {
|
||||
event.stopPropagation();
|
||||
var prevTh = $(this).prev('th');
|
||||
var startIndex = 0;
|
||||
prevTh.prevAll('th').each(function() {
|
||||
startIndex += parseInt($(this).attr('colspan'));
|
||||
});
|
||||
var endIndex = startIndex + parseInt(prevTh.attr('colspan'));
|
||||
|
||||
prevTh.show();
|
||||
prevTh.closest('table').find('tbody td').filter(function() {
|
||||
return $(this).index() >= startIndex && $(this).index() < endIndex;
|
||||
}).show();
|
||||
prevTh.closest('table').find('thead tr:last th').filter(function() {
|
||||
return $(this).index() >= startIndex && $(this).index() < endIndex;
|
||||
}).show();
|
||||
|
||||
prevTh.next('th').hide();
|
||||
prevTh.closest('table').find('tbody td').filter(function() {
|
||||
return $(this).index() == endIndex;
|
||||
}).hide();
|
||||
prevTh.closest('table').find('thead tr:last th').filter(function() {
|
||||
return $(this).index() == endIndex;
|
||||
}).hide();
|
||||
|
||||
$tr.closest('.list-view').find('.no-split').dataTable('refresh');
|
||||
});
|
||||
} else {
|
||||
$th.html(trText);
|
||||
}
|
||||
return $th;
|
||||
};
|
||||
|
||||
if (groupableColumns) {
|
||||
$tr.addClass('groupable-header-columns').addClass('groupable-header');
|
||||
$.each(fields, function(key) {
|
||||
var field = this;
|
||||
if (field.columns) {
|
||||
var colspan = Object.keys(field.columns).length;
|
||||
addColumnToTr($tr, key, colspan, field.label, true);
|
||||
} else {
|
||||
var label = '';
|
||||
if (key == 'name') {
|
||||
label = 'label.resources';
|
||||
}
|
||||
addColumnToTr($tr, key, 1, label);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
if (detailView && !$.isFunction(detailView) && !detailView.noCompact && !uiCustom) {
|
||||
addColumnToTr($tr, 'quick-view', 1, '');
|
||||
}
|
||||
$tr = $('<tr>').appendTo($thead);
|
||||
$tr.addClass('groupable-header');
|
||||
}
|
||||
|
||||
if (multiSelect) {
|
||||
var $th = $('<th>').addClass('multiselect').appendTo($thead.find('tr'));
|
||||
var $th = $('<th>').addClass('multiselect').appendTo($tr);
|
||||
var content = $('<input>')
|
||||
.attr('type', 'checkbox')
|
||||
.addClass('multiSelectMasterCheckbox')
|
||||
|
|
@ -794,18 +898,24 @@
|
|||
if ($.inArray(key, hiddenFields) != -1)
|
||||
return true;
|
||||
var field = this;
|
||||
var $th = $('<th>').addClass(key).appendTo($thead.find('tr'));
|
||||
|
||||
if ($th.index()) $th.addClass('reduced-hide');
|
||||
|
||||
$th.html(_l(field.label));
|
||||
|
||||
if (field.columns) {
|
||||
$.each(field.columns, function(idx) {
|
||||
var subfield = this;
|
||||
addColumnToTr($tr, key, 1, subfield.label);
|
||||
return true;
|
||||
});
|
||||
var blankCell = addColumnToTr($tr, 'collapsible-column', 1, '');
|
||||
blankCell.css({'min-width': '10px', 'width': '10px'});
|
||||
blankCell.hide();
|
||||
} else {
|
||||
addColumnToTr($tr, key, 1, field.label);
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Re-order row buttons
|
||||
if (reorder) {
|
||||
$thead.find('tr').append(
|
||||
$tr.append(
|
||||
$('<th>').html(_l('label.order')).addClass('reorder-actions reduced-hide')
|
||||
);
|
||||
}
|
||||
|
|
@ -826,7 +936,7 @@
|
|||
);
|
||||
|
||||
if (actions && !options.noActionCol && renderActionCol(actions) && actionsArray.length != headerActionsArray.length) {
|
||||
$thead.find('tr').append(
|
||||
$tr.append(
|
||||
$('<th></th>')
|
||||
.html(_l('label.actions'))
|
||||
.addClass('actions reduced-hide')
|
||||
|
|
@ -835,7 +945,7 @@
|
|||
|
||||
// Quick view
|
||||
if (detailView && !$.isFunction(detailView) && !detailView.noCompact && !uiCustom) {
|
||||
$thead.find('tr').append(
|
||||
$tr.append(
|
||||
$('<th></th>')
|
||||
.html(_l('label.quickview'))
|
||||
.addClass('quick-view reduced-hide')
|
||||
|
|
@ -1033,6 +1143,7 @@
|
|||
var listViewArgs = $listView.data('view-args');
|
||||
var uiCustom = listViewArgs.uiCustom;
|
||||
var subselect = uiCustom ? listViewArgs.listView.subselect : null;
|
||||
var hasCollapsibleColumn = false;
|
||||
|
||||
if (!(data && data.length)) {
|
||||
$listView.data('end-of-table', true);
|
||||
|
|
@ -1088,8 +1199,25 @@
|
|||
);
|
||||
}
|
||||
|
||||
// Add field data
|
||||
var reducedFields = {};
|
||||
var idx = 0;
|
||||
$.each(fields, function(key) {
|
||||
var field = this;
|
||||
if (field.columns) {
|
||||
$.each(field.columns, function(innerKey) {
|
||||
reducedFields[innerKey] = this;
|
||||
});
|
||||
reducedFields['blank-cell-' + idx] = {blankCell: true};
|
||||
idx += 1;
|
||||
hasCollapsibleColumn = true;
|
||||
} else {
|
||||
reducedFields[key] = this;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
|
||||
// Add field data
|
||||
$.each(reducedFields, function(key) {
|
||||
if ($.inArray(key, hiddenFields) != -1)
|
||||
return true;
|
||||
var field = this;
|
||||
|
|
@ -1103,6 +1231,11 @@
|
|||
$td.addClass('truncated');
|
||||
}
|
||||
|
||||
if (field.blankCell) {
|
||||
$td.css({'min-width': '10px', 'width': '10px'});
|
||||
$td.hide();
|
||||
}
|
||||
|
||||
if (field.indicator) {
|
||||
$td.addClass('state').addClass(field.indicator[content]);
|
||||
|
||||
|
|
@ -1110,6 +1243,19 @@
|
|||
//$tr.find('td:first').addClass('item-state-' + field.indicator[content]);
|
||||
}
|
||||
|
||||
if (field.thresholdcolor && field.thresholds) {
|
||||
if ((field.thresholds.disable in dataItem) && (field.thresholds.notification in dataItem)) {
|
||||
var disableThreshold = parseFloat(dataItem[field.thresholds.disable]);
|
||||
var notificationThreshold = parseFloat(dataItem[field.thresholds.notification]);
|
||||
var value = parseFloat(content);
|
||||
if (value >= disableThreshold) {
|
||||
$td.addClass('alert-disable-threshold');
|
||||
} else if (value >= notificationThreshold) {
|
||||
$td.addClass('alert-notification-threshold');
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (field.id == true) id = field.id;
|
||||
if ($td.index()) $td.addClass('reduced-hide');
|
||||
if (field.action) {
|
||||
|
|
@ -1140,9 +1286,12 @@
|
|||
$('<pre>').html(_s(content))
|
||||
);
|
||||
} else {
|
||||
$td.append(
|
||||
$('<span>').html(_s(content))
|
||||
);
|
||||
var span = $('<span>').html(_s(content));
|
||||
if (field.compact) {
|
||||
span.addClass('compact');
|
||||
span.html('');
|
||||
}
|
||||
$td.append(span);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1380,8 +1529,8 @@
|
|||
.appendTo($tr);
|
||||
$quickView.mouseover(
|
||||
// Show quick view
|
||||
|
||||
function() {
|
||||
var $quickView = $(this);
|
||||
var $quickViewTooltip = $('<div>').addClass('quick-view-tooltip hovered-elem');
|
||||
var $tr = $quickView.closest('tr');
|
||||
var $listView = $tr.closest('.list-view');
|
||||
|
|
@ -1465,7 +1614,7 @@
|
|||
});
|
||||
$quickViewTooltip.css({
|
||||
position: 'absolute',
|
||||
left: $tr.offset().left + $tr.width() - $quickViewTooltip.width(),
|
||||
left: $quickView.offset().left + $quickView.outerWidth() - $quickViewTooltip.width() - 2*(parseInt($quickView.css('border-left-width')) + parseInt($quickView.css('border-right-width'))),
|
||||
top: $quickView.offset().top,
|
||||
zIndex: $tr.closest('.panel').zIndex() + 1
|
||||
});
|
||||
|
|
@ -1480,6 +1629,14 @@
|
|||
}
|
||||
});
|
||||
|
||||
// Toggle collapsible column to fix alignment of hidden/shown cells
|
||||
if (hasCollapsibleColumn) {
|
||||
$tbody.closest('table').find('tr:first th.collapsible-column:visible').prev('th').click();
|
||||
}
|
||||
|
||||
// Re-sort table if a column was previously sorted
|
||||
$listView.find('thead tr:last th.sorted').click().click();
|
||||
|
||||
return rows;
|
||||
};
|
||||
|
||||
|
|
@ -1798,8 +1955,19 @@
|
|||
reorder: reorder,
|
||||
detailView: listViewData.detailView,
|
||||
'multiSelect': multiSelect,
|
||||
noActionCol: listViewData.noActionCol
|
||||
noActionCol: listViewData.noActionCol,
|
||||
groupableColumns: listViewData.groupableColumns
|
||||
});
|
||||
|
||||
if (listViewData.noSplit) {
|
||||
$table.addClass('no-split');
|
||||
}
|
||||
|
||||
if (listViewData.horizontalOverflow) {
|
||||
$table.addClass('horizontal-overflow');
|
||||
$table.parent().css({'overflow-x': 'auto'});
|
||||
}
|
||||
|
||||
createFilters($toolbar, listViewData.filters);
|
||||
|
||||
if (listViewData.hideSearchBar != true) {
|
||||
|
|
|
|||
Loading…
Reference in New Issue