160 lines
9.8 KiB
HTML
160 lines
9.8 KiB
HTML
<!-- Modal service configure -->
|
|
<div class="modal fade" id="serviceConfigureModal" tabindex="-1" role="dialog">
|
|
<div class="modal-dialog">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<h4 class="modal-title">{{ 'services.configure.title' | tr:{ name: serviceConfigure.service.displayName } }}</h4>
|
|
</div>
|
|
<div class="modal-body">
|
|
<form name="serviceConfigureForm" role="form" novalidate ng-submit="serviceConfigure.submit()" autocomplete="off">
|
|
<fieldset>
|
|
<p class="has-error text-center" ng-show="serviceConfigure.error">{{ serviceConfigure.error }}</p>
|
|
|
|
<div class="form-group">
|
|
<label class="control-label" style="display: block;" for="memoryLimit">
|
|
{{ 'services.memoryLimit' | tr }}: <b>{{ serviceConfigure.memoryLimit | prettyBinarySize:'' }}</b>
|
|
<button type="button" class="btn btn-xs btn-default pull-right" ng-click="serviceConfigure.resetToDefaults()">{{ 'services.configure.resetToDefaults' | tr }}</button>
|
|
</label>
|
|
<div style="padding: 0 10px;">
|
|
<input type="range" id="memoryLimit" ng-model="serviceConfigure.memoryLimit" step="134217728" min="{{ serviceConfigure.memoryTicks[0] }}" max="{{ serviceConfigure.memoryTicks[serviceConfigure.memoryTicks.length-1] }}" list="memoryLimitTicks" />
|
|
<datalist id="memoryLimitTicks">
|
|
<option ng-repeat="limit in serviceConfigure.memoryTicks" value="{{ limit }}"></option>
|
|
</datalist>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<br>
|
|
<div class="checkbox">
|
|
<label>
|
|
<input type="checkbox" ng-model="serviceConfigure.recoveryMode"><b>{{ 'services.configure.enableRecoveryMode' | tr }}</b></input>
|
|
</label>
|
|
</div>
|
|
<p ng-bind-html="'services.configure.recoveryModeDescription' | tr:{ docsLink: 'https://docs.cloudron.io/troubleshooting/#unresponsive-service' }"></p>
|
|
</div>
|
|
|
|
<input class="ng-hide" type="submit" ng-disabled="serviceConfigureForm.$invalid || serviceConfigure.busy"/>
|
|
</fieldset>
|
|
</form>
|
|
</div>
|
|
<div class="modal-footer ">
|
|
<button type="button" class="btn btn-default" data-dismiss="modal">{{ 'main.dialog.cancel' | tr }}</button>
|
|
<button type="submit" class="btn btn-outline btn-success pull-right" ng-click="serviceConfigure.submit()" ng-disabled="serviceConfigureForm.$invalid || serviceConfigure.busy"><i class="fa fa-circle-notch fa-spin" ng-show="serviceConfigure.busy"></i> {{ 'main.dialog.save' | tr }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="content">
|
|
|
|
<h1 class="section-header">
|
|
{{ 'services.title' | tr }}
|
|
<button class="btn btn-default" ng-click="refreshAll()">{{ 'services.refresh' | tr }}</button>
|
|
</h1>
|
|
|
|
<div class="card" style="margin-bottom: 15px;">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<p>{{ 'services.description' | tr }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="row ng-hide" ng-show="!servicesReady">
|
|
<div class="col-md-12 text-center">
|
|
<h2><i class="fa fa-circle-notch fa-spin"></i></h2>
|
|
</div>
|
|
</div>
|
|
<div class="row animateMeOpacity ng-hide" ng-show="servicesReady">
|
|
<div class="col-md-12">
|
|
<table class="table table-hover">
|
|
<thead>
|
|
<tr>
|
|
<th style="width: 30px;"></th>
|
|
<th>{{ 'services.service' | tr }}</th>
|
|
<th class="hide-mobile">{{ 'services.memoryUsage' | tr }}</th>
|
|
<th class="text-center hide-mobile">{{ 'services.memoryLimit' | tr }}</th>
|
|
<th class="text-right">{{ 'main.actions' | tr }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td><i class="fa fa-circle status-active" uib-tooltip="active"></i></td>
|
|
<td class="elide-table-cell">cloudron</td>
|
|
<td class="elide-table-cell hide-mobile"></td>
|
|
<td class="elide-table-cell hide-mobile"></td>
|
|
<td class="text-right no-wrap" style="vertical-align: bottom">
|
|
<a class="btn btn-xs btn-default" href="/logs.html?id=box" target="_blank" uib-tooltip="{{ 'logs.title' | tr }}"><i class="fa fa-file-alt"></i></a>
|
|
</td>
|
|
</tr>
|
|
<tr ng-repeat="service in services | filter:{ isRedis: false } | orderBy:'name'">
|
|
<td>
|
|
<span ng-switch on="service.status" ng-show="service.status">
|
|
<span ng-switch-when="active">
|
|
<i class="fa fa-circle status-active" uib-tooltip="active"></i>
|
|
</span>
|
|
<span ng-switch-when="starting">
|
|
<i class="fa fa-circle status-starting" uib-tooltip="starting" ng-show="!service.config.recoveryMode"></i>
|
|
<i class="fa fa-circle status-inactive" uib-tooltip="recovery mode" ng-show="service.config.recoveryMode"></i>
|
|
</span>
|
|
<span ng-switch-default>
|
|
<i class="fa fa-circle status-error" uib-tooltip="{{ service.status }}"></i>
|
|
</span>
|
|
</span>
|
|
<i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
|
|
</td>
|
|
<td class="elide-table-cell">
|
|
{{ service.displayName }}
|
|
</td>
|
|
<td class="elide-table-cell hide-mobile">
|
|
<div class="progress progress-striped" ng-show="service.config.memoryLimit">
|
|
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ service.memoryPercent }}%">{{ service.memoryPercent }}%</div>
|
|
</div>
|
|
</td>
|
|
<td class="elide-table-cell text-center hide-mobile">
|
|
<span ng-show="service.config.memoryLimit">{{ service.config.memoryLimit | prettyBinarySize }}</span>
|
|
</td>
|
|
<td class="text-right no-wrap" style="vertical-align: bottom">
|
|
<button class="btn btn-xs btn-default" ng-click="serviceConfigure.show(service)" uib-tooltip="{{ 'services.configureActionTooltip' | tr }}" ng-disabled="service.status === 'disabled' || !service.config.memoryLimit"><i class="fa fa-pencil-alt"></i></button>
|
|
<!-- restart is always clickable so that a user can rebuild mongodb in disabled state when using VMs where CPU flags can be dynamically changed -->
|
|
<button class="btn btn-xs btn-default" ng-click="restartService(service.name)" uib-tooltip="{{ 'services.restartActionTooltip' | tr }}"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': service.status === 'starting' && !service.config.recoveryMode }"></i></button>
|
|
<a class="btn btn-xs btn-default" ng-href="{{ service.status === 'disabled' ? '' : ('/logs.html?id=' + service.name) }}" target="_blank" uib-tooltip="{{ 'logs.title' | tr }}" ng-disabled="service.status === 'disabled'"><i class="fa fa-file-alt"></i></a>
|
|
</td>
|
|
</tr>
|
|
<tr ng-show="hasRedisServices" ng-click="redisServicesExpanded = !redisServicesExpanded" class="hand">
|
|
<td>
|
|
<i class="fas fa-angle-right" ng-class="{'fa-rotate-90': redisServicesExpanded }"></i>
|
|
</td>
|
|
<td colspan="4">redis</td>
|
|
</tr>
|
|
<tr ng-show="redisServicesExpanded" ng-repeat="service in services | filter:{ isRedis: true } | orderBy:'name'">
|
|
<td>
|
|
<i class="fa fa-circle" uib-tooltip="{{ service.status }}" ng-class="{ 'status-active': service.status === 'active', 'status-starting': service.status === 'starting', 'status-error': (service.status !== 'starting' && service.status !== 'active') }" ng-show="service.status"></i>
|
|
<i class="fa fa-circle-notch fa-spin" ng-hide="service.status"></i>
|
|
</td>
|
|
<td class="elide-table-cell">
|
|
{{ service.displayName }}
|
|
</td>
|
|
<td class="elide-table-cell hide-mobile">
|
|
<div class="progress progress-striped" ng-show="service.config.memoryLimit">
|
|
<div class="progress-bar progress-bar-success" role="progressbar" style="width: {{ service.memoryPercent }}%"></div>
|
|
</div>
|
|
</td>
|
|
<td class="elide-table-cell text-center hide-mobile">
|
|
<span ng-show="service.config.memoryLimit">{{ service.config.memoryLimit | prettyBinarySize }}</span>
|
|
</td>
|
|
<td class="text-right no-wrap" style="vertical-align: bottom">
|
|
<button class="btn btn-xs btn-default" ng-click="serviceConfigure.show(service)" uib-tooltip="{{ 'services.configureActionTooltip' | tr }}" ng-show="service.config.memoryLimit"><i class="fa fa-pencil-alt"></i></button>
|
|
<button class="btn btn-xs btn-default" ng-click="restartService(service.name)" uib-tooltip="{{ 'services.restartActionTooltip' | tr }}"><i class="fa fa-sync-alt" ng-class="{ 'fa-spin': service.status === 'starting' && !service.config.recoveryMode }"></i></button>
|
|
<a class="btn btn-xs btn-default" ng-href="{{ '/logs.html?id=' + service.name }}" target="_blank" uib-tooltip="{{ 'logs.title' | tr }}"><i class="fa fa-file-alt"></i></a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|