rework inspect page
This commit is contained in:
parent
64363b29e0
commit
898122c19e
GPG key ID:
E9602264D639FF68
2 changed files with 236 additions and 45 deletions
|
|
@ -45,6 +45,8 @@
|
||||||
<div class="col-md-9">
|
<div class="col-md-9">
|
||||||
<h2>{{ .View.Name.Url }}</h2>
|
<h2>{{ .View.Name.Url }}</h2>
|
||||||
|
|
||||||
|
<!-- QUOTAS -->
|
||||||
|
|
||||||
<h5 class="mt-3">Quotas</h5>
|
<h5 class="mt-3">Quotas</h5>
|
||||||
<div class="progress mt-3">
|
<div class="progress mt-3">
|
||||||
<div class="progress-bar" role="progressbar" aria-valuenow="{{ .View.Size.Current }}" aria-valuemin="0" aria-valuemax="{{ .View.Size.Max }}" style="width: {{ .View.Size.Percent }}%; min-width: 2em;">
|
<div class="progress-bar" role="progressbar" aria-valuenow="{{ .View.Size.Current }}" aria-valuemin="0" aria-valuemax="{{ .View.Size.Max }}" style="width: {{ .View.Size.Percent }}%; min-width: 2em;">
|
||||||
|
|
@ -59,7 +61,33 @@
|
||||||
{{ end }}
|
{{ end }}
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
|
<!-- ACTIONS -->
|
||||||
|
<h5 class="mt-3">Actions</h5>
|
||||||
|
<form action="" method="post">
|
||||||
|
<div class="btn-group" role="group" aria-label="Actions sur le site web">
|
||||||
|
<button class="btn btn-secondary" name="action" value="increase_quota">Augmenter le quota</button>
|
||||||
|
<button class="btn btn-secondary" name="action" value="rotate_key">Rotation de la clé</button>
|
||||||
|
<a class="btn btn-secondary" href="/website/vhost/{{ .View.Name.Pretty }}">Changer le nom de domaine</a>
|
||||||
|
<button class="btn btn-danger" name="action" value="delete_bucket">Supprimer</button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
|
||||||
|
<!-- INFO -->
|
||||||
<h5 class="mt-3">Informations de connexion</h5>
|
<h5 class="mt-3">Informations de connexion</h5>
|
||||||
|
<ul class="nav nav-tabs" id="proto" role="tablist">
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link active" id="s3-tab" data-toggle="tab" href="#s3" role="tab" aria-controls="s3" aria-selected="true">S3 (recommandé)</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" id="sftp-tab" data-toggle="tab" href="#sftp" role="tab" aria-controls="sftp" aria-selected="false">SFTP</a>
|
||||||
|
</li>
|
||||||
|
<li class="nav-item">
|
||||||
|
<a class="nav-link" id="dav-tab" data-toggle="tab" href="#dav" role="tab" aria-controls="dav" aria-selected="false">WebDAV</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="tab-content" id="protocols">
|
||||||
|
<div class="tab-pane fade show active" id="s3" role="tabpanel" aria-labelledby="s3-tab">
|
||||||
<table class="table mt-4">
|
<table class="table mt-4">
|
||||||
<tbody>
|
<tbody>
|
||||||
<tr>
|
<tr>
|
||||||
|
|
@ -69,7 +97,7 @@
|
||||||
<tr>
|
<tr>
|
||||||
<th scope="row">Clé secrète</th>
|
<th scope="row">Clé secrète</th>
|
||||||
<td>
|
<td>
|
||||||
<a href="#" onclick="document.getElementById('secret_key').style.display='inline'; this.style.display='none'">Cliquer pour afficher la clé secrète</a>
|
<a href="#" onclick="document.getElementById('secret_key').style.display='inline'; this.style.display='none'">[Afficher la clé secrète]</a>
|
||||||
<span id="secret_key" style="display: none">{{ .View.SecretAccessKey }}</span>
|
<span id="secret_key" style="display: none">{{ .View.SecretAccessKey }}</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
|
@ -92,16 +120,178 @@
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
<h5 class="mt-3">Actions</h5>
|
<p>Configurer votre logiciel :</p>
|
||||||
<form action="" method="post">
|
|
||||||
<div class="btn-group" role="group" aria-label="Actions sur le site web">
|
|
||||||
<button class="btn btn-secondary" name="action" value="increase_quota">Augmenter le quota</button>
|
|
||||||
<button class="btn btn-secondary" name="action" value="rotate_key">Rotation de la clé</button>
|
|
||||||
<a class="btn btn-secondary" href="/website/vhost/{{ .View.Name.Pretty }}">Changer le nom de domaine</a>
|
|
||||||
<button class="btn btn-danger" name="action" value="delete_bucket">Supprimer</button>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
|
<div class="accordion" id="softconfig">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" id="awscli-title">
|
||||||
|
<h2 class="mb-0">
|
||||||
|
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#awscli" aria-expanded="false" aria-controls="awscli">
|
||||||
|
awscli (tout générateur de site statique)
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div id="awscli" class="collapse" aria-labelledby="awscli-title" data-parent="#softconfig">
|
||||||
|
<div class="card-body">
|
||||||
|
<p>Lancez la commande :</p>
|
||||||
|
<pre>aws --profile {{ .View.Name.Pretty }} configure</pre>
|
||||||
|
|
||||||
|
<p>Entrez les informations suivantes quand elles vous sont demandées :</p>
|
||||||
|
<dl>
|
||||||
|
<dt>AWS Access Key ID [None]:</dt><dd>{{ .View.AccessKeyId }}</dd>
|
||||||
|
<dt>AWS Secret Access Key [None]:</dt><dd><a href="#" onclick="document.getElementById('aws_secret_key').style.display='inline'; this.style.display='none'">[Afficher la clé secrète]</a><span id="aws_secret_key" style="display: none">{{ .View.SecretAccessKey }}</span></dd>
|
||||||
|
<dt>Default region name [None]:</dt> <dd>garage</dd>
|
||||||
|
<dt>Default output format [None]:</dt> <dd>(laissez vide et appuyez sur entrée)</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
<p>Finalisez la configuration :</p>
|
||||||
|
<pre>aws --profile {{ .View.Name.Pretty }} configure set endpoint_url https://garage.deuxfleurs.fr</pre>
|
||||||
|
|
||||||
|
|
||||||
|
<p>Pour déployer votre dossier local <code>public</code> lancez :</p>
|
||||||
|
<pre>
|
||||||
|
aws --profile {{ .View.Name.Pretty }} s3 sync ./public s3://{{ .View.Name.Pretty }}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" id="minio-title">
|
||||||
|
<h2 class="mb-0">
|
||||||
|
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#minio" aria-expanded="true" aria-controls="minio">
|
||||||
|
Minio CLI (tout générateur de site statique)
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="minio" class="collapse" aria-labelledby="minio-title" data-parent="#softconfig">
|
||||||
|
<div class="card-body">
|
||||||
|
<p>Vous pouvez configurer Minio CLI avec cette commande :</p>
|
||||||
|
<pre>
|
||||||
|
mc alias set \
|
||||||
|
{{ .View.Name.Pretty }} \
|
||||||
|
https://garage.deuxfleurs.fr \
|
||||||
|
{{ .View.AccessKeyId }} \
|
||||||
|
<a href="#" onclick="document.getElementById('minio_secret_key').style.display='inline'; this.style.display='none'">[Afficher la clé secrète]</a><span id="minio_secret_key" style="display: none">{{ .View.SecretAccessKey }}</span> \
|
||||||
|
--api S3v4
|
||||||
|
</pre>
|
||||||
|
<p>Et ensuite copiez votre site web avec la sous-commande mirror de Minio CLI :</p>
|
||||||
|
<pre>
|
||||||
|
mc mirror --overwrite ./public/ {{ .View.Name.Pretty }}/
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" id="hugo-title">
|
||||||
|
<h2 class="mb-0">
|
||||||
|
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#hugo" aria-expanded="false" aria-controls="hugo">
|
||||||
|
Hugo
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div id="hugo" class="collapse" aria-labelledby="hugo-title" data-parent="#softconfig">
|
||||||
|
<div class="card-body">
|
||||||
|
<p>Créez un fichier nommé <code>.deployment.secrets</code> (ne commitez pas ce fichier dans votre dépôt !) :</p>
|
||||||
|
<pre>
|
||||||
|
export AWS_ACCESS_KEY_ID={{ .View.AccessKeyId }}
|
||||||
|
export AWS_SECRET_ACCESS_KEY=<a href="#" onclick="document.getElementById('ugo_secret_key').style.display='inline'; this.style.display='none'">[Afficher la clé secrète]</a><span id="hugo_secret_key" style="display: none">{{ .View.SecretAccessKey }}</span>
|
||||||
|
</pre>
|
||||||
|
<p>Dans votre fichier de configuration Hugo <code>config.toml</code> (que vous pouvez commiter), rajoutez :</p>
|
||||||
|
<pre>
|
||||||
|
[[deployment.targets]]
|
||||||
|
URL = "s3://bucket?endpoint=garage.deuxfleurs.fr&s3ForcePathStyle=true&region=garage"
|
||||||
|
</pre>
|
||||||
|
|
||||||
|
<p>Pour déployer, sourcez le fichier de configuration et laissez hugo faire : </p>
|
||||||
|
<pre>
|
||||||
|
source .deployment.secrets
|
||||||
|
hugo deploy
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-pane fade" id="sftp" role="tabpanel" aria-labelledby="sftp-tab">
|
||||||
|
<br>
|
||||||
|
<div class="alert alert-danger" role="alert">
|
||||||
|
N'automatisez pas votre déploiement en SFTP car vous risqueriez de faire fuiter votre mot de passe.<br>
|
||||||
|
Pour toute forme d'automatisation, préférez le protocole S3.
|
||||||
|
</div>
|
||||||
|
<div class="alert alert-warning" role="alert">
|
||||||
|
L'algorithme de clé utilisé par le serveur est désactivé par défaut sur les clients SSH récents.<br>
|
||||||
|
Vous devez rajouter l'option -oHostKeyAlgorithms=+ssh-rsa pour vous connecter.
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<table class="table mt-4">
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Nom d'utilisateur-ice</th>
|
||||||
|
<td>{{ .Describe.Username }}</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Mot de passe</th>
|
||||||
|
<td>(votre mot de passe guichet)</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Hôte</th>
|
||||||
|
<td>sftp://sftp.deuxfleurs.fr</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<th scope="row">Port</th>
|
||||||
|
<td>2222</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</table>
|
||||||
|
<p>Configurez votre logiciel :</p>
|
||||||
|
|
||||||
|
<div class="accordion" id="softconfig2">
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" id="scp-title">
|
||||||
|
<h2 class="mb-0">
|
||||||
|
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#filezilla" aria-expanded="false" aria-controls="filezilla">
|
||||||
|
scp
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div id="filezilla" class="collapse show" aria-labelledby="scp-title" data-parent="#softconfig2">
|
||||||
|
<div class="card-body">
|
||||||
|
<p>Déployer le dossier local <em>public</em> sur le site web {{ .View.Name.Pretty }} :</p>
|
||||||
|
<pre>
|
||||||
|
scp -oHostKeyAlgorithms=+ssh-rsa -P2222 -r ./public {{ .Describe.Username }}@sftp.deuxfleurs.fr:{{ .View.Name.Pretty }}/
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card">
|
||||||
|
<div class="card-header" id="filezilla-title">
|
||||||
|
<h2 class="mb-0">
|
||||||
|
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#filezilla" aria-expanded="false" aria-controls="filezilla">
|
||||||
|
Filezilla
|
||||||
|
</button>
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div id="filezilla" class="collapse" aria-labelledby="filezilla-title" data-parent="#softconfig2">
|
||||||
|
<div class="card-body">
|
||||||
|
<p>Dans la barre de connexion rapide du haut, entrez :</p>
|
||||||
|
<dl>
|
||||||
|
<dt>Hôte</dt> <dd>sftp://sftp.deuxfleurs.fr</dd>
|
||||||
|
<dt>Nom d'utilisateur</dt> <dd>{{ .Describe.Username }}</dd>
|
||||||
|
<dt>Mot de passe</dt> <dd>(votre mot de passe guichet)</dd>
|
||||||
|
<dt>Port</dt> <dd>2222</dd>
|
||||||
|
</dl>
|
||||||
|
<p>Cliquez ensuite sur <strong>Connexion rapide</strong></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{{ if .View.Name.Expanded }}
|
{{ if .View.Name.Expanded }}
|
||||||
<h5 class="mt-5">Vous ne savez pas comment configurer votre nom de domaine ?</h5>
|
<h5 class="mt-5">Vous ne savez pas comment configurer votre nom de domaine ?</h5>
|
||||||
|
|
@ -110,6 +300,5 @@
|
||||||
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
{{ end }}
|
{{ end }}
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -55,6 +55,7 @@ func NewWebsiteIdFromBucketInfo(binfo *garage.BucketInfo) *WebsiteId {
|
||||||
// -----
|
// -----
|
||||||
|
|
||||||
type WebsiteDescribe struct {
|
type WebsiteDescribe struct {
|
||||||
|
Username string `json:"username"`
|
||||||
AllowedWebsites *QuotaStat `json:"quota_website_count"`
|
AllowedWebsites *QuotaStat `json:"quota_website_count"`
|
||||||
BurstBucketQuotaSize string `json:"burst_bucket_quota_size"`
|
BurstBucketQuotaSize string `json:"burst_bucket_quota_size"`
|
||||||
Websites []*WebsiteId `json:"vhosts"`
|
Websites []*WebsiteId `json:"vhosts"`
|
||||||
|
|
@ -232,6 +233,7 @@ func (w *WebsiteController) Describe() (*WebsiteDescribe, error) {
|
||||||
}
|
}
|
||||||
|
|
||||||
return &WebsiteDescribe{
|
return &WebsiteDescribe{
|
||||||
|
w.User.Username,
|
||||||
&w.WebsiteCount,
|
&w.WebsiteCount,
|
||||||
w.User.Quota.WebsiteSizeBurstedPretty(),
|
w.User.Quota.WebsiteSizeBurstedPretty(),
|
||||||
r,
|
r,
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue