-
Notifications
You must be signed in to change notification settings - Fork 414
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* add hosting to first run, enable auto hosting * take welcomeVersion out of sync * app strings fix * recommended view hosting limit * small changes * fixes * appstrings * small fix
- Loading branch information
Showing
37 changed files
with
1,044 additions
and
254 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| import { connect } from 'react-redux'; | ||
| import StorageViz from './view'; | ||
| import { | ||
| selectViewBlobSpace, | ||
| selectViewHostingLimit, | ||
| selectAutoBlobSpace, | ||
| selectPrivateBlobSpace, | ||
| selectAutoHostingLimit, | ||
| } from 'redux/selectors/settings'; | ||
| import { selectDiskSpace } from 'redux/selectors/app'; | ||
|
|
||
| const select = (state) => ({ | ||
| diskSpace: selectDiskSpace(state), | ||
| viewHostingLimit: selectViewHostingLimit(state), | ||
| autoHostingLimit: selectAutoHostingLimit(state), | ||
| viewBlobSpace: selectViewBlobSpace(state), | ||
| autoBlobSpace: selectAutoBlobSpace(state), | ||
| privateBlobSpace: selectPrivateBlobSpace(state), | ||
| }); | ||
|
|
||
| export default connect(select)(StorageViz); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| // @flow | ||
| import * as React from 'react'; | ||
| import I18nMessage from 'component/i18nMessage'; | ||
|
|
||
| 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 --[legend, storage category]--')}</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 --[legend, storage category]--')}</label> | ||
| <div className={'help'}> | ||
| {autoHostingLimit === 0 ? ( | ||
| __('Disabled') | ||
| ) : ( | ||
| <I18nMessage | ||
| tokens={{ | ||
| spaceUsed: getGB(autoBlobSpace), | ||
| limit: getGB(autoHostingLimit), | ||
| }} | ||
| > | ||
| %spaceUsed% of %limit% GB | ||
| </I18nMessage> | ||
| )} | ||
| </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 --[legend, storage category]--')}</label> | ||
| <div className={'help'}> | ||
| {viewHostingLimit === 1 ? ( | ||
| __('Disabled') | ||
| ) : ( | ||
| <I18nMessage | ||
| tokens={{ | ||
| spaceUsed: getGB(viewBlobSpace), | ||
| limit: viewHostingLimit !== 0 ? getGB(viewHostingLimit) : getGB(viewFree), | ||
| }} | ||
| > | ||
| %spaceUsed% of %limit% Free GB | ||
| </I18nMessage> | ||
| )} | ||
| </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 --[legend, unused disk space]--')}</label> | ||
| <div className={'help'}>{`${getGB(unallocFree)} GB`}</div> | ||
| </div> | ||
| </div> | ||
| )} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default StorageViz; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,27 @@ | ||
| import { connect } from 'react-redux'; | ||
|
|
||
| import HostingSplash from './view'; | ||
| import { | ||
| selectViewBlobSpace, | ||
| selectViewHostingLimit, | ||
| selectAutoBlobSpace, | ||
| selectAutoHostingLimit, | ||
| selectSaveBlobs, | ||
| } from 'redux/selectors/settings'; | ||
| import { doSetDaemonSetting } from 'redux/actions/settings'; | ||
| import { selectDiskSpace } from 'redux/selectors/app'; | ||
|
|
||
| const select = (state) => ({ | ||
| diskSpace: selectDiskSpace(state), | ||
| viewHostingLimit: selectViewHostingLimit(state), | ||
| autoHostingLimit: selectAutoHostingLimit(state), | ||
| viewBlobSpace: selectViewBlobSpace(state), | ||
| autoBlobSpace: selectAutoBlobSpace(state), | ||
| saveBlobs: selectSaveBlobs(state), | ||
| }); | ||
|
|
||
| const perform = (dispatch) => ({ | ||
| setDaemonSetting: (key, value) => dispatch(doSetDaemonSetting(key, value)), | ||
| }); | ||
|
|
||
| export default connect(select, perform)(HostingSplash); |
Oops, something went wrong.