UI: volumes view: relative capacities

closes #227

Author: joonas-fi

frontend/main.tsx

@@ -105,6 +105,10 @@ class Handlers implements r.RouteHandlers {
 		return <VolumesAndMountsPage view="replicationStatuses" />;
 	}
 
+	volumesRelativeCapacities() {
+		return <VolumesAndMountsPage view="capacities" />;
+	}
+
 	replicationPolicies() {
 		return <ReplicationPoliciesPage />;
 	}

frontend/pages/VolumesAndMountsPage.tsx

@@ -18,6 +18,7 @@ import { unrecognizedValue } from 'f61ui/utils';
 import {
 	mountsUrl,
 	volumesIntegrityUrl,
+	volumesRelativeCapacitiesUrl,
 	volumesReplicationUrl,
 	volumesServiceUrl,
 	volumesSmartUrl,
@@ -76,6 +77,7 @@ interface VolumesAndMountsPageProps {
 		| 'service'
 		| 'smart'
 		| 'integrity'
+		| 'capacities'
 		| 'replicationStatuses';
 }
 
@@ -216,6 +218,12 @@ export default class VolumesAndMountsPage extends React.Component<
 							{this.renderMounts()}
 						</Panel>
 					);
+				case 'capacities':
+					return (
+						<Panel heading={<div>Capacities</div>}>
+							{this.renderVolumesRelativeCapacity()}
+						</Panel>
+					);
 				default:
 					throw unrecognizedValue(this.props.view);
 			}
@@ -253,6 +261,10 @@ export default class VolumesAndMountsPage extends React.Component<
 							url: volumesReplicationUrl(),
 							title: 'Replication status',
 						},
+						{
+							url: volumesRelativeCapacitiesUrl(),
+							title: 'Capacities',
+						},
 					]}>
 					{content}
 				</TabController>
@@ -747,6 +759,55 @@ export default class VolumesAndMountsPage extends React.Component<
 		);
 	}
 
+	private renderVolumesRelativeCapacity() {
+		const [volumes, loadingOrError] = this.state.volumes.unwrap();
+
+		if (loadingOrError) {
+			return loadingOrError;
+		}
+
+		const volumesWithoutCloud = (volumes || []).filter(
+			(v) => v.Technology !== VolumeTechnology.Cloud,
+		);
+
+		const volumeSortedByQuota = volumesWithoutCloud.sort((a, b) =>
+			a.Quota > b.Quota ? -1 : 1,
+		);
+
+		const highestQuotaVolume = volumeSortedByQuota[0];
+
+		if (!highestQuotaVolume) {
+			return null;
+		}
+
+		return (
+			<table className={tableClassStripedHover}>
+				<thead>
+					<tr>
+						<th>Label</th>
+						<th>Quota</th>
+						<th>Relative capacity</th>
+					</tr>
+				</thead>
+				<tbody>
+					{volumeSortedByQuota.map((vol) => {
+						return (
+							<tr key={vol.Id}>
+								<td>{vol.Label}</td>
+								<td>{bytesToHumanReadable(vol.Quota)}</td>
+								<td>
+									<ProgressBar
+										progress={(vol.Quota / highestQuotaVolume.Quota) * 100}
+									/>
+								</td>
+							</tr>
+						);
+					})}
+				</tbody>
+			</table>
+		);
+	}
+
 	private fetchData() {
 		this.state.volumes.load(() => getVolumes());
 		this.state.volumesDecommissioned.load(() => getDecommissionedVolumes());

pkg/frontend/ui-routes.json

@@ -89,6 +89,10 @@
 		"id": "volumesReplication",
 		"path": "/admin/volumes/replication"
 	},
+	{
+		"id": "volumesRelativeCapacities",
+		"path": "/admin/volumes/relative_capacities"
+	},
 	{
 		"id": "replicationPolicies",
 		"path": "/admin/replicationpolicies"