mirror of
https://github.com/jumpserver/jumpserver.git
synced 2025-07-21 01:59:31 +00:00
Perf: Perf All Report
This commit is contained in:
zhaojisen
feng626
parent
a3467bdabc
commit
9466c7105c
@ -3,52 +3,71 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="report-container">
|
<div class="report-container">
|
||||||
<header class="header">
|
<section class="basic-info-section">
|
||||||
{% autoescape off %}
|
<div class="header-container">
|
||||||
{{ logo }}
|
<span
|
||||||
{% endautoescape %}
|
class="triangle-down-icon collapse-toggle"
|
||||||
</header>
|
data-target="basic-info"
|
||||||
|
></span>
|
||||||
|
|
||||||
<div class="info-section">
|
<h2>{% trans 'Basic Information' %}</h2>
|
||||||
<h2 class="info">
|
|
||||||
{% trans 'The following is a summary of account backup tasks, please review and handle them' %}
|
|
||||||
</h2>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="main-section">
|
<div class="container-section collapsible-content" id="basic-info-content">
|
||||||
<div class="synopsis-section">
|
<div class="item">
|
||||||
<div class="synopsis-item">
|
<span class="item-label">{% trans 'Date start' %}</span>
|
||||||
<div class="synopsis-item-content">
|
<span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
||||||
<p>
|
</div>
|
||||||
<span class="item-label">{% trans 'Task name' %}</span>:
|
|
||||||
<span>{{ execution.automation.name }}</span>
|
<div class="item">
|
||||||
</p>
|
<span class="item-label">{% trans 'Date end' %}</span>
|
||||||
<p>
|
<span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
||||||
<span class="item-label">{% trans 'Date start' %}</span>:
|
</div>
|
||||||
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
<div class="item">
|
||||||
<p>
|
<span class="item-label">{% trans 'Accounts amount' %}</span>
|
||||||
<span class="item-label">{% trans 'Date end' %}</span>:
|
<span class="item-value">{{ summary.total_accounts }}</span>
|
||||||
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
</div>
|
||||||
</p>
|
|
||||||
<p>
|
<div class="item">
|
||||||
<span class="item-label">{% trans 'Time using' %}</span>:
|
<span class="item-label">{% trans 'Task name' %}</span>
|
||||||
<span>{{ execution.duration }}s</span>
|
<span class="item-value">{{ execution.automation.name }}</span>
|
||||||
</p>
|
</div>
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Accounts amount' %}</span>:
|
<div class="item">
|
||||||
<span>{{ summary.total_accounts }}</span>
|
<span class="item-label">{% trans 'Time using' %}</span>
|
||||||
</p>
|
<span class="item-value">{{ execution.duration }}s</span>
|
||||||
<p>
|
</div>
|
||||||
<span class="item-label">{% trans 'Type count' %}</span>:
|
|
||||||
<span>{{ summary.total_types }}</span>
|
<div class="item">
|
||||||
</p>
|
<span class="item-label">{% trans 'Type count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.total_types }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
{% include './css/report.css' %}
|
{% include './css/report.css' %}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const toggleButtons = document.querySelectorAll('.collapse-toggle')
|
||||||
|
|
||||||
|
toggleButtons.forEach((button) => {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
const targetId = this.getAttribute('data-target')
|
||||||
|
const targetContent = document.getElementById(`${targetId}-content`)
|
||||||
|
|
||||||
|
if (this.classList.contains('triangle-down-icon')) {
|
||||||
|
this.classList.remove('triangle-down-icon')
|
||||||
|
this.classList.add('triangle-right-icon')
|
||||||
|
targetContent.classList.add('collapsed')
|
||||||
|
} else {
|
||||||
|
this.classList.remove('triangle-right-icon')
|
||||||
|
this.classList.add('triangle-down-icon')
|
||||||
|
targetContent.classList.remove('collapsed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -4,66 +4,74 @@
|
|||||||
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
|
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
|
||||||
|
|
||||||
<div class="report-container">
|
<div class="report-container">
|
||||||
<header class="header">
|
<section class="basic-info-section">
|
||||||
{% autoescape off %}
|
<div class="header-container">
|
||||||
{{ logo }}
|
<span
|
||||||
{% endautoescape %}
|
class="triangle-down-icon collapse-toggle"
|
||||||
</header>
|
data-target="basic-info"
|
||||||
|
></span>
|
||||||
|
|
||||||
<div class="info-section">
|
<h2>{% trans 'Basic Information' %}</h2>
|
||||||
<h2 class="info">
|
</div>
|
||||||
{% trans 'The following is a summary of account change secret tasks, please read and process' %}
|
|
||||||
|
<div class="container-section collapsible-content" id="basic-info-content">
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Date start' %}</span>
|
||||||
|
<span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Date end' %}</span>
|
||||||
|
<span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Assets amount' %}</span>
|
||||||
|
<span class="item-value">{{ summary.total_assets }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset success count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.ok_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset failed count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.fail_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset not support count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.error_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Task name' %}</span>
|
||||||
|
<span class="item-value">{{ execution.automation.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Time using' %}</span>
|
||||||
|
<span class="item-value">{{ execution.duration }}s</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="success">
|
||||||
|
<div class="header-container">
|
||||||
|
<span
|
||||||
|
class="triangle-down-icon collapse-toggle"
|
||||||
|
data-target="success"
|
||||||
|
></span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
{% trans 'Success accounts' %}:
|
||||||
|
|
||||||
|
<span> {{ summary.ok_accounts | default:0 }} </span>
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="main-section">
|
<div class="container-section collapsible-content" id="success-content">
|
||||||
<div class="synopsis-section">
|
|
||||||
<div class="synopsis-item">
|
|
||||||
<div class="synopsis-item-content">
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Task name' %}</span>:
|
|
||||||
<span>{{ execution.automation.name }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Date start' %}</span>:
|
|
||||||
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Date end' %}</span>:
|
|
||||||
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Time using' %}</span>:
|
|
||||||
<span>{{ execution.duration }}s</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Assets amount' %}</span>:
|
|
||||||
<span>{{ summary.total_assets }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset success count' %}</span>:
|
|
||||||
<span>{{ summary.ok_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset failed count' %}</span>:
|
|
||||||
<span>{{ summary.fail_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset not support count' %}</span>:
|
|
||||||
<span>{{ summary.error_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tabel-section tabel-summery-section">
|
|
||||||
<div class="new-accounts result-section table-responsive">
|
|
||||||
<div class="section-header">
|
|
||||||
<h3>
|
|
||||||
{% trans 'Success accounts' %}:
|
|
||||||
<span>{{ summary.ok_accounts | default:0 }}</span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
{% if summary.ok_accounts %}
|
{% if summary.ok_accounts %}
|
||||||
<table class="custom-table table-striped table-hover data-table">
|
<table class="custom-table table-striped table-hover data-table">
|
||||||
<thead>
|
<thead>
|
||||||
@ -87,15 +95,23 @@
|
|||||||
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="lost-accounts result-section table-responsive">
|
<section class="failed">
|
||||||
<div class="section-header">
|
<div class="header-container">
|
||||||
<h3>
|
<span
|
||||||
|
class="triangle-down-icon collapse-toggle"
|
||||||
|
data-target="failed"
|
||||||
|
></span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
{% trans 'Failed accounts' %}:
|
{% trans 'Failed accounts' %}:
|
||||||
|
|
||||||
<span> {{ summary.fail_accounts | default:0 }} </span>
|
<span> {{ summary.fail_accounts | default:0 }} </span>
|
||||||
</h3>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="container-section collapsible-content" id="failed-content">
|
||||||
{% if summary.fail_accounts %}
|
{% if summary.fail_accounts %}
|
||||||
<table class="custom-table table-hover data-table">
|
<table class="custom-table table-hover data-table">
|
||||||
<thead>
|
<thead>
|
||||||
@ -119,9 +135,28 @@
|
|||||||
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
{% include './css/report.css' %}
|
{% include './css/report.css' %}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
const toggleButtons = document.querySelectorAll('.collapse-toggle')
|
||||||
|
|
||||||
|
toggleButtons.forEach((button) => {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
const targetId = this.getAttribute('data-target')
|
||||||
|
const targetContent = document.getElementById(`${targetId}-content`)
|
||||||
|
|
||||||
|
if (this.classList.contains('triangle-down-icon')) {
|
||||||
|
this.classList.remove('triangle-down-icon')
|
||||||
|
this.classList.add('triangle-right-icon')
|
||||||
|
targetContent.classList.add('collapsed')
|
||||||
|
} else {
|
||||||
|
this.classList.remove('triangle-right-icon')
|
||||||
|
this.classList.add('triangle-down-icon')
|
||||||
|
targetContent.classList.remove('collapsed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -3,74 +3,84 @@
|
|||||||
|
|
||||||
|
|
||||||
<div class="report-container">
|
<div class="report-container">
|
||||||
<header class="header">
|
<section class="basic-info-section">
|
||||||
{% autoescape off %}
|
<div class="header-container">
|
||||||
{{ logo }}
|
<span
|
||||||
{% endautoescape %}
|
class="triangle-down-icon collapse-toggle"
|
||||||
</header>
|
data-target="basic-info"
|
||||||
|
></span>
|
||||||
|
|
||||||
<div class="info-section">
|
<h2>{% trans 'Basic Information' %}</h2>
|
||||||
<h2 class="info">
|
</div>
|
||||||
{% trans 'The following is a summary of the account check tasks. Please review and handle them' %}
|
|
||||||
|
<div class="container-section collapsible-content" id="basic-info-content">
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Date start' %}</span>
|
||||||
|
<span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Date end' %}</span>
|
||||||
|
<span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Accounts amount' %}</span>
|
||||||
|
<span class="item-value">{{ summary.accounts }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset success count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.ok_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset failed count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.fail_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset not support count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.error_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Task name' %}</span>
|
||||||
|
<span class="item-value">{{ execution.automation.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Time using' %}</span>
|
||||||
|
<span class="item-value">{{ execution.duration }}s</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Ok count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.ok }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'No password count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.no_secret }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="success">
|
||||||
|
<div class="header-container">
|
||||||
|
<span
|
||||||
|
class="triangle-down-icon collapse-toggle"
|
||||||
|
data-target="success"
|
||||||
|
></span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
{% trans 'Weak password' %}:
|
||||||
|
|
||||||
|
<span> {{ summary.weak_password | default:0 }} </span>
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="main-section">
|
<div class="container-section collapsible-content" id="success-content">
|
||||||
<div class="synopsis-section">
|
|
||||||
<div class="synopsis-item">
|
|
||||||
<div class="synopsis-item-content">
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Task name' %}</span>:
|
|
||||||
<span>{{ execution.automation.name }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Date start' %}</span>:
|
|
||||||
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Date end' %}</span>:
|
|
||||||
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Time using' %}</span>:
|
|
||||||
<span>{{ execution.duration }}s</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Accounts amount' %}</span>:
|
|
||||||
<span>{{ summary.accounts }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Ok count' %}</span>:
|
|
||||||
<span>{{ summary.ok }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'No password count' %}</span>:
|
|
||||||
<span>{{ summary.no_secret }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset success count' %}</span>:
|
|
||||||
<span>{{ summary.ok_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset failed count' %}</span>:
|
|
||||||
<span>{{ summary.fail_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset not support count' %}</span>:
|
|
||||||
<span>{{ summary.error_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tabel-section tabel-summery-section">
|
|
||||||
<div class="new-accounts result-section table-responsive">
|
|
||||||
<div class="section-header">
|
|
||||||
<h3>
|
|
||||||
{% trans 'Weak password' %}:
|
|
||||||
<span>{{ summary.weak_password | default:0 }}</span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
{% if summary.ok_accounts %}
|
{% if summary.ok_accounts %}
|
||||||
<table class="custom-table table-striped table-hover data-table">
|
<table class="custom-table table-striped table-hover data-table">
|
||||||
<thead>
|
<thead>
|
||||||
@ -96,10 +106,29 @@
|
|||||||
<p class="no-data">{% trans 'No weak password' %}</p>
|
<p class="no-data">{% trans 'No weak password' %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
{% include './css/report.css' %}
|
{% include './css/report.css' %}
|
||||||
</style>
|
</style>
|
||||||
|
<script>
|
||||||
|
const toggleButtons = document.querySelectorAll('.collapse-toggle')
|
||||||
|
|
||||||
|
toggleButtons.forEach((button) => {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
const targetId = this.getAttribute('data-target')
|
||||||
|
const targetContent = document.getElementById(`${targetId}-content`)
|
||||||
|
|
||||||
|
if (this.classList.contains('triangle-down-icon')) {
|
||||||
|
this.classList.remove('triangle-down-icon')
|
||||||
|
this.classList.add('triangle-right-icon')
|
||||||
|
targetContent.classList.add('collapsed')
|
||||||
|
} else {
|
||||||
|
this.classList.remove('triangle-right-icon')
|
||||||
|
this.classList.add('triangle-down-icon')
|
||||||
|
targetContent.classList.remove('collapsed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
@ -11,138 +11,115 @@ p {
|
|||||||
.report-container {
|
.report-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
row-gap: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.report-container .header {
|
.basic-info-section,
|
||||||
display: flex;
|
.success,
|
||||||
justify-content: space-between;
|
.failed {
|
||||||
align-items: center;
|
|
||||||
height: 4rem;
|
|
||||||
padding: 0.3rem 1rem;
|
|
||||||
background-color: #148f76;
|
|
||||||
}
|
|
||||||
|
|
||||||
.report-container .header svg {
|
|
||||||
height: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-section {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
background-color: #f5f5f5;
|
|
||||||
height: 4rem;
|
|
||||||
padding: 0 1rem;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-section .info {
|
|
||||||
margin: unset;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-section {
|
|
||||||
margin-top: 3rem;
|
|
||||||
padding: 0 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-section .synopsis-section {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
gap: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-section .synopsis-section .synopsis-item {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex: 1;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
border-radius: 8px;
|
|
||||||
height: 350px;
|
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-section .synopsis-section .synopsis-item h3 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-section .synopsis-section .synopsis-item .synopsis-item-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: space-around;
|
|
||||||
align-items: flex-start;
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
cursor: pointer;
|
padding: 16px 20px;
|
||||||
|
margin: 0 20px;
|
||||||
|
border: 1px solid #dee0e3;
|
||||||
|
border-radius: 6px;
|
||||||
|
background-color: #fff;
|
||||||
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
|
||||||
|
transition: all 0.2s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-section .synopsis-section .synopsis-item .synopsis-item-content p {
|
.header-container {
|
||||||
display: inline-flex;
|
display: flex;
|
||||||
width: 100%;
|
justify-content: flex-start;
|
||||||
line-height: 1;
|
|
||||||
gap: 2rem;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-section .synopsis-section .synopsis-item .synopsis-item-content p .item-label {
|
|
||||||
width: 18rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.main-section .synopsis-section .synopsis-item .synopsis-item-content span {
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
height: 32px;
|
||||||
|
margin-bottom: 12px;
|
||||||
|
border-bottom: 1px solid #f0f0f0;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container h2 {
|
||||||
|
color: #1f2329;
|
||||||
|
font: 500 16px/24px 'PingFang SC';
|
||||||
|
margin: 0;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-container h2 span {
|
||||||
|
display: inline-flex;
|
||||||
|
margin-left: 8px;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-section .tabel-summery-section {
|
.triangle-right-icon {
|
||||||
display: flex;
|
display: inline-block;
|
||||||
flex-direction: column;
|
width: 0;
|
||||||
flex-wrap: nowrap;
|
height: 0;
|
||||||
align-items: flex-start;
|
border-top: 5px solid transparent;
|
||||||
gap: 2rem;
|
border-bottom: 5px solid transparent;
|
||||||
width: inherit;
|
border-left: 8px solid #1f2329;
|
||||||
margin-top: 2rem;
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-section .tabel-summery-section .result-section {
|
.triangle-down-icon {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
border-left: 5px solid transparent;
|
||||||
|
border-right: 5px solid transparent;
|
||||||
|
border-top: 8px solid #1f2329;
|
||||||
|
margin-right: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-section {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 1rem;
|
height: 100%;
|
||||||
background: #fff;
|
row-gap: 16px;
|
||||||
border: 1px solid #e0e0e0;
|
column-gap: 10px;
|
||||||
border-radius: 8px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-section .tabel-execution-section h3 {
|
.collapsible-content {
|
||||||
font-size: 1.5rem;
|
overflow: hidden;
|
||||||
color: #2c3e50;
|
max-height: 1000px;
|
||||||
|
opacity: 1;
|
||||||
|
transition: max-height 0.3s ease-in-out, opacity 0.3s ease-in-out;
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header {
|
.collapsible-content.collapsed {
|
||||||
padding-bottom: 0.5rem;
|
max-height: 0;
|
||||||
margin-bottom: 1rem;
|
opacity: 0;
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section-header h3 {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 0.5rem;
|
|
||||||
margin: 0;
|
margin: 0;
|
||||||
color: #2c3e50;
|
padding: 0;
|
||||||
font-size: inherit;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.section-header span {
|
.container-section .item {
|
||||||
background: #e8f5e9;
|
display: flex;
|
||||||
color: #2e7d32;
|
flex-basis: calc(33.33% - 10px);
|
||||||
padding: 0.2rem 0.8rem;
|
flex-direction: column;
|
||||||
border-radius: 1rem;
|
justify-content: flex-start;
|
||||||
font-size: inherit;
|
align-items: flex-start;
|
||||||
|
gap: 4px;
|
||||||
|
padding: 4px 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.container-section .item .item-label {
|
||||||
|
color: #646a73;
|
||||||
|
font: 400 14px/22px 'PingFang SC';
|
||||||
|
}
|
||||||
|
|
||||||
|
.container-section .item .item-value {
|
||||||
|
color: #1f2329;
|
||||||
|
font: 500 14px/22px 'PingFang SC';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
.custom-table {
|
.custom-table {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -151,17 +128,19 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.custom-table th {
|
.custom-table th {
|
||||||
background: #f6f6f6;
|
background-color: #f5f7fa;
|
||||||
color: #495057;
|
color: #646A73;
|
||||||
padding: 0.75rem;
|
font: 500 14px/22px 'PingFang SC';
|
||||||
font-size: 1.5rem;
|
text-align: left;
|
||||||
border-bottom: 2px solid #e0e0e0;
|
padding: 12px 8px;
|
||||||
|
border-bottom: 1px solid #ebeef5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-table td {
|
.custom-table td {
|
||||||
padding: 0.75rem;
|
color: #1F2329;
|
||||||
font-size: 14px;
|
font: 400 14px/22px 'PingFang SC';
|
||||||
border-bottom: 1px solid #e0e0e0;
|
padding: 12px 8px;
|
||||||
|
border-bottom: 1px solid #ebeef5;
|
||||||
}
|
}
|
||||||
|
|
||||||
.custom-table tr:nth-child(even) {
|
.custom-table tr:nth-child(even) {
|
||||||
@ -173,13 +152,15 @@ p {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.no-data {
|
.no-data {
|
||||||
|
color: #909399;
|
||||||
|
font: 400 14px/22px 'PingFang SC';
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #6c757d;
|
padding: 20px;
|
||||||
padding: 2rem;
|
font-style: italic;
|
||||||
background: #f6f6f6;
|
background-color: #f9f9f9;
|
||||||
border-radius: 8px;
|
border-radius: 4px;
|
||||||
margin: 1rem 0;
|
margin: 10px 0;
|
||||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.new-accounts .section-header span {
|
.new-accounts .section-header span {
|
||||||
|
|||||||
@ -1,75 +1,81 @@
|
|||||||
{% load i18n %}
|
{% load i18n %} {% load static %}
|
||||||
{% load static %}
|
|
||||||
|
|
||||||
|
|
||||||
<div class="report-container">
|
<div class="report-container">
|
||||||
<header class="header">
|
<section class="basic-info-section">
|
||||||
{% autoescape off %}
|
<div class="header-container">
|
||||||
{{ logo }}
|
<span
|
||||||
{% endautoescape %}
|
class="triangle-down-icon collapse-toggle"
|
||||||
</header>
|
data-target="basic-info"
|
||||||
|
></span>
|
||||||
|
|
||||||
<div class="info-section">
|
<h2>{% trans 'Basic Information' %}</h2>
|
||||||
<h2 class="info">
|
</div>
|
||||||
{% trans 'The following is a summary of the account check tasks. Please review and handle them' %}
|
|
||||||
|
<div class="container-section collapsible-content" id="basic-info-content">
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Date start' %}</span>
|
||||||
|
<span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Date end' %}</span>
|
||||||
|
<span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Assets amount' %}</span>
|
||||||
|
<span class="item-value">{{ summary.total_assets }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset success count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.ok_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset failed count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.fail_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset not support count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.error_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Task name' %}</span>
|
||||||
|
<span class="item-value">{{ execution.automation.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Time using' %}</span>
|
||||||
|
<span class="item-value">{{ execution.duration }}s</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="success">
|
||||||
|
<div class="header-container">
|
||||||
|
<span
|
||||||
|
class="triangle-down-icon collapse-toggle"
|
||||||
|
data-target="success"
|
||||||
|
></span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
{% trans 'New found accounts' %}:
|
||||||
|
|
||||||
|
<span> {{ summary.new_accounts | default:0 }} </span>
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="main-section">
|
<div class="container-section collapsible-content" id="success-content">
|
||||||
<div class="synopsis-section">
|
|
||||||
<div class="synopsis-item">
|
|
||||||
<div class="synopsis-item-content">
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Task name' %}</span>:
|
|
||||||
<span>{{ execution.automation.name }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Date start' %}</span>:
|
|
||||||
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Date end' %}</span>:
|
|
||||||
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Time using' %}</span>:
|
|
||||||
<span>{{ execution.duration }}s</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Assets amount' %}</span>:
|
|
||||||
<span>{{ summary.total_assets }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset success count' %}</span>:
|
|
||||||
<span>{{ summary.ok_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset failed count' %}</span>:
|
|
||||||
<span>{{ summary.fail_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset not support count' %}</span>:
|
|
||||||
<span>{{ summary.error_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tabel-section tabel-summery-section">
|
|
||||||
<div class="new-accounts result-section table-responsive">
|
|
||||||
<div class="section-header">
|
|
||||||
<h3>
|
|
||||||
{% trans 'New found accounts' %}:
|
|
||||||
<span>{{ summary.new_accounts | default:0 }}</span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
{% if summary.new_accounts %}
|
{% if summary.new_accounts %}
|
||||||
<table class="custom-table table-striped table-hover data-table">
|
<table class="custom-table table-striped table-hover data-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>{% trans 'No' %}</th>
|
<th width="10%">No.</th>
|
||||||
<th>{% trans 'Asset' %}</th>
|
<th width="45%">{% trans 'Asset' %}</th>
|
||||||
<th>{% trans 'Username' %}</th>
|
<th width="45%">{% trans 'Username' %}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -86,22 +92,30 @@
|
|||||||
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="lost-accounts result-section table-responsive">
|
<section class="failed">
|
||||||
<div class="section-header">
|
<div class="header-container">
|
||||||
<h3>
|
<span
|
||||||
|
class="triangle-down-icon collapse-toggle"
|
||||||
|
data-target="failed"
|
||||||
|
></span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
{% trans 'Lost accounts' %}:
|
{% trans 'Lost accounts' %}:
|
||||||
|
|
||||||
<span> {{ summary.lost_accounts | default:0 }} </span>
|
<span> {{ summary.lost_accounts | default:0 }} </span>
|
||||||
</h3>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="container-section collapsible-content" id="failed-content">
|
||||||
{% if summary.lost_accounts %}
|
{% if summary.lost_accounts %}
|
||||||
<table class="custom-table table-hover data-table">
|
<table class="custom-table table-hover data-table">
|
||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>{% trans 'No' %}</th>
|
<th width="10%">No.</th>
|
||||||
<th>{% trans 'Asset' %}</th>
|
<th width="45%">{% trans 'Asset' %}</th>
|
||||||
<th>{% trans 'Username' %}</th>
|
<th width="45%">{% trans 'Username' %}</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
<tbody>
|
<tbody>
|
||||||
@ -118,10 +132,30 @@
|
|||||||
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
{% include './css/report.css' %}
|
{% include './css/report.css' %}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const toggleButtons = document.querySelectorAll('.collapse-toggle')
|
||||||
|
|
||||||
|
toggleButtons.forEach((button) => {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
const targetId = this.getAttribute('data-target')
|
||||||
|
const targetContent = document.getElementById(`${targetId}-content`)
|
||||||
|
|
||||||
|
if (this.classList.contains('triangle-down-icon')) {
|
||||||
|
this.classList.remove('triangle-down-icon')
|
||||||
|
this.classList.add('triangle-right-icon')
|
||||||
|
targetContent.classList.add('collapsed')
|
||||||
|
} else {
|
||||||
|
this.classList.remove('triangle-right-icon')
|
||||||
|
this.classList.add('triangle-down-icon')
|
||||||
|
targetContent.classList.remove('collapsed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|||||||
@ -4,66 +4,74 @@
|
|||||||
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
|
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
|
||||||
|
|
||||||
<div class="report-container">
|
<div class="report-container">
|
||||||
<header class="header">
|
<section class="basic-info-section">
|
||||||
{% autoescape off %}
|
<div class="header-container">
|
||||||
{{ logo }}
|
<span
|
||||||
{% endautoescape %}
|
class="triangle-down-icon collapse-toggle"
|
||||||
</header>
|
data-target="basic-info"
|
||||||
|
></span>
|
||||||
|
|
||||||
<div class="info-section">
|
<h2>{% trans 'Basic Information' %}</h2>
|
||||||
<h2 class="info">
|
</div>
|
||||||
{% trans 'The following is a summary of account push tasks, please read and process' %}
|
|
||||||
|
<div class="container-section collapsible-content" id="basic-info-content">
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Date start' %}</span>
|
||||||
|
<span class="item-value">{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Date end' %}</span>
|
||||||
|
<span class="item-value">{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Assets amount' %}</span>
|
||||||
|
<span class="item-value">{{ summary.total_assets }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset success count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.ok_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset failed count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.fail_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Asset not support count' %}</span>
|
||||||
|
<span class="item-value">{{ summary.error_assets | default:0 }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Task name' %}</span>
|
||||||
|
<span class="item-value">{{ execution.automation.name }}</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="item">
|
||||||
|
<span class="item-label">{% trans 'Time using' %}</span>
|
||||||
|
<span class="item-value">{{ execution.duration }}s</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section class="success">
|
||||||
|
<div class="header-container">
|
||||||
|
<span
|
||||||
|
class="triangle-down-icon collapse-toggle"
|
||||||
|
data-target="success"
|
||||||
|
></span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
|
{% trans 'Success accounts' %}:
|
||||||
|
|
||||||
|
<span> {{ summary.ok_accounts | default:0 }} </span>
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<main class="main-section">
|
<div class="container-section collapsible-content" id="success-content">
|
||||||
<div class="synopsis-section">
|
|
||||||
<div class="synopsis-item">
|
|
||||||
<div class="synopsis-item-content">
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Task name' %}</span>:
|
|
||||||
<span>{{ execution.automation.name }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Date start' %}</span>:
|
|
||||||
<span>{{ execution.date_start | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Date end' %}</span>:
|
|
||||||
<span>{{ execution.date_finished | date:"Y/m/d H:i:s" }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Time using' %}</span>:
|
|
||||||
<span>{{ execution.duration }}s</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Assets amount' %}</span>:
|
|
||||||
<span>{{ summary.total_assets }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset success count' %}</span>:
|
|
||||||
<span>{{ summary.ok_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset failed count' %}</span>:
|
|
||||||
<span>{{ summary.fail_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
<p>
|
|
||||||
<span class="item-label">{% trans 'Asset not support count' %}</span>:
|
|
||||||
<span>{{ summary.error_assets | default:0 }}</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="tabel-section tabel-summery-section">
|
|
||||||
<div class="new-accounts result-section table-responsive">
|
|
||||||
<div class="section-header">
|
|
||||||
<h3>
|
|
||||||
{% trans 'Success accounts' %}:
|
|
||||||
<span>{{ summary.ok_accounts | default:0 }}</span>
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
{% if summary.ok_accounts %}
|
{% if summary.ok_accounts %}
|
||||||
<table class="custom-table table-striped table-hover data-table">
|
<table class="custom-table table-striped table-hover data-table">
|
||||||
<thead>
|
<thead>
|
||||||
@ -87,15 +95,23 @@
|
|||||||
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
<div class="lost-accounts result-section table-responsive">
|
<section class="failed">
|
||||||
<div class="section-header">
|
<div class="header-container">
|
||||||
<h3>
|
<span
|
||||||
|
class="triangle-down-icon collapse-toggle"
|
||||||
|
data-target="failed"
|
||||||
|
></span>
|
||||||
|
|
||||||
|
<h2>
|
||||||
{% trans 'Failed accounts' %}:
|
{% trans 'Failed accounts' %}:
|
||||||
|
|
||||||
<span> {{ summary.fail_accounts | default:0 }} </span>
|
<span> {{ summary.fail_accounts | default:0 }} </span>
|
||||||
</h3>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="container-section collapsible-content" id="failed-content">
|
||||||
{% if summary.fail_accounts %}
|
{% if summary.fail_accounts %}
|
||||||
<table class="custom-table table-hover data-table">
|
<table class="custom-table table-hover data-table">
|
||||||
<thead>
|
<thead>
|
||||||
@ -119,10 +135,30 @@
|
|||||||
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
<p class="no-data">{% trans 'No new accounts found' %}</p>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</section>
|
||||||
</main>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
{% include './css/report.css' %}
|
{% include './css/report.css' %}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const toggleButtons = document.querySelectorAll('.collapse-toggle')
|
||||||
|
|
||||||
|
toggleButtons.forEach((button) => {
|
||||||
|
button.addEventListener('click', function () {
|
||||||
|
const targetId = this.getAttribute('data-target')
|
||||||
|
const targetContent = document.getElementById(`${targetId}-content`)
|
||||||
|
|
||||||
|
if (this.classList.contains('triangle-down-icon')) {
|
||||||
|
this.classList.remove('triangle-down-icon')
|
||||||
|
this.classList.add('triangle-right-icon')
|
||||||
|
targetContent.classList.add('collapsed')
|
||||||
|
} else {
|
||||||
|
this.classList.remove('triangle-right-icon')
|
||||||
|
this.classList.add('triangle-down-icon')
|
||||||
|
targetContent.classList.remove('collapsed')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
Loading…
Reference in New Issue
Block a user