luci-mod-status: adds mount point overview to overview page

[Ansuel]

This can be usefull to quickly check if the custom mount point are actually mounted and if they are full. The overlay partition is also displayed to quickly check if it's full or not.

Signed-off-by: Ansuel Smith [email protected]

[Ansuel]

@jow- sorry for quote can you check this?

[Ansuel]

Resolved by mistake... Anyway... Write that as the same function is repeated 3 times. Isn't better that way? I really don't know in performance perspective if a local variable is better than call 3 times the same function directly.

[Ansuel]

@jow- @feckert I rebased this and made some changes... Can you review this?

Can I use => or should I use the normal syntax? (As we use promise... i think => syntax is full supported right?)

[jow-]

Please use the old syntax for now.

[Ansuel]

Done.

[ysc3839]

As we use promise...

No, because there's polyfill for promise.

[Ansuel]

@feckert can you check this?

[feckert]

The mounts are shown for my system. But with luci-theme-openwrt-2020, the whole thing doesn't look right to me?

Screenshot for luci-theme-openwrt-2020:

Screenshot for luci-theme-bootstrap:

Screenshot for luci-theme-material:

[Ansuel]

Thx for testing. will check and fix the problem with the new theme (probably using old table definition?) Any idea how to improve this? Or it's good like that and the info provided are sufficient?

[Ansuel]

@feckert fixed display bug with 2020 theme

[feckert]

This is how it looks with me. From my point of view this fits.

[jow-]

Could you try to display the space usage per mount as progress bar and only display the actual numbers as tooltip?

[Ansuel]

@jow- you mean like this?

or the value hidden and displayed only on the tooltip ?

Also is the progress bar used on other field (currently with this we use it on ram and on mount) Should we consider to generalize it and add to a common js?

[Ansuel]

@feckert considering we have a variant of this implemented... should i close this or the implementation we have still lacks some feature that are here?

[Ansuel]

@feckert @jow- I found time to refactor this. I decided to expand storage instead of adding a new index page. I would ask to also test this and tell me if the concept is ok?

[systemcrash]

So I tested this code, and it looks fine for me but for one bug: duplicate entries. The .push just adds to the array.

Here's my test VM:

# ubus call luci getMountPoints
{
	"result": [
		{
			"avail": 79425536,
			"device": "/dev/root",
			"free": 81604608,
			"mount": "/",
			"size": 107302912
		},
		{
			"avail": 53923840,
			"device": "tmpfs",
			"free": 53923840,
			"mount": "/tmp",
			"size": 55717888
		},
		{
			"avail": 10702848,
			"device": "/dev/sda1",
			"free": 11034624,
			"mount": "/boot",
			"size": 16470016
		},
		{
			"avail": 10702848,
			"device": "/dev/sda1",
			"free": 11034624,
			"mount": "/boot",
			"size": 16470016
		},
		{
			"avail": 524288,
			"device": "tmpfs",
			"free": 524288,
			"mount": "/dev",
			"size": 524288
		}
	]
}

Whether that itself is right or wrong is irrelevant: we need to check for dupes in the list.

Here's the working code I tested using an Object where the only uniqueness check is against the name:

	render: function(data) {
		var systeminfo = data[0],
		    mounts = data[1],
		    root = L.isObject(systeminfo.root) ? systeminfo.root : {},
		    tmp = L.isObject(systeminfo.tmp) ? systeminfo.tmp : {};

		const existenceChk = function(fields, name, values) {
			if (!fields.hasOwnProperty(name))
				fields[name] = values;
		};

		var fields = {};
		existenceChk(fields, _('Disk space'), { used: root.used * 1024, size: root.total * 1024 });
		existenceChk(fields, _('Temp space'), { used: tmp.used * 1024, size: tmp.total * 1024 });

		for (var i = 0; i < mounts.length; i++) {
			var entry = mounts[i];

			if (MountSkipList.includes(entry.mount))
				continue;

			var name = entry.device + ' (' + entry.mount +')',
			    used = entry.size - entry.free;

			existenceChk(fields, name, { used: used, size: entry.size });
		}

		var table = E('table', { 'class': 'table' });

		Object.keys(fields).forEach(function(key) {
			table.appendChild(E('tr', { 'class': 'tr' }, [
				E('td', { 'class': 'td left', 'width': '33%' }, [ key ]),
				E('td', { 'class': 'td left' }, [
					(fields[key].used != null) ? progressbar(fields[key].used, fields[key].size, true) : '?'
				])
			]));
		});

		return table;
	}

I'll go ahead and merge this soon if nobody else has any comments.