enable opening crawl in new tab
This commit is contained in:
sua yoo
parent
29b586b03f
commit
f90ef071de
@ -248,215 +248,207 @@ export class CrawlsList extends LiteElement {
|
||||
}
|
||||
|
||||
private renderCrawlItem = ({ item: crawl }: CrawlSearchResult) => {
|
||||
return html`<li
|
||||
class="grid grid-cols-12 gap-4 p-4 leading-none hover:bg-zinc-50 hover:text-primary border-t first:border-t-0 transition-colors"
|
||||
role="button"
|
||||
@click=${() => this.navTo(`${this.crawlsBaseUrl}/crawl/${crawl.id}`)}
|
||||
title=${crawl.configName || crawl.cid}
|
||||
>
|
||||
<div class="col-span-11 md:col-span-5">
|
||||
<div class="font-medium mb-1">
|
||||
<a
|
||||
href=${`${this.crawlsBaseUrl}/crawl/${crawl.id}`}
|
||||
@click=${(e: any) => {
|
||||
e.stopPropagation();
|
||||
this.navLink(e);
|
||||
}}
|
||||
>
|
||||
${crawl.configName || crawl.cid}
|
||||
</a>
|
||||
return html`<li class="border-t first:border-t-0">
|
||||
<a
|
||||
href=${`${this.crawlsBaseUrl}/crawl/${crawl.id}`}
|
||||
class="grid grid-cols-12 gap-4 p-4 leading-none hover:bg-zinc-50 hover:text-primary transition-colors"
|
||||
title=${crawl.configName}
|
||||
@click=${this.navLink}
|
||||
>
|
||||
<div class="col-span-11 md:col-span-5">
|
||||
<div class="font-medium mb-1">${crawl.configName || crawl.cid}</div>
|
||||
<div class="text-0-700 text-sm whitespace-nowrap truncate">
|
||||
<sl-format-date
|
||||
date=${`${crawl.started}Z` /** Z for UTC */}
|
||||
month="2-digit"
|
||||
day="2-digit"
|
||||
year="2-digit"
|
||||
hour="numeric"
|
||||
minute="numeric"
|
||||
></sl-format-date>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-0-700 text-sm whitespace-nowrap truncate">
|
||||
<sl-format-date
|
||||
date=${`${crawl.started}Z` /** Z for UTC */}
|
||||
month="2-digit"
|
||||
day="2-digit"
|
||||
year="2-digit"
|
||||
hour="numeric"
|
||||
minute="numeric"
|
||||
></sl-format-date>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:order-last col-span-1 flex justify-end">
|
||||
<sl-dropdown @click=${(e: any) => e.stopPropagation()}>
|
||||
<sl-icon-button
|
||||
slot="trigger"
|
||||
name="three-dots"
|
||||
label=${msg("More")}
|
||||
style="font-size: 1rem"
|
||||
></sl-icon-button>
|
||||
<div class="md:order-last col-span-1 flex justify-end">
|
||||
<sl-dropdown @click=${(e: Event) => e.preventDefault()}>
|
||||
<sl-icon-button
|
||||
slot="trigger"
|
||||
name="three-dots"
|
||||
label=${msg("More")}
|
||||
style="font-size: 1rem"
|
||||
></sl-icon-button>
|
||||
|
||||
<ul class="text-sm text-0-800 whitespace-nowrap" role="menu">
|
||||
${isRunning(crawl)
|
||||
? html`
|
||||
<li
|
||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
this.stop(crawl);
|
||||
e.target.closest("sl-dropdown").hide();
|
||||
}}
|
||||
>
|
||||
<sl-icon
|
||||
class="inline-block align-middle"
|
||||
name="slash-circle"
|
||||
></sl-icon>
|
||||
<span class="inline-block align-middle">
|
||||
${msg("Stop gracefully")}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="p-2 text-danger hover:bg-danger hover:text-white cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
this.cancel(crawl);
|
||||
e.target.closest("sl-dropdown").hide();
|
||||
}}
|
||||
>
|
||||
<sl-icon
|
||||
class="inline-block align-middle"
|
||||
name="trash"
|
||||
></sl-icon>
|
||||
<span class="inline-block align-middle">
|
||||
${msg("Cancel immediately")}
|
||||
</span>
|
||||
</li>
|
||||
<hr />
|
||||
`
|
||||
: ""}
|
||||
<li
|
||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
CopyButton.copyToClipboard(crawl.id);
|
||||
e.target.closest("sl-dropdown").hide();
|
||||
}}
|
||||
>
|
||||
${msg("Copy Crawl ID")}
|
||||
</li>
|
||||
<li
|
||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
CopyButton.copyToClipboard(crawl.cid);
|
||||
e.target.closest("sl-dropdown").hide();
|
||||
}}
|
||||
>
|
||||
${msg("Copy Crawl Template ID")}
|
||||
</li>
|
||||
<li
|
||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
this.navTo(
|
||||
`/archives/${crawl.aid}/crawl-templates/config/${crawl.cid}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
${msg("View Crawl Template")}
|
||||
</li>
|
||||
</ul>
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-2 flex items-start">
|
||||
<div class="mr-2">
|
||||
<!-- TODO switch case in lit template? needed for tailwindcss purging -->
|
||||
<span
|
||||
class="inline-block ${crawl.state === "failed"
|
||||
? "text-red-500"
|
||||
: crawl.state === "complete"
|
||||
? "text-emerald-500"
|
||||
: isRunning(crawl)
|
||||
? "text-purple-500"
|
||||
: "text-zinc-300"}"
|
||||
style="font-size: 10px; vertical-align: 2px"
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="whitespace-nowrap mb-1 capitalize${isRunning(crawl)
|
||||
? " motion-safe:animate-pulse"
|
||||
: ""}"
|
||||
>
|
||||
${crawl.state.replace(/_/g, " ")}
|
||||
</div>
|
||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||
${crawl.finished
|
||||
? html`
|
||||
<sl-relative-time
|
||||
date=${`${crawl.finished}Z` /** Z for UTC */}
|
||||
></sl-relative-time>
|
||||
`
|
||||
: html`<btrix-relative-duration
|
||||
value=${`${crawl.started}Z`}
|
||||
></btrix-relative-duration>`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-2">
|
||||
${crawl.finished
|
||||
? html`
|
||||
<div class="whitespace-nowrap truncate text-sm">
|
||||
<span class="font-mono text-0-800 tracking-tighter">
|
||||
<sl-format-bytes
|
||||
value=${crawl.fileSize || 0}
|
||||
lang=${/* TODO localize: */ "en"}
|
||||
></sl-format-bytes>
|
||||
</span>
|
||||
<span class="text-0-500">
|
||||
(${crawl.fileCount === 1
|
||||
? msg(str`${crawl.fileCount} file`)
|
||||
: msg(str`${crawl.fileCount} files`)})
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||
${msg(
|
||||
str`in ${RelativeDuration.humanize(
|
||||
new Date(`${crawl.finished}Z`).valueOf() -
|
||||
new Date(`${crawl.started}Z`).valueOf()
|
||||
)}`
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: crawl.stats
|
||||
? html`
|
||||
<div
|
||||
class="whitespace-nowrap truncate text-sm text-purple-600 font-mono tracking-tighter"
|
||||
<ul class="text-sm text-0-800 whitespace-nowrap" role="menu">
|
||||
${isRunning(crawl)
|
||||
? html`
|
||||
<li
|
||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
this.stop(crawl);
|
||||
e.target.closest("sl-dropdown").hide();
|
||||
}}
|
||||
>
|
||||
<sl-icon
|
||||
class="inline-block align-middle"
|
||||
name="slash-circle"
|
||||
></sl-icon>
|
||||
<span class="inline-block align-middle">
|
||||
${msg("Stop gracefully")}
|
||||
</span>
|
||||
</li>
|
||||
<li
|
||||
class="p-2 text-danger hover:bg-danger hover:text-white cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
this.cancel(crawl);
|
||||
e.target.closest("sl-dropdown").hide();
|
||||
}}
|
||||
>
|
||||
<sl-icon
|
||||
class="inline-block align-middle"
|
||||
name="trash"
|
||||
></sl-icon>
|
||||
<span class="inline-block align-middle">
|
||||
${msg("Cancel immediately")}
|
||||
</span>
|
||||
</li>
|
||||
<hr />
|
||||
`
|
||||
: ""}
|
||||
<li
|
||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
CopyButton.copyToClipboard(crawl.id);
|
||||
e.target.closest("sl-dropdown").hide();
|
||||
}}
|
||||
>
|
||||
${this.numberFormatter.format(+crawl.stats.done)}
|
||||
<span class="text-0-400">/</span>
|
||||
${this.numberFormatter.format(+crawl.stats.found)}
|
||||
</div>
|
||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||
${msg("pages crawled")}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-2">
|
||||
${crawl.manual
|
||||
? html`
|
||||
<div class="whitespace-nowrap truncate mb-1">
|
||||
<span
|
||||
class="bg-fuchsia-50 text-fuchsia-700 text-sm rounded px-1 leading-4"
|
||||
>${msg("Manual Start")}</span
|
||||
${msg("Copy Crawl ID")}
|
||||
</li>
|
||||
<li
|
||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
CopyButton.copyToClipboard(crawl.cid);
|
||||
e.target.closest("sl-dropdown").hide();
|
||||
}}
|
||||
>
|
||||
${msg("Copy Crawl Template ID")}
|
||||
</li>
|
||||
<li
|
||||
class="p-2 hover:bg-zinc-100 cursor-pointer"
|
||||
role="menuitem"
|
||||
@click=${(e: any) => {
|
||||
this.navTo(
|
||||
`/archives/${crawl.aid}/crawl-templates/config/${crawl.cid}`
|
||||
);
|
||||
}}
|
||||
>
|
||||
${msg("View Crawl Template")}
|
||||
</li>
|
||||
</ul>
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
<div class="col-span-12 md:col-span-2 flex items-start">
|
||||
<div class="mr-2">
|
||||
<!-- TODO switch case in lit template? needed for tailwindcss purging -->
|
||||
<span
|
||||
class="inline-block ${crawl.state === "failed"
|
||||
? "text-red-500"
|
||||
: crawl.state === "complete"
|
||||
? "text-emerald-500"
|
||||
: isRunning(crawl)
|
||||
? "text-purple-500"
|
||||
: "text-zinc-300"}"
|
||||
style="font-size: 10px; vertical-align: 2px"
|
||||
>
|
||||
●
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<div
|
||||
class="whitespace-nowrap mb-1 capitalize${isRunning(crawl)
|
||||
? " motion-safe:animate-pulse"
|
||||
: ""}"
|
||||
>
|
||||
${crawl.state.replace(/_/g, " ")}
|
||||
</div>
|
||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||
${crawl.finished
|
||||
? html`
|
||||
<sl-relative-time
|
||||
date=${`${crawl.finished}Z` /** Z for UTC */}
|
||||
></sl-relative-time>
|
||||
`
|
||||
: html`<btrix-relative-duration
|
||||
value=${`${crawl.started}Z`}
|
||||
></btrix-relative-duration>`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-2">
|
||||
${crawl.finished
|
||||
? html`
|
||||
<div class="whitespace-nowrap truncate text-sm">
|
||||
<span class="font-mono text-0-800 tracking-tighter">
|
||||
<sl-format-bytes
|
||||
value=${crawl.fileSize || 0}
|
||||
lang=${/* TODO localize: */ "en"}
|
||||
></sl-format-bytes>
|
||||
</span>
|
||||
<span class="text-0-500">
|
||||
(${crawl.fileCount === 1
|
||||
? msg(str`${crawl.fileCount} file`)
|
||||
: msg(str`${crawl.fileCount} files`)})
|
||||
</span>
|
||||
</div>
|
||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||
${msg(
|
||||
str`in ${RelativeDuration.humanize(
|
||||
new Date(`${crawl.finished}Z`).valueOf() -
|
||||
new Date(`${crawl.started}Z`).valueOf()
|
||||
)}`
|
||||
)}
|
||||
</div>
|
||||
`
|
||||
: crawl.stats
|
||||
? html`
|
||||
<div
|
||||
class="whitespace-nowrap truncate text-sm text-purple-600 font-mono tracking-tighter"
|
||||
>
|
||||
</div>
|
||||
<div class="ml-1 text-0-500 text-sm whitespace-nowrap truncate">
|
||||
${msg(str`by ${crawl.userName || crawl.userid}`)}
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="whitespace-nowrap truncate">
|
||||
<span
|
||||
class="bg-teal-50 text-teal-700 text-sm rounded px-1 leading-4"
|
||||
>${msg("Scheduled Run")}</span
|
||||
>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
${this.numberFormatter.format(+crawl.stats.done)}
|
||||
<span class="text-0-400">/</span>
|
||||
${this.numberFormatter.format(+crawl.stats.found)}
|
||||
</div>
|
||||
<div class="text-0-500 text-sm whitespace-nowrap truncate">
|
||||
${msg("pages crawled")}
|
||||
</div>
|
||||
`
|
||||
: ""}
|
||||
</div>
|
||||
<div class="col-span-6 md:col-span-2">
|
||||
${crawl.manual
|
||||
? html`
|
||||
<div class="whitespace-nowrap truncate mb-1">
|
||||
<span
|
||||
class="bg-fuchsia-50 text-fuchsia-700 text-sm rounded px-1 leading-4"
|
||||
>${msg("Manual Start")}</span
|
||||
>
|
||||
</div>
|
||||
<div class="ml-1 text-0-500 text-sm whitespace-nowrap truncate">
|
||||
${msg(str`by ${crawl.userName || crawl.userid}`)}
|
||||
</div>
|
||||
`
|
||||
: html`
|
||||
<div class="whitespace-nowrap truncate">
|
||||
<span
|
||||
class="bg-teal-50 text-teal-700 text-sm rounded px-1 leading-4"
|
||||
>${msg("Scheduled Run")}</span
|
||||
>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
</a>
|
||||
</li>`;
|
||||
};
|
||||
|
||||
|
||||
@ -66,12 +66,14 @@ export default class LiteElement extends LitElement {
|
||||
* @param event Click event
|
||||
*/
|
||||
navLink(event: MouseEvent, href?: string): void {
|
||||
// Detect keypress for opening in a new tab
|
||||
if (
|
||||
// Detect keypress for opening in a new tab
|
||||
event.ctrlKey ||
|
||||
event.shiftKey ||
|
||||
event.metaKey ||
|
||||
(event.button && event.button == 1)
|
||||
(event.button && event.button == 1) ||
|
||||
// Account for event prevented on anchor tag
|
||||
event.defaultPrevented
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user