2371c1e371
a panel for a single datastore that gets updated from an external caller shows the usage, estimated full date, history and task summary grid a panel that dynamically generates the panel above for each datastore and a tabpanel that includes the panel above, as well as a global syncview, verifiyview and aclview Signed-off-by: Dominik Csapak <d.csapak@proxmox.com>
139 lines
2.6 KiB
JavaScript
139 lines
2.6 KiB
JavaScript
// Summary Panel for a single datastore in overview
|
|
Ext.define('PBS.datastore.DataStoreListSummary', {
|
|
extend: 'Ext.panel.Panel',
|
|
alias: 'widget.pbsDataStoreListSummary',
|
|
mixins: ['Proxmox.Mixin.CBind'],
|
|
|
|
cbind: {
|
|
title: '{datastore}',
|
|
},
|
|
bodyPadding: 10,
|
|
|
|
viewModel: {
|
|
data: {
|
|
usage: "N/A",
|
|
full: "N/A",
|
|
history: [],
|
|
},
|
|
|
|
stores: {
|
|
historystore: {
|
|
data: [],
|
|
},
|
|
},
|
|
},
|
|
setTasks: function(taskdata, since) {
|
|
let me = this;
|
|
me.down('pbsTaskSummary').updateTasks(taskdata, since);
|
|
},
|
|
|
|
setStatus: function(statusData) {
|
|
let me = this;
|
|
let vm = me.getViewModel();
|
|
vm.set('usagetext', PBS.Utils.render_size_usage(statusData.used, statusData.total));
|
|
vm.set('usage', statusData.used/statusData.total);
|
|
let estimate = PBS.Utils.render_estimate(statusData['estimated-full-date']);
|
|
vm.set('full', estimate);
|
|
let last = 0;
|
|
let data = statusData.history.map((val) => {
|
|
if (val === null) {
|
|
val = last;
|
|
} else {
|
|
last = val;
|
|
}
|
|
return val;
|
|
});
|
|
let historyStore = vm.getStore('historystore');
|
|
historyStore.setData([
|
|
{
|
|
history: data,
|
|
},
|
|
]);
|
|
},
|
|
|
|
items: [
|
|
{
|
|
xtype: 'container',
|
|
layout: {
|
|
type: 'hbox',
|
|
align: 'stretch',
|
|
},
|
|
|
|
defaults: {
|
|
flex: 1,
|
|
padding: 5,
|
|
},
|
|
|
|
items: [
|
|
{
|
|
xtype: 'pmxInfoWidget',
|
|
iconCls: 'fa fa-fw fa-hdd-o',
|
|
title: gettext('Usage'),
|
|
bind: {
|
|
data: {
|
|
usage: '{usage}',
|
|
text: '{usagetext}',
|
|
},
|
|
},
|
|
},
|
|
{
|
|
xtype: 'pmxInfoWidget',
|
|
title: gettext('Estimated Full'),
|
|
printBar: false,
|
|
bind: {
|
|
data: {
|
|
usage: '0',
|
|
text: '{full}',
|
|
},
|
|
},
|
|
},
|
|
],
|
|
},
|
|
{
|
|
// we cannot autosize a sparklineline widget,
|
|
// abuse a grid with a single column/row to do it for us
|
|
xtype: 'grid',
|
|
hideHeaders: true,
|
|
minHeight: 50,
|
|
border: false,
|
|
bodyBorder: false,
|
|
rowLines: false,
|
|
disableSelection: true,
|
|
viewConfig: {
|
|
trackOver: false,
|
|
},
|
|
bind: {
|
|
store: '{historystore}',
|
|
},
|
|
columns: [{
|
|
xtype: 'widgetcolumn',
|
|
flex: 1,
|
|
dataIndex: 'history',
|
|
widget: {
|
|
xtype: 'sparklineline',
|
|
bind: '{record.history}',
|
|
spotRadius: 0,
|
|
fillColor: '#ddd',
|
|
lineColor: '#555',
|
|
lineWidth: 0,
|
|
chartRangeMin: 0,
|
|
chartRangeMax: 1,
|
|
tipTpl: '{y:number("0.00")*100}%',
|
|
height: 40,
|
|
},
|
|
}],
|
|
},
|
|
{
|
|
xtype: 'pbsTaskSummary',
|
|
border: false,
|
|
header: false,
|
|
subPanelModal: true,
|
|
bodyPadding: 0,
|
|
minHeight: 0,
|
|
cbind: {
|
|
datastore: '{datastore}',
|
|
},
|
|
},
|
|
],
|
|
});
|