Skip to content

Commit 4c82a1d

Browse files
tdrueztdruez
authored
Refine UI and consistency around Scan actions (#425)
Signed-off-by: tdruez <tdruez@aboutcode.org>
1 parent b6a09b0 commit 4c82a1d

15 files changed

Lines changed: 274 additions & 86 deletions

File tree

‎CHANGELOG.rst‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,9 @@ Release notes
33

44
### Version 5.5.0-dev
55

6+
- Add UI to refresh a package scan.
7+
https://github.com/aboutcode-org/dejacode/issues/423
8+
69
- Update ProductPackage "unknown" license during "Scan all Packages".
710
Only "unknown" licenses are updated.
811
Products with a is_locked configuration status are excluded.

‎component_catalog/templates/component_catalog/includes/scan_actions_list.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<ul class="list-inline mb-0">
2+
{% if not is_scan_tab %}
3+
{% if scan.view_url %}
4+
<li class="list-inline-item"{% if not show_btn_label %} data-bs-toggle="tooltip"{% endif %} data-bs-title="View Scan results">
5+
<a class="btn btn-outline-dark btn-sm" href="{{ scan.view_url }}" target="_blank">
6+
<i class="far fa-file-alt"></i>{% if show_btn_label %} View Scan results{% endif %}
7+
</a>
8+
</li>
9+
{% else %}
10+
<li class="list-inline-item">
11+
<a class="btn btn-outline-dark btn-sm disabled">
12+
<i class="far fa-file-alt"></i>{% if show_btn_label %} View Scan results{% endif %}
13+
</a>
14+
</li>
15+
{% endif %}
16+
{% endif %}
17+
{% if scan.download_result_url %}
18+
<li class="list-inline-item"{% if not show_btn_label %} data-bs-toggle="tooltip"{% endif %} data-bs-title="Download Scan results">
19+
<a class="btn btn-outline-dark btn-sm" href="{{ scan.download_result_url }}" target="_blank">
20+
<i class="fas fa-download"></i>{% if show_btn_label %} Download Scan results{% endif %}
21+
</a>
22+
</li>
23+
{% else %}
24+
<li class="list-inline-item">
25+
<a class="btn btn-outline-dark btn-sm disabled">
26+
<i class="fas fa-download"></i>{% if show_btn_label %} Download Scan results{% endif %}
27+
</a>
28+
</li>
29+
{% endif %}
30+
{% if scan.delete_url %}
31+
<li class="list-inline-item"{% if not show_btn_label %} data-bs-toggle="tooltip"{% endif %} data-bs-title="Delete Scan">
32+
<a class="btn btn-outline-danger btn-sm scan_delete_link" href="#scan-delete-modal" role="button" data-delete-url="{{ scan.delete_url }}" data-bs-toggle="modal">
33+
<i class="far fa-trash-alt"></i>{% if show_btn_label %} Delete Scan{% endif %}
34+
</a>
35+
</li>
36+
{% else %}
37+
<li class="list-inline-item">
38+
<a class="btn btn-outline-danger btn-sm disabled">
39+
<i class="far fa-trash-alt"></i>{% if show_btn_label %} Delete Scan{% endif %}
40+
</a>
41+
</li>
42+
{% endif %}
43+
{% if scan.refresh_url %}
44+
<li class="list-inline-item"{% if not show_btn_label %} data-bs-toggle="tooltip"{% endif %} data-bs-title="Refresh Scan">
45+
<a class="btn btn-outline-dark btn-sm scan_refresh_link" href="#scan-refresh-modal" role="button" data-refresh-url="{{ scan.refresh_url }}" data-bs-toggle="modal">
46+
<i class="fa-solid fa-rotate-right"></i>{% if show_btn_label %} Refresh Scan{% endif %}
47+
</a>
48+
</li>
49+
{% else %}
50+
<li class="list-inline-item">
51+
<a class="btn btn-outline-dark btn-sm disabled">
52+
<i class="fa-solid fa-rotate-right"></i>{% if show_btn_label %} Refresh Scan{% endif %}
53+
</a>
54+
</li>
55+
{% endif %}
56+
</ul>

‎component_catalog/templates/component_catalog/includes/scan_progress.html‎

Lines changed: 4 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
1-
<strong class="ms-1">{{ scan.runs.0.status|title }}</strong>
2-
{% include 'component_catalog/includes/scan_status.html' with status=scan.runs.0.status only %}
3-
4-
<div class="text-center">
5-
{% if scan.download_result_url %}
6-
<a class="btn btn-outline-dark btn-sm mt-2" href="{{ scan.download_result_url }}" target="_blank"><i class="fas fa-download"></i> Results</a>
7-
{% endif %}
8-
{% if scan.delete_url %}
9-
<a class="btn btn-outline-danger btn-sm mt-2 scan_delete_link" href="#scan-delete-modal" role="button" data-delete-url="{{ scan.delete_url }}" title="Delete" data-bs-toggle="modal"><i class="far fa-trash-alt"></i></a>
10-
{% endif %}
1+
<strong class="ms-1">{{ scan.status_for_display }}</strong>
2+
{% include 'component_catalog/includes/scan_status.html' with status=scan.status only %}
3+
<div class="text-center mt-2" style="min-width:190px;">
4+
{% include 'component_catalog/includes/scan_actions_list.html' with scan=scan only %}
115
</div>

‎component_catalog/templates/component_catalog/includes/scan_status.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<div class="progress" style="width: 100%; margin-bottom: 0; height: .5rem;">
1+
<div class="progress mb-0 w-100" style="height: .5rem;">
22
{% if status == 'success' %}
33
<div class="progress-bar {% if has_errors %}bg-warning{% else %}bg-success{% endif %}" title="{{ status|title }}" role="progressbar" style="width: 100%" aria-label="Scan progress" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
44
{% elif status == 'failure' or status == "stopped" or status == "stale" %}

component_catalog/templates/component_catalog/includes/scan_delete_modal.html renamed to component_catalog/templates/component_catalog/modals/scan_delete_modal.html

File renamed without changes.

‎component_catalog/templates/component_catalog/modals/scan_refresh_modal.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
{% load i18n %}
2+
<div id="scan-refresh-modal" class="modal" tabindex="-1" role="dialog">
3+
<div class="modal-dialog" role="document">
4+
<div class="modal-content">
5+
<div class="modal-header">
6+
<h5 class="modal-title">Refresh {% trans 'Scan' %}</h5>
7+
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
8+
</div>
9+
<div class="modal-body bg-body-tertiary">
10+
<p><strong>Are you sure you want to refresh this Scan?</strong></p>
11+
<p>
12+
All current data and results related to the Scan will be lost.<br>
13+
If the Scan is in progress, it will be canceled.
14+
</p>
15+
</div>
16+
<div class="modal-footer">
17+
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
18+
<a class="btn btn-success refresh-confirm" href="">Refresh Scan</a>
19+
</div>
20+
</div>
21+
</div>
22+
</div>

‎component_catalog/templates/component_catalog/scan_list.html‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,8 @@
2929
{% if has_add_package_permission %}
3030
{% include 'component_catalog/includes/add_package_modal.html' %}
3131
{% endif %}
32-
{% include 'component_catalog/includes/scan_delete_modal.html' %}
32+
{% include 'component_catalog/modals/scan_delete_modal.html' %}
33+
{% include 'component_catalog/modals/scan_refresh_modal.html' %}
3334
{% endblock %}
3435

3536
{% block javascripts %}
@@ -42,6 +43,12 @@
4243
document.querySelector('#scan-delete-modal a.delete-confirm').setAttribute('href', deleteUrl);
4344
});
4445
});
46+
document.querySelectorAll('.scan_refresh_link').forEach(link => {
47+
link.addEventListener('click', function() {
48+
let refreshUrl = this.getAttribute('data-refresh-url');
49+
document.querySelector('#scan-refresh-modal a.refresh-confirm').setAttribute('href', refreshUrl);
50+
});
51+
});
4552
});
4653
</script>
4754
{% endblock %}

