| <!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"> |
| {{template "header" .}} |
| <script> |
| function changeBtn(id, newHTML) { |
| document.getElementById(id).innerHTML = "<font color='gray'>"+newHTML+"</font>"; |
| } |
| </script> |
| <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"> |
| <h3>{{kubeName .Name}}</h3> |
| <p><b>Creation Time:</b> <span class="unixtime" data-unixtime={{.CreationTime.Unix}}>{{.CreationTime.String}}</span> |
| </p> |
| <p> |
| <b>Mount Name</b><br/> |
| <i>{{.NameRoot}}/</i><wbr/>{{relativeName .Name}} |
| </p> |
| <p class="blessing-caveats"> |
| <b>Blessing Patterns</b><br/> |
| {{range .BlessingPatterns}} |
| {{.}}<br/> |
| {{end}} |
| </p> |
| </div> |
| <div class="blessing-revoked"> |
| <a href="{{.DashboardURL}}" class="button-passive" target="_blank">Dashboard</a> |
| </div> |
| <div class="blessing-revoked" id="destroyBtn{{$index}}"> |
| <a href="{{.DestroyURL}}" class="button-passive" onclick="changeBtn('destroyBtn{{$index}}', 'Destroying (takes a few seconds) ...')">Destroy</a> |
| </div> |
| </div> |
| {{else}} |
| None found. |
| {{end}} |
| <p> |
| <span id="createBtn"><a href="{{.CreateURL}}" class="button-passive" onclick="changeBtn('createBtn', 'Creating (takes a few seconds) ...')">Create New</a></span> |
| </p> |
| {{with .Message -}} |
| <hr> |
| <p> |
| <font size="2">{{.}}</font> |
| </p> |
| {{end}} |
| </font> |
| </main> |
| <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> |
