Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 jkunz
|
eaf6aceef1 | ||
|
jkunz
|
876d9e0db9 | ||
|
jkunz
|
b40bd966a9 | ||
|
jkunz
|
17348f46c8 | ||
|
jkunz
|
9d2e8419be | ||
|
jkunz
|
cddc907859 | ||
|
jkunz
|
61564296ed | ||
|
jkunz
|
8fa78bf40f | ||
|
jkunz
|
6cb99c0ab6 | ||
|
jkunz
|
7b9ddb2dc5 | ||
|
jkunz
|
00ded5d12e | ||
|
jkunz
|
23fb25dcd5 | ||
|
jkunz
|
8ddcb56f90 | ||
|
jkunz
|
9d186ece0a | ||
|
jkunz
|
55cb4880ce | ||
|
jkunz
|
171aae7095 | ||
|
jkunz
|
9aad9c0c2a | ||
|
jkunz
|
b91d3a9341 | ||
|
jkunz
|
590e4bb039 | ||
|
jkunz
|
c4bef0d443 |
+19
-1
@@ -14,6 +14,7 @@
|
||||
]
|
||||
},
|
||||
"@git.zone/cli": {
|
||||
"schemaVersion": 2,
|
||||
"projectType": "wcc",
|
||||
"module": {
|
||||
"githost": "code.foss.global",
|
||||
@@ -25,11 +26,28 @@
|
||||
"projectDomain": "serve.zone"
|
||||
},
|
||||
"release": {
|
||||
"preflight": {
|
||||
"requireCleanTree": true,
|
||||
"test": false,
|
||||
"build": true
|
||||
},
|
||||
"targets": {
|
||||
"git": {
|
||||
"enabled": true,
|
||||
"remote": "origin",
|
||||
"pushBranch": true,
|
||||
"pushTags": true
|
||||
},
|
||||
"npm": {
|
||||
"enabled": true,
|
||||
"registries": [
|
||||
"https://verdaccio.lossless.digital",
|
||||
"https://registry.npmjs.org"
|
||||
],
|
||||
"accessLevel": "public"
|
||||
"accessLevel": "public",
|
||||
"alreadyPublished": "success"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,59 @@
|
||||
# Changelog
|
||||
|
||||
## Pending
|
||||
|
||||
|
||||
## 2026-05-24 - 2.12.6
|
||||
|
||||
### Fixes
|
||||
|
||||
- refresh reverse proxy UI labels and pnpm workspace config (catalog)
|
||||
- Replaces stale reverse proxy references in dashboard and platform service examples with SmartProxy wording
|
||||
- Generalizes the network proxy access log subtitle
|
||||
- Bumps @types/node to ^25.8.0 and adds pnpm build dependency configuration
|
||||
|
||||
## 2026-05-24 - 2.12.5
|
||||
|
||||
### Fixes
|
||||
|
||||
- pass dashboard resource usage into `sz-resource-usage-card` using the correct property
|
||||
|
||||
## 2026-04-13 - 2.12.4 - fix(deps)
|
||||
bump @design.estate/dees-catalog to ^3.70.0
|
||||
|
||||
- Updates @design.estate/dees-catalog from ^3.67.1 to ^3.70.0 in package.json
|
||||
|
||||
## 2026-04-07 - 2.12.3 - fix(route-card)
|
||||
align route card with dees-tile layout and update header and footer styling
|
||||
|
||||
- replace the custom card wrapper with dees-tile and move content into header, body, and footer slots
|
||||
- restyle header, route name, and action buttons to match shared tile design tokens and interaction states
|
||||
- wrap empty and populated route states consistently inside the tile component
|
||||
|
||||
## 2026-04-07 - 2.12.2 - fix(ts_web)
|
||||
adjust route card section background color in dark theme
|
||||
|
||||
- Updates the dark theme background for route card sections from #0a0a0a to #101010 for improved visual consistency.
|
||||
|
||||
## 2026-04-07 - 2.12.1 - fix(ts_web)
|
||||
handle slotted config section content visibility and field row borders correctly
|
||||
|
||||
- track whether the default slot has assigned content and hide the slot container when empty
|
||||
- wrap rendered fields in a dedicated list so the last field row border is removed correctly when slot content is present
|
||||
|
||||
## 2026-04-07 - 2.12.0 - feat(elements)
|
||||
standardize dashboard and detail views on dees tile and stats grid components
|
||||
|
||||
- replace custom stat cards with dees-statsgrid across status and network views and remove the obsolete sz-stat-card element
|
||||
- migrate multiple detail and settings views to dees-tile headers and footers for consistent action placement and styling
|
||||
- extend sz-config-section with footer links and actions plus improved collapsed tile behavior
|
||||
|
||||
## 2026-04-05 - 2.11.2 - fix(route-card)
|
||||
align route card with source profile metadata and vpnOnly route configuration
|
||||
|
||||
- rename linked route metadata fields from security profile to source profile in rendering and feature detection
|
||||
- simplify VPN display logic to use the boolean vpnOnly flag instead of the previous nested VPN configuration object
|
||||
|
||||
## 2026-04-04 - 2.11.1 - fix(route-card)
|
||||
clarify VPN mode badge labels in route cards
|
||||
|
||||
|
||||
+11
-11
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@serve.zone/catalog",
|
||||
"version": "2.11.1",
|
||||
"version": "2.12.6",
|
||||
"private": false,
|
||||
"description": "UI component catalog for serve.zone",
|
||||
"main": "dist_ts_web/index.js",
|
||||
@@ -11,22 +11,22 @@
|
||||
"build": "tsbuild tsfolders --allowimplicitany && tsbundle",
|
||||
"watch": "tswatch"
|
||||
},
|
||||
"author": "Lossless GmbH",
|
||||
"author": "Task Venture Capital GmbH",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@design.estate/dees-catalog": "^3.49.2",
|
||||
"@design.estate/dees-domtools": "^2.5.4",
|
||||
"@design.estate/dees-catalog": "^3.81.0",
|
||||
"@design.estate/dees-domtools": "^2.5.6",
|
||||
"@design.estate/dees-element": "^2.2.4",
|
||||
"@design.estate/dees-wcctools": "^3.8.0"
|
||||
"@design.estate/dees-wcctools": "^3.9.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@git.zone/tsbuild": "^4.4.0",
|
||||
"@git.zone/tsbundle": "^2.10.0",
|
||||
"@git.zone/tsrun": "^2.0.2",
|
||||
"@git.zone/tstest": "^3.6.3",
|
||||
"@git.zone/tswatch": "^3.3.2",
|
||||
"@git.zone/tsbuild": "^4.4.2",
|
||||
"@git.zone/tsbundle": "^2.10.4",
|
||||
"@git.zone/tsrun": "^2.0.4",
|
||||
"@git.zone/tstest": "^3.6.6",
|
||||
"@git.zone/tswatch": "^3.3.5",
|
||||
"@push.rocks/projectinfo": "^5.1.0",
|
||||
"@types/node": "^25.5.0"
|
||||
"@types/node": "^25.8.0"
|
||||
},
|
||||
"files": [
|
||||
"ts_web/**/*",
|
||||
|
||||
Generated
+2330
-2966
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,7 @@
|
||||
allowBuilds:
|
||||
esbuild: true
|
||||
mongodb-memory-server: true
|
||||
puppeteer: true
|
||||
sharp: true
|
||||
ignoredBuiltDependencies:
|
||||
- '@design.estate/dees-catalog'
|
||||
+2
-2
@@ -2,7 +2,7 @@
|
||||
|
||||
## Project Structure
|
||||
- `html/index.ts` - WccTools setup with sections for Pages and Elements
|
||||
- `ts_web/elements/` - All web components (34 elements + 9 demo-view wrappers)
|
||||
- `ts_web/elements/` - All web components (33 elements + 9 demo-view wrappers)
|
||||
- `ts_web/elements/index.ts` - Barrel export for all element components
|
||||
- `ts_web/pages/` - Page components
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
## Demo Groups
|
||||
| Group | Elements |
|
||||
|-------|----------|
|
||||
| Dashboard | sz-dashboard-view, sz-stat-card, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
|
||||
| Dashboard | sz-dashboard-view, sz-resource-usage-card, sz-traffic-card, sz-quick-actions-card |
|
||||
| Dashboard Grids | sz-status-grid-cluster, sz-status-grid-services, sz-status-grid-network, sz-status-grid-infra |
|
||||
| Platform | sz-platform-services-card, sz-platform-service-detail-view |
|
||||
| Network | sz-network-proxy-view, sz-network-dns-view, sz-network-domains-view, sz-reverse-proxy-card, sz-dns-ssl-card, sz-certificates-card, sz-domain-detail-view |
|
||||
|
||||
@@ -1,255 +1,155 @@
|
||||
# @serve.zone/catalog
|
||||
|
||||
The complete UI component library for **serve.zone** — a full-featured admin and management interface for onebox server management, built as a collection of reusable web components.
|
||||
|
||||
## Install
|
||||
|
||||
```bash
|
||||
pnpm install @serve.zone/catalog
|
||||
```
|
||||
`@serve.zone/catalog` is the shared web-component catalog for serve.zone dashboards. It packages the UI building blocks used by Onebox, DcRouter-style operations views, and other serve.zone admin surfaces: dashboards, service views, app-store screens, DNS and routing tools, registry panels, email views, settings, tokens, and demo shells.
|
||||
|
||||
## Issue Reporting and Security
|
||||
|
||||
For reporting bugs, issues, or security vulnerabilities, please visit [community.foss.global/](https://community.foss.global/). This is the central community hub for all issue reporting. Developers who sign and comply with our contribution agreement and go through identification can also get a [code.foss.global/](https://code.foss.global/) account to submit Pull Requests directly.
|
||||
|
||||
## 🚀 What It Does
|
||||
## Install
|
||||
|
||||
`@serve.zone/catalog` provides **34 production-ready web components** covering every aspect of server management:
|
||||
|
||||
- 📊 **Dashboard** — Real-time cluster overview, resource usage, traffic metrics, quick actions
|
||||
- 🐳 **Services** — Docker container management, deployment, logs, live stats, backups, and an integrated IDE workspace
|
||||
- 🛒 **App Store** — Browse and deploy pre-configured application templates (WordPress, Gitea, etc.)
|
||||
- 🌐 **Network** — Reverse proxy configuration, DNS record management, domain & SSL certificate monitoring
|
||||
- 🔀 **Routes** — SmartProxy route configuration, match criteria, TLS modes, security profiles, forwarding targets
|
||||
- 📧 **MTA / Email** — Inbound and outbound email management, SMTP transaction logs, authentication results
|
||||
- 📦 **Registries** — Container registry management (onebox + external registries like Docker Hub, GHCR, ECR)
|
||||
- 🔑 **Auth** — Login view, API token management (global + CI tokens)
|
||||
- ⚙️ **Settings** — Appearance, Cloudflare integration, SSL/TLS config, network settings, account management
|
||||
- 🏗️ **Platform Services** — MongoDB, MinIO, ClickHouse, Redis, Caddy monitoring and control
|
||||
- 📋 **Configuration** — Read-only overview of the running server configuration with collapsible sections
|
||||
|
||||
Every component supports **light and dark themes** out of the box and communicates via standard `CustomEvent` dispatching.
|
||||
|
||||
## 📦 Usage
|
||||
|
||||
### Import
|
||||
|
||||
```typescript
|
||||
// Import everything
|
||||
import * as szCatalog from '@serve.zone/catalog';
|
||||
|
||||
// Or import specific components
|
||||
import { SzDashboardView, SzLoginView, SzServiceDetailView } from '@serve.zone/catalog';
|
||||
```bash
|
||||
pnpm add @serve.zone/catalog
|
||||
```
|
||||
|
||||
Components auto-register as custom elements when imported. Use them directly in your HTML:
|
||||
## What It Provides
|
||||
|
||||
The package exports browser-first TypeScript modules from `ts_web/index.ts`:
|
||||
|
||||
```typescript
|
||||
export * from './elements/index.js';
|
||||
export * from './pages/index.js';
|
||||
```
|
||||
|
||||
Importing a component registers its custom element through `@design.estate/dees-element` decorators. Components use the Dees design system, support light and dark themes through Dees theme helpers, and communicate through DOM properties plus `CustomEvent` dispatching.
|
||||
|
||||
```typescript
|
||||
import {
|
||||
SzDashboardView,
|
||||
SzLoginView,
|
||||
SzServiceDetailView,
|
||||
} from '@serve.zone/catalog';
|
||||
```
|
||||
|
||||
```html
|
||||
<sz-dashboard-view .data="${dashboardData}"></sz-dashboard-view>
|
||||
<sz-login-view @login="${handleLogin}"></sz-login-view>
|
||||
<sz-service-detail-view .service="${serviceData}" .logs="${logEntries}"></sz-service-detail-view>
|
||||
<sz-dashboard-view></sz-dashboard-view>
|
||||
<sz-login-view></sz-login-view>
|
||||
<sz-service-detail-view></sz-service-detail-view>
|
||||
```
|
||||
|
||||
### Full Application Shell
|
||||
## Component Areas
|
||||
|
||||
For a complete app experience, use the demo app shell which wires up sidebar navigation, app bar menus, and all views via `dees-appui`:
|
||||
| Area | Components |
|
||||
| --- | --- |
|
||||
| Dashboard | `SzDashboardView`, `SzResourceUsageCard`, `SzTrafficCard`, `SzPlatformServicesCard`, `SzCertificatesCard`, `SzReverseProxyCard`, `SzDnsSslCard`, `SzQuickActionsCard`, and status-grid components. |
|
||||
| Services | `SzServicesListView`, `SzServiceDetailView`, `SzServiceCreateView`, `SzServicesBackupsView`, and `SzAppStoreView`. |
|
||||
| Network and domains | `SzNetworkProxyView`, `SzNetworkDnsView`, `SzNetworkDomainsView`, and `SzDomainDetailView`. |
|
||||
| Routes | `SzRouteListView` and `SzRouteCard` for route configuration, match criteria, actions, TLS mode, and security profile display. |
|
||||
| Mail | `SzMtaListView` and `SzMtaDetailView` for inbound/outbound email operations views. |
|
||||
| Registries | `SzRegistryAdvertisement` and `SzRegistryExternalView`. |
|
||||
| Auth and settings | `SzLoginView`, `SzTokensView`, and `SzSettingsView`. |
|
||||
| Configuration | `SzConfigOverview` and `SzConfigSection`. |
|
||||
| Demo pages | `SzDemoAppShell`, `SzDemoApp`, `Mainpage`, and `SzDemoView*` components used by the development/demo environment. |
|
||||
|
||||
The exported catalog currently contains more than 30 product UI components plus demo orchestration components. Prefer the exported barrel imports over deep file imports unless you are working inside this repository.
|
||||
|
||||
## Usage Patterns
|
||||
|
||||
Most components expose data through typed properties and emit actions as DOM events.
|
||||
|
||||
```typescript
|
||||
import { html } from '@design.estate/dees-element';
|
||||
import '@serve.zone/catalog';
|
||||
// Then use <sz-demo-app-shell> for a fully configured application
|
||||
|
||||
const dashboardTemplate = html`
|
||||
<sz-dashboard-view
|
||||
.data=${dashboardData}
|
||||
@action-click=${(event: CustomEvent) => {
|
||||
console.log('dashboard action selected', event.detail);
|
||||
}}
|
||||
></sz-dashboard-view>
|
||||
`;
|
||||
```
|
||||
|
||||
## 🧩 Component Reference
|
||||
For a full app-style demo shell with navigation, import the package and render `<sz-demo-app-shell>`:
|
||||
|
||||
### Dashboard
|
||||
```html
|
||||
<sz-demo-app-shell></sz-demo-app-shell>
|
||||
```
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzDashboardView` | `<sz-dashboard-view>` | Main dashboard orchestrating all grid sections — cluster, services, network, infrastructure |
|
||||
| `SzStatCard` | `<sz-stat-card>` | Single statistic card with label, value, icon, and color variant |
|
||||
| `SzResourceUsageCard` | `<sz-resource-usage-card>` | CPU/memory progress bars, network I/O, top memory consumers |
|
||||
| `SzTrafficCard` | `<sz-traffic-card>` | HTTP traffic metrics — requests, errors, response time, status distribution |
|
||||
| `SzQuickActionsCard` | `<sz-quick-actions-card>` | Configurable action button grid |
|
||||
The demo shell is useful for development and visual review. Production apps usually compose the lower-level components into their own routing and data-fetching layer.
|
||||
|
||||
### Dashboard Grids
|
||||
## TypeScript Interfaces
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzStatusGridCluster` | `<sz-status-grid-cluster>` | 4-column stat card grid — total/running/stopped services, Docker status |
|
||||
| `SzStatusGridServices` | `<sz-status-grid-services>` | Resource usage + platform services side by side |
|
||||
| `SzStatusGridNetwork` | `<sz-status-grid-network>` | Traffic, reverse proxy, and certificates in a responsive grid |
|
||||
| `SzStatusGridInfra` | `<sz-status-grid-infra>` | DNS/SSL status + quick actions |
|
||||
|
||||
### Services
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzServicesListView` | `<sz-services-list-view>` | Table of deployed services with status badges and action buttons |
|
||||
| `SzServiceDetailView` | `<sz-service-detail-view>` | Full service detail page — info, logs, live stats, actions, backups, and integrated workspace/IDE mode |
|
||||
| `SzServiceCreateView` | `<sz-service-create-view>` | Service deployment form — image, ports, env vars, volumes, resource limits |
|
||||
| `SzServicesBackupsView` | `<sz-services-backups-view>` | Backup schedule and backup history management |
|
||||
|
||||
### App Store
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzAppStoreView` | `<sz-app-store-view>` | App marketplace for deploying pre-configured templates (WordPress, Gitea, etc.) with category filtering |
|
||||
|
||||
### Platform Services
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzPlatformServicesCard` | `<sz-platform-services-card>` | Lists infrastructure services (MongoDB, MinIO, etc.) with status indicators |
|
||||
| `SzPlatformServiceDetailView` | `<sz-platform-service-detail-view>` | Detailed platform service view — connection info, config, metrics, logs |
|
||||
|
||||
### Network
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzNetworkProxyView` | `<sz-network-proxy-view>` | Reverse proxy management — traffic targets table and access log viewer |
|
||||
| `SzNetworkDnsView` | `<sz-network-dns-view>` | DNS record management with Cloudflare sync |
|
||||
| `SzNetworkDomainsView` | `<sz-network-domains-view>` | Domain list with certificate status and provider info |
|
||||
| `SzDomainDetailView` | `<sz-domain-detail-view>` | Domain detail — SSL certificate info, proxy routes, DNS records |
|
||||
| `SzReverseProxyCard` | `<sz-reverse-proxy-card>` | Compact proxy status card (HTTP/HTTPS ports, route count) |
|
||||
| `SzDnsSslCard` | `<sz-dns-ssl-card>` | Cloudflare DNS and ACME config status |
|
||||
| `SzCertificatesCard` | `<sz-certificates-card>` | Certificate status counts — valid, expiring, expired |
|
||||
|
||||
### Routes
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzRouteListView` | `<sz-route-list-view>` | Route configuration list with type filtering (HTTPS, email, DNS, etc.) |
|
||||
| `SzRouteCard` | `<sz-route-card>` | Single route card — match criteria, action type, TLS mode, targets, security profile |
|
||||
|
||||
### MTA / Email
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzMtaListView` | `<sz-mta-list-view>` | Email management — inbound/outbound messages with status badges and filtering |
|
||||
| `SzMtaDetailView` | `<sz-mta-detail-view>` | Email detail — SMTP transaction log, TLS info, SPF/DKIM/DMARC results, headers, body |
|
||||
|
||||
### Registries
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzRegistryAdvertisement` | `<sz-registry-advertisement>` | Onebox registry info card with docker quick-start commands |
|
||||
| `SzRegistryExternalView` | `<sz-registry-external-view>` | External registry management (Docker Hub, GHCR, GCR, ECR) |
|
||||
|
||||
### Auth & Settings
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzLoginView` | `<sz-login-view>` | Login page with serve.zone branding, credentials form, error display |
|
||||
| `SzTokensView` | `<sz-tokens-view>` | API token management — global and CI tokens with copy/regenerate/delete |
|
||||
| `SzSettingsView` | `<sz-settings-view>` | Full settings panel — appearance, Cloudflare, SSL/TLS, network, account |
|
||||
|
||||
### Configuration
|
||||
|
||||
| Component | Tag | Description |
|
||||
|-----------|-----|-------------|
|
||||
| `SzConfigOverview` | `<sz-config-overview>` | Top-level configuration overview with informational banner |
|
||||
| `SzConfigSection` | `<sz-config-section>` | Collapsible config section — icon, enabled/disabled badge, key-value fields, action buttons |
|
||||
|
||||
## 🏗️ Architecture
|
||||
|
||||
### Component Pattern
|
||||
|
||||
All components follow a consistent pattern:
|
||||
Many components export their own data interfaces alongside the custom element class. These interfaces are intended for UI-facing view models, not as replacements for backend contracts from `@serve.zone/interfaces`.
|
||||
|
||||
```typescript
|
||||
import { DeesElement, customElement, html, css, cssManager, property } from '@design.estate/dees-element';
|
||||
import type {
|
||||
IDashboardData,
|
||||
IRouteConfig,
|
||||
IServiceDetail,
|
||||
IAppTemplate,
|
||||
} from '@serve.zone/catalog';
|
||||
```
|
||||
|
||||
@customElement('sz-my-component')
|
||||
export class SzMyComponent extends DeesElement {
|
||||
// TC39 standard decorators with accessor keyword
|
||||
Use these types to shape component props in the frontend. Use `@serve.zone/interfaces` for API and persisted platform contracts.
|
||||
|
||||
## Architecture
|
||||
|
||||
The catalog follows a consistent component pattern:
|
||||
|
||||
```typescript
|
||||
import {
|
||||
DeesElement,
|
||||
css,
|
||||
cssManager,
|
||||
customElement,
|
||||
html,
|
||||
property,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
@customElement('sz-example-card')
|
||||
export class SzExampleCard extends DeesElement {
|
||||
@property({ type: String })
|
||||
public accessor label: string = '';
|
||||
public accessor label = '';
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
/* Light/dark theme support */
|
||||
:host { color: ${cssManager.bdTheme('#18181b', '#fafafa')}; }
|
||||
:host {
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
// Events via CustomEvent (bubbles + composed for shadow DOM)
|
||||
private handleClick() {
|
||||
this.dispatchEvent(new CustomEvent('action', {
|
||||
detail: { id: this.id },
|
||||
bubbles: true,
|
||||
composed: true,
|
||||
}));
|
||||
public render() {
|
||||
return html`<span>${this.label}</span>`;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Project Structure
|
||||
Project layout:
|
||||
|
||||
```
|
||||
```text
|
||||
@serve.zone/catalog/
|
||||
├── html/ # WccTools dev server entry point
|
||||
│ ├── index.html # HTML shell
|
||||
│ └── index.ts # WccTools config (pages + elements sections)
|
||||
├── html/ # WccTools dev server shell
|
||||
├── ts_web/
|
||||
│ ├── index.ts # Barrel export
|
||||
│ ├── elements/ # All web components
|
||||
│ │ ├── index.ts # Element barrel export
|
||||
│ │ ├── sz-*.ts # Individual components
|
||||
│ │ └── sz-demo-view-*.ts # Demo orchestration wrappers
|
||||
│ └── pages/ # Page-level components
|
||||
│ ├── sz-demo-app-shell.ts # Full app shell (dees-appui)
|
||||
│ └── ...
|
||||
└── dist_ts_web/ # Compiled output (npm entry point)
|
||||
│ ├── index.ts # package barrel export
|
||||
│ ├── elements/ # reusable sz-* web components
|
||||
│ └── pages/ # demo app and shell pages
|
||||
└── dist_ts_web/ # compiled npm entry point
|
||||
```
|
||||
|
||||
### TypeScript Interfaces
|
||||
|
||||
The library exports comprehensive TypeScript interfaces for all data structures:
|
||||
|
||||
```typescript
|
||||
// Dashboard
|
||||
import type { IDashboardData, IResourceUsage, ITrafficData, IClusterStats } from '@serve.zone/catalog';
|
||||
|
||||
// Services
|
||||
import type { IServiceDetail, IServiceStats, ILogEntry, IServiceBackup } from '@serve.zone/catalog';
|
||||
|
||||
// Network
|
||||
import type { IDomainDetail, ICertificateDetail, IDnsRecord, ITrafficTarget } from '@serve.zone/catalog';
|
||||
|
||||
// Routes
|
||||
import type { IRouteConfig, IRouteMatch, IRouteAction, IRouteTls, IRouteSecurity } from '@serve.zone/catalog';
|
||||
|
||||
// MTA / Email
|
||||
import type { IEmail, IEmailDetail, ISmtpLogEntry, IConnectionInfo, IAuthenticationResults } from '@serve.zone/catalog';
|
||||
|
||||
// Configuration
|
||||
import type { IConfigField, IConfigSectionAction } from '@serve.zone/catalog';
|
||||
|
||||
// Settings & Auth
|
||||
import type { ISettings, IToken, IExternalRegistry } from '@serve.zone/catalog';
|
||||
|
||||
// App Store
|
||||
import type { IAppTemplate } from '@serve.zone/catalog';
|
||||
```
|
||||
|
||||
## 🛠️ Development
|
||||
## Development
|
||||
|
||||
```bash
|
||||
# Install dependencies
|
||||
pnpm install
|
||||
|
||||
# Start dev server (wcctools dashboard with live reload)
|
||||
pnpm run watch
|
||||
|
||||
# Production build
|
||||
pnpm run build
|
||||
|
||||
# Run tests
|
||||
pnpm test
|
||||
```
|
||||
|
||||
The **wcctools dev server** provides an interactive dashboard where every component is rendered with demo data. Components are organized by group (Dashboard, Services, Network, etc.) in the sidebar. Demo view wrappers (`sz-demo-view-*`) are filtered out from the element list — they serve as full-page orchestration demos accessible through the Pages section.
|
||||
`pnpm run watch` starts the WccTools development environment for browsing the catalog with demo data. `pnpm run build` compiles TypeScript folders and creates the browser bundle with `tsbundle`.
|
||||
|
||||
## License and Legal Information
|
||||
|
||||
|
||||
@@ -3,6 +3,6 @@
|
||||
*/
|
||||
export const commitinfo = {
|
||||
name: '@serve.zone/catalog',
|
||||
version: '2.11.1',
|
||||
version: '2.12.6',
|
||||
description: 'UI component catalog for serve.zone'
|
||||
}
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
// Dashboard Cards
|
||||
export * from './sz-stat-card.js';
|
||||
export * from './sz-resource-usage-card.js';
|
||||
export * from './sz-traffic-card.js';
|
||||
export * from './sz-platform-services-card.js';
|
||||
|
||||
@@ -24,6 +24,13 @@ export interface IConfigSectionAction {
|
||||
detail?: any;
|
||||
}
|
||||
|
||||
export interface IConfigSectionLink {
|
||||
label: string;
|
||||
href: string;
|
||||
icon?: string;
|
||||
external?: boolean;
|
||||
}
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-config-section': SzConfigSection;
|
||||
@@ -46,6 +53,12 @@ export class SzConfigSection extends DeesElement {
|
||||
{ key: 'Auto Renew', value: true, type: 'boolean' },
|
||||
{ key: 'Renew Threshold', value: '30 days' },
|
||||
] as IConfigField[]}
|
||||
.links=${[
|
||||
{ label: 'Docs', href: 'https://code.foss.global/serve.zone/smartproxy', icon: 'lucide:bookOpen', external: true },
|
||||
] as IConfigSectionLink[]}
|
||||
.actions=${[
|
||||
{ label: 'Configure', icon: 'lucide:settings', event: 'configure' },
|
||||
] as IConfigSectionAction[]}
|
||||
></sz-config-section>
|
||||
<sz-config-section
|
||||
title="Email Server"
|
||||
@@ -57,6 +70,13 @@ export class SzConfigSection extends DeesElement {
|
||||
{ key: 'Hostname', value: null },
|
||||
{ key: 'Domains', value: ['example.com', 'mail.example.com'], type: 'pills' },
|
||||
] as IConfigField[]}
|
||||
.links=${[
|
||||
{ label: 'Docs', href: 'https://code.foss.global/serve.zone/smartmta', icon: 'lucide:bookOpen', external: true },
|
||||
{ label: 'Source', href: 'https://code.foss.global/serve.zone/smartmta', icon: 'lucide:github', external: true },
|
||||
] as IConfigSectionLink[]}
|
||||
.actions=${[
|
||||
{ label: 'Enable', icon: 'lucide:power', event: 'enable' },
|
||||
] as IConfigSectionAction[]}
|
||||
></sz-config-section>
|
||||
<sz-config-section
|
||||
title="DNS Server"
|
||||
@@ -68,6 +88,9 @@ export class SzConfigSection extends DeesElement {
|
||||
{ key: 'Port', value: 53 },
|
||||
{ key: 'NS Domains', value: ['ns1.example.com', 'ns2.example.com'], type: 'pills' },
|
||||
] as IConfigField[]}
|
||||
.links=${[
|
||||
{ label: 'Getting Started', href: 'https://docs.example.com/dns', icon: 'lucide:bookOpen', external: true },
|
||||
] as IConfigSectionLink[]}
|
||||
></sz-config-section>
|
||||
`;
|
||||
|
||||
@@ -91,6 +114,9 @@ export class SzConfigSection extends DeesElement {
|
||||
@property({ type: Array })
|
||||
public accessor actions: IConfigSectionAction[] = [];
|
||||
|
||||
@property({ type: Array })
|
||||
public accessor links: IConfigSectionLink[] = [];
|
||||
|
||||
@property({ type: Boolean })
|
||||
public accessor collapsible: boolean = false;
|
||||
|
||||
@@ -100,6 +126,9 @@ export class SzConfigSection extends DeesElement {
|
||||
@state()
|
||||
accessor isCollapsed: boolean = false;
|
||||
|
||||
@state()
|
||||
accessor hasSlottedContent: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
@@ -108,20 +137,25 @@ export class SzConfigSection extends DeesElement {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
dees-tile {
|
||||
display: block;
|
||||
}
|
||||
|
||||
:host([collapsed]) dees-tile::part(content) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
:host([collapsed]) dees-tile::part(footer) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 14px 20px;
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
padding: 10px 16px;
|
||||
gap: 12px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
cursor: default;
|
||||
user-select: none;
|
||||
}
|
||||
@@ -131,30 +165,31 @@ export class SzConfigSection extends DeesElement {
|
||||
}
|
||||
|
||||
:host([collapsible]) .section-header:hover {
|
||||
background: ${cssManager.bdTheme('#ebebed', '#1c1c1f')};
|
||||
background: var(--dees-color-hover);
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.header-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
background: var(--dees-color-border-default);
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.header-icon dees-icon {
|
||||
font-size: 18px;
|
||||
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
|
||||
font-size: 14px;
|
||||
color: var(--dees-color-text-muted);
|
||||
}
|
||||
|
||||
.header-text {
|
||||
@@ -162,15 +197,17 @@ export class SzConfigSection extends DeesElement {
|
||||
}
|
||||
|
||||
.header-title {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
.header-subtitle {
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
font-size: 11px;
|
||||
color: var(--dees-color-text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: 1.3;
|
||||
margin-top: 1px;
|
||||
}
|
||||
@@ -236,30 +273,60 @@ export class SzConfigSection extends DeesElement {
|
||||
background: ${cssManager.bdTheme('#f59e0b', '#fbbf24')};
|
||||
}
|
||||
|
||||
/* Action buttons */
|
||||
.header-action {
|
||||
display: inline-flex;
|
||||
/* Footer action buttons — canonical dees-modal / dees-tile pattern */
|
||||
.section-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 150ms ease;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.header-action:hover {
|
||||
background: ${cssManager.bdTheme('rgba(37,99,235,0.08)', 'rgba(96,165,250,0.1)')};
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.header-action dees-icon {
|
||||
font-size: 14px;
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.tile-button dees-icon {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* Chevron */
|
||||
@@ -274,8 +341,8 @@ export class SzConfigSection extends DeesElement {
|
||||
}
|
||||
|
||||
.chevron dees-icon {
|
||||
font-size: 16px;
|
||||
color: ${cssManager.bdTheme('#a1a1aa', '#52525b')};
|
||||
font-size: 14px;
|
||||
color: var(--dees-color-text-muted);
|
||||
}
|
||||
|
||||
/* Content */
|
||||
@@ -283,8 +350,9 @@ export class SzConfigSection extends DeesElement {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.section-content.collapsed {
|
||||
display: none;
|
||||
.fields-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* Field rows */
|
||||
@@ -297,7 +365,7 @@ export class SzConfigSection extends DeesElement {
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.field-row:last-child {
|
||||
.fields-list .field-row:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
@@ -412,9 +480,8 @@ export class SzConfigSection extends DeesElement {
|
||||
border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1e')};
|
||||
}
|
||||
|
||||
.slot-content:empty {
|
||||
.slot-content.empty {
|
||||
display: none;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* Badge type */
|
||||
@@ -439,6 +506,18 @@ export class SzConfigSection extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
updated(changedProperties: Map<string, any>) {
|
||||
super.updated(changedProperties);
|
||||
if (changedProperties.has('isCollapsed')) {
|
||||
this.toggleAttribute('collapsed', this.isCollapsed);
|
||||
}
|
||||
}
|
||||
|
||||
private onSlotChange(e: Event) {
|
||||
const slot = e.target as HTMLSlotElement;
|
||||
this.hasSlottedContent = slot.assignedNodes({ flatten: true }).length > 0;
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
const statusLabels: Record<string, string> = {
|
||||
'enabled': 'Enabled',
|
||||
@@ -448,8 +527,9 @@ export class SzConfigSection extends DeesElement {
|
||||
};
|
||||
|
||||
return html`
|
||||
<div class="section">
|
||||
<dees-tile>
|
||||
<div
|
||||
slot="header"
|
||||
class="section-header"
|
||||
@click=${() => {
|
||||
if (this.collapsible) {
|
||||
@@ -475,8 +555,40 @@ export class SzConfigSection extends DeesElement {
|
||||
${statusLabels[this.status] || this.status}
|
||||
</span>
|
||||
` : ''}
|
||||
${this.collapsible ? html`
|
||||
<span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
|
||||
<dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
|
||||
</span>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
${this.fields.length > 0 ? html`
|
||||
<div class="fields-list">
|
||||
${this.fields.map(field => this.renderField(field))}
|
||||
</div>
|
||||
` : ''}
|
||||
<div class="slot-content ${!this.hasSlottedContent ? 'empty' : ''}">
|
||||
<slot @slotchange=${this.onSlotChange}></slot>
|
||||
</div>
|
||||
</div>
|
||||
${this.links.length > 0 || this.actions.length > 0 ? html`
|
||||
<div slot="footer" class="section-footer">
|
||||
${this.links.map(link => html`
|
||||
<a
|
||||
class="tile-button"
|
||||
href=${link.href}
|
||||
target=${link.external ? '_blank' : '_self'}
|
||||
rel=${link.external ? 'noopener noreferrer' : ''}
|
||||
@click=${(e: Event) => e.stopPropagation()}
|
||||
>
|
||||
${link.icon ? html`<dees-icon .icon=${link.icon}></dees-icon>` : ''}
|
||||
${link.label}
|
||||
${link.external ? html`<dees-icon .icon=${'lucide:externalLink'}></dees-icon>` : ''}
|
||||
</a>
|
||||
`)}
|
||||
${this.actions.map(action => html`
|
||||
<button class="header-action" @click=${(e: Event) => {
|
||||
<button class="tile-button primary" @click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.dispatchEvent(new CustomEvent(action.event || 'action', {
|
||||
detail: action.detail || { label: action.label },
|
||||
@@ -488,20 +600,9 @@ export class SzConfigSection extends DeesElement {
|
||||
${action.label}
|
||||
</button>
|
||||
`)}
|
||||
${this.collapsible ? html`
|
||||
<span class="chevron ${this.isCollapsed ? 'collapsed' : ''}">
|
||||
<dees-icon .icon=${'lucide:chevronDown'}></dees-icon>
|
||||
</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content ${this.isCollapsed ? 'collapsed' : ''}">
|
||||
${this.fields.map(field => this.renderField(field))}
|
||||
<div class="slot-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -64,7 +64,7 @@ export class SzDashboardView extends DeesElement {
|
||||
platformServices: [
|
||||
{ name: 'MongoDB', status: '1 DB', running: true },
|
||||
{ name: 'S3 Storage (MinIO)', status: '1 bucket', running: true },
|
||||
{ name: 'Caddy Reverse Proxy', status: 'Running', running: true },
|
||||
{ name: 'SmartProxy Reverse Proxy', status: 'Running', running: true },
|
||||
{ name: 'ClickHouse', status: '1 DB', running: true },
|
||||
],
|
||||
traffic: {
|
||||
|
||||
@@ -229,57 +229,87 @@ export class SzDomainDetailView extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section.full-width {
|
||||
dees-tile.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
}
|
||||
|
||||
.section-title svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
color: var(--dees-color-text-secondary);
|
||||
}
|
||||
|
||||
.section-action {
|
||||
padding: 6px 10px;
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 4px;
|
||||
.section-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.section-action:hover {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
|
||||
.section-content {
|
||||
padding: 16px;
|
||||
}
|
||||
@@ -582,8 +612,8 @@ export class SzDomainDetailView extends DeesElement {
|
||||
|
||||
<div class="grid">
|
||||
<!-- Certificate Section -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||||
@@ -591,9 +621,6 @@ export class SzDomainDetailView extends DeesElement {
|
||||
</svg>
|
||||
SSL Certificate
|
||||
</div>
|
||||
${this.certificate ? html`
|
||||
<button class="section-action" @click=${() => this.handleRenewCertificate()}>Renew</button>
|
||||
` : ''}
|
||||
</div>
|
||||
<div class="section-content">
|
||||
${this.certificate ? html`
|
||||
@@ -652,11 +679,16 @@ export class SzDomainDetailView extends DeesElement {
|
||||
<div class="empty-state">No certificate configured</div>
|
||||
`}
|
||||
</div>
|
||||
${this.certificate ? html`
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button primary" @click=${() => this.handleRenewCertificate()}>Renew</button>
|
||||
</div>
|
||||
` : ''}
|
||||
</dees-tile>
|
||||
|
||||
<!-- Proxy Routes Section -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="16 3 21 3 21 8"></polyline>
|
||||
@@ -679,11 +711,11 @@ export class SzDomainDetailView extends DeesElement {
|
||||
<div class="empty-state">No proxy routes configured</div>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<!-- DNS Records Section -->
|
||||
<div class="section full-width">
|
||||
<div class="section-header">
|
||||
<dees-tile class="full-width">
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="10"></circle>
|
||||
@@ -692,13 +724,6 @@ export class SzDomainDetailView extends DeesElement {
|
||||
</svg>
|
||||
DNS Records
|
||||
</div>
|
||||
<button class="section-action" @click=${() => this.handleAddDnsRecord()}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Add Record
|
||||
</button>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
${this.dnsRecords.length > 0 ? html`
|
||||
@@ -737,7 +762,16 @@ export class SzDomainDetailView extends DeesElement {
|
||||
<div class="empty-state">No DNS records configured</div>
|
||||
`}
|
||||
</div>
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button primary" @click=${() => this.handleAddDnsRecord()}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Add Record
|
||||
</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -256,31 +256,89 @@ export class SzMtaDetailView extends DeesElement {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
.card-header {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-heading {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@@ -451,37 +509,13 @@ export class SzMtaDetailView extends DeesElement {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
/* Copy button */
|
||||
.smtp-copy-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
background: transparent;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 150ms ease;
|
||||
}
|
||||
|
||||
.smtp-copy-button:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
}
|
||||
|
||||
/* Header subtitle enhancements */
|
||||
/* SMTP metadata banner — sits inside content, above the log */
|
||||
.smtp-header-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-text-muted);
|
||||
border-bottom: 1px solid var(--dees-color-border-subtle);
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.smtp-direction-badge {
|
||||
@@ -578,7 +612,7 @@ export class SzMtaDetailView extends DeesElement {
|
||||
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
|
||||
}
|
||||
|
||||
.rejection-card {
|
||||
dees-tile.rejection-card::part(outer) {
|
||||
border-color: ${cssManager.bdTheme('#fecaca', 'rgba(239, 68, 68, 0.3)')};
|
||||
}
|
||||
|
||||
@@ -646,9 +680,11 @@ export class SzMtaDetailView extends DeesElement {
|
||||
<div class="content">
|
||||
<div class="main-content">
|
||||
<!-- Email Metadata -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Email Metadata</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Email Metadata</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="detail-list">
|
||||
@@ -684,49 +720,53 @@ export class SzMtaDetailView extends DeesElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<!-- SMTP Transaction Log -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">SMTP Transaction Log</div>
|
||||
<div class="smtp-header-subtitle">
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">SMTP Transaction Log</span>
|
||||
<span class="smtp-direction-badge ${email.direction}">${email.direction}</span>
|
||||
<span>${email.direction === 'outbound'
|
||||
</div>
|
||||
</div>
|
||||
<div class="smtp-header-subtitle">
|
||||
${email.direction === 'outbound'
|
||||
? `${email.connectionInfo.sourceHostname} → ${email.connectionInfo.destinationIp}:${email.connectionInfo.destinationPort}`
|
||||
: `${email.connectionInfo.sourceIp} → ${email.connectionInfo.sourceHostname}:${email.connectionInfo.destinationPort}`
|
||||
}</span>
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<button class="smtp-copy-button" @click=${() => this.copySmtpLog()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
${this.renderSmtpLog(email)}
|
||||
<div slot="footer" class="card-footer">
|
||||
<button class="tile-button" @click=${() => this.copySmtpLog()}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
|
||||
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
|
||||
</svg>
|
||||
Copy Log
|
||||
</button>
|
||||
</div>
|
||||
${this.renderSmtpLog(email)}
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<!-- Email Body -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Email Body (Escaped)</div>
|
||||
<div class="card-subtitle">Raw content — HTML is not rendered</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Email Body (Escaped)</span>
|
||||
<span class="card-subtitle">Raw content — HTML is not rendered</span>
|
||||
</div>
|
||||
</div>
|
||||
<pre class="email-body-container">${email.body}</pre>
|
||||
</div>
|
||||
</dees-tile>
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<!-- Connection Info -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Connection Info</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Connection Info</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="detail-list">
|
||||
@@ -772,12 +812,14 @@ export class SzMtaDetailView extends DeesElement {
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<!-- Authentication Results -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Authentication Results</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Authentication Results</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="auth-row">
|
||||
@@ -802,13 +844,15 @@ export class SzMtaDetailView extends DeesElement {
|
||||
<span class="auth-badge ${email.authenticationResults.dmarc}">${email.authenticationResults.dmarc}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<!-- Rejection Details (conditional) -->
|
||||
${email.status === 'rejected' || email.status === 'bounced' ? html`
|
||||
<div class="card rejection-card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Rejection Details</div>
|
||||
<dees-tile class="rejection-card">
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Rejection Details</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
${email.rejectionReason ? html`
|
||||
@@ -820,7 +864,7 @@ export class SzMtaDetailView extends DeesElement {
|
||||
<div class="rejection-text">${email.bounceMessage}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,8 +7,7 @@ import {
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import './sz-stat-card.js';
|
||||
import type { IStatsTile } from '@design.estate/dees-catalog';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -91,19 +90,11 @@ export class SzNetworkDomainsView extends DeesElement {
|
||||
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
dees-statsgrid {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
@@ -205,6 +196,42 @@ export class SzNetworkDomainsView extends DeesElement {
|
||||
`,
|
||||
];
|
||||
|
||||
private get tiles(): IStatsTile[] {
|
||||
return [
|
||||
{
|
||||
id: 'total',
|
||||
title: 'Total Domains',
|
||||
value: this.stats.total,
|
||||
type: 'number',
|
||||
icon: 'lucide:globe',
|
||||
},
|
||||
{
|
||||
id: 'valid',
|
||||
title: 'Valid Certificates',
|
||||
value: this.stats.valid,
|
||||
type: 'number',
|
||||
icon: 'lucide:shieldCheck',
|
||||
color: '#22c55e',
|
||||
},
|
||||
{
|
||||
id: 'expiring',
|
||||
title: 'Expiring Soon',
|
||||
value: this.stats.expiring,
|
||||
type: 'number',
|
||||
icon: 'lucide:shieldAlert',
|
||||
color: this.stats.expiring > 0 ? '#f59e0b' : undefined,
|
||||
},
|
||||
{
|
||||
id: 'expired',
|
||||
title: 'Expired/Pending',
|
||||
value: this.stats.expired,
|
||||
type: 'number',
|
||||
icon: 'lucide:circleOff',
|
||||
color: this.stats.expired > 0 ? '#ef4444' : undefined,
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="header">
|
||||
@@ -212,31 +239,10 @@ export class SzNetworkDomainsView extends DeesElement {
|
||||
<button class="sync-button" @click=${() => this.handleSync()}>Sync Cloudflare</button>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<sz-stat-card
|
||||
label="Total Domains"
|
||||
value="${this.stats.total}"
|
||||
icon="server"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Valid Certificates"
|
||||
value="${this.stats.valid}"
|
||||
icon="check"
|
||||
variant="success"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Expiring Soon"
|
||||
value="${this.stats.expiring}"
|
||||
icon="stop"
|
||||
variant="${this.stats.expiring > 0 ? 'warning' : 'default'}"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Expired/Pending"
|
||||
value="${this.stats.expired}"
|
||||
icon="stop"
|
||||
variant="${this.stats.expired > 0 ? 'error' : 'default'}"
|
||||
></sz-stat-card>
|
||||
</div>
|
||||
<dees-statsgrid
|
||||
.tiles=${this.tiles}
|
||||
.minTileWidth=${200}
|
||||
></dees-statsgrid>
|
||||
|
||||
<div class="table-container">
|
||||
<div class="table-header">
|
||||
|
||||
@@ -7,8 +7,7 @@ import {
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import './sz-stat-card.js';
|
||||
import type { IStatsTile } from '@design.estate/dees-catalog';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -113,42 +112,107 @@ export class SzNetworkProxyView extends DeesElement {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
dees-statsgrid {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.stats-grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
dees-tile {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.tile-button.danger {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.tile-button.danger:hover {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@@ -234,61 +298,6 @@ export class SzNetworkProxyView extends DeesElement {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.logs-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
}
|
||||
|
||||
.logs-actions {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.stream-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 6px 12px;
|
||||
background: ${cssManager.bdTheme('#2563eb', '#3b82f6')};
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.stream-button:hover {
|
||||
background: ${cssManager.bdTheme('#1d4ed8', '#2563eb')};
|
||||
}
|
||||
|
||||
.stream-button.streaming {
|
||||
background: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.stream-button.streaming:hover {
|
||||
background: ${cssManager.bdTheme('#b91c1c', '#dc2626')};
|
||||
}
|
||||
|
||||
.clear-button {
|
||||
padding: 6px 12px;
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 4px;
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.clear-button:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
}
|
||||
|
||||
.logs-container {
|
||||
padding: 16px;
|
||||
font-family: monospace;
|
||||
@@ -336,41 +345,57 @@ export class SzNetworkProxyView extends DeesElement {
|
||||
`,
|
||||
];
|
||||
|
||||
private get tiles(): IStatsTile[] {
|
||||
return [
|
||||
{
|
||||
id: 'proxy-status',
|
||||
title: 'Proxy Status',
|
||||
value: this.proxyStatus === 'running' ? 'Running' : 'Stopped',
|
||||
type: 'text',
|
||||
icon: 'lucide:server',
|
||||
color: this.proxyStatus === 'running' ? '#22c55e' : '#ef4444',
|
||||
},
|
||||
{
|
||||
id: 'routes',
|
||||
title: 'Routes',
|
||||
value: this.routeCount,
|
||||
type: 'number',
|
||||
icon: 'lucide:server',
|
||||
},
|
||||
{
|
||||
id: 'certificates',
|
||||
title: 'Certificates',
|
||||
value: this.certificateCount,
|
||||
type: 'number',
|
||||
icon: 'lucide:check',
|
||||
},
|
||||
{
|
||||
id: 'targets',
|
||||
title: 'Targets',
|
||||
value: this.targetCount,
|
||||
type: 'number',
|
||||
icon: 'lucide:server',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="actions">
|
||||
<button class="refresh-button" @click=${() => this.handleRefresh()}>Refresh</button>
|
||||
</div>
|
||||
|
||||
<div class="stats-grid">
|
||||
<sz-stat-card
|
||||
label="Proxy Status"
|
||||
value="${this.proxyStatus === 'running' ? 'Running' : 'Stopped'}"
|
||||
icon="server"
|
||||
variant="${this.proxyStatus === 'running' ? 'success' : 'error'}"
|
||||
valueBadge
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Routes"
|
||||
value="${this.routeCount}"
|
||||
icon="server"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Certificates"
|
||||
value="${this.certificateCount}"
|
||||
icon="check"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Targets"
|
||||
value="${this.targetCount}"
|
||||
icon="server"
|
||||
></sz-stat-card>
|
||||
</div>
|
||||
<dees-statsgrid
|
||||
.tiles=${this.tiles}
|
||||
.minTileWidth=${200}
|
||||
></dees-statsgrid>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Traffic Targets</div>
|
||||
<div class="section-subtitle">Services, registry, and platform services with their routing info</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Traffic Targets</span>
|
||||
<span class="section-subtitle">Services, registry, and platform services with their routing info</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header">
|
||||
<span>Type</span>
|
||||
@@ -388,30 +413,13 @@ export class SzNetworkProxyView extends DeesElement {
|
||||
<span><span class="status-badge ${target.status}">${target.status}</span></span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="logs-header">
|
||||
<div>
|
||||
<div class="section-title">Access Logs</div>
|
||||
<div class="section-subtitle">Real-time Caddy access logs</div>
|
||||
</div>
|
||||
<div class="logs-actions">
|
||||
<button class="stream-button ${this.streaming ? 'streaming' : ''}" @click=${() => this.toggleStreaming()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
||||
${this.streaming
|
||||
? html`<rect x="6" y="6" width="12" height="12" rx="1"/>`
|
||||
: html`<polygon points="5,3 19,12 5,21"/>`
|
||||
}
|
||||
</svg>
|
||||
${this.streaming ? 'Stop' : 'Stream'}
|
||||
</button>
|
||||
<button class="clear-button" @click=${() => this.handleClearLogs()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
|
||||
</svg>
|
||||
Clear logs
|
||||
</button>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Access Logs</span>
|
||||
<span class="section-subtitle">Real-time proxy access logs</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="logs-container">
|
||||
@@ -428,7 +436,24 @@ export class SzNetworkProxyView extends DeesElement {
|
||||
<div class="empty-logs">Click "Stream" to start live access log streaming</div>
|
||||
`}
|
||||
</div>
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button ${this.streaming ? 'danger' : 'primary'}" @click=${() => this.toggleStreaming()}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor">
|
||||
${this.streaming
|
||||
? html`<rect x="6" y="6" width="12" height="12" rx="1"/>`
|
||||
: html`<polygon points="5,3 19,12 5,21"/>`
|
||||
}
|
||||
</svg>
|
||||
${this.streaming ? 'Stop' : 'Stream'}
|
||||
</button>
|
||||
<button class="tile-button" @click=${() => this.handleClearLogs()}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<polyline points="3,6 5,6 21,6"/><path d="M19,6v14a2,2,0,0,1-2,2H7a2,2,0,0,1-2-2V6m3,0V4a2,2,0,0,1,2-2h4a2,2,0,0,1,2,2v2"/>
|
||||
</svg>
|
||||
Clear logs
|
||||
</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -225,39 +225,35 @@ export class SzPlatformServiceDetailView extends DeesElement {
|
||||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section.full-width {
|
||||
dees-tile.full-width {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 14px 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
}
|
||||
|
||||
.section-title svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-shrink: 0;
|
||||
color: var(--dees-color-text-secondary);
|
||||
}
|
||||
|
||||
.section-content {
|
||||
@@ -452,8 +448,8 @@ export class SzPlatformServiceDetailView extends DeesElement {
|
||||
|
||||
<div class="grid">
|
||||
<!-- Connection Info -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
|
||||
@@ -516,11 +512,11 @@ export class SzPlatformServiceDetailView extends DeesElement {
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<!-- Configuration -->
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<circle cx="12" cy="12" r="3"></circle>
|
||||
@@ -537,12 +533,12 @@ export class SzPlatformServiceDetailView extends DeesElement {
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<!-- Metrics -->
|
||||
${this.service.metrics ? html`
|
||||
<div class="section full-width">
|
||||
<div class="section-header">
|
||||
<dees-tile class="full-width">
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-title">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="18" y1="20" x2="18" y2="10"></line>
|
||||
@@ -583,7 +579,7 @@ export class SzPlatformServiceDetailView extends DeesElement {
|
||||
` : ''}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
` : ''}
|
||||
|
||||
<!-- Logs -->
|
||||
|
||||
@@ -29,7 +29,7 @@ export class SzPlatformServicesCard extends DeesElement {
|
||||
.services=${[
|
||||
{ name: 'MongoDB', status: '1 DB', running: true },
|
||||
{ name: 'S3 Storage (MinIO)', status: '1 bucket', running: true },
|
||||
{ name: 'Caddy Reverse Proxy', status: 'Running', running: true },
|
||||
{ name: 'SmartProxy Reverse Proxy', status: 'Running', running: true },
|
||||
{ name: 'ClickHouse', status: '1 DB', running: true },
|
||||
]}
|
||||
></sz-platform-services-card>
|
||||
|
||||
@@ -56,19 +56,13 @@ export interface IRouteSecurity {
|
||||
}
|
||||
|
||||
export interface IRouteMetadata {
|
||||
securityProfileRef?: string;
|
||||
sourceProfileRef?: string;
|
||||
networkTargetRef?: string;
|
||||
securityProfileName?: string;
|
||||
sourceProfileName?: string;
|
||||
networkTargetName?: string;
|
||||
lastResolvedAt?: number;
|
||||
}
|
||||
|
||||
export interface IRouteVpn {
|
||||
enabled: boolean;
|
||||
mandatory?: boolean;
|
||||
allowedServerDefinedClientTags?: string[];
|
||||
}
|
||||
|
||||
export interface IRouteConfig {
|
||||
id?: string;
|
||||
match: IRouteMatch;
|
||||
@@ -76,7 +70,8 @@ export interface IRouteConfig {
|
||||
security?: IRouteSecurity;
|
||||
headers?: { request?: Record<string, string>; response?: Record<string, string> };
|
||||
metadata?: IRouteMetadata;
|
||||
vpn?: IRouteVpn;
|
||||
/** When true, only VPN clients whose TargetProfile matches this route get access */
|
||||
vpnOnly?: boolean;
|
||||
name?: string;
|
||||
description?: string;
|
||||
priority?: number;
|
||||
@@ -143,13 +138,9 @@ export class SzRouteCard extends DeesElement {
|
||||
rateLimit: { enabled: true, maxRequests: 100, window: 60 },
|
||||
maxConnections: 1000,
|
||||
},
|
||||
vpn: {
|
||||
enabled: true,
|
||||
mandatory: true,
|
||||
allowedServerDefinedClientTags: ['admin', 'devops'],
|
||||
},
|
||||
vpnOnly: true,
|
||||
metadata: {
|
||||
securityProfileName: 'STANDARD',
|
||||
sourceProfileName: 'STANDARD',
|
||||
networkTargetName: 'LOSSLESS_INFRA',
|
||||
},
|
||||
} satisfies IRouteConfig}
|
||||
@@ -172,26 +163,25 @@ export class SzRouteCard extends DeesElement {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
dees-tile::part(outer) {
|
||||
transition: border-color 200ms ease, box-shadow 200ms ease;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
dees-tile:hover::part(outer) {
|
||||
border-color: var(--dees-color-border-strong);
|
||||
box-shadow: 0 2px 8px ${cssManager.bdTheme('rgba(0,0,0,0.06)', 'rgba(0,0,0,0.2)')};
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 4px;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
@@ -199,6 +189,7 @@ export class SzRouteCard extends DeesElement {
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
@@ -218,9 +209,10 @@ export class SzRouteCard extends DeesElement {
|
||||
}
|
||||
|
||||
.route-name {
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -262,6 +254,10 @@ export class SzRouteCard extends DeesElement {
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.card-body {
|
||||
padding: 16px 20px;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
@@ -305,7 +301,7 @@ export class SzRouteCard extends DeesElement {
|
||||
padding: 10px 14px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 0 6px 6px 0;
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#101010')};
|
||||
}
|
||||
|
||||
.section:last-of-type {
|
||||
@@ -512,43 +508,52 @@ export class SzRouteCard extends DeesElement {
|
||||
color: ${cssManager.bdTheme('#0e7490', '#22d3ee')};
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
.card-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
margin-top: 14px;
|
||||
padding-top: 12px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#f4f4f5', '#1a1a1a')};
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 5px 12px;
|
||||
border-radius: 6px;
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
color: ${cssManager.bdTheme('#52525b', '#a1a1aa')};
|
||||
transition: all 150ms ease;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.action-btn:hover {
|
||||
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.action-btn.edit:hover {
|
||||
border-color: ${cssManager.bdTheme('#93c5fd', 'rgba(59, 130, 246, 0.5)')};
|
||||
color: ${cssManager.bdTheme('#2563eb', '#60a5fa')};
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.action-btn.delete:hover {
|
||||
border-color: ${cssManager.bdTheme('#fca5a5', 'rgba(239, 68, 68, 0.5)')};
|
||||
.tile-button.edit:hover {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
}
|
||||
|
||||
.tile-button.delete:hover {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#f87171')};
|
||||
}
|
||||
`,
|
||||
@@ -556,7 +561,11 @@ export class SzRouteCard extends DeesElement {
|
||||
|
||||
public render(): TemplateResult {
|
||||
if (!this.route) {
|
||||
return html`<div class="card"><div class="no-route">No route data</div></div>`;
|
||||
return html`
|
||||
<dees-tile>
|
||||
<div class="card-body"><div class="no-route">No route data</div></div>
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
|
||||
const r = this.route;
|
||||
@@ -566,9 +575,9 @@ export class SzRouteCard extends DeesElement {
|
||||
const security = r.security;
|
||||
|
||||
return html`
|
||||
<div class="card">
|
||||
<dees-tile>
|
||||
<!-- Header -->
|
||||
<div class="header">
|
||||
<div slot="header" class="header">
|
||||
<div class="header-left">
|
||||
<span class="status-dot ${isEnabled ? 'enabled' : 'disabled'}"></span>
|
||||
<span class="route-name">${r.name || r.id || 'Unnamed Route'}</span>
|
||||
@@ -579,6 +588,7 @@ export class SzRouteCard extends DeesElement {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-body">
|
||||
${r.description ? html`<div class="description">${r.description}</div>` : ''}
|
||||
|
||||
<div class="meta-row">
|
||||
@@ -752,11 +762,12 @@ export class SzRouteCard extends DeesElement {
|
||||
|
||||
<!-- Feature Icons Row -->
|
||||
${this.renderFeatures()}
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
${this.showActions ? html`
|
||||
<div class="card-actions">
|
||||
<button class="action-btn edit" @click=${(e: Event) => {
|
||||
<div slot="footer" class="card-footer">
|
||||
<button class="tile-button edit" @click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.dispatchEvent(new CustomEvent('route-edit', {
|
||||
detail: this.route,
|
||||
@@ -764,7 +775,7 @@ export class SzRouteCard extends DeesElement {
|
||||
composed: true,
|
||||
}));
|
||||
}}>Edit</button>
|
||||
<button class="action-btn delete" @click=${(e: Event) => {
|
||||
<button class="tile-button delete" @click=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.dispatchEvent(new CustomEvent('route-delete', {
|
||||
detail: this.route,
|
||||
@@ -774,7 +785,7 @@ export class SzRouteCard extends DeesElement {
|
||||
}}>Delete</button>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
|
||||
@@ -787,8 +798,7 @@ export class SzRouteCard extends DeesElement {
|
||||
}
|
||||
|
||||
private renderVpn(): TemplateResult {
|
||||
const vpn = this.route?.vpn;
|
||||
if (!vpn?.enabled) return html``;
|
||||
if (!this.route?.vpnOnly) return html``;
|
||||
|
||||
return html`
|
||||
<div class="section vpn">
|
||||
@@ -796,21 +806,9 @@ export class SzRouteCard extends DeesElement {
|
||||
<div class="field-row">
|
||||
<span class="field-key">Mode</span>
|
||||
<span class="field-value">
|
||||
<span class="vpn-badge ${vpn.mandatory !== false ? 'mandatory' : 'optional'}">
|
||||
${vpn.mandatory !== false ? 'VPN Mandatory' : 'VPN Voluntary'}
|
||||
</span>
|
||||
<span class="vpn-badge mandatory">VPN Only</span>
|
||||
</span>
|
||||
</div>
|
||||
${vpn.allowedServerDefinedClientTags?.length ? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Tags</span>
|
||||
<span class="field-value">
|
||||
${vpn.allowedServerDefinedClientTags.map(
|
||||
(tag) => html`<span class="vpn-tag">${tag}</span>`
|
||||
)}
|
||||
</span>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -818,7 +816,7 @@ export class SzRouteCard extends DeesElement {
|
||||
private renderLinked(): TemplateResult {
|
||||
const meta = this.route?.metadata;
|
||||
if (!meta) return html``;
|
||||
const hasProfile = !!meta.securityProfileName;
|
||||
const hasProfile = !!meta.sourceProfileName;
|
||||
const hasTarget = !!meta.networkTargetName;
|
||||
if (!hasProfile && !hasTarget) return html``;
|
||||
|
||||
@@ -829,7 +827,7 @@ export class SzRouteCard extends DeesElement {
|
||||
? html`
|
||||
<div class="field-row">
|
||||
<span class="field-key">Profile</span>
|
||||
<span class="field-value"><span class="linked-name">${meta.securityProfileName}</span></span>
|
||||
<span class="field-value"><span class="linked-name">${meta.sourceProfileName}</span></span>
|
||||
</div>
|
||||
`
|
||||
: ''}
|
||||
@@ -868,10 +866,10 @@ export class SzRouteCard extends DeesElement {
|
||||
if (headers) {
|
||||
features.push(html`<span class="feature"><span class="feature-icon">⚙</span>Headers</span>`);
|
||||
}
|
||||
if (this.route?.vpn?.enabled) {
|
||||
if (this.route?.vpnOnly) {
|
||||
features.push(html`<span class="feature"><span class="feature-icon">🔐</span>VPN</span>`);
|
||||
}
|
||||
if (meta?.securityProfileName || meta?.networkTargetName) {
|
||||
if (meta?.sourceProfileName || meta?.networkTargetName) {
|
||||
features.push(html`<span class="feature"><span class="feature-icon">🔗</span>Linked</span>`);
|
||||
}
|
||||
|
||||
|
||||
@@ -11,8 +11,6 @@ import {
|
||||
|
||||
import type { IExecutionEnvironment } from '@design.estate/dees-catalog';
|
||||
|
||||
import './sz-stat-card.js';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-service-detail-view': SzServiceDetailView;
|
||||
@@ -218,31 +216,97 @@ export class SzServiceDetailView extends DeesElement {
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
.card-header {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 8px 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
.card-heading {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.card-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.tile-button.danger {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.tile-button.danger:hover {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.1)')};
|
||||
}
|
||||
|
||||
.card-content {
|
||||
@@ -518,12 +582,11 @@ export class SzServiceDetailView extends DeesElement {
|
||||
|
||||
<div class="content">
|
||||
<div class="main-content">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Service Details</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Service Details</span>
|
||||
</div>
|
||||
<button class="action-button" style="width: auto; padding: 6px 12px;" @click=${() => this.handleEdit()}>Edit</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="detail-list">
|
||||
@@ -557,7 +620,10 @@ export class SzServiceDetailView extends DeesElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="card-footer">
|
||||
<button class="tile-button primary" @click=${() => this.handleEdit()}>Edit</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<dees-chart-log
|
||||
.label=${'Service Logs'}
|
||||
@@ -573,9 +639,11 @@ export class SzServiceDetailView extends DeesElement {
|
||||
</div>
|
||||
|
||||
<div class="sidebar">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div class="card-title">Live stats</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Live stats</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="stats-grid">
|
||||
@@ -598,13 +666,13 @@ export class SzServiceDetailView extends DeesElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Actions</div>
|
||||
<div class="card-subtitle">Manage service state</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Actions</span>
|
||||
<span class="card-subtitle">Manage service state</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
@@ -624,13 +692,13 @@ export class SzServiceDetailView extends DeesElement {
|
||||
<button class="action-button danger" @click=${() => this.handleAction('delete')}>Delete Service</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Image Source</div>
|
||||
<div class="card-subtitle">${this.service.registry === 'Docker Hub' ? 'External container registry' : 'Onebox registry'}</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Image Source</span>
|
||||
<span class="card-subtitle">${this.service.registry === 'Docker Hub' ? 'External container registry' : 'Onebox registry'}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
@@ -649,21 +717,14 @@ export class SzServiceDetailView extends DeesElement {
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<div>
|
||||
<div class="card-title">Backups</div>
|
||||
<div class="card-subtitle">Create and manage service backups</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="card-header">
|
||||
<div class="card-heading">
|
||||
<span class="card-title">Backups</span>
|
||||
<span class="card-subtitle">Create and manage service backups</span>
|
||||
</div>
|
||||
<button class="action-button" style="width: auto; padding: 6px 12px;" @click=${() => this.handleCreateBackup()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 4px;">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Create Backup
|
||||
</button>
|
||||
</div>
|
||||
<div class="card-content">
|
||||
<div class="backup-list">
|
||||
@@ -698,7 +759,16 @@ export class SzServiceDetailView extends DeesElement {
|
||||
`)}
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="card-footer">
|
||||
<button class="tile-button primary" @click=${() => this.handleCreateBackup()}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Create Backup
|
||||
</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
@@ -65,71 +65,94 @@ export class SzServicesBackupsView extends DeesElement {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
dees-tile {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-info {
|
||||
.section-heading {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.header-actions {
|
||||
.section-footer {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.action-button {
|
||||
display: inline-flex;
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.action-button:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.action-button.primary {
|
||||
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
border: none;
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.action-button.primary:hover {
|
||||
opacity: 0.9;
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.table-header {
|
||||
@@ -253,28 +276,11 @@ export class SzServicesBackupsView extends DeesElement {
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-info">
|
||||
<div class="section-title">Backup Schedules</div>
|
||||
<div class="section-subtitle">Configure automated backup schedules for your services</div>
|
||||
</div>
|
||||
<div class="header-actions">
|
||||
<button class="action-button" @click=${() => this.handleImport()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17 8 12 3 7 8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
Import Backup
|
||||
</button>
|
||||
<button class="action-button primary" @click=${() => this.handleCreateSchedule()}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Create Schedule
|
||||
</button>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Backup Schedules</span>
|
||||
<span class="section-subtitle">Configure automated backup schedules for your services</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header schedules-header">
|
||||
@@ -318,13 +324,30 @@ export class SzServicesBackupsView extends DeesElement {
|
||||
</span>
|
||||
</div>
|
||||
`)}
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button" @click=${() => this.handleImport()}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17 8 12 3 7 8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
Import Backup
|
||||
</button>
|
||||
<button class="tile-button primary" @click=${() => this.handleCreateSchedule()}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Create Schedule
|
||||
</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-info">
|
||||
<div class="section-title">All Backups</div>
|
||||
<div class="section-subtitle">Browse and manage all backups across services</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">All Backups</span>
|
||||
<span class="section-subtitle">Browse and manage all backups across services</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-header backups-header">
|
||||
@@ -358,7 +381,7 @@ export class SzServicesBackupsView extends DeesElement {
|
||||
</span>
|
||||
</div>
|
||||
`)}
|
||||
</div>
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -72,28 +72,98 @@ export class SzSettingsView extends DeesElement {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
dees-tile {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
margin-bottom: 16px;
|
||||
height: 36px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-heading {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-top: 2px;
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.section-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.section-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.form-group {
|
||||
@@ -224,53 +294,19 @@ export class SzSettingsView extends DeesElement {
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding-top: 16px;
|
||||
border-top: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.button {
|
||||
padding: 10px 20px;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.button.secondary {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
}
|
||||
|
||||
.button.secondary:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
}
|
||||
|
||||
.button.primary {
|
||||
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
border: none;
|
||||
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
}
|
||||
|
||||
.button.primary:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Appearance</div>
|
||||
<div class="section-subtitle">Customize the look and feel</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Appearance</span>
|
||||
<span class="section-subtitle">Customize the look and feel</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Dark Mode</span>
|
||||
@@ -279,12 +315,16 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="toggle-switch ${this.settings.darkMode ? 'active' : ''}" @click=${() => this.toggleDarkMode()}></div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Cloudflare Integration</div>
|
||||
<div class="section-subtitle">Configure Cloudflare API for DNS management</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Cloudflare Integration</span>
|
||||
<span class="section-subtitle">Configure Cloudflare API for DNS management</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="input-group">
|
||||
<div class="form-group">
|
||||
<div class="field-label">API Token</div>
|
||||
@@ -297,12 +337,16 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="form-hint">Get your API token from the Cloudflare dashboard with DNS edit permissions.</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">SSL/TLS Settings</div>
|
||||
<div class="section-subtitle">Configure certificate management</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">SSL/TLS Settings</span>
|
||||
<span class="section-subtitle">Configure certificate management</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="form-row">
|
||||
<div class="form-label-group">
|
||||
<span class="form-label">Auto-Renew Certificates</span>
|
||||
@@ -321,12 +365,16 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="form-hint">Email address for Let's Encrypt notifications.</div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Network Settings</div>
|
||||
<div class="section-subtitle">Configure network and proxy settings</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Network Settings</span>
|
||||
<span class="section-subtitle">Configure network and proxy settings</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="input-row">
|
||||
<div class="form-group">
|
||||
<div class="field-label">HTTP Port</div>
|
||||
@@ -345,12 +393,16 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="toggle-switch ${this.settings.forceHttps ? 'active' : ''}" @click=${() => this.toggleSetting('forceHttps')}></div>
|
||||
</div>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-title">Account</div>
|
||||
<div class="section-subtitle">Manage your account settings</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Account</span>
|
||||
<span class="section-subtitle">Manage your account settings</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-content">
|
||||
<div class="form-group">
|
||||
<div class="field-label">Current User</div>
|
||||
<div style="font-size: 14px; color: ${cssManager.bdTheme('#18181b', '#fafafa')};">${this.currentUser || 'Unknown'}</div>
|
||||
@@ -370,15 +422,23 @@ export class SzSettingsView extends DeesElement {
|
||||
<div class="field-label">Confirm Password</div>
|
||||
<input type="password" id="confirmPassword">
|
||||
</div>
|
||||
<button class="button secondary" style="width: fit-content;" @click=${() => this.handleChangePassword()}>Update Password</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button" @click=${() => this.handleChangePassword()}>Update Password</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<div class="actions">
|
||||
<button class="button secondary" @click=${() => this.handleReset()}>Reset</button>
|
||||
<button class="button primary" @click=${() => this.handleSave()}>Save Settings</button>
|
||||
<dees-tile>
|
||||
<div class="section-content" style="padding: 12px 16px; text-align: center; color: var(--dees-color-text-muted); font-size: 12px;">
|
||||
Save your changes or reset to defaults.
|
||||
</div>
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button" @click=${() => this.handleReset()}>Reset</button>
|
||||
<button class="tile-button primary" @click=${() => this.handleSave()}>Save Settings</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,189 +0,0 @@
|
||||
import {
|
||||
DeesElement,
|
||||
customElement,
|
||||
html,
|
||||
css,
|
||||
cssManager,
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
'sz-stat-card': SzStatCard;
|
||||
}
|
||||
}
|
||||
|
||||
@customElement('sz-stat-card')
|
||||
export class SzStatCard extends DeesElement {
|
||||
public static demo = () => html`
|
||||
<style>
|
||||
.demo-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
padding: 24px;
|
||||
max-width: 800px;
|
||||
}
|
||||
</style>
|
||||
<div class="demo-grid">
|
||||
<sz-stat-card
|
||||
label="Total Services"
|
||||
value="7"
|
||||
icon="server"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Running"
|
||||
value="7"
|
||||
icon="check"
|
||||
variant="success"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Stopped"
|
||||
value="0"
|
||||
icon="stop"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Docker"
|
||||
value="Running"
|
||||
icon="container"
|
||||
variant="success"
|
||||
valueBadge
|
||||
></sz-stat-card>
|
||||
</div>
|
||||
`;
|
||||
|
||||
public static demoGroups = ['Dashboard'];
|
||||
|
||||
@property({ type: String })
|
||||
public accessor label: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor value: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor icon: string = '';
|
||||
|
||||
@property({ type: String })
|
||||
public accessor variant: 'default' | 'success' | 'warning' | 'error' = 'default';
|
||||
|
||||
@property({ type: Boolean })
|
||||
public accessor valueBadge: boolean = false;
|
||||
|
||||
public static styles = [
|
||||
cssManager.defaultStyles,
|
||||
css`
|
||||
:host {
|
||||
display: block;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
transition: all 200ms ease;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.card:hover {
|
||||
border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')};
|
||||
box-shadow: 0 4px 12px ${cssManager.bdTheme('rgba(0,0,0,0.05)', 'rgba(0,0,0,0.2)')};
|
||||
}
|
||||
|
||||
.header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
|
||||
.value {
|
||||
font-size: 28px;
|
||||
font-weight: 700;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
.value.success {
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.value.warning {
|
||||
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
|
||||
}
|
||||
|
||||
.value.error {
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 12px;
|
||||
border-radius: 9999px;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge.success {
|
||||
background: ${cssManager.bdTheme('#dcfce7', 'rgba(34, 197, 94, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#16a34a', '#22c55e')};
|
||||
}
|
||||
|
||||
.badge.warning {
|
||||
background: ${cssManager.bdTheme('#fef9c3', 'rgba(250, 204, 21, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#ca8a04', '#facc15')};
|
||||
}
|
||||
|
||||
.badge.error {
|
||||
background: ${cssManager.bdTheme('#fee2e2', 'rgba(239, 68, 68, 0.2)')};
|
||||
color: ${cssManager.bdTheme('#dc2626', '#ef4444')};
|
||||
}
|
||||
|
||||
.badge.default {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#27272a')};
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
const valueClass = this.valueBadge ? `badge ${this.variant}` : `value ${this.variant}`;
|
||||
|
||||
return html`
|
||||
<div class="card">
|
||||
<div class="header">
|
||||
<span class="label">${this.label}</span>
|
||||
${this.renderIcon()}
|
||||
</div>
|
||||
<div class="${valueClass}">${this.value}</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
|
||||
private renderIcon(): TemplateResult {
|
||||
const icons: Record<string, TemplateResult> = {
|
||||
server: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><rect x="2" y="2" width="20" height="8" rx="2" ry="2"></rect><rect x="2" y="14" width="20" height="8" rx="2" ry="2"></rect><line x1="6" y1="6" x2="6.01" y2="6"></line><line x1="6" y1="18" x2="6.01" y2="18"></line></svg>`,
|
||||
check: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><polyline points="20 6 9 17 4 12"></polyline></svg>`,
|
||||
stop: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"></circle><line x1="10" y1="15" x2="10" y2="9"></line><line x1="14" y1="15" x2="14" y2="9"></line></svg>`,
|
||||
container: html`<svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2"><path d="M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z"></path></svg>`,
|
||||
};
|
||||
|
||||
return icons[this.icon] || html``;
|
||||
}
|
||||
}
|
||||
@@ -7,8 +7,7 @@ import {
|
||||
property,
|
||||
type TemplateResult,
|
||||
} from '@design.estate/dees-element';
|
||||
|
||||
import './sz-stat-card.js';
|
||||
import type { IStatsTile } from '@design.estate/dees-catalog';
|
||||
|
||||
declare global {
|
||||
interface HTMLElementTagNameMap {
|
||||
@@ -54,54 +53,51 @@ export class SzStatusGridCluster extends DeesElement {
|
||||
:host {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 16px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.grid > * {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.grid {
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
}
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
private get tiles(): IStatsTile[] {
|
||||
return [
|
||||
{
|
||||
id: 'total',
|
||||
title: 'Total Services',
|
||||
value: this.stats.totalServices,
|
||||
type: 'number',
|
||||
icon: 'lucide:server',
|
||||
},
|
||||
{
|
||||
id: 'running',
|
||||
title: 'Running',
|
||||
value: this.stats.running,
|
||||
type: 'number',
|
||||
icon: 'lucide:check',
|
||||
color: '#22c55e',
|
||||
},
|
||||
{
|
||||
id: 'stopped',
|
||||
title: 'Stopped',
|
||||
value: this.stats.stopped,
|
||||
type: 'number',
|
||||
icon: 'lucide:circleStop',
|
||||
color: this.stats.stopped > 0 ? '#f59e0b' : undefined,
|
||||
},
|
||||
{
|
||||
id: 'docker',
|
||||
title: 'Docker',
|
||||
value: this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped',
|
||||
type: 'text',
|
||||
icon: 'lucide:container',
|
||||
color: this.stats.dockerStatus === 'running' ? '#22c55e' : '#ef4444',
|
||||
},
|
||||
];
|
||||
}
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="grid">
|
||||
<sz-stat-card
|
||||
label="Total Services"
|
||||
value="${this.stats.totalServices}"
|
||||
icon="server"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Running"
|
||||
value="${this.stats.running}"
|
||||
icon="check"
|
||||
variant="success"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Stopped"
|
||||
value="${this.stats.stopped}"
|
||||
icon="stop"
|
||||
variant="${this.stats.stopped > 0 ? 'warning' : 'default'}"
|
||||
></sz-stat-card>
|
||||
<sz-stat-card
|
||||
label="Docker"
|
||||
value="${this.stats.dockerStatus === 'running' ? 'Running' : 'Stopped'}"
|
||||
icon="container"
|
||||
variant="${this.stats.dockerStatus === 'running' ? 'success' : 'error'}"
|
||||
valueBadge
|
||||
></sz-stat-card>
|
||||
</div>
|
||||
<dees-statsgrid
|
||||
.tiles=${this.tiles}
|
||||
.minTileWidth=${200}
|
||||
></dees-statsgrid>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@ export class SzStatusGridServices extends DeesElement {
|
||||
return html`
|
||||
<div class="grid">
|
||||
<sz-resource-usage-card
|
||||
.usage=${this.resourceUsage}
|
||||
.data=${this.resourceUsage}
|
||||
></sz-resource-usage-card>
|
||||
<sz-platform-services-card
|
||||
.services=${this.platformServices}
|
||||
|
||||
@@ -55,56 +55,94 @@ export class SzTokensView extends DeesElement {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.section {
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 8px;
|
||||
dees-tile {
|
||||
display: block;
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
height: 36px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: flex-start;
|
||||
padding: 16px;
|
||||
border-bottom: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
align-items: center;
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section-info {
|
||||
.section-heading {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
align-items: baseline;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
letter-spacing: -0.01em;
|
||||
color: var(--dees-color-text-secondary);
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.section-subtitle {
|
||||
font-size: 13px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
font-size: 12px;
|
||||
color: var(--dees-color-text-muted);
|
||||
letter-spacing: -0.01em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.create-button {
|
||||
display: inline-flex;
|
||||
.section-footer {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
gap: 0;
|
||||
height: 36px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.tile-button {
|
||||
padding: 0 16px;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
transition: all 0.15s ease;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-left: 1px solid var(--dees-color-border-subtle);
|
||||
color: var(--dees-color-text-muted);
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.create-button:hover {
|
||||
opacity: 0.9;
|
||||
.tile-button:first-child {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
.tile-button:hover {
|
||||
background: var(--dees-color-hover);
|
||||
color: var(--dees-color-text-primary);
|
||||
}
|
||||
|
||||
.tile-button.primary {
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8%)', 'hsl(213.1 93.9% 67.8%)')};
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.tile-button.primary:hover {
|
||||
background: ${cssManager.bdTheme('hsl(217.2 91.2% 59.8% / 0.08)', 'hsl(213.1 93.9% 67.8% / 0.08)')};
|
||||
color: ${cssManager.bdTheme('hsl(217.2 91.2% 50%)', 'hsl(213.1 93.9% 75%)')};
|
||||
}
|
||||
|
||||
.token-list {
|
||||
@@ -192,45 +230,18 @@ export class SzTokensView extends DeesElement {
|
||||
.empty-text {
|
||||
font-size: 14px;
|
||||
color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.empty-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 8px 14px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#09090b')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')};
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: ${cssManager.bdTheme('#18181b', '#fafafa')};
|
||||
cursor: pointer;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
.empty-button:hover {
|
||||
background: ${cssManager.bdTheme('#f4f4f5', '#18181b')};
|
||||
}
|
||||
`,
|
||||
];
|
||||
|
||||
public render(): TemplateResult {
|
||||
return html`
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-info">
|
||||
<div class="section-title">Global Tokens</div>
|
||||
<div class="section-subtitle">Tokens that can push images to multiple services</div>
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">Global Tokens</span>
|
||||
<span class="section-subtitle">Tokens that can push images to multiple services</span>
|
||||
</div>
|
||||
<button class="create-button" @click=${() => this.handleCreate('global')}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Create Token
|
||||
</button>
|
||||
</div>
|
||||
${this.globalTokens.length > 0 ? html`
|
||||
<div class="token-list">
|
||||
@@ -239,25 +250,26 @@ export class SzTokensView extends DeesElement {
|
||||
` : html`
|
||||
<div class="empty-state">
|
||||
<div class="empty-text">No global tokens created</div>
|
||||
<button class="empty-button" @click=${() => this.handleCreate('global')}>Create Global Token</button>
|
||||
</div>
|
||||
`}
|
||||
</div>
|
||||
|
||||
<div class="section">
|
||||
<div class="section-header">
|
||||
<div class="section-info">
|
||||
<div class="section-title">CI Tokens (Service-specific)</div>
|
||||
<div class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</div>
|
||||
</div>
|
||||
<button class="create-button" @click=${() => this.handleCreate('ci')}>
|
||||
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button primary" @click=${() => this.handleCreate('global')}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Create Token
|
||||
</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
|
||||
<dees-tile>
|
||||
<div slot="header" class="section-header">
|
||||
<div class="section-heading">
|
||||
<span class="section-title">CI Tokens (Service-specific)</span>
|
||||
<span class="section-subtitle">Tokens tied to individual services for CI/CD pipelines</span>
|
||||
</div>
|
||||
</div>
|
||||
${this.ciTokens.length > 0 ? html`
|
||||
<div class="token-list">
|
||||
${this.ciTokens.map(token => this.renderToken(token))}
|
||||
@@ -265,10 +277,18 @@ export class SzTokensView extends DeesElement {
|
||||
` : html`
|
||||
<div class="empty-state">
|
||||
<div class="empty-text">No CI tokens created</div>
|
||||
<button class="empty-button" @click=${() => this.handleCreate('ci')}>Create CI Token</button>
|
||||
</div>
|
||||
`}
|
||||
<div slot="footer" class="section-footer">
|
||||
<button class="tile-button primary" @click=${() => this.handleCreate('ci')}>
|
||||
<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<line x1="12" y1="5" x2="12" y2="19"></line>
|
||||
<line x1="5" y1="12" x2="19" y2="12"></line>
|
||||
</svg>
|
||||
Create Token
|
||||
</button>
|
||||
</div>
|
||||
</dees-tile>
|
||||
`;
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user