Added docker conditional compilation

- Moved docker UX optimization into module
- Added conditional compilation for Windows build
- Added Permission Policy header editor
- Fixed docker container list ui error message bug
This commit is contained in:
Toby Chui
2024-06-17 00:24:24 +08:00
parent dfb81513b1
commit 03974163d4
13 changed files with 334 additions and 120 deletions

View File

@@ -16,6 +16,10 @@
pointer-events: none;
user-select: none;
}
#permissionPolicyEditor .experimental{
background-color: rgb(241, 241, 241);
}
</style>
</head>
<body>
@@ -105,16 +109,14 @@
</tr></thead>
<tbody id="permissionPolicyEditTable">
<tr>
<td>James</td>
<td>24</td>
<td>Engineer</td>
<td>Engineer</td>
<td colspan="4"><i class="ui loading spinner icon"></i> Generating</td>
</tr>
</tbody>
</table>
</div>
<br>
<button class="ui basic button"><i class="green save icon"></i> Save</button>
<small><i class="ui yellow exclamation triangle icon"></i> Grey out fields are non-standard permission policies</small>
<br><br>
<button class="ui basic button" onclick="savePermissionPolicy();"><i class="green save icon"></i> Save</button>
</div>
<div class="field" >
@@ -126,6 +128,7 @@
<script>
$('.menu .item').tab();
let permissionPolicyKeys = [];
let editingEndpoint = {};
if (window.location.hash.length > 1){
@@ -331,6 +334,33 @@
}
initHSTSState();
//Return true if this is an proposed permission policy feature
function isExperimentalFeature(header) {
// List of experimental features
const experimentalFeatures = [
"clipboard-read",
"clipboard-write",
"gamepad",
"speaker-selection",
"conversion-measurement",
"focus-without-user-activation",
"hid",
"idle-detection",
"interest-cohort",
"serial",
"sync-script",
"trust-token-redemption",
"unload",
"window-placement",
"vertical-scroll"
];
header = header.replaceAll("_","-");
// Check if the header is in the list of experimental features
return experimentalFeatures.includes(header);
}
/* List permission policy header from server */
function initPermissionPolicy(){
$.get("/api/proxy/header/handlePermissionPolicy?domain=" + editingEndpoint.ep, function(data){
@@ -340,7 +370,7 @@
return;
}
//Set checkbox state
//Set checkbox initial state
if (data.PPEnabled){
$("#enablePP").parent().checkbox("set checked");
$("#permissionPolicyEditor").removeClass("disabled");
@@ -349,6 +379,33 @@
$("#permissionPolicyEditor").addClass("disabled");
}
//Bind toggle change events
$("#enablePP").on("change", function(evt){
//Set checkbox state
let ppEnabled = $("#enablePP")[0].checked;
if (ppEnabled){
$("#permissionPolicyEditor").removeClass("disabled");
}else{
$("#permissionPolicyEditor").addClass("disabled");
}
$.ajax({
url: "/api/proxy/header/handlePermissionPolicy",
method: "POST",
data: {
enable: ppEnabled,
domain: editingEndpoint.ep
},
success: function(data){
if (data.error != undefined){
parent.msgbox(data.error, false);
}else{
parent.msgbox(`Permission Policy ${ppEnabled?"Enabled":"Disabled"}`)
}
}
})
});
//Render the table to list
$("#permissionPolicyEditTable").html("");
for (const [key, value] of Object.entries(data.CurrentPolicy)) {
@@ -363,9 +420,12 @@
if (value.length == 0){
enabled = ""
allowall = "checked"; //default state
}
$("#permissionPolicyEditTable").append(`<tr>
<td>${key}</td>
let isExperimental = isExperimentalFeature(key);
$("#permissionPolicyEditTable").append(`<tr class="${isExperimental?"experimental":""}">
<td>${key.replaceAll("_","-")}</td>
<td>
<div class="ui checkbox">
<input class="enabled" type="checkbox" name="${key}" ${enabled}>
@@ -373,22 +433,84 @@
</div>
</td>
<td>
<div class="ui radio checkbox">
<input type="radio" value="all" name="${key}-target" ${allowall}>
<div class="ui radio checkbox targetinput ${!enabled?"disabled":""}">
<input type="radio" value="all" name="${key}-target" ${allowall} ${!enabled?"disabled=\"\"":""}>
<label></label>
</div>
</td>
<td>
<div class="ui radio checkbox">
<input type="radio" value="self" name="${key}-target" ${allowself}>
<div class="ui radio checkbox targetinput ${!enabled?"disabled":""}">
<input type="radio" value="self" name="${key}-target" ${allowself} ${!enabled?"disabled=\"\"":""}>
<label></label>
</div>
</td>
</tr>`);
permissionPolicyKeys.push(key);
}
$("#permissionPolicyEditTable .enabled").on("change", function(){
console.log($(this)[0].checked);
let fieldGroup = $(this).parent().parent().parent();
if ($(this)[0].checked){
fieldGroup.find(".targetinput").removeClass("disabled");
fieldGroup.find("input[type=radio]").prop('disabled', false);
}else{
fieldGroup.find(".targetinput").addClass("disabled");
fieldGroup.find("input[type=radio]").prop('disabled', true);
}
})
});
}
initPermissionPolicy();
//Generate the permission policy object for sending to backend
function generatePermissionPolicyObject(){
function getStructuredFieldValueFromDOM(fieldKey){
var policyTarget = $(`#permissionPolicyEditTable input[name="${fieldKey}-target"]:checked`).val();
var isPolicyEnabled = $(`#permissionPolicyEditTable input[name="${fieldKey}"]`).is(':checked');
if (!isPolicyEnabled){
return [];
}
if (policyTarget == "all"){
//Rewrite all to correct syntax
policyTarget = "*";
}
return [policyTarget];
}
let newPermissionPolicyKeyValuePair = {};
permissionPolicyKeys.forEach(policyKey => {
newPermissionPolicyKeyValuePair[policyKey] = getStructuredFieldValueFromDOM(policyKey);
});
console.log(newPermissionPolicyKeyValuePair);
return newPermissionPolicyKeyValuePair;
}
//Handle saving of permission policy
function savePermissionPolicy(){
let permissionPolicy = generatePermissionPolicyObject();
let domain = editingEndpoint.ep;
$.ajax({
url: "/api/proxy/header/handlePermissionPolicy",
method: "PUT",
data: {
"domain": domain,
"pp": JSON.stringify(permissionPolicy),
},
success: function(data){
if (data.error != undefined){
parent.msgbox(data.error, false);
}else{
parent.msgbox("Permission Policy Updated");
}
}
})
}
</script>
</body>
</html>