107 lines
4.4 KiB
JavaScript
107 lines
4.4 KiB
JavaScript
// @flow
|
|
import * as React from 'react';
|
|
|
|
type Props = {
|
|
// --- select ---
|
|
diskSpace: DiskSpace, // KB
|
|
viewHostingLimit: number, // MB
|
|
autoHostingLimit: number,
|
|
viewBlobSpace: number,
|
|
autoBlobSpace: number,
|
|
privateBlobSpace: number,
|
|
};
|
|
|
|
function StorageViz(props: Props) {
|
|
const { diskSpace, viewHostingLimit, autoHostingLimit, viewBlobSpace, autoBlobSpace, privateBlobSpace } = props;
|
|
|
|
if (!diskSpace || !diskSpace.total) {
|
|
return (
|
|
<div className={'storage__wrapper'}>
|
|
<div className={'storage__bar'}>
|
|
<div className="help">Cannot get disk space information.</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const totalMB = diskSpace && Math.floor(Number(diskSpace.total) / 1024);
|
|
const freeMB = diskSpace && Math.floor(Number(diskSpace.free) / 1024);
|
|
const otherMB = totalMB - (freeMB + viewBlobSpace + autoBlobSpace + privateBlobSpace);
|
|
const autoFree = autoHostingLimit - autoBlobSpace;
|
|
const viewFree = viewHostingLimit > 0 ? viewHostingLimit - viewBlobSpace : freeMB - autoFree;
|
|
const unallocFree = freeMB - viewFree - autoFree;
|
|
const viewLimit =
|
|
viewHostingLimit === 0
|
|
? freeMB - (autoHostingLimit - autoBlobSpace) + viewBlobSpace
|
|
: viewHostingLimit + viewBlobSpace;
|
|
|
|
const getPercent = (val, lim = totalMB) => (val / lim) * 100;
|
|
const getGB = (val) => (Number(val) / 1024).toFixed(2);
|
|
|
|
const otherPercent = getPercent(otherMB);
|
|
const privatePercent = getPercent(privateBlobSpace);
|
|
const autoLimitPercent = getPercent(autoHostingLimit);
|
|
const viewLimitPercent = getPercent(viewLimit);
|
|
const viewUsedPercentOfLimit = getPercent(viewBlobSpace, viewLimit);
|
|
const autoUsedPercentOfLimit = getPercent(autoBlobSpace, autoHostingLimit);
|
|
|
|
return (
|
|
<div className={'storage__wrapper'}>
|
|
<div className={'storage__bar'}>
|
|
<div className={'storage__other'} style={{ width: `${otherPercent}%` }} />
|
|
<div className={'storage__private'} style={{ width: `${privatePercent}%` }} />
|
|
<div className={'storage__auto'} style={{ width: `${autoLimitPercent}%` }}>
|
|
<div className={'storage__auto--used'} style={{ width: `${autoUsedPercentOfLimit}%` }} />
|
|
<div className={'storage__auto--free'} />
|
|
</div>
|
|
<div className={'storage__viewed'} style={{ width: `${viewLimitPercent}%` }}>
|
|
<div className={'storage__viewed--used'} style={{ width: `${viewUsedPercentOfLimit}%` }} />
|
|
<div className={'storage__viewed--free'} />
|
|
</div>
|
|
{viewHostingLimit !== 0 && <div style={{ 'background-color': 'unset' }} />}
|
|
</div>
|
|
<div className={'storage__legend-wrapper'}>
|
|
<div className={'storage__legend-item'}>
|
|
<div className={'storage__legend-item-swatch storage__legend-item-swatch--private'} />
|
|
<div className={'storage__legend-item-label'}>
|
|
<label>Publishes</label>
|
|
<div className={'help'}>{`${getGB(privateBlobSpace)} GB`}</div>
|
|
</div>
|
|
</div>
|
|
<div className={'storage__legend-item'}>
|
|
<div className={'storage__legend-item-swatch storage__legend-item-swatch--auto'} />
|
|
<div className={'storage__legend-item-label'}>
|
|
<label>Auto Hosting</label>
|
|
<div className={'help'}>
|
|
{autoHostingLimit === 0 ? __('Disabled') : `${getGB(autoBlobSpace)} of ${getGB(autoHostingLimit)} GB`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={'storage__legend-item'}>
|
|
<div className={'storage__legend-item-swatch storage__legend-item-swatch--viewed'} />
|
|
<div className={'storage__legend-item-label'}>
|
|
<label>View Hosting</label>
|
|
<div className={'help'}>
|
|
{viewHostingLimit === 1
|
|
? __('Disabled')
|
|
: `${getGB(viewBlobSpace)} of ${
|
|
viewHostingLimit !== 0 ? getGB(viewHostingLimit) : `${getGB(viewFree)} Free`
|
|
} GB`}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{viewHostingLimit !== 0 && (
|
|
<div className={'storage__legend-item'}>
|
|
<div className={'storage__legend-item-swatch storage__legend-item-swatch--free'} />
|
|
<div className={'storage__legend-item-label'}>
|
|
<label>Free</label>
|
|
<div className={'help'}>{`${getGB(unallocFree)} GB`}</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default StorageViz;
|