component_catalog/templates/component_catalog/includes/scan_list_table.html renamed to component_catalog/templates/component_catalog/tables/scan_list_table.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@
2121
{% if scan.package %}
2222
<i class="fas fa-archive"></i>
2323
<strong style="font-size: 115%;">
24-
<a href="{{ scan.package.details_url }}#scan">{{ scan.package }}</a>
24+
<a href="{{ scan.view_url }}">{{ scan.package }}</a>
2525
</strong>
2626
{% else %}
2727
<i>Package not found in DejaCode</i>
@@ -39,7 +39,7 @@
3939
Created <span title="{{ scan.created_date }}">{{ scan.created_date|naturaltime }}</span>
4040
</div>
4141
</div>
42-
<div class="col-auto" style="width: 200px;">
42+
<div class="col-auto">
4343
{% include 'component_catalog/includes/scan_progress.html' with scan=scan only %}
4444
</div>
4545
</div>

‎component_catalog/templates/component_catalog/tabs/field_scan_actions.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
{% if forloop.first %}<dl class="row mb-0">{% endif %}
2+
<dt class="col-sm-2 text-end pt-2 pe-0"></dt>
3+
<dd class="col-sm-10">
4+
{% include 'component_catalog/includes/scan_actions_list.html' with scan=values.scan show_btn_label=True is_scan_tab=True only %}
5+
</dd>
6+
{% if forloop.last %}</dl>{% endif %}

‎component_catalog/templates/component_catalog/tabs/tab_scan.html‎

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
<p class="m-0">As package scanning is enabled in your Dataspace, you can submit this package download URL to ScanCode.io for scanning.</p>
66
</div>
77
<div class="container mt-3">
8-
<div class="row justify-content-md-center">
9-
<div class="col-4 d-grid">
10-
<button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#scan-package-modal">Submit Scan Request</button>
11-
</div>
8+
<div class="text-center">
9+
<button type="button" class="btn btn-success px-5" data-bs-toggle="modal" data-bs-target="#scan-package-modal">
10+
<i class="fas fa-barcode"></i> Submit Scan Request
11+
</button>
1212
</div>
1313
</div>
1414
{% include 'component_catalog/includes/scan_package_modal.html' %}
@@ -28,4 +28,20 @@
2828
{% if scan_summary_to_package_form %}
2929
{% include 'component_catalog/includes/scan_summary_to_package_modal.html' %}
3030
{% endif %}
31+
{% include 'component_catalog/modals/scan_delete_modal.html' %}
32+
{% include 'component_catalog/modals/scan_refresh_modal.html' %}
33+
<script>
34+
document.querySelectorAll('.scan_delete_link').forEach(link => {
35+
link.addEventListener('click', function() {
36+
let deleteUrl = this.getAttribute('data-delete-url');
37+
document.querySelector('#scan-delete-modal a.delete-confirm').setAttribute('href', deleteUrl);
38+
});
39+
});
40+
document.querySelectorAll('.scan_refresh_link').forEach(link => {
41+
link.addEventListener('click', function() {
42+
let refreshUrl = this.getAttribute('data-refresh-url');
43+
document.querySelector('#scan-refresh-modal a.refresh-confirm').setAttribute('href', refreshUrl);
44+
});
45+
});
46+
</script>
3147
{% endif %}

0 commit comments

Comments
 (0)