adyxax/tfstated
1
0
Fork 0
Code Issues 47 Pull requests Releases Packages Wiki Activity Actions

chore(webui): redesign the states page

Browse source
This commit is contained in:
Julien Dessaux 2025-04-05 23:59:56 +02:00
parent ff14a71b39
commit f12a54b760
Signed by: adyxax
GPG key ID: F92E51B86E07177E
2 changed files with 111 additions and 77 deletions
Download patch file Download diff file Expand all files Collapse all files

105
pkg/webui/html/states.html
View file

@ -1,69 +1,46 @@
{{ define "main" }}
<div>
<div class="tabs">
<a data-ui="#explorer"{{ if eq .ActiveTab 0 }} class="active"{{ end }}>States</a>
<a data-ui="#new"{{ if eq .ActiveTab 1 }} class="active"{{ end }}>Create New State</a>
<h1>States</h1>
<div class="flex-row" style="justify-content: space-between;">
<div style="min-width: 240px;">
<p>TfStated is currently managing {{ len .States }} states.</p>
<p>Use this page to inspect the existing states.</p>
<p>You also have the option to upload a state file in order to create a new one. This is equivalent to using the <code>state push</code> command of OpenTofu/Terraform on a brand new state.</p>
</div>
<div id="explorer" class="page padding{{ if eq .ActiveTab 0 }} active{{ end }}">
<table class="clickable-rows no-space">
<thead>
<tr>
<th>Path</th>
<th>Updated</th>
<th>Locked</th>
</tr>
</thead>
<tbody>
{{ range .States }}
<tr>
<td><a href="/states/{{ .Id }}">{{ .Path }}</a></td>
<td><a href="/states/{{ .Id }}">{{ .Updated }}</a></td>
<td>
<a href="/states/{{ .Id }}">
{{ if eq .Lock nil }}no{{ else }}
<span>yes</span>
<div class="tooltip left max">
<b>Lock</b>
<p>{{ .Lock }}</p>
</div>
{{ end }}
</a>
</td>
</tr>
<form action="/states" enctype="multipart/form-data" method="post">
<fieldset>
<legend>New State</legend>
<div class="grid-2">
<label for="path">Path</label>
<input autofocus
class="flex-stretch"
id="path"
name="path"
required
type="text"
value="{{ .Path }}">
{{ if .PathDuplicate }}
<span class="error">This path already exist</span>
{{ else if .PathError }}
<span class="error">A valid URL path beginning with a / is expected.</span>
{{ end }}
</tbody>
</table>
</div>
<div id="new" class="page padding{{ if eq .ActiveTab 1 }} active{{ end }}">
<form action="/states" enctype="multipart/form-data" method="post">
<fieldset>
<div class="field border label{{ if .PathError }} invalid{{ end }}">
<input autofocus
id="path"
name="path"
required
type="text"
value="{{ .Path }}">
<label for="path">Path</label>
{{ if .PathDuplicate }}
<span class="error">This path already exist</span>
{{ else if .PathError }}
<span class="error">Invalid path</span>
{{ else }}
<span class="helper">Valid URL path beginning with a /</span>
{{ end }}
</div>
<div class="field label border">
<input name="file"
required
type="file">
<input type="text">
<label>File</label>
<span class="helper">JSON state file</span>
</div>
<button class="small-round" type="submit" value="submit">New</button>
</fieldset>
</form>
</div>
<label for="file" style="min-width: 120px">JSON state file</label>
<input id="file"
name="file"
required
type="file">
</div>
<button class="primary" type="submit" value="submit">Upload and Create State</button>
</fieldset>
</form>
</div>
<article aria-role="table" class="grid-3" style="margin-top: 16px; justify-items: stretch;">
<span>Path</span>
<span>Updated</span>
<span>Locked</span>
{{ range .States }}
<a href="/states/{{ .Id }}">{{ .Path }}</a>
<a href="/states/{{ .Id }}">{{ .Updated }}</a>
<a href="/states/{{ .Id }}" style="text-align: center;">{{ if eq .Lock nil }}no{{ else }}yes{{ end }}</a>
{{ end }}
</article>
{{ end }}