Skip to content

Commit

Permalink
more work
Browse files Browse the repository at this point in the history
  • Loading branch information
@deannaflare
deannaflare committed Oct 4, 2024
1 parent d94b31b commit 106d42d
Show file tree
Hide file tree
Showing 9 changed files with 303 additions and 257 deletions.
6 changes: 6 additions & 0 deletions hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/actions_bar.html.j2
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
<div class="mt-4 mb-4">
{% include "components/banks/match_form.html.j2" %}
<div class="d-flex mt-5 mb-4 justify-content-end">
{% include 'components/banks/create_new_bank.html.j2' %}
</div>
</div>
7 changes: 3 additions & 4 deletions ...lates/components/add_to_bank_form.html.j2 → ...components/banks/add_to_bank_form.html.j2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,11 @@
<!-- Modal -->
<div class="modal fade" id="{{bank_title}}" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-xl" style="width: 60%; max-width: none;">
<div class="modal-content modal-xl" style="padding: 10px">
<div class="modal-content modal-xl" style="padding: 20px">
<form id="add_content_to_bank_{{ bank_title }}">
<div class="modal-header">
<h1 class="modal-title fs-5">Add Content: {{ bank_title }}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row" style="width: 80%">
Expand All @@ -24,7 +23,7 @@
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Submit</button>
<button type="submit" class="btn btn-success">Add</button>
</div>
</form>
<div id="hash_result_{{ bank_title }}">
Expand Down
121 changes: 121 additions & 0 deletions hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/banks_grid.html.j2
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<h1>Banks</h1>
<p class="text-secondary">Banks are like folders. You can do the following on this page:</p>
<ul class="text-secondary">
<li>Create new banks</li>
<li>Add content: Add content to each bank</li>
<li>Search by content: Find banks that contain a certain piece of content</li>
</ul>
{% include 'components/banks/actions_bar.html.j2' %}

<div class="row row-cols-1 row-cols-md-4 g-4">
<table class="table table-hover">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Bank Name</th>
<th scope="col">Matching Enabled Ratio</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{% for bank in bankList %}
<tr id="bank_item_{{bank['name']}}">
<th scope="row" style="background-color: transparent;">{{ loop.index }}</th>
<td style="background-color: transparent;">{{ bank['name'] }}</td>
<td style="background-color: transparent;">{{ bank['matching_enabled_ratio'] }}</td>
<td style="background-color: transparent;">
{% with bank_title=bank['name'] %}
{% include 'components/banks/add_to_bank_form.html.j2' %}
{% endwith %}
</td>
</tr>
{% endfor %}
</tbody>

</table>
</div>
<script>
const banksData = [
{% for bank in bankList %}
{
name: "{{ bank.name|e }}"
}{% if not loop.last %},{% endif %}
{% endfor %}
];
banksData.forEach(function(bank) {
const bankTitle=bank.name;
const addContentModal = document.getElementById(bankTitle);
const addContentToBankForm = document.getElementById("add_content_to_bank_" + bankTitle);
const formContent = addContentToBankForm.innerHTML;
addContentToBankForm.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData(event.target);
formData.append(event.target.content_type.value, event.target.file.files[0]);
formData.delete("file");
fetch(`/c/bank/${bankTitle}/content`, {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// Handle the response from the server here
renderAddBankResult(data);
})
.catch(error => {
console.error('Error:', error);
});
})
// reset modal innerHTML
addContentModal.addEventListener('hidden.bs.modal', function () {
addContentToBankForm.innerHTML = formContent;
});
const renderAddBankResult = (result) => {
// Render hashes table
const hashTable = HashTable(result);
// render on HTML
addContentToBankForm.innerHTML = hashTable;
}
const HashTable = (result) => {
return `
<div class="modal-header">
<h3 class="text-success">Success!</h3>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<h4>Added Hashes:</h4>
<p>Content ID: ${result.id}</p>
<h4>Hash Values:</h4>
<table class="table table-hover" =>
<thead>
<tr>
<th>Key</th>
<th>Value</th>
</tr>
</thead>
<tbody>
${Object.entries(result.signals).map(([key, value]) => `
<tr>
<td>${key}</td>
<td style="overflow: scroll; max-width: 200px; white-space: no-wrap;">${value}</td>
</tr>
`).join('')}
</tbody>
</table>
</div>
`;
}
});
</script>
69 changes: 69 additions & 0 deletions ...er-matcher-actioner/src/OpenMediaMatch/templates/components/banks/create_new_bank.html.j2
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<button type="submit" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#create_new_bank_modal">Create New Bank</button>

