jjkiers/cloudron-box
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

add storage section in app view

Browse Source
This commit is contained in:
Girish Ramakrishnan
2020-10-28 22:11:05 -07:00
parent 377c2f678e
commit 671b9f235b
2 changed files with 112 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
src/views/app.html
View File

@@ -483,6 +483,7 @@
<div ng-click="setView('location')" ng-class="{ 'active': view === 'location' }">Location</div>
<div ng-click="setView('access')" ng-class="{ 'active': view === 'access' }">Access Control</div>
<div ng-click="setView('resources')" ng-class="{ 'active': view === 'resources' }">Resources</div>
<div ng-click="setView('storage')" ng-class="{ 'active': view === 'storage' }">Storage</div>
<div ng-click="setView('graphs')" ng-class="{ 'active': view === 'graphs' }">Graphs</div>
<div ng-click="setView('security')" ng-class="{ 'active': view === 'security' }">Security</div>
<div ng-click="setView('email')" ng-class="{ 'active': view === 'email' }" ng-show="app.manifest.addons.sendmail || app.manifest.addons.recvmail">Email</div>
@@ -788,71 +789,83 @@
</button>
</div>
</div>
<hr/>
</div>
<div class="card" ng-show="view === 'storage'">
<div class="row">
<div class="col-md-12">
<label class="control-label" for="resourcesEnableDataDir">Storage <sup><a ng-href="https://docs.cloudron.io/storage/#app-data-directory" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<label class="control-label" for="storageEnableDataDir">App Data<sup><a ng-href="https://docs.cloudron.io/storage/#app-data-directory" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<p>
By default, this app's data is located at <code>/home/yellowtent/appsdata/{{ app.id }}</code>. If the server is running out of disk space,
you can bind an external disk and move this app's data there. Only Ext4 and NFS binds are supported.
</p>
<form role="form" name="resourcesDataDirForm" ng-submit="resources.submitDataDir()" autocomplete="off">
<form role="form" name="storageDataDirForm" ng-submit="storage.submitDataDir()" autocomplete="off">
<fieldset>
<div class="form-group" ng-class="{ 'has-error': resourcesDataDirForm.$dirty && resources.error.dataDir }">
<div ng-show="resources.error.dataDir">{{ resources.error.dataDir }}</div>
<input type="text" class="form-control" name="dataDir" placeholder="Leave empty to use platform default" ng-model="resources.dataDir">
<div class="form-group" ng-class="{ 'has-error': storageDataDirForm.$dirty && storage.error.dataDir }">
<div ng-show="storage.error.dataDir">{{ storage.error.dataDir }}</div>
<input type="text" class="form-control" name="dataDir" placeholder="Leave empty to use platform default" ng-model="storage.dataDir">
</div>
<input class="ng-hide" type="submit" ng-disabled="!resourcesDataDirForm.$dirty || resourcesDataDirForm.$invalid || resources.busyDataDir"/>
<input class="ng-hide" type="submit" ng-disabled="!storageDataDirForm.$dirty || storageDataDirForm.$invalid || storage.busyDataDir"/>
</fieldset>
</form>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitDataDir()" ng-disabled="!resourcesDataDirForm.$dirty || resourcesDataDirForm.$invalid || resources.busyDataDir || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="resources.busyDataDir"></i> Move Data
<button class="btn btn-outline btn-primary pull-right" ng-click="storage.submitDataDir()" ng-disabled="!storageDataDirForm.$dirty || storageDataDirForm.$invalid || storage.busyDataDir || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="storage.busyDataDir"></i> Move Data
</button>
</div>
</div>
<hr>
<div class="form-group binds">
<label class="control-label">Binds <sup><a ng-href="https://docs.cloudron.io/apps/#volumes" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div class="has-error" ng-show="resources.error.binds">{{ resources.error.binds }}</div>
<div class="form-group mounts">
<label class="control-label">Mounts <sup><a ng-href="https://docs.cloudron.io/apps/#volumes" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
<div class="has-error" ng-show="storage.error.mounts">{{ storage.error.mounts }}</div>
<div ng-repeat="bind in resources.binds">
<form class="form-inline">
<div class="form-group bind-name">
<div class="input-group">
<span class="input-group-addon">/media/</span>
<input type="text" class="form-control" ng-model="bind.name" placeholder="Container path">
</div>
</div>
<div class="form-group bind-host-path">
<input type="text" class="form-control" ng-model="bind.hostPath" placeholder="Host path">
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="bind.readOnly"> Read Only
</label>
</div>
<button class="btn btn-danger btn-xs" ng-click="resources.delBind($event, $index)"><i class="far fa-trash-alt"></i></button>
</form>
<table class="table table-hover" style="margin-top: 10px;" ng-show="storage.mounts.length > 0">
<thead>
<tr>
<th style="width: 40%">Volume</th>
<th class="text-left hidden-xs hidden-sm">Read Only</th>
<th style="width: 100px" class="text-right">Actions</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="mount in storage.mounts">
<td>
<select class="form-control" ng-model="mount.volume">
<option ng-repeat="volume in volumes" value="{{ volume }}">{{ volume.name }} ({{ volume.hostPath }})</option>
</select>
</td>
<td class="text-left elide-table-cell hidden-xs hidden-sm">
<div class="checkbox">
<label>
<input type="checkbox" ng-model="mount.readOnly">
</label>
</div>
</td>
<td class="text-right no-wrap" style="vertical-align: bottom">
<button class="btn btn-danger btn-xs" ng-click="storage.delMount($event, $index)"><i class="far fa-trash-alt"></i></button>
</td>
</tr>
</tbody>
</table>
<div ng-show="storage.mounts.length === 0">
No volumes are mounted. <a href="" ng-click="storage.addMount($event)">Add a mount</a>
</div>
<div ng-show="resources.binds.length === 0">
No binds are configured. <a href="" ng-click="resources.addBind($event)">Add an external bind</a>
</div>
<div ng-show="resources.binds.length > 0" style="margin-top: 5px;">
<a href="" ng-click="resources.addBind($event)">Add another bind</a>
<div ng-show="storage.mounts.length > 0" style="margin-top: 5px;">
<a href="" ng-click="storage.addMount($event)">Add another mount</a>
</div>
</div>
<div class="row">
<div class="col-md-12 text-right">
<button class="btn btn-outline btn-primary pull-right" ng-click="resources.submitBinds()" ng-disabled="resources.busyBinds || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="resources.busyBinds"></i> Save
<button class="btn btn-outline btn-primary pull-right" ng-click="storage.submitMounts()" ng-disabled="storage.busyMounts || app.error || app.taskId" tooltip-enable="app.error || app.taskId" uib-tooltip="{{ app.error ? 'App is in error state' : 'App is busy' }}">
<i class="fa fa-circle-notch fa-spin" ng-show="storage.busyMounts"></i> Save
</button>
</div>
</div>