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:36:12 +00:00
parent 313e736f29
commit f7d3709dac
4 changed files with 89 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
ts_web/elements/upl-statuspage-statusdetails.ts
View File

@@ -75,7 +75,6 @@ export class UplStatuspageStatusdetails extends DeesElement {
display: flex;
gap: 2px;
padding: ${unsafeCSS(spacing.sm)};
background: ${colors.background.secondary};
border-radius: ${unsafeCSS(borderRadius.base)};
overflow: hidden;
}
@@ -87,12 +86,11 @@ export class UplStatuspageStatusdetails extends DeesElement {
cursor: pointer;
transition: all 0.2s ease;
position: relative;
opacity: 0.9;
}
.mainbox .barContainer .bar:hover {
opacity: 1;
transform: scaleY(1.05);
transform: scaleY(1.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
}
.mainbox .barContainer .bar.operational {
@@ -136,14 +134,15 @@ export class UplStatuspageStatusdetails extends DeesElement {
justify-content: space-between;
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.sm)} 0;
font-size: 12px;
color: ${colors.text.secondary};
color: ${cssManager.bdTheme('#4b5563', '#9ca3af')};
font-family: ${unsafeCSS(fonts.mono)};
font-weight: 500;
}
.tooltip {
position: absolute;
background: ${cssManager.bdTheme('#1a1a1a', '#ffffff')};
color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
background: ${cssManager.bdTheme('#18181b', '#ffffff')};
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
padding: ${unsafeCSS(spacing.sm)} ${unsafeCSS(spacing.md)};
border-radius: ${unsafeCSS(borderRadius.base)};
font-size: 13px;
@@ -153,7 +152,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
z-index: 10;
white-space: nowrap;
box-shadow: ${unsafeCSS(shadows.lg)};
border: 1px solid ${colors.border.default};
border: 1px solid ${cssManager.bdTheme('rgba(0, 0, 0, 0.1)', 'rgba(255, 255, 255, 0.1)')};
}
.tooltip.visible {
@@ -164,7 +163,7 @@ export class UplStatuspageStatusdetails extends DeesElement {
font-weight: 600;
display: block;
margin-bottom: ${unsafeCSS(spacing.xs)};
color: ${cssManager.bdTheme('#ffffff', '#1a1a1a')};
color: ${cssManager.bdTheme('#fafafa', '#18181b')};
}
.tooltip div {
@@ -216,6 +215,26 @@ export class UplStatuspageStatusdetails extends DeesElement {
height: 12px;
border-radius: ${unsafeCSS(borderRadius.sm)};
}
.legend-color.operational {
background: ${colors.status.operational};
}
.legend-color.degraded {
background: ${colors.status.degraded};
}
.legend-color.partial_outage {
background: ${colors.status.partial};
}
.legend-color.major_outage {
background: ${colors.status.major};
}
.legend-color.maintenance {
background: ${colors.status.maintenance};
}
@media (max-width: 640px) {
.container {
@@ -239,14 +258,13 @@ export class UplStatuspageStatusdetails extends DeesElement {
];
public render(): TemplateResult {
const now = Date.now();
const currentHour = new Date().getHours();
const timeIndicatorPosition = this.calculateTimeIndicatorPosition();
return html`
<uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
<div class="mainbox">
${this.loading ? html`
<div class="container">
<uplinternal-miniheading>${this.serviceName} - Last ${this.hoursToShow} Hours</uplinternal-miniheading>
<div class="mainbox">
${this.loading ? html`
<div class="loading-skeleton">
${Array(this.hoursToShow).fill(0).map(() => html`<div class="skeleton-bar"></div>`)}
</div>
@@ -263,32 +281,33 @@ export class UplStatuspageStatusdetails extends DeesElement {
<span>Now</span>
</div>
`}
</div>
${!this.loading ? html`
<div class="status-legend">
<div class="legend-item">
<div class="legend-color" style="background: #2deb51"></div>
<span>Operational</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #FF9800"></div>
<span>Degraded</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #FF6F00"></div>
<span>Partial Outage</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #F44336"></div>
<span>Major Outage</span>
</div>
<div class="legend-item">
<div class="legend-color" style="background: #2196F3"></div>
<span>Maintenance</span>
</div>
</div>
` : ''}
<div class="tooltip" id="tooltip"></div>
${!this.loading ? html`
<div class="status-legend">
<div class="legend-item">
<div class="legend-color operational"></div>
<span>Operational</span>
</div>
<div class="legend-item">
<div class="legend-color degraded"></div>
<span>Degraded</span>
</div>
<div class="legend-item">
<div class="legend-color partial_outage"></div>
<span>Partial Outage</span>
</div>
<div class="legend-item">
<div class="legend-color major_outage"></div>
<span>Major Outage</span>
</div>
<div class="legend-item">
<div class="legend-color maintenance"></div>
<span>Maintenance</span>
</div>
</div>
` : ''}
<div class="tooltip" id="tooltip"></div>
</div>
`;
}