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 23:25:42 +00:00
parent 0f0764564b
commit 5fcf910eab
1 changed files with 120 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

177
ts_web/elements/upl-statuspage-statusmonth.ts
View File

@@ -67,56 +67,57 @@ export class UplStatuspageStatusmonth extends DeesElement {
.mainbox { .mainbox {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: ${unsafeCSS(spacing.lg)}; gap: ${unsafeCSS(spacing.md)};
} }
.statusMonth { .statusMonth {
background: ${colors.background.card}; background: ${cssManager.bdTheme('#ffffff', '#0a0a0a')};
padding: ${unsafeCSS(spacing.lg)}; padding: ${unsafeCSS(spacing.lg)};
border-radius: ${unsafeCSS(borderRadius.md)}; border-radius: ${unsafeCSS(borderRadius.base)};
border: 1px solid ${colors.border.default}; border: 1px solid ${cssManager.bdTheme('#e5e7eb', '#27272a')};
box-shadow: ${unsafeCSS(shadows.sm)};
position: relative; position: relative;
transition: border-color 0.2s ease;
}
.statusMonth:hover {
border-color: ${cssManager.bdTheme('#d1d5db', '#3f3f46')};
} }
.month-header { .month-header {
font-size: 14px; font-size: 14px;
font-weight: 600; font-weight: 500;
margin-bottom: ${unsafeCSS(spacing.md)}; margin-bottom: ${unsafeCSS(spacing.md)};
text-align: center; color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${colors.text.primary}; letter-spacing: -0.01em;
letter-spacing: 0.02em;
} }
.days-grid { .days-grid {
display: grid; display: grid;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
gap: 3px; gap: 2px;
} }
.weekday-label { .weekday-label {
font-size: 12px; font-size: 11px;
text-align: center; text-align: center;
color: ${colors.text.secondary}; color: ${cssManager.bdTheme('#9ca3af', '#71717a')};
font-weight: 500; font-weight: 400;
height: 20px; height: 20px;
line-height: 20px; line-height: 20px;
margin-bottom: ${unsafeCSS(spacing.xs)}; margin-bottom: ${unsafeCSS(spacing.sm)};
} }
.statusDay { .statusDay {
aspect-ratio: 1; aspect-ratio: 1;
border-radius: ${unsafeCSS(borderRadius.sm)}; border-radius: 2px;
cursor: pointer; cursor: pointer;
transition: all 0.2s ease; transition: opacity 0.15s ease;
position: relative; position: relative;
} }
.statusDay:hover { .statusDay:hover:not(.empty) {
transform: scale(1.15); opacity: 0.8;
box-shadow: ${unsafeCSS(shadows.md)};
z-index: 1;
} }
.statusDay.operational { .statusDay.operational {
@@ -151,54 +152,96 @@ export class UplStatuspageStatusmonth extends DeesElement {
} }
.overall-uptime { .overall-uptime {
text-align: center;
font-size: 13px; font-size: 13px;
margin-top: ${unsafeCSS(spacing.md)}; margin-top: ${unsafeCSS(spacing.md)};
color: ${colors.text.secondary}; padding-top: ${unsafeCSS(spacing.md)};
line-height: 1.4; border-top: 1px solid ${cssManager.bdTheme('#f3f4f6', '#1f1f1f')};
color: ${cssManager.bdTheme('#6b7280', '#a1a1aa')};
display: flex;
flex-direction: column;
gap: 4px;
}
.uptime-stat {
display: flex;
justify-content: space-between;
align-items: center;
}
.uptime-value {
font-weight: 500;
color: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
font-variant-numeric: tabular-nums;
} }
.loading-skeleton { .loading-skeleton {
height: 280px; height: 200px;
background: ${cssManager.bdTheme( display: flex;
'linear-gradient(90deg, #f3f4f6 25%, #e5e7eb 50%, #f3f4f6 75%)', flex-direction: column;
'linear-gradient(90deg, #1f1f1f 25%, #262626 50%, #1f1f1f 75%)' gap: ${unsafeCSS(spacing.sm)};
)}; padding: ${unsafeCSS(spacing.lg)};
background-size: 200% 100%; }
animation: loading 1.5s infinite;
border-radius: ${unsafeCSS(borderRadius.md)}; .skeleton-header {
height: 20px;
width: 80px;
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
border-radius: 4px;
animation: pulse 2s infinite;
}
.skeleton-grid {
flex: 1;
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 2px;
}
.skeleton-day {
background: ${cssManager.bdTheme('#f3f4f6', '#27272a')};
border-radius: 2px;
animation: pulse 2s infinite;
animation-delay: calc(var(--index) * 0.05s);
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.5; }
} }
@keyframes loading { @keyframes loading {
0% { background-position: 200% 0; } 0% { transform: translateX(-100%); }
100% { background-position: -200% 0; } 100% { transform: translateX(200%); }
} }
.tooltip { .tooltip {
position: absolute; position: absolute;
background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')}; background: ${cssManager.bdTheme('#0a0a0a', '#fafafa')};
color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')}; color: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)}; padding: 8px 12px;
border-radius: ${unsafeCSS(borderRadius.base)}; border-radius: 4px;
font-size: 12px; font-size: 12px;
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity 0.2s; transition: opacity 0.15s;
z-index: 10; z-index: 50;
white-space: nowrap; white-space: nowrap;
box-shadow: ${unsafeCSS(shadows.lg)}; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
border: 1px solid ${colors.border.default}; line-height: 1.5;
} }
.tooltip.visible { .tooltip.visible {
opacity: 0.95; opacity: 1;
} }
.tooltip strong { .tooltip-date {
font-weight: 600; font-weight: 500;
display: block; margin-bottom: 4px;
margin-bottom: ${unsafeCSS(spacing.xs)}; }
color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
.tooltip-stat {
font-size: 11px;
opacity: 0.9;
} }
.no-data-message { .no-data-message {
@@ -221,6 +264,11 @@ export class UplStatuspageStatusmonth extends DeesElement {
.statusMonth { .statusMonth {
padding: ${unsafeCSS(spacing.md)}; padding: ${unsafeCSS(spacing.md)};
} }
.loading-skeleton {
height: 180px;
padding: ${unsafeCSS(spacing.md)};
}
} }
` `
] ]
@@ -233,9 +281,16 @@ export class UplStatuspageStatusmonth extends DeesElement {
<uplinternal-miniheading>${this.serviceName} - Last ${totalDays} Days</uplinternal-miniheading> <uplinternal-miniheading>${this.serviceName} - Last ${totalDays} Days</uplinternal-miniheading>
<div class="mainbox"> <div class="mainbox">
${this.loading ? html` ${this.loading ? html`
${Array(this.monthsToShow).fill(0).map(() => html` ${Array(this.monthsToShow).fill(0).map((_, index) => html`
<div class="statusMonth"> <div class="statusMonth">
<div class="loading-skeleton"></div> <div class="loading-skeleton">
<div class="skeleton-header"></div>
<div class="skeleton-grid">
${Array(35).fill(0).map((_, i) => html`
<div class="skeleton-day" style="--index: ${i}"></div>
`)}
</div>
</div>
</div> </div>
`)} `)}
` : this.monthlyData.length === 0 ? html` ` : this.monthlyData.length === 0 ? html`
@@ -261,8 +316,16 @@ export class UplStatuspageStatusmonth extends DeesElement {
${monthData.days.map(day => this.renderDay(day))} ${monthData.days.map(day => this.renderDay(day))}
</div> </div>
<div class="overall-uptime"> <div class="overall-uptime">
${monthData.overallUptime.toFixed(2)}% uptime <div class="uptime-stat">
${monthData.totalIncidents > 0 ? html`<br/>${monthData.totalIncidents} incidents` : ''} <span>Uptime</span>
<span class="uptime-value">${monthData.overallUptime.toFixed(2)}%</span>
</div>
${monthData.totalIncidents > 0 ? html`
<div class="uptime-stat">
<span>Incidents</span>
<span class="uptime-value">${monthData.totalIncidents}</span>
</div>
` : ''}
</div> </div>
</div> </div>
`; `;
@@ -319,11 +382,11 @@ export class UplStatuspageStatusmonth extends DeesElement {
statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1); statusText = statusText.charAt(0).toUpperCase() + statusText.slice(1);
tooltip.innerHTML = ` tooltip.innerHTML = `
<div><strong>${dateStr}</strong></div> <div class="tooltip-date">${dateStr}</div>
<div>Status: ${statusText}</div> <div class="tooltip-stat">Status: ${statusText}</div>
<div>Uptime: ${day.uptime.toFixed(2)}%</div> <div class="tooltip-stat">Uptime: ${day.uptime.toFixed(2)}%</div>
${day.incidents > 0 ? `<div>Incidents: ${day.incidents}</div>` : ''} ${day.incidents > 0 ? `<div class="tooltip-stat">Incidents: ${day.incidents}</div>` : ''}
${day.totalDowntime > 0 ? `<div>Downtime: ${day.totalDowntime} minutes</div>` : ''} ${day.totalDowntime > 0 ? `<div class="tooltip-stat">Downtime: ${day.totalDowntime} min</div>` : ''}
`; `;
const rect = (event.target as HTMLElement).getBoundingClientRect(); const rect = (event.target as HTMLElement).getBoundingClientRect();