Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: smaller views for laptop screens #136

Merged
merged 1 commit into from
Aug 24, 2024
Merged

feat: smaller views for laptop screens #136

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions src/aind_data_transfer_service/templates/job_status.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
}
.content {
width: 100%;
height: calc(100vh - 250px);
height: calc(100vh - 200px);
iframe {
border: none;
width: 100%;
Expand All @@ -39,9 +39,9 @@
</nav>
<div class="content">
<!-- display total entries from child iframe -->
<h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
<h4 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h4>
<!-- filters for job status results-->
<div class="card mb-4" style="width:400px">
<div class="card mb-4 small" style="width:400px">
<div class="card-header py-1" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-filters" aria-expanded="false" aria-controls="collapse-filters">
<i class="bi bi-filter"></i><span class="ms-2">Filter by</span>
<i class="bi bi-chevron-expand float-end"></i>
Expand Down Expand Up @@ -91,7 +91,7 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
</div>
<!-- toolbar to change jobs per page and navigate pages -->
<div id="jobs-toolbar" class="btn-toolbar justify-content-between mb-2" role="toolbar">
<div class="input-group">
<div class="input-group input-group-sm">
<select class="form-select" onchange="updateJobStatusTableLimit(this.value);this.blur();">
{% for l in [10, 25, 50, 100] %}
{% if l==default_limit %}<option value="{{ l }}" selected>{{ l }}</option>
Expand All @@ -101,11 +101,11 @@ <h2 class="mb-2">Jobs Submitted: <span id="jobs-iframe-total-entries"></h2>
</select>
<span class="input-group-text">jobs per page</span>
</div>
<div class="btn-group" role="group">
<div class="btn-group btn-group-sm" role="group">
<!-- display current jobs range e.g, "1 to 10 of 100" -->
<span id="jobs-iframe-showing" class="btn" style="cursor:default;"></span>
</div>
<div class="btn-group pagination" role="group">
<div class="btn-group pagination pagination-sm" role="group">
<button id="jobs-page-btn-first" type="button" class="btn page-link"
onclick="updateJobStatusTablePage(PaginateTo.FIRST);this.blur();">&laquo; First</button>
<button id="jobs-page-btn-prev" type="button" class="btn page-link"
Expand Down
28 changes: 10 additions & 18 deletions src/aind_data_transfer_service/templates/job_status_table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
<style>
.modal-body {
height: calc(100vh - 250px);
height: calc(100vh - 100px);
}
</style>
</head>

<body>
<!-- job status table -->
<table class="table table-bordered table-striped table-hover table-sm">
<table class="table table-bordered table-striped table-hover table-sm" style="font-size: small">
<tr>
<th>Asset Name</th>
<th>Job ID</th>
Expand All @@ -41,7 +41,7 @@
<td class="datetime_to_be_adjusted">{{job_status.end_time}}</td>
<td>{{job_status.comment}}</td>
<td>
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#tasks-modal" data-job-id="{{ job_status.job_id }}" data-job-name="{{ job_status.name}}" data-job-state="{{ job_status.job_state }}">
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#tasks-modal" data-job-id="{{ job_status.job_id }}" data-job-name="{{ job_status.name}}" data-job-state="{{ job_status.job_state }}">
<i class="bi bi-box-arrow-up-right" title="View tasks and logs"></i>
</button>
</td>
Expand All @@ -52,25 +52,17 @@
<div class="modal fade" id="tasks-modal" tabindex="-1" aria-labelledby="tasks-modal-label" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title container fs-5" id="tasks-modal-label">
<div class="row">
<div class="col-2">Asset Name:</div>
<div id="modal-title-job-name" class="col-md-auto fw-bold"></div>
</div>
<div class="row">
<div class="col-2">Job ID:</div>
<div class="col-md-auto fw-bold"><span id="modal-title-job-id" class="me-2"></span><span id="modal-title-job-state" class="badge"></span></div>
</div>
<div class="modal-header p-2">
<div class="modal-title fw-bold" id="tasks-modal-label" style="font-size: small">
<span id="modal-title-job-name" class="me-2"></span>
<span id="modal-title-job-id" class="me-2"></span>
<span id="modal-title-job-state" class="badge"></span>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body p-2">
<iframe id="tasks-iframe" class="w-100 h-100" src=""></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -131,7 +123,7 @@ <h4 class="alert-heading">{{ message }}</h4>
}
function updateJobTasksModal(jobId, jobName, jobState) {
// Update the modal header with the job id and name
document.getElementById('modal-title-job-id').textContent = jobId;
document.getElementById('modal-title-job-id').textContent = `(${jobId})`;
document.getElementById('modal-title-job-name').textContent = jobName;
var modalTitleJobState = document.getElementById('modal-title-job-state');
modalTitleJobState.textContent = jobState;
Expand Down
13 changes: 5 additions & 8 deletions src/aind_data_transfer_service/templates/job_tasks_table.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@

<body>
<!-- tasks table -->
<table class="table table-bordered table-striped table-hover table-sm">
<table class="table table-bordered table-striped table-hover table-sm" style="font-size: small">
<tr>
<th>Task ID</th>
<th>Try Number</th>
Expand All @@ -37,7 +37,7 @@
<td>{{job_task.duration}}</td>
<td>
{% if job_task.try_number > 0 %}
<button type="button" class="btn btn-outline-primary" data-bs-toggle="modal" data-bs-target="#logs-modal"
<button type="button" class="btn btn-outline-primary btn-sm" data-bs-toggle="modal" data-bs-target="#logs-modal"
data-job-id="{{ job_task.job_id }}"
data-task-id="{{ job_task.task_id }}"
data-task-state="{{ job_task.task_state }}"
Expand All @@ -53,18 +53,15 @@
<div class="modal fade" id="logs-modal" tabindex="-1" aria-labelledby="logs-modal-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<div class="modal-title fs-5 fw-bold" id="logs-modal-label">
<div class="modal-header p-2">
<div class="modal-title fw-bold" id="logs-modal-label" style="font-size: small">
<span id="modal-title-task" class="me-2"></span><span id="modal-title-task-state" class="badge"></span>
</div>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="modal-body p-2">
<iframe id="logs-iframe" class="w-100 h-100" src=""></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-outline-primary" data-bs-dismiss="modal">Close logs</button>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/aind_data_transfer_service/templates/task_logs.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@
{% if status_code == 200 %}
<!-- display task logs -->
<div>
<pre class="bg-light p-3 border rounded">{{logs}}</pre>
<pre class="bg-light p-1 border rounded" style="font-size: x-small">{{logs}}</pre>
</div>
{% else %}
<!-- display errors to user -->
Expand Down
Loading