mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-07-21 00:23:53 -04:00
Merge pull request #2266 from GSA/2168-when-a-user-schedules-a-job-they-should-see-scheduled-instead-of-sent-on-the-service-activity-page
Updating/Fix job status states
This commit is contained in:
Beverly Nguyen
@@ -1,7 +1,8 @@
|
||||
(function (window) {
|
||||
|
||||
if (document.getElementById('activityChartContainer')) {
|
||||
|
||||
const tableContainer = document.getElementById('activityContainer');
|
||||
const currentUserName = tableContainer.getAttribute('data-currentUserName');
|
||||
const COLORS = {
|
||||
delivered: '#0076d6',
|
||||
failed: '#fa9441',
|
||||
@@ -270,27 +271,58 @@
|
||||
subTitle.textContent = `${selectedText} - last 7 days`;
|
||||
fetchData(selectedValue);
|
||||
|
||||
// Update ARIA live region
|
||||
const liveRegion = document.getElementById('aria-live-account');
|
||||
liveRegion.textContent = `Data updated for ${selectedText} - last 7 days`;
|
||||
|
||||
// Switch tables based on dropdown selection
|
||||
const selectedTable = selectedValue === "individual" ? "table1" : "table2";
|
||||
const tables = document.querySelectorAll('.table-overflow-x-auto');
|
||||
tables.forEach(function(table) {
|
||||
table.classList.add('hidden'); // Hide all tables by adding the hidden class
|
||||
table.classList.remove('visible'); // Ensure they are not visible
|
||||
});
|
||||
const tableToShow = document.getElementById(selectedTable);
|
||||
tableToShow.classList.remove('hidden'); // Remove hidden class
|
||||
tableToShow.classList.add('visible'); // Add visible class
|
||||
const tableHeading = document.querySelector('#tableActivity h2');
|
||||
const senderColumns = document.querySelectorAll('.sender-column');
|
||||
const allRows = document.querySelectorAll('#activity-table tbody tr');
|
||||
const caption = document.querySelector('#activity-table caption');
|
||||
|
||||
if (selectedValue === 'individual') {
|
||||
|
||||
tableHeading.textContent = 'My activity';
|
||||
caption.textContent = `Table showing the sent jobs for ${currentUserName}`;
|
||||
|
||||
senderColumns.forEach(col => {
|
||||
col.style.display = 'none';
|
||||
});
|
||||
|
||||
allRows.forEach(row => row.style.display = 'none');
|
||||
|
||||
const userRows = Array.from(allRows).filter(row => {
|
||||
const senderCell = row.querySelector('.sender-column');
|
||||
const rowSender = senderCell ? senderCell.textContent.trim() : '';
|
||||
return rowSender === currentUserName;
|
||||
});
|
||||
|
||||
userRows.slice(0, 5).forEach(row => {
|
||||
row.style.display = '';
|
||||
});
|
||||
} else {
|
||||
|
||||
tableHeading.textContent = 'Service activity';
|
||||
caption.textContent = `Table showing the sent jobs for service`;
|
||||
|
||||
senderColumns.forEach(col => {
|
||||
col.style.display = '';
|
||||
});
|
||||
|
||||
allRows.forEach((row, index) => {
|
||||
row.style.display = (index < 5) ? '' : 'none';
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Initialize activityChart chart and table with service data by default
|
||||
fetchData('service');
|
||||
|
||||
// Add event listener to the dropdown
|
||||
const allRows = Array.from(document.querySelectorAll('#activity-table tbody tr'));
|
||||
allRows.forEach((row, index) => {
|
||||
row.style.display = (index < 5) ? '' : 'none';
|
||||
});
|
||||
|
||||
const dropdown = document.getElementById('options');
|
||||
dropdown.addEventListener('change', handleDropdownChange);
|
||||
});
|
||||
|
||||
@@ -14,7 +14,7 @@ from app import (
|
||||
service_api_client,
|
||||
template_statistics_client,
|
||||
)
|
||||
from app.formatters import format_date_numeric, format_datetime_numeric, get_time_left
|
||||
from app.formatters import format_date_numeric, format_datetime_numeric
|
||||
from app.main import main
|
||||
from app.main.views.user_profile import set_timezone
|
||||
from app.statistics_utils import get_formatted_percentage
|
||||
@@ -62,32 +62,14 @@ def service_dashboard(service_id):
|
||||
job_response = job_api_client.get_jobs(service_id)["data"]
|
||||
service_data_retention_days = 7
|
||||
|
||||
jobs = [
|
||||
{
|
||||
"job_id": job["id"],
|
||||
"time_left": get_time_left(job["created_at"]),
|
||||
"download_link": url_for(
|
||||
".view_job_csv", service_id=current_service.id, job_id=job["id"]
|
||||
),
|
||||
"view_job_link": url_for(
|
||||
".view_job", service_id=current_service.id, job_id=job["id"]
|
||||
),
|
||||
"created_at": job["created_at"],
|
||||
"processing_finished": job.get("processing_finished"),
|
||||
"processing_started": job.get("processing_started"),
|
||||
"notification_count": job["notification_count"],
|
||||
"created_by": job["created_by"],
|
||||
"template_name": job["template_name"],
|
||||
"original_file_name": job["original_file_name"],
|
||||
}
|
||||
for job in job_response
|
||||
if job["job_status"] != "cancelled"
|
||||
]
|
||||
filtered_jobs = [job for job in job_response if job["job_status"] != "cancelled"]
|
||||
sorted_jobs = sorted(filtered_jobs, key=lambda job: job["created_at"], reverse=True)
|
||||
|
||||
return render_template(
|
||||
"views/dashboard/dashboard.html",
|
||||
updates_url=url_for(".service_dashboard_updates", service_id=service_id),
|
||||
partials=get_dashboard_partials(service_id),
|
||||
jobs=jobs,
|
||||
jobs=sorted_jobs,
|
||||
service_data_retention_days=service_data_retention_days,
|
||||
sms_sent=sms_sent,
|
||||
sms_allowance_remaining=sms_allowance_remaining,
|
||||
|
||||
72
app/templates/views/dashboard/activity-table.html
Normal file
72
app/templates/views/dashboard/activity-table.html
Normal file
@@ -0,0 +1,72 @@
|
||||
<h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">Recent activity</h2>
|
||||
<div id="activityChartContainer">
|
||||
<form class="usa-form">
|
||||
<label class="usa-label" for="options">Account</label>
|
||||
<select class="usa-select margin-bottom-2" name="options" id="options">
|
||||
<option value disabled>- Select -</option>
|
||||
<option value="service" selected>{{ current_service.name }}</option>
|
||||
<option value="individual">{{ current_user.name }}</option>
|
||||
</select>
|
||||
</form>
|
||||
<div id="activityChart">
|
||||
<div class="chart-header">
|
||||
<div class="chart-subtitle">{{ current_service.name }} - last 7 days</div>
|
||||
<div class="chart-legend" role="region" aria-label="Legend"></div>
|
||||
</div>
|
||||
<div class="chart-container" id="weeklyChart"></div>
|
||||
<table id="weeklyTable" class="usa-sr-only usa-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
|
||||
<div class="table-container" id="activityContainer" data-currentUserName="{{ current_user.name }}">
|
||||
<div id="tableActivity" class="table-overflow-x-auto">
|
||||
<h2 id="table-heading" class="margin-top-4 margin-bottom-1">Service activity</h2>
|
||||
|
||||
<table class="usa-table job-table" id="activity-table">
|
||||
<caption class="usa-sr-only">Table showing the sent jobs for {{current_service.name}}</caption>
|
||||
|
||||
<thead class="table-field-headings">
|
||||
<tr>
|
||||
<th scope="col" class="table-field-heading-first" id="jobId">Job ID#</th>
|
||||
<th data-sortable scope="col" class="table-field-heading" scope="col">Template</th>
|
||||
<th data-sortable scope="col" class="table-field-heading">Job status</th>
|
||||
<th data-sortable scope="col" role="columnheader" class="table-field-heading sender-column">Sender
|
||||
</th>
|
||||
<th data-sortable scope="col" class="table-field-heading"># of Recipients</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if jobs %}
|
||||
{% for job in jobs %}
|
||||
<tr id="{{ job.id }}">
|
||||
<td class="table-field jobid" role="rowheader">
|
||||
<a class="usa-link" href="{{ url_for('.view_job', service_id=current_service.id, job_id=job.id )}}">
|
||||
{{ job.id[:8] if job.id else 'Manually entered number' }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="table-field template">{{ job.template_name }}</td>
|
||||
<td class="table-field time-sent">
|
||||
{% if job.scheduled_for and not job.processing_finished %}
|
||||
Scheduled for {{ job.scheduled_for|format_datetime_table }}
|
||||
{% elif job.processing_finished and not job.statistics|selectattr('status', 'equalto', 'sending')|list %}
|
||||
Sent on {{ job.processing_finished|format_datetime_table }}
|
||||
{% elif job.processing_started %}
|
||||
Sending since {{ job.processing_started|format_datetime_table }}
|
||||
{% else %}
|
||||
Pending since {{ job.created_at|format_datetime_table }}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td class="table-field sender sender-column">{{ job.created_by.name }}</td>
|
||||
<td class="table-field count-of-recipients">{{ job.notification_count }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr class="table-row">
|
||||
<td class="table-empty-message" colspan="10">No batched job messages found  (messages are
|
||||
kept for {{ service_data_retention_days }} days).</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -6,140 +6,38 @@
|
||||
{% from "components/ajax-block.html" import ajax_block %}
|
||||
|
||||
{% block service_page_title %}
|
||||
Dashboard
|
||||
Dashboard
|
||||
{% endblock %}
|
||||
|
||||
{% block maincolumn_content %}
|
||||
<script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>
|
||||
<script type="text/javascript" src="{{ asset_url('js/setTimezone.js') }}"></script>
|
||||
|
||||
|
||||
<div class="dashboard margin-top-0 margin-bottom-2">
|
||||
<div class="dashboard margin-top-0 margin-bottom-2">
|
||||
|
||||
<h1 class="usa-sr-only">Dashboard</h1>
|
||||
{% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
|
||||
{% include 'views/dashboard/write-first-messages.html' %}
|
||||
{% endif %}
|
||||
<h1 class="usa-sr-only">Dashboard</h1>
|
||||
{% if current_user.has_permissions('manage_templates') and not current_service.all_templates %}
|
||||
{% include 'views/dashboard/write-first-messages.html' %}
|
||||
{% endif %}
|
||||
|
||||
{{ ajax_block(partials, updates_url, 'upcoming') }}
|
||||
{{ ajax_block(partials, updates_url, 'upcoming') }}
|
||||
|
||||
<h2 class="font-body-2xl line-height-sans-2 margin-top-0">{{ current_service.name }} Dashboard</h2>
|
||||
<h2 class="font-body-2xl line-height-sans-2 margin-top-0">{{ current_service.name }} Dashboard</h2>
|
||||
|
||||
{{ ajax_block(partials, updates_url, 'inbox') }}
|
||||
{{ ajax_block(partials, updates_url, 'inbox') }}
|
||||
|
||||
<div id="totalMessageChartContainer" data-sms-sent="{{ sms_sent }}" data-sms-allowance-remaining="{{ sms_allowance_remaining }}">
|
||||
<h2 id="chartTitle">Total messages</h2>
|
||||
<svg id="totalMessageChart"></svg>
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
<div id="totalMessageTable" class="margin-0"></div>
|
||||
<div id="totalMessageChartContainer" data-sms-sent="{{ sms_sent }}" data-sms-allowance-remaining="{{ sms_allowance_remaining }}">
|
||||
<h2 id="chartTitle">Total messages</h2>
|
||||
<svg id="totalMessageChart"></svg>
|
||||
<div id="message"></div>
|
||||
</div>
|
||||
<div id="totalMessageTable" class="margin-0"></div>
|
||||
|
||||
<h2 class="line-height-sans-2 margin-bottom-0 margin-top-4">Recent activity</h2>
|
||||
<div id="activityChartContainer">
|
||||
<form class="usa-form">
|
||||
<label class="usa-label" for="options">Account</label>
|
||||
<select class="usa-select margin-bottom-2" name="options" id="options">
|
||||
<option value disabled>- Select -</option>
|
||||
<option value="service" selected>{{ current_service.name }}</option>
|
||||
<option value="individual">{{ current_user.name }}</option>
|
||||
</select>
|
||||
</form>
|
||||
<div id="activityChart">
|
||||
<div class="chart-header">
|
||||
<div class="chart-subtitle">{{ current_service.name }} - last 7 days</div>
|
||||
<div class="chart-legend" role="region" aria-label="Legend"></div>
|
||||
</div>
|
||||
<div class="chart-container" id="weeklyChart"></div>
|
||||
<table id="weeklyTable" class="usa-sr-only usa-table"></table>
|
||||
</div>
|
||||
</div>
|
||||
<div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
|
||||
{% include 'views/dashboard/activity-table.html' %}
|
||||
|
||||
{% if current_user.has_permissions('manage_service') %}{% endif %}
|
||||
{% if current_user.has_permissions('manage_service') %}{% endif %}
|
||||
|
||||
<div class="table-container">
|
||||
<div id="table1" class="table-overflow-x-auto hidden">
|
||||
<h2 class="margin-top-4 margin-bottom-1">My activity</h2>
|
||||
<table class="usa-table job-table">
|
||||
<caption class="usa-sr-only">Table showing the sent jobs for {{current_user.name}}</caption>
|
||||
<thead class="table-field-headings">
|
||||
<tr>
|
||||
<th scope="col" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
|
||||
<th data-sortable scope="col" class="table-field-heading"><span>Template</span></th>
|
||||
<th data-sortable scope="col" class="table-field-heading"><span>Job status</span></th>
|
||||
<th data-sortable scope="col" class="table-field-heading"><span># of Recipients</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if jobs %}
|
||||
{% for job in jobs[:5] %}
|
||||
{% if job.created_by.name == current_user.name %}
|
||||
{% set notification = job.notifications[0] %}
|
||||
<tr id="{{ job.job_id }}">
|
||||
<td class="table-field jobid" role="rowheader">
|
||||
<a class="usa-link" href="{{ job.view_job_link }}">
|
||||
{{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="table-field template">{{ job.template_name }}</td>
|
||||
<td class="table-field time-sent">Sent on
|
||||
{{ (job.processing_finished if job.processing_finished else job.processing_started
|
||||
if job.processing_started else job.created_at)|format_datetime_table }}
|
||||
</td>
|
||||
<td class="table-field count-of-recipients">{{ job.notification_count }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr class="table-row">
|
||||
<td class="table-empty-message" colspan="10">No batched job messages found  (messages are kept for {{ service_data_retention_days }} days).</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div id="table2" class="table-overflow-x-auto visible">
|
||||
<h2 class="margin-top-4 margin-bottom-1">Service activity</h2>
|
||||
<table class="usa-table job-table">
|
||||
<caption class="usa-sr-only">Table showing the sent jobs for this service</caption>
|
||||
<thead class="table-field-headings">
|
||||
<tr>
|
||||
<th scope="col" role="columnheader" class="table-field-heading-first" id="jobId"><span>Job ID#</span></th>
|
||||
<th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Template</span></th>
|
||||
<th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Job status</span></th>
|
||||
<th data-sortable scope="col" role="columnheader" class="table-field-heading"><span>Sender</span></th>
|
||||
<th data-sortable scope="col" role="columnheader" class="table-field-heading"><span># of Recipients</span></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% if jobs %}
|
||||
{% for job in jobs[:5] %}
|
||||
{% set notification = job.notifications[0] %}
|
||||
<tr id="{{ job.job_id }}">
|
||||
<td class="table-field jobid" role="rowheader">
|
||||
<a class="usa-link" href="{{ job.view_job_link }}">
|
||||
{{ job.job_id[:8] if job.job_id else 'Manually entered number' }}
|
||||
</a>
|
||||
</td>
|
||||
<td class="table-field template">{{ job.template_name }}</td>
|
||||
<td class="table-field time-sent">Sent on
|
||||
{{ (job.processing_finished if job.processing_finished else job.processing_started
|
||||
if job.processing_started else job.created_at)|format_datetime_table }}
|
||||
</td>
|
||||
<td class="table-field sender">{{ job.created_by.name }}</td>
|
||||
<td class="table-field count-of-recipients">{{ job.notification_count }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<tr class="table-row">
|
||||
<td class="table-empty-message" colspan="10">No batched job messages found  (messages are kept for {{ service_data_retention_days }} days).</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
{{ ajax_block(partials, updates_url, 'template-statistics') }}
|
||||
</div>
|
||||
{{ ajax_block(partials, updates_url, 'template-statistics') }}
|
||||
</div>
|
||||
|
||||
{% endblock %}
|
||||
|
||||
@@ -657,9 +657,8 @@ def test_should_show_recent_templates_on_dashboard(
|
||||
]
|
||||
assert "Total messages" in headers
|
||||
|
||||
table_rows = page.find_all("tbody")[0].find_all("tr")
|
||||
|
||||
assert len(table_rows) == 0
|
||||
table_rows = page.find_all("tbody")[1].find_all("tr")
|
||||
assert len(table_rows) == 2
|
||||
|
||||
|
||||
@pytest.mark.parametrize(
|
||||
@@ -1943,7 +1942,6 @@ def test_service_dashboard_shows_batched_jobs(
|
||||
job_table_body = page.find("table", class_="job-table")
|
||||
|
||||
rows = job_table_body.find_all("tbody")[0].find_all("tr")
|
||||
|
||||
assert len(rows) == 0
|
||||
assert len(rows) == 1
|
||||
|
||||
assert job_table_body is not None
|
||||
|
||||
@@ -21,7 +21,7 @@ Object.defineProperty(HTMLElement.prototype, 'clientWidth', {
|
||||
beforeAll(done => {
|
||||
// Set up the DOM with the D3 script included
|
||||
document.body.innerHTML = `
|
||||
<div id="activityChartContainer"">
|
||||
<div id="activityChartContainer">
|
||||
<form class="usa-form">
|
||||
<label class="usa-label" for="options">Account</label>
|
||||
<select class="usa-select margin-bottom-2" name="options" id="options">
|
||||
@@ -40,6 +40,9 @@ beforeAll(done => {
|
||||
</div>
|
||||
</div>
|
||||
<div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
|
||||
<div id="activityContainer" data-currentUserName="Test User"></div>
|
||||
|
||||
<div id="aria-live-account" class="usa-sr-only" aria-live="polite"></div>
|
||||
`;
|
||||
|
||||
// Load the D3 script dynamically
|
||||
@@ -178,3 +181,59 @@ const data = await fetchData('service');
|
||||
expect(global.fetch).toHaveBeenCalledWith('/daily_stats.json');
|
||||
expect(data).toEqual(mockResponse);
|
||||
});
|
||||
|
||||
test('handleDropdownChange updates DOM for individual selection', () => {
|
||||
document.body.innerHTML = `
|
||||
<div id="activityChartContainer">
|
||||
<div class="chart-subtitle"></div>
|
||||
</div>
|
||||
<div id="aria-live-account"></div>
|
||||
<div id="activityContainer" data-currentUserName="Test User"></div>
|
||||
<div id="tableActivity">
|
||||
<h2 id="table-heading"></h2>
|
||||
<table id="activity-table">
|
||||
<caption id="caption"></caption>
|
||||
<tbody>
|
||||
<tr><td class="sender-column">Test User</td></tr>
|
||||
<tr><td class="sender-column">Other User</td></tr>
|
||||
<tr><td class="sender-column">Test User</td></tr>
|
||||
<tr><td class="sender-column">Test User</td></tr>
|
||||
<tr><td class="sender-column">Other User</td></tr>
|
||||
<tr><td class="sender-column">Test User</td></tr>
|
||||
<tr><td class="sender-column">Test User</td></tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<select id="options">
|
||||
<option value="service">Service</option>
|
||||
<option value="individual">Individual</option>
|
||||
</select>
|
||||
`;
|
||||
|
||||
window.currentUserName = "Test User";
|
||||
|
||||
jest.spyOn(window, 'fetchData').mockImplementation(() => {});
|
||||
|
||||
const selectElement = document.getElementById('options');
|
||||
selectElement.value = 'individual';
|
||||
const event = { target: selectElement };
|
||||
|
||||
window.handleDropdownChange(event);
|
||||
|
||||
expect(document.getElementById('table-heading').textContent).toBe('My activity');
|
||||
expect(document.getElementById('caption').textContent).toContain('Test User');
|
||||
|
||||
document.querySelectorAll('.sender-column').forEach(col => {
|
||||
expect(col.style.display).toBe('none');
|
||||
});
|
||||
|
||||
const rows = Array.from(document.querySelectorAll('#activity-table tbody tr'));
|
||||
const visibleRows = rows.filter(row => row.style.display !== 'none');
|
||||
expect(visibleRows.length).toBeLessThanOrEqual(5);
|
||||
visibleRows.forEach(row => {
|
||||
const sender = row.querySelector('.sender-column').textContent.trim();
|
||||
expect(sender).toBe('Test User');
|
||||
});
|
||||
|
||||
window.fetchData.mockRestore();
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user