From 62a741f9140a51c4cd0cb64f4b4858dffd7dca58 Mon Sep 17 00:00:00 2001 From: Sartxi Date: Fri, 12 Apr 2024 12:32:10 -0600 Subject: [PATCH] ui dialing --- .../components/bulk-publisher.css | 9 +- .../components/bulk-publisher.js | 19 ++- .../bulk-publish-v2/components/job-info.js | 104 ++++++++++--- .../components/job-process.css | 144 +++++++++++++++--- .../bulk-publish-v2/components/job-process.js | 15 +- libs/blocks/bulk-publish-v2/img/close.svg | 8 + libs/blocks/bulk-publish-v2/img/rework.svg | 2 +- libs/blocks/bulk-publish-v2/utils.js | 16 +- 8 files changed, 255 insertions(+), 62 deletions(-) create mode 100644 libs/blocks/bulk-publish-v2/img/close.svg diff --git a/libs/blocks/bulk-publish-v2/components/bulk-publisher.css b/libs/blocks/bulk-publish-v2/components/bulk-publisher.css index 0620e63303..6ca6178f46 100644 --- a/libs/blocks/bulk-publish-v2/components/bulk-publisher.css +++ b/libs/blocks/bulk-publish-v2/components/bulk-publisher.css @@ -3,7 +3,6 @@ --success: #3b853b; --error: #db4437; --panel-bg: rgba(255 255 255 / 60%); - --meta-width: 30%; display: flex; flex-direction: column; @@ -372,12 +371,8 @@ label[for='urls'] i { .job-meta { display: flex; - justify-content: space-between; - min-width: var(--meta-width); -} - -.job-meta>*:last-child { - text-align: right; + flex-direction: row; + justify-content: end; } .process { diff --git a/libs/blocks/bulk-publish-v2/components/bulk-publisher.js b/libs/blocks/bulk-publish-v2/components/bulk-publisher.js index 60707ce9bd..47e63fc5fe 100644 --- a/libs/blocks/bulk-publish-v2/components/bulk-publisher.js +++ b/libs/blocks/bulk-publish-v2/components/bulk-publisher.js @@ -294,6 +294,22 @@ class BulkPublish2 extends LitElement { if (this.mode === 'full') this.openJobs = false; }; + async reworkErrors(job) { + /* c8 ignore next 8 */ + if (this.mode === 'full') { + this.openJobs = false; + await delay(300); + } + const { data, name } = job; + const { origin } = this.jobs.find((item) => item.result.job.name === name); + const errored = data.resources?.filter((path) => path.status !== 200); + if (errored.length) { + const textarea = this.renderRoot.querySelector('#Urls'); + textarea.focus(); + textarea.value = errored.map((error) => (`${origin}${error.path}`)).join('\r\n'); + } + } + renderResults() { const { showList, showClear, loading, count } = this.getJobState(); const handleToggle = () => { @@ -307,7 +323,6 @@ class BulkPublish2 extends LitElement { class="panel-title" @click=${handleToggle}> - ${count ? html`${count}` : ''} Job Results
@@ -329,13 +344,13 @@ class BulkPublish2 extends LitElement {
JOB${this.jobs.length > 1 ? 'S' : ''}
STATUS - DATE/TIME
${this.jobs.map((job) => html` this.reworkErrors(errors)} @progress="${this.setJobProgress}" @stopped="${this.setJobStopped}"> diff --git a/libs/blocks/bulk-publish-v2/components/job-info.js b/libs/blocks/bulk-publish-v2/components/job-info.js index bb0c625dac..b17f0b6072 100644 --- a/libs/blocks/bulk-publish-v2/components/job-info.js +++ b/libs/blocks/bulk-publish-v2/components/job-info.js @@ -1,4 +1,4 @@ -import { LitElement, html } from '../../../deps/lit-all.min.js'; +import { LitElement, html, nothing } from '../../../deps/lit-all.min.js'; import { getSheet } from '../../../../tools/utils/utils.js'; import { getConfig } from '../../../utils/utils.js'; import { displayDate, setJobTime } from '../utils.js'; @@ -6,13 +6,18 @@ import { displayDate, setJobTime } from '../utils.js'; const { miloLibs, codeRoot } = getConfig(); const base = miloLibs || codeRoot; const styleSheet = await getSheet(`${base}/blocks/bulk-publish-v2/components/job-process.css`); +const reworkIcon = `${base}/blocks/bulk-publish-v2/img/rework.svg`; +const closeIcon = `${base}/blocks/bulk-publish-v2/img/close.svg`; class JobInfo extends LitElement { static get properties() { return { status: { type: Object }, reworkErrors: { type: Function }, + errFilter: { state: true }, timer: { state: true }, + showTimes: { state: true }, + timesAutoOpened: { state: true }, }; } @@ -21,51 +26,116 @@ class JobInfo extends LitElement { this.renderRoot.adoptedStyleSheets = [styleSheet]; } + async updated() { + if (this.errFilter) { + this.parentElement.classList.add('filter-errors'); + this.showTimes = false; + this.scrollIntoView(); + } else { + this.parentElement.classList.remove('filter-errors'); + } + // expand time data when a job finishes + if (this.status.state === 'stopped' && !this.showTimes && !this.timesAutoOpened) { + this.timesAutoOpened = true; + this.showTimes = true; + } + } + + copyJobId() { + console.log(this.status); + } + renderStatus() { const { progress, data, state } = this.status; const complete = progress ? progress.processed - progress.failed : 0; const error = progress ? progress.failed : 0; const total = progress ? progress.total : data.paths.length; - if (state === 'created') return 'Created'; + const hasErrors = error > 0; + if (state === 'created') return html`Created`; return html` -
- - ${complete} / ${total} page${total > 1 ? 's' : ''} - ${error > 0 ? html`- - ${error} Error${error > 1 ? 's' : ''}` : ''} +
+ ${!this.errFilter ? html` +
+ + ${complete} / ${total} +
+ ` : nothing} + ${hasErrors ? html` + + ${this.errFilter ? html` + + ${error} + + Rework Errors Icon + + { this.errFilter = false; }} class="close"> + Remove Filter Icon + + + ` : html` + { this.errFilter = true; }}> + ${error} + + `} + + ` : nothing}
`; } renderTimer() { - const { state, createTime } = this.status; - setJobTime(this); - let timerText = displayDate(createTime); + const { state, createTime, startTime, stopTime } = this.status; + let timerText = `${displayDate(createTime)}`; + this.updateComplete.then(() => { setJobTime(this); }); if (state === 'running') { - timerText = html`Working ${this.timer}`; + timerText = html`Working `; } if (state === 'stopped') { - timerText = html`Done in ${this.timer}`; + timerText = html`Done in `; } + const toggleTimes = () => { this.showTimes = !this.showTimes; }; return html` -
+
${timerText}
+ ${this.showTimes ? html` +
+
+ Created + ${displayDate(createTime)} +
+ ${startTime ? html` +
+ Started + ${displayDate(startTime)} +
+ ` : nothing} + ${stopTime ? html` +
+ Finished + ${displayDate(stopTime)} +
+ ` : nothing} +
+ ` : nothing} `; } render() { - const { topic } = this.status; + const { topic, state } = this.status; return html`
- ${topic} + ${topic} + ${state === 'stopped' ? html` + + copy job ID + + ` : ''}
${this.renderStatus()} - - ${this.renderTimer()}
diff --git a/libs/blocks/bulk-publish-v2/components/job-process.css b/libs/blocks/bulk-publish-v2/components/job-process.css index dbb5d91415..a36f514b75 100644 --- a/libs/blocks/bulk-publish-v2/components/job-process.css +++ b/libs/blocks/bulk-publish-v2/components/job-process.css @@ -1,4 +1,9 @@ +.job-process { + position: relative; +} + .job-info { + height: 26px; position: sticky; top: 0; z-index: 1; @@ -10,15 +15,111 @@ justify-content: space-between; } -.process { - width: 65%; +.job-info .process .topic { + text-transform: uppercase; + font-weight: bold; } -.job-info .process { - text-transform: uppercase; +.job-info .progress { + display: flex; +} + +.job-totals { + background-color: white; + padding: 0 7px; + border-radius: 4px; +} + +.job-totals.errors { + border-radius: 5px 0 0 5px; +} + +.error-tools { + background-color: var(--error); + border-radius: 0 5px 5px 0; + color: white; + cursor: pointer; +} + +.error-tools .tools { + display: flex; + gap: 5px; + align-items: center; + padding: 0 7px; +} + +.error-tools .count { + padding: 7px; +} + +.error-tools:hover { + background-color: #ba3a2f; +} + +.error-tools .tools .rework { + margin-left: 5px; + display: flex; + align-items: center; +} + +.error-tools .tools .rework img, +.error-tools .tools .close img { + width: 10px; +} + +.filtered .error-tools { + border-radius: 5px; +} + +.timer { + cursor: pointer; + background: white; + border-radius: 5px; + padding: 0 7px; + width: 81px; + text-align: center; + height: 26px; + display: flex; + align-items: center; + justify-content: center; + gap: 4px; +} + +.timer:hover { font-weight: bold; } +.show-times { + padding-bottom: 7px; + border-radius: 5px 5px 0 0; + z-index: 2; + position: relative; +} + +.job-timing { + background-color: white; + border-radius: 0 0 5px 5px; + border: 1px solid #eee; + position: absolute; + top: 36px; + right: 9px; + z-index: 1; + padding: 3px 10px; + min-width: 132px; +} + +.job-timing .stat { + display: flex; + flex-direction: row; + justify-content: space-between; + font-size: 14px; +} + +.status { + display: flex; + gap: 7px; +} + .result { position: relative; display: flex; @@ -45,6 +146,10 @@ background-color: #f9f9f9; } +.filter-errors .success { + display: none; +} + .result .process { font-style: italic; color: #666; @@ -76,7 +181,7 @@ .meta { display: flex; - justify-content: space-between; + justify-content: end; min-width: var(--meta-width); } @@ -88,14 +193,6 @@ color: var(--error); } -.meta > *:first-child { - min-width: 100px; -} - -.meta > *:last-child { - text-align: right; -} - .meta i { color: #999; } @@ -109,8 +206,19 @@ } @keyframes dotty { - 0% { content: '' } - 25% { content: '.' } - 50% { content: '..' } - 75% { content: '...' } -} + 0% { + content: '' + } + + 25% { + content: '.' + } + + 50% { + content: '..' + } + + 75% { + content: '...' + } +} \ No newline at end of file diff --git a/libs/blocks/bulk-publish-v2/components/job-process.js b/libs/blocks/bulk-publish-v2/components/job-process.js index 84772cc103..b7050fbf48 100644 --- a/libs/blocks/bulk-publish-v2/components/job-process.js +++ b/libs/blocks/bulk-publish-v2/components/job-process.js @@ -1,6 +1,6 @@ import './job-info.js'; import { LitElement, html } from '../../../deps/lit-all.min.js'; -import { displayDate, getStatusText, delay, updateItemProgress } from '../utils.js'; +import { getStatusText, delay, updateItemProgress } from '../utils.js'; import { pollJobStatus, updateRetry } from '../services.js'; import { getSheet } from '../../../../tools/utils/utils.js'; import { getConfig } from '../../../utils/utils.js'; @@ -13,9 +13,9 @@ class JobProcess extends LitElement { static get properties() { return { job: { type: Object }, + reworkErrors: { type: Function }, jobStatus: { state: true }, queue: { state: true }, - expandDate: { state: true }, }; } @@ -23,7 +23,6 @@ class JobProcess extends LitElement { super(); this.jobStatus = undefined; this.queue = []; - this.expandDate = false; } async connectedCallback() { @@ -127,7 +126,7 @@ class JobProcess extends LitElement { renderJobItem(path, pathIndex) { const jobPath = typeof path === 'object' ? path.path : path; - const { style, status, topic, url, time } = this.getJob(jobPath); + const { style, status, topic, url } = this.getJob(jobPath); return html`
${status.text} - { this.expandDate = url; }} - @mouseleave=${() => { this.expandDate = false; }}> - ${this.expandDate === url ? time.label : ''} ${displayDate(time.stamp)} -
`; @@ -154,7 +147,7 @@ class JobProcess extends LitElement { const jobData = this.jobStatus ?? this.job.result.job; return html`
- + this.reworkErrors(jobData)}> ${job.data.paths.map((path, pathIndex) => this.renderJobItem(path, pathIndex))}
`; diff --git a/libs/blocks/bulk-publish-v2/img/close.svg b/libs/blocks/bulk-publish-v2/img/close.svg new file mode 100644 index 0000000000..8018d92d84 --- /dev/null +++ b/libs/blocks/bulk-publish-v2/img/close.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/libs/blocks/bulk-publish-v2/img/rework.svg b/libs/blocks/bulk-publish-v2/img/rework.svg index bef1b1fd05..5b4a8ddeb7 100644 --- a/libs/blocks/bulk-publish-v2/img/rework.svg +++ b/libs/blocks/bulk-publish-v2/img/rework.svg @@ -3,7 +3,7 @@