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
changelog.md
+10
View File
@@ -2,6 +2,16 @@
## Pending
- remove redundant card wrappers around Cloudly tables (ui)
- Lets `dees-table` provide its own card shell in service, image, and task history views.
- Moves the live deployment refresh action into the table header actions.
### Fixes
- remove redundant wrappers around Cloudly tables (ui)
- Let dees-table provide its own card shell in service, image, and task history views.
- Move the live deployments refresh action into the deployments table header actions.
- Bump @types/node to ^25.9.1.
## 2026-05-26 - 6.3.0
package.json
+1 -1
View File
@@ -31,7 +31,7 @@
"@git.zone/tstest": "^3.6.6",
"@git.zone/tswatch": "^3.3.5",
"@push.rocks/smartnetwork": "^4.7.1",
"@types/node": "^25.9.0"
"@types/node": "^25.9.1"
},
"dependencies": {
"@api.global/typedrequest": "3.3.1",
pnpm-lock.yaml
Generated
+21 -21
View File
@@ -178,8 +178,8 @@ importers:
specifier: ^4.7.1
version: 4.7.1
'@types/node':
specifier: ^25.9.0
version: 25.9.0
specifier: ^25.9.1
version: 25.9.1
packages:
@@ -2308,11 +2308,11 @@ packages:
'@types/node@18.19.130':
resolution: {integrity: sha512-GRaXQx6jGfL8sKfaIDD6OupbIHBr9jv7Jnaml9tB7l4v068PAOXqfcujMMo5PhbIs6ggR1XODELqahT2R8v0fg==}
'@types/node@22.19.18':
resolution: {integrity: sha512-9v00a+dn2yWVsYDEunWC4g/TcRKVq3r8N5FuZp7u0SGrPvdN9c2yXI9bBuf5Fl0hNCb+QTIePTn5pJs2pwBOQQ==}
'@types/node@22.19.19':
resolution: {integrity: sha512-dyh/xO2Fh5bYrfWaaqGrRQQGkNdmYw6AmaAUvYeUMNTWQtvb796ikLdmTchRmOlOiIJ1TDXfWgVx1QkUlQ6Hew==}
'@types/node@25.9.0':
resolution: {integrity: sha512-AOQwYUNolgy3VosiRqXrACUXTN8nJUtPl7FJXMqZVyxiiCLhQuG3jXKvCS1ALr+Y2OmZhzzLVlYPEqJaiqkaJQ==}
'@types/node@25.9.1':
resolution: {integrity: sha512-xfrlY7UD5rMJk3ZVJP8BNzS28J36YJg+xp+LPXV1TdWxr8uMH5A860QNxYDGQe/ylDSgjxE52Q9VnO7p75tJxg==}
'@types/randomatic@3.1.5':
resolution: {integrity: sha512-VCwCTw6qh1pRRw+5rNTAwqPmf6A+hdrkdM7dBpZVmhl7g+em3ONXlYK/bWPVKqVGMWgP0d1bog8Vc/X6zRwRRQ==}
@@ -5735,7 +5735,7 @@ snapshots:
'@happy-dom/global-registrator@20.9.0':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
happy-dom: 20.9.0
transitivePeerDependencies:
- bufferutil
@@ -5855,7 +5855,7 @@ snapshots:
'@inquirer/figures': 1.0.15
'@inquirer/type': 2.0.0
'@types/mute-stream': 0.0.4
'@types/node': 22.19.18
'@types/node': 22.19.19
'@types/wrap-ansi': 3.0.0
ansi-escapes: 4.3.2
cli-width: 4.1.0
@@ -7915,7 +7915,7 @@ snapshots:
'@types/clean-css@4.2.11':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
source-map: 0.6.1
'@types/debug@4.1.13':
@@ -7931,7 +7931,7 @@ snapshots:
'@types/fs-extra@11.0.4':
dependencies:
'@types/jsonfile': 6.1.4
'@types/node': 25.9.0
'@types/node': 25.9.1
'@types/hast@3.0.4':
dependencies:
@@ -7947,12 +7947,12 @@ snapshots:
'@types/jsonfile@6.1.4':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
'@types/jsonwebtoken@9.0.10':
dependencies:
'@types/ms': 2.1.0
'@types/node': 25.9.0
'@types/node': 25.9.1
'@types/linkify-it@5.0.0': {}
@@ -7973,16 +7973,16 @@ snapshots:
'@types/mute-stream@0.0.4':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
'@types/node-fetch@2.6.13':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
form-data: 4.0.5
'@types/node-forge@1.3.14':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
'@types/node@16.9.1': {}
@@ -7990,11 +7990,11 @@ snapshots:
dependencies:
undici-types: 5.26.5
'@types/node@22.19.18':
'@types/node@22.19.19':
dependencies:
undici-types: 6.21.0
'@types/node@25.9.0':
'@types/node@25.9.1':
dependencies:
undici-types: 7.24.6
@@ -8012,7 +8012,7 @@ snapshots:
'@types/through2@2.0.41':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
'@types/trusted-types@2.0.7': {}
@@ -8040,11 +8040,11 @@ snapshots:
'@types/ws@8.18.1':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
'@types/yauzl@2.10.3':
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
optional: true
'@ungap/structured-clone@1.3.1': {}
@@ -8780,7 +8780,7 @@ snapshots:
happy-dom@20.9.0:
dependencies:
'@types/node': 25.9.0
'@types/node': 25.9.1
'@types/whatwg-mimetype': 3.0.2
'@types/ws': 8.18.1
entities: 7.0.1
ts_web/elements/views/images/index.ts
+8 -8
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,8 +172,6 @@ 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'}
@@ -189,12 +187,10 @@ export class CloudlyViewImages extends DeesElement {
Created: this.formatDate(versionArg.createdAt),
})}
></dees-table>
</div>
<div class="detail-card spaced-card">
<div class="section-title">Services Using This Image</div>
${servicesUsingImage.length ? html`
<dees-table
class="spaced-table"
.heading1=${'Service Usage'}
.heading2=${'Services currently configured with this image ID'}
.data=${servicesUsingImage}
@@ -207,8 +203,12 @@ export class CloudlyViewImages extends DeesElement {
Deployments: serviceArg.data.deploymentIds?.length || 0,
})}
></dees-table>
` : html`<div class="empty-state">No services currently reference this image.</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">
ts_web/elements/views/services/index.ts
+8 -9
View File
@@ -368,14 +368,6 @@ export class CloudlyViewServices extends DeesElement {
</div>
</div>
<div class="detail-card">
<div style="display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px;">
<div>
<div class="section-title">Deployments</div>
<div class="detail-subtitle">Container-level runtime actions happen here.</div>
</div>
<button class="back-button" @click=${() => this.loadDeploymentsForService(service)}>Refresh</button>
</div>
${this.deploymentsLoading ? html`<div class="detail-subtitle">Loading deployments...</div>` : html`
<dees-table
.heading1=${'Live Deployments'}
@@ -392,6 +384,14 @@ export class CloudlyViewServices extends DeesElement {
Updated: deploymentArg.updatedAt ? new Date(deploymentArg.updatedAt).toLocaleString() : '-',
})}
.dataActions=${[
{
name: 'Refresh',
iconName: 'refresh-cw',
type: ['header'],
actionFunc: async () => {
await this.loadDeploymentsForService(service);
},
},
{
name: 'Details',
iconName: 'lucide:Eye',
@@ -427,7 +427,6 @@ export class CloudlyViewServices extends DeesElement {
] as plugins.deesCatalog.ITableAction[]}
></dees-table>
`}
</div>
<div class="details-grid">
<div class="detail-card">
ts_web/elements/views/tasks/index.ts
-2
View File
@@ -266,7 +266,6 @@ export class CloudlyViewTasks extends DeesElement {
<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'}
@@ -291,7 +290,6 @@ export class CloudlyViewTasks extends DeesElement {
return actions;
}}
></dees-table>
</dees-panel>
${this.selectedExecution ? html`
<cloudly-sectionheading>Execution Details</cloudly-sectionheading>