update
This commit is contained in:
@@ -39,6 +39,9 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
|
||||
@property({ type: Boolean })
|
||||
public loading: boolean = false;
|
||||
|
||||
@property({ type: Boolean })
|
||||
public expanded: boolean = false;
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
@@ -64,106 +67,151 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
.controls {
|
||||
display: flex;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
margin-bottom: ${unsafeCSS(spacing.lg)};
|
||||
margin-bottom: ${unsafeCSS(spacing.md)};
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
min-width: 240px;
|
||||
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
min-width: 200px;
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
background: ${colors.background.primary};
|
||||
color: ${colors.text.primary};
|
||||
font-size: 14px;
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
font-size: 13px;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
transition: all 0.2s ease;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.search-input:focus {
|
||||
outline: none;
|
||||
border-color: ${colors.text.primary};
|
||||
box-shadow: 0 0 0 3px ${cssManager.bdTheme('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)')};
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.search-input::placeholder {
|
||||
color: ${colors.text.muted};
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
}
|
||||
|
||||
.filter-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.sm)};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
background: transparent;
|
||||
color: ${colors.text.primary};
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-size: 13px;
|
||||
font-weight: 400;
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
transition: all 0.2s ease;
|
||||
height: 36px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.filter-button:hover {
|
||||
background: ${colors.background.secondary};
|
||||
border-color: ${colors.border.muted};
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.filter-button:active {
|
||||
transform: translateY(0);
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.filter-button.active {
|
||||
background: ${colors.text.primary};
|
||||
color: ${colors.background.primary};
|
||||
border-color: ${colors.text.primary};
|
||||
background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.filter-button.active:hover {
|
||||
background: ${cssManager.bdTheme('#262626', '#f4f4f5')};
|
||||
border-color: ${cssManager.bdTheme('#262626', '#f4f4f5')};
|
||||
.selected-services {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
|
||||
.service-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
font-size: 13px;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.service-pill:hover {
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.service-pill .status-dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.manage-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: ${unsafeCSS(spacing.xs)};
|
||||
padding: ${unsafeCSS(spacing.xs)} ${unsafeCSS(spacing.md)};
|
||||
background: transparent;
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
|
||||
font-family: ${unsafeCSS(fonts.base)};
|
||||
}
|
||||
|
||||
.manage-button:hover {
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
}
|
||||
|
||||
.expandable-section {
|
||||
margin-top: ${unsafeCSS(spacing.lg)};
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.expandable-content {
|
||||
padding: ${unsafeCSS(spacing.lg)};
|
||||
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
}
|
||||
|
||||
.assets-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
background: ${colors.background.card};
|
||||
padding: ${unsafeCSS(spacing.lg)};
|
||||
border-radius: ${unsafeCSS(borderRadius.md)};
|
||||
border: 1px solid ${colors.border.default};
|
||||
min-height: 200px;
|
||||
box-shadow: ${unsafeCSS(shadows.sm)};
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
}
|
||||
|
||||
.asset-card {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
background: ${colors.background.secondary};
|
||||
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
|
||||
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
|
||||
border-radius: ${unsafeCSS(borderRadius.base)};
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
border: 1px solid ${colors.border.default};
|
||||
gap: ${unsafeCSS(spacing.md)};
|
||||
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
|
||||
gap: ${unsafeCSS(spacing.sm)};
|
||||
}
|
||||
|
||||
.asset-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: ${unsafeCSS(shadows.md)};
|
||||
border-color: ${colors.border.muted};
|
||||
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
|
||||
}
|
||||
|
||||
.asset-card.selected {
|
||||
border-color: ${colors.text.primary};
|
||||
background: ${colors.background.muted};
|
||||
box-shadow: 0 0 0 1px ${colors.text.primary};
|
||||
border-color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
|
||||
background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
|
||||
}
|
||||
|
||||
.asset-checkbox {
|
||||
@@ -209,11 +257,11 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
border-radius: ${unsafeCSS(borderRadius.full)};
|
||||
}
|
||||
|
||||
.status-indicator.operational { background: ${colors.status.operational}; }
|
||||
.status-indicator.degraded { background: ${colors.status.degraded}; }
|
||||
.status-indicator.partial_outage { background: ${colors.status.partial}; }
|
||||
.status-indicator.major_outage { background: ${colors.status.major}; }
|
||||
.status-indicator.maintenance { background: ${colors.status.maintenance}; }
|
||||
.status-indicator.operational, .status-dot.operational { background: ${cssManager.bdTheme('#10b981', '#10b981')}; }
|
||||
.status-indicator.degraded, .status-dot.degraded { background: ${cssManager.bdTheme('#f59e0b', '#f59e0b')}; }
|
||||
.status-indicator.partial_outage, .status-dot.partial_outage { background: ${cssManager.bdTheme('#ef4444', '#ef4444')}; }
|
||||
.status-indicator.major_outage, .status-dot.major_outage { background: ${cssManager.bdTheme('#dc2626', '#dc2626')}; }
|
||||
.status-indicator.maintenance, .status-dot.maintenance { background: ${cssManager.bdTheme('#3b82f6', '#3b82f6')}; }
|
||||
|
||||
.status-text {
|
||||
font-size: 12px;
|
||||
@@ -225,15 +273,23 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
.no-results {
|
||||
grid-column: 1 / -1;
|
||||
text-align: center;
|
||||
padding: ${unsafeCSS(spacing['2xl'])};
|
||||
color: ${colors.text.secondary};
|
||||
padding: ${unsafeCSS(spacing.xl)};
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.summary {
|
||||
text-align: right;
|
||||
font-size: 13px;
|
||||
font-size: 12px;
|
||||
margin-top: ${unsafeCSS(spacing.md)};
|
||||
color: ${colors.text.secondary};
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
}
|
||||
|
||||
.no-services {
|
||||
padding: ${unsafeCSS(spacing.xl)};
|
||||
text-align: center;
|
||||
color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
@@ -250,9 +306,21 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.selected-services {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.service-pill {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.expandable-content {
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
}
|
||||
|
||||
.assets-grid {
|
||||
grid-template-columns: 1fr;
|
||||
padding: ${unsafeCSS(spacing.md)};
|
||||
}
|
||||
|
||||
.asset-card {
|
||||
@@ -263,102 +331,124 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
]
|
||||
|
||||
public render(): TemplateResult {
|
||||
const filteredServices = this.getFilteredServices();
|
||||
const selectedCount = this.services.filter(s => s.selected).length;
|
||||
const selectedServices = this.services.filter(s => s.selected);
|
||||
const selectedCount = selectedServices.length;
|
||||
const categories = this.getUniqueCategories();
|
||||
|
||||
return html`
|
||||
<div class="container">
|
||||
<uplinternal-miniheading>Monitored Assets</uplinternal-miniheading>
|
||||
|
||||
<div class="controls">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="Search services..."
|
||||
.value=${this.filterText}
|
||||
@input=${(e: Event) => {
|
||||
this.filterText = (e.target as HTMLInputElement).value;
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
class="filter-button ${this.filterCategory === 'all' ? 'active' : ''}"
|
||||
@click=${() => { this.filterCategory = 'all'; }}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
${categories.map(category => html`
|
||||
<button
|
||||
class="filter-button ${this.filterCategory === category ? 'active' : ''}"
|
||||
@click=${() => { this.filterCategory = category; }}
|
||||
>
|
||||
${category}
|
||||
</button>
|
||||
`)}
|
||||
|
||||
<button
|
||||
class="filter-button ${this.showOnlySelected ? 'active' : ''}"
|
||||
@click=${() => { this.showOnlySelected = !this.showOnlySelected; }}
|
||||
>
|
||||
${this.showOnlySelected ? 'Show All' : 'Selected Only'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="filter-button"
|
||||
@click=${() => this.selectAll()}
|
||||
>
|
||||
Select All
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="filter-button"
|
||||
@click=${() => this.selectNone()}
|
||||
>
|
||||
Select None
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="assets-grid">
|
||||
${this.loading ? html`
|
||||
<div class="loading-message">Loading services...</div>
|
||||
` : filteredServices.length === 0 ? html`
|
||||
<div class="no-results">No services found matching your criteria</div>
|
||||
` : filteredServices.map(service => html`
|
||||
<div
|
||||
class="asset-card ${service.selected ? 'selected' : ''}"
|
||||
@click=${() => this.toggleService(service.id)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="asset-checkbox"
|
||||
.checked=${service.selected}
|
||||
@click=${(e: Event) => e.stopPropagation()}
|
||||
@change=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.toggleService(service.id);
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="asset-info">
|
||||
<div class="asset-name">${service.displayName}</div>
|
||||
${service.description ? html`
|
||||
<div class="asset-description">${service.description}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="asset-status">
|
||||
<div class="status-indicator ${service.currentStatus}"></div>
|
||||
<div class="status-text">${service.currentStatus.replace(/_/g, ' ')}</div>
|
||||
<div class="selected-services">
|
||||
${selectedCount === 0 ? html`
|
||||
<span style="color: ${cssManager.bdTheme('#9ca3af', '#71717a')}; font-size: 13px;">
|
||||
No services selected
|
||||
</span>
|
||||
` : selectedCount > 5 && !this.expanded ? html`
|
||||
${selectedServices.slice(0, 4).map(service => html`
|
||||
<div class="service-pill">
|
||||
<span class="status-dot ${service.currentStatus}"></span>
|
||||
<span>${service.displayName}</span>
|
||||
</div>
|
||||
`)}
|
||||
<span style="color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')}; font-size: 12px;">
|
||||
+${selectedCount - 4} more
|
||||
</span>
|
||||
` : selectedServices.map(service => html`
|
||||
<div class="service-pill">
|
||||
<span class="status-dot ${service.currentStatus}"></span>
|
||||
<span>${service.displayName}</span>
|
||||
</div>
|
||||
`)}
|
||||
|
||||
<button
|
||||
class="manage-button"
|
||||
@click=${() => { this.expanded = !this.expanded; }}
|
||||
>
|
||||
${this.expanded ? 'Close' : 'Manage Services'}
|
||||
<svg
|
||||
width="10"
|
||||
height="6"
|
||||
viewBox="0 0 10 6"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
style="transform: rotate(${this.expanded ? '180deg' : '0'}); transition: transform 0.2s;"
|
||||
>
|
||||
<path
|
||||
d="M1 1L5 5L9 1"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="summary">
|
||||
${selectedCount} of ${this.services.length} services selected
|
||||
</div>
|
||||
${this.expanded ? html`
|
||||
<div class="expandable-section">
|
||||
<div class="expandable-content">
|
||||
<div class="controls">
|
||||
<input
|
||||
type="text"
|
||||
class="search-input"
|
||||
placeholder="Search services..."
|
||||
.value=${this.filterText}
|
||||
@input=${(e: Event) => {
|
||||
this.filterText = (e.target as HTMLInputElement).value;
|
||||
}}
|
||||
/>
|
||||
|
||||
<button
|
||||
class="filter-button ${this.filterCategory === 'all' ? 'active' : ''}"
|
||||
@click=${() => { this.filterCategory = 'all'; }}
|
||||
>
|
||||
All
|
||||
</button>
|
||||
|
||||
${categories.map(category => html`
|
||||
<button
|
||||
class="filter-button ${this.filterCategory === category ? 'active' : ''}"
|
||||
@click=${() => { this.filterCategory = category; }}
|
||||
>
|
||||
${category}
|
||||
</button>
|
||||
`)}
|
||||
|
||||
<button
|
||||
class="filter-button ${this.showOnlySelected ? 'active' : ''}"
|
||||
@click=${() => { this.showOnlySelected = !this.showOnlySelected; }}
|
||||
>
|
||||
${this.showOnlySelected ? 'Show All' : 'Selected Only'}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="filter-button"
|
||||
@click=${() => this.selectAll()}
|
||||
>
|
||||
Select All
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="filter-button"
|
||||
@click=${() => this.selectNone()}
|
||||
>
|
||||
Select None
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="assets-grid">
|
||||
${this.loading ? html`
|
||||
<div class="loading-message">Loading services...</div>
|
||||
` : this.renderServiceGrid()}
|
||||
</div>
|
||||
|
||||
<div class="summary">
|
||||
${selectedCount} of ${this.services.length} services selected
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
@@ -440,4 +530,42 @@ export class UplStatuspageAssetsselector extends DeesElement {
|
||||
composed: true
|
||||
}));
|
||||
}
|
||||
|
||||
private renderServiceGrid(): TemplateResult {
|
||||
const filteredServices = this.getFilteredServices();
|
||||
|
||||
if (filteredServices.length === 0) {
|
||||
return html`<div class="no-results">No services found matching your criteria</div>`;
|
||||
}
|
||||
|
||||
return html`${filteredServices.map(service => html`
|
||||
<div
|
||||
class="asset-card ${service.selected ? 'selected' : ''}"
|
||||
@click=${() => this.toggleService(service.id)}
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="asset-checkbox"
|
||||
.checked=${service.selected}
|
||||
@click=${(e: Event) => e.stopPropagation()}
|
||||
@change=${(e: Event) => {
|
||||
e.stopPropagation();
|
||||
this.toggleService(service.id);
|
||||
}}
|
||||
/>
|
||||
|
||||
<div class="asset-info">
|
||||
<div class="asset-name">${service.displayName}</div>
|
||||
${service.description ? html`
|
||||
<div class="asset-description">${service.description}</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<div class="asset-status">
|
||||
<div class="status-indicator ${service.currentStatus}"></div>
|
||||
<div class="status-text">${service.currentStatus.replace(/_/g, ' ')}</div>
|
||||
</div>
|
||||
</div>
|
||||
`)}`;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user