Juergen Kunz
bb313fd9dc
- Implemented CloudlyViewSettings component for managing cloud provider settings including Hetzner, Cloudflare, AWS, DigitalOcean, Azure, and Google Cloud. - Added functionality to load, save, and test connections for each provider. - Enhanced UI with loading states and success/error notifications. feat: Create tasks view with execution history - Developed CloudlyViewTasks component to display and manage tasks and their executions. - Integrated auto-refresh functionality for task executions. - Added filtering and searching capabilities for tasks. feat: Implement execution details and task panel components - Created CloudlyExecutionDetails component to show detailed information about task executions including logs and metrics. - Developed CloudlyTaskPanel component to display individual tasks with execution status and actions to run or cancel tasks. feat: Utility functions for formatting and categorization - Added utility functions for formatting dates, durations, and cron expressions. - Implemented functions to retrieve category icons and hues for task categorization.
223 lines
10 KiB
TypeScript
223 lines
10 KiB
TypeScript
import * as plugins from '../../../plugins.js';
|
|
import * as shared from '../../shared/index.js';
|
|
|
|
import {
|
|
DeesElement,
|
|
customElement,
|
|
html,
|
|
state,
|
|
css,
|
|
cssManager,
|
|
} from '@design.estate/dees-element';
|
|
|
|
import * as appstate from '../../../appstate.js';
|
|
|
|
@customElement('cloudly-view-deployments')
|
|
export class CloudlyViewDeployments extends DeesElement {
|
|
@state()
|
|
private data: appstate.IDataState = {} as any;
|
|
|
|
constructor() {
|
|
super();
|
|
const subscription = appstate.dataState
|
|
.select((stateArg) => stateArg)
|
|
.subscribe((dataArg) => {
|
|
this.data = dataArg;
|
|
});
|
|
this.rxSubscriptions.push(subscription);
|
|
}
|
|
|
|
public static styles = [
|
|
cssManager.defaultStyles,
|
|
shared.viewHostCss,
|
|
css`
|
|
.status-badge { padding: 2px 8px; border-radius: 4px; font-size: 0.85em; font-weight: 500; }
|
|
.status-running { background: #4caf50; color: white; }
|
|
.status-stopped { background: #f44336; color: white; }
|
|
.status-paused { background: #ff9800; color: white; }
|
|
.status-deploying { background: #2196f3; color: white; }
|
|
.health-indicator { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 4px; font-size: 0.85em; }
|
|
.health-healthy { background: #e8f5e9; color: #2e7d32; }
|
|
.health-unhealthy { background: #ffebee; color: #c62828; }
|
|
.health-unknown { background: #f5f5f5; color: #666; }
|
|
.resource-usage { display: flex; gap: 12px; font-size: 0.9em; color: #888; }
|
|
.resource-item { display: flex; align-items: center; gap: 4px; }
|
|
`,
|
|
];
|
|
|
|
private getServiceName(serviceId: string): string {
|
|
const service = this.data.services?.find(s => s.id === serviceId);
|
|
return service?.data?.name || serviceId;
|
|
}
|
|
|
|
private getNodeName(nodeId: string): string {
|
|
return nodeId.substring(0, 8);
|
|
}
|
|
|
|
private getStatusBadgeHtml(status: string): any {
|
|
const className = `status-badge status-${status}`;
|
|
return html`<span class="${className}">${status}</span>`;
|
|
}
|
|
|
|
private getHealthIndicatorHtml(health?: string): any {
|
|
if (!health) health = 'unknown';
|
|
const className = `health-indicator health-${health}`;
|
|
const icon = health === 'healthy' ? '✓' : health === 'unhealthy' ? '✗' : '?';
|
|
return html`<span class="${className}">${icon} ${health}</span>`;
|
|
}
|
|
|
|
private getResourceUsageHtml(deployment: plugins.interfaces.data.IDeployment): any {
|
|
if (!deployment.resourceUsage) {
|
|
return html`<span style="color: #aaa;">N/A</span>`;
|
|
}
|
|
const { cpuUsagePercent, memoryUsedMB } = deployment.resourceUsage;
|
|
return html`
|
|
<div class="resource-usage">
|
|
<div class="resource-item">
|
|
<lucide-icon name="Cpu" size="14"></lucide-icon>
|
|
${cpuUsagePercent?.toFixed(1) || 0}%
|
|
</div>
|
|
<div class="resource-item">
|
|
<lucide-icon name="MemoryStick" size="14"></lucide-icon>
|
|
${memoryUsedMB || 0} MB
|
|
</div>
|
|
</div>
|
|
`;
|
|
}
|
|
|
|
public render() {
|
|
return html`
|
|
<cloudly-sectionheading>Deployments</cloudly-sectionheading>
|
|
<dees-table
|
|
.heading1=${'Deployments'}
|
|
.heading2=${'Service deployments running on cluster nodes'}
|
|
.data=${this.data.deployments || []}
|
|
.displayFunction=${(itemArg: plugins.interfaces.data.IDeployment) => {
|
|
return {
|
|
Service: this.getServiceName(itemArg.serviceId),
|
|
Node: this.getNodeName(itemArg.nodeId),
|
|
Status: this.getStatusBadgeHtml(itemArg.status),
|
|
Health: this.getHealthIndicatorHtml(itemArg.healthStatus),
|
|
'Container ID': itemArg.containerId ? html`<span style="font-family: monospace; font-size: 0.9em;">${itemArg.containerId.substring(0, 12)}</span>` : html`<span style="color: #aaa;">N/A</span>`,
|
|
Version: itemArg.version || 'latest',
|
|
'Resource Usage': this.getResourceUsageHtml(itemArg),
|
|
'Last Updated': itemArg.deployedAt ? new Date(itemArg.deployedAt).toLocaleString() : 'Never',
|
|
};
|
|
}}
|
|
.dataActions=${[
|
|
{
|
|
name: 'Deploy Service',
|
|
iconName: 'plus',
|
|
type: ['header', 'footer'],
|
|
actionFunc: async () => {
|
|
const availableServices = this.data.services || [];
|
|
if (availableServices.length === 0) {
|
|
plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: 'No Services Available',
|
|
content: html`<div style="text-align: center; padding: 24px;"><lucide-icon name="AlertCircle" size="48" style="color: #ff9800; margin-bottom: 16px;"></lucide-icon><div>Please create a service first before creating deployments.</div></div>`,
|
|
menuOptions: [ { name: 'OK', action: async (modalArg: any) => { await modalArg.destroy(); } } ],
|
|
});
|
|
return;
|
|
}
|
|
await plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: 'Deploy Service',
|
|
content: html`
|
|
<dees-form>
|
|
<dees-input-dropdown .key=${'serviceId'} .label=${'Service'} .options=${availableServices.map(s => ({ key: s.id, value: s.data.name }))} .required=${true}></dees-input-dropdown>
|
|
<dees-input-text .key=${'nodeId'} .label=${'Target Node ID'} .required=${true} .description=${'Enter the cluster node ID where this service should be deployed'}></dees-input-text>
|
|
<dees-input-text .key=${'version'} .label=${'Version'} .value=${'latest'} .required=${true}></dees-input-text>
|
|
<dees-input-dropdown .key=${'status'} .label=${'Initial Status'} .options=${['deploying', 'running']} .value=${'deploying'} .required=${true}></dees-input-dropdown>
|
|
</dees-form>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Deploy', action: async (modalArg: any) => {
|
|
const form = modalArg.shadowRoot.querySelector('dees-form') as any;
|
|
const formData = await form.gatherData();
|
|
await appstate.dataState.dispatchAction(appstate.createDeploymentAction, {
|
|
deploymentData: {
|
|
serviceId: formData.serviceId,
|
|
nodeId: formData.nodeId,
|
|
status: formData.status,
|
|
version: formData.version,
|
|
deployedAt: Date.now(),
|
|
usedImageId: 'placeholder',
|
|
deploymentLog: [],
|
|
},
|
|
});
|
|
await modalArg.destroy();
|
|
}},
|
|
{ name: 'Cancel', action: async (modalArg: any) => modalArg.destroy() },
|
|
],
|
|
});
|
|
},
|
|
},
|
|
{
|
|
name: 'Restart',
|
|
iconName: 'refresh-cw',
|
|
type: ['contextmenu', 'inRow'],
|
|
actionFunc: async (actionDataArg: any) => {
|
|
const deployment = actionDataArg.item as plugins.interfaces.data.IDeployment;
|
|
plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: `Restart Deployment`,
|
|
content: html`
|
|
<div style="text-align:center">Are you sure you want to restart this deployment?</div>
|
|
<div style="margin-top: 16px; padding: 16px; background: #333; border-radius: 8px;">
|
|
<div style="color: #fff; font-weight: bold;">${this.getServiceName(deployment.serviceId)}</div>
|
|
<div style="color: #aaa; font-size: 0.9em; margin-top: 4px;">Node: ${this.getNodeName(deployment.nodeId)}</div>
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Cancel', action: async (modalArg: any) => { await modalArg.destroy(); } },
|
|
{ name: 'Restart', action: async (modalArg: any) => { console.log('Restart deployment:', deployment); await modalArg.destroy(); } },
|
|
],
|
|
});
|
|
},
|
|
},
|
|
{
|
|
name: 'Stop',
|
|
iconName: 'square',
|
|
type: ['contextmenu', 'inRow'],
|
|
actionFunc: async (actionDataArg: any) => {
|
|
const deployment = actionDataArg.item as plugins.interfaces.data.IDeployment;
|
|
await appstate.dataState.dispatchAction(appstate.updateDeploymentAction, {
|
|
deploymentId: deployment.id,
|
|
deploymentData: { ...deployment, status: 'stopped' },
|
|
});
|
|
},
|
|
},
|
|
{
|
|
name: 'Delete',
|
|
iconName: 'trash',
|
|
type: ['contextmenu', 'inRow'],
|
|
actionFunc: async (actionDataArg: any) => {
|
|
const deployment = actionDataArg.item as plugins.interfaces.data.IDeployment;
|
|
plugins.deesCatalog.DeesModal.createAndShow({
|
|
heading: `Delete Deployment`,
|
|
content: html`
|
|
<div style="text-align:center">Are you sure you want to delete this deployment?</div>
|
|
<div style="margin-top: 16px; padding: 16px; background: #333; border-radius: 8px;">
|
|
<div style="color: #fff; font-weight: bold;">${this.getServiceName(deployment.serviceId)}</div>
|
|
<div style="color: #aaa; font-size: 0.9em; margin-top: 4px;">Node: ${this.getNodeName(deployment.nodeId)}</div>
|
|
<div style="color: #f44336; margin-top: 8px;">This action cannot be undone.</div>
|
|
</div>
|
|
`,
|
|
menuOptions: [
|
|
{ name: 'Cancel', action: async (modalArg: any) => { await modalArg.destroy(); } },
|
|
{ name: 'Delete', action: async (modalArg: any) => { await appstate.dataState.dispatchAction(appstate.deleteDeploymentAction, { deploymentId: deployment.id, }); await modalArg.destroy(); } },
|
|
],
|
|
});
|
|
},
|
|
},
|
|
] as plugins.deesCatalog.ITableAction[]}
|
|
></dees-table>
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
'cloudly-view-deployments': CloudlyViewDeployments;
|
|
}
|
|
}
|
|
|