serve.zone/cloudly
3
0
Fork 0
Code Issues 3 Pull Requests Actions Packages Projects Releases Wiki Activity

fix(ui): remove redundant wrappers around Cloudly tables

Browse Source
This commit is contained in:
Jürgen Kunz
2026-05-26 19:38:52 +00:00
parent 756c35aa05
commit 06d54db747
6 changed files with 147 additions and 140 deletions
Download Patch File Download Diff File Expand all files Collapse all files
ts_web/elements/views/images/index.ts
+36 -36
View File
@@ -42,8 +42,8 @@ export class CloudlyViewImages extends DeesElement {
.detail-title { margin: 0; font-size: 26px; font-weight: 700; color: var(--ci-shade-7, #e4e4e7); }
.detail-subtitle { margin-top: 6px; color: var(--ci-shade-4, #71717a); font-size: 14px; overflow-wrap: anywhere; }
.back-button { border: 1px solid var(--ci-shade-2, #27272a); border-radius: 7px; padding: 9px 13px; font-size: 13px; cursor: pointer; background: var(--ci-shade-1, #09090b); color: var(--ci-shade-7, #e4e4e7); }
.summary-card, .detail-card { background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 9px; padding: 16px; }
.spaced-card { margin-top: 14px; }
.detail-card { background: var(--ci-shade-1, #09090b); border: 1px solid var(--ci-shade-2, #27272a); border-radius: 9px; padding: 16px; }
.spaced-table, .spaced-card { margin-top: 14px; }
.details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 14px; }
.section-title { font-size: 14px; font-weight: 700; color: var(--ci-shade-7, #e4e4e7); margin-bottom: 10px; }
.kv-list { display: grid; gap: 8px; }
@@ -172,43 +172,43 @@ export class CloudlyViewImages extends DeesElement {
<dees-statsgrid .tiles=${this.getImageStatsTiles(image)} .minTileWidth=${220} .gap=${12}></dees-statsgrid>
<div class="detail-card">
<div class="section-title">Versions</div>
<dees-table
.heading1=${'Image Versions'}
.heading2=${versions.length ? 'Stored image versions and registry metadata' : 'No versions recorded'}
.data=${versions}
.displayFunction=${(versionArg: plugins.interfaces.data.IImage['data']['versions'][number]) => ({
Version: versionArg.versionString,
Source: this.renderSourceBadge(versionArg.source),
Size: this.formatBytes(versionArg.size),
Digest: versionArg.digest || '-',
Repository: versionArg.registryRepository || '-',
Tag: versionArg.registryTag || '-',
Storage: versionArg.storagePath || '-',
Created: this.formatDate(versionArg.createdAt),
})}
></dees-table>
${servicesUsingImage.length ? html`
<dees-table
.heading1=${'Image Versions'}
.heading2=${versions.length ? 'Stored image versions and registry metadata' : 'No versions recorded'}
.data=${versions}
.displayFunction=${(versionArg: plugins.interfaces.data.IImage['data']['versions'][number]) => ({
Version: versionArg.versionString,
Source: this.renderSourceBadge(versionArg.source),
Size: this.formatBytes(versionArg.size),
Digest: versionArg.digest || '-',
Repository: versionArg.registryRepository || '-',
Tag: versionArg.registryTag || '-',
Storage: versionArg.storagePath || '-',
Created: this.formatDate(versionArg.createdAt),
class="spaced-table"
.heading1=${'Service Usage'}
.heading2=${'Services currently configured with this image ID'}
.data=${servicesUsingImage}
.displayFunction=${(serviceArg: plugins.interfaces.data.IService) => ({
Name: serviceArg.data.name,
Version: serviceArg.data.imageVersion || '-',
Category: serviceArg.data.serviceCategory || 'workload',
Strategy: serviceArg.data.deploymentStrategy || 'custom',
Domains: serviceArg.data.domains?.map((domainArg) => domainArg.name).join(', ') || '-',
Deployments: serviceArg.data.deploymentIds?.length || 0,
})}
></dees-table>
</div>
<div class="detail-card spaced-card">
<div class="section-title">Services Using This Image</div>
${servicesUsingImage.length ? html`
<dees-table
.heading1=${'Service Usage'}
.heading2=${'Services currently configured with this image ID'}
.data=${servicesUsingImage}
.displayFunction=${(serviceArg: plugins.interfaces.data.IService) => ({
Name: serviceArg.data.name,
Version: serviceArg.data.imageVersion || '-',
Category: serviceArg.data.serviceCategory || 'workload',
Strategy: serviceArg.data.deploymentStrategy || 'custom',
Domains: serviceArg.data.domains?.map((domainArg) => domainArg.name).join(', ') || '-',
Deployments: serviceArg.data.deploymentIds?.length || 0,
})}
></dees-table>
` : html`<div class="empty-state">No services currently reference this image.</div>`}
</div>
` : html`
<div class="detail-card spaced-card">
<div class="section-title">Services Using This Image</div>
<div class="empty-state">No services currently reference this image.</div>
</div>
`}
<div class="details-grid">
<div class="detail-card">