Uptime
Description
The Uptime component is part of the Tesserae UI library.
Displays system status over time using colored segments and month grids.
Samples
Last 90 days uptime
uptime-sample.js
using System;
using System.Collections.Generic;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var barsItems = new List<(UptimeStatus, IComponent)>();
for (int i = 0; i < 90; i++)
{
var status = GetRandomStatus();
barsItems.Add((status, GetTooltip(status, i)));
}
var component = UptimeBars().Items(barsItems);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
private static UptimeStatus GetRandomStatus()
{
var r = Math.Random();
if (r > 0.95) return UptimeStatus.Major;
if (r > 0.90) return UptimeStatus.Minor;
if (r > 0.85) return UptimeStatus.Maintenance;
return UptimeStatus.Operational;
}
private static IComponent GetTooltip(UptimeStatus status, int daysAgo)
{
var date = DateTime.Today.AddDays(-daysAgo).ToShortDateString();
return Raw(
Div(_("tss-uptime-tooltip-content"),
Stack().Children(
TextBlock(date).SemiBold(),
TextBlock(status.ToString()).Small()
).Render()
)
);
}
}
}
Service Uptime (compact view)
uptime-2-sample.js
using System;
using System.Collections.Generic;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var barsItems = new List<(UptimeStatus, IComponent)>();
for (int i = 0; i < 90; i++)
{
var status = GetRandomStatus();
barsItems.Add((status, GetTooltip(status, i)));
}
var component = UptimeBars().Compact().Items(barsItems);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
private static UptimeStatus GetRandomStatus()
{
var r = Math.Random();
if (r > 0.95) return UptimeStatus.Major;
if (r > 0.90) return UptimeStatus.Minor;
if (r > 0.85) return UptimeStatus.Maintenance;
return UptimeStatus.Operational;
}
private static IComponent GetTooltip(UptimeStatus status, int daysAgo)
{
var date = DateTime.Today.AddDays(-daysAgo).ToShortDateString();
return Raw(
Div(_("tss-uptime-tooltip-content"),
Stack().Children(
TextBlock(date).SemiBold(),
TextBlock(status.ToString()).Small()
).Render()
)
);
}
}
}
Service Uptime History
uptime-3-sample.js
using System;
using System.Collections.Generic;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;
namespace Tesserae.Tests
{
internal static class App
{
private static void Main()
{
var component = Grid(1.fr(), 1.fr(), 1.fr()).Gap(16.px()).Children(
UptimeCalendar("July 2024", "99.8%").Items(GetCalendarItems(90)),
UptimeCalendar("August 2024", "98.1%").Items(GetCalendarItems(60)),
UptimeCalendar("September 2024", "100%").Items(GetCalendarItems(30))
);
document.body.style.overflow = "hidden";
MountCenteredToBody(component);
}
private static IEnumerable<(UptimeStatus, IComponent)> GetCalendarItems(int startDaysAgo)
{
var calItems = new List<(UptimeStatus, IComponent)>();
for (int i = 0; i < 30; i++)
{
var status = GetRandomStatus();
calItems.Add((status, GetTooltip(status, startDaysAgo - i)));
}
for (int i = 0; i < 5; i++)
{
calItems.Add((UptimeStatus.Future, null));
}
return calItems;
}
private static UptimeStatus GetRandomStatus()
{
var r = Math.Random();
if (r > 0.95) return UptimeStatus.Major;
if (r > 0.90) return UptimeStatus.Minor;
if (r > 0.85) return UptimeStatus.Maintenance;
return UptimeStatus.Operational;
}
private static IComponent GetTooltip(UptimeStatus status, int daysAgo)
{
var date = DateTime.Today.AddDays(-daysAgo).ToShortDateString();
return Raw(
Div(_("tss-uptime-tooltip-content"),
Stack().Children(
TextBlock(date).SemiBold(),
TextBlock(status.ToString()).Small()
).Render()
)
);
}
}
}