|
|
@@ -5,6 +5,13 @@
|
|
|
<link rel="stylesheet" href="../script/semantic/semantic.min.css">
|
|
|
<script src="../script/jquery-3.6.0.min.js"></script>
|
|
|
<script src="../script/semantic/semantic.min.js"></script>
|
|
|
+ <style>
|
|
|
+ .upstreamActions{
|
|
|
+ position: absolute;
|
|
|
+ top: 0.6em;
|
|
|
+ right: 0.6em;
|
|
|
+ }
|
|
|
+ </style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<br>
|
|
|
@@ -16,18 +23,11 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ui divider"></div>
|
|
|
- <table class="ui very basic compacted unstackable celled table">
|
|
|
- <thead>
|
|
|
- <tr>
|
|
|
- <th>Upstream</th>
|
|
|
- <th>Remove</th>
|
|
|
- </tr></thead>
|
|
|
- <tbody id="inlineEditTable">
|
|
|
- <tr>
|
|
|
- <td colspan="2"><i class="ui green circle check icon"></i> No Upstreams</td>
|
|
|
- </tr>
|
|
|
- </tbody>
|
|
|
- </table>
|
|
|
+ <div id="upstreamTable">
|
|
|
+ <div class="ui segment">
|
|
|
+ <a></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<div class="ui divider"></div>
|
|
|
<div class="field" >
|
|
|
<button class="ui basic button" style="float: right;" onclick="closeThisWrapper();">Close</button>
|
|
|
@@ -57,10 +57,49 @@
|
|
|
alert(data.error);
|
|
|
return;
|
|
|
}else{
|
|
|
- $("#inlineEditTable").html("");
|
|
|
+ $("#upstreamTable").html("");
|
|
|
if (data.Origins != undefined){
|
|
|
origins = data.Origins;
|
|
|
console.log(origins);
|
|
|
+ data.Origins.forEach(upstream => {
|
|
|
+ let tlsIcon = "";
|
|
|
+ if (upstream.RequireTLS){
|
|
|
+ tlsIcon = `<i class="green lock icon" title="TLS Mode"></i>`;
|
|
|
+ if (upstream.SkipCertValidations){
|
|
|
+ tlsIcon = `<i class="yellow lock icon" title="TLS/SSL mode without verification"></i>`
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ let url = `${upstream.RequireTLS?"https://":"http://"}${upstream.OriginIpOrDomain}`
|
|
|
+
|
|
|
+ $("#upstreamTable").append(`<div class="ui segment">
|
|
|
+ <h4 class="ui header">
|
|
|
+ ${tlsIcon}
|
|
|
+ <div class="content">
|
|
|
+ <a href="${url}" target="_blank">${upstream.OriginIpOrDomain}</a>
|
|
|
+ <div class="sub header">Online</div>
|
|
|
+ </div>
|
|
|
+ </h4>
|
|
|
+ <div class="ui divider"></div>
|
|
|
+ <div class="ui checkbox">
|
|
|
+ <input type="checkbox" name="example">
|
|
|
+ <label>Require TLS<br>
|
|
|
+ <small>Proxy target require HTTPS connection</small></label>
|
|
|
+ </div><br>
|
|
|
+ <div class="ui checkbox" style="margin-top: 0.6em;">
|
|
|
+ <input type="checkbox" name="example">
|
|
|
+ <label>Skip Verification<br>
|
|
|
+ <small>Check this if proxy target is using self signed certificates</small></label>
|
|
|
+ </div>
|
|
|
+ <div class="upstreamActions">
|
|
|
+ <button class="ui basic circular icon button" title="Edit Upstream Destination"><i class="ui grey edit icon"></i></button>
|
|
|
+ <button class="ui basic circular icon button" title="Remove Upstream"><i class="ui red trash icon"></i></button>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>`);
|
|
|
+ });
|
|
|
+
|
|
|
+ $(".ui.checkbox").checkbox();
|
|
|
}else{
|
|
|
//Assume no origins
|
|
|
$("#inlineEditTable").html(`<tr>
|
Toby Chui