proxmox-backup/www/datastore/DataStoreListSummary.js

// 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}',
    },

    referenceHolder: true,
    bodyPadding: 10,

    layout: {
	type: 'hbox',
	align: 'stretch',
    },

    viewModel: {
	data: {
	    full: "N/A",
	    stillbad: 0,
	    deduplication: 1.0,
	},
    },
    setTasks: function(taskdata, since) {
	let me = this;
	me.down('pbsTaskSummary').updateTasks(taskdata, since);
    },

    setStatus: function(statusData) {
	let me = this;
	let vm = me.getViewModel();

	let usage = statusData.used/statusData.total;
	let usagetext = Ext.String.format(gettext('{0} of {1}'),
	    Proxmox.Utils.format_size(statusData.used),
	    Proxmox.Utils.format_size(statusData.total),
	);

	let usagePanel = me.lookup('usage');
	usagePanel.updateValue(usage, usagetext);

	let estimate = PBS.Utils.render_estimate(statusData['estimated-full-date']);
	vm.set('full', estimate);
	vm.set('deduplication', PBS.Utils.calculate_dedup_factor(statusData['gc-status']).toFixed(2));
	vm.set('stillbad', statusData['gc-status']['still-bad']);

	let last = 0;
	let time = statusData['history-start'];
	let delta = statusData['history-delta'];
	let data = statusData.history.map((val) => {
	    if (val === null) {
		val = last;
	    } else {
		last = val;
	    }
	    let entry = {
		time: time*1000, // js Dates are ms since epoch
		val,
	    };

	    time += delta;
	    return entry;
	});

	me.lookup('historychart').setData(data);
    },

    items: [
	{
	    xtype: 'container',
	    layout: {
		type: 'vbox',
		align: 'stretch',
	    },

	    width: 350,
	    padding: 10,

	    items: [
		{
		    xtype: 'proxmoxGauge',
		    warningThreshold: 0.8,
		    criticalThreshold: 0.95,
		    flex: 1,
		    reference: 'usage',
		},
		{
		    xtype: 'pmxInfoWidget',
		    iconCls: 'fa fa-fw fa-line-chart',
		    title: gettext('Estimated Full'),
		    printBar: false,
		    bind: {
			data: {
			    text: '{full}',
			},
		    },
		},
		{
		    xtype: 'pmxInfoWidget',
		    iconCls: 'fa fa-fw fa-compress',
		    title: gettext('Deduplication Factor'),
		    printBar: false,
		    bind: {
			data: {
			    text: '{deduplication}',
			},
		    },
		},
		{
		    xtype: 'pmxInfoWidget',
		    iconCls: 'fa critical fa-fw fa-exclamation-triangle',
		    title: gettext('Bad Chunks'),
		    printBar: false,
		    hidden: true,
		    bind: {
			data: {
			    text: '{stillbad}',
			},
			visible: '{stillbad}',
		    },
		},
	    ],
	},
	{
	    xtype: 'container',
	    layout: {
		type: 'vbox',
		align: 'stretch',
	    },

	    flex: 1,

	    items: [
		{
		    padding: 5,
		    xtype: 'pbsUsageChart',
		    reference: 'historychart',
		    title: gettext('Usage History'),
		    height: 100,
		},
		{
		    xtype: 'container',
		    flex: 1,
		    layout: {
			type: 'vbox',
			align: 'stretch',
		    },

		    defaults: {
			padding: 5,
		    },

		    items: [
			{
			    xtype: 'label',
			    text: gettext('Task Summary')
			        + ` (${Ext.String.format(gettext('{0} days'), 30)})`,
			},
			{
			    xtype: 'pbsTaskSummary',
			    border: false,
			    header: false,
			    subPanelModal: true,
			    flex: 2,
			    bodyPadding: 0,
			    minHeight: 0,
			    cbind: {
				datastore: '{datastore}',
			    },
			},
		    ],
		},
	    ],
	},
    ],
});