uptime.link/catalog
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Jürgen Kunz
2025-06-29 22:49:47 +00:00
parent f6bf598481
commit 0ad46c1ed5
1 changed files with 80 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

176
ts_web/elements/upl-statuspage-statusbar.ts
View File

@@ -53,160 +53,144 @@ export class UplStatuspageStatusbar extends DeesElement {
.statusbar-inner { .statusbar-inner {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: space-between;
min-height: 64px; min-height: 56px;
padding: 16px 24px; padding: 16px 20px;
border-radius: 8px; border-radius: 6px;
cursor: pointer; cursor: ${cssManager.bdTheme('default', 'default')};
transition: all 0.2s ease; transition: all 0.2s ease;
position: relative; position: relative;
overflow: hidden; overflow: hidden;
font-weight: 500; font-weight: 500;
font-size: 16px; font-size: 14px;
border: 1px solid transparent; background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06); border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
box-shadow: ${cssManager.bdTheme('0 1px 2px 0 rgba(0, 0, 0, 0.05)', 'none')};
} }
.statusbar-inner:hover { .statusbar-inner:hover {
transform: translateY(-1px); background: ${cssManager.bdTheme('#f9fafb', '#0f0f0f')};
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
} }
.statusbar-inner:active { .status-indicator {
transform: translateY(0); width: 8px;
height: 8px;
border-radius: 50%;
flex-shrink: 0;
} }
.statusbar-inner.operational { .statusbar-inner.operational .status-indicator {
background: ${colors.status.operational}; background: ${colors.status.operational};
border-color: ${colors.status.operational};
color: white;
} }
.statusbar-inner.degraded { .statusbar-inner.degraded .status-indicator {
background: ${colors.status.degraded}; background: ${colors.status.degraded};
border-color: ${colors.status.degraded};
color: white;
} }
.statusbar-inner.partial_outage { .statusbar-inner.partial_outage .status-indicator {
background: ${colors.status.partial}; background: ${colors.status.partial};
border-color: ${colors.status.partial};
color: white;
} }
.statusbar-inner.major_outage { .statusbar-inner.major_outage .status-indicator {
background: ${colors.status.major}; background: ${colors.status.major};
border-color: ${colors.status.major};
color: white;
} }
.statusbar-inner.maintenance { .statusbar-inner.maintenance .status-indicator {
background: ${colors.status.maintenance}; background: ${colors.status.maintenance};
border-color: ${colors.status.maintenance};
color: white;
} }
.status-content { .status-content {
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
gap: 4px; gap: 12px;
flex: 1;
} }
.status-main { .status-main {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 8px; gap: 12px;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
} }
.status-icon { .status-details {
display: inline-flex; font-size: 13px;
align-items: center; color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
justify-content: center;
width: 20px;
height: 20px;
font-size: 14px;
} }
.loading-skeleton { .loading-skeleton {
background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
border-radius: 6px;
height: 56px;
position: relative;
overflow: hidden;
}
.loading-skeleton::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: ${cssManager.bdTheme( background: ${cssManager.bdTheme(
'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)', 'linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.03) 50%, transparent 100%)',
'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)' 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.03) 50%, transparent 100%)'
)}; )};
background-size: 200% 100%;
animation: loading 1.5s infinite; animation: loading 1.5s infinite;
height: 64px;
border-radius: 8px;
} }
@keyframes loading { @keyframes loading {
0% { 0% {
background-position: 200% 0; transform: translateX(-100%);
} }
100% { 100% {
background-position: -200% 0; transform: translateX(200%);
} }
} }
.status-details {
font-size: 14px;
opacity: 0.9;
}
.last-updated { .last-updated {
font-size: 13px; font-size: 12px;
text-align: right;
margin-top: 12px;
color: ${cssManager.bdTheme('#6b7280', '#9ca3af')}; color: ${cssManager.bdTheme('#6b7280', '#9ca3af')};
white-space: nowrap;
} }
@media (max-width: 640px) { @media (max-width: 640px) {
.statusbar-inner { .statusbar-inner {
font-size: 14px; font-size: 13px;
padding: 12px 16px; padding: 12px 16px;
min-height: 56px; min-height: 48px;
} }
.status-icon { .status-content {
width: 18px; gap: 10px;
height: 18px; }
font-size: 12px;
.status-indicator {
width: 6px;
height: 6px;
}
.last-updated {
font-size: 11px;
} }
} }
`, `,
] ]
public render(): TemplateResult { public render(): TemplateResult {
const getStatusIcon = () => {
switch (this.overallStatus.status) {
case 'operational':
return '✓';
case 'degraded':
return '!';
case 'partial_outage':
return '⚠';
case 'major_outage':
return '✕';
case 'maintenance':
return '🔧';
default:
return '';
}
};
const formatLastUpdated = () => { const formatLastUpdated = () => {
const date = new Date(this.overallStatus.lastUpdated); const date = new Date(this.overallStatus.lastUpdated);
return date.toLocaleString(); const now = new Date();
}; const diff = now.getTime() - date.getTime();
const minutes = Math.floor(diff / 60000);
const handleClick = () => {
if (this.expandable) { if (minutes < 1) return 'Just now';
this.dispatchEvent(new CustomEvent('statusClick', { if (minutes < 60) return `${minutes}m ago`;
detail: { status: this.overallStatus }, const hours = Math.floor(minutes / 60);
bubbles: true, if (hours < 24) return `${hours}h ago`;
composed: true return date.toLocaleDateString();
}));
}
}; };
return html` return html`
@@ -214,21 +198,21 @@ export class UplStatuspageStatusbar extends DeesElement {
${this.loading ? html` ${this.loading ? html`
<div class="loading-skeleton"></div> <div class="loading-skeleton"></div>
` : html` ` : html`
<div class="statusbar-inner ${this.overallStatus.status}" @click=${handleClick}> <div class="statusbar-inner ${this.overallStatus.status}">
<div class="status-content"> <div class="status-content">
<div class="status-indicator"></div>
<div class="status-main"> <div class="status-main">
<span class="status-icon">${getStatusIcon()}</span>
<span>${this.overallStatus.message}</span> <span>${this.overallStatus.message}</span>
${this.overallStatus.affectedServices > 0 ? html`
<span class="status-details">
· ${this.overallStatus.affectedServices} of ${this.overallStatus.totalServices} services affected
</span>
` : ''}
</div> </div>
${this.overallStatus.affectedServices > 0 ? html`
<div class="status-details">
${this.overallStatus.affectedServices} of ${this.overallStatus.totalServices} services affected
</div>
` : ''}
</div> </div>
</div> <div class="last-updated">
<div class="last-updated"> ${formatLastUpdated()}
Last updated: ${formatLastUpdated()} </div>
</div> </div>
`} `}
</div> </div>