Skip to content

Commit

Permalink
[hma][UI] Refactor Banks Page (#1652)
Browse files Browse the repository at this point in the history
  • Loading branch information
@deannaflare
deannaflare authored Oct 6, 2024
1 parent ca987f8 commit 403308b
Show file tree
Hide file tree
Showing 8 changed files with 288 additions and 201 deletions.
89 changes: 0 additions & 89 deletions hasher-matcher-actioner/src/OpenMediaMatch/templates/components/add_to_bank_form.html.j2
View file

This file was deleted.

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>
37 changes: 37 additions & 0 deletions ...r-matcher-actioner/src/OpenMediaMatch/templates/components/banks/add_to_bank_form.html.j2
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<button type="button" class="btn btn-light" data-bs-toggle="modal" data-bs-target="#{{bank_title}}">Add content</button>
<!-- 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: 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>
</div>
<div class="modal-body">
<div class="row" style="width: 80%">
<input class="form-control" type="file" name="file" required style="margin-bottom: 20px">
<select class="form-select" name="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>
<div class="modal-footer">
<button type="submit" class="btn btn-success">Add</button>
</div>
</form>
<div id="hash_result_{{ bank_title }}">
<!-- Added to by javascript -->
</div>
</div>
</div>
</div>
<script>
</script>
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>
43 changes: 21 additions & 22 deletions ...h/templates/components/banks_grid.html.j2 → .../components/banks/create_new_bank.html.j2
View file
Original file line number Diff line number Diff line change
@@ -1,27 +1,27 @@
{# Copyright (c) Meta Platforms, Inc. and affiliates. #}
<h3> Banks </h3>
<div class="w-50 my-1">
<form action="/ui/create_bank" method="post" enctype="multipart/form-data" id="banks_grid_form">
<div class="input-group mb-3">
<input type="text" class="form-control" name="bank_name" placeholder="Name" id="create_bank_bank_name" required>
<button type="submit" class="btn btn-outline-success" id="create_bank_submit">Create New Bank</button>
</div>
<span id="bank-name-error" class="text-danger"></span>
</form>
</div>
<div class="row row-cols-1 row-cols-md-4 g-4">
{% for b in bankList %}
<div class="col">
<div class="card">
<div class="card-header bg-info">
<h5 class="my-0 fw-normal">{{b['name']}}</h4>
</div>
<div class="card-body">
<p class="card-text">We'll add stats here later.</p>
</div>
<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>
{% endfor %}
</div>
<script>
document.getElementById('create_bank_bank_name').addEventListener('blur', function() {
Expand Down Expand Up @@ -66,5 +66,4 @@
}
});
})
</script>
Loading

0 comments on commit 403308b

Please sign in to comment.