<!-- Modal -->
<div class="modal fade" id="create_new_bank_modal" tabindex="-1">
<div class="modal-dialog modal-dialog-centered modal-xl" style="width: 60%; max-width: none;">
<div class="modal-content modal-xl" style="padding: 20px">
<form action="/ui/create_bank" method="post" enctype="multipart/form-data" id="banks_grid_form">
<div class="modal-header">
<h1 class="modal-title fs-5">Create New Bank</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="input-group mb-3">
<input type="text" class="form-control" name="bank_name" placeholder="Name" id="create_bank_bank_name" required>
</div>
<span id="bank-name-error" class="text-danger"></span>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-success" id="create_bank_submit">Create</button>
</div>
</form>
</div>
</div>
</div>
<script>
document.getElementById('create_bank_bank_name').addEventListener('blur', function() {
const bankNameField = this;
// auto uppercase and trim input
bankNameField.value = bankNameField.value.trim().toUpperCase();
const submitButton = document.getElementById('create_bank_submit');
submitButton.disabled = true;
const errorSpan = document.getElementById('bank-name-error');
errorSpan.textContent = ''; // Clear previous error message
const regex = /^[A-Z0-9_]+$/;
// Validate the input
if (!regex.test(bankNameField.value)) {
errorSpan.textContent = 'Bank name must be all uppercase and snake cased';
bankNameField.classList.remove("is-valid");
bankNameField.classList.add("is-invalid");
} else {
submitButton.disabled = false;
bankNameField.classList.remove("is-invalid");
bankNameField.classList.add("is-valid");
}
});
document.getElementById("banks_grid_form").addEventListener("submit", async event => {
event.preventDefault();
fetch(`/c/banks`, {
method: 'POST',
body: JSON.stringify({name: document.getElementById('create_bank_bank_name').value}),
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
})
.then(async response => {
if (response.ok) {
window.location.reload();
} else {
json = await response.json()
alert("Create Bank failed! " + response.statusText + " : " + (json['message'] ?? '<no message>)'))
}
});
})
</script>
102 changes: 102 additions & 0 deletions hasher-matcher-actioner/src/OpenMediaMatch/templates/components/banks/match_form.html.j2
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,102 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<div class="card">
<div class="card-header">Find Content in Banks</div>
<form id="match_file" class="card-body">
<div class="row">
<div class="col">
<input class="form-control" type="file" name="file" required />
</div>
<div class="col">
<select class="form-select" name="media" id="content-type" required>
<option selected disabled value="">Select content type</option>
{% for c in content %}
{% if c['enabled'] %}
<option value="{{c['name']}}">{{c['name'].capitalize()}}</option>
{% endif %}
{% endfor %}
</select>
</div>
<div class="col">
<button type="submit" class="btn btn-primary">Find</button>
</div>
<div class="col">
<!-- for spacing -->
</div>
</div>
</form>
<div id="matches">
<!-- Added to by javascript -->
</div>
</div>

<script>
const match_form = document.getElementById("match_file");
const matches = document.getElementById("matches");
let banks = [];
match_form.addEventListener("submit", (event) => {
event.preventDefault();
const formData = new FormData();
// Append the selected file and content type to the FormData
formData.append(event.target.media.value, event.target.file.files[0]);
fetch('/ui/query', {
method: 'POST',
body: formData
})
.then(response => response.json())
.then(data => {
// Handle the response from the server here
banks = data.banks;
renderMatchResult(data);
highlightMatchedResults(data);
})
.catch(error => {
console.error('Error:', error);
});
})
const clearMatches = () => {
matches.innerHTML = "";
banks.forEach((bankName) => {
document.getElementById(`bank_item_${bankName}`).classList.remove("bg-light");
})
}
const renderMatchResult = (result) => {
// Render matched banks
const banksList = result.banks.map(bank => `<li>${bank}</li>`).join('');
const content = `
<div class="card-body">
<h5>Matched Banks</h5>
<ul>${banksList}</ul>
<h5>Hash Values:</h5>
<table class="table table-hover" style="max-height: 100px;">
<tr>
<th>Key</th>
<th>Value</th>
</tr>
${Object.entries(result.hashes).map(([key, value]) => `
<tr>
<td>${key}</td>
<td style="overflow: scroll; max-width: 200px; white-space: no-wrap;">${value}</td>
</tr>
`).join('')}
</table>
<button type="button" class="btn btn-secondary" onclick="clearMatches()">Clear</button>
</div>
`
// Append both the banks and hashes sections to the "matches" element
matches.innerHTML = content;
}
const highlightMatchedResults = (result) => {
// Render matched banks
result.banks.forEach((bankName) => {
document.getElementById(`bank_item_${bankName}`).classList.add("bg-light");
})
}
</script>
Loading

0 comments on commit 106d42d

Please sign in to comment.