| <!doctype html> |
| <html> |
| <head> |
| <title>Vanadium {{title .ServerName}} Allocator</title> |
| {{template "head" .}} |
| </head> |
| <!-- NOTE: we 'borrow' a lot of the styling of identityd, hence the |
| security-related terminology in the style elements, like identity and |
| blessing. --> |
| <body class="identityprovider-layout allocatord"> |
| {{template "header" .}} |
| <script> |
| function changeBtn(id, newHTML) { |
| document.getElementById(id).innerHTML = "<font color='gray'>"+newHTML+"</font>"; |
| } |
| </script> |
| <div class="main"> |
| <h1 class="page-head">Create and Manage Instances of {{title .ServerName}}</h1> |
| <div class="blessings-list"> |
| <div class="blessings-header"> |
| <h1>Your instances</h1> |
| </div> |
| {{range $index, $element := .Instances}} |
| <div class="blessings-item"> |
| <div class="blessing-details"> |
| {{with .Instance}} |
| <h3>{{.Handle}} {{if eq .Replicas 0}}[Suspended]{{end}}</h3> |
| <p class="blessing-caveats"> |
| <span>Creation Time</span><br/> |
| <span class="unixtime" data-unixtime={{.CreationTime.Unix}}>{{.CreationTime.String}}</span> |
| </p> |
| <p class="blessing-caveats"> |
| <span>Mount Name</span><br/> |
| {{.MountName}} |
| </p> |
| <p class="blessing-caveats"> |
| <span>Blessing Patterns</span><br/> |
| {{range .BlessingNames}} |
| {{.}}<br/> |
| {{end}} |
| </p> |
| {{end}} |
| </div> |
| <div class="btns-col"> |
| <div class="btn"> |
| <a href="{{.DashboardURL}}" class="button-passive" target="_blank">Dashboard</a> |
| </div> |
| <div class="btn"> |
| <a href="{{.DebugURL}}" class="button-passive" target="_blank">Debug</a> |
| </div> |
| <div class="btn" id="suspendResumeBtn{{$index}}"> |
| {{if eq .Instance.Replicas 0 }} |
| <a href="{{.ResumeURL}}" class="button-passive" onclick="changeBtn('suspendResumeBtn{{$index}}', 'Resuming (takes a few seconds) ...')">Resume</a> |
| {{else}} |
| <a href="{{.SuspendURL}}" class="button-passive" onclick="changeBtn('suspendResumeBtn{{$index}}', 'Suspending (takes a few seconds) ...')">Suspend</a> |
| {{end}} |
| </div> |
| <div class="btn btn-warning" id="resetBtn{{$index}}"> |
| <a href="{{.ResetURL}}" class="button-passive" onclick="changeBtn('resetBtn{{$index}}', 'Resetting (takes a few seconds) ...')">Reset</a> |
| </div> |
| <div class="btn btn-warning" id="destroyBtn{{$index}}"> |
| <a href="{{.DestroyURL}}" class="button-passive" onclick="changeBtn('destroyBtn{{$index}}', 'Destroying (takes a few seconds) ...')">Destroy</a> |
| </div> |
| </div> |
| </div> |
| {{else}} |
| None found. |
| {{end}} |
| <div id="createBtn"><a href="{{.CreateURL}}" class="button-passive" onclick="changeBtn('createBtn', 'Creating (takes a few seconds) ...')">Create New</a></div> |
| {{with .Message -}} |
| <div id="message"> |
| {{.}} |
| </div> |
| {{end}} |
| </font> |
| </div> |
| <script src="{{.AssetsPrefix}}/identity/moment.js"></script> |
| <script src="{{.AssetsPrefix}}/identity/jquery.js"></script> |
| <script> |
| function setTimeText(elem) { |
| var timestamp = elem.data("unixtime"); |
| var m = moment(timestamp*1000.0); |
| var style = elem.data("style"); |
| if (style === "absolute") { |
| elem.html("<a href='#' onclick='return false;'>" + m.format("MMM DD, YYYY h:mm:ss a") + "</a>"); |
| elem.data("style", "fromNow"); |
| } else { |
| elem.html("<a href='#' onclick='return false;'>" + m.fromNow() + "</a>"); |
| elem.data("style", "absolute"); |
| } |
| } |
| |
| $(document).ready(function() { |
| $(".unixtime").each(function() { |
| // clicking the timestamp should toggle the display format. |
| $(this).click(function() { setTimeText($(this)); }); |
| setTimeText($(this)); |
| }); |
| }); |
| </script> |
| </body> |
| </html> |