903 lines
27 KiB
TypeScript
903 lines
27 KiB
TypeScript
import * as shared from '../elements/shared/index.js';
|
|
import * as plugins from '../plugins.js';
|
|
|
|
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
state,
|
|
css,
|
|
cssManager,
|
|
property,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as appstate from '../appstate.js';
|
|
|
|
@customElement('cloudly-view-tasks')
|
|
export class CloudlyViewTasks extends DeesElement {
|
|
@state()
|
|
private data: appstate.IDataState = {};
|
|
|
|
@state()
|
|
private selectedExecution: plugins.interfaces.data.ITaskExecution | null = null;
|
|
|
|
@state()
|
|
private loading = false;
|
|
|
|
@state()
|
|
private filterStatus: string = 'all';
|
|
|
|
@state()
|
|
private searchQuery: string = '';
|
|
|
|
@state()
|
|
private categoryFilter: string = 'all';
|
|
|
|
@state()
|
|
private autoRefresh: boolean = true;
|
|
|
|
private _refreshHandle: any = null;
|
|
|
|
constructor() {
|
|
super();
|
|
const subscription = appstate.dataState
|
|
.select((stateArg) => stateArg)
|
|
.subscribe((dataArg) => {
|
|
this.data = dataArg;
|
|
});
|
|
this.rxSubscriptions.push(subscription);
|
|
|
|
// Load initial data (non-blocking)
|
|
this.loadInitialData();
|
|
|
|
// Start periodic refresh (lightweight; executions only by default)
|
|
this.startAutoRefresh();
|
|
}
|
|
|
|
private async loadInitialData() {
|
|
try {
|
|
await appstate.dataState.dispatchAction(appstate.taskActions.getTasks, {});
|
|
await appstate.dataState.dispatchAction(appstate.taskActions.getTaskExecutions, {});
|
|
} catch (error) {
|
|
console.error('Failed to load initial task data:', error);
|
|
}
|
|
}
|
|
|
|
private startAutoRefresh() {
|
|
this.stopAutoRefresh();
|
|
if (!this.autoRefresh) return;
|
|
this._refreshHandle = setInterval(async () => {
|
|
try {
|
|
await this.loadExecutionsWithFilter();
|
|
} catch (err) {
|
|
// ignore transient errors during refresh
|
|
}
|
|
}, 5000);
|
|
}
|
|
|
|
private stopAutoRefresh() {
|
|
if (this._refreshHandle) {
|
|
clearInterval(this._refreshHandle);
|
|
this._refreshHandle = null;
|
|
}
|
|
}
|
|
|
|
public async disconnectedCallback(): Promise<void> {
|
|
await (super.disconnectedCallback?.());
|
|
this.stopAutoRefresh();
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
shared.viewHostCss,
|
|
css`
|
|
.toolbar {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
margin: 4px 0 16px 0;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.toolbar .spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.search-input {
|
|
background: #111;
|
|
color: #ddd;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
padding: 8px 10px;
|
|
min-width: 220px;
|
|
}
|
|
|
|
.chipbar {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.chip {
|
|
padding: 6px 10px;
|
|
background: #2a2a2a;
|
|
color: #bbb;
|
|
border: 1px solid #444;
|
|
border-radius: 16px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
user-select: none;
|
|
}
|
|
|
|
.chip.active {
|
|
background: #2196f3;
|
|
border-color: #2196f3;
|
|
color: white;
|
|
}
|
|
|
|
.task-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
|
gap: 16px;
|
|
margin-bottom: 32px;
|
|
}
|
|
|
|
.task-card {
|
|
background: #131313;
|
|
border: 1px solid #2a2a2a;
|
|
border-radius: 10px;
|
|
padding: 16px;
|
|
transition: border-color 0.2s, background 0.2s;
|
|
}
|
|
|
|
.task-card:hover { border-color: #3a3a3a; }
|
|
|
|
.card-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 12px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
|
|
.header-right { display: flex; align-items: center; gap: 8px; }
|
|
.task-icon { color: #cfcfcf; }
|
|
.task-name { font-size: 1.05em; font-weight: 650; color: #fff; letter-spacing: 0.1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
|
.task-subtitle { color: #8c8c8c; font-size: 0.9em; }
|
|
|
|
.task-description {
|
|
color: #b5b5b5;
|
|
font-size: 0.95em;
|
|
margin-bottom: 12px;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.task-meta {
|
|
display: flex;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.category-badge, .status-badge {
|
|
padding: 2px 8px;
|
|
border-radius: 4px;
|
|
font-size: 0.85em;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.category-maintenance {
|
|
background: #ff9800;
|
|
color: white;
|
|
}
|
|
|
|
.category-deployment {
|
|
background: #2196f3;
|
|
color: white;
|
|
}
|
|
|
|
.category-backup {
|
|
background: #4caf50;
|
|
color: white;
|
|
}
|
|
|
|
.category-monitoring {
|
|
background: #9c27b0;
|
|
color: white;
|
|
}
|
|
|
|
.category-cleanup {
|
|
background: #795548;
|
|
color: white;
|
|
}
|
|
|
|
.category-system {
|
|
background: #607d8b;
|
|
color: white;
|
|
}
|
|
|
|
.category-security {
|
|
background: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.status-running {
|
|
background: #2196f3;
|
|
color: white;
|
|
}
|
|
|
|
.status-completed {
|
|
background: #4caf50;
|
|
color: white;
|
|
}
|
|
|
|
.status-failed {
|
|
background: #f44336;
|
|
color: white;
|
|
}
|
|
|
|
.status-cancelled {
|
|
background: #ff9800;
|
|
color: white;
|
|
}
|
|
|
|
.trigger-button {
|
|
padding: 6px 12px;
|
|
background: #2196f3;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
transition: background 0.2s;
|
|
}
|
|
|
|
.trigger-button:hover {
|
|
background: #1976d2;
|
|
}
|
|
|
|
.trigger-button:disabled {
|
|
background: #666;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.schedule-info {
|
|
color: #666;
|
|
font-size: 0.85em;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.last-run {
|
|
color: #888;
|
|
font-size: 0.85em;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.execution-logs {
|
|
background: #0a0a0a;
|
|
border: 1px solid #333;
|
|
border-radius: 6px;
|
|
padding: 16px;
|
|
margin-top: 16px;
|
|
max-height: 400px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.log-entry {
|
|
font-family: monospace;
|
|
font-size: 0.9em;
|
|
margin-bottom: 8px;
|
|
padding: 4px 8px;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.log-info {
|
|
color: #2196f3;
|
|
}
|
|
|
|
.log-warning {
|
|
color: #ff9800;
|
|
background: rgba(255, 152, 0, 0.1);
|
|
}
|
|
|
|
.log-error {
|
|
color: #f44336;
|
|
background: rgba(244, 67, 54, 0.1);
|
|
}
|
|
|
|
.log-success {
|
|
color: #4caf50;
|
|
background: rgba(76, 175, 80, 0.1);
|
|
}
|
|
|
|
.filter-bar {
|
|
display: flex;
|
|
gap: 8px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.filter-button {
|
|
padding: 6px 12px;
|
|
background: #333;
|
|
color: #ccc;
|
|
border: 1px solid #555;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.filter-button.active {
|
|
background: #2196f3;
|
|
color: white;
|
|
border-color: #2196f3;
|
|
}
|
|
|
|
.filter-button:hover:not(.active) {
|
|
background: #444;
|
|
}
|
|
|
|
.metrics {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-top: 12px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid #333;
|
|
}
|
|
|
|
.metric {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.metric-label {
|
|
color: #666;
|
|
font-size: 0.85em;
|
|
}
|
|
|
|
.metric-value {
|
|
color: #fff;
|
|
font-size: 1.1em;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.card-actions, .task-header .right {
|
|
display: flex;
|
|
gap: 8px;
|
|
align-items: center;
|
|
}
|
|
|
|
.metrics-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: 10px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.metric-item {
|
|
background: #0f0f0f;
|
|
border: 1px solid #2c2c2c;
|
|
border-radius: 8px;
|
|
padding: 10px 12px;
|
|
}
|
|
|
|
.metric-item .label {
|
|
color: #8d8d8d;
|
|
font-size: 0.8em;
|
|
}
|
|
|
|
.metric-item .value {
|
|
color: #eaeaea;
|
|
font-weight: 600;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.lastline {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: #a0a0a0;
|
|
font-size: 0.9em;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
|
|
.dot.info { background: #2196f3; }
|
|
.dot.success { background: #4caf50; }
|
|
.dot.warning { background: #ff9800; }
|
|
.dot.error { background: #f44336; }
|
|
|
|
.card-footer {
|
|
display: flex;
|
|
gap: 12px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.link-button {
|
|
background: transparent;
|
|
border: none;
|
|
color: #8ab4ff;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
font-size: 0.95em;
|
|
}
|
|
.link-button:hover { text-decoration: underline; }
|
|
|
|
.secondary-button {
|
|
padding: 6px 12px;
|
|
background: #2b2b2b;
|
|
color: #ccc;
|
|
border: 1px solid #444;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
font-size: 0.9em;
|
|
transition: background 0.2s, border-color 0.2s;
|
|
}
|
|
|
|
.secondary-button:hover {
|
|
background: #363636;
|
|
border-color: #555;
|
|
}
|
|
`,
|
|
];
|
|
|
|
|
|
private async triggerTask(taskName: string) {
|
|
try {
|
|
const modal = await plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: `Run Task: ${taskName}`,
|
|
content: html`
|
|
<div>
|
|
<p>Do you want to trigger this task now?</p>
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'Run now',
|
|
action: async (modalArg: any) => {
|
|
await appstate.dataState.dispatchAction(
|
|
appstate.taskActions.triggerTask, { taskName }
|
|
);
|
|
plugins.deesCatalog.DeesToast.createAndShow({
|
|
message: `Task ${taskName} triggered`,
|
|
type: 'success',
|
|
});
|
|
await modalArg.destroy();
|
|
// Refresh executions to reflect the new run quickly
|
|
await this.loadExecutionsWithFilter();
|
|
}
|
|
},
|
|
{
|
|
name: 'Cancel',
|
|
action: async (modalArg: any) => modalArg.destroy()
|
|
}
|
|
]
|
|
});
|
|
} catch (error) {
|
|
console.error('Failed to trigger task:', error);
|
|
plugins.deesCatalog.DeesToast.createAndShow({
|
|
message: `Failed to trigger: ${error.message}`,
|
|
type: 'error',
|
|
});
|
|
}
|
|
}
|
|
|
|
private async cancelTaskFor(taskName: string) {
|
|
try {
|
|
const executions = (this.data.taskExecutions || [])
|
|
.filter(e => e.data.taskName === taskName && e.data.status === 'running')
|
|
.sort((a, b) => (b.data.startedAt || 0) - (a.data.startedAt || 0));
|
|
const running = executions[0];
|
|
if (!running) return;
|
|
|
|
await appstate.dataState.dispatchAction(
|
|
appstate.taskActions.cancelTask, { executionId: running.id }
|
|
);
|
|
plugins.deesCatalog.DeesToast.createAndShow({
|
|
message: `Cancelled ${taskName}`,
|
|
type: 'success',
|
|
});
|
|
await this.loadExecutionsWithFilter();
|
|
} catch (err) {
|
|
console.error('Failed to cancel task:', err);
|
|
plugins.deesCatalog.DeesToast.createAndShow({
|
|
message: `Cancel failed: ${err.message}`,
|
|
type: 'error',
|
|
});
|
|
}
|
|
}
|
|
|
|
private async loadExecutionsWithFilter() {
|
|
try {
|
|
const filter: any = {};
|
|
if (this.filterStatus !== 'all') {
|
|
filter.status = this.filterStatus;
|
|
}
|
|
|
|
await appstate.dataState.dispatchAction(
|
|
appstate.taskActions.getTaskExecutions, { filter }
|
|
);
|
|
} catch (error) {
|
|
console.error('Failed to load executions:', error);
|
|
}
|
|
}
|
|
|
|
private formatDate(timestamp: number): string {
|
|
return new Date(timestamp).toLocaleString();
|
|
}
|
|
|
|
private formatDuration(ms: number): string {
|
|
if (ms < 1000) return `${ms}ms`;
|
|
if (ms < 60000) return `${(ms / 1000).toFixed(1)}s`;
|
|
if (ms < 3600000) return `${(ms / 60000).toFixed(1)}m`;
|
|
return `${(ms / 3600000).toFixed(1)}h`;
|
|
}
|
|
|
|
private formatRelativeTime(ts?: number): string {
|
|
if (!ts) return '-';
|
|
const diff = Date.now() - ts;
|
|
const abs = Math.abs(diff);
|
|
if (abs < 60_000) return `${Math.round(abs / 1000)}s ago`;
|
|
if (abs < 3_600_000) return `${Math.round(abs / 60_000)}m ago`;
|
|
if (abs < 86_400_000) return `${Math.round(abs / 3_600_000)}h ago`;
|
|
return `${Math.round(abs / 86_400_000)}d ago`;
|
|
}
|
|
|
|
private getCategoryIcon(category: string): string {
|
|
switch (category) {
|
|
case 'maintenance':
|
|
return 'lucide:Wrench';
|
|
case 'deployment':
|
|
return 'lucide:Rocket';
|
|
case 'backup':
|
|
return 'lucide:Archive';
|
|
case 'monitoring':
|
|
return 'lucide:Activity';
|
|
case 'cleanup':
|
|
return 'lucide:Trash2';
|
|
case 'system':
|
|
return 'lucide:Settings';
|
|
case 'security':
|
|
return 'lucide:Shield';
|
|
default:
|
|
return 'lucide:Play';
|
|
}
|
|
}
|
|
|
|
private getCategoryHue(category: string): number {
|
|
switch (category) {
|
|
case 'maintenance': return 28; // orange
|
|
case 'deployment': return 208; // blue
|
|
case 'backup': return 122; // green
|
|
case 'monitoring': return 280; // purple
|
|
case 'cleanup': return 20; // brownish
|
|
case 'system': return 200; // steel
|
|
case 'security': return 0; // red
|
|
default: return 210; // default blue
|
|
}
|
|
}
|
|
|
|
private getStatusColor(status?: string): string {
|
|
switch (status) {
|
|
case 'running': return '#2196f3';
|
|
case 'completed': return '#4caf50';
|
|
case 'failed': return '#f44336';
|
|
case 'cancelled': return '#ff9800';
|
|
default: return '#3a3a3a';
|
|
}
|
|
}
|
|
|
|
private formatCronFriendly(cron?: string): string {
|
|
if (!cron) return '';
|
|
const parts = cron.trim().split(/\s+/);
|
|
if (parts.length !== 5) return cron; // fallback
|
|
const [min, hour, dom, mon, dow] = parts;
|
|
if (min === '*/1' && hour === '*' && dom === '*' && mon === '*' && dow === '*') return 'every minute';
|
|
if (min.startsWith('*/') && hour === '*' && dom === '*' && mon === '*' && dow === '*') return `every ${min.replace('*/','')} min`;
|
|
if (min === '0' && hour.startsWith('*/') && dom === '*' && mon === '*' && dow === '*') return `every ${hour.replace('*/','')} hours`;
|
|
if (min === '0' && hour === '*' && dom === '*' && mon === '*' && dow === '*') return 'hourly';
|
|
if (min === '0' && hour === '0' && dom === '*' && mon === '*' && dow === '*') return 'daily';
|
|
if (min === '0' && hour === '0' && dom === '1' && mon === '*' && dow === '*') return 'monthly';
|
|
return cron;
|
|
}
|
|
|
|
private renderTaskCard(task: any) {
|
|
const executions = this.data.taskExecutions || [];
|
|
const lastExecution = executions
|
|
.filter(e => e.data.taskName === task.name)
|
|
.sort((a, b) => (b.data.startedAt || 0) - (a.data.startedAt || 0))[0];
|
|
|
|
const isRunning = lastExecution?.data.status === 'running';
|
|
const executionsForTask = executions.filter(e => e.data.taskName === task.name);
|
|
const now = Date.now();
|
|
const last24hCount = executionsForTask.filter(e => (e.data.startedAt || 0) > now - 86_400_000).length;
|
|
const completed = executionsForTask.filter(e => e.data.status === 'completed');
|
|
const successRate = executionsForTask.length ? Math.round((completed.length * 100) / executionsForTask.length) : 0;
|
|
const avgDuration = completed.length ? Math.round(completed.reduce((acc, e) => acc + (e.data.duration || 0), 0) / completed.length) : undefined;
|
|
const lastLog = lastExecution?.data.logs && lastExecution.data.logs.length > 0 ? lastExecution.data.logs[lastExecution.data.logs.length - 1] : null;
|
|
|
|
const status = lastExecution?.data.status as ('running'|'completed'|'failed'|'cancelled'|undefined);
|
|
const hue = this.getCategoryHue(task.category);
|
|
const subtitle = [
|
|
task.category,
|
|
task.schedule ? `⏱ ${this.formatCronFriendly(task.schedule)}` : null,
|
|
isRunning
|
|
? (lastExecution?.data.startedAt ? `Started ${this.formatRelativeTime(lastExecution.data.startedAt)}` : 'Running')
|
|
: (task.lastRun ? `Last ${this.formatRelativeTime(task.lastRun)}` : 'Never run')
|
|
].filter(Boolean).join(' • ');
|
|
|
|
return html`
|
|
<div class="task-card">
|
|
<div class="card-header">
|
|
<div class="header-left">
|
|
<dees-icon class="task-icon" .iconName=${this.getCategoryIcon(task.category)}></dees-icon>
|
|
<div>
|
|
<div class="task-name" title=${task.name}>${task.name}</div>
|
|
<div class="task-subtitle" title=${task.schedule || ''}>${subtitle}</div>
|
|
</div>
|
|
</div>
|
|
<div class="header-right">
|
|
${lastExecution ? html`<span class="status-badge status-${lastExecution.data.status}">${lastExecution.data.status}</span>` : html`<span class="status-badge" style="background:#2e2e2e;color:#ddd;border:1px solid #3a3a3a;">idle</span>`}
|
|
${isRunning ? html`
|
|
<dees-spinner style="--size: 18px"></dees-spinner>
|
|
<dees-button .text=${'Cancel'} .type=${'secondary'} @click=${() => this.cancelTaskFor(task.name)}></dees-button>
|
|
` : html`
|
|
<dees-button .text=${'Run'} .type=${'primary'} .disabled=${!task.enabled} @click=${() => this.triggerTask(task.name)}></dees-button>
|
|
`}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="task-description" title=${task.description || ''}>${task.description}</div>
|
|
|
|
${lastExecution ? html`
|
|
<div class="metrics-grid">
|
|
<div class="metric-item">
|
|
<div class="label">Last Status</div>
|
|
<div class="value">
|
|
<span class="status-badge status-${lastExecution.data.status}">${lastExecution.data.status}</span>
|
|
</div>
|
|
</div>
|
|
<div class="metric-item">
|
|
<div class="label">Avg Duration</div>
|
|
<div class="value">${avgDuration ? this.formatDuration(avgDuration) : '-'}</div>
|
|
</div>
|
|
<div class="metric-item">
|
|
<div class="label">24h Runs · Success</div>
|
|
<div class="value">${last24hCount} · ${successRate}%</div>
|
|
</div>
|
|
</div>
|
|
<div class="lastline">
|
|
${lastLog ? html`<span class="dot ${lastLog.severity}"></span> ${lastLog.message}` : 'No recent logs'}
|
|
</div>
|
|
<div class="card-footer">
|
|
<button class="link-button" @click=${() => this.openExecutionDetails(lastExecution)}>Details</button>
|
|
${lastExecution.data.logs?.length ? html`<button class="link-button" @click=${() => this.openLogsModal(lastExecution)}>Logs</button>` : ''}
|
|
</div>
|
|
` : html`
|
|
<div class="metrics-grid">
|
|
<div class="metric-item">
|
|
<div class="label">Last Status</div>
|
|
<div class="value">—</div>
|
|
</div>
|
|
<div class="metric-item">
|
|
<div class="label">Avg Duration</div>
|
|
<div class="value">—</div>
|
|
</div>
|
|
<div class="metric-item">
|
|
<div class="label">24h Runs · Success</div>
|
|
<div class="value">0 · 0%</div>
|
|
</div>
|
|
</div>
|
|
`}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
private async openExecutionDetails(execution: plugins.interfaces.data.ITaskExecution) {
|
|
this.selectedExecution = execution;
|
|
// Scroll into view of the details section
|
|
requestAnimationFrame(() => {
|
|
this.shadowRoot?.querySelector('cloudly-sectionheading + .execution-details')?.scrollIntoView({ behavior: 'smooth', block: 'start' });
|
|
});
|
|
}
|
|
|
|
private async openLogsModal(execution: plugins.interfaces.data.ITaskExecution) {
|
|
await plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: `Logs: ${execution.data.taskName}`,
|
|
content: html`
|
|
<div class="execution-logs">
|
|
${(execution.data.logs || []).map(log => html`
|
|
<div class="log-entry log-${log.severity}">
|
|
<span>${this.formatDate(log.timestamp)}</span> - ${log.message}
|
|
</div>
|
|
`)}
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{
|
|
name: 'Copy All',
|
|
action: async (modalArg: any) => {
|
|
try {
|
|
await navigator.clipboard.writeText((execution.data.logs || [])
|
|
.map(l => `${new Date(l.timestamp).toISOString()} [${l.severity}] ${l.message}`).join('\n'));
|
|
plugins.deesCatalog.DeesToast.createAndShow({ message: 'Logs copied', type: 'success' });
|
|
} catch (e) {
|
|
plugins.deesCatalog.DeesToast.createAndShow({ message: 'Copy failed', type: 'error' });
|
|
}
|
|
}
|
|
},
|
|
{ name: 'Close', action: async (modalArg: any) => modalArg.destroy() }
|
|
]
|
|
});
|
|
}
|
|
|
|
private renderExecutionDetails(execution: plugins.interfaces.data.ITaskExecution) {
|
|
return html`
|
|
<div class="execution-details">
|
|
<h3>Execution Details: ${execution.data.taskName}</h3>
|
|
|
|
<div class="metrics">
|
|
<div class="metric">
|
|
<span class="metric-label">Started</span>
|
|
<span class="metric-value">${this.formatDate(execution.data.startedAt)}</span>
|
|
</div>
|
|
${execution.data.completedAt ? html`
|
|
<div class="metric">
|
|
<span class="metric-label">Completed</span>
|
|
<span class="metric-value">${this.formatDate(execution.data.completedAt)}</span>
|
|
</div>
|
|
` : ''}
|
|
${execution.data.duration ? html`
|
|
<div class="metric">
|
|
<span class="metric-label">Duration</span>
|
|
<span class="metric-value">${this.formatDuration(execution.data.duration)}</span>
|
|
</div>
|
|
` : ''}
|
|
<div class="metric">
|
|
<span class="metric-label">Triggered By</span>
|
|
<span class="metric-value">${execution.data.triggeredBy}</span>
|
|
</div>
|
|
</div>
|
|
|
|
${execution.data.logs && execution.data.logs.length > 0 ? html`
|
|
<h4>Logs</h4>
|
|
<div class="execution-logs">
|
|
${execution.data.logs.map(log => html`
|
|
<div class="log-entry log-${log.severity}">
|
|
<span>${this.formatDate(log.timestamp)}</span> -
|
|
${log.message}
|
|
</div>
|
|
`)}
|
|
</div>
|
|
` : ''}
|
|
|
|
${execution.data.metrics ? html`
|
|
<h4>Metrics</h4>
|
|
<div class="metrics">
|
|
${Object.entries(execution.data.metrics).map(([key, value]) => html`
|
|
<div class="metric">
|
|
<span class="metric-label">${key}</span>
|
|
<span class="metric-value">${typeof value === 'object' ? JSON.stringify(value) : value}</span>
|
|
</div>
|
|
`)}
|
|
</div>
|
|
` : ''}
|
|
|
|
${execution.data.error ? html`
|
|
<h4>Error</h4>
|
|
<div class="execution-logs">
|
|
<div class="log-entry log-error">
|
|
${execution.data.error.message}
|
|
${execution.data.error.stack ? html`<pre>${execution.data.error.stack}</pre>` : ''}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public render() {
|
|
const tasks = (this.data.tasks || []) as any[];
|
|
const categories = Array.from(new Set(tasks.map(t => t.category))).sort();
|
|
const filteredTasks = tasks
|
|
.filter(t => this.categoryFilter === 'all' || t.category === this.categoryFilter)
|
|
.filter(t => !this.searchQuery || t.name.toLowerCase().includes(this.searchQuery.toLowerCase()) || (t.description || '').toLowerCase().includes(this.searchQuery.toLowerCase()));
|
|
|
|
return html`
|
|
<cloudly-sectionheading>Tasks</cloudly-sectionheading>
|
|
|
|
<dees-panel
|
|
.title=${'Task Library'}
|
|
.subtitle=${'Run maintenance, monitoring and system tasks'}
|
|
.variant=${'outline'}
|
|
>
|
|
<div class="toolbar">
|
|
<div class="chipbar">
|
|
<div class="chip ${this.categoryFilter === 'all' ? 'active' : ''}"
|
|
@click=${() => { this.categoryFilter = 'all'; }}>
|
|
All
|
|
</div>
|
|
${categories.map(cat => html`
|
|
<div class="chip ${this.categoryFilter === cat ? 'active' : ''}"
|
|
@click=${() => { this.categoryFilter = cat; }}>
|
|
${cat}
|
|
</div>
|
|
`)}
|
|
</div>
|
|
<div class="spacer"></div>
|
|
<input class="search-input" placeholder="Search tasks" .value=${this.searchQuery}
|
|
@input=${(e: any) => { this.searchQuery = e.target.value; }} />
|
|
<button class="secondary-button" @click=${async () => {
|
|
await this.loadExecutionsWithFilter();
|
|
}}>Refresh</button>
|
|
<button class="secondary-button" @click=${() => {
|
|
this.autoRefresh = !this.autoRefresh;
|
|
this.autoRefresh ? this.startAutoRefresh() : this.stopAutoRefresh();
|
|
}}>
|
|
${this.autoRefresh ? 'Auto-Refresh: On' : 'Auto-Refresh: Off'}
|
|
</button>
|
|
</div>
|
|
|
|
<div class="task-grid">
|
|
${filteredTasks.map(task => this.renderTaskCard(task))}
|
|
</div>
|
|
</dees-panel>
|
|
|
|
<cloudly-sectionheading>Execution History</cloudly-sectionheading>
|
|
|
|
<dees-panel
|
|
.title=${'Recent Executions'}
|
|
.subtitle=${'History of task runs and their outcomes'}
|
|
.variant=${'outline'}
|
|
>
|
|
<dees-table
|
|
.heading1=${'Task Executions'}
|
|
.heading2=${'History of task runs and their outcomes'}
|
|
.data=${this.data.taskExecutions || []}
|
|
.displayFunction=${(itemArg: plugins.interfaces.data.ITaskExecution) => {
|
|
return {
|
|
Task: itemArg.data.taskName,
|
|
Status: html`<span class="status-badge status-${itemArg.data.status}">${itemArg.data.status}</span>`,
|
|
'Started At': this.formatDate(itemArg.data.startedAt),
|
|
Duration: itemArg.data.duration ? this.formatDuration(itemArg.data.duration) : '-',
|
|
'Triggered By': itemArg.data.triggeredBy,
|
|
Logs: itemArg.data.logs?.length || 0,
|
|
};
|
|
}}
|
|
.actionFunction=${async (itemArg: plugins.interfaces.data.ITaskExecution) => {
|
|
const actions: any[] = [
|
|
{
|
|
name: 'View Details',
|
|
iconName: 'lucide:Eye',
|
|
type: ['inRow'],
|
|
actionFunc: async () => {
|
|
this.selectedExecution = itemArg;
|
|
},
|
|
}
|
|
];
|
|
if (itemArg.data.status === 'running') {
|
|
actions.push({
|
|
name: 'Cancel',
|
|
iconName: 'lucide:SquareX',
|
|
type: ['inRow'],
|
|
actionFunc: async () => {
|
|
await appstate.dataState.dispatchAction(appstate.taskActions.cancelTask, { executionId: itemArg.id });
|
|
await this.loadExecutionsWithFilter();
|
|
},
|
|
});
|
|
}
|
|
return actions;
|
|
}}
|
|
></dees-table>
|
|
</dees-panel>
|
|
|
|
${this.selectedExecution ? html`
|
|
<cloudly-sectionheading>Execution Details</cloudly-sectionheading>
|
|
${this.renderExecutionDetails(this.selectedExecution)}
|
|
` : ''}
|
|
`;
|
|
}
|
|
}
|